feat: [试验管理] [邀请成员] 邀请成员功能

src/api/business/study/studySubjectUser.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function studySubjectUser_getListByStudySubjectId(query) {
+  return request({
+    url: '/system/business/studySubjectUser/getListByStudySubjectId',
+    method: 'get',
+    params: query
+  })
+}
+
+export function studySubjectUser_save(data) {
+  return request({
+    url: '/system/business/studySubjectUser/save',
+    method: 'post',
+    data: data
+  })
+}

src/assets/styles/ruoyi.scss

@@ -314,6 +314,7 @@
       flex-direction: row;
       align-items: center;
       padding: 5px 10px;
+      margin-bottom: 10px;
       .select-user-selected-name{
         flex-shrink: 0;
       }
@@ -326,4 +327,9 @@
       }
     }
   }
+}
+.select-dept-user-check-radio-box{
+  .el-checkbox__label{
+    padding-right: 100px;
+  }
 }

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

@@ -14,15 +14,14 @@
           class="filter-tree"
           :data="list"
           :props="defaultProps"
-          :default-expand-all="selected.id==''"
+          :default-expand-all="true"
           :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>
+            <el-radio :ref="'radio'+data.id" v-if="data.type===7" v-model="selected.id" :label="data.id" @change="handleChange(data)" class="select-dept-user-check-radio-box">{{ data.name }}</el-radio>
             <span v-else>{{ data.name }}</span>
           </span>
         </el-tree>
@@ -77,10 +76,11 @@ export default {
     };
   },
   mounted() {
-    this.getList()
   },
   methods: {
     show(id,name){
+      this.getList()
+
       this.selected.id = id ?((id+'').indexOf('u_')>-1? id:('u_'+id)):''
       this.selected.name=name || ''
       this.open = true
@@ -119,7 +119,6 @@ export default {
         id:this.selected && this.selected.id?this.selected.id.replace('u_',''):'',
         name:this.selected.name
       }
-      debugger
       this.$emit('change', obj)
       this.$emit('input', obj.id)
       this.open = false

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

@@ -0,0 +1,159 @@
+<!-- 选择部门 -->
+
+<template>
+  <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :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="true"
+          :default-expanded-keys="selected.length===0 ? []:selectedIds"
+          :filter-node-method="filterNode"
+          ref="tree"
+          node-key="id"
+          >
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <el-checkbox :ref="'checkbox'+data.id" v-if="data.type===7" :checked="isCheck(data.id)" @change="handleChange(data)" class="select-dept-user-check-radio-box">{{ data.name }}</el-checkbox>
+            <!-- <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.length>0">
+          <div class="select-user-selected-item" v-for="(item,index) in selected" :key="index">
+            <div class="select-user-selected-name">{{item.name}}</div>
+            <div class="select-user-selected-del"><i class="el-icon-delete" @click="delSelected(item)"></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: {
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  data() {
+    return {
+      open:false,
+
+      selected:[],
+      selectedIds:[],
+
+      listData: [],
+      list: [],
+      filterText:'',
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    };
+  },
+  mounted() {
+    
+  },
+  methods: {
+    show(list){
+      this.getList()
+      this.selected = []
+      this.selectedIds = []
+      _.forEach(list,(item)=>{
+        let id = item.id ?((item.id+'').indexOf('u_')>-1? item.id:('u_'+item.id)):''
+        this.selectedIds.push(id)
+        this.selected.push({
+          id : id,
+          name:item.name
+        })
+      })
+      this.open = true
+      this.filterText = ''
+    },
+    isCheck(id){
+      return this.selectedIds.indexOf(id)>-1
+    },
+    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){
+        let isSelect = this.$refs['checkbox'+data.id].$el.querySelector('input').checked
+        if(!isSelect){
+          //之前是否已选中
+          let index = _.findIndex(this.selected,(item)=>{
+            return item.id===data.id
+          })
+          this.selected.splice(index,1)
+          this.selectedIds.splice(index,1)
+        }else{
+          this.selected.push({id:data.id,name:data.name})
+          this.selectedIds.push(data.id)
+        }
+        // this.$refs['checkbox'+data.id].$el.querySelector('input').checked = !isSelect
+      }
+    },
+    // 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 backList= []
+      for(let i=0;i<this.selected.length;i++){
+        backList.push({
+          id:this.selected[i] && this.selected[i].id?this.selected[i].id.replace('u_',''):'',
+          name:this.selected[i].name
+        })
+      }
+      this.$emit('change', backList)
+      this.open = false
+    },
+    delSelected(row){
+      // let index = _.findIndex(this.selected,(item)=>{
+      //   return item.id===row.id
+      // })
+      // this.selected.splice(index,1)
+      // this.selectedIds.splice(index,1)
+      this.$refs['checkbox'+row.id].$el.querySelector('input').checked = false
+      this.$refs['checkbox'+row.id].$el.querySelector('input').dispatchEvent(new Event('change'));
+      // this.$refs['checkbox'+row.id].$el.querySelector('input').checked = false
+    }
+  }
+};
+</script>

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

@@ -50,6 +50,7 @@
     </el-dialog>
 
     <SelectDeptUserDialog ref="selectSubjectDeptUserDialog" @change="changeSubject" />
+    <SelectDeptUserMultipleDialog ref="selectSubjectDeptUserMultipleDialog" @change="changeMember" />
   </div>
 </template>
 
@@ -59,7 +60,12 @@ import {
   studySubject_getAllListByStudyId,
   studySubject_save
 } from '@/api/business/study/studySubject'
+import {
+  studySubjectUser_getListByStudySubjectId,
+  studySubjectUser_save
+} from '@/api/business/study/studySubjectUser'
 import SelectDeptUserDialog from '../../comps/select/SelectDeptUserDialog.vue';
+import SelectDeptUserMultipleDialog from '../../comps/select/SelectDeptUserMultipleDialog.vue';
 export default {
   name: 'StudySubject',
   props: {
@@ -78,7 +84,7 @@ export default {
       }
     },
   },
-  components: {SelectDeptUserDialog},
+  components: {SelectDeptUserDialog,SelectDeptUserMultipleDialog},
   computed: {},
   filters: {},
   data() {
@@ -94,7 +100,9 @@ export default {
           leader:'',
           leaderName:'',
         }
-      }
+      },
+
+      memberSubject:{}
     }
   },
   created() {},
@@ -147,13 +155,43 @@ export default {
       let index = _.findIndex(this.infoDialog.list,(item)=>{
         return item.deptId===this.infoDialog.subject.deptId
       })
-
       if(index>-1){
         this.infoDialog.list.splice(index,1,this.infoDialog.subject)
       }
     },
     yq(item){
-
+      this.memberSubject = item
+      studySubjectUser_getListByStudySubjectId({studySubjectId:item.id}).then(response => {
+        let memberList = []
+        for(let i=0;i<response.data.length;i++){
+          memberList.push({
+            id:response.data[i].userId,
+            name:response.data[i].userName,
+          })
+        }
+        this.$refs.selectSubjectDeptUserMultipleDialog.show(memberList)
+      }).finally(()=>{
+      });
+    },
+    changeMember(val){
+      let postList = []
+      if(val.length>0){
+        for(let i=0;i<val.length;i++){
+          let item = val[i]
+          postList.push({
+            userId:item.id,
+            userName:item.name,
+          })
+        }
+      }
+      this.$modal.loading()
+      studySubjectUser_save({
+        studySubjectId:this.memberSubject.id,
+        subjectUserList:postList
+      }).then(() => {
+      }).finally(() => {
+        this.$modal.closeLoading()
+      })
     },
   }
 }