|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
- <div class="fen_box edit_box">
|
|
|
+ <div class="ent_powerPerson">
|
|
|
<el-dialog
|
|
|
- title="选择分发人员"
|
|
|
+ :title="titleMsg"
|
|
|
:show-close="false"
|
|
|
:visible.sync="centerDialogVisible"
|
|
|
width="890px"
|
|
|
@@ -9,12 +9,16 @@
|
|
|
<div class="content">
|
|
|
<div class="content_left">
|
|
|
<h4>选择</h4>
|
|
|
- <el-input class="sear" v-model="searchVal" placeholder="搜索" prefix-icon="el-icon-search"></el-input>
|
|
|
+ <div class="search">
|
|
|
+ <el-input v-model="searchVal" placeholder="搜索" >
|
|
|
+ <template slot="prepend"><img src="../../../assets/images/search.jpg" alt=""></template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
<div class="allList">
|
|
|
- <div v-for="item in personList.list" :key="item.id">
|
|
|
- <h5><el-checkbox v-model="item.status"></el-checkbox> <span class="noselect" @click="toggle(item)">{{ item.name }}</span> <i class="el-icon-arrow-down"></i></h5>
|
|
|
+ <div v-for="(item,i) in deal_personList" :key="item.id">
|
|
|
+ <h5><i class="seleced" @click="selectGroup(item,i)" :class="item.status"></i> <span class="noselect" @click="toggle(item,i)">{{ item.name }}</span> <i class="el-icon-arrow-down"></i></h5>
|
|
|
<div class="itemList" :class="{toggle:!item.toggle}" >
|
|
|
- <div v-for="val in item.users" :key="val.user_id" @click="chooseUser(val)">
|
|
|
+ <div v-for="val in item.users" :key="val.user_id" @click="chooseUser(val,'single')" :class="{active:val.checked}">
|
|
|
<span class="userName">{{ val.username }}</span> <span> {{ val.phone }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -30,7 +34,7 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <p>已选择{{ personList.checked }}人共购买{{ personList.quota }}人</p>
|
|
|
+ <p v-if="currentIndex == 0">已选择{{ personList.checked }}人共购买{{ personList.quota }}人</p>
|
|
|
<span slot="footer" class="dialog-footer btns">
|
|
|
<button @click="saveDepart" class="save">保存</button>
|
|
|
<button @click="centerDialogVisible = false" class="cancle">取消</button>
|
|
|
@@ -41,7 +45,7 @@
|
|
|
|
|
|
|
|
|
<script>
|
|
|
-import { user_sjPersonListInter } from "@/api/api";
|
|
|
+import { user_sjPersonListInter,add_sjPersonInter,user_recordpersonListInter,add_recordpersonListInter } from "@/api/api";
|
|
|
export default {
|
|
|
data(){
|
|
|
return{
|
|
|
@@ -49,43 +53,172 @@ export default {
|
|
|
searchVal:'',
|
|
|
personList:{},
|
|
|
selectedList:[],
|
|
|
- checked:false
|
|
|
+ checked:false,
|
|
|
+ titleMsg:'',
|
|
|
+ currentIndex:'0'
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
- this.getData();
|
|
|
+ // this.$watch('searchVal', this.debounce((newValue, oldValue) => {
|
|
|
+ this.getData()
|
|
|
+ // }, 500))
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ deal_personList:function(){
|
|
|
+ let arr = JSON.parse(JSON.stringify(this.personList));
|
|
|
+ arr.list && arr.list.forEach((items,x) =>{
|
|
|
+ let list = [];
|
|
|
+ items.users.forEach(item =>{
|
|
|
+ this.selectedList.forEach((val,i) =>{
|
|
|
+ if(item.checked){ return; }
|
|
|
+ if(item.user_id == val.user_id ){
|
|
|
+ item.checked = true;
|
|
|
+ }else{
|
|
|
+ item.checked = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(item.checked){
|
|
|
+ list.push("1")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(list.length === items.users.length){
|
|
|
+ items.status = "selectAll";
|
|
|
+ }else if(list.length === 0){
|
|
|
+ items.status = "zero"
|
|
|
+ }else{
|
|
|
+ items.status = "selectHalf";
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return arr.list;
|
|
|
+ }
|
|
|
},
|
|
|
methods:{
|
|
|
+ debounce (fn, delay) {
|
|
|
+ let timer = null
|
|
|
+ return function () {
|
|
|
+ let arg = arguments
|
|
|
+ clearTimeout(timer)
|
|
|
+ timer = setTimeout(() => {
|
|
|
+ fn.apply(this, arg)
|
|
|
+ }, delay)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取人员列表
|
|
|
getData(){
|
|
|
- user_sjPersonListInter({name:this.searchVal}).then(res =>{
|
|
|
- // console.log(res.data);
|
|
|
+ if(this.$parent.currentIndex == 0){
|
|
|
+ user_sjPersonListInter({name:this.searchVal}).then(res =>{
|
|
|
+ res.data.list.forEach(v =>{
|
|
|
+ v.toggle = true;
|
|
|
+ v.status = false;
|
|
|
+ })
|
|
|
+ this.personList = res.data;
|
|
|
+ this.selectedList = res.data.checkedList;
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ user_recordpersonListInter({name:this.searchVal}).then(res =>{
|
|
|
res.data.list.forEach(v =>{
|
|
|
v.toggle = true;
|
|
|
v.status = false;
|
|
|
})
|
|
|
this.personList = res.data;
|
|
|
this.selectedList = res.data.checkedList;
|
|
|
- })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //判断添加人员是否重复
|
|
|
+ judgeHeavy(val){
|
|
|
+ let arr = [];
|
|
|
+ val.users ? arr = val.users : arr.push(val);
|
|
|
+ let test = arr.reduce((pre,cur) => {
|
|
|
+ if(this.selectedList.every(item=>item.user_id!==cur.user_id)){
|
|
|
+ pre.push(cur)
|
|
|
+ }
|
|
|
+ return pre;
|
|
|
+ },[]);
|
|
|
+ return test;
|
|
|
},
|
|
|
//选择人员
|
|
|
- chooseUser(val){
|
|
|
- this.selectedList.push(val)
|
|
|
+ chooseUser(val,status){
|
|
|
+ if(status === 'single'){
|
|
|
+ if(this.currentIndex == 0){
|
|
|
+ if(this.selectedList.length >= this.personList.quota){
|
|
|
+ this.$message({ message: '大于购买人数，不可继续添加',type: 'warning'});
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let newArr = this.selectedList.filter(x => {
|
|
|
+ return val.user_id == x.user_id
|
|
|
+ })
|
|
|
+ if(newArr.length>0){
|
|
|
+ this.$message({ message: '该人员已添加',type: 'warning'});
|
|
|
+ return;
|
|
|
+ }else{
|
|
|
+ this.selectedList.push(val);
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.selectedList = this.selectedList.concat(val);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectGroup(val,i){
|
|
|
+ // val.status = true;
|
|
|
+ let newVal = this.judgeHeavy(val);
|
|
|
+ let newSelect = this.selectedList.concat(newVal);
|
|
|
+ if(this.currentIndex == 0){
|
|
|
+ if(val.status == "selectAll"){
|
|
|
+ this.$message({ message: '该人员已添加',type: 'warning'});
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.selectedList.length >= this.personList.quota){
|
|
|
+ this.$message({ message: '大于购买人数，不可继续添加',type: 'warning'});
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if(newSelect.length > this.personList.quota){
|
|
|
+ if(newVal.length>1){
|
|
|
+ this.$message({ message: '大于可添加的人数,请单个添加',type: 'warning'});
|
|
|
+ }else{
|
|
|
+ this.$message({ message: '大于购买人数，不可继续添加',type: 'warning'});
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.personList.list.splice(i,1,val)
|
|
|
+ this.chooseUser(newVal)
|
|
|
},
|
|
|
//删除人员
|
|
|
delChooseUser(i){
|
|
|
this.selectedList.splice(i,1);
|
|
|
},
|
|
|
- saveDepart(){},
|
|
|
- toggle(val){
|
|
|
+ //添加人员
|
|
|
+ saveDepart(){
|
|
|
+ let delId = '';
|
|
|
+ this.selectedList.forEach((v,i) =>{
|
|
|
+ if(v.user_id){
|
|
|
+ i === 0 ? delId += `${v.user_id}` : delId += `,${v.user_id}`
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let arr = [];
|
|
|
+ this.selectedList.forEach(v => {
|
|
|
+ arr.push(v.username);
|
|
|
+ })
|
|
|
+ let i = this.$parent.cellIndex;
|
|
|
+ if (arr.length) {
|
|
|
+ this.$parent.tableData[i].persons = String(arr.join(",").replace(/,/g, "、"));
|
|
|
+ }
|
|
|
+ this.centerDialogVisible = false;
|
|
|
+ },
|
|
|
+ toggle(val,i){
|
|
|
val.toggle = !val.toggle;
|
|
|
+ this.personList.list.splice(i,1,val)
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
- .fen_box{
|
|
|
+<style lang="scss">
|
|
|
+ .ent_powerPerson{
|
|
|
.el-dialog__header{
|
|
|
font-size: 26px;
|
|
|
color: $weight_color;
|
|
|
@@ -108,10 +241,31 @@ export default {
|
|
|
font-size: 14px;
|
|
|
color: $weight_color;
|
|
|
}
|
|
|
- .sear {
|
|
|
+ .search{
|
|
|
+ margin-left: 20px;
|
|
|
width: 360px;
|
|
|
- height: 40px;
|
|
|
- margin: 0 20px 0 20px!important;
|
|
|
+ .el-input-group{
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid $border_color;
|
|
|
+ border-radius: 18px;
|
|
|
+ .el-input-group__prepend{
|
|
|
+ border-radius: 18px 0 0 18px;
|
|
|
+ background: #fff;
|
|
|
+ border:none;
|
|
|
+ padding: 0 12px;
|
|
|
+ img{
|
|
|
+ width: 24px;
|
|
|
+ margin-top: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-input__inner{
|
|
|
+ border: none;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 0px 18px 18px 0;
|
|
|
+ padding: 0 4px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.allList{
|
|
|
flex: 1;
|
|
|
@@ -123,28 +277,34 @@ export default {
|
|
|
box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
h5{
|
|
|
- margin-top: 10px;
|
|
|
+ margin-top: 16px;
|
|
|
color: $weight_color;
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
>span{
|
|
|
flex: 1;
|
|
|
margin-left: 10px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- align-items: center;
|
|
|
- .el-checkbox__inner,.el-checkbox__input.is-checked .el-checkbox__inner{
|
|
|
+ .seleced{
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
border-radius: 50%;
|
|
|
- font-size: 30px;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
- .el-checkbox__input.is-checked .el-checkbox__inner::after {
|
|
|
- transform: rotate(45deg) scaleY(1.4) translate(5px, 0px);
|
|
|
+ .selectAll{
|
|
|
+ border:none;
|
|
|
+ background: url(../../../assets/images/checked.png) no-repeat center center;
|
|
|
+ background-size: 20px;
|
|
|
}
|
|
|
- .el-checkbox__input.is-checked + .el-checkbox__label{
|
|
|
- color: $weight_color;
|
|
|
+ .selectHalf{
|
|
|
+ border:none;
|
|
|
+ background: url(../../../assets/images/half.png) no-repeat center center;
|
|
|
+ background-size: 20px;
|
|
|
}
|
|
|
- i{
|
|
|
+ .el-icon-arrow-down{
|
|
|
font-size: 16px;
|
|
|
color: #aaa;
|
|
|
}
|
|
|
@@ -152,7 +312,7 @@ export default {
|
|
|
.itemList{
|
|
|
transition: all 0.5s ;
|
|
|
opacity: 1;
|
|
|
- max-height:400px;
|
|
|
+ max-height:4000px;
|
|
|
>div{
|
|
|
cursor: pointer;
|
|
|
color: $normal_color;
|
xgwangman