用户删除、重置密码，分配角色.

ui/src/views/components/MessageBox.vue

@@ -0,0 +1,40 @@
+<template>
+  <a-modal
+    title="消息提示"
+    :visible="visible"
+    :width="400"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      {{ message }}
+    </div>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: "MessageBox",
+  props: {
+    message: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    handleCancel() {
+      this.visible = false;
+      this.$emit("closeMessageBox", {});
+    },
+  },
+};
+</script>
+
+<style scoped></style>

ui/src/views/user/CreateUser.vue

@@ -95,7 +95,7 @@ export default {
             this.loading = false;
             if (res.code == 0) {
               this.$message.success(res.msg);
-              this.$emit("closeCreateUserDialog", { refresh: true });
+              this.$emit("closeCreateUserDialog", { refresh: true, data: res.data });
             } else {
               notification.error({
                 message: "error",

ui/src/views/user/UpdateUserRole.vue

@@ -0,0 +1,138 @@
+<template>
+  <a-modal
+    title="分配用户角色"
+    :visible="show"
+    :width="800"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      <a-spin :spinning="loading">
+        <a-form
+          :form="form"
+          :label-col="{ span: 5 }"
+          :wrapper-col="{ span: 12 }"
+          @submit="handleSubmit"
+        >
+          <a-form-item label="用户名">
+            <a-input
+              :disabled="true"
+              v-decorator="['username', { initialValue: user.username }]"
+            />
+          </a-form-item>
+          <a-form-item label="角色">
+            <a-select
+              show-search
+              option-filter-prop="children"
+              v-decorator="[
+                'roleIds',
+                { rules: [{ required: true, message: '请选择一个角色!' }] },
+              ]"
+              placeholder="请选择一个角色"
+            >
+              <a-select-option
+                v-for="role in roles"
+                :key="role.id"
+                :value="role.id"
+              >
+                {{ role.roleName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+            <a-button type="primary" html-type="submit"> 提交</a-button>
+          </a-form-item>
+        </a-form>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import notification from "ant-design-vue/es/notification";
+import { UserManageApi } from "@/utils/api";
+
+export default {
+  name: "UpdateUserRole",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    user: {},
+  },
+  data() {
+    return {
+      show: this.visible,
+      loading: false,
+      form: this.$form.createForm(this, { name: "coordinated" }),
+      roles: [],
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+    },
+  },
+  methods: {
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          const params = Object.assign({}, this.user, values);
+          params.roleIds = values.roleIds;
+          this.loading = true;
+          request({
+            url: UserManageApi.addOrUpdateUser.url,
+            method: UserManageApi.addOrUpdateUser.method,
+            data: params,
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.$message.success(res.msg);
+              this.$emit("closeUpdateUserRoleDialog", {
+                refresh: true,
+                data: res.data,
+              });
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    getRoles() {
+      this.loading = true;
+      request({
+        url: UserManageApi.getRole.url,
+        method: UserManageApi.getRole.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.roles = res.data;
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+    handleCancel() {
+      this.$emit("closeUpdateUserRoleDialog", { refresh: false });
+    },
+  },
+  created() {
+    this.getRoles();
+  },
+};
+</script>
+
+<style scoped></style>

ui/src/views/user/User.vue

@@ -53,8 +53,22 @@
               >删除
             </a-button>
           </a-popconfirm>
-          <a-button size="small" href="javascript:;" class="operation-btn"
-            >重置密码
+          <a-popconfirm
+            :title="'重置用户: ' + record.username + '密码？'"
+            ok-text="确认"
+            cancel-text="取消"
+            @confirm="resetPassword(record)"
+          >
+            <a-button size="small" href="javascript:;" class="operation-btn"
+              >重置密码
+            </a-button>
+          </a-popconfirm>
+          <a-button
+            size="small"
+            href="javascript:;"
+            class="operation-btn"
+            @click="openUpdateUserRoleDialog(record)"
+            >分配角色
           </a-button>
         </div>
       </a-table>
@@ -62,6 +76,16 @@
         @closeCreateUserDialog="closeCreateUserDialog"
         :visible="showCreateUserDialog"
       ></CreateUser>
+      <MessageBox
+        :visible="showMessageBox"
+        :message="messageBoxContent"
+        @closeMessageBox="closeMessageBox"
+      ></MessageBox>
+      <UpdateUserRole
+        :visible="showUpdateUserRole"
+        :user="selectUser"
+        @closeUpdateUserRoleDialog="closeUpdateUserRoleDialog"
+      ></UpdateUserRole>
     </a-spin>
   </div>
 </template>
@@ -72,10 +96,12 @@ import request from "@/utils/request";
 import notification from "ant-design-vue/lib/notification";
 import { UserManageApi } from "@/utils/api";
 import CreateUser from "@/views/user/CreateUser.vue";
+import MessageBox from "@/views/components/MessageBox.vue";
+import UpdateUserRole from "@/views/user/UpdateUserRole.vue";
 
 export default {
   name: "User",
-  components: { CreateUser },
+  components: { CreateUser, MessageBox, UpdateUserRole },
   props: {
     topicList: {
       type: Array,
@@ -89,6 +115,10 @@ export default {
       filteredData: [],
       filterUsername: "",
       showCreateUserDialog: false,
+      showMessageBox: false,
+      showUpdateUserRole: false,
+      messageBoxContent: "",
+      selectUser: {},
       columns: [
         {
           title: "用户名",
@@ -97,8 +127,8 @@ export default {
         },
         {
           title: "角色",
-          dataIndex: "roleIds",
-          key: "roleIds",
+          dataIndex: "roleNames",
+          key: "roleNames",
         },
         {
           title: "操作",
@@ -150,8 +180,23 @@ export default {
       this.showCreateUserDialog = false;
       if (p.refresh) {
         this.refresh();
+        this.messageBoxContent = "用户初始密码：" + p.data;
+        this.showMessageBox = true;
       }
     },
+    openUpdateUserRoleDialog(user) {
+      this.selectUser = user;
+      this.showUpdateUserRole = true;
+    },
+    closeUpdateUserRoleDialog(p) {
+      this.showUpdateUserRole = false;
+      if (p.refresh) {
+        this.refresh();
+      }
+    },
+    closeMessageBox() {
+      this.showMessageBox = false;
+    },
     deleteUser(user) {
       this.loading = true;
       request({
@@ -169,6 +214,27 @@ export default {
         }
       });
     },
+    resetPassword(record) {
+      this.loading = true;
+      const params = Object.assign({}, record);
+      params.resetPassword = true;
+      request({
+        url: UserManageApi.addOrUpdateUser.url,
+        method: UserManageApi.addOrUpdateUser.method,
+        data: params,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.messageBoxContent = "密码重置成功，新密码：" + res.data;
+          this.showMessageBox = true;
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
   },
   created() {
     this.handleSearch();
@@ -222,4 +288,8 @@ export default {
   margin-bottom: 5px;
   margin-top: 5px;
 }
+
+.operation-btn {
+  margin-right: 3%;
+}
 </style>