From f10f91eaabff179c3453d5c77d848d9ba09e46fb Mon Sep 17 00:00:00 2001
From: wangzenghua <1048523306@qq.com>
Date: Thu, 10 Apr 2025 02:12:10 +0100
Subject: [PATCH] feat:user

---
 .../src/views/system/user/index.vue           | 540 ++++++++++++++++++
 1 file changed, 540 insertions(+)
 create mode 100644 sub-government-affairs-service/src/views/system/user/index.vue

diff --git a/sub-government-affairs-service/src/views/system/user/index.vue b/sub-government-affairs-service/src/views/system/user/index.vue
new file mode 100644
index 0000000..76734bb
--- /dev/null
+++ b/sub-government-affairs-service/src/views/system/user/index.vue
@@ -0,0 +1,540 @@
+<template>
+  <div class="custom-page">
+    <el-row :gutter="20">
+      <splitpanes class="default-theme">
+        <pane size="16">
+          <el-col>
+            <custom-table-tree title="部门组织信息" :data="treeData" :option="treeOption" filter @node-click="handleNodeClick">
+              <template #default="{ data }">
+                <div :class="{ 'text-primary': data.deptId == treeSelected.deptId }">
+                  {{ data.deptName }}
+                </div>
+              </template>
+            </custom-table-tree>
+          </el-col>
+        </pane>
+        <pane size="84">
+          <el-col>
+            <avue-crud
+              ref="crudRef"
+              v-model:search="state.query"
+              v-model:page="state.pageData"
+              :table-loading="state.loading"
+              :data="state.data"
+              :option="state.options"
+              @refresh-change="refreshChange"
+              @search-reset="searchChange"
+              @search-change="searchChange"
+              @selection-change="selectionChange"
+              @current-change="currentChange"
+              @size-change="sizeChange"
+              @row-save="rowSave"
+              @row-update="rowUpdate"
+              @row-del="rowDel"
+            >
+              <template #status="{ row }">
+                <el-tag v-if="row.status == 0" type="success">启用</el-tag>
+                <el-tag v-if="row.status == 1" type="danger">禁用</el-tag>
+              </template>
+
+              <template #menu="scope">
+                <custom-table-operate :show="!scope.row.admin" :actions="state.options.actions" :data="scope" />
+              </template>
+            </avue-crud>
+          </el-col>
+        </pane>
+      </splitpanes>
+    </el-row>
+
+    <custom-import-excel
+      ref="importExcelRef"
+      title="用户导入"
+      :template-url="getAssetsFile('template/用户-导入模板.xlsx')"
+      @on-download="onDownloadExcel"
+      @on-confirm="onUploadExcel"
+    />
+  </div>
+</template>
+<script setup>
+import { reactive, ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useApp } from '@/hooks';
+import { CRUD_OPTIONS } from '@/config';
+import { useUserStore } from '@/store/modules/user';
+import { isEmpty, getAssetsFile, downloadFile, getTree, getParentIds } from '@/utils';
+import {
+  GetEntityList,
+  AddEntity,
+  UpdateEntity,
+  DeleteEntity,
+  ImportEntity,
+  ExportEntity,
+  GetUser,
+  UpdateStatus,
+  GetDeptList,
+} from '@/apis/system/user';
+
+const { VITE_APP_BASE_API } = import.meta.env;
+const app = useApp();
+const UserStore = useUserStore();
+const router = useRouter();
+const crudRef = ref(null);
+const importExcelRef = ref(null);
+const treeData = ref([]);
+const treeOption = ref({
+  nodeKey: 'id',
+  props: { children: 'children', label: 'deptName', id: 'deptId' },
+});
+const treeSelected = ref({});
+const userId = computed(() => '');
+const state = reactive({
+  loading: false,
+  query: {
+    current: 1,
+    size: 10,
+  },
+  form: {},
+  selection: [],
+  options: {
+    ...CRUD_OPTIONS,
+    selection: false,
+    rowKey: 'userId',
+    column: [
+      {
+        label: '登录名',
+        prop: 'userName',
+        search: true,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '用户名称',
+        prop: 'nickName',
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '用户密码',
+        prop: 'password',
+        hide: true,
+        addDisplay: true,
+        editDisplay: false,
+        viewDisplay: false,
+        showPassword: true,
+        maxlength: 20,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '用户性别',
+        prop: 'sex',
+        type: 'select',
+        hide: true,
+        props: {
+          label: 'dictLabel',
+          value: 'dictValue',
+        },
+        dicUrl: `${VITE_APP_BASE_API}/system/dict/data/type/sys_user_sex`,
+        dicHeaders: {
+          authorization: UserStore.token,
+        },
+        dicFormatter: (res) => {
+          return res.data;
+        },
+        rules: {
+          required: true,
+          message: '请选择',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '手机号',
+        prop: 'phonenumber',
+        search: true,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '状态',
+        prop: 'status',
+        type: 'select',
+        search: true,
+        dicData: [
+          {
+            label: '启用',
+            value: '0',
+          },
+          {
+            label: '禁用',
+            value: '1',
+          },
+        ],
+        value: '0',
+        rules: {
+          required: true,
+          message: '请选择',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '邮箱',
+        prop: 'email',
+        hide: true,
+      },
+      {
+        label: '归属部门',
+        prop: 'deptIds',
+        type: 'cascader',
+        checkStrictly: true,
+        props: {
+          label: 'label',
+          value: 'id',
+        },
+        dicUrl: `${VITE_APP_BASE_API}/system/user/deptTree`,
+        dicHeaders: {
+          authorization: UserStore.token,
+        },
+        dicFormatter: (res) => {
+          return res.data;
+        },
+        render: ({ row }) => {
+          return row?.dept?.deptName ?? '';
+        },
+      },
+      // {
+      //   label: '岗位',
+      //   prop: 'postIds',
+      //   type: 'select',
+      //   hide: true,
+      //   props: {
+      //     label: 'postName',
+      //     value: 'postId',
+      //   },
+      //   dicUrl: `${VITE_APP_BASE_API}/system/user/${userId.value}`,
+      //   // dicFlag: true,
+      //   dicHeaders: {
+      //     authorization: UserStore.token,
+      //   },
+      //   dicFormatter: (res) => {
+      //     return res.posts;
+      //   },
+      // },
+      {
+        label: '角色',
+        prop: 'roleIds',
+        type: 'select',
+        multiple: true,
+        hide: true,
+        props: {
+          label: 'roleName',
+          value: 'roleId',
+        },
+        dicUrl: `${VITE_APP_BASE_API}/system/user/${userId.value}`,
+        // dicFlag: true,
+        dicHeaders: {
+          authorization: UserStore.token,
+        },
+        dicFormatter: (res) => {
+          return res.roles;
+        },
+      },
+      {
+        label: '备注',
+        prop: 'remark',
+        type: 'textarea',
+        span: 24,
+        rows: 4,
+        overHidden: true,
+        width: 200,
+      },
+    ],
+    actions: [
+      {
+        name: '查看',
+        icon: 'view',
+        event: ({ row }) => rowView(row),
+      },
+      {
+        name: '编辑',
+        icon: 'edit',
+        event: ({ row }) => rowEdit(row),
+      },
+      {
+        type: 'primary',
+        name: ({ row }) => {
+          return row.status == 0 ? '禁用' : '启用';
+        },
+        icon: ({ row }) => {
+          return row.status == 0 ? 'turnOff' : 'open';
+        },
+        event: ({ row }) => rowStatus(row),
+      },
+      // {
+      //   name: '分配角色',
+      //   icon: 'userFilled',
+      //   event: ({ row }) => rowRole(row),
+      // },
+      {
+        type: 'danger',
+        name: '删除',
+        icon: 'delete',
+        event: ({ row }) => rowDel(row),
+      },
+    ],
+  },
+  pageData: {
+    total: 0,
+    currentPage: 1,
+    pageSize: 10,
+  },
+  data: [],
+  postOptions: [],
+  roleOptions: [],
+});
+
+// tree
+const getDeptTree = async () => {
+  try {
+    const res = await GetDeptList();
+    if (res.code == 200) {
+      treeData.value = getTree(res.data, 'deptId');
+    }
+  } catch (err) {
+    app.$message.error(err.msg);
+  }
+};
+
+const handleNodeClick = (data) => {
+  treeSelected.value = data;
+  state.query.deptId = data.deptId;
+  loadData();
+};
+
+getDeptTree();
+
+// 加载
+const loadData = () => {
+  state.loading = true;
+  GetEntityList(state.query)
+    .then((res) => {
+      if (res.code === 200) {
+        const { current, size, total, records } = res.data;
+        state.data = records;
+        state.pageData = {
+          currentPage: current || 1,
+          pageSize: size || 10,
+          total: total,
+        };
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    })
+    .finally(() => {
+      state.loading = false;
+    });
+};
+
+loadData();
+
+// 页数
+const currentChange = (current) => {
+  state.query.current = current;
+  loadData();
+};
+
+// 条数
+const sizeChange = (size) => {
+  state.query.size = size;
+  loadData();
+};
+
+// 搜索
+const searchChange = (params, done) => {
+  if (done) done();
+  state.query = params;
+  state.query.current = 1;
+  loadData();
+};
+
+// 刷新
+const refreshChange = () => {
+  loadData();
+  app.$message.success('刷新成功');
+};
+
+// 选择
+const selectionChange = (rows) => {
+  state.selection = rows;
+};
+
+// 查看
+const rowView = async (row) => {
+  const { roleIds, postIds } = await GetUser(row.userId);
+  row.roleIds = roleIds;
+  row.postIds = postIds;
+  row.deptIds = [...getParentIds(treeData.value, row.deptId, 'deptId'), row.deptId];
+  crudRef.value.rowView(row);
+};
+
+// 启用、禁用
+const rowStatus = (row) => {
+  let status = row.status == 1 ? 0 : 1;
+  UpdateStatus({ userId: row.userId, status })
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('状态更改成功！');
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    });
+};
+
+// 新增
+const setDeptIds = (row) => {
+  if (!isEmpty(row.deptIds)) {
+    const len = row.deptIds.length;
+    row.deptId = row?.deptIds[len - 1] ?? '';
+  }
+};
+
+const rowSave = (row, done, loading) => {
+  setDeptIds(row);
+  AddEntity(row)
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('添加成功！');
+        done();
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    })
+    .finally(() => {
+      loading();
+    });
+};
+
+// 编辑
+const rowEdit = async (row) => {
+  const { roleIds, postIds } = await GetUser(row.userId);
+  row.roleIds = roleIds;
+  row.postIds = postIds;
+  row.deptIds = [...getParentIds(treeData.value, row.deptId, 'deptId'), row.deptId];
+  crudRef.value.rowEdit(row);
+};
+
+const rowUpdate = (row, index, done, loading) => {
+  setDeptIds(row);
+  UpdateEntity(row)
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('更新成功！');
+        done();
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    })
+    .finally(() => {
+      loading();
+    });
+};
+
+// 分配角色
+const rowRole = (row) => {
+  router.push({
+    path: '/sub-government-affairs-service/system-auth-role',
+    query: { id: row.userId },
+  });
+};
+
+// 删除
+const rowDel = (row, index, done) => {
+  if (isEmpty(row)) return;
+  app
+    .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(() => {
+      DeleteEntity({ id: row.userId })
+        .then((res) => {
+          if (res.code === 200) {
+            app.$message.success('删除成功！');
+            loadData();
+          }
+        })
+        .catch((err) => {
+          app.$message.error(err.msg);
+        });
+    })
+    .catch(() => {});
+};
+
+// 导入
+const rowImport = () => {
+  importExcelRef?.value && importExcelRef.value.show();
+};
+
+const onDownloadExcel = (url) => {
+  downloadFile(url, `用户-导入模板.xlsx.xlsx`);
+};
+
+const onUploadExcel = (formData) => {
+  ImportEntity(formData)
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('导入成功！');
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error('导入失败！');
+      importExcelRef.value.clear();
+    })
+    .finally(() => {
+      importExcelRef.value.hide();
+    });
+};
+
+// 导出
+const rowExport = () => {
+  if (isEmpty(state.data)) {
+    app.$message.error('当前暂时没有可供导出的数据！');
+    return;
+  }
+  state.loading = true;
+  const fileName = '用户';
+  ExportEntity(state.query)
+    .then((res) => {
+      if (res.status === 200) {
+        downloadFile(res.data, `${fileName}.xlsx`, 'blob');
+        app.$message.success('导出成功！');
+      }
+    })
+    .catch((err) => {
+      app.$message.error('导出失败！');
+    })
+    .finally(() => {
+      state.loading = false;
+    });
+};
+</script>