角色添加启用、停用功能

src/views/system/role/components/RoleForm.vue

@@ -29,7 +29,18 @@
             >
           </el-radio-group>
         </el-form-item>
-
+        <el-form-item :label="$t('system:role:form:IsEnable')" prop="IsEnable">
+          <el-switch
+            v-model="form.IsEnable"
+            active-color="#13ce66"
+            inactive-color="#dcdfe6"
+            :active-value="true"
+            :inactive-value="false"
+            :active-text="$fd('IsEnable', true)"
+            :inactive-text="$fd('IsEnable', false)"
+          >
+          </el-switch>
+        </el-form-item>
         <el-form-item label="Group: " prop="UserTypeGroupIdList">
           <el-select v-model="form.UserTypeGroupIdList" multiple>
             <el-option
@@ -69,18 +80,18 @@
           <el-checkbox
             v-model="menuExpand"
             @change="handleCheckedTreeExpand($event)"
-            >{{ $t("system:role:form:checkbox:menuExpand") }}</el-checkbox
+            >{{ $t('system:role:form:checkbox:menuExpand') }}</el-checkbox
           >
           <el-checkbox
             v-model="menuNodeAll"
             @change="handleCheckedTreeNodeAll($event)"
-            >{{ $t("system:role:form:checkbox:menuNodeAll") }}</el-checkbox
+            >{{ $t('system:role:form:checkbox:menuNodeAll') }}</el-checkbox
           >
           <el-checkbox
             v-model="form.menuCheckStrictly"
             @change="handleCheckedTreeConnect($event)"
             >{{
-              $t("system:role:form:checkbox:menuCheckStrictly")
+              $t('system:role:form:checkbox:menuCheckStrictly')
             }}</el-checkbox
           >
           <el-tree
@@ -116,30 +127,31 @@
   </base-model>
 </template>
 <script>
-import { addOrUpdateUserType } from "@/api/admin";
+import { addOrUpdateUserType } from '@/api/admin'
 // import { addOrUpdateUserType } from '@/api/system/role'
 // import { getMenuList } from '@/api/system/menu'
-import { getMenuList } from "@/api/system/menu";
-import { model_cfg } from "../role";
-import BaseModel from "@/components/BaseModel";
+import { getMenuList } from '@/api/system/menu'
+import { model_cfg } from '../role'
+import BaseModel from '@/components/BaseModel'
 
 export default {
   components: { BaseModel },
-  dicts: ["UserTypeGroup"],
+  dicts: ['UserTypeGroup'],
   props: {
     data: {
       type: Object,
       default() {
         return {
-          Id: "",
-          UserTypeName: "",
+          Id: '',
+          UserTypeName: '',
           IsInternal: true,
-          UserTypeShortName: "",
-          Order: "",
-          Description: "",
-          PermissionStr: "",
+          UserTypeShortName: '',
+          Order: '',
+          Description: '',
+          PermissionStr: '',
           UserTypeEnum: null,
-        };
+          IsEnable: true,
+        }
       },
     },
   },
@@ -148,136 +160,137 @@ export default {
       menuExpand: false,
       menuNodeAll: false,
       userTypeGroupOptions: [
-        { value: 1, label: "Trial" },
-        { value: 2, label: "Reviewer" },
-        { value: 3, label: "Other" },
+        { value: 1, label: 'Trial' },
+        { value: 2, label: 'Reviewer' },
+        { value: 3, label: 'Other' },
       ],
       model_cfg,
       defaultProps: {
-        children: "Children",
-        label: "MenuName",
+        children: 'Children',
+        label: 'MenuName',
       },
       form: {
-        Id: "",
-        UserType: "",
+        Id: '',
+        UserType: '',
         IsInternal: true,
-        UserTypeShortName: "",
+        UserTypeShortName: '',
         Type: null,
-        Description: "",
+        Description: '',
         UserTypeGroupIdList: [],
         menuCheckStrictly: true,
+        IsEnable: true,
       },
       rules: {
         UserTypeName: [
-          { required: true, message: "Please specify", trigger: "blur" },
+          { required: true, message: 'Please specify', trigger: 'blur' },
           {
             max: 50,
-            message: "The maximum length is 50",
+            message: 'The maximum length is 50',
           },
         ],
         UserTypeShortName: [
-          { required: true, message: "Please specify", trigger: "blur" },
+          { required: true, message: 'Please specify', trigger: 'blur' },
           {
             max: 50,
-            message: "The maximum length is 50",
-            trigger: "blur",
+            message: 'The maximum length is 50',
+            trigger: 'blur',
           },
         ],
-        Description: [{ max: 500, message: "The maximum length is 500" }],
+        Description: [{ max: 500, message: 'The maximum length is 500' }],
         UserTypeGroupIdList: [
-          { required: true, message: "Please specify", trigger: "blur" },
+          { required: true, message: 'Please specify', trigger: 'blur' },
         ],
         UserTypeEnum: [
-          { required: true, message: "Please select", trigger: "blur" },
+          { required: true, message: 'Please select', trigger: 'blur' },
         ],
       },
       menuOptions: [],
       btnLoading: false,
-    };
+    }
   },
   mounted() {
-    this.getMenuList();
+    this.getMenuList()
     if (Object.keys(this.data).length && this.data.Id) {
-      this.form = { ...this.data };
+      this.form = { ...this.data }
     }
   },
   methods: {
     handleCheckedTreeConnect(value) {
-      this.form.menuCheckStrictly = !!value;
+      this.form.menuCheckStrictly = !!value
     },
     getMenuAllCheckedKeys() {
       // 目前被选中的菜单节点
-      const checkedKeys = this.$refs.menu.getCheckedKeys();
+      const checkedKeys = this.$refs.menu.getCheckedKeys()
       // 半选中的菜单节点
-      const halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
-      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-      return checkedKeys;
+      const halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys()
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+      return checkedKeys
     },
 
     handleCheckedTreeExpand(value) {
-      const treeList = this.menuOptions;
+      const treeList = this.menuOptions
       for (let i = 0; i < treeList.length; i++) {
-        this.$refs.menu.store.nodesMap[treeList[i].MenuId].expanded = value;
+        this.$refs.menu.store.nodesMap[treeList[i].MenuId].expanded = value
       }
     },
     handleCheckedTreeNodeAll(value, type) {
-      this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
+      this.$refs.menu.setCheckedNodes(value ? this.menuOptions : [])
     },
     toTree(arr, ParentId) {
       function loop(ParentId) {
-        const res = [];
+        const res = []
         for (let i = 0; i < arr.length; i++) {
-          const item = arr[i];
-          item.hasChildren = false;
+          const item = arr[i]
+          item.hasChildren = false
           if (item.ParentId !== ParentId) {
-            continue;
+            continue
           }
-          item.Children = loop(item.MenuId);
-          res.push(item);
+          item.Children = loop(item.MenuId)
+          res.push(item)
         }
-        return res;
+        return res
       }
 
-      return loop(ParentId);
+      return loop(ParentId)
     },
     getMenuList() {
       getMenuList({})
         .then((res) => {
           const menu = this.toTree(
             res.Result,
-            "00000000-0000-0000-0000-000000000000"
-          );
-          this.menuOptions = menu;
-          console.log(this.menuOptions);
+            '00000000-0000-0000-0000-000000000000'
+          )
+          this.menuOptions = menu
+          console.log(this.menuOptions)
           this.$nextTick(() => {
             this.form.MenuIds.forEach((v) => {
-              this.$refs.menu.setChecked(v, true, false);
-            });
-          });
+              this.$refs.menu.setChecked(v, true, false)
+            })
+          })
         })
-        .catch(function () {});
+        .catch(function () {})
     },
     handleSave() {
       this.$refs.roleForm.validate((valid) => {
-        if (!valid) return;
-        this.btnLoading = true;
-        this.model_cfg.showClose = false;
-        this.form.MenuIds = this.getMenuAllCheckedKeys();
-        console.log(this.form.MenuIds);
+        if (!valid) return
+        this.btnLoading = true
+        this.model_cfg.showClose = false
+        this.form.MenuIds = this.getMenuAllCheckedKeys()
+        console.log(this.form.MenuIds)
         addOrUpdateUserType(this.form)
           .then((res) => {
-            this.btnLoading = false;
-            this.$refs["roleForm"].resetFields();
-            this.$emit("close");
-            this.model_cfg.showClose = true;
-            this.$message.success("Saved successfully!");
+            this.btnLoading = false
+            this.$refs['roleForm'].resetFields()
+            this.$emit('close')
+            this.model_cfg.showClose = true
+            this.$message.success('Saved successfully!')
           })
           .catch(() => {
-            this.btnLoading = false;
-            this.model_cfg.showClose = true;
-          });
-      });
+            this.btnLoading = false
+            this.model_cfg.showClose = true
+          })
+      })
     },
   },
-};
+}
 </script>

src/views/system/role/index.vue

@@ -21,26 +21,90 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">{{ $t('common:button:search') }}</el-button>
-          <el-button v-hasPermi="['system:role:add']" type="primary" icon="el-icon-plus" size="mini" @click="handleAddRole">{{ $t('common:button:add') }}</el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="getList"
+            >{{ $t('common:button:search') }}</el-button
+          >
+          <el-button
+            v-hasPermi="['system:role:add']"
+            type="primary"
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAddRole"
+            >{{ $t('common:button:add') }}</el-button
+          >
         </el-form-item>
       </el-form>
-      <el-table v-loading="loading" v-adaptive="{bottomOffset:30}" size="small" height="100" :data="list" class="table">
+      <el-table
+        v-loading="loading"
+        v-adaptive="{ bottomOffset: 30 }"
+        size="small"
+        height="100"
+        :data="list"
+        class="table"
+      >
         <el-table-column type="index" width="50" />
-        <el-table-column :label="$t('system:role:table:User Type')" prop="UserTypeName" min-width="220" show-overflow-tooltip />
-        <el-table-column :label="$t('system:role:table:Shortname')" prop="UserTypeShortName" min-width="120" show-overflow-tooltip />
-        <el-table-column :label="$t('system:role:table:Group')" prop="Note" min-width="80" show-overflow-tooltip>
+        <el-table-column
+          :label="$t('system:role:table:User Type')"
+          prop="UserTypeName"
+          min-width="220"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          :label="$t('system:role:table:Shortname')"
+          prop="UserTypeShortName"
+          min-width="120"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          :label="$t('system:role:table:Group')"
+          prop="Note"
+          min-width="80"
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
-            {{ scope.row.UserTypeGroupList.map(v => {return v.GroupName}).toString() }}
+            {{
+              scope.row.UserTypeGroupList.map((v) => {
+                return v.GroupName
+              }).toString()
+            }}
           </template>
         </el-table-column>
-        <el-table-column :label="$t('system:role:table:PermissionStr')" prop="PermissionStr" min-width="100" show-overflow-tooltip />
-        <el-table-column :label="$t('system:role:table:User Type Enum')" prop="UserTypeEnum" min-width="100" show-overflow-tooltip>
+        <el-table-column
+          :label="$t('system:role:table:PermissionStr')"
+          prop="PermissionStr"
+          min-width="100"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          :label="$t('system:role:table:User Type Enum')"
+          prop="UserTypeEnum"
+          min-width="100"
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
-            {{ $fd('UserType',scope.row.UserTypeEnum) }}
+            {{ $fd('UserType', scope.row.UserTypeEnum) }}
           </template>
         </el-table-column>
-        <el-table-column :label="$t('system:role:table:Description')" prop="Description" min-width="220" show-overflow-tooltip />
+        <el-table-column
+          :label="$t('system:role:table:IsEnable')"
+          prop="IsEnable"
+          min-width="100"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope">
+            {{ $fd('IsEnable', scope.row.IsEnable) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('system:role:table:Description')"
+          prop="Description"
+          min-width="220"
+          show-overflow-tooltip
+        />
         <el-table-column :label="$t('common:action:action')" width="280">
           <template slot-scope="scope">
             <el-button
@@ -49,14 +113,16 @@
               type="text"
               icon="el-icon-edit"
               @click="handleEditRole(scope.row)"
-            >{{ $t('common:button:edit') }}</el-button>
+              >{{ $t('common:button:edit') }}</el-button
+            >
             <el-button
               v-hasPermi="['system:role:delete']"
               size="mini"
               type="text"
               icon="el-icon-delete"
               @click="handleDeleteRole(scope.row)"
-            >{{ $t('common:button:delete') }}</el-button>
+              >{{ $t('common:button:delete') }}</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -87,36 +153,36 @@ export default {
       treeData: [],
       defaultProps: {
         label: 'MenuName',
-        children: 'Children'
+        children: 'Children',
       },
       // 查询参数
       queryParams: {
         GroupId: undefined,
-        SearchFilter: undefined
+        SearchFilter: undefined,
       },
       dialogVisible: false,
       editRow: {},
       expandedKeys: [],
       treeLoading: false,
       funcListLoading: false,
-      funcList: []
+      funcList: [],
     }
   },
   mounted() {
     this.getList()
   },
   methods: {
-    getDictionary() {
-
-    },
+    getDictionary() {},
     getList() {
       this.loading = true
-      getUserTypeRoleList(this.queryParams).then((res) => {
-        this.loading = false
-        this.list = res.Result
-      }).catch(() => {
-        this.loading = false
-      })
+      getUserTypeRoleList(this.queryParams)
+        .then((res) => {
+          this.loading = false
+          this.list = res.Result
+        })
+        .catch(() => {
+          this.loading = false
+        })
     },
     handleAddRole() {
       this.editRow = {}
@@ -139,11 +205,13 @@ export default {
       this.$confirm(this.$t('trials:uploadedDicoms:message:deleteMes'), {
         type: 'warning',
         distinguishCancelAndClose: true,
-
       }).then(() => {
         deleteUserTypeRole(row.Id).then((res) => {
           if (res.IsSuccess) {
-            this.list.splice(this.list.findIndex((item) => item.Id === row.Id), 1)
+            this.list.splice(
+              this.list.findIndex((item) => item.Id === row.Id),
+              1
+            )
             this.$message.success(this.$t('common:message:deletedSuccessfully'))
           }
         })
@@ -152,8 +220,8 @@ export default {
     closeModal() {
       this.model_cfg.visible = false
       this.getList()
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss">
@@ -188,7 +256,7 @@ export default {
     overflow-y: auto;
     border-right: 1px solid #ccc;
   }
-  .selected-row{
+  .selected-row {
     background-color: cadetblue;
   }
 }