Skip to content

H
haoban-3
Commit 75b29454 by caoyanzhi
Options

update: 选中成员

parent 5051100a
Showing with 47 additions and 40 deletions
src/views/salesleads/actCodeManage/components/select-clerk/select-clerk.vue
......@@ -13,12 +13,12 @@
<el-table :class="['clerk-list-header', { 'hide-empty': storeClerkList.length > 0 }]">
<el-table-column min-width="67px">
<template #header>
<el-checkbox v-if="multiple" v-model="selectAll" @change="onSelectAll" :indeterminate="indeterminate" :disabled="storeClerkList.every(el => el.disabled)"></el-checkbox>
<el-checkbox v-if="multiple" v-model="selectAll.selected" @change="onSelectAll" :indeterminate="selectAll.indeterminate" :disabled="selected.disabled"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="导购" min-width="230px"></el-table-column>
<el-table-column label="手机号码" min-width="160px"></el-table-column>
<el-table-column label="备注" min-width="168px"></el-table-column>
<el-table-column label="手机号码" min-width="155px"></el-table-column>
<el-table-column label="备注" min-width="161px"></el-table-column>
</el-table>
<!-- 导购列表 -->
<div v-if="storeClerkList.length > 0" class="clerk-list-body">
......@@ -28,7 +28,7 @@
<el-table-column min-width="67px">
<el-checkbox v-if="multiple" v-model="el.selected" @change="onSelectStore(el)" :indeterminate="el.indeterminate" :disabled="el.disabled"></el-checkbox>
</el-table-column>
<el-table-column min-width="558px">
<el-table-column min-width="546px">
<div class="clerk-store-name">{{ el.storeName }}</div>
<div class="clerk-store-code">code：{{ el.storeCode }}</div>
</el-table-column>
......@@ -47,8 +47,8 @@
<div class="clerk-code">{{ row.clerkCode }}</div>
</template>
</el-table-column>
<el-table-column label="手机号码" prop="phoneNumber" min-width="160px"></el-table-column>
<el-table-column label="备注" min-width="168px">
<el-table-column label="手机号码" prop="phoneNumber" min-width="155px"></el-table-column>
<el-table-column label="备注" min-width="161px">
<div slot-scope="{ row }">{{ formatRemark(row.hmStatus) }}</div>
</el-table-column>
</el-table>
......@@ -113,10 +113,14 @@ export default {
return {
// 门店-导购列表
storeClerkList: [],
// 全选的选中状态
selectAll: false,
// 全选的半选状态
indeterminate: false,
selectAll: {
// 全选的选中状态
selected: false,
// 全选的半选状态
indeterminate: false,
// 全选的禁用状态
disabled: false
},
// 选中的导购
selected: []
};
......@@ -131,26 +135,22 @@ export default {
result.result = Array.isArray(result.result) ? result.result : [];
this.storeClerkList = result.result.map(el => {
el.clerkList = Array.isArray(el.clerkList) ? el.clerkList : [];
// 设置导购的禁用状态和选中状态
el.clerkList = el.clerkList.map(item => {
// this.$set(item, 'disabled', this.multiple ? item.hmStatus == 1 || item.hmStatus == 2 : item.hmStatus == 1 || item.hmStatus == 2 || item.hmStatus == 3);
item.disabled = this.multiple ? item.hmStatus == 1 || item.hmStatus == 2 : item.hmStatus == 1 || item.hmStatus == 2 || item.hmStatus == 3;
item.disabled = false;
// this.$set(
// item,
// 'selected',
// this.data.some(clerk => clerk.clerkId == item.clerkId)
// );
item.selected = this.data.some(clerk => clerk.clerkId == item.clerkId);
return item;
});
this.$set(el, 'disabled', el.clerkList == 0 || el.clerkList.every(el => el.disabled));
// el.disabled = el.clerkList == 0 || el.clerkList.every(el => el.disabled);
this.$set(el, 'selected', el.clerkList.length > 0 && el.clerkList.every(el => el.selected));
// el.selected = el.clerkList.length > 0 && el.clerkList.every(el => el.selected);
this.$set(el, 'indeterminate', !el.selected && el.clerkList.some(el => el.selected));
// el.indeterminate = !el.selected && el.clerkList.some(el => el.selected);
// 设置门店禁用状态、选中状态和半选状态
el.disabled = el.clerkList == 0 || el.clerkList.every(el => el.disabled);
el.selected = el.clerkList.length > 0 && el.clerkList.every(el => el.selected);
el.indeterminate = !el.selected && el.clerkList.some(el => el.selected);
return el;
});
this.selectAll.disabled = this.storeClerkList.every(el => el.disabled);
this.selectAll.selected = this.storeClerkList.every(el => el.selected);
this.selectAll.indeterminate = !this.selectAll.selected && this.storeClerkList.some(el => el.selected || el.indeterminate);
});
},
// 解析备注
......@@ -173,18 +173,28 @@ export default {
}
return result;
},
// 更新全选的复选框样式
updateAllState() {
// 计算全选的选中状态，计算半选的选中状态
this.selectAll.selected = this.storeClerkList.filter(el => !el.disabled).every(el => el.selected);
this.selectAll.indeterminate = !this.selectAll.selected && this.storeClerkList.filter(el => !el.disabled).some(el => el.selected || el.indeterminate);
},
// 更新门店全选的复选框样式
updateStoreState(store) {
// 计算门店的选中状态，计算门店的半选状态
store.selected = store.clerkList.filter(el => !el.disabled).every(el => el.selected);
store.indeterminate = !store.selected && store.clerkList.some(el => el.selected);
},
// 全选所有导购
onSelectAll() {
// 只能全选本页，或者取消本页的全选
this.storeClerkList.forEach(el => {
if (!el.disabled && this.selected.length < this.max) {
el.selected = this.selectAll;
el.selected = this.selectAll.selected;
this.onSelectStore(el, true);
}
});
// 计算全选的选中状态，计算半选的选中状态
this.selectAll = this.storeClerkList.filter(el => !el.disabled).every(el => el.selected);
this.indeterminate = !this.selectAll && this.storeClerkList.filter(el => !el.disabled).some(el => el.selected || el.indeterminate);
this.updateAllState();
},
// 全选门店下的导购
onSelectStore(store, isAll) {
......@@ -194,18 +204,14 @@ export default {
this.onSelectClerk(el, store, true);
}
});
// 计算门店的选中状态，计算门店的半选状态
store.selected = store.clerkList.filter(el => !el.disabled).every(el => el.selected);
store.indeterminate = !store.selected && store.clerkList.some(el => el.selected);
this.updateStoreState(store);
if (!isAll) {
// 计算全选的选中状态，计算半选的选中状态
this.selectAll = this.storeClerkList.filter(el => !el.disabled).every(el => el.selected);
this.indeterminate = !this.selectAll && this.storeClerkList.filter(el => !el.disabled).some(el => el.selected || el.indeterminate);
this.updateAllState();
}
},
// 选择单个导购
onSelectClerk(clerk, store, isAll) {
// 单选时只能选一个导购，不存在全选门店和全选所有的选择框
// 单选时只能选一个导购，不需要更新全选所有的复选框的样式，也不需要更新门店全选的复选框的样式
if (!this.multiple) {
if (this.selected.length > 0) {
this.selected[0].selected = false;
......@@ -214,6 +220,7 @@ export default {
this.selected.push(clerk);
return;
}
// 选择单个导购时
if (clerk.selected) {
// 计算有没有超过上限
......@@ -227,16 +234,13 @@ export default {
this.selected.splice(index, 1);
}
if (!isAll) {
// 计算门店的选中状态，计算门店的半选状态
store.selected = store.clerkList.filter(el => !el.disabled).every(el => el.selected);
store.indeterminate = !store.selected && store.clerkList.some(el => el.selected);
// 计算全选的选中状态，计算半选的选中状态
this.selectAll = this.storeClerkList.filter(el => !el.disabled).every(el => el.selected);
this.indeterminate = !this.selectAll && this.storeClerkList.some(el => el.selected || el.indeterminate);
this.updateStoreState(store);
this.updateAllState();
}
},
onDelAll() {
this.selectAll = false;
this.selectAll.selected = false;
this.selectAll.indeterminate = false;
this.onSelectAll();
},
onDel(index) {
......@@ -248,6 +252,9 @@ export default {
);
},
onCancel() {
this.selectAll.selected = false;
this.selectAll.indeterminate = false;
this.selectAll.disabled = false;
this.selected = [];
this.$emit('update:visible', false);
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment