<template> <div class="changePeople-wrapper flex"> <div class="changePeople-left"> <PeopleTable ref="table" :selectNameList.sync="selectNameList" :disabled="disabled" @selectOne="selectOne" @selectAll="selectAll" /> </div> <div class="middle flex"> <div>>></div> </div> <!-- right --> <div class="changePeople-right flex"> <div class="people-card flex zzz"> <div class="item flex" v-for="item in selectNameList" :key="item.personId" > <div>{{ item.personName }}</div> <div class="close" @click="deleteName(item.personId)">x</div> </div> </div> <div class="bottom-text">已选择{{selectNameList.length}}人</div> </div> </div> </template> <script> import PeopleTable from "./PeopleTable"; export default { name: "index", props: { disabled:{ type:Boolean, } }, components:{ PeopleTable }, data(){ return{ selectNameList: [] } }, watch: { selectNameList() { let json; if (this.selectNameList.length == 0) { json = null; } if (Array.isArray(this.selectNameList)) { json = this.selectNameList.map((item) => { return { personId: item.personId, }; }); } else { json = this.selectNameList; } this.$emit("getPeopleList", json); }, }, methods:{ changeNameList(jsonSelectNameList) { if (jsonSelectNameList) { this.selectNameList = jsonSelectNameList.map((item) => { return { personId: item.personId, personName: item.personName, }; }); } else { this.selectNameList = []; } this.$refs.table.getPersonInfo(); }, selectOne(all, row){ this.addName(row); }, selectAll(){ if (allSelect) { all.forEach((item) => { const index = this.selectNameList.findIndex((iten) => { return iten.personId == item.personId; }); if (index < 0) { this.selectNameList.push(item); } }); } else { all.forEach((item) => { this.deleteName(item.userId); }); } }, addName(row) { const index = this.selectNameList.findIndex((item) => { return item.personId == row.personId; }); if (index >= 0) { this.selectNameList.splice(index, 1); } else { this.selectNameList.push(row); } }, deleteName(personId) { if(this.disabled) return; const index = this.selectNameList.findIndex((item) => { return item.personId == personId; }); if (index >= 0) { this.selectNameList.splice(index, 1); this.$refs.table.toggleSelection(personId); } }, selectAll(all, allSelect) { if (allSelect) { all.forEach((item) => { const index = this.selectNameList.findIndex((iten) => { return iten.personId == item.personId; }); if (index < 0) { this.selectNameList.push(item); } }); } else { all.forEach((item) => { this.deleteName(item.personId); }); } }, } } </script> <style scoped lang="scss"> .flex{ justify-content: left; } .changePeople-wrapper { width: 100%; height: 400px; // background-color: red; margin-top: 10px; justify-content: space-between; & > div { flex-direction: column; } .changePeople-left, .changePeople-right { width: 410px; height: 100%; border: 1px solid #e5e6eb; } .middle { align-items: center; justify-content: center; div { color: #1890ff; font-weight: 2000; } } .changePeople-left { padding: 14px 20px 11px 16px; flex-direction: column; .top-search { margin-bottom: 12px; justify-content: space-between; } .left-middle-table { flex: 1; // background: red; } .bottom-text { padding-top: 10px; font-size: 12px; height: 20px; line-height: 20px; text-align: right; color: #1890ff; } } .changePeople-right { flex-direction: column; padding-top: 14px; height: 100%; .people-card { flex-wrap: wrap; align-content: flex-start; width: 100%; flex: 1; height: 0; padding-left: 11px; overflow-y: scroll; &::-webkit-scrollbar { // display: none; /* Chrome Safari */ } .item { width: 70px; height: 30px; line-height: 30px; padding-left: 10px; padding-right: 5px; margin-right: 10px; color: #3d3d3d; box-sizing: border-box; margin-bottom: 10px; box-sizing: border-box; border: 1px solid #a3d3ff; border-radius: 3px; font-size: 12px; position: relative; justify-content: space-between; } .close { cursor: pointer; } } .bottom-text { // padding-top: 10px; padding-right: 10px; font-size: 12px; height: 20px; line-height: 20px; text-align: right; color: #1890ff; } } } </style>