Skip to content

H
haoban-3
Commit 97601451 by caoyanzhi
Options

update: 选择成员

parent b89bbd29
Showing with 558 additions and 1 deletions
src/views/salesleads/actCodeManage/components/select-clerk/index.vue 0 → 100644
<template>
<div>
<el-button class="select-clerk-trigger" v-if="!Array.isArray(data) || data.length == 0" @click="showSelectClerk = true">
<i class="iconfont-hb3 icontianjia trigger-icon"></i>
添加成员
</el-button>
<template v-if="Array.isArray(data) && data.length > 0">
<div v-if="multiple" class="multiple-preview">
<dm-sub-title style="margin-left: 4px" title-align="space-between">
<div>{{ `已选成员（${data.length}）` }}</div>
<div class="edit-btns">
<el-button class="del-btn" type="text" @click="onDelAll">清除</el-button>
<el-button class="update-clerk-trigger" type="text" @click="showSelectClerk = true">编辑</el-button>
</div>
</dm-sub-title>
<div class="clerk-list">
<selected-clerk-item v-for="el in data" :key="el.clerkId" :clerk-data="el" @del="onDel" class="clerk-item"></selected-clerk-item>
</div>
</div>
<div v-else class="single-preview">
<selected-clerk-item :clerk-data="data[0]" :show-del="false"></selected-clerk-item>
<el-button type="text" class="update-clerk-trigger" @click="showSelectClerk = true">修改成员</el-button>
</div>
</template>
<select-clerk :visible.sync="showSelectClerk" :multiple="multiple" :max="max" :data="data" @save="onChange"></select-clerk>
</div>
</template>
<script>
import SelectClerk from './select-clerk.vue';
import SelectedClerkItem from './selected-clerk-item.vue';
export default {
name: 'Index',
components: { SelectClerk, SelectedClerkItem },
props: {
// 是否多选
multiple: {
type: Boolean,
default: true
},
// 多选时最多可以选几条数据，默认100条
max: {
type: Number,
default: 100
},
// 选中的数据
data: {
type: Array,
default: () => []
}
},
data() {
return {
showSelectClerk: false
};
},
methods: {
onChange(data) {
this.$emit('change', data);
},
onDel(clerkId) {
const data = JSON.parse(JSON.stringify(this.data));
this.onChange(data.filter(el => el.clerkId != clerkId));
},
onDelAll() {
this.onChange([]);
}
}
};
</script>
<style lang="scss" scoped>
.select-clerk-trigger {
color: #2f54eb;
border-color: #2f54eb;
.trigger-icon {
font-size: 12px;
}
}
.multiple-preview {
padding: 10px 12px 12px;
width: 720px;
max-height: 500px;
overflow-y: auto;
border-radius: 2px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
.edit-btns {
display: flex;
justify-content: flex-start;
align-items: center;
.del-btn {
color: #f5222d;
}
.update-clerk-trigger {
margin-left: 20px;
}
}
.clerk-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
margin-top: 6px;
.clerk-item {
margin: 4px;
}
}
}
.single-preview {
display: flex;
justify-content: flex-start;
align-items: center;
.update-clerk-trigger {
margin-left: 16px;
}
}
</style>
src/views/salesleads/actCodeManage/components/select-clerk/select-clerk.vue 0 → 100644
<template>
<el-dialog :visible="visible" title="选择成员" width="1000px" @close="onCancel">
<div class="select-clerk">
<!-- 选择导购 -->
<div class="clerk-list">
<!-- 筛选条件 -->
<div class="search-bar">
<el-select clearable style="width: 182px"></el-select>
<el-input placeholder="请输入门店名称" prefix-icon="el-icon-search" clearable style="margin-left: 10px; width: 180px"></el-input>
<el-input placeholder="请输入导购名称/手机号/code" prefix-icon="el-icon-search" clearable style="margin-left: 10px; width: 250px"></el-input>
</div>
<!-- 导购列表的表头 -->
<el-table :class="['clerk-list-header', { 'hide-empty': storeList.length > 0 }]">
<el-table-column min-width="67px">
<el-checkbox v-if="multiple" :disabled="canSelectAll()" slot="header"></el-checkbox>
</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>
<!-- 导购列表 -->
<div v-if="storeList.length > 0" class="clerk-list-body">
<div v-for="el in storeList" :key="el.storeId" class="clerk-list-cell">
<!-- 门店信息 -->
<el-table :data="[{}]" class="clerk-store-info" :show-header="false">
<el-table-column min-width="67px">
<el-checkbox v-if="multiple" :disabled="canSelectStore(el)"></el-checkbox>
</el-table-column>
<el-table-column min-width="558px">
<div class="clerk-store-name">{{ el.storeName }}</div>
<div class="clerk-store-code">code：{{ el.storeCode }}</div>
</el-table-column>
</el-table>
<!-- 门店下的导购 -->
<el-table :data="el.clerkList" class="clerk-list-table" :show-header="false">
<el-table-column min-width="67px">
<template slot-scope="{ row }">
<el-checkbox v-if="multiple" @change="onSelectClerk(row)" :checked="selected.some(item => item.clerkId == row.clerkId)" :disabled="row.hmStatus == 1 || row.hmStatus == 2"></el-checkbox>
<el-radio v-else :disabled="row.hmStatus == 1 || row.hmStatus == 2 || row.hmStatus == 3"></el-radio>
</template>
</el-table-column>
<el-table-column label="导购" min-width="230px">
<template slot-scope="{ row }">
<div class="clerk-name">{{ row.clerkName }}</div>
<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">
<div slot-scope="{ row }">{{ formatRemark(row.hmStatus) }}</div>
</el-table-column>
</el-table>
</div>
</div>
</div>
<!-- 选中的导购 -->
<div class="selected-clerk">
<div class="selected-clerk-title">
<span>{{ `已选导购（${selected.length}）` }}</span>
<el-button v-if="multiple" type="text" @click="onDelAll">全部清除</el-button>
</div>
<!-- 选中的导购列表 -->
<div class="selected-clerk-list">
<div v-for="(el, index) in selected" :key="el.clerkId" class="clerk-item">
<div class="clerk-info">
<div class="clerk-name">{{ el.clerkName }}</div>
<div class="clerk-code">{{ el.clerkCode }}</div>
</div>
<div class="del-btn" @click="onDel(index)">
<i class="iconfont-hb3 iconclose1 del-btn-icon"></i>
</div>
</div>
</div>
</div>
</div>
<template slot="footer">
<el-button @click="onCancel">取消</el-button>
<el-button type="primary" @click="onSave">确定</el-button>
</template>
</el-dialog>
</template>
<script>
export default {
name: 'SelectClerk',
props: {
visible: Boolean,
data: {
type: Array,
default: () => []
},
multiple: {
type: Boolean,
default: false
},
max: {
type: Number,
default: 100
}
},
watch: {
data() {
this.selected = JSON.parse(JSON.stringify(this.data));
}
},
data() {
return {
storeList: [
{
storeId: 'store id',
storeName: '门店名称',
storeCode: 'store code',
clerkList: [
{
clerkId: 'clerk id',
clerkName: '导购名称',
clerkCode: 'clerk code',
phoneNumber: '18912341234',
hmStatus: 3 // 1未关联企微 2关联的企微号未配置客户联系功能 3已有单人活码（单人活码不能创建 多人活码可以） 4无单人活码(可以创建)
},
{
clerkId: 'clerk id1',
clerkName: '导购名称',
clerkCode: 'clerk code1',
phoneNumber: '18912341234',
hmStatus: 1 // 1未关联企微 2关联的企微号未配置客户联系功能 3已有单人活码（单人活码不能创建 多人活码可以） 4无单人活码(可以创建)
}
]
},
{
storeId: 'store id1',
storeName: '门店名称',
storeCode: 'store code',
clerkList: [
{
clerkId: 'clerk id11',
clerkName: '导购名称',
clerkCode: 'clerk code',
phoneNumber: '18912341234',
hmStatus: 2 // 1未关联企微 2关联的企微号未配置客户联系功能 3已有单人活码（单人活码不能创建 多人活码可以） 4无单人活码(可以创建)
},
{
clerkId: 'clerk id12',
clerkName: '导购名称',
clerkCode: 'clerk code1',
phoneNumber: '18912341234',
hmStatus: 1 // 1未关联企微 2关联的企微号未配置客户联系功能 3已有单人活码（单人活码不能创建 多人活码可以） 4无单人活码(可以创建)
}
]
}
],
selected: []
};
},
methods: {
// 能否全选所有门店下的导购
canSelectAll() {
return this.storeList.map(el => this.canSelectStore(el)).every(el => el == true);
},
// 能否全选门店下的导购
canSelectStore(store) {
return store.clerkList.filter(item => item.hmStatus != 1 && item.hmStatus != 2).length == 0;
},
// 解析备注
formatRemark(status) {
// 1未关联企微 2关联的企微号未配置客户联系功能 3已有单人活码（单人活码不能创建 多人活码可以） 4无单人活码(可以创建)
let result;
switch (Number(status)) {
case 1:
result = '未关联企微号';
break;
case 2:
result = '关联的企微号未配置客户联系功能';
break;
case 3:
result = '已有单人活码';
break;
// case 4:
// result = '';
// break;
}
return result;
},
// 选择单个导购
onSelectClerk(clerk) {
const index = this.selected.findIndex(el => el.clerkId == clerk.clerkId);
index == -1 ? this.selected.push(clerk) : this.selected.splice(index, 1);
},
onDelAll() {
this.selected.splice(0);
},
onDel(index) {
this.selected.splice(index, 1);
},
onCancel() {
this.$emit('update:visible', false);
},
onSave() {
this.$emit('save', JSON.parse(JSON.stringify(this.selected)));
this.onCancel();
}
}
};
</script>
<style lang="scss" scoped>
.select-clerk {
display: flex;
justify-content: flex-start;
align-items: stretch;
height: 55vh;
.clerk-list,
.selected-clerk {
border-radius: 4px;
border: 1px solid #dcdfe6;
}
.clerk-list {
padding: 10px 16px;
width: 666px;
box-sizing: border-box;
.hide-empty {
>>> .el-table__empty-block {
display: none;
}
}
.search-bar {
font-size: 0;
}
.clerk-list-header {
margin-top: 10px;
>>> .el-table__header th {
height: 32px !important;
background-color: #f2f3f5;
border-bottom: none;
}
}
.clerk-list-body {
height: calc(100% - 74px);
overflow-y: auto;
.clerk-list-cell {
margin-top: 10px;
border: 1px solid #e4e7ed;
border-bottom: none;
>>> .el-table {
&::before {
background-color: #e4e7ed !important;
}
.cell {
padding-left: 10px;
padding-right: 0;
}
}
.clerk-store-info {
background: #f7f8fa;
>>> .el-table__body {
tr,
tr:hover > td.el-table__cell {
background-color: transparent;
}
td {
padding-top: 5px;
padding-bottom: 5px;
border: none;
.cell:empty::before {
content: '';
}
}
}
.clerk-store-name {
font-size: 14px;
font-weight: 400;
color: #303133;
line-height: 20px;
}
.clerk-store-code {
font-size: 12px;
font-weight: 400;
color: #606266;
line-height: 17px;
}
}
.clerk-list-table {
>>> .el-table__row {
+ .el-table__row {
border-top: 1px solid #e4e7ed;
}
td {
padding-top: 6px;
padding-bottom: 6px;
border-bottom: none;
}
}
.clerk-name {
font-size: 14px;
font-weight: 400;
color: #303133;
line-height: 20px;
}
.clerk-code {
font-size: 12px;
font-weight: 400;
color: #606266;
line-height: 17px;
}
}
}
}
}
.selected-clerk {
margin-left: 12px;
width: 274px;
.selected-clerk-title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 12px 16px 16px;
font-size: 14px;
font-weight: 400;
color: #303133;
line-height: 20px;
}
.selected-clerk-list {
max-height: calc(100% - 56px);
overflow-y: auto;
.clerk-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px 8px 16px;
&:hover {
background: #f7f8fa;
}
.clerk-info {
width: calc(100% - 30px);
font-size: 14px;
font-weight: 500;
color: #303133;
line-height: 20px;
.clerk-name {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.clerk-code {
margin-top: 2px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 400;
}
}
.del-btn {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 10px;
cursor: pointer;
&:hover {
background: #e5e6eb;
}
.del-btn-icon {
font-size: 16px;
color: #606266;
}
}
}
}
}
}
</style>
src/views/salesleads/actCodeManage/components/select-clerk/selected-clerk-item.vue 0 → 100644
<template>
<div class="clerk-info-box">
<div class="clerk-info">
{{ clerkData.clerkName }}
<div class="clerk-code">{{ clerkData.clerkCode }}</div>
</div>
<i v-if="showDel" @click="$emit('del', clerkData.clerkId)" class="iconfont-hb3 iconclose1 del-clerk"></i>
</div>
</template>
<script>
export default {
name: 'SelectedClerkItem',
props: {
clerkData: {
type: Object,
default: () => ({})
},
showDel: {
type: Boolean,
default: true
}
}
};
</script>
<style lang="scss" scoped>
.clerk-info-box {
display: flex;
justify-content: center;
align-items: center;
padding: 4px 8px;
height: 51px;
background: #ebeffe;
border-radius: 4px;
box-sizing: border-box;
.clerk-info {
font-size: 14px;
font-weight: 500;
color: #303133;
line-height: 20px;
.clerk-code {
margin-top: 2px;
font-weight: 400;
}
}
.del-clerk {
margin-left: 10px;
flex-shrink: 0;
font-size: 12px;
color: #909399;
cursor: pointer;
&:hover {
color: #2f54eb;
}
}
}
</style>
src/views/salesleads/actCodeManage/staffActCode/index.vue
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
<span class="info-content cur-po"><i class="el-icon-info info-icon"></i>指标说明</span> <span class="info-content cur-po"><i class="el-icon-info info-icon"></i>指标说明</span>
</div> </div>
</dm-sub-title> </dm-sub-title>
<select-clerk @change="onChange"></select-clerk>
<act-code-table></act-code-table> <act-code-table></act-code-table>
</div> </div>
</div> </div>
...@@ -21,14 +22,21 @@ ...@@ -21,14 +22,21 @@
<script> <script>
import GroupList from './views/group-list.vue'; import GroupList from './views/group-list.vue';
import ActCodeTable from './views/act-code-table.vue'; import ActCodeTable from './views/act-code-table.vue';
import SelectClerk from '../components/select-clerk/index.vue';
export default { export default {
name: 'staffActCode', name: 'staffActCode',
components: { components: {
GroupList, GroupList,
ActCodeTable ActCodeTable,
SelectClerk
}, },
data() { data() {
return {}; return {};
},
methods: {
onChange(data) {
console.log(data);
}
} }
}; };
</script> </script>
......
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