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-22 16:39:01 +08:00
parent 774e6c97a6
commit 0be616ab8c
17 changed files with 3501 additions and 1331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
src/views/customerService/account/component/editRole.vue Normal file
View File

@@ -0,0 +1,268 @@
<template>
<div class="system-edit-role-container">
<el-dialog :title="(formData.id === 0 ? '添加' : '修改') + '角色'" v-model="isShowDialog" width="769px">
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="客服id" prop="name">
<el-input placeholder="987698789" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="客服平台" prop="name">
<el-input placeholder="小红书" clearable></el-input>
</el-form-item>
</el-col>
<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="排序">
<el-input-number v-model="formData.listOrder" :min="0" controls-position="right" placeholder="请输入排序"
class="w100" />
</el-form-item>
</el-col> -->
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="客服状态">
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启"
inactive-text="禁"></el-switch>
</el-form-item>
</el-col>
<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="角色描述">
<el-input v-model="formData.remark" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
</el-form-item>
</el-col> -->
<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="菜单权限">
<el-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
<el-checkbox v-model="menuCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-tree :data="menuData" ref="menuRef" :props="menuProps" :default-checked-keys="formData.menuIds"
node-key="id" show-checkbox class="menu-data-tree tree-border"
:check-strictly="!menuCheckStrictly" />
</el-col>
</el-row>
</el-form-item>
</el-col> -->
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{ formData.id === 0 ? '新 增' :
'修改' }}</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, getCurrentInstance, unref } from 'vue';
import { addRole, editRole, getRole, getRoleParams } from "/@/api/system/role";
import { ElMessage } from "element-plus";
import { refreshBackEndControlRoutes } from "/@/router/backEnd";
// 定义接口来定义对象的类型
interface MenuDataTree {
id: number;
pid: number;
title: string;
children?: MenuDataTree[];
}
interface DialogRow {
id: number;
name: string;
status: number;
listOrder: number;
remark: string;
menuIds: Array<number>
}
interface RoleState {
loading: boolean;
isShowDialog: boolean;
formData: DialogRow;
menuData: Array<MenuDataTree>;
menuExpand: boolean;
menuNodeAll: boolean;
menuCheckStrictly: boolean;
menuProps: {
children: string;
label: string;
};
rules: object;
}
export default defineComponent({
name: 'systemEditRole',
setup(props, { emit }) {
const { proxy } = getCurrentInstance() as any;
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<RoleState>({
loading: false,
isShowDialog: false,
formData: {
id: 0,
name: '',
status: 1,
listOrder: 0,
remark: '',
menuIds: []
},
// 表单校验
rules: {
name: [
{ required: true, message: "角色名称不能为空", trigger: "blur" },
]
},
menuData: [],
menuExpand: false,
menuNodeAll: false,
menuCheckStrictly: false,
menuProps: {
children: 'children',
label: 'title',
},
});
// 打开弹窗
const openDialog = (row?: DialogRow) => {
resetForm();
getMenuData();
if (row) {
getRole(row.id).then((res: any) => {
if (res.data.role) {
state.formData = res.data.role;
state.formData.menuIds = res.data.menuIds ?? []
}
})
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
state.formData.menuIds = getMenuAllCheckedKeys();
if (state.formData.id === 0) {
//添加
addRole(state.formData).then(() => {
ElMessage.success('角色添加成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('getRoleList')
}).finally(() => {
state.loading = false;
})
} else {
//修改
editRole(state.formData).then(() => {
ElMessage.success('角色修改成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('getRoleList')
}).finally(() => {
state.loading = false;
})
}
}
});
};
// 获取菜单结构数据
const getMenuData = () => {
getRoleParams().then((res: any) => {
state.menuData = proxy.handleTree(res.data.menu, "id", "pid");
})
};
const resetForm = () => {
state.menuCheckStrictly = false;
state.menuExpand = false;
state.menuNodeAll = false;
state.formData = {
id: 0,
name: '',
status: 1,
listOrder: 0,
remark: '',
menuIds: []
}
};
/** 树权限（展开/折叠）*/
const handleCheckedTreeExpand = (value: any) => {
let treeList = state.menuData;
for (let i = 0; i < treeList.length; i++) {
menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
}
}
/** 树权限（全选/全不选） */
const handleCheckedTreeNodeAll = (value: any) => {
menuRef.value.setCheckedNodes(value ? state.menuData : []);
}
/** 树权限（父子联动） */
const handleCheckedTreeConnect = (value: any) => {
state.menuCheckStrictly = value ? true : false;
}
/** 所有菜单节点数据 */
function getMenuAllCheckedKeys() {
// 目前被选中的菜单节点
let checkedKeys = menuRef.value.getCheckedKeys();
// 半选中的菜单节点
let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
return checkedKeys;
}
// 重置菜单session
const resetMenuSession = () => {
refreshBackEndControlRoutes();
};
return {
openDialog,
closeDialog,
onCancel,
onSubmit,
menuRef,
formRef,
handleCheckedTreeExpand,
handleCheckedTreeNodeAll,
handleCheckedTreeConnect,
resetMenuSession,
...toRefs(state),
};
},
});
</script>
<style scoped lang="scss">
.tree-border {
margin-top: 5px;
border: 1px solid #e5e6e7 !important;
border-radius: 4px;
}
.system-edit-role-container {
.menu-data-tree {
border: var(--el-input-border, var(--el-border-base));
border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
padding: 5px;
}
}
</style>

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

@@ -0,0 +1,256 @@
<template>
<div class="system-role-container">
<el-card shadow="hover">
<div class="system-user-search mb15">
<el-form :inline="true">
<el-form-item label="客服ID">
<el-input size="default" v-model="tableData.param.roleName" placeholder="请输入客服ID"
class="w-50 m-2" clearable />
</el-form-item>
<el-form-item label="客服平台" prop="status" style="width: 200px;">
<el-select placeholder="小红书" clearable size="default" style="width: 240px">
<el-option :label="'小红书'" />
<el-option :label="'抖音'" />
<el-option :label="'快手'" />
</el-select>
</el-form-item>
<el-form-item>
<el-button size="default" type="primary" class="ml10" @click="roleList">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增客服
</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData.data" style="width: 100%">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="name" label="客服id" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="客服状态" show-overflow-tooltip>
<template #default="scope">
<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag>
</template>
</el-table-column>
<el-table-column prop="remark" label="客服平台" show-overflow-tooltip></el-table-column>
<el-table-column prop="key" label="创建人" show-overflow-tooltip></el-table-column>
<el-table-column prop="key" label="修改人" show-overflow-tooltip></el-table-column>
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column prop="createdAt" label="修改时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="220">
<template #default="scope">
<el-button size="small" text type="primary"
@click="onOpenEditRole(scope.row)"><el-icon><ele-EditPen /></el-icon>修改</el-button>
<el-button size="small" text type="primary"
@click="onRowDel(scope.row)"><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize" @pagination="roleList" />
</el-card>
<EditRole ref="editRoleRef" @getRoleList="roleList" />
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EditRole from '/@/views/customerService/account/component/editRole.vue';
import { deleteRole, getRoleList } from "/@/api/system/role";
// 定义接口来定义对象的类型
interface TableData {
id: number;
status: number;
listOrder: number;
name: string;
remark: string;
dataScope: number;
createdAt: string;
}
interface TableDataState {
tableData: {
data: Array<TableData>;
total: number;
loading: boolean;
param: {
roleName: string;
roleStatus: string;
pageNum: 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",
"key": 'list'
},
{
"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",
"key": 'list'
},
{
"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",
"key": '李四'
},
{
"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",
"key": '张三'
},
{
"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",
"key": 'zhang'
},
{
"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",
"key": 'list'
}
])
export default defineComponent({
name: 'apiV1SystemRoleList',
components: { EditRole },
setup() {
const { proxy } = getCurrentInstance() as any;
const addRoleRef = ref();
const editRoleRef = ref();
const dataScopeRef = ref();
const state = reactive<TableDataState>({
tableData: {
data: [],
total: 0,
loading: false,
param: {
roleName: '',
roleStatus: '',
pageNum: 1,
pageSize: 10,
},
},
});
// 初始化表格数据
const initTableData = () => {
roleList()
};
const roleList = () => {
const data: Array<TableData> = [];
getRoleList(state.tableData.param).then(res => {
const list = res.data.list ?? []
list.map((item: TableData) => {
data.push({
id: item.id,
status: item.status,
listOrder: item.listOrder,
name: item.name,
remark: item.remark,
dataScope: item.dataScope,
createdAt: item.createdAt,
});
})
state.tableData.data = dateList.value;
state.tableData.total = dateList.value.length;
})
};
// 打开新增角色弹窗
const onOpenAddRole = () => {
editRoleRef.value.openDialog();
};
// 打开修改角色弹窗
const onOpenEditRole = (row: Object) => {
editRoleRef.value.openDialog(toRaw(row));
};
// 删除角色
const onRowDel = (row: any) => {
ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteRole(row.id).then(() => {
ElMessage.success('删除成功');
proxy.$refs['editRoleRef'].resetMenuSession();
roleList();
})
})
.catch(() => { });
};
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
};
// 页面加载时
onMounted(() => {
initTableData();
});
return {
addRoleRef,
editRoleRef,
dataScopeRef,
onOpenAddRole,
onOpenEditRole,
onRowDel,
onHandleSizeChange,
onHandleCurrentChange,
roleList,
...toRefs(state),
};
},
});
</script>

244
src/views/customerService/product/component/editRole.vue Normal file
View File

@@ -0,0 +1,244 @@
<template>
<div class="system-edit-role-container">
<el-dialog title="" v-model="isShowDialog" width="1000px">
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="产品名称" prop="name">
<el-input placeholder="xxx" clearable></el-input>
</el-form-item>
</el-col>
<!-- 新增富文本编辑器 -->
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="产品详情" prop="content">
<Editor height="400px" placeholder="请输入产品详细描述..." />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{ formData.id === 0 ? '新 增' :
'修改' }}</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, getCurrentInstance, unref, } from 'vue';
import { addRole, editRole, getRole, getRoleParams } from "/@/api/system/role";
import { ElMessage } from "element-plus";
import { refreshBackEndControlRoutes } from "/@/router/backEnd";
// 引入富文本编辑器组件
import Editor from '/@/components/editor/index.vue';
// 定义接口来定义对象的类型
interface MenuDataTree {
id: number;
pid: number;
title: string;
children?: MenuDataTree[];
}
interface DialogRow {
id: number;
name: string;
status: number;
listOrder: number;
remark: string;
menuIds: Array<number>
}
interface RoleState {
loading: boolean;
isShowDialog: boolean;
formData: DialogRow;
menuData: Array<MenuDataTree>;
menuExpand: boolean;
menuNodeAll: boolean;
menuCheckStrictly: boolean;
menuProps: {
children: string;
label: string;
};
rules: object;
}
export default defineComponent({
name: 'systemEditRole',
components: {
Editor // 注册富文本组件
},
setup(props, { emit }) {
const { proxy } = getCurrentInstance() as any;
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<RoleState>({
loading: false,
isShowDialog: false,
formData: {
id: 0,
name: '',
status: 1,
listOrder: 0,
remark: '',
menuIds: []
},
// 表单校验
rules: {
name: [
{ required: true, message: "角色名称不能为空", trigger: "blur" },
]
},
menuData: [],
menuExpand: false,
menuNodeAll: false,
menuCheckStrictly: false,
menuProps: {
children: 'children',
label: 'title',
},
});
// 打开弹窗
const openDialog = (row?: DialogRow) => {
resetForm();
getMenuData();
if (row) {
getRole(row.id).then((res: any) => {
if (res.data.role) {
state.formData = res.data.role;
state.formData.menuIds = res.data.menuIds ?? []
}
})
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
state.formData.menuIds = getMenuAllCheckedKeys();
if (state.formData.id === 0) {
//添加
addRole(state.formData).then(() => {
ElMessage.success('角色添加成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('getRoleList')
}).finally(() => {
state.loading = false;
})
} else {
//修改
editRole(state.formData).then(() => {
ElMessage.success('角色修改成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('getRoleList')
}).finally(() => {
state.loading = false;
})
}
}
});
};
// 获取菜单结构数据
const getMenuData = () => {
getRoleParams().then((res: any) => {
state.menuData = proxy.handleTree(res.data.menu, "id", "pid");
})
};
const resetForm = () => {
state.menuCheckStrictly = false;
state.menuExpand = false;
state.menuNodeAll = false;
state.formData = {
id: 0,
name: '',
status: 1,
listOrder: 0,
remark: '',
menuIds: []
}
};
/** 树权限（展开/折叠）*/
const handleCheckedTreeExpand = (value: any) => {
let treeList = state.menuData;
for (let i = 0; i < treeList.length; i++) {
menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
}
}
/** 树权限（全选/全不选） */
const handleCheckedTreeNodeAll = (value: any) => {
menuRef.value.setCheckedNodes(value ? state.menuData : []);
}
/** 树权限（父子联动） */
const handleCheckedTreeConnect = (value: any) => {
state.menuCheckStrictly = value ? true : false;
}
/** 所有菜单节点数据 */
function getMenuAllCheckedKeys() {
// 目前被选中的菜单节点
let checkedKeys = menuRef.value.getCheckedKeys();
// 半选中的菜单节点
let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
return checkedKeys;
}
// 重置菜单session
const resetMenuSession = () => {
refreshBackEndControlRoutes();
};
return {
openDialog,
closeDialog,
onCancel,
onSubmit,
menuRef,
formRef,
handleCheckedTreeExpand,
handleCheckedTreeNodeAll,
handleCheckedTreeConnect,
resetMenuSession,
...toRefs(state),
};
},
});
</script>
<style scoped lang="scss">
.tree-border {
margin-top: 5px;
border: 1px solid #e5e6e7 !important;
border-radius: 4px;
}
.system-edit-role-container {
.menu-data-tree {
border: var(--el-input-border, var(--el-border-base));
border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
padding: 5px;
}
}
</style>

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

@@ -0,0 +1,236 @@
<template>
<div class="system-role-container">
<el-card shadow="hover">
<div class="system-user-search mb15">
<el-form :inline="true">
<el-form-item label="产品名称">
<el-input size="default" v-model="tableData.param.roleName" placeholder="请输入产品名称"
class="w-50 m-2" clearable />
</el-form-item>
<el-form-item>
<el-button size="default" type="primary" class="ml10" @click="roleList">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增产品
</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData.data" style="width: 100%">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="name" label="产品名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="remark" label="创建人" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="修改人" show-overflow-tooltip></el-table-column>
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column prop="createdAt" label="修改时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="220">
<template #default="scope">
<el-button size="small" text type="primary"
@click="onOpenEditRole(scope.row)"><el-icon><ele-EditPen /></el-icon>修改</el-button>
<el-button size="small" text type="primary"
@click="onRowDel(scope.row)"><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize" @pagination="roleList" />
</el-card>
<EditRole ref="editRoleRef" @getRoleList="roleList" />
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EditRole from '/@/views/customerService/product/component/editRole.vue';
import { deleteRole, getRoleList } from "/@/api/system/role";
// 定义接口来定义对象的类型
interface TableData {
id: number;
status: number;
listOrder: number;
name: string;
remark: string;
dataScope: number;
createdAt: string;
}
interface TableDataState {
tableData: {
data: Array<TableData>;
total: number;
loading: boolean;
param: {
roleName: string;
roleStatus: string;
pageNum: number;
pageSize: number;
};
};
}
const dateList = ref([
{
"id": 1,
"status": '李四',
"listOrder": 0,
"name": "xxx药品",
"remark": "张三",
"dataScope": 3,
"createdAt": "2022-04-01 11:38:39",
"updatedAt": "2022-04-28 10:00:15"
},
{
"id": 2,
"status": '李四',
"listOrder": 0,
"name": "xxx药品",
"remark": "张三",
"dataScope": 3,
"createdAt": "2022-04-01 11:38:39",
"updatedAt": "2022-04-28 10:01:34"
},
{
"id": 3,
"status": '李四',
"listOrder": 0,
"name": "xxx药品",
"remark": "张三",
"dataScope": 3,
"createdAt": "2022-04-01 11:38:39",
"updatedAt": "2022-04-01 11:38:39"
},
{
"id": 4,
"status": '李四',
"listOrder": 0,
"name": "xxx药品",
"remark": "张三",
"dataScope": 3,
"createdAt": "2022-04-01 11:38:39",
"updatedAt": "2022-04-01 11:38:39"
},
{
"id": 5,
"status": '李四',
"listOrder": 0,
"name": "xxx药品",
"remark": "张三",
"dataScope": 2,
"createdAt": "2022-04-01 11:38:39",
"updatedAt": "2022-04-01 11:38:39"
},
{
"id": 8,
"status": '李四',
"listOrder": 0,
"name": "xxx药品",
"remark": "张三",
"dataScope": 2,
"createdAt": "2022-04-01 11:38:39",
"updatedAt": "2022-04-06 09:53:40"
}
])
export default defineComponent({
name: 'apiV1SystemRoleList',
components: { EditRole },
setup() {
const { proxy } = getCurrentInstance() as any;
const addRoleRef = ref();
const editRoleRef = ref();
const dataScopeRef = ref();
const state = reactive<TableDataState>({
tableData: {
data: [],
total: 0,
loading: false,
param: {
roleName: '',
roleStatus: '',
pageNum: 1,
pageSize: 10,
},
},
});
// 初始化表格数据
const initTableData = () => {
roleList()
};
const roleList = () => {
const data: Array<TableData> = [];
getRoleList(state.tableData.param).then(res => {
const list = res.data.list ?? []
list.map((item: TableData) => {
data.push({
id: item.id,
status: item.status,
listOrder: item.listOrder,
name: item.name,
remark: item.remark,
dataScope: item.dataScope,
createdAt: item.createdAt,
});
})
state.tableData.data = dateList.value;
state.tableData.total = dateList.value.length;
})
};
// 打开新增角色弹窗
const onOpenAddRole = () => {
editRoleRef.value.openDialog();
};
// 打开修改角色弹窗
const onOpenEditRole = (row: Object) => {
editRoleRef.value.openDialog(toRaw(row));
};
// 删除角色
const onRowDel = (row: any) => {
ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteRole(row.id).then(() => {
ElMessage.success('删除成功');
proxy.$refs['editRoleRef'].resetMenuSession();
roleList();
})
})
.catch(() => { });
};
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
};
// 页面加载时
onMounted(() => {
initTableData();
});
return {
addRoleRef,
editRoleRef,
dataScopeRef,
onOpenAddRole,
onOpenEditRole,
onRowDel,
onHandleSizeChange,
onHandleCurrentChange,
roleList,
...toRefs(state),
};
},
});
</script>

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

@@ -0,0 +1,360 @@
<template>
<div class="system-dic-container">
<el-card shadow="hover">
<div class="system-user-search mb15">
<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
<el-form-item label="客服平台" prop="status" style="width: 200px;">
<el-select v-model="tableData.param.status" placeholder="小红书" clearable size="default"
style="width: 240px">
<el-option :label="'小红书'" />
<el-option :label="'抖音'" />
<el-option :label="'快手'" />
</el-select>
</el-form-item>
<el-form-item label="" prop="dateRange">
<el-date-picker v-model="tableData.param.dateRange" size="default" style="width: 240px"
value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="请选择开始日期"
end-placeholder="请选择结束日期"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button size="default" type="primary" class="ml10" @click="dataList">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button size="default" @click="resetQuery(queryRef)">
<el-icon>
<ele-Refresh />
</el-icon>
重置
</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="日期" align="center" prop="loginTime" width="180" />
<el-table-column label="客服平台" align="center" prop="platform" />
<el-table-column label="客服ID" align="center" prop="infoId" />
<el-table-column label="客服姓名" align="center" prop="loginName" />
<el-table-column label="进线人数" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
<el-table-column label="开口人数" align="center" prop="loginLocation" :s0ow-overflow-tooltip="true" />
<el-table-column label="留资卡发送数量" align="center" prop="browser" />
<el-table-column label="名片发送数" align="center" prop="os" />
<!-- <el-table-column label="留资人数" align="center" prop="status" :formatter="statusFormat" /> -->
<el-table-column label="留资人数" align="center" prop="status" />
<el-table-column label="接待人数" align="center" prop="msg" />
<el-table-column label="30秒回复率" alian="center" prop="module" />
<el-table-column label="60秒回复率" alian="center" prop="module" />
<el-table-column label="3分钟回复率" alian="center" prop="module" />
</el-table>
<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize" @pagination="dataList" />
</el-card>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance, unref } from 'vue';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
import { logList, deleteLog, clearLog } from '/@/api/system/monitor/loginLog';
import { log } from 'console';
// 定义接口来定义对象的类型
interface TableDataRow {
infoId: number;
loginName: string;
ipaddr: string;
loginLocation: string;
browser: string;
os: string;
status: number;
msg: string;
loginTime: string;
module: string;
}
interface TableDataState {
ids: number[];
tableData: {
data: Array<TableDataRow>;
total: number;
loading: boolean;
param: {
pageNum: number;
pageSize: number;
dateRange: string[];
status: string;
ipaddr: string;
loginLocation: any;
userName: string;
};
};
}
export default defineComponent({
name: 'apiV1SystemLoginLogList',
setup() {
//模拟数据
const dateList = ref([
{
"infoId": 434569527,
"loginName": "demo",
"ipaddr": "0",
"loginLocation": "0",
"browser": "0",
"os": "0",
"status": 0,
"msg": "0",
"loginTime": "2025-11-22",
"module": "0",
"platform": '抖音'
},
{
"infoId": 424569527,
"loginName": "demo",
"ipaddr": "0",
"loginLocation": "0",
"browser": "0",
"os": "0",
"status": 0,
"msg": "0",
"loginTime": "2025-11-22",
"module": "0",
"platform": '小红书'
},
{
"infoId": 414569527,
"loginName": "demo",
"ipaddr": "0",
"loginLocation": "0",
"browser": "0",
"os": "0",
"status": 0,
"msg": "0",
"loginTime": "2025-11-22",
"module": "0",
"platform": '快手'
},
{
"infoId": 404569527,
"loginName": "demo",
"ipaddr": "0",
"loginLocation": "0",
"browser": "0",
"os": "0",
"status": 0,
"msg": "0",
"loginTime": "2025-11-22",
"module": "0",
"platform": '小红书'
},
{
"infoId": 394569527,
"loginName": "demo",
"ipaddr": "0",
"loginLocation": "0",
"browser": "0",
"os": "0",
"status": 0,
"msg": "0",
"loginTime": "2025-11-22",
"module": "0",
"platform": '小红书'
},
{
"infoId": 384569527,
"loginName": "demo",
"ipaddr": "0",
"loginLocation": "0",
"browser": "0",
"os": "0",
"status": 0,
"msg": "0",
"loginTime": "2025-11-22",
"module": "0",
"platform": '快手'
},
{
"infoId": 374569527,
"loginName": "demo",
"ipaddr": "0",
"loginLocation": "0",
"browser": "0",
"os": "0",
"status": 0,
"msg": "0",
"loginTime": "2025-11-22",
"module": "0",
"platform": '小红书'
},
{
"infoId": 364569527,
"loginName": "demo",
"ipaddr": "0",
"loginLocation": "0",
"browser": "0",
"os": "0",
"status": 0,
"msg": "0",
"loginTime": "2025-11-22",
"module": "0",
"platform": '抖音'
},
{
"infoId": 354569527,
"loginName": "demo",
"ipaddr": "0",
"loginLocation": "0",
"browser": "0",
"os": "0",
"status": 0,
"msg": "0",
"loginTime": "2025-11-22",
"module": "0",
"platform": '小红书'
},
{
"infoId": 344569527,
"loginName": "demo",
"ipaddr": "0",
"loginLocation": "0",
"browser": "0",
"os": "0",
"status": 0,
"msg": "0",
"loginTime": "2025-11-22",
"module": "0",
"platform": '小红书'
}
])
const { proxy } = getCurrentInstance() as any;
const queryRef = ref();
const { admin_login_status } = proxy.useDict('admin_login_status')
const state = reactive<TableDataState>({
ids: [],
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
dateRange: [],
status: '',
ipaddr: '',
loginLocation: '',
userName: ''
},
},
});
// 初始化表格数据
const initTableData = () => {
dataList()
};
const dataList = () => {
// logList(state.tableData.param).then((res: any) => {
// state.tableData.data = res.data.list;
// console.log(state.tableData.data, '11111');
// state.tableData.total = res.data.total;
// });
state.tableData.data = dateList.value;
console.log(state.tableData.data, '11111');
state.tableData.total = dateList.value.length;
};
// 删除日志
const onRowDel = (row: TableDataRow) => {
let msg = '你确定要删除所选数据？';
let ids: number[] = [];
if (row) {
msg = `此操作将永久删除：“${row.loginName}”，是否继续?`
ids = [row.infoId]
4569527
} else {
ids = state.ids
}
if (ids.length === 0) {
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteLog(ids).then(() => {
ElMessage.success('删除成功');
dataList();
})
})
.catch(() => { });
};
// 清空日志
const onRowClear = () => {
ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
clearLog().then(() => {
ElMessage.success('清除成功');
dataList();
})
})
.catch(() => { });
};
// 页面加载时
onMounted(() => {
initTableData();
});
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
dataList()
};
// 多选框选中数据
const handleSelectionChange = (selection: TableDataRow[]) => {
state.ids = selection.map(item => item.infoId)
4569527
};
// 登录状态字典翻译
const statusFormat = (row: TableDataRow) => {
return proxy.selectDictLabel(unref(admin_login_status), row.status);
};
return {
queryRef,
onRowDel,
dataList,
resetQuery,
handleSelectionChange,
statusFormat,
onRowClear,
admin_login_status,
...toRefs(state),
};
},
});
</script>

264
src/views/customerService/script/component/editRole.vue Normal file
View File

@@ -0,0 +1,264 @@
<template>
<div class="system-edit-role-container">
<el-dialog title="" v-model="isShowDialog" width="769px">
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="标签" prop="name">
<el-input placeholder="小红书" clearable></el-input>
</el-form-item>
</el-col>
<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="排序">
<el-input-number v-model="formData.listOrder" :min="0" controls-position="right" placeholder="请输入排序"
class="w100" />
</el-form-item>
</el-col> -->
<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="客服状态">
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启"
inactive-text="禁"></el-switch>
</el-form-item>
</el-col> -->
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="话术描述">
<el-input type="textarea" placeholder="请输入话术" maxlength="150"></el-input>
</el-form-item>
</el-col>
<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="菜单权限">
<el-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
<el-checkbox v-model="menuCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-tree :data="menuData" ref="menuRef" :props="menuProps" :default-checked-keys="formData.menuIds"
node-key="id" show-checkbox class="menu-data-tree tree-border"
:check-strictly="!menuCheckStrictly" />
</el-col>
</el-row>
</el-form-item>
</el-col> -->
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{ formData.id === 0 ? '新 增' :
'修改' }}</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, getCurrentInstance, unref } from 'vue';
import { addRole, editRole, getRole, getRoleParams } from "/@/api/system/role";
import { ElMessage } from "element-plus";
import { refreshBackEndControlRoutes } from "/@/router/backEnd";
// 定义接口来定义对象的类型
interface MenuDataTree {
id: number;
pid: number;
title: string;
children?: MenuDataTree[];
}
interface DialogRow {
id: number;
name: string;
status: number;
listOrder: number;
remark: string;
menuIds: Array<number>
}
interface RoleState {
loading: boolean;
isShowDialog: boolean;
formData: DialogRow;
menuData: Array<MenuDataTree>;
menuExpand: boolean;
menuNodeAll: boolean;
menuCheckStrictly: boolean;
menuProps: {
children: string;
label: string;
};
rules: object;
}
export default defineComponent({
name: 'systemEditRole',
setup(props, { emit }) {
const { proxy } = getCurrentInstance() as any;
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<RoleState>({
loading: false,
isShowDialog: false,
formData: {
id: 0,
name: '',
status: 1,
listOrder: 0,
remark: '',
menuIds: []
},
// 表单校验
rules: {
name: [
{ required: true, message: "角色名称不能为空", trigger: "blur" },
]
},
menuData: [],
menuExpand: false,
menuNodeAll: false,
menuCheckStrictly: false,
menuProps: {
children: 'children',
label: 'title',
},
});
// 打开弹窗
const openDialog = (row?: DialogRow) => {
resetForm();
getMenuData();
if (row) {
getRole(row.id).then((res: any) => {
if (res.data.role) {
state.formData = res.data.role;
state.formData.menuIds = res.data.menuIds ?? []
}
})
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
state.formData.menuIds = getMenuAllCheckedKeys();
if (state.formData.id === 0) {
//添加
addRole(state.formData).then(() => {
ElMessage.success('角色添加成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('getRoleList')
}).finally(() => {
state.loading = false;
})
} else {
//修改
editRole(state.formData).then(() => {
ElMessage.success('角色修改成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('getRoleList')
}).finally(() => {
state.loading = false;
})
}
}
});
};
// 获取菜单结构数据
const getMenuData = () => {
getRoleParams().then((res: any) => {
state.menuData = proxy.handleTree(res.data.menu, "id", "pid");
})
};
const resetForm = () => {
state.menuCheckStrictly = false;
state.menuExpand = false;
state.menuNodeAll = false;
state.formData = {
id: 0,
name: '',
status: 1,
listOrder: 0,
remark: '',
menuIds: []
}
};
/** 树权限（展开/折叠）*/
const handleCheckedTreeExpand = (value: any) => {
let treeList = state.menuData;
for (let i = 0; i < treeList.length; i++) {
menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
}
}
/** 树权限（全选/全不选） */
const handleCheckedTreeNodeAll = (value: any) => {
menuRef.value.setCheckedNodes(value ? state.menuData : []);
}
/** 树权限（父子联动） */
const handleCheckedTreeConnect = (value: any) => {
state.menuCheckStrictly = value ? true : false;
}
/** 所有菜单节点数据 */
function getMenuAllCheckedKeys() {
// 目前被选中的菜单节点
let checkedKeys = menuRef.value.getCheckedKeys();
// 半选中的菜单节点
let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
return checkedKeys;
}
// 重置菜单session
const resetMenuSession = () => {
refreshBackEndControlRoutes();
};
return {
openDialog,
closeDialog,
onCancel,
onSubmit,
menuRef,
formRef,
handleCheckedTreeExpand,
handleCheckedTreeNodeAll,
handleCheckedTreeConnect,
resetMenuSession,
...toRefs(state),
};
},
});
</script>
<style scoped lang="scss">
.tree-border {
margin-top: 5px;
border: 1px solid #e5e6e7 !important;
border-radius: 4px;
}
.system-edit-role-container {
.menu-data-tree {
border: var(--el-input-border, var(--el-border-base));
border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
padding: 5px;
}
}
</style>

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

@@ -0,0 +1,251 @@
<template>
<div class="system-role-container">
<el-card shadow="hover">
<div class="system-user-search mb15">
<el-form :inline="true">
<!-- <el-form-item label="客服平台" prop="status" style="width: 200px;">
<el-select placeholder="小红书" clearable size="default" style="width: 240px">
<el-option :label="'小红书'" />
<el-option :label="'抖音'" />
<el-option :label="'快手'" />
</el-select>
</el-form-item> -->
<el-form-item>
<!-- <el-button size="default" type="primary" class="ml10" @click="roleList">
<el-icon>
<ele-Search />
</el-icon>
筛选
</el-button> -->
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增话术
</el-button>
</el-form-item>
</el-form>
</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-column prop="creator" label="创建人" show-overflow-tooltip></el-table-column>
<el-table-column prop="creator" label="修改人" show-overflow-tooltip></el-table-column>
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column prop="createdAt" label="修改时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="220">
<template #default="scope">
<el-button size="small" text type="primary"
@click="onOpenEditRole(scope.row)"><el-icon><ele-EditPen /></el-icon>修改</el-button>
<el-button size="small" text type="primary"
@click="onRowDel(scope.row)"><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize" @pagination="roleList" />
</el-card>
<EditRole ref="editRoleRef" @getRoleList="roleList" />
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EditRole from '/@/views/customerService/script/component/editRole.vue';
import { deleteRole, getRoleList } from "/@/api/system/role";
// 定义接口来定义对象的类型
interface TableData {
id: number;
status: number;
listOrder: number;
name: string;
remark: string;
dataScope: number;
createdAt: string;
}
interface TableDataState {
tableData: {
data: Array<TableData>;
total: number;
loading: boolean;
param: {
roleName: string;
roleStatus: string;
pageNum: 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": '张三'
}
])
export default defineComponent({
name: 'apiV1SystemRoleList',
components: { EditRole },
setup() {
const { proxy } = getCurrentInstance() as any;
const addRoleRef = ref();
const editRoleRef = ref();
const dataScopeRef = ref();
const state = reactive<TableDataState>({
tableData: {
data: [],
total: 0,
loading: false,
param: {
roleName: '',
roleStatus: '',
pageNum: 1,
pageSize: 10,
},
},
});
// 初始化表格数据
const initTableData = () => {
roleList()
};
const roleList = () => {
const data: Array<TableData> = [];
getRoleList(state.tableData.param).then(res => {
const list = res.data.list ?? []
list.map((item: TableData) => {
data.push({
id: item.id,
status: item.status,
listOrder: item.listOrder,
name: item.name,
remark: item.remark,
dataScope: item.dataScope,
createdAt: item.createdAt,
});
})
state.tableData.data = dateList.value;
state.tableData.total = dateList.value.length;
})
};
// 打开新增角色弹窗
const onOpenAddRole = () => {
editRoleRef.value.openDialog();
};
// 打开修改角色弹窗
const onOpenEditRole = (row: Object) => {
editRoleRef.value.openDialog(toRaw(row));
};
// 删除角色
const onRowDel = (row: any) => {
ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteRole(row.id).then(() => {
ElMessage.success('删除成功');
proxy.$refs['editRoleRef'].resetMenuSession();
roleList();
})
})
.catch(() => { });
};
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
};
// 页面加载时
onMounted(() => {
initTableData();
});
return {
addRoleRef,
editRoleRef,
dataScopeRef,
onOpenAddRole,
onOpenEditRole,
onRowDel,
onHandleSizeChange,
onHandleCurrentChange,
roleList,
...toRefs(state),
};
},
});
</script>

263
src/views/system/role/component/editRole.vue
View File

@@ -1,263 +0,0 @@
<template>
<div class="system-edit-role-container">
<el-dialog :title="(formData.id===0?'添加':'修改')+'角色'" v-model="isShowDialog" width="769px">
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="排序">
<el-input-number v-model="formData.listOrder" :min="0" controls-position="right" placeholder="请输入排序" class="w100" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="角色状态">
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="角色描述">
<el-input v-model="formData.remark" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="菜单权限">
<el-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
<el-checkbox v-model="menuCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-tree
:data="menuData"
ref="menuRef"
:props="menuProps"
:default-checked-keys="formData.menuIds"
node-key="id"
show-checkbox class="menu-data-tree tree-border"
:check-strictly="!menuCheckStrictly"/>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{formData.id===0?'新 增':'修 改'}}</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent,ref,getCurrentInstance,unref } from 'vue';
import {addRole, editRole, getRole, getRoleParams} from "/@/api/system/role";
import {ElMessage} from "element-plus";
import {refreshBackEndControlRoutes} from "/@/router/backEnd";
// 定义接口来定义对象的类型
interface MenuDataTree {
id: number;
pid:number;
title: string;
children?: MenuDataTree[];
}
interface DialogRow {
id:number;
name: string;
status: number;
listOrder: number;
remark: string;
menuIds:Array<number>
}
interface RoleState {
loading:boolean;
isShowDialog: boolean;
formData: DialogRow;
menuData: Array<MenuDataTree>;
menuExpand:boolean;
menuNodeAll:boolean;
menuCheckStrictly:boolean;
menuProps: {
children: string;
label: string;
};
rules: object;
}
export default defineComponent({
name: 'systemEditRole',
setup(props,{emit}) {
const {proxy} = getCurrentInstance() as any;
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<RoleState>({
loading:false,
isShowDialog: false,
formData: {
id:0,
name: '',
status: 1,
listOrder: 0,
remark: '',
menuIds:[]
},
// 表单校验
rules: {
name:[
{required: true, message: "角色名称不能为空", trigger: "blur"},
]
},
menuData: [],
menuExpand:false,
menuNodeAll:false,
menuCheckStrictly:false,
menuProps: {
children: 'children',
label: 'title',
},
});
// 打开弹窗
const openDialog = (row?: DialogRow) => {
resetForm();
getMenuData();
if(row) {
getRole(row.id).then((res:any)=>{
if(res.data.role){
state.formData = res.data.role;
state.formData.menuIds = res.data.menuIds??[]
}
})
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
state.formData.menuIds = getMenuAllCheckedKeys();
if(state.formData.id===0){
//添加
addRole(state.formData).then(()=>{
ElMessage.success('角色添加成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('getRoleList')
}).finally(()=>{
state.loading = false;
})
}else{
//修改
editRole(state.formData).then(()=>{
ElMessage.success('角色修改成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('getRoleList')
}).finally(()=>{
state.loading = false;
})
}
}
});
};
// 获取菜单结构数据
const getMenuData = () => {
getRoleParams().then((res:any)=>{
state.menuData = proxy.handleTree(res.data.menu, "id","pid");
})
};
const resetForm = ()=>{
state.menuCheckStrictly=false;
state.menuExpand = false;
state.menuNodeAll = false;
state.formData = {
id:0,
name: '',
status: 1,
listOrder: 0,
remark: '',
menuIds:[]
}
};
/** 树权限（展开/折叠）*/
const handleCheckedTreeExpand = (value:any) => {
let treeList = state.menuData;
for (let i = 0; i < treeList.length; i++) {
menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
}
}
/** 树权限（全选/全不选） */
const handleCheckedTreeNodeAll = (value:any) => {
menuRef.value.setCheckedNodes(value ? state.menuData : []);
}
/** 树权限（父子联动） */
const handleCheckedTreeConnect = (value:any) => {
state.menuCheckStrictly = value ? true : false;
}
/** 所有菜单节点数据 */
function getMenuAllCheckedKeys() {
// 目前被选中的菜单节点
let checkedKeys = menuRef.value.getCheckedKeys();
// 半选中的菜单节点
let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
return checkedKeys;
}
// 重置菜单session
const resetMenuSession = () => {
refreshBackEndControlRoutes();
};
return {
openDialog,
closeDialog,
onCancel,
onSubmit,
menuRef,
formRef,
handleCheckedTreeExpand,
handleCheckedTreeNodeAll,
handleCheckedTreeConnect,
resetMenuSession,
...toRefs(state),
};
},
});
</script>
<style scoped lang="scss">
.tree-border {
margin-top: 5px;
border: 1px solid #e5e6e7!important;
border-radius: 4px;
}
.system-edit-role-container {
.menu-data-tree {
border: var(--el-input-border, var(--el-border-base));
border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
padding: 5px;
}
}
</style>