文件

676 行
30 KiB
HTML
可执行文件

<!--[1.8.32]-->
<style>
.small-dialog-content {
margin-left: calc(10vw + 120px);
margin-top: 15vh;
}
.img {
max-height: 32px;
max-width: 100%;
cursor: pointer;
}
.mini-dialog-content {
width: 30vw;
min-width: 300px;
top: 0;
left: 80px;
bottom: 0;
right: 0;
margin: auto;
}
</style>
<div id="GuideApp" v-cloak>
<el-form size="small" :inline="true">
<el-form-item label="是否开启导购员">
<el-switch @change="changeStatus"
:disabled="!operate.setLineOpenState"
v-model="openState"
inactive-value="2"
active-value="1">
</el-switch>
</el-form-item>
<el-form-item label="是否开启线上导购员">
<el-switch @change="changeOnlineStatus"
:disabled="!operate.changeOnlineStatus"
v-model="guide_online_state"
inactive-value="2"
active-value="1">
</el-switch>
</el-form-item>
<br>
<el-form-item>
<el-input placeholder="导购员名称/手机号"
style="width: 200px"
v-model="searchText"
clearable
@keydown.enter.exact.native.prevent="handleCurrentChange(1)"></el-input>
</el-form-item>
<el-form-item>
<date-picker-range :date-time.sync="add_time"></date-picker-range>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleCurrentChange(1)" size="small">搜索</el-button>
<el-button type="primary" plain
v-if="storeAuth.addguide==1 && operate.create"
@click="addGuide">添加导购员
</el-button>
</el-form-item>
</el-form>
<div style="max-width: calc(100vw - 208px);">
<el-table border :data="guideList" style="width: 100%;" :max-height="tableHeight"
size="small" :header-cell-style="{background:'#F5F7FA',color:'#606266'}"
max-height="500">
<el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
<el-table-column align="center" prop="storetag" label="所属门店" min-width="80"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="jobnum" label="工号" min-width="60"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="guidename" min-width="100" label="导购员名称"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="phone" label="手机号" min-width="100"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="address" label="地址" show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="entrytime" label="入职日期" min-width="80"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="status_name" label="状态" min-width="60"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="240px">
<template slot-scope="scope">
<el-button @click.native.prevent="onlineGuide(scope.row.id)"
v-if="operate.setOnlineGuide"
type="text" size="mini">线上导购
</el-button>
<el-button @click.native.prevent="editGuide(scope.row)"
v-if="operate.edit"
type="text" size="mini">编辑
</el-button>
<el-button @click.native.prevent="setCommission(scope.row)"
v-if="operate.setCommission"
type="text" size="mini">佣金
</el-button>
<el-button @click.native.prevent="details(scope.row.id)"
v-if="operate.details"
type="text" size="mini">销售
</el-button>
<el-button @click.native.prevent="vip(scope.row.id)"
v-if="operate.vip && scope.row.vip_number>0"
type="text" size="mini">会员
</el-button>
<el-button @click.native.prevent="delGuide(scope.row.id)"
v-if="operate.delete"
style="color: #999" type="text"
size="mini">删除
</el-button>
</template>
</el-table-column>
<div slot="empty" v-if="loading"><i class="el-icon-loading"></i></div>
<div slot="empty" v-else>暂无数据</div>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="currentLen">
</el-pagination>
</div>
<el-dialog title="绑定线上用户"
width="calc(80vw - 80px)"
height="calc(80vh - 80px)"
:visible.sync="showOnlineUser"
:close-on-click-modal="false"
custom-class="small-dialog-content"
:append-to-body="true">
<div>
<el-input placeholder="用户昵称"
style="width: 200px"
size="small"
v-model="online_name"
clearable
@input.native.prevent="inputSearchTextOnline(online_name)"
@keydown.enter.exact.native.prevent="getOnlineUser"></el-input>
<el-button type="primary" plain @click="searchOnlineUser" size="small">搜索</el-button>
</div>
<div style="max-width: calc(100vw - 208px);margin-top: 10px">
<el-table border :data="onlineUserList" style="width: 100%;" :max-height="tableHeight"
size="small" :header-cell-style="{background:'#F5F7FA',color:'#606266'}"
max-height="500">
<el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
<el-table-column align="center" prop="avatar" label="头像" min-width="60">
<template slot-scope="scope">
<img class="img" :src="scope.row.avatar" alt="用户头像">
</template>
</el-table-column>
<el-table-column align="center" prop="nickname" label="昵称" min-width="100"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" fixed="right" label="操作" min-width="80px">
<template slot-scope="scope">
<template v-if="scope.row.guide_id!=null&&scope.row.guide_id>0">
<el-button @click.native.prevent="outBindUser(scope.row.id)" type="text" size="mini">解绑
</el-button>
<el-button v-if="scope.row.guide_id!=guideId"
@click.native.prevent="seeBindGuide(scope.row.guide_id,scope.row.nickname)"
type="text"
size="mini">查看导购员
</el-button>
<el-button v-else
style="color: #aaa;"
type="text"
size="mini">当前绑定
</el-button>
</template>
<el-button v-else @click.native.prevent="bindUser(scope.row.id)" type="primary" size="mini">
选择
</el-button>
</template>
</el-table-column>
<div slot="empty" v-if="loading"><i class="el-icon-loading"></i></div>
<div slot="empty" v-else>暂无数据</div>
</el-table>
<el-pagination
@size-change="onlineHandleSizeChange"
@current-change="onlineHandleCurrentChange"
:current-page="onlineCurrentPage"
:page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="onlineCurrentLen">
</el-pagination>
</div>
</el-dialog>
<el-dialog :title="bindTitle"
:visible.sync="showBindDetail"
top="16vh"
custom-class="mini-dialog-content"
:close-on-click-modal="false"
:append-to-body="true">
<el-form label-width="130px">
<el-form-item label="姓名">{{guideDetail.guidename}}</el-form-item>
<el-form-item label="工号">{{guideDetail.jobnum}}</el-form-item>
<el-form-item label="状态">{{guideDetail.state_name}}</el-form-item>
<el-form-item label="所属门店">{{guideDetail.store_name}}</el-form-item>
</el-form>
</el-dialog>
<el-dialog :title="ruleForm.id==''?'添加导购员':'编辑导购员'"
width="500px" top="100px"
:append-to-body="true"
:visible.sync="showEditGuideDialog"
:before-close="closeGuideDialog">
<el-scrollbar :style="'height:'+formHeight">
<el-form label-width="130px" size="small" :model="ruleForm" ref="ruleForm" :rules="rules">
<el-form-item label="所属门店:">{{store_name}}</el-form-item>
<el-form-item label="姓名:" prop="guidename">
<el-input v-model="ruleForm.guidename" style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="工号:" prop="jobnum">
<el-input v-model="ruleForm.jobnum" style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="手机号:" prop="phone">
<el-input v-model="ruleForm.phone" maxLength="11" style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="登录密码:" prop="pass">
<el-input v-model="ruleForm.pass" style="width: 200px"
show-password
:placeholder="ruleForm.id>0?'不需要修改密码请留空':''"></el-input>
<div style="color: #aaa;font-size: 13px;">密码长度不得少于6个字符串,不得超过16个字符串</div>
</el-form-item>
<el-form-item label="入职日期:" prop="entrytime">
<el-date-picker style="margin-top: 1px"
v-model="ruleForm.entrytime"
type="date"
value-format="yyyy-MM-dd"
placeholder="入职日期">
</el-date-picker>
</el-form-item>
<el-form-item label="详细地址:" prop="address">
<el-input v-model="ruleForm.address" type="textarea" style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="支付宝账号:" prop="paynumber">
<el-input v-model="ruleForm.paynumber" style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="微信账号:" prop="chatnumber">
<el-input v-model="ruleForm.chatnumber" style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="银行卡类型:" prop="bank">
<select-system-bank :bank-id.sync="ruleForm.bank"></select-system-bank>
</el-form-item>
<el-form-item label="持卡人:" prop="cardholder">
<el-input v-model="ruleForm.cardholder" style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="银行卡号:" prop="cardnumber">
<el-input v-model="ruleForm.cardnumber" style="width: 200px"></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
<div style="text-align: center">
<el-button type="primary" :loading="submitLoading" @click="saveGuideData">提交</el-button>
</div>
</el-dialog>
</div>
<script charset="utf-8" type="text/javascript" src="/Public/js/select-bank.js"></script>
<script type="text/javascript">
var GuideApp = new Vue({
el: '#GuideApp',
data() {
let _t = this;
return {
formHeight: (MenuApp.getContainerClientHeight() - 150) + 'px',
tableHeight: (MenuApp.getContainerClientHeight() - 240) + 'px',
operate: {},
guideList: [],
currentLen: 0,
currentPage: 1,
currentLimit: 10,
onlineUserList: [],
onlineCurrentLen: 0,
onlineCurrentPage: 1,
onlineCurrentLimit: 10,
searchText: '',
add_time: '',
online_name: '',
loading: false,
onlineLoading: false,
guideId: '',
showOnlineUser: false,
bindTitle: '',
showBindDetail: false,
guideDetail: {},
openState: '2',
guide_online_state: '2',
store_name: localStorage.store_name,
showEditGuideDialog: false,
submitLoading: false,
ruleForm: {
id:'',
phone:'',
pass:'',
guidename:'',
entrytime:'',
address:'',
jobnum:'',
paynumber:'',
chatnumber:'',
bank:'',
cardholder:'',
cardnumber:'',
},//添加、编辑的数据
rules: {
phone: [{required: true, message: '请输入手机号', trigger: 'change'}, {
validator: function (rule, value, callback) {
if (!(/^[1][3456789][0-9]{9}$/).test(value)) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
}, trigger: 'change'
}],
guidename: [{required: true, message: '请输入导购员姓名', trigger: 'change'}],
entrytime: [{required: true, message: '请选择入职日期', trigger: 'change'}],
address: [{required: true, message: '请输入地址', trigger: 'change'}],
jobnum: [{required: true, message: '请输入工号', trigger: 'change'}],
paynumber: [{required: true, message: '请输入支付宝账号', trigger: 'change'}],
chatnumber: [{required: true, message: '请输入微信号', trigger: 'change'}],
bank: [{required: true, message: '请选择银行', trigger: 'change'}],
cardholder: [{required: true, message: '请输入持卡人姓名', trigger: 'change'}],
cardnumber: [{required: true, message: '请输入银行卡号', trigger: 'change'}],
pass: [{required: false, message: '请输入登录密码', trigger: 'change'}, {
validator: function (rule, value, callback) {
if ((value || _t.ruleForm.id == '') && !(/^[a-zA-Z0-9.+*-/<>?!@#$%^&*():''"";]{6,16}$/).test(value)) {
callback(new Error("密码必须是6-16位的字母、数字、符号"));
} else {
callback();
}
}
}],
},
}
},
methods: {
onlineGuide(id) {
this.showOnlineUser = true;
if (this.guideId != id) {
this.guideId = id;
this.onlineUserList = [];
}
if (!this.getOnlineUser.length) {
this.getOnlineUser();
}
},
//绑定线上用户
bindUser(id) {
this.$confirm('您确认该导购员要绑定该线上用户吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'info'
}).then(() => {
this.onlineLoading = true;
this.sendRequest('Retail/Guide/bindOnlineUser', {
data: {
user_id: id,
guide_id: this.guideId
},
success: (res) => {
this.onlineLoading = false;
if (res.status == 1) {
this.$message.success(res.message)
} else {
this.$message.error(res.message)
}
this.getOnlineUser();
},
})
}).catch(() => {
});
},
//解绑线上用户
outBindUser(id) {
this.$confirm('您确认解绑该线上用户的导购员吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.onlineLoading = true;
this.sendRequest('Retail/Guide/unBundlingOnlineUser', {
data: {
user_id: id,
},
success: (res) => {
this.onlineLoading = false;
if (res.status == 1) {
this.$message.success(res.message)
} else {
this.$message.error(res.message)
}
this.getOnlineUser();
},
})
}).catch(() => {
});
},
//查看已绑定的导购员状态
seeBindGuide(guide_id, name) {
this.bindTitle = name + ' - 已绑定的导购员';
this.guideDetail = {};
this.showBindDetail = true;
this.sendRequest('Retail/Guide/getBindGuide', {
data: {
guide_id: guide_id,
},
success: (res) => {
if (res.status == 1) {
this.guideDetail = res.data;
} else {
this.$message.error(res.message)
}
},
})
},
//修改导购员开启状态
changeStatus() {
this.sendRequest('Retail/Guide/setLineOpenState', {
data: {
openState: this.openState
},
success: (res) => {
if (res.status == 1) {
this.$message.success(res.message);
} else {
this.$message.error(res.message);
this.openState = this.openState == '1' ? '2' : '1';
}
}
})
},
//修改线上导购员开启状态
changeOnlineStatus() {
this.sendRequest('Retail/Guide/changeOnlineStatus', {
data: {
guide_online_state: this.guide_online_state
},
success: (res) => {
if (res.status == 1) {
this.$message.success(res.message);
} else {
this.$message.error(res.message);
this.guide_online_state = this.guide_online_state == '1' ? '2' : '1';
}
}
})
},
//删除导购员
delGuide(id) {
this.$confirm('您确认要删除该导购员吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.sendRequest('Retail/Guide/delete', {
data: {id: id},
success: (res) => {
if (res.status == 1) {
this.getData();
this.$message.success(res.message);
} else {
this.$message.error(res.message);
}
}
})
}).catch(() => {
});
},
//取消 新增/编辑导购员
closeGuideDialog(){
this.$refs.ruleForm.resetFields();
this.showEditGuideDialog = false;
},
//新增导购员
addGuide(){
this.showEditGuideDialog = true;
this.ruleForm.id = '';
this.$nextTick(()=>{
this.rules.pass[0].required = true;
})
},
//编辑导购员
editGuide(item) {
for(let k in this.ruleForm){
this.ruleForm[k] = item[k];
}
this.ruleForm.pass = '';
this.showEditGuideDialog = true;
this.$nextTick(()=>{
this.rules.pass[0].required = false;
})
},
//提交新增/编辑导购员
saveGuideData() {
this.$refs.ruleForm.validate((valid) => {
if (!valid) {
return this.$message.warning('请检查表单信息');
}
this.$confirm('您确认提交该导购员的信息吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'info'
}).then(() => {
this.submitLoading = true;
this.sendRequest('Retail/Guide/'+(this.ruleForm.id ? 'edit' : 'create'), {
data: this.ruleForm,
success: (res) => {
this.submitLoading = false;
if (res.status == 1) {
this.$message.success(res.message);
this.closeGuideDialog();
this.getData();
} else {
this.$message.error(res.message);
}
},
})
}).catch(() => {
});
})
},
//修改佣金
setCommission(item) {
this.$prompt('佣金比为[1-99]的整数,不填写百分号', '设置导购员佣金比', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: item.commission,
inputPlaceholder: item.commission,
inputValidator: (val) => {
let reg = /^\d+$/;
if (!val || !reg.test(val) || val <= 0 || val > 99) {
return '请输入[1-99]的整数';
}
return true;
}
}).then(({value}) => {
this.sendRequest('Retail/Guide/setCommission', {
data: {
id: item.id,
commission: value,
},
success: res => {
if (res.status == 1) {
this.getData();
this.$message.success(res.message);
} else {
this.$message.error(res.message);
}
}
})
}).catch(() => {
});
},
//销售详情
details(id) {
layer.open({
type: 2,
content: "{:U('details')}?id=" + id,
title: "销售详情",
scrollbar: false,
area: ["calc(100% - 160px)", "calc(100% - 65px)"],
shade: 0,
offset: 'rb',
resize: false,
move: false,
})
},
//会员信息
vip(id) {
layer.open({
type: 2,
content: "{:U('vip')}?id=" + id,
title: "会员信息",
scrollbar: false,
area: ["calc(100% - 160px)", "calc(100% - 65px)"],
shade: 0,
offset: 'rb',
resize: false,
move: false,
})
},
handleSizeChange(val) {
this.currentLimit = val;//切换每页数量
this.currentPage = 1;
this.getData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getData();//切换页数
},
inputSearchTextOnline(val) {
this.searchText = val;
},
onlineHandleSizeChange(val) {
this.onlineCurrentLimit = val;//切换每页数量
this.onlineCurrentPage = 1;
this.getOnlineUser();
},
onlineHandleCurrentChange(val) {
this.onlineCurrentPage = val;
this.getOnlineUser();//切换页数
},
searchOnlineUser() {
this.onlineCurrentPage = 1;
this.getOnlineUser();
},
getData() {
this.loading = true;
this.sendRequest('Retail/Guide/get_guide_list', {
data: {
page: this.currentPage,
limit: this.currentLimit,
guide_name: this.searchText,
add_time: this.add_time,
},
success: (res) => {
this.loading = false;
if (res.status == 1) {
this.guideList = [];
this.guideList = res.data.list;
this.currentLen = res.data.count;
} else {
this.$message.error(res.message)
}
},
});
},
getOnlineUser() {
this.onlineLoading = true;
this.sendRequest('Retail/Guide/getOnlineUserList', {
data: {
page: this.onlineCurrentPage,
limit: this.onlineCurrentLimit,
online_name: this.online_name,
guide_id: this.guideId,
},
success: (res) => {
this.onlineLoading = false;
if (res.status == 1) {
this.onlineUserList = [];
this.onlineUserList = res.data;
this.onlineCurrentLen = parseInt(res.count);
} else {
this.$message.error(res.message)
}
},
});
},
getBaseSet() {
this.sendRequest('Retail/Guide/index', {
success: (res) => {
if (res.status == 1) {
this.openState = res.data.open_state;
this.guide_online_state = res.data.guide_online_state;
}
}
})
}
},
created() {
this.getBaseSet();
this.getData();
this.checkOperateAuth({
create: '/index.php/Retail/Guide/create',
edit: '/index.php/Retail/Guide/edit',
delete: '/index.php/Retail/Guide/delete',
setCommission: '/index.php/Retail/Guide/setCommission',
details: '/index.php/Retail/Guide/details',
setLineOpenState: '/index.php/Retail/Guide/setLineOpenState',
setOnlineGuide: '/index.php/Retail/Guide/bindOnlineUser',
changeOnlineStatus: '/index.php/Retail/Guide/changeOnlineStatus',
}, (data) => {
this.operate = data;
})
}
})
</script>