From c21e23a6fcced2abea091b1ed457716192d5561e Mon Sep 17 00:00:00 2001
From: lcc <805383944@qq.com>
Date: Tue, 24 Jun 2025 23:50:02 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=90=E8=90=A5=E5=90=8E=E5=8F=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=B9=B3=E5=AE=89=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/api/pingan/user/index.js            | 107 +++++++
 .../pinan/user/components/role-select.vue     |  54 ++++
 .../views/pinan/user/components/user-edit.vue | 262 ++++++++++++++++++
 .../pinan/user/components/user-import.vue     |  99 +++++++
 .../pinan/user/components/user-search.vue     |  82 ++++++
 admin/src/views/pinan/user/index.vue          | 242 ++++++++++++++++
 6 files changed, 846 insertions(+)
 create mode 100644 admin/src/api/pingan/user/index.js
 create mode 100644 admin/src/views/pinan/user/components/role-select.vue
 create mode 100644 admin/src/views/pinan/user/components/user-edit.vue
 create mode 100644 admin/src/views/pinan/user/components/user-import.vue
 create mode 100644 admin/src/views/pinan/user/components/user-search.vue
 create mode 100644 admin/src/views/pinan/user/index.vue

diff --git a/admin/src/api/pingan/user/index.js b/admin/src/api/pingan/user/index.js
new file mode 100644
index 0000000..290cf32
--- /dev/null
+++ b/admin/src/api/pingan/user/index.js
@@ -0,0 +1,107 @@
+import request from '@/utils/request';
+
+/**
+ * 分页查询用户
+ * @param params 查询条件
+ */
+export async function pageUsers(params) {
+  const res = await request.get('/pinan/user/page', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加用户
+ * @param data 用户信息
+ */
+export async function addUser(data) {
+  const res = await request.post('/pinan/user/user', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改用户
+ * @param data 用户信息
+ */
+export async function updateUser(data) {
+  const res = await request.put('/pinan/user/user', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除用户
+ * @param id 用户id
+ */
+export async function removeUser(id) {
+  return removeUsers([id]);
+}
+
+/**
+ * 批量删除用户
+ * @param data 用户id集合
+ */
+export async function removeUsers(ids) {
+  const res = await request.delete('/pinan/user/batch', {
+    data: { ids }
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改用户状态
+ * @param userId 用户id
+ * @param status 状态
+ */
+export async function updateUserStatus(id, status) {
+  const res = await request.put('/pinan/user/status', {
+    id,
+    status
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 导入用户
+ * @param file excel文件
+ */
+export async function importUsers(file) {
+  const formData = new FormData();
+  formData.append('file', file);
+  const res = await request.post('/system/user/import', formData);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 检查用户是否存在
+ * @param field 检查的字段
+ * @param value 字段的值
+ * @param id 修改时的id
+ */
+export async function checkExistence(field, value, id) {
+  const res = await request.get('/system/user/existence', {
+    params: { field, value, id }
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/admin/src/views/pinan/user/components/role-select.vue b/admin/src/views/pinan/user/components/role-select.vue
new file mode 100644
index 0000000..868d3ba
--- /dev/null
+++ b/admin/src/views/pinan/user/components/role-select.vue
@@ -0,0 +1,54 @@
+<!-- 角色选择下拉框 -->
+<template>
+  <el-select
+    multiple
+    clearable
+    :value="value"
+    class="ele-block"
+    :placeholder="placeholder"
+    @input="updateValue"
+  >
+    <el-option
+      v-for="item in data"
+      :key="item.roleId"
+      :value="item.roleId"
+      :label="item.roleName"
+    />
+  </el-select>
+</template>
+
+<script>
+  import { listRoles } from '@/api/system/role';
+
+  export default {
+    props: {
+      // 选中的数据(v-modal)
+      value: Array,
+      // 提示信息
+      placeholder: {
+        type: String,
+        default: '请选择角色'
+      }
+    },
+    data() {
+      return {
+        data: []
+      };
+    },
+    created() {
+      /* 获取角色数据 */
+      listRoles()
+        .then((list) => {
+          this.data = list;
+        })
+        .catch((e) => {
+          this.$message.error(e.message);
+        });
+    },
+    methods: {
+      updateValue(value) {
+        this.$emit('input', value);
+      }
+    }
+  };
+</script>
diff --git a/admin/src/views/pinan/user/components/user-edit.vue b/admin/src/views/pinan/user/components/user-edit.vue
new file mode 100644
index 0000000..368ae40
--- /dev/null
+++ b/admin/src/views/pinan/user/components/user-edit.vue
@@ -0,0 +1,262 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="680px"
+    :visible="visible"
+    :append-to-body="true"
+    :close-on-click-modal="true"
+    custom-class="ele-dialog-form"
+    :title="isUpdate ? '修改用户' : '添加用户'"
+    @update:visible="updateVisible"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
+      <el-row :gutter="15">
+        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+          <el-form-item label="用户账号:" prop="username">
+            <el-input
+              clearable
+              :maxlength="20"
+              :disabled="isUpdate"
+              v-model="form.username"
+              placeholder="请输入用户账号"
+            />
+          </el-form-item>
+          <el-form-item label="用户名:" prop="nickname">
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.nickname"
+              placeholder="请输入用户名"
+            />
+          </el-form-item>
+          <el-form-item label="性别:" prop="sex">
+            <el-select
+              clearable
+              class="ele-block"
+              v-model="form.sex"
+              placeholder="请选择性别"
+            >
+              <el-option label="男" value="1" />
+              <el-option label="女" value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="角色:" prop="roleIds">
+            <role-select v-model="form.roleIds" />
+          </el-form-item>
+          <el-form-item label="邮箱:" prop="email">
+            <el-input
+              clearable
+              :maxlength="100"
+              v-model="form.email"
+              placeholder="请输入邮箱"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+          <el-form-item label="手机号:" prop="phone">
+            <el-input
+              clearable
+              :maxlength="11"
+              v-model="form.phone"
+              placeholder="请输入手机号"
+            />
+          </el-form-item>
+          <el-form-item label="出生日期:" prop="birthday">
+            <el-date-picker
+              type="date"
+              class="ele-fluid"
+              v-model="form.birthday"
+              value-format="yyyy-MM-dd"
+              placeholder="请选择出生日期"
+            />
+          </el-form-item>
+          <el-form-item v-if="!isUpdate" label="登录密码:" prop="password">
+            <el-input
+              show-password
+              :maxlength="20"
+              v-model="form.password"
+              placeholder="请输入登录密码"
+            />
+          </el-form-item>
+          <el-form-item label="个人简介:">
+            <el-input
+              :rows="4"
+              clearable
+              type="textarea"
+              :maxlength="200"
+              v-model="form.introduction"
+              placeholder="请输入个人简介"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template v-slot:footer>
+      <el-button @click="updateVisible(false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+  import { emailReg, phoneReg } from 'ele-admin';
+  import RoleSelect from './role-select.vue';
+  import { addUser, updateUser, checkExistence } from '@/api/system/user';
+
+  export default {
+    components: { RoleSelect },
+    props: {
+      // 弹窗是否打开
+      visible: Boolean,
+      // 修改回显的数据
+      data: Object
+    },
+    data() {
+      const defaultForm = {
+        userId: null,
+        username: '',
+        nickname: '',
+        sex: null,
+        roleIds: [],
+        email: '',
+        phone: '',
+        birthday: '',
+        password: '',
+        introduction: ''
+      };
+      return {
+        defaultForm,
+        // 表单数据
+        form: { ...defaultForm },
+        // 表单验证规则
+        rules: {
+          username: [
+            {
+              required: true,
+              trigger: 'blur',
+              validator: (_rule, value, callback) => {
+                if (!value) {
+                  return callback(new Error('请输入用户账号'));
+                }
+                checkExistence('username', value, this.data?.username)
+                  .then(() => {
+                    callback(new Error('账号已经存在'));
+                  })
+                  .catch(() => {
+                    callback();
+                  });
+              }
+            }
+          ],
+          nickname: [
+            {
+              required: true,
+              message: '请输入用户名',
+              trigger: 'blur'
+            }
+          ],
+          sex: [
+            {
+              required: true,
+              message: '请选择性别',
+              trigger: 'blur'
+            }
+          ],
+          roleIds: [
+            {
+              required: true,
+              message: '请选择角色',
+              trigger: 'blur'
+            }
+          ],
+          email: [
+            {
+              pattern: emailReg,
+              message: '邮箱格式不正确',
+              trigger: 'blur'
+            }
+          ],
+          password: [
+            {
+              required: true,
+              pattern: /^[\S]{5,18}$/,
+              message: '密码必须为5-18位非空白字符',
+              trigger: 'blur'
+            }
+          ],
+          phone: [
+            {
+              pattern: phoneReg,
+              message: '手机号格式不正确',
+              trigger: 'blur'
+            }
+          ]
+        },
+        // 提交状态
+        loading: false,
+        // 是否是修改
+        isUpdate: false
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 保存编辑 */
+      save() {
+        this.$refs.form.validate((valid) => {
+          if (!valid) {
+            return false;
+          }
+          this.loading = true;
+          const data = {
+            ...this.form,
+            roles: this.form.roleIds.map((d) => {
+              return { roleId: d };
+            })
+          };
+          const saveOrUpdate = this.isUpdate ? updateUser : addUser;
+          saveOrUpdate(data)
+            .then((msg) => {
+              this.loading = false;
+              this.$message.success(msg);
+              this.updateVisible(false);
+              this.$emit('done');
+            })
+            .catch((e) => {
+              this.loading = false;
+              this.$message.error(e.message);
+            });
+        });
+      },
+      /* 更新visible */
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      }
+    },
+    watch: {
+      visible(visible) {
+        if (visible) {
+          if (this.data) {
+            this.$util.assignObject(this.form, {
+              ...this.data,
+              roleIds: this.data.roles.map((d) => d.roleId),
+              password: ''
+            });
+            this.isUpdate = true;
+          } else {
+            this.isUpdate = false;
+          }
+        } else {
+          this.$refs.form.clearValidate();
+          this.form = { ...this.defaultForm };
+        }
+      }
+    }
+  };
+</script>
diff --git a/admin/src/views/pinan/user/components/user-import.vue b/admin/src/views/pinan/user/components/user-import.vue
new file mode 100644
index 0000000..e5161ec
--- /dev/null
+++ b/admin/src/views/pinan/user/components/user-import.vue
@@ -0,0 +1,99 @@
+<!-- 用户导入弹窗 -->
+<template>
+  <ele-modal
+    width="520px"
+    title="导入用户"
+    :visible="visible"
+    @update:visible="updateVisible"
+  >
+    <el-upload
+      drag
+      action=""
+      class="ele-block"
+      v-loading="loading"
+      accept=".xls,.xlsx"
+      :show-file-list="false"
+      :before-upload="doUpload"
+    >
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处, 或 <em>点击上传</em></div>
+      <template v-slot:tip>
+        <div class="el-upload__tip ele-text-center">
+          <span>只能上传xls、xlsx文件, </span>
+          <el-link
+            download
+            :href="url"
+            type="primary"
+            :underline="false"
+            style="vertical-align: baseline"
+          >
+            下载模板
+          </el-link>
+        </div>
+      </template>
+    </el-upload>
+  </ele-modal>
+</template>
+
+<script>
+  import { importUsers } from '@/api/system/user';
+
+  export default {
+    props: {
+      // 是否打开弹窗
+      visible: Boolean
+    },
+    data() {
+      return {
+        // 导入请求状态
+        loading: false,
+        // 导入模板下载地址
+        url: 'https://cdn.eleadmin.com/20200610/用户导入模板.xlsx'
+      };
+    },
+    methods: {
+      /* 上传 */
+      doUpload(file) {
+        if (
+          ![
+            'application/vnd.ms-excel',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+          ].includes(file.type)
+        ) {
+          this.$message.error('只能选择 excel 文件');
+          return false;
+        }
+        if (file.size / 1024 / 1024 > 10) {
+          this.$message.error('大小不能超过 10MB');
+          return false;
+        }
+        this.loading = true;
+        importUsers(file)
+          .then((msg) => {
+            this.loading = false;
+            this.$message.success(msg);
+            this.updateVisible(false);
+            this.$emit('done');
+          })
+          .catch((e) => {
+            this.loading = false;
+            this.$message.error(e.message);
+          });
+        return false;
+      },
+      /* 更新visible */
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ele-block {
+    :deep(.el-upload),
+    :deep(.el-upload-dragger) {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/admin/src/views/pinan/user/components/user-search.vue b/admin/src/views/pinan/user/components/user-search.vue
new file mode 100644
index 0000000..7da4046
--- /dev/null
+++ b/admin/src/views/pinan/user/components/user-search.vue
@@ -0,0 +1,82 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="77px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="用户账号:">
+          <el-input clearable v-model="where.username" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="用户名:">
+          <el-input clearable v-model="where.nickname" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="性别:">
+          <el-select
+            clearable
+            v-model="where.sex"
+            placeholder="请选择"
+            class="ele-fluid"
+          >
+            <el-option label="男" :value="1" />
+            <el-option label="女" :value="2" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  export default {
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        username: '',
+        nickname: '',
+        sex: undefined
+      };
+      return {
+        // 表单数据
+        where: { ...defaultWhere }
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 搜索 */
+      search() {
+        this.$emit('search', this.where);
+      },
+      /*  重置 */
+      reset() {
+        this.where = { ...this.defaultWhere };
+        this.search();
+      }
+    }
+  };
+</script>
diff --git a/admin/src/views/pinan/user/index.vue b/admin/src/views/pinan/user/index.vue
new file mode 100644
index 0000000..9f0bb94
--- /dev/null
+++ b/admin/src/views/pinan/user/index.vue
@@ -0,0 +1,242 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <!-- 搜索表单 -->
+      <!--
+      <user-search @search="reload" />
+      -->
+      <!-- 数据表格 -->
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        :selection.sync="selection"
+        cache-key="pinanUserTable"
+      >
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <el-button
+            size="small"
+            type="danger"
+            icon="el-icon-delete"
+            class="ele-btn-icon"
+            @click="removeBatch"
+          >
+            删除
+          </el-button>
+          <!--<el-button
+            size="small"
+            icon="el-icon-upload2"
+            class="ele-btn-icon"
+            @click="openImport"
+          >
+            导入
+          </el-button>-->
+        </template>
+        <!-- 用户名列 -->
+        <template v-slot:nickname="{ row }">
+          <router-link :to="'/system/user/details?id=' + row.id">
+            {{ row.nickname }}
+          </router-link>
+        </template>
+        <!-- 角色列 -->
+        <template v-slot:roles="{ row }">
+          <el-tag
+            v-for="item in row.roles"
+            :key="item.roleId"
+            size="mini"
+            type="primary"
+            :disable-transitions="true"
+          >
+            {{ item.roleName }}
+          </el-tag>
+        </template>
+        <!-- 状态列 -->
+        <template v-slot:status="{ row }">
+          <el-switch
+            :active-value="1"
+            :inactive-value="0"
+            v-model="row.status"
+            @change="editStatus(row)"
+          />
+        </template>
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-popconfirm
+            class="ele-action"
+            title="确定要删除此用户吗？"
+            @confirm="remove(row)"
+          >
+            <template v-slot:reference>
+              <el-link type="danger" :underline="false" icon="el-icon-delete">
+                删除
+              </el-link>
+            </template>
+          </el-popconfirm>
+        </template>
+      </ele-pro-table>
+    </el-card>
+    <!-- 导入弹窗 -->
+    <user-import :visible.sync="showImport" @done="reload" />
+  </div>
+</template>
+
+<script>
+  import UserImport from './components/user-import.vue';
+  import {
+    pageUsers,
+    removeUser,
+    removeUsers,
+    updateUserStatus
+  } from '@/api/pingan/user';
+
+  export default {
+    name: 'SystemUser',
+    components: {
+      UserImport
+    },
+    data() {
+      return {
+        // 表格列配置
+        columns: [
+          {
+            columnKey: 'selection',
+            type: 'selection',
+            width: 45,
+            align: 'center',
+            fixed: 'left'
+          },
+          {
+            prop: 'id',
+            label: 'ID',
+            sortable: 'id',
+            minWidth: 45,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'username',
+            label: '用户账号',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'mobile',
+            label: '手机号',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'createTime',
+            label: '创建时间',
+            sortable: 'createTime',
+            showOverflowTooltip: true,
+            minWidth: 110,
+            formatter: (_row, _column, cellValue) => {
+              return this.$util.toDateString(cellValue);
+            }
+          },
+          {
+            prop: 'status',
+            label: '状态',
+            align: 'center',
+            sortable: 'custom',
+            width: 80,
+            resizable: false,
+            slot: 'status',
+            showOverflowTooltip: true
+          },
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 220,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            showOverflowTooltip: true
+          }
+        ],
+        // 表格选中数据
+        selection: [],
+        // 当前编辑数据
+        current: null,
+        // 是否显示编辑弹窗
+        showEdit: false,
+        // 是否显示导入弹窗
+        showImport: false
+      };
+    },
+    methods: {
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        return pageUsers({ ...where, ...order, page, limit });
+      },
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ page: 1, where: where });
+      },
+      /* 打开编辑弹窗 */
+      openEdit(row) {
+        this.current = row;
+        this.showEdit = true;
+      },
+      /* 打开导入弹窗 */
+      openImport() {
+        this.showImport = true;
+      },
+      /* 删除 */
+      remove(row) {
+        const loading = this.$loading({ lock: true });
+        removeUser(row.id)
+          .then((msg) => {
+            loading.close();
+            this.$message.success(msg);
+            this.reload();
+          })
+          .catch((e) => {
+            loading.close();
+            this.$message.error(e.message);
+          });
+      },
+      /* 批量删除 */
+      removeBatch() {
+        if (!this.selection.length) {
+          this.$message.error('请至少选择一条数据');
+          return;
+        }
+        this.$confirm('确定要删除选中的用户吗?', '提示', {
+          type: 'warning'
+        })
+          .then(() => {
+            const loading = this.$loading({ lock: true });
+            removeUsers(this.selection.map((d) => d.id))
+              .then((msg) => {
+                loading.close();
+                this.$message.success(msg);
+                this.reload();
+              })
+              .catch((e) => {
+                loading.close();
+                this.$message.error(e.message);
+              });
+          })
+          .catch(() => {});
+      },
+      /* 更改状态 */
+      editStatus(row) {
+        const loading = this.$loading({ lock: true });
+        updateUserStatus(row.id, row.status)
+          .then((msg) => {
+            loading.close();
+            this.$message.success(msg);
+          })
+          .catch((e) => {
+            loading.close();
+            row.status = !row.status ? 1 : 0;
+            this.$message.error(e.message);
+          });
+      }
+    }
+  };
+</script>