refactor: IM客服重构

src/api/chat/waiter.js

@@ -0,0 +1,36 @@
+import request from '@/utils/request.js';
+export const search = (params) => {
+    return request({
+        url: '/mall/im/admin/waiterUser',
+        method: 'get',
+        params,
+    });
+};
+export const detail = (userId) => {
+    return request({
+        url: '/mall/im/admin/waiterUser/getWaiterByUserId',
+        method: 'get',
+        params: { userId },
+    });
+};
+export const create = (data) => {
+    return request({
+        url: '/mall/im/admin/waiterUser',
+        method: 'post',
+        data,
+    });
+};
+export const update = (data) => {
+    return request({
+        url: '/mall/im/admin/waiterUser',
+        method: 'put',
+        data,
+    });
+};
+export const remove = (ids) => {
+    return request({
+        url: '/mall/im/admin/waiterUser',
+        method: 'delete',
+        data: { ids },
+    });
+};

src/store/modules/chat/chatWaiter.js

@@ -1,4 +1,5 @@
-import * as api from '@/api/im/index.js';
+import * as api from '@/api/chat/waiter.js';
+import * as EmployeeAPI from '@/api/permission/employee.js';
 import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
 const state = () => ({
     code: 'ChatWaiter',
@@ -7,7 +8,7 @@ const state = () => ({
     total: 0,
     opts: {
         init: false,
-        store: [],
+        employee: [],
     },
 });
 const getters = {};
@@ -21,27 +22,26 @@ const mutations = {
 const actions = {
     search: async ({ state, commit, rootGetters }) => {
         let data = { ...state.condition };
-        let res = await api.searchWaiter({ ...rootGetters['local/page'](state.code), ...data });
-        if (res) {
-            commit('setList', res.records);
-            commit('setTotal', res.total);
-        } else {
+        let res = await api.search({ ...rootGetters['local/page'](state.code), ...data });
+        commit('setList', res?.records || []);
+        commit('setTotal', res?.total || 0);
+        if (!res) {
             ElMessage.error('查询失败');
-            commit('setList', []);
         }
         return res;
     },
-    load: async ({ commit }) => {
+    load: async ({ state, commit }) => {
         commit('setOpts', {
+            ...state.opts,
             init: true,
-            store: (await api.searchStore({ pageIndex: 1, length: 9999 }))?.records || [],
+            employee: (await EmployeeAPI.search({ pageIndex: 1, length: 9999 }))?.records || [],
         });
     },
     save: async ({ state, dispatch }, data) => {
         if (data.id) {
             data.systemId = state.condition.systemid;
         }
-        let save = data.id ? api.updateWaiter : api.createWaiter;
+        let save = data.id ? api.update : api.create;
         let res = await save(data);
         if (res) {
             ElMessage.success('保存成功');
@@ -51,13 +51,13 @@ const actions = {
         }
         return res;
     },
-    remove: async ({ dispatch }, data) => {
-        if (!data.waiterIds.length) {
+    remove: async ({ dispatch }, ids) => {
+        if (!ids.length) {
             ElMessage.warning('请选择要删除的数据');
         } else {
             try {
                 await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
-                let res = await api.removeWaiter(data);
+                let res = await api.remove(ids);
                 if (res) {
                     ElMessage.success('删除成功');
                     dispatch('search');

src/views/chat/waiter.vue

@@ -15,16 +15,6 @@
         >
             <template #search>
                 <el-form inline>
-                    <el-form-item label="所属店铺" prop="storeId">
-                        <el-select
-                            v-model="state.condition.storeId"
-                            :config="{ label: 'name', value: 'id' }"
-                            :opts="opts.store"
-                        />
-                    </el-form-item>
-                    <el-form-item label="客服ID" prop="waiterId">
-                        <el-input v-model="state.condition.waiterId" />
-                    </el-form-item>
                     <el-form-item label="客服昵称" prop="waiterNickname">
                         <el-input v-model="state.condition.waiterNickname" />
                     </el-form-item>
@@ -39,23 +29,17 @@
                 :model="formState.form"
                 :rules="formState.rules"
             >
-                <el-form-item label="所属店铺" prop="storeId">
+                <el-form-item label="客服员工" prop="userId">
                     <el-select
-                        v-model="formState.form.storeId"
-                        :config="{ label: 'name', value: 'id' }"
-                        :disabled="formState.form.id"
-                        :opts="opts.store"
+                        v-model="formState.form.userId"
+                        :config="{ label: 'employeeName', value: 'id' }"
+                        :disabled="!!formState.form.id"
+                        :opts="opts.employee"
                     />
                 </el-form-item>
-                <el-form-item label="客服类型" prop="type">
-                    <el-input v-model="formState.form.type" maxlength="20" />
-                </el-form-item>
                 <el-form-item label="客服头像" prop="waiterAvatar">
                     <el-upload-image v-model="formState.form.waiterAvatar" config-id="im/" />
                 </el-form-item>
-                <el-form-item label="客服ID" prop="waiterId">
-                    <el-input v-model="formState.form.waiterId" :disabled="!!formState.form.id" maxlength="20" />
-                </el-form-item>
                 <el-form-item label="客服昵称" prop="waiterNickname">
                     <el-input v-model="formState.form.waiterNickname" maxlength="20" />
                 </el-form-item>
@@ -72,7 +56,6 @@
     import ElButton from '@/components/extra/ElButton.vue';
     import ElImage from '@/components/extra/ElImage.vue';
     const store = useStore();
-    const route = useRoute();
     const { proxy } = getCurrentInstance();
     const loading = ref(false);
     const code = computed(() => store.state.chatWaiter.code);
@@ -84,36 +67,19 @@
     }
     const state = reactive({
         condition: {
-            storeId: null,
-            waiterId: null,
             waiterNickname: null,
         },
     });
     const handleReset = () => {
         state.condition = {
-            storeId: unref(opts).store?.[0]?.id,
-            waiterId: null,
             waiterNickname: null,
         };
     };
     const handleSearch = async () => {
-        if (state.condition.storeId) {
-            loading.value = true;
-            await store.dispatch('chatWaiter/search');
-            loading.value = false;
-        } else {
-            store.commit('chatWaiter/setList', []);
-            store.commit('chatWaiter/setTotal', 0);
-        }
+        loading.value = true;
+        await store.dispatch('chatWaiter/search');
+        loading.value = false;
     };
-    watch(
-        () => unref(opts).store,
-        (value) => {
-            if (!state.condition.storeId) {
-                state.condition.storeId = value[0]?.id;
-            }
-        }
-    );
     watch(
         () => state.condition,
         (value) => {
@@ -121,20 +87,7 @@
         },
         { immediate: true, deep: true }
     );
-    watch(
-        () => state.condition.storeId,
-        () => {
-            handleSearch();
-        }
-    );
-    onActivated(() => {
-        let storeId = route.query.storeId;
-        if (storeId) {
-            state.condition.storeId = +storeId;
-        } else {
-            handleSearch();
-        }
-    });
+    onActivated(handleSearch);
 
     /* 表单 */
     const refsForm = ref(null);
@@ -143,17 +96,13 @@
         submitting: false,
         form: {
             id: null,
-            storeId: null,
-            type: null,
             waiterAvatar: null,
-            waiterId: null,
+            userId: null,
             waiterNickname: null,
         },
         rules: {
-            storeId: [{ required: true, message: '所属店铺不能为空' }],
-            type: [{ required: true, message: '客服类型不能为空' }],
             waiterAvatar: [{ required: true, message: '客服头像不能为空' }],
-            waiterId: [{ required: true, message: '客服ID不能为空' }],
+            userId: [{ required: true, message: '客服员工不能为空' }],
             waiterNickname: [{ required: true, message: '客服昵称不能为空' }],
         },
     });
@@ -163,10 +112,8 @@
             formState.form,
             row || {
                 id: null,
-                storeId: null,
-                type: null,
                 waiterAvatar: null,
-                waiterId: null,
+                userId: null,
                 waiterNickname: null,
             }
         );
@@ -189,10 +136,10 @@
         formState.submitting = false;
     };
     const handleRemove = async (rows) => {
-        store.dispatch('chatWaiter/remove', {
-            storeId: state.condition.storeId,
-            waiterIds: rows.map((item) => item.waiterId),
-        });
+        store.dispatch(
+            'chatWaiter/remove',
+            rows.map((row) => row.id)
+        );
     };
     const config = reactive({
         // 表格列配置
@@ -202,23 +149,19 @@
                 width: 60,
             },
             {
-                label: '所属店铺',
-                width: 160,
+                label: '客服员工',
                 slots: {
-                    default: ({ row }) => proxy.$dict(unref(opts).store, row.storeId, { label: 'name', value: 'id' }),
+                    default: ({ row }) =>
+                        proxy.$dict(unref(opts).employee, row.userId, { label: 'employeeName', value: 'id' }),
                 },
             },
             {
                 label: '客服头像',
                 width: 160,
                 slots: {
-                    default: ({ row }) => <ElImage src={row.waiterAvatar} alt={row.waiterNickname} />,
+                    default: ({ row }) => <ElImage src={row.waiterAvatar} alt={row.waiterNickname} width="64px" />,
                 },
             },
-            {
-                label: '客服ID',
-                prop: 'waiterId',
-            },
             {
                 label: '客服昵称',
                 prop: 'waiterNickname',

src/views/im/store/index.vue

@@ -154,7 +154,7 @@
     };
     const handleWaiter = (row) => {
         router.push({
-            name: 'ChatWaiter',
+            name: 'ImWaiter',
             query: {
                 storeId: row.id,
             },

src/views/im/system/index.vue

@@ -131,7 +131,7 @@
         );
     };
     const handleStore = (row) => {
-        router.push({ name: 'ChatStore', query: { sysId: row.id } });
+        router.push({ name: 'ImStore', query: { sysId: row.id } });
     };
     const config = reactive({
         // 表格列配置

src/views/im/waiter/index.vue

@@ -196,10 +196,6 @@
     const config = reactive({
         // 表格列配置
         columns: [
-            {
-                type: 'selection',
-                width: 60,
-            },
             {
                 label: '所属店铺',
                 width: 160,