fix: [系统组件] 选人员的组件增加姓名回显

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

@@ -3,152 +3,63 @@
 <template>
   <div>
     <el-input v-model="selected.name" :placeholder="$t('form.placeholderSelect')" readonly @click.native="showSelectDeptUser" />
-    <el-dialog :title="$t('form.selectMember')" :visible.sync="open" width="800px" append-to-body>
-      <el-row>
-        <el-col :span="12" class="select-user-left">
-          <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.id==''"
-            :default-expanded-keys="selected.id=='' ? []:[selected.id]"
-            :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.id" :label="data.id">{{ data.name }}</el-radio>
-              <span v-else>{{ data.name }}</span>
-            </span>
-          </el-tree>
-        </el-col>
-        <el-col :span="12" class="select-user-right">
-          <div>已选</div>
-          <div class="select-user-selected" v-if="selected.id!=''">
-            <div class="select-user-selected-item">
-              <div class="select-user-selected-name">{{selected.name}}</div>
-              <div class="select-user-selected-del"><i class="el-icon-delete" @click="delSelected"></i></div>
-            </div>
-          </div>
-        </el-col>
-      </el-row>
-      
-
-      <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>
+    <SelectDeptUserDialog ref="selectDeptUserDialog" v-model="selected.id" :name="selected.name" @change="handleChange" />
   </div>
 </template>
 
 <script>
-import { deptUserList } from "@/api/system/user"
+import SelectDeptUserDialog from './SelectDeptUserDialog.vue'
 export default {
   name: "SelectDeptUser",
-  components: {},
+  components: {SelectDeptUserDialog},
   props: {
     value: {
-      type: Object,
-      default(){
-        return {
-          id:'',
-          name:''
-        }
-      }
+      type: [Number, String , Array],
+      default: ''
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
     },
   },
   watch: {
     value: {
       immediate: true,
       handler(v) {
-        let id = v && v.id ?((v.id+'').indexOf('u_')>-1? v.id:('u_'+v.id)):''
-        this.selected = {
-          id:id,
-          name:v.name
-        }
+        this.selected.id = v ?((v+'').indexOf('u_')>-1? v:('u_'+v)):''
+      }
+    },
+    name: {
+      immediate: true,
+      handler(v) {
+        this.selected.name=v || ''
       }
     },
-    filterText(val) {
-      this.$refs.tree.filter(val);
-    }
   },
   data() {
     return {
-      open:false,
-
       selected:{
         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 => {
-        this.listData = response.data
-        this.list = this.handleTree(response.data, "id")
-      })
-    },
-    handleChange(data) {
-      if(data && data.type===7){
-        this.selected = {
-          id:data.id,
-          name:data.name
-        }
+      if(!this.readOnly){
+        this.$refs.selectDeptUserDialog.show()
       }
     },
-    // getName(id){
-    //   let name = ''
-    //   let arr =  _.filter(this.listData, (o)=> { return o.id===id })
-    //   if(arr && arr.length>0){
-    //     name = arr[0].name
-    //   }
-    //   return name
-    // },
-    save(){
-      let obj = {
-        id:this.selected && this.selected.id?this.selected.id.replace('u_',''):'',
-        name:this.selected.name
-      }
+    handleChange(obj) {
       this.$emit('change', obj)
-      this.$emit('input', obj)
-      this.open = false
+      this.$emit('input', obj.id)
     },
-    delSelected(){
-      this.selected = {
-        id:'',
-        name:''
-      }
-    }
   }
 };
 </script>

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

@@ -0,0 +1,152 @@
+<!-- 选择部门 -->
+
+<template>
+  <el-dialog :title="$t('form.selectMember')" :visible.sync="open" width="800px" append-to-body>
+    <el-row>
+      <el-col :span="12" class="select-user-left">
+        <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.id==''"
+          :default-expanded-keys="selected.id=='' ? []:[selected.id]"
+          :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.id" :label="data.id">{{ data.name }}</el-radio>
+            <span v-else>{{ data.name }}</span>
+          </span>
+        </el-tree>
+      </el-col>
+      <el-col :span="12" class="select-user-right">
+        <div>已选</div>
+        <div class="select-user-selected" v-if="selected.id!=''">
+          <div class="select-user-selected-item">
+            <div class="select-user-selected-name">{{selected.name}}</div>
+            <div class="select-user-selected-del"><i class="el-icon-delete" @click="delSelected"></i></div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    
+
+    <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>
+</template>
+
+<script>
+import { deptUserList } from "@/api/system/user"
+export default {
+  name: "SelectDeptUserDialog",
+  components: {},
+  props: {
+    value: {
+      type: [Number, String , Array],
+      default: ''
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(v) {
+        this.selected.id = v ?((v+'').indexOf('u_')>-1? v:('u_'+v)):''
+      }
+    },
+    name: {
+      immediate: true,
+      handler(v) {
+        this.selected.name=v || ''
+      }
+    },
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  data() {
+    return {
+      open:false,
+
+      selected:{
+        id:'',
+        name:''
+      },
+
+      listData: [],
+      list: [],
+      filterText:'',
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    };
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    show(){
+      this.open = true
+      this.filterText = ''
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    getList() {
+      this.listData = []
+      this.list = []
+      deptUserList().then(response => {
+        this.listData = response.data
+        this.list = this.handleTree(response.data, "id")
+      })
+    },
+    handleChange(data) {
+      if(data && data.type===7){
+        this.selected = {
+          id:data.id,
+          name:data.name
+        }
+      }
+    },
+    // getName(id){
+    //   let name = ''
+    //   let arr =  _.filter(this.listData, (o)=> { return o.id===id })
+    //   if(arr && arr.length>0){
+    //     name = arr[0].name
+    //   }
+    //   return name
+    // },
+    save(){
+      let obj = {
+        id:this.selected && this.selected.id?this.selected.id.replace('u_',''):'',
+        name:this.selected.name
+      }
+      this.$emit('change', obj)
+      this.$emit('input', obj.id)
+      this.open = false
+    },
+    delSelected(){
+      this.selected = {
+        id:'',
+        name:''
+      }
+    }
+  }
+};
+</script>

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

@@ -26,7 +26,7 @@
           </el-col>
           <el-col :span="24">
             <el-form-item :label="$t('page.business.study.study.leader')+'：'" prop="leader">
-              <SelectDeptUser @change="changeLeader" v-model="infoDialog.formData.leaderObj" />
+              <SelectDeptUser @change="changeLeader" v-model="infoDialog.formData.leader" :name="infoDialog.formData.leaderName"  />
             </el-form-item>
           </el-col>
           <el-col :span="24">
@@ -48,10 +48,8 @@ const EmptyDialogData = {
   name:'',
   sn:'',
   leader:'',
+  leaderName:'',
   reamrk:'',
-  leaderObj:{
-    id:'',name:''
-  }
 }
 export default {
   name: "StudyEdit",
@@ -98,10 +96,6 @@ export default {
         this.$modal.loading()
         study_info({id:row.id}).then(({data}) => {
           this.infoDialog.formData = data
-          this.infoDialog.formData.leaderObj = {
-            id:data.leader,
-            name:data.leaderName
-          }
         }).finally(() => {
           this.$modal.closeLoading()
         })