1,需求
公司要求申请单审批的时候,需要手动添加抄送人,
1.1 需要实现 按照部门分类,部门全选,部门内员工全部选中;
一个部门内所有员工都选中时,部门复选框也要选中;
全选状态下,部门内某一个员工未选中,则整个部门复选框不选中;
1.2 搜索时,如果在部门或者单个员工选中,则搜索出对应的员工时,也要选中,
子组件:html
:close-on-click-overlay="false" class="fullPage">
shape="round" @search="searchBtn">
请输入您要搜索的人名或手机号或部门
有限公司
@click.stop="allSingleChange(item.isChecked,index)">
@click="lettersListToggle(item, index)"> @click="lettersListToggle(item, index)" />
确定选择({{lettersListIdArr.length}})
js:
import headerBar from "@/components/header";
import {
BASE_URL_IMG
} from "@/api/uploadImg";
import {
reqDepartMent,
reqLetter
} from "@/api/staff";
import Loading from "@/components/Loading";
export default {
props: {
isAddPageShow: Boolean
},
data() {
return {
isShow: false,
successFlag: false,
errorFlag: false,
allList: [],
deptData: [],
deptDataChecked: [],
letters: [],
lettersList: [],
activeNames: "1",
BASE_IMG_URL: BASE_URL_IMG,
headImg: require("./img/1.jpg"),
letterPageShow: false,
searchLetter: [],
searchNames: '',
checkedFlag: false,
noFind: false,
lettersListIdArr: []
};
},
created() {
this.searchNames = '';
this.lettersListIdArr = [];
this.lettersList = [];
this.getDept();
},
computed: {
resultIdArr() {
let arr = [];
this.deptData.forEach(depts => {
depts.userList.forEach(list => {
if (list.isChecked) {
arr.push({
id: list.id,
name: list.name
});
}
});
});
return arr;
}
},
methods: {
letterPageBtnFn(){
this.noFind = false;
this.letterPageShow=false;
this.searchNames = '';
this.lettersListIdArr = [];
this.lettersList = [];
},
lettersListToggle(item, index) {
this.$refs.lettersListCheckboxes[index].toggle();
let itemId = item.id;
let checked = this.lettersListIdArr.find(id => itemId == id);
let data = {};
let i = 0;
this.deptData.forEach((depts, depIndex) => {
let isMyChild = false;
depts.userList.forEach(el => {
if(el.id == itemId){
el.isChecked = checked;
isMyChild = true;
}
});
if(isMyChild){
let allChecked = depts.userList.every(list => list.isChecked);
depts.isChecked = allChecked;
data = depts;
i = depIndex;
}
});
this.deptData.splice(i, 1, data);
},
//部门 全选
allSingleChange(checked, index) {
let userList = this.deptData[index].userList;
let idArr = [];
userList.forEach(item => {
item.isChecked = checked;
idArr.push(item.id);
});
this.$set(this.deptData[index], "userList", userList);
},
//部门单选
SingleChecked(itemList, index) {
let userList = this.deptData[index].userList;
let allChecked = userList.every(list => list.isChecked);
this.$set(this.deptData[index], "isChecked", allChecked);
},
//头部返回按钮
goBack() {
//需要带选中的列表
this.searchNames = "";
this.getDept();
this.noFind = false;
this.letterPageShow = false;
this.lettersList = [];
this.lettersListIdArr = [];
this.$emit("closePage");
},
//确定添加
addStaff() {
//直接关闭弹窗
this.letterPageShow = false;
this.$emit("upMaiList", this.resultIdArr);
this.searchNames = "";
this.getDept();
},
//过滤数组
filterCopy(arr) {
let result = {};
let finalResult = [];
for (let i = 0; i < arr.length; i++) {
result[arr[i].id] = arr[i];
}
for (let j in result) {
finalResult.push(result[j]);
}
return finalResult;
},
//打开搜索弹窗
toSearch() {
this.letterPageShow = true;
this.noFind = false;
},
//部门分类
getDept() {
this.isShow = true;
this.successFlag = true;
reqDepartMent()
.then(res => {
if (res.code == 200) {
this.isShow = false;
this.successFlag = false;
this.deptData = res.body;
this.deptData.forEach(item => {
this.$set(item, "isChecked", false);
item.userList.forEach(list => {
this.$set(list, "isChecked", false);
});
});
} else {
this.$toast("数据获取失败");
this.isShow = true;
this.successFlag = false;
this.errorFlag = true;
}
})
.catch(err => {
this.$toast("服务器错误");
this.isShow = true;
this.successFlag = false;
this.errorFlag = true;
});
},
searchBtn() {
this.isShow = true;
this.successFlag = true;
if (!this.searchNames) this.searchNames = null;
reqLetter({
names: this.searchNames
})
.then(res => {
if (res.code == 200) {
this.isShow = false;
this.successFlag = false;
this.letters = res.body;
if (res.body.length <= 0) {
this.noFind = true;
} else {
this.noFind = false;
}
let data = res.body;
this.lettersList = data;
data.forEach(item => {
let arr = this.resultIdArr.filter(el => item.id == el.id);
arr[0] && this.lettersListIdArr.push(arr[0].id);
});
this.letterPageShow = true;
} else {
this.$toast("数据获取失败");
this.isShow = true;
this.successFlag = false;
this.errorFlag = true;
}
})
.catch(err => {
this.$toast("服务器错误");
this.isShow = true;
this.successFlag = false;
this.errorFlag = true;
});
},
isChinese: function (temp) {
var re = /[^\u4E00-\u9FA5]/;
if (re.test(temp)) {
return false;
}
return true;
},
isChar: function (char) {
var reg = /[A-Za-z]/;
if (!reg.test(char)) {
return false;
}
return true;
}
},
components: {
headerBar,
Loading
}
};