feat: 添加用户信息管理

admin_2/src/api/system.js

@@ -226,3 +226,39 @@ export const addRoleResource = (data) => {
     data,
   });
 };
+
+/**
+ *  用户管理
+ */
+// 获取用户列表
+export const getUserList = (data) => {
+  return request({
+    url: `/bill/user/list`,
+    method: "post",
+    data,
+  });
+};
+// 获取用户信息
+export const getUserInfo = (params) => {
+  return request({
+    url: `/bill/user/info`,
+    method: "get",
+    params,
+  });
+};
+// 保存用户
+export const saveUser = (data) => {
+  return request({
+    url: `/bill/user/save`,
+    method: "post",
+    data,
+  });
+};
+// 删除用户
+export const deleteUser = (params) => {
+  return request({
+    url: `/bill/user/delete`,
+    method: "get",
+    params,
+  });
+};

admin_2/src/pages/system/role/Role.vue

@@ -166,13 +166,14 @@ export default {
   },
   computed: {},
   methods: {
-    // 获取接入区域列表
     async getRoleList() {
+      this.loading = true;
       let res = await getRoleList({
         page: this.current,
         size: this.size,
         name: `%${this.searchForm.name}%`,
       });
+      this.loading = false;
       if (res.data.code == 1) {
         let { data, total, dict } = res.data.data;
         if (!data.length && this.current > 1) {

admin_2/src/pages/system/user/User.vue

+<template>
+  <div class="h-full w-full">
+    <TableHeader>
+      <div slot="right">
+        <el-form ref="searchForm" :model="searchForm" inline size="small">
+          <el-form-item prop="type">
+            <el-select
+              style="width: 120px"
+              v-model="searchForm.type"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="(v, key) in typeList"
+                :key="key"
+                :label="v"
+                :value="key"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="keyword">
+            <el-input
+              v-model="searchForm.keyword"
+              style="width: 200px"
+              class="ml10 mr10"
+              placeholder="请输入关键字搜索"
+              @keyup.native.enter="handleSearch"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch">搜 索</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleReset">重 置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </TableHeader>
+    <!-- 表格 -->
+    <div class="table-content">
+      <y-table
+        ref="MyTable"
+        :loading="loading"
+        :data="tableData"
+        :column="column"
+        border
+        tooltip-effect="dark"
+        :max-height="600"
+        :row-key="(row) => row.id"
+      ></y-table>
+    </div>
+    <Pagination
+      :total="total"
+      :current.sync="current"
+      :size.sync="size"
+      @get="getUserList"
+    ></Pagination>
+
+    <!-- 分配角色 -->
+    <AddUserRole
+      ref="AddUserRole"
+      :addVisible.sync="show"
+      @addSuccess="getUserList"
+    ></AddUserRole>
+  </div>
+</template>
+
+<script>
+import TableHeader from "@/components/TableHeader.vue";
+import AddUserRole from "./components/AddUserRole.vue";
+import { getUserList } from "@/api/system";
+let typeList = {
+  loginName: "按登录名",
+  realName: "按用户姓名",
+  mobile: "按手机号码",
+};
+export default {
+  components: {
+    TableHeader,
+    AddUserRole,
+  },
+  data() {
+    return {
+      typeList,
+      column: [
+        {
+          label: "序号",
+          type: "index",
+          width: "55",
+          align: "center",
+          index: (index) => {
+            return (this.current - 1) * this.size + index + 1;
+          },
+        },
+        {
+          label: "登录名",
+          prop: "loginName",
+          align: "center",
+        },
+        {
+          label: "用户姓名",
+          prop: "realName",
+          align: "center",
+        },
+        {
+          label: "手机号码",
+          prop: "mobile",
+          align: "center",
+        },
+        {
+          label: "所属角色",
+          prop: "roleIds",
+          align: "center",
+          formatter: (row) => {
+            if (row.roleIds) {
+              return (
+                <div class="flex gap-2">
+                  {row.roleIds.split(",").map((v) => {
+                    return (
+                      <el-tag size="small" type="info">
+                        {this.dict.roleIds[v]}
+                      </el-tag>
+                    );
+                  })}
+                </div>
+              );
+            }
+          },
+        },
+        {
+          label: "状态",
+          prop: "status",
+          align: "center",
+          formatter: (row) => {
+            if (this.dict.status) {
+              return this.dict.status[row.status];
+            }
+          },
+        },
+        {
+          label: "创建时间",
+          prop: "createTime",
+          align: "center",
+          formatter: (row) => {
+            return this.$moment(row.createTime).format("YYYY-MM-DD HH:mm:ss");
+          },
+        },
+        {
+          label: "操作",
+          align: "center",
+          width: "120",
+          formatter: (row) => {
+            return (
+              <div class="flex justify-center gap-4">
+                <span
+                  class="primary cursor-pointer"
+                  onClick={() => this.apportion(row)}
+                >
+                  分配角色
+                </span>
+              </div>
+            );
+          },
+        },
+      ],
+      searchForm: {
+        type: "loginName",
+        keyword: "",
+      },
+      tableData: [],
+      current: 1,
+      size: 10,
+      total: 0,
+      loading: false,
+      selectRows: [],
+      show: false,
+      title: "新增",
+      dict: {}, // 字典
+      resShow: false,
+    };
+  },
+  created() {
+    this.getUserList();
+  },
+  computed: {},
+  methods: {
+    // 列表
+    async getUserList() {
+      this.loading = true;
+      let obj = {};
+      let value = `%${this.searchForm.keyword}%`;
+      obj[this.searchForm.type] = value;
+      let res = await getUserList({
+        page: this.current,
+        size: this.size,
+        ...obj,
+      });
+      this.loading = false;
+      if (res.data.code == 1) {
+        let { data, total, dict } = res.data.data;
+        if (!data.length && this.current > 1) {
+          this.current -= 1;
+          this.getUserList();
+        }
+        this.tableData = data;
+        this.total = total;
+        this.dict = dict;
+      }
+    },
+
+    // 搜索
+    handleSearch() {
+      this.current = 1;
+      this.$clearSelection("MyTable");
+      this.getUserList();
+    },
+    // 重置
+    handleReset() {
+      this.current = 1;
+      this.$clearSelection("MyTable");
+      this.$resetForm("searchForm");
+      this.getUserList();
+    },
+    apportion(row) {
+      let data = this.$cloneDeep(row);
+      this.$refs.AddUserRole.onEdit(data);
+      this.show = true;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

admin_2/src/pages/system/user/components/AddUserRole.vue

+<template>
+  <div>
+    <el-dialog
+      title="分配角色"
+      :destroy-on-close="true"
+      :visible.sync="Visible"
+      width="30%"
+      @close="handleClose"
+      :close-on-click-modal="false"
+      top="10vh"
+    >
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        size="small"
+        label-width="100px"
+      >
+        <el-form-item label="角色名称" prop="roleIds">
+          <el-select
+            multiple
+            clearable
+            style="width: 100%"
+            v-model="form.roleIds"
+            placeholder="请选择角色"
+          >
+            <el-option
+              v-for="v in roleList"
+              :key="v.id"
+              :label="v.name"
+              :value="v.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="handleRest">重 置</el-button>
+        <el-button size="small" type="primary" @click="handleOk"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getRoleList, saveUser } from "@/api/system";
+export default {
+  components: {},
+  props: {
+    addVisible: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      roleList: [],
+      form: {
+        roleIds: [],
+      },
+      rules: {
+        roleIds: [{ required: true, message: "请选择角色", trigger: "change" }],
+      },
+    };
+  },
+  computed: {
+    Visible: {
+      get() {
+        return this.addVisible;
+      },
+      set(val) {
+        this.$emit("update:addVisible", val);
+      },
+    },
+  },
+  created() {
+    this.getRoleList();
+  },
+  methods: {
+    // 获取角色列表
+    async getRoleList() {
+      let res = await getRoleList({
+        page: 1,
+        size: -1,
+      });
+      if (res.data.code == 1) {
+        let { data } = res.data.data;
+        this.roleList = data;
+      }
+    },
+    // 确定
+    handleOk() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          this.loading = true;
+          let { id, roleIds, lastLoginAddress, mobile } = this.form;
+          let res = await saveUser({
+            id,
+            lastLoginAddress,
+            mobile,
+            roleIds: roleIds.join(","),
+          });
+          this.loading = false;
+          let { code, msg } = res.data;
+          if (code == 1) {
+            this.$message.success(msg);
+            this.$emit("addSuccess");
+            this.handleClose();
+          }
+        }
+      });
+    },
+    // 新增
+    onAdd() {
+      Object.assign(this.form, this.$options.data().form);
+      this.form.id && this.$delete(this.form, "id");
+    },
+    // 编辑
+    onEdit(row) {
+      setTimeout(() => {
+        this.form = { ...row };
+        if (this.form.roleIds) {
+          this.form.roleIds = this.form.roleIds.split(",").map(Number);
+        } else {
+          this.form.roleIds = [];
+        }
+      }, 10);
+    },
+    // 重置
+    handleRest() {
+      this.$resetForm("form");
+    },
+    // 关闭
+    handleClose() {
+      this.$resetForm("form");
+      this.Visible = false;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

admin_2/src/router/index.js

@@ -147,6 +147,15 @@ const routes = [
               icon: "el-icon-set-up",
             },
           },
+          {
+            path: "/system/user",
+            component: () => import("@/pages/system/user/User.vue"),
+            meta: {
+              activeMenu: "/system",
+              title: "用户信息",
+              icon: "el-icon-user",
+            },
+          },
           {
             path: "/system/role",
             component: () => import("@/pages/system/role/Role.vue"),