You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
3.4 KiB
Vue
124 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog :close-on-click-modal="false" append-to-body v-dialogDrag :title="title" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
|
|
<div style="text-align: center">
|
|
<el-transfer style="text-align: left; display: inline-block" v-model="dataList" filterable :left-default-audited="leftData" :right-default-audited="rightData" :render-content="renderFunc" :titles="['会员列表', '适用会员']" :button-texts="['移除', '添加']" :format="{
|
|
noAudited: '${total}',
|
|
hasAudited: '${audited}/${total}'
|
|
}" @change="handleChange" :data="data">
|
|
</el-transfer>
|
|
</div>
|
|
<div class="transferFooter">
|
|
<el-button size="mini" type="primary" plain @click="handleClose">取 消</el-button>
|
|
<el-button size="mini" type="primary" @click="confirm">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { storeMemberpages } from "@/api/storeManage.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
opneEditVipListDialog: false,
|
|
dialogVisible: false, //弹窗开关
|
|
dataList: [],
|
|
data: [],
|
|
title: "会员列表",
|
|
leftData: [],
|
|
rightData: [],
|
|
storeList: [],
|
|
backMemberList: [],
|
|
renderFunc(h, option) {
|
|
return (
|
|
<span>
|
|
{option.phone} - {option.memberName}
|
|
</span>
|
|
);
|
|
},
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
//组件传值
|
|
show(form) {
|
|
this.dataList = [];
|
|
this.form = { ...form };
|
|
if (form.promotionMemberLists) {
|
|
let arr = [];
|
|
form.promotionMemberLists.forEach((item) => {
|
|
arr.push(item.mobilePhone);
|
|
});
|
|
this.dataList = arr;
|
|
}
|
|
this.dialogVisible = true;
|
|
this.getData();
|
|
},
|
|
//确定返回方法
|
|
confirm() {
|
|
this.dialogVisible = false;
|
|
this.$emit("membersuitData", this.backMemberList);
|
|
},
|
|
//关闭弹窗前的回调方法
|
|
handleClose() {
|
|
this.form = {};
|
|
this.dataList = [];
|
|
this.dialogVisible = false;
|
|
},
|
|
//适用对象 - 会员列表
|
|
handleChange(value, direction, movedKeys) {
|
|
console.log(value);
|
|
let arr = [];
|
|
if (value.length > 0) {
|
|
this.data.forEach((item) => {
|
|
let arrs = {};
|
|
value.forEach((items) => {
|
|
if (items == item.mobilePhone) {
|
|
arrs = item;
|
|
}
|
|
});
|
|
if (arrs != {}) {
|
|
arr.push(arrs);
|
|
}
|
|
});
|
|
this.backMemberList = arr;
|
|
} else {
|
|
this.backMemberList = [];
|
|
}
|
|
console.log(this.backMemberList);
|
|
},
|
|
//获取数据
|
|
async getData() {
|
|
storeMemberpages({ id: "" }).then((res) => {
|
|
var reg = /^(\d{3})\d{4}(\d{4})$/;
|
|
res.data.forEach((item) => {
|
|
item.key = item.mobilePhone;
|
|
item.phone = item.mobilePhone.replace(reg, "$1****$2");
|
|
});
|
|
this.data = res.data;
|
|
});
|
|
},
|
|
},
|
|
mounted() {},
|
|
created() {},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.transferFooter {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
.el-transfer-panel__body {
|
|
height: 55vh !important;
|
|
}
|
|
.el-transfer-panel__list,
|
|
.el-transfer-panel__list.is-filterable {
|
|
height: 45vh;
|
|
max-height: 50vh !important;
|
|
}
|
|
</style>
|