客服模块的新增

src/views/customerService/script/component/editRole.vue

@@ -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>

src/views/customerService/script/index.vue

@@ -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>