feat: 用户管理

src/api/system/user.js

@@ -6,6 +6,12 @@ export const search = (params) => {
         params,
     });
 };
+export const detail = (id) => {
+    return request({
+        url: '/employee/' + id,
+        method: 'get',
+    });
+};
 export const create = (data) => {
     return request({
         url: '/employee',
@@ -20,10 +26,10 @@ export const update = (data) => {
         data,
     });
 };
-export const remove = (params) => {
+export const remove = (idList) => {
     return request({
         url: '/employee',
         method: 'delete',
-        params,
+        params: { idList },
     });
 };

src/store/modules/system/user.js

@@ -7,7 +7,7 @@ const state = () => ({
     total: 0,
     opts: {
         init: false,
-        sex: [],
+        type: [],
     },
 });
 const getters = {};
@@ -22,8 +22,8 @@ const actions = {
     search: async ({ state, commit, rootGetters }) => {
         let res = await api.search({ ...rootGetters['local/page'](state.code), ...state.condition });
         if (res) {
-            commit('setList', res.content);
+            commit('setList', res.records);
-            commit('setTotal', res.totalElements);
+            commit('setTotal', res.total);
         } else {
             ElMessage.error('查询失败');
             commit('setList', []);
@@ -33,17 +33,11 @@ const actions = {
     load: async ({ commit }) => {
         commit('setOpts', {
             init: true,
-            sex: [
+            type: [{ label: '普通员工', value: 1 }],
-                { label: '男', value: 1 },
-                { label: '女', value: 0 },
-            ],
         });
     },
-    detail: async ({ dispatch }, id) => {
+    detail: async (context, id) => {
-        if (!state.list.length) {
+        let res = await api.detail(id);
-            await dispatch('search');
-        }
-        let res = state.list.find((item) => item.id === id);
         if (!res) {
             ElMessage.error('加载详情失败');
         }
@@ -66,7 +60,7 @@ const actions = {
         } else {
             try {
                 await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
-                let res = await api.remove({ idList });
+                let res = await api.remove(idList.join(','));
                 if (res) {
                     ElMessage.success('删除成功');
                     dispatch('search');

src/views/system/user/form.vue

@@ -8,29 +8,26 @@
             :model="form"
             :rules="rules"
         >
-            <el-form-item label="客户名称" prop="name">
+            <el-form-item label="用户名" prop="userName">
-                <el-input v-model="form.name" />
+                <el-input v-model="form.userName" />
             </el-form-item>
-            <el-form-item label="客户来源" prop="platform">
+            <el-form-item label="员工姓名" prop="employeeName">
-                <el-select v-model="form.platform" :config="{ label: 'name', value: 'id' }" :opts="opts.platform" />
+                <el-input v-model="form.employeeName" />
             </el-form-item>
-            <el-form-item label="凭证图片" prop="voucherClueUrls">
+            <el-form-item label="员工类型" prop="employeeType">
-                <el-upload-image v-model="form.voucherClueUrls" :limit="9" :size="5 * 1024 * 1024" />
+                <el-select v-model="form.employeeType" :opts="opts.type" />
             </el-form-item>
             <el-form-item label="手机号" prop="phone">
                 <el-input v-model="form.phone" />
             </el-form-item>
-            <el-form-item label="QQ号" prop="qqNo">
+            <el-form-item label="邮箱" prop="email">
-                <el-input v-model="form.qqNo" />
+                <el-input v-model="form.email" />
             </el-form-item>
-            <el-form-item label="微信号" prop="wechatNo">
+            <el-form-item label="是否启用" prop="isEnable">
-                <el-input v-model="form.wechatNo" />
+                <el-switch v-model="form.isEnable" />
             </el-form-item>
-            <el-form-item label="加好友时间" prop="addFriendsTime">
+            <el-form-item label="备注" prop="remark">
-                <el-date-picker v-model="form.addFriendsTime" value-format="YYYY-MM-DD HH:mm:ss" />
+                <el-input v-model="form.remark" type="textarea" />
-            </el-form-item>
-            <el-form-item label="备注" prop="remarks">
-                <el-input v-model="form.remarks" type="textarea" />
             </el-form-item>
         </el-form>
         <div class="form-footer">
@@ -52,28 +49,29 @@
     const refsForm = ref(null);
     const form = reactive({
         id: null,
-        name: null,
+        email: '',
-        platform: null,
+        employeeName: '',
-        voucherClueUrls: [],
+        employeeType: 1,
-        phone: null,
+        isEnable: false,
-        qqNo: null,
+        phone: '',
-        wechatNo: null,
+        remark: '',
-        addFriendsTime: null,
+        userName: '',
-        remarks: null,
     });
     const rules = reactive({
-        name: [{ required: true, message: '客户名称不能为空' }],
+        userName: [{ required: true, message: '用户名不能为空' }],
+        employeeName: [{ required: true, message: '员工姓名不能为空' }],
+        employeeType: [{ required: true, message: '员工类型不能为空' }],
     });
-    const opts = computed(() => store.state.customerPool.opts);
+    const opts = computed(() => store.state.user.opts);
     if (!unref(opts).init) {
-        store.dispatch('customerPool/load');
+        store.dispatch('user/load');
     }
     /* 数据 */
     const handleLoad = async () => {
         if (route.params.id) {
             const id = +route.params.id;
             if (form.id !== id) {
-                let res = await store.dispatch('customerPool/detail', id);
+                let res = await store.dispatch('user/detail', id);
                 Object.assign(form, res);
             }
         }
@@ -87,7 +85,7 @@
             let data = { ...unref(form) };
             data.voucherClueUrls = data.voucherClueUrls || [];
             data.voucherClueUrl = data.voucherClueUrls.join(',');
-            let res = await store.dispatch('customerPool/save', data);
+            let res = await store.dispatch('user/save', data);
             if (res) {
                 if (!data.id) {
                     unref(refsForm).resetFields();
@@ -108,7 +106,7 @@
         }
     };
     const handleClose = () => {
-        router.push({ name: 'CustomerPool' });
+        router.push({ name: 'UserManagement' });
     };
 </script>
 

src/views/system/user/index.vue

@@ -27,6 +27,8 @@
 
 <script setup lang="jsx">
     import ElButton from '@/components/extra/ElButton.vue';
+    import { ElTag } from 'element-plus/es';
+    const { proxy } = getCurrentInstance();
     const router = useRouter();
     const store = useStore();
     const loading = ref(false);
@@ -87,6 +89,11 @@
                 minWidth: 160,
                 fixed: 'left',
             },
+            {
+                label: '用户名',
+                prop: 'userName',
+                minWidth: 160,
+            },
             {
                 label: '手机',
                 prop: 'phone',
@@ -99,13 +106,20 @@
             },
             {
                 label: '员工类型',
-                prop: 'employeeType',
+                width: 120,
-                width: 160,
+                slots: {
+                    default: ({ row }) => proxy.$dict(unref(opts).type, row.employeeType),
+                },
             },
             {
                 label: '是否启用',
                 prop: 'isEnable',
                 width: 180,
+                slots: {
+                    default: ({ row }) => (
+                        <ElTag type={row.isEnable ? 'success' : 'error'}>{row.isEnable ? '启用' : '禁用'}</ElTag>
+                    ),
+                },
             },
             {
                 label: '备注',
@@ -147,7 +161,7 @@
                         </div>
                     ),
                 },
-                width: 100,
+                width: 120,
             },
         ],
     });