feat: [系统组件] 选择人员的组件修改

src/assets/styles/ruoyi.scss

@@ -298,3 +298,32 @@
   }
 }
 
+.select-user-left {
+  padding: 0 20px;
+  border-right: 1px solid #eee;
+}
+
+.select-user-right {
+  padding: 0 20px;
+  .select-user-selected{
+    margin-top: 10px;
+    .select-user-selected-item{
+      background: #eee;
+      border-radius: 20px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 5px 10px;
+      .select-user-selected-name{
+        flex-shrink: 0;
+      }
+      .select-user-selected-del{
+        flex-grow: 1;
+        text-align: right;
+        i{
+          cursor: pointer; 
+        }
+      }
+    }
+  }
+}

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

@@ -2,30 +2,44 @@
 
 <template>
   <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-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==''"
-        :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>
+          <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>
@@ -42,18 +56,23 @@ export default {
   components: {},
   props: {
     value: {
-      type: [Number, String , Array],
-      default: ''
+      type: Object,
+      default(){
+        return {
+          id:'',
+          name:''
+        }
+      }
     },
   },
   watch: {
     value: {
       immediate: true,
       handler(v) {
-        this.selected = v ?((v+'').indexOf('u_')>-1? v:('u_'+v)):''
-        this.selectedObj = {
-          id:this.selected,
-          name:this.getName(this.selected)
+        let id = v && v.id ?((v.id+'').indexOf('u_')>-1? v.id:('u_'+v.id)):''
+        this.selected = {
+          id:id,
+          name:v.name
         }
       }
     },
@@ -65,8 +84,7 @@ export default {
     return {
       open:false,
 
-      selected: '',
-      selectedObj :{
+      selected:{
         id:'',
         name:''
       },
@@ -102,23 +120,35 @@ export default {
     },
     handleChange(data) {
       if(data && data.type===7){
-        this.selected = data.id
-        this.selectedObj = data
-      }
-    },
-    getName(id){
-      let name = ''
-      let arr =  _.filter(this.listData, (o)=> { return o.id===id })
-      if(arr && arr.length>0){
-        name = arr[0].name
+        this.selected = {
+          id:data.id,
+          name:data.name
+        }
       }
-      return 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(){
-      this.$emit('change', this.selectedObj)
-      this.$emit('input', this.selectedObj && this.selectedObj.id?this.selectedObj.id.replace('u_',''):'')
+      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)
       this.open = false
     },
+    delSelected(){
+      this.selected = {
+        id:'',
+        name:''
+      }
+    }
   }
 };
-</script>
+</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.leader" />
+              <SelectDeptUser @change="changeLeader" v-model="infoDialog.formData.leaderObj" />
             </el-form-item>
           </el-col>
           <el-col :span="24">
@@ -48,7 +48,10 @@ const EmptyDialogData = {
   name:'',
   sn:'',
   leader:'',
-  reamrk:''
+  reamrk:'',
+  leaderObj:{
+    id:'',name:''
+  }
 }
 export default {
   name: "StudyEdit",
@@ -84,6 +87,8 @@ export default {
   },
   methods: {
     changeLeader(val){
+      this.infoDialog.formData.leader = val.id
+      this.infoDialog.formData.leaderName = val.name
       this.$refs.infoDialogForm.clearValidate('leader')
     },
     edit(row) {
@@ -93,6 +98,10 @@ 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()
         })