Fix: 角色中使用机构选择组件

.gitignore

@@ -15,3 +15,5 @@ selenium-debug.log
 *.ntvs*
 *.njsproj
 *.sln
+/dist/
+/dist.zip

src/views/modules/sys/role-add-or-update.vue

@@ -17,24 +17,27 @@
         <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
       </el-form-item>
       <el-form-item label="所属机构" prop="orgId">
-        <el-popover
-          ref="menuListPopover"
-          placement="bottom-start"
-          trigger="click">
-          <el-tree
-            :data="orgList"
-            :props="orgListTreeProps"
-            node-key="orgId"
-            ref="orgListTree"
-            @current-change="menuListTreeCurrentChangeHandle"
-            :default-expand-all="true"
-            :highlight-current="true"
-            :expand-on-click-node="false">
-          </el-tree>
-        </el-popover>
-        <el-input v-model="dataForm.orgName" v-popover:menuListPopover :readonly="true" placeholder="点击选择所属机构" class="menu-list__input"></el-input>
+        <org-component v-model="dataForm.orgId" @orgSelected="validateField('orgId')"/>
       </el-form-item>
-      <div class="myitem">
+<!--      <el-form-item label="所属机构" prop="orgId">-->
+<!--        <el-popover-->
+<!--          ref="menuListPopover"-->
+<!--          placement="bottom-start"-->
+<!--          trigger="click">-->
+<!--          <el-tree-->
+<!--            :data="orgList"-->
+<!--            :props="orgListTreeProps"-->
+<!--            node-key="orgId"-->
+<!--            ref="orgListTree"-->
+<!--            @current-change="menuListTreeCurrentChangeHandle"-->
+<!--            :default-expand-all="true"-->
+<!--            :highlight-current="true"-->
+<!--            :expand-on-click-node="false">-->
+<!--          </el-tree>-->
+<!--        </el-popover>-->
+<!--        <el-input v-model="dataForm.orgName" v-popover:menuListPopover :readonly="true" placeholder="点击选择所属机构" class="menu-list__input"></el-input>-->
+<!--      </el-form-item>-->
+      <div class="my-item">
         <el-form-item size="mini" label="授权">
           <el-tree
             :data="menuList"
@@ -46,13 +49,13 @@
           </el-tree>
         </el-form-item>
       </div>
-      <div class="myitem">
+      <div class="my-item">
         <el-form-item size="mini" label="数据权限">
           <el-tree
             :data="orgList"
             :props="orgListTreeProps"
             node-key="orgId"
-            ref="orgListDatta"
+            ref="orgListData"
             :default-expand-all="true"
             :highlight-current="true"
             show-checkbox>
@@ -68,7 +71,10 @@
 </template>
 
 <script>
+  import OrgComponent from '../common/org-component'
+
   export default {
+    components: {OrgComponent},
     data () {
       return {
         visible: false,
@@ -127,7 +133,7 @@
           this.$nextTick(() => {
             this.$refs['dataForm'].resetFields()
             this.$refs.menuListTree.setCheckedKeys([])
-            this.$refs.orgListDatta.setCheckedKeys([])
+            this.$refs.orgListData.setCheckedKeys([])
           })
         }).then(() => {
           if (this.dataForm.id) {
@@ -141,7 +147,7 @@
                 this.dataForm.remark = data.data.remark
                 // this.dataForm.isCommon = data.data.isCommon
                 this.dataForm.orgId = data.data.orgId
-                this.menuListTreeSetCurrentNode()
+                // this.menuListTreeSetCurrentNode()
                 // var idx = data.data.menuIdList.indexOf(this.tempKey)
                 // if (idx !== -1) {
                 //   data.data.menuIdList.splice(idx, data.data.menuIdList.length - idx)
@@ -156,9 +162,9 @@
                 }
                 if (data.data.orgIdList) {
                   data.data.orgIdList.forEach(i => {
-                    const node = this.$refs.orgListDatta.getNode(i)
+                    const node = this.$refs.orgListData.getNode(i)
                     if (node.isLeaf) {
-                      this.$refs.orgListDatta.setChecked(node, true)
+                      this.$refs.orgListData.setChecked(node, true)
                     }
                   })
                 }
@@ -167,18 +173,18 @@
           }
         })
       },
-      menuListTreeCurrentChangeHandle (data, node) {
-        this.dataForm.orgId = data.orgId
-        this.dataForm.orgName = data.name
-      },
-      menuListTreeSetCurrentNode () {
-        this.$refs.orgListTree.setCurrentKey(this.dataForm.orgId)
-        if (this.dataForm.orgId === '0') {
-          this.dataForm.orgName = ''
-        } else {
-          this.dataForm.orgName = (this.$refs.orgListTree.getCurrentNode() || {})['name']
-        }
-      },
+      // menuListTreeCurrentChangeHandle (data, node) {
+      //   this.dataForm.orgId = data.orgId
+      //   this.dataForm.orgName = data.name
+      // },
+      // menuListTreeSetCurrentNode () {
+      //   this.$refs.orgListTree.setCurrentKey(this.dataForm.orgId)
+      //   if (this.dataForm.orgId === '0') {
+      //     this.dataForm.orgName = ''
+      //   } else {
+      //     this.dataForm.orgName = (this.$refs.orgListTree.getCurrentNode() || {})['name']
+      //   }
+      // },
       // 表单提交
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {
@@ -193,7 +199,7 @@
                 'isCommon': this.dataForm.isCommon,
                 'orgId': this.dataForm.orgId,
                 'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), this.$refs.menuListTree.getHalfCheckedKeys()),
-                'orgIdList': [].concat(this.$refs.orgListDatta.getCheckedKeys(), this.$refs.orgListDatta.getHalfCheckedKeys())
+                'orgIdList': [].concat(this.$refs.orgListData.getCheckedKeys(), this.$refs.orgListData.getHalfCheckedKeys())
               })
             }).then(({data}) => {
               if (data && data.code === '200') {
@@ -212,13 +218,16 @@
             })
           }
         })
+      },
+      validateField (type) {
+        this.$refs.dataForm.validateField(type)
       }
     }
   }
 </script>
 
 <style lang="scss" scoped>
-.myitem{
+.my-item{
   width: 49%;
   overflow: auto;
   display: inline-block;

src/views/modules/sys/role.vue

@@ -35,6 +35,12 @@
         align="center"
         label="角色名称">
       </el-table-column>
+      <el-table-column
+        prop="orgName"
+        header-align="center"
+        align="center"
+        label="所属机构">
+      </el-table-column>
       <el-table-column
         prop="remark"
         header-align="center"