用户管理

src/modules/admin/api.js

@@ -53,76 +53,23 @@ export const appDeviceDelete = ({ appId, deviceId }) => {
   return $postParam("/api/admin/app/device/delete", { appId, deviceId });
 };
 
-// org-manage
-export const orgTypesList = datas => {
-  return $get("/api/admin/org/types", datas);
+// user-manage
+export const userListPage = datas => {
+  return $postParam("/api/admin/user/query", datas);
 };
-export const orgSubTypesList = datas => {
-  return $get("/api/admin/org/sub_types", datas);
+export const userRoleList = datas => {
+  return $postParam("/api/admin/user/roles", datas);
 };
-export const orgQuery = datas => {
-  return $get("/api/admin/org/query", datas);
+export const userListQuery = datas => {
+  return $postParam("/api/admin/user/list", datas);
 };
-export const orgInsertOrUpdate = datas => {
-  let formData = new FormData();
-  Object.entries(datas).forEach(([key, val]) => {
-    // if (val === null || val === "null" || val === "") return;
-
-    if (key === "subTypes") {
-      if (val.length) {
-        val.forEach(type => formData.append("subTypes", type));
-      } else {
-        formData.append("subTypes", "");
-      }
-    } else {
-      formData.append(key, datas[key]);
-    }
-  });
-
+export const resetPwd = password => {
+  return $postParam("/api/admin/user/change_password", { password });
+};
+export const userInsertOrUpdate = datas => {
   if (datas.id) {
-    return $post("/api/admin/org/update", formData);
+    return $post("/api/admin/user/update", datas);
   } else {
-    return $post("/api/admin/org/insert", formData);
+    return $post("/api/admin/user/insert", datas);
   }
 };
-// 启用/禁用
-export const orgToggle = datas => {
-  return $get("/api/admin/org/toggle", datas);
-};
-
-/**
- * @description 微信小程序查询
- * @params { string } id  // 应用ID
- * @params { string } nameStartWith  // 名称前缀
- * @params { string } pageNumber  // 页码
- * @params { string } pageSize  // 数量
- */
-export const getWeChatAppList = data => {
-  const params = Object.entries(data).reduce((p, [key, val]) => {
-    if (val) {
-      p[key] = val;
-    }
-    return p;
-  }, {});
-  return $post("/api/admin/wxapp/query", new URLSearchParams(params));
-};
-
-/**
- * @description 微信小程序新增
- * @params { string } id  // 应用ID
- * @params { string } name  // 名称
- * @params { string } secret  // 密钥
- */
-export const insertWeChatApp = data => {
-  return $post("/api/admin/wxapp/insert", new URLSearchParams(data));
-};
-
-/**
- * @description 微信小程序修改
- * @params { string } id  // 应用ID
- * @params { string } name  // 名称
- * @params { string } secret  // 密钥
- */
-export const updateWeChatApp = data => {
-  return $post("/api/admin/wxapp/update", new URLSearchParams(data));
-};

src/modules/admin/components/ModifyUser.vue

@@ -0,0 +1,189 @@
+<template>
+  <el-dialog
+    class="modify-user"
+    :visible.sync="modalIsShow"
+    :title="title"
+    top="10vh"
+    width="500px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @open="visibleChange"
+  >
+    <el-form
+      ref="modalFormComp"
+      :model="modalForm"
+      :rules="rules"
+      label-position="top"
+    >
+      <el-form-item prop="loginName" label="用户名：">
+        <el-input
+          v-model.trim="modalForm.loginName"
+          placeholder="请输入用户名"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="name" label="姓名：">
+        <el-input
+          v-model.trim="modalForm.name"
+          placeholder="请输入姓名"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="role" label="角色：">
+        <el-select
+          style="width:100%;"
+          v-model="modalForm.role"
+          placeholder="请选择角色"
+          multiple
+        >
+          <el-option
+            v-for="item in roles"
+            :key="item.code"
+            :value="item.code"
+            :label="item.name"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="password" label="密码：">
+        <el-input
+          v-model.trim="modalForm.password"
+          placeholder="请输入密码"
+          clearable
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button type="primary" :disabled="isSubmit" @click="submit"
+        >确认</el-button
+      >
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { userInsertOrUpdate } from "../api";
+import { password } from "../../../plugins/formRules";
+
+const initModalForm = {
+  id: "",
+  loginName: "",
+  name: "",
+  role: [],
+  password: ""
+};
+
+export default {
+  name: "modify-user",
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    roles: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  computed: {
+    isEdit() {
+      return !!this.instance.id;
+    },
+    title() {
+      return (this.isEdit ? "编辑" : "新增") + "用户";
+    }
+  },
+  data() {
+    const roleIdsValidator = (rule, value, callback) => {
+      if (!value || !value.length) {
+        callback(new Error("请选择角色"));
+      } else {
+        callback();
+      }
+    };
+
+    return {
+      modalIsShow: false,
+      isSubmit: false,
+      modalForm: {},
+      rules: {
+        loginName: [
+          {
+            required: true,
+            message: "请输入用户名",
+            trigger: "change"
+          },
+          {
+            max: 50,
+            message: "用户名不能超过50",
+            trigger: "change"
+          }
+        ],
+        name: [
+          {
+            required: true,
+            message: "请输入姓名",
+            trigger: "change"
+          },
+          {
+            max: 50,
+            message: "姓名不能超过50",
+            trigger: "change"
+          }
+        ],
+        role: [
+          {
+            required: true,
+            validator: roleIdsValidator,
+            trigger: "change"
+          }
+        ],
+        password
+      }
+    };
+  },
+  methods: {
+    initData(val) {
+      if (val.id) {
+        this.modalForm = this.$objAssign(initModalForm, val);
+      } else {
+        this.modalForm = { ...initModalForm };
+      }
+      this.$nextTick(() => {
+        this.$refs.modalFormComp.clearValidate();
+      });
+    },
+    visibleChange() {
+      this.initData(this.instance);
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+
+      const datas = { ...this.modalForm };
+      const data = await userInsertOrUpdate(datas).catch(() => {});
+      this.isSubmit = false;
+      if (!data) return;
+
+      this.$message.success("修改成功！");
+      this.cancel();
+      this.$emit("modified");
+    }
+  }
+};
+</script>

src/modules/admin/views/AppManage.vue

@@ -8,21 +8,6 @@
           label-width="80px"
           inline
         >
-          <el-form-item label="应用分类">
-            <el-select
-              v-model="filter.type"
-              placeholder="选择应用分类"
-              clearable
-            >
-              <el-option
-                v-for="item in appTypes"
-                :key="item.code"
-                :value="item.code"
-                :label="item.name"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item>
           <el-form-item label="模糊查询">
             <el-input
               v-model="filter.nameStartWith"
@@ -78,12 +63,7 @@
     </div>
 
     <!-- modify-app -->
-    <ModifyApp
-      :datas="typeSources"
-      :instance="curRow"
-      @modified="getList"
-      ref="ModifyApp"
-    />
+    <ModifyApp :instance="curRow" @modified="getList" ref="ModifyApp" />
   </div>
 </template>
 
@@ -109,7 +89,7 @@ export default {
     };
   },
   created() {
-    this.initData();
+    // this.initData();
   },
   methods: {
     initData() {

src/modules/admin/views/UserManage.vue

@@ -1,15 +1,164 @@
 <template>
   <div class="user-manage">
-    user-manage
+    <div class="part-box part-box-filter part-box-flex">
+      <el-form ref="FilterForm" label-position="left" inline>
+        <el-form-item label="登录名前缀：">
+          <el-input
+            style="width: 180px;"
+            v-model.trim="filter.loginNameStartWith"
+            placeholder="登录名前缀"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="角色：">
+          <el-select
+            v-model="filter.role"
+            style="width: 142px;"
+            placeholder="角色"
+            filterable
+            clearable
+          >
+            <el-option
+              v-for="item in roles"
+              :key="item.code"
+              :value="item.code"
+              :label="item.name"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label-width="0px">
+          <el-button type="primary" @click="toPage(1)">查询</el-button>
+          <el-button type="success" @click="toAdd">新增</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="part-box part-box-pad">
+      <el-table ref="TableList" :data="users">
+        <el-table-column prop="id" label="ID" width="80"></el-table-column>
+        <el-table-column prop="loginName" label="用户名"></el-table-column>
+        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
+        <el-table-column prop="roles" label="角色">
+          <template slot-scope="scope">
+            {{ scope.row.roles | rolesFilter }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="170">
+          <span slot-scope="scope">{{
+            scope.row.createTime | timestampFilter
+          }}</span>
+        </el-table-column>
+        <el-table-column prop="updateTime" label="修改时间" width="170">
+          <span slot-scope="scope">{{
+            scope.row.updateTime | timestampFilter
+          }}</span>
+        </el-table-column>
+        <el-table-column
+          class-name="action-column"
+          label="操作"
+          width="160px"
+          fixed="right"
+        >
+          <template slot-scope="scope">
+            <el-button
+              class="btn-primary"
+              type="text"
+              @click="toEdit(scope.row)"
+              >编辑</el-button
+            >
+            <el-button
+              class="btn-danger"
+              type="text"
+              @click="toResetPwd(scope.row)"
+              >重置密码</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="part-page">
+        <el-pagination
+          background
+          layout="total,prev, pager, next"
+          :current-page="current"
+          :total="total"
+          :page-size="size"
+          @current-change="toPage"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+    <!-- ModifyUser -->
+    <modify-user
+      ref="ModifyUser"
+      :instance="curUser"
+      :roles="roles"
+      @modified="getList"
+    ></modify-user>
   </div>
 </template>
 
 <script>
+import ModifyUser from "../components/ModifyUser";
+import { userListPage, userRoleList, resetPwd } from "../api";
+
 export default {
   name: "user-manage",
+  components: { ModifyUser },
   data() {
-    return {};
+    return {
+      filter: {
+        loginNameStartWith: "",
+        role: ""
+      },
+      current: 1,
+      size: this.GLOBAL.pageSize,
+      total: 0,
+      roles: [],
+      users: [],
+      curUser: {},
+      loading: false
+    };
+  },
+  mounted() {
+    // this.initData();
   },
-  methods: {}
+  methods: {
+    async initData() {
+      await this.getRoleList();
+      this.toPage(1);
+    },
+    async getRoleList() {
+      const data = await userRoleList();
+      this.roles = data || [];
+    },
+    async getList() {
+      const datas = {
+        ...this.filter,
+        pageNumber: this.current,
+        pageSize: this.size
+      };
+      const data = await userListPage(datas);
+      this.users = data.records;
+      this.total = data.total;
+    },
+    toPage(page) {
+      this.current = page;
+      this.getList();
+    },
+    toEdit(row) {
+      this.curUser = row;
+      this.$refs.ModifyUser.open();
+    },
+    toAdd() {
+      this.curUser = {};
+      this.$refs.ModifyUser.open();
+    },
+    async toResetPwd(row) {
+      await resetPwd(row.id);
+      this.$message.success("密码重置成功！");
+    }
+  }
 };
 </script>