Function: 机构公用组件

src/views/modules/common/org-component.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <el-popover
+      ref="menuListPopover"
+      placement="bottom-start"
+      trigger="click">
+      <el-tree
+        :data="orgList"
+        :props="menuListTreeProps"
+        node-key="orgId"
+        ref="menuListTree"
+        @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>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'org-component',
+    props: {
+      orgId: {
+        type: String,
+        default: ''
+      }
+    },
+    model: {
+      prop: 'orgId',
+      event: 'orgSelected'
+    },
+    mounted () {
+      this.init()
+    },
+    data () {
+      return {
+        dataForm: {
+          id: 0,
+          orgId: '',
+          orgName: ''
+        },
+        menuListTreeProps: {
+          label: 'name',
+          children: 'children'
+        },
+        orgList: []
+      }
+    },
+    // watch: {
+    //   orgId: function (newValues) {
+    //     this.dataForm.orgId = newValues
+    //   }
+    // },
+    methods: {
+      async init () {
+        let orgId = this.orgId
+        this.$http({
+          url: this.$http.adornUrl(`/user-service/org/queryTree`),
+          method: 'get'
+        }).then(({data}) => {
+          this.orgList = data && data.code === '200' ? data.data : []
+        }).then(() => {
+          if (orgId) {
+            this.$http({
+              url: this.$http.adornUrl(`/user-service/org/info/${orgId}`),
+              method: 'get'
+            }).then(({data}) => {
+              if (data && data.code === '200') {
+                this.menuListTreeSetCurrentNode()
+              }
+            })
+          }
+        })
+      },
+      menuListTreeCurrentChangeHandle (data, node) {
+        this.dataForm.orgId = data.orgId
+        this.dataForm.orgName = data.name
+        this.$emit('orgSelected', data.orgId)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -5,17 +5,20 @@
     :visible.sync="visible">
     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
       <el-form-item label="用户名" prop="userName">
-        <el-input v-model="dataForm.userName" :disabled="dataForm.id" placeholder="登录帐号"></el-input>
+        <el-input v-model="dataForm.userName" :disabled="dataForm.id !== 0" placeholder="登录帐号"></el-input>
       </el-form-item>
       <el-form-item label="姓名" prop="name">
-        <el-input v-model="dataForm.name" :disabled="dataForm.id" placeholder="姓名"></el-input>
+        <el-input v-model="dataForm.name" :disabled="dataForm.id !== 0" placeholder="姓名"></el-input>
       </el-form-item>
       <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">
         <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
       </el-form-item>
-      <el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">
+      <el-form-item label="确认密码" prop="confirmPassword" :class="{ 'is-required': !dataForm.id }">
         <el-input v-model="dataForm.confirmPassword" type="password" placeholder="确认密码"></el-input>
       </el-form-item>
+      <el-form-item label="所属机构" prop="orgId">
+        <org-component v-model="dataForm.orgId"/>
+      </el-form-item>
       <el-form-item label="邮箱" prop="email">
         <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
       </el-form-item>
@@ -43,7 +46,9 @@
 
 <script>
   import { isEmail, isMobile } from '@/utils/validate'
+  import OrgComponent from '../common/org-component'
   export default {
+    components: {OrgComponent},
     data () {
       let validatePassword = (rule, value, callback) => {
         if (!this.dataForm.id && !/\S/.test(value)) {
@@ -89,7 +94,8 @@
           email: '',
           mobile: '',
           roleIdList: [],
-          status: 1
+          status: 1,
+          orgId: ''
         },
         dataRule: {
           userName: [
@@ -110,6 +116,9 @@
           mobile: [
             { required: true, message: '手机号不能为空', trigger: 'blur' },
             { validator: validateMobile, trigger: 'blur' }
+          // ],
+          // orgId: [
+          //   { required: true, message: '所属机构不能为空', trigger: 'blur' }
           ]
         }
       }
@@ -147,6 +156,7 @@
                 this.dataForm.roleIdList = data.data.roleIdList
                 this.dataForm.status = Number(data.data.status)
                 this.dataForm.name = data.data.name
+                this.dataForm.orgId = data.data.orgId
               }
             })
           }
@@ -169,7 +179,7 @@
                 'status': this.dataForm.status,
                 'roleIdList': this.dataForm.roleIdList,
                 'name': this.dataForm.name,
-                'orgId': '1236014628821554950' // 硬编码，测试用
+                'orgId': this.dataForm.orgId
               } : {
                 'userId': this.dataForm.id,
                 'password': this.dataForm.password,
@@ -177,7 +187,8 @@
                 'mobile': this.dataForm.mobile,
                 'status': this.dataForm.status,
                 'roleIdList': this.dataForm.roleIdList,
-                'name': this.dataForm.name
+                'name': this.dataForm.name,
+                'orgId': this.dataForm.orgId
               })
             }).then(({data}) => {
               if (data && data.code === '200') {