vue +vant 实现复选框全选和单选

1,需求

公司要求申请单审批的时候，需要手动添加抄送人，

1.1 需要实现按照部门分类，部门全选，部门内员工全部选中；

一个部门内所有员工都选中时，部门复选框也要选中；

全选状态下，部门内某一个员工未选中，则整个部门复选框不选中；

1.2 搜索时，如果在部门或者单个员工选中，则搜索出对应的员工时，也要选中，

子组件：html

<div>

<van-popup v-model="isAddPageShow" position="right" :overlay="true" :lock-scroll="true"

:close-on-click-overlay="false" class="fullPage">

<van-nav-bar title="选择抄送人" :fixed="true" left-arrow :z-index="300" @click-left="goBack"></van-nav-bar>

</div>

<van-search v-if="letterPageShow" v-model="searchNames" placeholder="输入您要找的人名、手机号或部门" show-action

shape="round" @search="searchBtn">

</van-search>

<van-icon name="search" size="20px" />

<span>请输入您要搜索的人名或手机号或部门</span>

</p>

</div>

<div>

<van-checkbox :name="item" v-model="item.isChecked" style="background-color: #f2f6fc"

@click.stop="allSingleChange(item.isChecked,index)"></van-checkbox>

</div>

<van-collapse class="department_title" v-model="activeNames" accordion>

<van-collapse-item :name="index" :title="item.deptName">

<van-checkbox :name="itemList" v-model="itemList.isChecked"

@click.stop="SingleChecked(itemList, index)"></van-checkbox>

<span>{{itemList.name}}</span>

<a :href="'tel:'+itemList.loginName">{{itemList.loginName}}</a>

</div>

</van-collapse-item>

</van-collapse>

</div>

<van-checkbox-group v-model="lettersListIdArr">

<van-cell-group>

<van-cell v-for="(item, index) in lettersList" :key="index"

@click="lettersListToggle(item, index)">

<van-checkbox :name="item.id" ref="lettersListCheckboxes"

@click="lettersListToggle(item, index)" />

<p>

<a :href="'tel:'+item.loginName">{{item.loginName}}</a>

</p>

<span>有限公司—{{item.deptName}}</span>

</div>

</van-cell>

</van-cell-group>

</van-checkbox-group>

</div>

<div class="noFind" v-if="noFind">找不到该联系人</div>

</div>

</section>

确定选择({{lettersListIdArr.length}})</div>

<div v-else class="totalBtn" @click="addStaff">确定添加({{resultIdArr.length}})</div>

</van-popup>

</div>

</template>

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,

}

};

</script>

vue +vant 实现复选框 全选和单选

猜你喜欢

vue +vant 实现复选框全选和单选