feat: [选择人员] 选择人员的组件

src/lang/en.js

@@ -63,7 +63,9 @@ export default {
     lengthLimit: '长度不能超过',
     notEmpty: '不能为空',
     operationSuccess: '操作成功',
-    OperationFailed: '操作失败'
+    OperationFailed: '操作失败',
+
+    selectMember: 'Select User'
   },
   login: {
     title: 'Welcome',

src/lang/zh.js

@@ -60,7 +60,9 @@ export default {
     lengthLimit: '长度不能超过',
     notEmpty: '不能为空',
     operationSuccess: '操作成功',
-    OperationFailed: '操作失败'
+    OperationFailed: '操作失败',
+
+    selectMember: '选择成员'
   },
   login: {
     title: '欢迎登录系统',

src/views/business/comps/select/SelectDeptUser.vue

@@ -1,89 +1,126 @@
 <!-- 选择部门 -->
+
 <template>
-  <treeselect 
-    ref="treeselectRef" 
-    v-model="selected" 
-    :options="list" 
-    :show-count="true" 
-    :disabled="readonly" 
-    :placeholder="$t('form.placeholderSelect')" 
-    @select="handleChange" 
-    :normalizer="normalizer"
-    :style="{width:width}" />
-  <!-- :flat="true" -->
+  <div>
+    <el-input v-model="selectedObj.name" :placeholder="$t('form.placeholderSelect')" readonly @click.native="showSelectDeptUser" />
+    <el-dialog :title="$t('form.selectMember')" :visible.sync="open" width="500px" append-to-body>
+      <el-input
+        :placeholder="$t('form.placeholderInput')"
+        v-model="filterText"
+        style="margin-bottom:10px">
+      </el-input>
+
+      <el-tree
+        class="filter-tree"
+        :data="list"
+        :props="defaultProps"
+        :default-expand-all="selected==''"
+        :default-expanded-keys="selected=='' ? []:[selected]"
+        :filter-node-method="filterNode"
+        ref="tree"
+        @node-click="handleChange"
+        node-key="id"
+        >
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <el-radio :ref="'radio'+data.id" v-if="data.type===7" v-model="selected" :label="data.id">{{ data.name }}</el-radio>
+          <span v-else>{{ data.name }}</span>
+        </span>
+      </el-tree>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="open=false">{{$t('form.cancel')}}</el-button>
+        <el-button type="primary" @click="save">{{$t('form.saveConfirm')}}</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import Treeselect from "@riophae/vue-treeselect"
 import { deptUserList } from "@/api/system/user"
-import "@riophae/vue-treeselect/dist/vue-treeselect.css"
 export default {
-  name: "SelectDept",
-  components: {Treeselect},
+  name: "SelectDeptUser",
+  components: {},
   props: {
     value: {
       type: [Number, String , Array],
-      default: null,
-    },
-    readonly: {
-      type: Boolean,
-      default: false
+      default: ''
     },
-    width:{
-      type:String,
-      default:'100%'
-    }
   },
   watch: {
     value: {
       immediate: true,
       handler(v) {
+        this.selected = v ?((v+'').indexOf('u_')>-1? v:('u_'+v)):''
         debugger
-        this.selected = v?((v+'').indexOf('u_')>-1? v:('u_'+v)):null
+        this.selectedObj = {
+          id:this.selected,
+          name:this.getName(this.selected)
+        }
       }
     },
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
   },
   data() {
     return {
-      selected: null,
+      open:false,
+
+      selected: '',
+      selectedObj :{
+        id:'',
+        name:''
+      },
+
+      listData: [],
       list: [],
+      filterText:'',
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
     };
   },
   mounted() {
     this.getList()
   },
   methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    showSelectDeptUser(){
+      this.open = true
+      this.filterText = ''
+    },
     getList() {
+      this.listData = []
       this.list = []
       deptUserList().then(response => {
-        // response.data.forEach(element => {
-        //   element.isDisabled = element.type!==7
-        // })
+        this.listData = response.data
         this.list = this.handleTree(response.data, "id")
       })
     },
-    handleChange(val) {
-      if(val){
-        if(val.type!==7){
-          this.$message.error(`只能选择人员`)
-          this.selected = null
-          this.$refs.treeselectRef.clear();
-        }else{
-          this.$emit('input', val.id? val.id.split('_')[1] : '')
-          this.$emit('change', val.id? val.id.split('_')[1] : '')
-        }
+    handleChange(data) {
+      if(data && data.type===7){
+        this.selected = data.id
+        this.selectedObj = data
       }
     },
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
+    getName(id){
+      debugger
+      let name = ''
+      let arr =  _.filter(this.listData, (o)=> { return o.id===id })
+      if(arr && arr.length>0){
+        name = arr[0].name
       }
-      return {
-        id: node.id,
-        label: node.name,
-        children: node.children,
-        // isDisabled:node.isDisabled
-      };
+      return name
+    },
+    save(){
+      this.$emit('change', this.selectedObj)
+      this.$emit('input', this.selectedObj && this.selectedObj.id?this.selectedObj.id.replace('u_',''):'')
+      debugger
+      this.open = false
     },
   }
 };

src/views/business/study/comp/edit.vue

@@ -26,8 +26,7 @@
           </el-col>
           <el-col :span="24">
             <el-form-item :label="$t('page.business.study.leader')+'：'" prop="leader">
-              <!-- <el-input v-model="infoDialog.formData.leader" :placeholder="$t('form.placeholderInput')" /> -->
-              <SelectDeptUser v-model="infoDialog.formData.leader" />
+              <SelectDeptUser @change="changeLeader" v-model="infoDialog.formData.leader" />
             </el-form-item>
           </el-col>
           <el-col :span="24">
@@ -84,6 +83,9 @@ export default {
   created() {
   },
   methods: {
+    changeLeader(val){
+      this.$refs.infoDialogForm.clearValidate('leader')
+    },
     edit(row) {
       this.$refs['infoDialogForm'] && this.$refs['infoDialogForm'].resetFields()
       this.infoDialog.formData = _.merge({}, EmptyDialogData)