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

9
src/components/cropper/index.vue
View File

@@ -97,6 +97,7 @@ export default defineComponent({
<style scoped lang="scss">
.cropper-warp {
display: flex;
.cropper-warp-left {
position: relative;
display: inline-block;
@@ -108,34 +109,42 @@ export default defineComponent({
background-repeat: no-repeat;
cursor: move;
border-radius: var(--el-border-radius-base);
.cropper-warp-left-img {
width: 100%;
height: 100%;
}
}
.cropper-warp-right {
width: 150px;
height: 350px;
.cropper-warp-right-title {
text-align: center;
height: 20px;
line-height: 20px;
}
.cropper-warp-right-item {
margin: 15px 0;
.cropper-warp-right-value {
display: flex;
.cropper-warp-right-value-img {
width: 100px;
height: 100px;
border-radius: var(--el-border-radius-circle);
margin: auto;
}
.cropper-size {
width: 50px;
height: 50px;
}
}
.cropper-warp-right-label {
text-align: center;
font-size: 12px;

97
src/layout/component/columnsAside.vue
View File

@@ -2,20 +2,14 @@
<div class="layout-columns-aside">
<el-scrollbar>
<ul @mouseleave="onColumnsAsideMenuMouseleave()">
<li
v-for="(v, k) in columnsAsideList"
:key="k"
@click="onColumnsAsideMenuClick(v, k)"
@mouseenter="onColumnsAsideMenuMouseenter(v, k)"
:ref="
(el) => {
if (el) columnsAsideOffsetTopRefs[k] = el;
}
"
:class="{ 'layout-columns-active': liIndex === k, 'layout-columns-hover': liHoverIndex === k }"
:title="$t(v.meta.title)"
>
<div :class="themeConfig.columnsAsideLayout" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
<li v-for="(v, k) in columnsAsideList" :key="k" @click="onColumnsAsideMenuClick(v, k)"
@mouseenter="onColumnsAsideMenuMouseenter(v, k)" :ref="(el) => {
if (el) columnsAsideOffsetTopRefs[k] = el;
}
" :class="{ 'layout-columns-active': liIndex === k, 'layout-columns-hover': liHoverIndex === k }"
:title="$t(v.meta.title)">
<div :class="themeConfig.columnsAsideLayout"
v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
<SvgIcon :name="v.meta.icon" />
<div class="columns-vertical-title font12">
{{
@@ -31,7 +25,8 @@
<div class="columns-vertical-title font12">
{{
$t(v.meta.title) && $t(v.meta.title).length >= 4
? $t(v.meta.title).substr(0, themeConfig.columnsAsideLayout === 'columns-vertical' ? 4 : 3)
? $t(v.meta.title).substr(0, themeConfig.columnsAsideLayout === 'columns-vertical' ? 4 :
3)
: $t(v.meta.title)
}}
</div>
@@ -102,9 +97,9 @@ export default defineComponent({
state.liOldPath = path;
state.liOldIndex = k;
state.liHoverIndex = k;
if(v.children&&v.children.length>0){
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(v.children[0].path));
}
if (v.children && v.children.length > 0) {
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(v.children[0].path));
}
stores.setColumnsMenuHover(false);
stores.setColumnsNavHover(true);
};
@@ -133,20 +128,20 @@ export default defineComponent({
// 传送当前子级数据到菜单中
const setSendChildren = (path: string) => {
let currentData: any = {};
state.columnsAsideList.some((v:any,k:number)=>{
if(v.children){
v.children.some((sv:any)=>{
if(sv.path===path){
v['k'] = k;
currentData['item'] = [{ ...v }];
currentData['children'] = [{ ...v }];
if (v.children) currentData['children'] = v.children;
return true
}
})
}
return false
})
state.columnsAsideList.some((v: any, k: number) => {
if (v.children) {
v.children.some((sv: any) => {
if (sv.path === path) {
v['k'] = k;
currentData['item'] = [{ ...v }];
currentData['children'] = [{ ...v }];
if (v.children) currentData['children'] = v.children;
return true
}
})
}
return false
})
return currentData;
};
// 路由过滤递归函数
@@ -161,17 +156,17 @@ export default defineComponent({
};
// tagsView 点击时，根据路由查找下标 columnsAsideList，实现左侧菜单高亮
const setColumnsMenuHighlight = (path: string) => {
const currentSplitRoute = state.columnsAsideList.some((v:any)=>{
if(v.children){
v.children.some((sv:any)=>{
if(sv.path===path){
return true
}
})
}
return false
})
if (!currentSplitRoute) return false;
const currentSplitRoute = state.columnsAsideList.some((v: any) => {
if (v.children) {
v.children.some((sv: any) => {
if (sv.path === path) {
return true
}
})
}
return false
})
if (!currentSplitRoute) return false;
// 延迟拿值，防止取不到
setTimeout(() => {
onColumnsAsideDown((<any>currentSplitRoute).k);
@@ -206,7 +201,7 @@ export default defineComponent({
});
// 页面卸载时
onUnmounted(() => {
proxy.mittBus.off('restoreDefault', () => {});
proxy.mittBus.off('restoreDefault', () => { });
});
// 路由更新时
onBeforeRouteUpdate((to) => {
@@ -232,8 +227,10 @@ export default defineComponent({
width: 70px;
height: 100%;
background: var(--next-bg-columnsMenuBar);
ul {
position: relative;
li {
color: var(--next-bg-columnsMenuBarColor);
width: 100%;
@@ -243,43 +240,54 @@ export default defineComponent({
cursor: pointer;
position: relative;
z-index: 1;
.columns-vertical {
margin: auto;
.columns-vertical-title {
padding-top: 1px;
}
}
.columns-horizontal {
display: flex;
height: 50px;
width: 100%;
align-items: center;
padding: 0 5px;
i {
margin-right: 3px;
}
a {
display: flex;
.columns-horizontal-title {
padding-top: 1px;
}
}
}
a {
text-decoration: none;
color: var(--next-bg-columnsMenuBarColor);
}
}
.layout-columns-active {
color: var(--next-bg-columnsMenuBarColor) !important;
transition: 0.3s ease-in-out;
}
.layout-columns-hover {
color: var(--el-color-primary);
a {
color: var(--el-color-primary);
}
}
.columns-round {
background: var(--el-color-primary);
color: var(--el-color-white);
@@ -293,6 +301,7 @@ export default defineComponent({
transition: 0.3s ease-in-out;
border-radius: 5px;
}
.columns-card {
@extend .columns-round;
top: 0;

24
src/layout/navBars/breadcrumb/breadcrumb.vue
View File

@@ -1,21 +1,20 @@
<template>
<div v-if="isShowBreadcrumb" class="layout-navbars-breadcrumb">
<SvgIcon
class="layout-navbars-breadcrumb-icon"
:name="themeConfig.isCollapse ? 'ele-Expand' : 'ele-Fold'"
:size="16"
@click="onThemeConfigChange"
/>
<SvgIcon class="layout-navbars-breadcrumb-icon" :name="themeConfig.isCollapse ? 'ele-Expand' : 'ele-Fold'"
:size="16" @click="onThemeConfigChange" />
<el-breadcrumb class="layout-navbars-breadcrumb-hide">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(v, k) in breadcrumbList" :key="!v.meta.tagsViewName ? v.meta.title : v.meta.tagsViewName">
<el-breadcrumb-item v-for="(v, k) in breadcrumbList"
:key="!v.meta.tagsViewName ? v.meta.title : v.meta.tagsViewName">
<span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont"
v-if="themeConfig.isBreadcrumbIcon" />
<div v-if="!v.meta.tagsViewName">{{ $t(v.meta.title) }}</div>
<div v-else>{{ v.meta.tagsViewName }}</div>
</span>
<a v-else @click.prevent="onBreadcrumbClick(v)">
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />{{ $t(v.meta.title) }}
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont"
v-if="themeConfig.isBreadcrumbIcon" />{{ $t(v.meta.title) }}
</a>
</el-breadcrumb-item>
</transition-group>
@@ -128,6 +127,7 @@ export default defineComponent({
height: inherit;
display: flex;
align-items: center;
.layout-navbars-breadcrumb-icon {
cursor: pointer;
font-size: 18px;
@@ -135,26 +135,32 @@ export default defineComponent({
height: 100%;
width: 40px;
opacity: 0.8;
&:hover {
opacity: 1;
}
}
.layout-navbars-breadcrumb-span {
display: flex;
opacity: 0.7;
color: var(--next-bg-topBarColor);
}
.layout-navbars-breadcrumb-iconfont {
font-size: 14px;
margin-right: 5px;
}
:deep(.el-breadcrumb__separator) {
opacity: 0.7;
color: var(--next-bg-topBarColor);
}
:deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
font-weight: unset !important;
color: var(--next-bg-topBarColor);
&:hover {
color: var(--el-color-primary) !important;
}

13
src/layout/navMenu/vertical.vue
View File

@@ -1,12 +1,6 @@
<template>
<el-menu
router
:default-active="defaultActive"
background-color="transparent"
:collapse="isCollapse"
:unique-opened="getThemeConfig.isUniqueOpened"
:collapse-transition="false"
>
<el-menu router :default-active="defaultActive" background-color="transparent" :collapse="isCollapse"
:unique-opened="getThemeConfig.isUniqueOpened" :collapse-transition="false">
<template v-for="val in menuLists">
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
<template #title>
@@ -22,7 +16,8 @@
<span>{{ $t(val.meta.title) }}</span>
</template>
<template #title v-else>
<a :href="val.meta.isLink" target="_blank" rel="opener" class="w100">{{ $t(val.meta.title) }}</a>
<a :href="val.meta.isLink" target="_blank" rel="opener" class="w100">{{ $t(val.meta.title)
}}</a>
</template>
</el-menu-item>
</template>

2
src/layout/routerView/parent.vue
View File

@@ -69,7 +69,7 @@ export default defineComponent({
});
// 页面卸载时
onUnmounted(() => {
proxy.mittBus.off('onTagsViewRefreshRouterView', () => {});
proxy.mittBus.off('onTagsViewRefreshRouterView', () => { });
});
// 监听路由变化，防止 tagsView 多标签时，切换动画消失
watch(

1974
src/router/route.ts
View File

File diff suppressed because it is too large Load Diff

37
src/stores/themeConfig.ts
View File

@@ -1,5 +1,6 @@
import { defineStore } from 'pinia';
import { ThemeConfigStates, ThemeConfigState } from './interface';
import { tr } from 'element-plus/es/locale';
/**
* 布局配置
@@ -18,35 +19,35 @@ export const useThemeConfig = defineStore('themeConfig', {
/**
* 全局主题
*/
// 主色调：莫兰迪蓝
primary: '#6D8BA6',
// 默认 primary 主题颜色
primary: '#409eff',
// 是否开启深色模式
isIsDark: false,
/**
* 菜单 / 顶栏 - 多彩渐变方案
* 菜单 / 顶栏
* 注意：v1.0.17 版本去除设置布局切换，重置主题样式（initSetLayoutChange），
* 切换布局需手动设置样式，设置的样式自动同步各布局，
* 代码位置：/@/layout/navBars/breadcrumb/setings.vue
*/
// 顶栏：浅杏色
topBar: '#F5E8DA',
// 顶栏文字：深灰褐
topBarColor: '#5D4E3F',
// 默认顶栏导航背景颜色
topBar: '#ffffff',
// 默认顶栏导航字体颜色
topBarColor: '#606266',
// 是否开启顶栏背景颜色渐变
isTopBarColorGradual: false,
// 侧边栏：灰绿色
menuBar: '#A8B8A5',
// 菜单文字：深墨绿
menuBarColor: '#2C3E2C',
// 默认菜单导航背景颜色
menuBar: '#354E67',
// 默认菜单导航字体颜色
menuBarColor: '#eaeaea',
// 是否开启菜单背景颜色渐变
isMenuBarColorGradual: false,
// 分栏菜单：淡紫灰
columnsMenuBar: '#D4CDDC',
// 分栏文字：深紫灰
columnsMenuBarColor: '#4A4453',
// 默认分栏菜单背景颜色
columnsMenuBar: '#545c64',
// 默认分栏菜单字体颜色
columnsMenuBarColor: '#e6e6e6',
// 是否开启分栏菜单背景颜色渐变
isColumnsMenuBarColorGradual: false,
/**
* 界面设置
*/

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>