From ae1a1c393a3ba83919144becd81f5641184048dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= <renpy@yuanian.com>
Date: Sun, 8 Oct 2023 14:01:47 +0800
Subject: [PATCH] =?UTF-8?q?=20=E5=A4=84=E7=90=86system=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20menuManage=20tab=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=B8=AD=E7=BC=96=E8=BE=91=E5=BC=B9=E7=AA=97=E7=9A=84=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/modules/PermissionModal.vue | 611 +++++++++----------
 1 file changed, 279 insertions(+), 332 deletions(-)

diff --git a/src/views/system/modules/PermissionModal.vue b/src/views/system/modules/PermissionModal.vue
index d24776c..d21910f 100644
--- a/src/views/system/modules/PermissionModal.vue
+++ b/src/views/system/modules/PermissionModal.vue
@@ -4,171 +4,115 @@
     :width="drawerWidth"
     @close="handleCancel"
     :visible="visible"
-    :confirmLoading="confirmLoading">
+    :confirmLoading="confirmLoading"
+  >
+    <div :style="{ width: '100%', border: '1px solid #e9e9e9', padding: '10px 16px', background: '#fff' }">
+      <a-spin :spinning="confirmLoading">
+        <a-form-model ref="form" :model="model" :rules="validatorRules">
+          <a-form-model-item label="Menu Type" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-radio-group @change="onChangeMenuType" v-model="model.menuType">
+              <a-radio :value="0">First Level Menu</a-radio>
+              <a-radio :value="1">Child Menu</a-radio>
+              <a-radio :value="2">Button/Permission</a-radio>
+            </a-radio-group>
+          </a-form-model-item>
 
-    <div :style="{width: '100%',border: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',}">
-    <a-spin :spinning="confirmLoading">
-      <a-form-model ref="form" :model="model" :rules="validatorRules">
+          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="menuLabel" prop="name" hasFeedback>
+            <a-input v-model="model.name" :readOnly="disableSubmit" />
+          </a-form-model-item>
 
-        <a-form-model-item label="Menu Type" :labelCol="labelCol" :wrapperCol="wrapperCol" >
-          <a-radio-group @change="onChangeMenuType" v-model="model.menuType">
-            <a-radio :value="0">First Level Menu</a-radio>
-            <a-radio :value="1">Child Menu</a-radio>
-            <a-radio :value="2">Button/Permission</a-radio>
-          </a-radio-group>
-        </a-form-model-item>
+          <a-form-model-item
+            v-show="model.menuType != 0"
+            label="Parent Menu"
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+            :validate-status="validateStatus"
+            :hasFeedback="true"
+            :required="true"
+          >
+            <span slot="help">{{ validateStatus == 'error' ? 'Please Select Parent Menu' : '&nbsp;&nbsp;' }}</span>
+            <a-tree-select
+              style="width: 100%"
+              :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
+              :treeData="treeData"
+              v-model="model.parentId"
+              placeholder="Please Select Parent Menu"
+              :disabled="disableSubmit"
+              @change="handleParentIdChange"
+            >
+            </a-tree-select>
+          </a-form-model-item>
 
-        <a-form-model-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          :label="menuLabel"
-          prop="name"
-          hasFeedback >
-          <a-input v-model="model.name" :readOnly="disableSubmit"/>
-        </a-form-model-item>
+          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="url" label="Menu Route">
+            <a-input v-model="model.url" :readOnly="disableSubmit" />
+          </a-form-model-item>
 
+          <a-form-model-item
+            v-show="show"
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+            prop="component"
+            label="Component"
+          >
+            <a-input v-model="model.component" :readOnly="disableSubmit" />
+          </a-form-model-item>
 
-        <a-form-model-item
-          v-show="model.menuType!=0"
-          label="Parent Menu"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          :validate-status="validateStatus"
-          :hasFeedback="true"
-          :required="true">
-          <span slot="help">{{ validateStatus=='error'?'Please Select Parent Menu':'&nbsp;&nbsp;' }}</span>
-          <a-tree-select
-            style="width:100%"
-            :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
-            :treeData="treeData"
-            v-model="model.parentId"
-            placeholder="Please Select Parent Menu"
-            :disabled="disableSubmit"
-            @change="handleParentIdChange">
-          </a-tree-select>
-        </a-form-model-item>
+          <a-form-model-item
+            v-show="model.menuType == 0"
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+            label="Redirect Params"
+          >
+            <a-input v-model="model.redirect" :readOnly="disableSubmit" />
+          </a-form-model-item>
 
-        <a-form-model-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          prop="url"
-          label="Menu Route">
-          <a-input v-model="model.url" :readOnly="disableSubmit"/>
-        </a-form-model-item>
+          <a-form-model-item v-show="!show" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="perms" label="Perms">
+            <a-input placeholder="Enter Perms, like: user:list" v-model="model.perms" :readOnly="disableSubmit" />
+          </a-form-model-item>
 
-        <a-form-model-item
-          v-show="show"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          prop="component"
-          label="Component">
-          <a-input v-model="model.component" :readOnly="disableSubmit"/>
-        </a-form-model-item>
+          <a-form-model-item v-show="!show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Auth Category">
+            <j-dict-select-tag v-model="model.permsType" :type="'radio'" dictCode="global_perms_type" />
+          </a-form-model-item>
+          <a-form-model-item v-show="!show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Status">
+            <j-dict-select-tag v-model="model.status" :type="'radio'" dictCode="valid_status" />
+          </a-form-model-item>
 
-        <a-form-model-item
-          v-show="model.menuType==0"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="Redirect Params">
-          <a-input v-model="model.redirect" :readOnly="disableSubmit"/>
-        </a-form-model-item>
+          <a-form-model-item v-show="show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Icon">
+            <a-input placeholder="Click Select Icon" v-model="model.icon" :readOnly="disableSubmit">
+              <a-icon slot="addonAfter" type="setting" @click="selectIcons" />
+            </a-input>
+          </a-form-model-item>
 
-        <a-form-model-item
-          v-show="!show"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          prop="perms"
-          label="Perms">
-          <a-input placeholder="Enter Perms, like: user:list" v-model="model.perms" :readOnly="disableSubmit"/>
-        </a-form-model-item>
+          <a-form-model-item v-show="show" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sortNo" label="Sort">
+            <a-input-number v-model="model.sortNo" style="width: 200px" :readOnly="disableSubmit" />
+          </a-form-model-item>
 
-        <a-form-model-item
-          v-show="!show"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="Auth Category">
-          <j-dict-select-tag  v-model="model.permsType" :type="'radio'"  dictCode="global_perms_type"/>
+          <a-form-model-item v-show="show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Is Route Menu">
+            <a-switch checkedChildren="Yes" unCheckedChildren="No" v-model="model.route" />
+          </a-form-model-item>
 
+          <a-form-model-item v-show="show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Hidden">
+            <a-switch checkedChildren="Yes" unCheckedChildren="No" v-model="model.hidden" />
+          </a-form-model-item>
 
-        </a-form-model-item>
-        <a-form-model-item
-          v-show="!show"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="Status">
-          <j-dict-select-tag v-model="model.status" :type="'radio'" dictCode="valid_status"/>
+          <a-form-model-item v-show="show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Keep Alive">
+            <a-switch checkedChildren="Yes" unCheckedChildren="No" v-model="model.keepAlive" />
+          </a-form-model-item>
 
-        </a-form-model-item>
+          <a-form-model-item v-show="show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Combine Route">
+            <a-switch checkedChildren="Yes" unCheckedChildren="No" v-model="model.alwaysShow" />
+          </a-form-model-item>
 
-        <a-form-model-item
-          v-show="show"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="Icon">
-          <a-input placeholder="Click Select Icon" v-model="model.icon" :readOnly="disableSubmit">
-            <a-icon slot="addonAfter" type="setting" @click="selectIcons" />
-          </a-input>
-        </a-form-model-item>
+          <a-form-model-item v-show="show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Open Type">
+            <a-switch checkedChildren="External" unCheckedChildren="Internal" v-model="model.internalOrExternal" />
+          </a-form-model-item>
+        </a-form-model>
 
-        <a-form-model-item
-          v-show="show"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          prop="sortNo"
-          label="Sort">
-          <a-input-number v-model="model.sortNo" style="width: 200px" :readOnly="disableSubmit"/>
-        </a-form-model-item>
-
-        <a-form-model-item
-          v-show="show"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="Is Route Menu">
-          <a-switch checkedChildren="Yes" unCheckedChildren="No" v-model="model.route"/>
-        </a-form-model-item>
-
-        <a-form-model-item
-          v-show="show"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="Hidden">
-          <a-switch checkedChildren="Yes" unCheckedChildren="No" v-model="model.hidden"/>
-        </a-form-model-item>
-
-        <a-form-model-item
-          v-show="show"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="Keep Alive">
-          <a-switch checkedChildren="Yes" unCheckedChildren="No" v-model="model.keepAlive"/>
-        </a-form-model-item>
-
-
-        <a-form-model-item
-          v-show="show"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="Combine Route">
-          <a-switch checkedChildren="Yes" unCheckedChildren="No" v-model="model.alwaysShow"/>
-        </a-form-model-item>
-
-        <a-form-model-item
-          v-show="show"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="Open Type">
-          <a-switch checkedChildren="External" unCheckedChildren="Internal" v-model="model.internalOrExternal"/>
-        </a-form-model-item>
-
-      </a-form-model>
-
-      <!-- 选择图标 -->
-      <icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
-    </a-spin>
-      <a-row :style="{textAlign:'right'}">
-        <a-button :style="{marginRight: '8px'}" @click="handleCancel" type="warn">
-          Cancel
-        </a-button>
+        <!-- 选择图标 -->
+        <icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
+      </a-spin>
+      <a-row :style="{ textAlign: 'right' }">
+        <a-button :style="{ marginRight: '8px' }" @click="handleCancel" type="warn"> Cancel </a-button>
         <a-button :disabled="disableSubmit" @click="handleOk" type="primary">Ok</a-button>
       </a-row>
     </div>
@@ -176,203 +120,206 @@
 </template>
 
 <script>
-  import {addPermission,editPermission,queryTreeList, duplicateCheck} from '@/api/api'
-  import Icons from './icon/Icons'
+import { addPermission, editPermission, queryTreeList, duplicateCheck } from '@/api/api'
+import Icons from './icon/Icons'
 
-  export default {
-    name: "PermissionModal",
-    components: {Icons},
-    data () {
+export default {
+  name: 'PermissionModal',
+  components: { Icons },
+  data() {
+    return {
+      drawerWidth: 700,
+      treeData: [],
+      title: '操作',
+      visible: false,
+      disableSubmit: false,
+      model: {},
+      show: true, //根据菜单类型，动态显示隐藏表单元素
+      menuLabel: 'Menu Name',
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
+      confirmLoading: false,
+      iconChooseVisible: false,
+      validateStatus: '',
+    }
+  },
+  computed: {
+    validatorRules: function () {
       return {
-        drawerWidth:700,
-        treeData:[],
-        title:"操作",
-        visible: false,
-        disableSubmit:false,
-        model: {},
-        show:true,//根据菜单类型，动态显示隐藏表单元素
-        menuLabel:'Menu Name',
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 5 },
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 16 },
-        },
-        confirmLoading: false,
-        iconChooseVisible: false,
-        validateStatus:""
+        name: [{ required: true, message: 'Please Enter Menu Name' }],
+        component: [{ required: this.show, message: 'Please Enter Component' }],
+        url: [{ required: this.show, message: 'Plaase Enter Route Path' }],
+        permsType: [{ required: true, message: 'Please Enter Auth Category' }],
+        perms: [{ required: false, message: 'Please Enter Perms' }, { validator: this.validatePerms }],
       }
     },
-    computed:{
-      validatorRules:function() {
-        return {
-          name:[{ required: true, message: 'Please Enter Menu Name' }],
-          component:[{ required: this.show, message: 'Please Enter Component' }],
-          url: [{ required: this.show, message: 'Plaase Enter Route Path' }],
-          permsType: [{ required: true, message: 'Please Enter Auth Category' }],
-          perms:[{ required: false, message: 'Please Enter Perms' },{validator: this.validatePerms }]
-        }
-      }
-    },
-    created () {
-    },
-    methods: {
-      loadTree(){
-        var that = this;
-        queryTreeList().then((res)=>{
-          if(res.success){
-            console.log(res)
-            that.treeData = [];
-            let treeList = res.result.treeList
-            for(let a=0;a<treeList.length;a++){
-              let temp = treeList[a];
-              temp.isLeaf = temp.leaf;
-              that.treeData.push(temp);
-            }
+  },
+  created() {},
+  methods: {
+    loadTree() {
+      var that = this
+      queryTreeList().then((res) => {
+        if (res.success) {
+          console.log(res)
+          that.treeData = []
+          let treeList = res.result.treeList
+          for (let a = 0; a < treeList.length; a++) {
+            let temp = treeList[a]
+            temp.isLeaf = temp.leaf
+            that.treeData.push(temp)
           }
-        });
-      },
-      add () {
-        //初始化默认值
-        this.edit({status:'1', permsType:'1', sortNo:1.0, route:true, menuType:0,component:'layouts/RouteView' });
-      },
-      edit (record) {
-        this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
-        this.model = Object.assign({}, record);
+        }
+      })
+    },
+    add() {
+      //初始化默认值
+      this.edit({ status: '1', permsType: '1', sortNo: 1.0, route: true, menuType: 0, component: 'layouts/RouteView' })
+    },
+    edit(record) {
+      this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
+      this.model = Object.assign({}, record)
 
-        //根据菜单类型，动态展示页面字段
-        console.log('record: ',record)
-        this.show = record.menuType==2?false:true;
-        this.menuLabel = record.menuType==2?'Button/Permission':'Menu Name';
+      //根据菜单类型，动态展示页面字段
+      console.log('record: ', record)
+      this.show = record.menuType == 2 ? false : true
+      this.menuLabel = record.menuType == 2 ? 'Button/Permission' : 'Menu Name'
 
-        this.visible = true;
-        this.loadTree();
-      },
-      close () {
-        this.$emit('close');
-        this.disableSubmit = false;
-        this.visible = false;
-        this.$refs.form.resetFields();
-      },
-      handleOk () {
-        const that = this;
-        // 触发表单验证
-        this.$refs.form.validate(valid => {
-          if (valid) {
-            if ((this.model.menuType == 1 || this.model.menuType == 2) && !this.model.parentId) {
-              that.validateStatus = 'error';
-              that.$message.error("Please Check The Form");
-              return;
-            } else {
-              that.validateStatus = 'success';
-            }
-            that.confirmLoading = true;
-            let obj;
-            if (!this.model.id) {
-              obj = addPermission(this.model);
-            } else {
-              obj = editPermission(this.model);
-            }
-            obj.then((res) => {
+      this.visible = true
+      this.loadTree()
+    },
+    close() {
+      this.$emit('close')
+      this.disableSubmit = false
+      this.visible = false
+      this.$refs.form.resetFields()
+    },
+    handleOk() {
+      const that = this
+      // 触发表单验证
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if ((this.model.menuType == 1 || this.model.menuType == 2) && !this.model.parentId) {
+            that.validateStatus = 'error'
+            that.$message.error('Please Check The Form')
+            return
+          } else {
+            that.validateStatus = 'success'
+          }
+          that.confirmLoading = true
+          let obj
+          if (!this.model.id) {
+            obj = addPermission(this.model)
+          } else {
+            obj = editPermission(this.model)
+          }
+          obj
+            .then((res) => {
               if (res.success) {
-                that.$message.success(res.message);
-                that.$emit('ok');
+                that.$message.success(res.message)
+                that.$emit('ok')
               } else {
-                that.$message.warning(res.message);
+                that.$message.warning(res.message)
               }
-            }).finally(() => {
-              that.confirmLoading = false;
-              that.close();
-            });
-          }else{
-            return false;
+            })
+            .finally(() => {
+              that.confirmLoading = false
+              that.close()
+            })
+        } else {
+          return false
+        }
+      })
+    },
+    handleCancel() {
+      this.close()
+    },
+    validateNumber(rule, value, callback) {
+      if (!value || new RegExp(/^[0-9]*[1-9][0-9]*$/).test(value)) {
+        callback()
+      } else {
+        callback('Please Enter Positive Integer')
+      }
+    },
+    validatePerms(rule, value, callback) {
+      if (value && value.length > 0) {
+        //校验授权标识是否存在
+        var params = {
+          tableName: 'sys_permission',
+          fieldName: 'perms',
+          fieldVal: value,
+          dataId: this.model.id,
+        }
+        duplicateCheck(params).then((res) => {
+          if (res.success) {
+            callback()
+          } else {
+            callback('Perms Already Exist')
           }
         })
-      },
-      handleCancel () {
-        this.close()
-      },
-      validateNumber(rule, value, callback){
-        if(!value || new RegExp(/^[0-9]*[1-9][0-9]*$/).test(value)){
-          callback();
-        }else{
-          callback("Please Enter Positive Integer");
-        }
-      },
-      validatePerms(rule, value, callback){
-        if(value && value.length>0){
-          //校验授权标识是否存在
-          var params = {
-            tableName: 'sys_permission',
-            fieldName: 'perms',
-            fieldVal: value,
-            dataId: this.model.id
-          };
-          duplicateCheck(params).then((res) => {
-            if (res.success) {
-              callback()
-            } else {
-              callback("Perms Already Exist")
-            }
-          })
-        }else{
-          callback()
-        }
-      },
-      onChangeMenuType(e) {
-        if(this.model.menuType == 2){
-          this.show = false;
-          this.menuLabel = 'Menu/Permission';
-        }else{
-          this.show = true;
-          this.menuLabel = 'Menu Name';
-        }
+      } else {
+        callback()
+      }
+    },
+    onChangeMenuType(e) {
+      if (this.model.menuType == 2) {
+        this.show = false
+        this.menuLabel = 'Menu/Permission'
+      } else {
+        this.show = true
+        this.menuLabel = 'Menu Name'
+      }
 
-        //update-begin---author:wangshuai ---date:20220729  for：[VUEN-1834]只有一级菜单，才默认值，子菜单的时候，清空------------
-        if(!this.model.id){
-          if(this.model.menuType === 1 && this.model.component === 'layouts/RouteView'){
-            this.model.component = ""
-          }
-        }
-        //update-end---author:wangshuai ---date:20220729  for：[VUEN-1834]只有一级菜单，才默认值，子菜单的时候，清空--------------
-
-        this.$nextTick(() => {
-          this.$refs.form.validateField(['url','component']);
-        });
-      },
-      selectIcons(){
-        this.iconChooseVisible = true
-      },
-      handleIconCancel () {
-        this.iconChooseVisible = false
-      },
-      handleIconChoose (value) {
-        console.log(value)
-        this.model.icon = value
-        this.iconChooseVisible = false
-      },
-      // 根据屏幕变化,设置抽屉尺寸
-      resetScreenSize(){
-        let screenWidth = document.body.clientWidth;
-        if(screenWidth < 500){
-          this.drawerWidth = screenWidth;
-        }else{
-          this.drawerWidth = 700;
-        }
-      },
-      handleParentIdChange(value){
-        if(!value){
-          this.validateStatus="error"
-        }else{
-          this.validateStatus="success"
+      //update-begin---author:wangshuai ---date:20220729  for：[VUEN-1834]只有一级菜单，才默认值，子菜单的时候，清空------------
+      if (!this.model.id) {
+        if (this.model.menuType === 1 && this.model.component === 'layouts/RouteView') {
+          this.model.component = ''
         }
       }
-    }
-  }
+      //update-end---author:wangshuai ---date:20220729  for：[VUEN-1834]只有一级菜单，才默认值，子菜单的时候，清空--------------
+
+      this.$nextTick(() => {
+        this.$refs.form.validateField(['url', 'component'])
+      })
+    },
+    selectIcons() {
+      this.iconChooseVisible = true
+    },
+    handleIconCancel() {
+      this.iconChooseVisible = false
+    },
+    handleIconChoose(value) {
+      console.log(value)
+      this.model.icon = value
+      this.iconChooseVisible = false
+    },
+    // 根据屏幕变化,设置抽屉尺寸
+    resetScreenSize() {
+      let screenWidth = document.body.clientWidth
+      if (screenWidth < 500) {
+        this.drawerWidth = screenWidth
+      } else {
+        this.drawerWidth = 700
+      }
+    },
+    handleParentIdChange(value) {
+      if (!value) {
+        this.validateStatus = 'error'
+      } else {
+        this.validateStatus = 'success'
+      }
+    },
+  },
+}
 </script>
 
-<style scoped>
-
+<style>
+.ant-select-dropdown {
+  background-color: #03353f !important;
+}
 </style>
\ No newline at end of file