优化功能菜单的编辑页面

jshERP-web/src/views/system/modules/FunctionModal.vue

@@ -23,7 +23,11 @@
           <a-input placeholder="请输入名称" v-decorator.trim="[ 'name', validatorRules.name]" />
         </a-form-item>
         <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级编号">
-          <a-input placeholder="请输入上级编号" v-decorator.trim="[ 'parentNumber', validatorRules.parentNumber ]" />
+          <a-input-search placeholder="请选择上级编号" v-decorator.trim="[ 'parentNumber', validatorRules.parentNumber ]"
+                          @search="onSearchParentNumber" :readOnly="true" />
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级名称">
+          <a-input v-decorator.trim="[ 'parentName' ]" :readOnly="true" />
         </a-form-item>
         <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="链接">
           <a-input placeholder="请输入链接" v-decorator.trim="[ 'url', validatorRules.url ]" />
@@ -45,16 +49,19 @@
         </a-form-item>
       </a-form>
     </a-spin>
+    <function-tree-modal ref="functionTreeModal" @ok="functionTreeModalOk"></function-tree-modal>
   </a-modal>
 </template>
 <script>
   import pick from 'lodash.pick'
+  import FunctionTreeModal from './FunctionTreeModal'
   import {addFunction,editFunction,checkFunction, checkNumber } from '@/api/api'
   import {autoJumpNextInput} from "@/utils/util"
   import JSelectMultiple from '@/components/jeecg/JSelectMultiple'
   export default {
     name: "FunctionModal",
     components: {
+      FunctionTreeModal,
       JSelectMultiple
     },
     data () {
@@ -224,6 +231,14 @@
             callback(res.data);
           }
         });
+      },
+      onSearchParentNumber() {
+        this.$refs.functionTreeModal.edit(this.model.id);
+        this.$refs.functionTreeModal.title = "选择上级编号";
+        this.$refs.functionTreeModal.disableSubmit = false;
+      },
+      functionTreeModalOk(number, name) {
+        this.form.setFieldsValue({'parentNumber': number, 'parentName': name})
       }
     }
   }

jshERP-web/src/views/system/modules/FunctionTreeModal.vue

@@ -0,0 +1,145 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    wrapClassName="ant-modal-cust-warp"
+    style="top:10%;height: 90%;overflow-y: hidden">
+    <template slot="footer">
+      <a-button key="back" @click="handleCancel">
+        关闭
+      </a-button>
+    </template>
+    <a-spin :spinning="confirmLoading">
+      <a-col :md="10" :sm="24">
+        <template>
+          <a-tree
+            multiple
+            @select='onSelect'
+            :selectedKeys="selectedKeys"
+            :checkedKeys="checkedKeys"
+            :treeData="roleFunctionTree"
+            :checkStrictly="checkStrictly"
+            :expandedKeys="iExpandedKeys"
+            :autoExpandParent="true" />
+        </template>
+      </a-col>
+    </a-spin>
+  </a-modal>
+</template>
+<script>
+  import pick from 'lodash.pick'
+  import {getAction} from '../../../api/manage'
+  export default {
+    name: "FunctionTreeModal",
+    data () {
+      return {
+        title:"操作",
+        width: '800px',
+        visible: false,
+        model: {},
+        roleId: 0,
+        iExpandedKeys: [],
+        roleFunctionTree: [],
+        checkedKeys: [],
+        selectedKeys: [],
+        checkStrictly: false,
+        hiding: true,
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+        confirmLoading: false,
+        form: this.$form.createForm(this),
+      }
+    },
+    created () {
+    },
+    methods: {
+      edit (id) {
+        this.form.resetFields();
+        this.model = Object.assign({}, {});
+        this.visible = true;
+        this.$nextTick(() => {
+          this.form.setFieldsValue(pick(this.model,'name', 'type', 'description'))
+        });
+        this.roleId = id
+        this.checkedKeys = []
+        this.loadTree(id)
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      },
+      loadTree(id) {
+        let that = this
+        that.treeData = []
+        that.roleFunctionTree = []
+        let params = {};
+        params.id='';
+        getAction('/function/findRoleFunction?UBType=RoleFunctions&UBKeyId='+id).then((res) => {
+          if (res) {
+            //机构全选后，再添加机构，选中数量增多
+            this.allTreeKeys = [];
+            for (let i = 0; i < res.length; i++) {
+              let temp = res[i]
+              that.treeData.push(temp)
+              that.roleFunctionTree.push(temp)
+              that.setThisExpandedKeys(temp)
+              that.getAllKeys(temp);
+            }
+            console.log(JSON.stringify(this.checkedKeys))
+            this.loading = false
+          }
+        })
+      },
+      onSelect(selectedKeys, info){
+        let funId = info.node.value
+        if(funId!==0) {
+          getAction('/function/info?id=' + funId).then((res) => {
+            if(res && res.code === 200) {
+              if(res.data && res.data.info) {
+                this.$emit('ok', res.data.info.number, res.data.info.name)
+              }
+            }
+          })
+        } else {
+          this.$emit('ok', 0, '')
+        }
+        this.close()
+      },
+      setThisExpandedKeys(node) {
+        if(node.checked==true) {
+          this.checkedKeys.push(node.key)
+        }
+        if (node.children && node.children.length > 0) {
+          this.iExpandedKeys.push(node.key)
+          for (let a = 0; a < node.children.length; a++) {
+            this.setThisExpandedKeys(node.children[a])
+          }
+        }
+      },
+      getAllKeys(node) {
+        this.allTreeKeys.push(node.key)
+        if (node.children && node.children.length > 0) {
+          for (let a = 0; a < node.children.length; a++) {
+            this.getAllKeys(node.children[a])
+          }
+        }
+      },
+    }
+  }
+</script>
+<style scoped>
+
+</style>