red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现话术功能

Browse Source
This commit is contained in:
WUSIJIAN
2025-11-27 15:37:13 +08:00
parent 4d6f49598e
commit 0ad816cc6d
11 changed files with 973 additions and 610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

650
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -33,7 +33,7 @@
"pinia": "^2.1.7", "pinia": "^2.1.7",
"print-js": "^1.6.0", "print-js": "^1.6.0",
"qrcodejs2-fixes": "^0.0.2", "qrcodejs2-fixes": "^0.0.2",
"qs": "^6.12.0", "qs": "^6.14.0",
"screenfull": "^6.0.2", "screenfull": "^6.0.2",
"sortablejs": "^1.15.2", "sortablejs": "^1.15.2",
"spark-md5": "^3.0.2", "spark-md5": "^3.0.2",
@@ -51,6 +51,7 @@
"devDependencies": { "devDependencies": {
"@types/node": "^20.11.28", "@types/node": "^20.11.28",
"@types/nprogress": "^0.2.3", "@types/nprogress": "^0.2.3",
"@types/qs": "^6.14.0",
"@types/sortablejs": "^1.15.8", "@types/sortablejs": "^1.15.8",
"@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0", "@typescript-eslint/parser": "^7.2.0",

70
src/api/customerService/script/index.ts
View File

@@ -1,65 +1,37 @@
import request from '/@/utils/request'; import request, { newService } from '/@/utils/request';
export function getRoleList(query: Object) { //获取话术列表
return request({ export function getscriptList(data: object) {
url: '/api/v1/system/role/list', return newService({
method: 'get', url: '/customerService/speechcraft/list',
params: query,
});
}
export function getRoleParams() {
return request({
url: '/api/v1/system/role/getParams',
method: 'get',
});
}
export function addRole(data: object) {
return request({
url: '/api/v1/system/role/add',
method: 'post', method: 'post',
data: data, data: data,
}); });
} }
export function getRole(id: number) { //获取话术列表
return request({ export function getscriptAdd(data: object) {
url: '/api/v1/system/role/get', return newService({
method: 'get', url: '/customerService/speechcraft/add',
params: { id }, method: 'post',
});
}
export function editRole(data: object) {
return request({
url: '/api/v1/system/role/edit',
method: 'put',
data: data, data: data,
}); });
} }
export function deleteRole(id: number) { //删除话术列表
return request({ export function deletescript(data: object) {
url: '/api/v1/system/role/delete', return newService({
method: 'delete', url: '/customerService/speechcraft/delete',
data: { ids: [id] }, method: 'post',
});
}
export function dataScope(data: any) {
return request({
url: '/api/v1/system/role/dataScope',
method: 'put',
data: data, data: data,
}); });
} }
// 根据角色ID查询部门树结构 //更新话术列表
export function roleDeptTreeSelect(roleId: number) { export function updatescript(data: object) {
return request({ return newService({
url: '/api/v1/system/role/deptTreeSelect', url: '/customerService/speechcraft/update',
method: 'get', method: 'post',
params: { roleId }, data: data,
}); });
} }

67
src/utils/request.ts
View File

@@ -3,40 +3,54 @@ import { ElMessage, ElMessageBox } from 'element-plus';
import { Session } from '/@/utils/storage'; import { Session } from '/@/utils/storage';
import qs from 'qs'; import qs from 'qs';
// 配置新建一个 axios 实例 // 配置新建第一个 axios 实例（原来的主服务）
const service: AxiosInstance = axios.create({ const service: AxiosInstance = axios.create({
baseURL: import.meta.env.VITE_API_URL, baseURL: import.meta.env.VITE_API_URL, // 从环境变量获取基础URL http://192.168.3.49:8808/
timeout: 50000, timeout: 50000, // 50秒超时
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' }, // 默认JSON格式
paramsSerializer: { paramsSerializer: {
// 参数序列化配置
serialize(params) { serialize(params) {
return qs.stringify(params, { allowDots: true, arrayFormat: 'brackets' }); return qs.stringify(params, { allowDots: true, arrayFormat: 'brackets' });
}, },
}, },
}); });
// 添加请求拦截器 // 配置新建第二个 axios 实例（新功能服务）
service.interceptors.request.use( const newService: AxiosInstance = axios.create({
(config) => { baseURL: 'http://192.168.3.49:8000/', // 新后端地址
timeout: 50000, // 50秒超时
headers: { 'Content-Type': 'application/json' }, // 默认JSON格式
paramsSerializer: {
// 参数序列化配置
serialize(params) {
return qs.stringify(params, { allowDots: true, arrayFormat: 'brackets' });
},
},
});
// 通用的请求拦截器函数
const requestInterceptor = (config: any) => {
// 在发送请求之前做些什么 token // 在发送请求之前做些什么 token
if (Session.get('token')) { if (Session.get('token')) {
config.headers!['Authorization'] = `Bearer ${Session.get('token')}`; config.headers!['Authorization'] = `Bearer ${Session.get('token')}`;
} }
return config; return config;
}, };
(error) => {
// 通用的请求错误处理函数
const requestErrorHandler = (error: any) => {
// 对请求错误做些什么 // 对请求错误做些什么
return Promise.reject(error); return Promise.reject(error);
} };
);
// 添加响应拦截器 // 通用的响应拦截器函数
service.interceptors.response.use( const responseInterceptor = (response: any) => {
(response) => {
// 对响应数据做点什么 // 对响应数据做点什么
const res = response.data; const res = response.data;
const code = response.data.code; const code = response.data.code;
if (code === 401) { if (code === 401) {
// 401未授权：token过期，跳转登录页
ElMessageBox.alert('登录状态已过期，请重新登录', '提示', { confirmButtonText: '确定' }) ElMessageBox.alert('登录状态已过期，请重新登录', '提示', { confirmButtonText: '确定' })
.then(() => { .then(() => {
Session.clear(); // 清除浏览器全部临时缓存 Session.clear(); // 清除浏览器全部临时缓存
@@ -44,25 +58,36 @@ service.interceptors.response.use(
}) })
.catch(() => {}); .catch(() => {});
} else if (code !== 0) { } else if (code !== 0) {
// 业务逻辑错误：显示错误消息
ElMessage.error(res.message); ElMessage.error(res.message);
return Promise.reject(new Error(res.message)); return Promise.reject(new Error(res.message));
} else { } else {
return res; return res;
} }
}, };
(error) => {
// 通用的响应错误处理函数
const responseErrorHandler = (error: any) => {
// 对响应错误做点什么 // 对响应错误做点什么
if (error.message.indexOf('timeout') != -1) { if (error.message.indexOf('timeout') != -1) {
ElMessage.error('网络超时'); ElMessage.error('网络超时');
} else if (error.message == 'Network Error') { } else if (error.message == 'Network Error') {
ElMessage.error('网络连接错误'); ElMessage.error('网络连接错误');
} else { } else {
if (error.response.data) ElMessage.error(error.response.statusText); if (error.response?.data) ElMessage.error(error.response.statusText);
else ElMessage.error('接口路径找不到'); else ElMessage.error('接口路径找不到');
} }
return Promise.reject(error); return Promise.reject(error);
} };
);
// 导出 axios 实例 // 为第一个实例添加拦截器
export default service; service.interceptors.request.use(requestInterceptor, requestErrorHandler);
service.interceptors.response.use(responseInterceptor, responseErrorHandler);
// 为第二个实例添加拦截器
newService.interceptors.request.use(requestInterceptor, requestErrorHandler);
newService.interceptors.response.use(responseInterceptor, responseErrorHandler);
// 导出两个 axios 实例
export default service; // 原来的主服务
export { newService }; // 新功能服务

2
src/views/customerService/account/index.vue
View File

@@ -258,7 +258,7 @@ const onOpenAddRole = () => {
*/ */
const onOpenEditRole = (row: TableDataItem) => { const onOpenEditRole = (row: TableDataItem) => {
if (editRoleRef.value) { if (editRoleRef.value) {
editRoleRef.value.openDialog(row); editRoleRef.value.openDialog();
} }
}; };

2
src/views/customerService/product/index.vue
View File

@@ -27,7 +27,7 @@
</el-icon> </el-icon>
导入 导入
</el-button> </el-button>
<el-button size="default" type="info" class="ml10" @click="onOpenExport"> <el-button size="default" type="info" class="ml10" @click="onOpenExport" style="background-color: deeppink; border: 0">
<el-icon> <el-icon>
<ele-Download /> <ele-Download />
</el-icon> </el-icon>

2
src/views/customerService/report/index.vue
View File

@@ -36,7 +36,7 @@
</el-icon> </el-icon>
重置 重置
</el-button> </el-button>
<el-button size="default" type="info" class="ml10" @click="handleExport"> <el-button size="default" type="info" class="ml10" @click="handleExport" style="background-color: deeppink; border: 0">
<el-icon> <el-icon>
<ele-Download /> <ele-Download />
</el-icon> </el-icon>

67
src/views/customerService/script/component/editRole.vue
View File

@@ -1,17 +1,17 @@
<template> <template>
<div class="system-edit-role-container"> <div class="system-edit-role-container">
<el-dialog title="" v-model="isShowDialog" width="769px"> <el-dialog title="" v-model="isShowDialog" width="769px">
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px"> <el-form ref="formRef" :model="state.formData" :rules="rules" size="default" label-width="90px">
<el-row :gutter="35"> <el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="标签" prop="name"> <el-form-item label="标签" prop="name">
<el-input v-model="formData.name" placeholder="请输入标签名称" clearable /> <el-input v-model="formData.tag" :placeholder="formData.tag" clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- 富文本编辑器 --> <!-- 富文本编辑器 -->
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="产品详情" prop="content"> <el-form-item label="产品详情" prop="content">
<Editor v-model="formData.content" height="400px" placeholder="请输入产品详细描述..." /> <Editor v-model="formData.content" height="400px" :placeholder="formData.content" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@@ -31,8 +31,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, toRefs, nextTick } from 'vue'; import { ref, reactive, toRefs, nextTick } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'; import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { addRole, editRole, getRole } from '/@/api/customerService/script';
import Editor from '/@/components/editor/index.vue'; import Editor from '/@/components/editor/index.vue';
import { getscriptAdd, updatescript } from '/@/api/customerService/script';
import { Session } from '/@/utils/storage';
// console.log(Session.get('userInfo').userNickname, 'user');
// 定义类型接口 // 定义类型接口
interface MenuDataTree { interface MenuDataTree {
@@ -44,17 +46,14 @@ interface MenuDataTree {
interface DialogRow { interface DialogRow {
id: number; id: number;
name: string; tag: string;
status: number; creator: string;
listOrder: number; content: string;
remark: string;
menuIds: number[];
content?: string;
} }
// 定义事件 // 定义事件
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'getRoleList'): void; (e: 'success'): void;
}>(); }>();
// 响应式数据 // 响应式数据
@@ -63,13 +62,10 @@ const state = reactive({
isShowDialog: false, isShowDialog: false,
formData: { formData: {
id: 0, id: 0,
name: '', tag: '',
status: 1,
listOrder: 0,
remark: '',
menuIds: [],
content: '', content: '',
} as DialogRow, creator: '',
},
menuData: [] as MenuDataTree[], menuData: [] as MenuDataTree[],
menuExpand: false, menuExpand: false,
menuNodeAll: false, menuNodeAll: false,
@@ -78,7 +74,7 @@ const state = reactive({
// 表单验证规则 // 表单验证规则
const rules: FormRules = { const rules: FormRules = {
name: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }], tag: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }],
content: [{ required: true, message: '产品详情不能为空', trigger: 'blur' }], content: [{ required: true, message: '产品详情不能为空', trigger: 'blur' }],
}; };
@@ -101,23 +97,9 @@ const menuProps = {
*/ */
const openDialog = (row?: DialogRow) => { const openDialog = (row?: DialogRow) => {
resetForm(); resetForm();
console.log(row, 'row');
if (row) { if (row) {
// 编辑模式：获取角色详情 state.formData = row;
getRole(row.id)
.then((res: any) => {
if (res.data?.role) {
state.formData = {
...res.data.role,
content: res.data.role.content || '',
menuIds: res.data.menuIds ?? [],
};
}
})
.catch((error) => {
console.error('获取角色详情失败:', error);
ElMessage.error('获取角色详情失败');
});
} }
state.isShowDialog = true; state.isShowDialog = true;
@@ -151,18 +133,22 @@ const onSubmit = async () => {
state.loading = true; state.loading = true;
if (state.formData.id === 0) { if (state.formData.id === 0) {
state.formData.creator = Session.get('userInfo').userNickname;
// 新增模式 // 新增模式
await addRole(state.formData); await getscriptAdd(state.formData);
console.log(state.formData);
ElMessage.success('添加成功'); ElMessage.success('添加成功');
} else { } else {
state.formData.modifier = Session.get('userInfo').userNickname;
// 编辑模式 // 编辑模式
await editRole(state.formData); await updatescript(state.formData);
ElMessage.success('修改成功'); ElMessage.success('修改成功');
} }
// 关闭对话框并刷新列表 // 关闭对话框并刷新列表
closeDialog(); closeDialog();
emit('getRoleList'); emit('success');
} catch (error) { } catch (error) {
console.error('提交失败:', error); console.error('提交失败:', error);
ElMessage.error('操作失败'); ElMessage.error('操作失败');
@@ -180,12 +166,9 @@ const resetForm = () => {
state.menuNodeAll = false; state.menuNodeAll = false;
state.formData = { state.formData = {
id: 0, id: 0,
name: '', tag: '',
status: 1,
listOrder: 0,
remark: '',
menuIds: [],
content: '', content: '',
creator: '',
}; };
// 重置表单验证状态 // 重置表单验证状态

337
src/views/customerService/script/index.vue
View File

@@ -1,223 +1,212 @@
<template> <template>
<div class="system-role-container"> <div class="system-role-container">
<el-card shadow="hover"> <el-card shadow="hover">
<!-- 搜索和操作区域 -->
<div class="system-user-search mb15"> <div class="system-user-search mb15">
<el-form :inline="true"> <el-form :inline="true">
<el-form-item> <el-form-item>
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole"> <el-button size="default" type="success" @click="handleAdd">
<el-icon> <el-icon><FolderAdd /></el-icon>
<ele-FolderAdd />
</el-icon>
新增话术 新增话术
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<el-table :data="tableData.data" style="width: 100%">
<el-table-column type="index" label="序号" width="60" /> <!-- 数据表格 -->
<el-table-column prop="label" label="标签" show-overflow-tooltip></el-table-column> <el-table :data="tableData.data" v-loading="tableData.loading" style="width: 100%">
<el-table-column prop="creator" label="创建人" show-overflow-tooltip></el-table-column> <el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="creator" label="修改人" show-overflow-tooltip></el-table-column> <el-table-column prop="tag" label="标签" show-overflow-tooltip min-width="120" />
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column> <el-table-column prop="creator" label="创建人" show-overflow-tooltip min-width="100" />
<el-table-column prop="createdAt" label="修改时间" show-overflow-tooltip></el-table-column> <el-table-column prop="modifier" label="修改人" show-overflow-tooltip min-width="100" />
<el-table-column label="操作" width="220"> <el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip min-width="140" />
<template #default="scope"> <el-table-column prop="updatedAt" label="修改时间" show-overflow-tooltip min-width="140" />
<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)" <el-table-column label="操作" width="200" align="center" fixed="right">
><el-icon><ele-EditPen /></el-icon>修改</el-button <template #default="{ row }">
> <el-button size="small" text type="primary" @click="handleEdit(row)">
<el-button size="small" text type="primary" @click="onRowDel(scope.row)" <el-icon><EditPen /></el-icon>修改
><el-icon><ele-DeleteFilled /></el-icon>删除</el-button </el-button>
> <el-button size="small" text type="danger" @click="handleDelete(row)">
<el-icon><DeleteFilled /></el-icon>删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 分页组件 -->
<pagination <pagination
v-show="tableData.total > 0" v-if="tableData.total > 0"
:total="tableData.total" :total="tableData.total"
v-model:page="tableData.param.pageNum" v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize" v-model:limit="tableData.param.pageSize"
@pagination="roleList" @pagination="loadTableData"
/> />
</el-card> </el-card>
<EditRole ref="editRoleRef" @getRoleList="roleList" />
<!-- 编辑组件 -->
<EditRole ref="editRoleRef" @success="handleSuccess" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script setup lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue'; import { reactive, ref, onMounted, nextTick } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus'; import { ElMessageBox, ElMessage } from 'element-plus';
import EditRole from '/@/views/customerService/script/component/editRole.vue'; import { FolderAdd, EditPen, DeleteFilled } from '@element-plus/icons-vue';
import { deleteRole, getRoleList } from '/@/api/customerService/script'; import EditRole from './component/editRole.vue';
// 定义接口来定义对象的类型 import Pagination from '/@/components/pagination/index.vue';
interface TableData { import { getscriptList, deletescript } from '/@/api/customerService/script';
id: number;
status: number; // ==================== 类型定义 ====================
listOrder: number; interface ScriptItem {
name: string; id: string;
remark: string; tag: string;
dataScope: number; creator: string;
modifier: string;
createdAt: string; createdAt: string;
updatedAt: string;
content?: string;
} }
interface TableDataState {
data: Array<TableData>; interface TableParams {
total: number;
loading: boolean;
param: {
roleName: string;
roleStatus: string;
pageNum: number; pageNum: number;
pageSize: number; pageSize: number;
};
} }
//模拟数据
const dateList = ref([
{
id: 1,
status: 1,
listOrder: 0,
name: '987698789',
remark: '小红书',
dataScope: 3,
createdAt: '2022-04-01 11:38:39',
updatedAt: '2022-04-28 10:00:15',
label: '产品介绍',
creator: '张三',
},
{
id: 2,
status: 1,
listOrder: 0,
name: '987698789',
remark: '抖音',
dataScope: 3,
createdAt: '2022-04-01 11:38:39',
updatedAt: '2022-04-28 10:01:34',
label: '公司介绍',
creator: '张三',
},
{
id: 3,
status: 1,
listOrder: 0,
name: '987698789',
remark: '快手',
dataScope: 3,
createdAt: '2022-04-01 11:38:39',
updatedAt: '2022-04-01 11:38:39',
label: '病症询问',
creator: '王五',
},
{
id: 4,
status: 1,
listOrder: 0,
name: '987698789',
remark: '抖音',
dataScope: 3,
createdAt: '2022-04-01 11:38:39',
updatedAt: '2022-04-01 11:38:39',
label: '资质问题',
creator: '李四',
},
{
id: 5,
status: 1,
listOrder: 0,
name: '987698789',
remark: '抖音',
dataScope: 2,
createdAt: '2022-04-01 11:38:39',
updatedAt: '2022-04-01 11:38:39',
label: '常用沟通',
creator: '张三',
},
{
id: 8,
status: 1,
listOrder: 0,
name: '987698789',
remark: '快手',
dataScope: 2,
createdAt: '2022-04-01 11:38:39',
updatedAt: '2022-04-06 09:53:40',
label: '公司介绍',
creator: '张三',
},
]);
const { proxy } = getCurrentInstance() as any; interface TableState {
const addRoleRef = ref(); data: ScriptItem[];
const editRoleRef = ref(); total: number;
const dataScopeRef = ref(); loading: boolean;
const tableData = reactive<TableDataState>({ param: TableParams;
}
// ==================== 响应式数据 ====================
const editRoleRef = ref<InstanceType<typeof EditRole>>();
const tableData = reactive<TableState>({
data: [], data: [],
total: 0, total: 0,
loading: false, loading: false,
param: { param: {
roleName: '',
roleStatus: '',
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
}, },
}); });
// 初始化表格数据
const initTableData = () => { // ==================== 方法定义 ====================
roleList();
}; /**
const roleList = () => { * 加载表格数据
const data: Array<TableData> = []; */
getRoleList(tableData.param).then((res) => { const loadTableData = async () => {
const list = res.data.list ?? []; try {
list.map((item: TableData) => { tableData.loading = true;
data.push({
id: item.id, const response = await getscriptList(tableData.param);
status: item.status, const { list = [], total = 0 } = response.data || {};
listOrder: item.listOrder,
name: item.name, tableData.data = list;
remark: item.remark, tableData.total = total;
dataScope: item.dataScope, } catch (error) {
createdAt: item.createdAt, console.error('加载数据失败:', error);
}); ElMessage.error('数据加载失败');
}); tableData.data = [];
tableData.data = dateList.value; tableData.total = 0;
tableData.total = dateList.value.length; } finally {
}); tableData.loading = false;
}; }
// 打开新增角色弹窗
const onOpenAddRole = () => {
editRoleRef.value.openDialog();
};
// 打开修改角色弹窗
const onOpenEditRole = (row: Object) => {
editRoleRef.value.openDialog(toRaw(row));
}; };
// 删除角色 /**
const onRowDel = (row: any) => { * 新增话术
ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', { */
confirmButtonText: '确认', const handleAdd = () => {
editRoleRef.value?.openDialog();
};
/**
* 编辑话术
*/
const handleEdit = (row: ScriptItem) => {
editRoleRef.value?.openDialog(row);
};
/**
* 删除话术
*/
const handleDelete = async (row: ScriptItem) => {
try {
await ElMessageBox.confirm(`确定要删除话术「${row.tag}」吗？此操作不可恢复。`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
})
.then(() => {
deleteRole(row.id).then(() => {
ElMessage.success('删除成功');
proxy.$refs['editRoleRef'].resetMenuSession();
roleList();
}); });
}) console.log(row, 'row');
.catch(() => {}); await deletescript({ id: row.id }).then((res) => {});
ElMessage.success('删除成功');
// 重新加载数据
await loadTableData();
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
ElMessage.error('删除失败');
}
}
}; };
// 分页改变
const onHandleSizeChange = (val: number) => { /**
tableData.param.pageSize = val; * 操作成功回调
*/
const handleSuccess = () => {
loadTableData();
}; };
// 分页改变
const onHandleCurrentChange = (val: number) => { /**
tableData.param.pageNum = val; * 处理分页变化
*/
const handleSizeChange = (size: number) => {
tableData.param.pageSize = size;
tableData.param.pageNum = 1; // 重置到第一页
loadTableData();
}; };
// 页面加载时
const handleCurrentChange = (current: number) => {
tableData.param.pageNum = current;
loadTableData();
};
// ==================== 生命周期 ====================
onMounted(() => { onMounted(() => {
initTableData(); loadTableData();
});
// ==================== 暴露方法（可选） ====================
defineExpose({
reload: loadTableData,
}); });
</script> </script>
<style scoped lang="scss">
.system-role-container {
.system-user-search {
display: flex;
justify-content: space-between;
align-items: center;
}
.mb15 {
margin-bottom: 15px;
}
}
// 响应式适配
@media (max-width: 768px) {
.system-user-search {
flex-direction: column;
align-items: flex-start;
.el-form-item {
margin-bottom: 10px;
}
}
}
</style>

1
src/views/system/role/index.vue
View File

@@ -122,6 +122,7 @@ export default defineComponent({
getRoleList(state.tableData.param).then((res) => { getRoleList(state.tableData.param).then((res) => {
const list = res.data.list ?? []; const list = res.data.list ?? [];
list.map((item: TableData) => { list.map((item: TableData) => {
console.log(item.createdAt, '修改时间');
data.push({ data.push({
id: item.id, id: item.id,
status: item.status, status: item.status,