调整

src/views/systemManagement/accountManagement/modal/RoleModal.vue

@@ -0,0 +1,108 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="modal"
+    width="80%"
+    :close-on-click-modal="false"
+    @close="
+      res => {
+        $emit('cancel');
+      }
+    "
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
+      <el-form-item label="角色列表" prop="auditStatus">
+        <el-checkbox-group v-model="form.roles">
+          <el-checkbox
+            v-for="item in options"
+            :label="item.label"
+            :key="item.key"
+            >{{ item.label }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="modal = false">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getUserRole, updateUserRole } from '@/api/system/account';
+import { getList } from '@/api/system/index';
+
+export default {
+  name: 'AccountRoleItemModal',
+
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+
+    data() {
+      return {
+        title: '用户分配角色',
+        modal: true,
+        form: {
+          roles: []
+        },
+        options: []
+      };
+    },
+
+    watch: {
+      id: {
+        handler(id) {
+          id && this.loadData();
+        },
+        immediate: true
+      }
+    },
+
+    mounted() {
+      this.loadList();
+    },
+
+    methods: {
+      async loadList() {
+        const { data } = await getList();
+        this.options = data.map(x => ({ key: x.code, label: x.name }));
+      },
+      async loadData() {
+        const { success, data, msg } = await getUserRole({
+          id: this.id
+        });
+        if (success) {
+          this.form = data;
+        }
+      },
+
+      handleConfirm() {
+        this.$refs.form.validate(async valid => {
+          if (valid) {
+            const params = {
+              roles: this.form.roles
+            };
+            if (this.id) params.id = this.id;
+            const { success, msg } = await updateUserRole(params);
+            if (success) {
+              this.$success('保存成功！');
+              this.modal = false;
+              this.$g_emit('account_reload');
+            }
+          }
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.pre-img {
+  height: 80px;
+}
+</style>