|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<Row style="margin-top: 20px;width: 100%;background-color: #F7F8FA;">
|
|
|
|
|
<i-col span="24" style="text-align: left;padding-left: 10px;">
|
|
|
|
|
<Row class="row-style">
|
|
|
|
|
<i-col span="24" style="text-align: right;padding-right: 20px;">
|
|
|
|
|
<Button type="primary" @click="open(1)">添加推广人员</Button>
|
|
|
|
|
</i-col>
|
|
|
|
|
</Row>
|
|
|
|
|
</i-col>
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
<Table :columns="columns1" :data="data1" style="margin-top: 20px;">
|
|
|
|
|
<template slot-scope="{ row, index }" slot="qrCodeAction">
|
|
|
|
|
<img :src="require('../../../static/img/qrCode-init.png')" @click="show(row)" style="margin-left: 5px;margin-top: 5px;width:30px;height:30px;"/>
|
|
|
|
|
</template>
|
|
|
|
|
<template slot-scope="{ row, index }" slot="state">
|
|
|
|
|
<i-switch size="large" :value="row.qrCodeState" @on-change="onSwitchChangeLister(row, index)">
|
|
|
|
|
<span slot="open">开启</span>
|
|
|
|
|
<span slot="close">关闭</span>
|
|
|
|
|
</i-switch>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template slot-scope="{ row, index }" slot="action">
|
|
|
|
|
<Button ghost type="primary" size="small" style="margin-right: 5px" @click="open(2, row)">修改</Button>
|
|
|
|
|
<Button ghost type="error" size="small" @click="remove(row)">删除</Button>
|
|
|
|
|
</template>
|
|
|
|
|
</Table>
|
|
|
|
|
|
|
|
|
|
<!-- 预览二维码 -->
|
|
|
|
|
<Modal
|
|
|
|
|
v-model="isShow"
|
|
|
|
|
:title="showStoreName"
|
|
|
|
|
:footer-hide="true"
|
|
|
|
|
width="230"
|
|
|
|
|
class-name="vertical-center-modal"
|
|
|
|
|
>
|
|
|
|
|
<div slot="header">{{this.showStoreName}}</div>
|
|
|
|
|
<img :src="qrCodeImage" style="width:200px;height:200px;"/>
|
|
|
|
|
<div style="text-align: center;">
|
|
|
|
|
<Button ghost type="primary" @click="download(rowData)">下载</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</Modal>
|
|
|
|
|
|
|
|
|
|
<!-- 添加推广人员 -->
|
|
|
|
|
<Modal
|
|
|
|
|
v-model="isShowAdd"
|
|
|
|
|
:footer-hide="true"
|
|
|
|
|
>
|
|
|
|
|
<div slot="header">
|
|
|
|
|
<template v-if="flag === 1">
|
|
|
|
|
<span>添加推广人员</span>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<span>修改推广人员</span>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
|
|
|
|
<FormItem label="名称" prop="name">
|
|
|
|
|
<i-input v-model="formValidate.name" placeholder="请输入名字"></i-input>
|
|
|
|
|
</FormItem>
|
|
|
|
|
<FormItem label="手机" prop="phone">
|
|
|
|
|
<i-input v-model="formValidate.phone" placeholder="成员通过验证该手机号后可加入企业">
|
|
|
|
|
</i-input>
|
|
|
|
|
</FormItem>
|
|
|
|
|
<FormItem label="工号" prop="staffCode">
|
|
|
|
|
<i-input v-model="formValidate.staffCode" placeholder="请输入工号" :disabled="flag !== 1 ? true : false" ></i-input>
|
|
|
|
|
</FormItem>
|
|
|
|
|
<FormItem label="角色" prop="role" :rules="rules">
|
|
|
|
|
<Select v-model="formValidate.role" placeholder="选择角色" :disabled="flag !== 1 ? true : false">
|
|
|
|
|
<Option :value="1" >店长</Option>
|
|
|
|
|
<Option :value="4" >导购</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
</FormItem>
|
|
|
|
|
<FormItem v-if="flag === 1" label="" prop="checkbox">
|
|
|
|
|
<CheckboxGroup v-model="formValidate.checkbox">
|
|
|
|
|
<Checkbox label="vail" >同步开通账号</Checkbox>
|
|
|
|
|
</CheckboxGroup>
|
|
|
|
|
</FormItem>
|
|
|
|
|
<FormItem style="text-align: left;">
|
|
|
|
|
<Row>
|
|
|
|
|
<i-col span="16">
|
|
|
|
|
<Button type="primary" @click="handleSubmit(formValidate)">保存并继续添加</Button>
|
|
|
|
|
<Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
|
|
|
|
|
</i-col>
|
|
|
|
|
</Row>
|
|
|
|
|
</FormItem>
|
|
|
|
|
</Form>
|
|
|
|
|
</Modal>
|
|
|
|
|
|
|
|
|
|
<Page :total="total" :current="pageNum" :page-size="pageSize" show-elevator show-total
|
|
|
|
|
placement="top" @on-change="handlePage" style="margin: 20px 50px 0 0;right:0px;position: absolute;"></Page>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import data from "../../utils/PhoneRegionData";
|
|
|
|
|
|
|
|
|
|
import staff from "../../services/staff/staff";
|
|
|
|
|
export default {
|
|
|
|
|
name: "IncreaseStaffManager",
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
userId: 13,
|
|
|
|
|
// 标记 1添加 2修改
|
|
|
|
|
flag: 1,
|
|
|
|
|
prefixDefault: data.prefixDefault,
|
|
|
|
|
isShow: false,
|
|
|
|
|
isShowAdd: false,
|
|
|
|
|
showStoreName: '',
|
|
|
|
|
qrCodeImage: '',
|
|
|
|
|
loading:true,
|
|
|
|
|
spuLoading:false,
|
|
|
|
|
// 分页
|
|
|
|
|
total: 0,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
selectedRegion: null,
|
|
|
|
|
regionList: [],
|
|
|
|
|
selectedStore: this.$route.query.storeId,
|
|
|
|
|
storeList: [],
|
|
|
|
|
shopList:[],
|
|
|
|
|
roleList: [],
|
|
|
|
|
rowData:{},
|
|
|
|
|
rules: {required: false},
|
|
|
|
|
columns1: [
|
|
|
|
|
{
|
|
|
|
|
title: '序号',
|
|
|
|
|
key: 'id',
|
|
|
|
|
width: 100
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '姓名',
|
|
|
|
|
key: 'name',
|
|
|
|
|
width: 100
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '员工ID',
|
|
|
|
|
key: 'staffCode',
|
|
|
|
|
width: 100
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '手机号码',
|
|
|
|
|
key: 'mobil',
|
|
|
|
|
width: 160
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '店铺',
|
|
|
|
|
key: 'storeName',
|
|
|
|
|
width: 100
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '角色',
|
|
|
|
|
key: 'role',
|
|
|
|
|
width: 100
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '客户数',
|
|
|
|
|
key: 'customerNum',
|
|
|
|
|
width: 100
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '推广码',
|
|
|
|
|
slot: 'qrCodeAction',
|
|
|
|
|
key:'epWechatQrCode',
|
|
|
|
|
width: 150
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '操作',
|
|
|
|
|
slot: 'action',
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
data1: [],
|
|
|
|
|
// 开通企业微信 表单
|
|
|
|
|
formValidate: {
|
|
|
|
|
name:'',
|
|
|
|
|
staffCode: '',
|
|
|
|
|
region: '',
|
|
|
|
|
phone: '',
|
|
|
|
|
role: '',
|
|
|
|
|
store: '',
|
|
|
|
|
userId : '',
|
|
|
|
|
checkbox: ['vail']
|
|
|
|
|
},
|
|
|
|
|
ruleValidate: {
|
|
|
|
|
name: [
|
|
|
|
|
{ required: true, message: '名称不能为空', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
staffCode: [
|
|
|
|
|
{ required: true, message: '工号不能为空', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
// mail: [
|
|
|
|
|
// { required: true, message: '邮箱不能为空', trigger: 'blur' },
|
|
|
|
|
// { type: 'email', message: '邮箱格式错误', trigger: 'blur' }
|
|
|
|
|
// ],
|
|
|
|
|
role: [
|
|
|
|
|
{ required: true,type:String ,message: '请选择角色', trigger: 'change' }
|
|
|
|
|
],
|
|
|
|
|
region: [
|
|
|
|
|
{ required: true, type:String,message: '请选择区域', trigger: 'change' }
|
|
|
|
|
],
|
|
|
|
|
store: [
|
|
|
|
|
{ required: true,type:String, message: '请选择店铺', trigger: 'change' }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.listOfLogistics();
|
|
|
|
|
this.downRegionData();
|
|
|
|
|
this.downShopData();
|
|
|
|
|
this.downRoleData()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
changePage (page) {
|
|
|
|
|
this.pageNum = page;
|
|
|
|
|
this.listOfLogistics();
|
|
|
|
|
},
|
|
|
|
|
listOfLogistics() {
|
|
|
|
|
let that = this;
|
|
|
|
|
let request = {
|
|
|
|
|
shopId: that.selectedStore,
|
|
|
|
|
pageNum: that.pageNum,
|
|
|
|
|
pageSize: that.pageSize,
|
|
|
|
|
};
|
|
|
|
|
staff.getStaffList(request, function (data) {
|
|
|
|
|
data = data.data;
|
|
|
|
|
if(data.code == "0000") {
|
|
|
|
|
|
|
|
|
|
that.data1 = [];
|
|
|
|
|
let datas = data.results;
|
|
|
|
|
//总页数
|
|
|
|
|
if (datas.total == null) {
|
|
|
|
|
that.total = 0;
|
|
|
|
|
} else {
|
|
|
|
|
that.total = datas.total;
|
|
|
|
|
}
|
|
|
|
|
if (datas.records == null) {
|
|
|
|
|
datas.records = [];
|
|
|
|
|
}
|
|
|
|
|
that.data1 = datas.records;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//区域用户下的区域
|
|
|
|
|
downRegionData: function () {
|
|
|
|
|
let that = this;
|
|
|
|
|
that.regionList = [{"id":0,"name":"全部"}];
|
|
|
|
|
let request =
|
|
|
|
|
{userId: that.userId};
|
|
|
|
|
staff.downRegionData(request, function (data) {
|
|
|
|
|
data = data.data.results;
|
|
|
|
|
if(data){
|
|
|
|
|
for(let i=0;i<data.length;i++){
|
|
|
|
|
let entity = data[i];
|
|
|
|
|
if(entity){
|
|
|
|
|
that.regionList.push(entity);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
downShopData: function () {
|
|
|
|
|
let that = this;
|
|
|
|
|
that.shopList = [{"id":0,"name":"全部"}];
|
|
|
|
|
let request =
|
|
|
|
|
{userId: that.userId,regionId: that.changeData(that.selectedRegion)};
|
|
|
|
|
staff.downShopData(request, function (data) {
|
|
|
|
|
data = data.data.results;
|
|
|
|
|
if(data){
|
|
|
|
|
for(let i=0;i<data.length;i++){
|
|
|
|
|
let entity = data[i];
|
|
|
|
|
if(entity){
|
|
|
|
|
that.shopList.push(entity);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
downRoleData: function () {
|
|
|
|
|
let that = this;
|
|
|
|
|
staff.downRoleData({}, function (data) {
|
|
|
|
|
data = data.data.results;
|
|
|
|
|
if(data){
|
|
|
|
|
for(let i=0;i<data.length;i++){
|
|
|
|
|
let entity = data[i];
|
|
|
|
|
if(entity){
|
|
|
|
|
that.roleList.push(entity);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
addSattf : function (request){
|
|
|
|
|
let that = this;
|
|
|
|
|
staff.addSattf(request,function (data) {
|
|
|
|
|
data = data.data;
|
|
|
|
|
if (data.code == "0000"){
|
|
|
|
|
that.$Message.success('添加成功!');
|
|
|
|
|
that.handleAdd(that.formValidate);
|
|
|
|
|
that.listOfLogistics();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
editSattf : function (request){
|
|
|
|
|
let that = this;
|
|
|
|
|
staff.editSattf(request,function (data) {
|
|
|
|
|
data = data.data;
|
|
|
|
|
if (data.code == "0000"){
|
|
|
|
|
that.$Message.success('修改成功!');
|
|
|
|
|
that.isShowAdd = false;
|
|
|
|
|
that.listOfLogistics();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
searchCustomerDataBtnClick: function () {
|
|
|
|
|
this.listOfLogistics();
|
|
|
|
|
},
|
|
|
|
|
changeData: function (value) {
|
|
|
|
|
if(value == 0){return null;}
|
|
|
|
|
return value;
|
|
|
|
|
},
|
|
|
|
|
//切页处理
|
|
|
|
|
handlePage:function (value) {
|
|
|
|
|
this.pageNum = value;
|
|
|
|
|
this.listOfLogistics();
|
|
|
|
|
},
|
|
|
|
|
downRegionChange: function () {
|
|
|
|
|
this.downShopData();
|
|
|
|
|
},
|
|
|
|
|
onChangeDateLister: function () {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
// 预览二维码
|
|
|
|
|
show: function (index) {
|
|
|
|
|
this.isShow = true;
|
|
|
|
|
this.showStoreName = index.storeName;
|
|
|
|
|
this.qrCodeImage = index.epWechatQrCode;
|
|
|
|
|
this.rowData = index;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 下载二维码
|
|
|
|
|
download: function (index) {
|
|
|
|
|
let name = index.staffCode+"-"+index.name
|
|
|
|
|
let image = new Image();
|
|
|
|
|
// 解决跨域 Canvas 污染问题
|
|
|
|
|
image.setAttribute("crossOrigin", "anonymous");
|
|
|
|
|
image.onload = function() {
|
|
|
|
|
let canvas = document.createElement("canvas");
|
|
|
|
|
canvas.width = image.width;
|
|
|
|
|
canvas.height = image.height;
|
|
|
|
|
let context = canvas.getContext("2d");
|
|
|
|
|
context.drawImage(image, 0, 0, image.width, image.height);
|
|
|
|
|
let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
|
|
|
|
|
let a = document.createElement("a"); // 生成一个a元素
|
|
|
|
|
let event = new MouseEvent("click"); // 创建一个单击事件
|
|
|
|
|
a.download = name || "photo"; // 设置图片名称
|
|
|
|
|
a.href = url; // 将生成的URL设置为a.href属性
|
|
|
|
|
a.dispatchEvent(event); // 触发a的单击事件
|
|
|
|
|
};
|
|
|
|
|
image.src = index.epWechatQrCode;
|
|
|
|
|
},
|
|
|
|
|
// 添加、修改推广人员
|
|
|
|
|
open: function (flag,row) {
|
|
|
|
|
this.flag = flag;
|
|
|
|
|
this.isShowAdd = true;
|
|
|
|
|
if(flag == 2){
|
|
|
|
|
this.formValidate = {
|
|
|
|
|
name: row.name,
|
|
|
|
|
staffCode: row.staffCode,
|
|
|
|
|
phone: row.mobil,
|
|
|
|
|
role: row.type,
|
|
|
|
|
store: row.storeId,
|
|
|
|
|
userId:row.userId,
|
|
|
|
|
id : row.id
|
|
|
|
|
}
|
|
|
|
|
}else {
|
|
|
|
|
this.handleAdd(this.formValidate);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
// 删除
|
|
|
|
|
remove: function (row) {
|
|
|
|
|
let requset = {
|
|
|
|
|
staffId : row.id
|
|
|
|
|
}
|
|
|
|
|
let that = this;
|
|
|
|
|
staff.removeStaff(requset,function (data) {
|
|
|
|
|
data = data.data;
|
|
|
|
|
if (data.results) {
|
|
|
|
|
that.$Message.success('删除成功!');
|
|
|
|
|
}else {
|
|
|
|
|
that.$Message.success('删除失败!');
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// switch开关
|
|
|
|
|
onSwitchChangeLister: function () {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
handleSubmit (value) {
|
|
|
|
|
|
|
|
|
|
if (value) {
|
|
|
|
|
let request = {};
|
|
|
|
|
if (this.flag == 1){
|
|
|
|
|
// 调用添加接口
|
|
|
|
|
request = {
|
|
|
|
|
name : value.name,
|
|
|
|
|
storeId:this.selectedStore,
|
|
|
|
|
mobil: value.phone,
|
|
|
|
|
staffCode :value.staffCode,
|
|
|
|
|
roleId: value.role,
|
|
|
|
|
isOpen: this.formValidate.checkbox[0]
|
|
|
|
|
};
|
|
|
|
|
this.addSattf(request);
|
|
|
|
|
}else {
|
|
|
|
|
request = {
|
|
|
|
|
name : value.name,
|
|
|
|
|
storeId:this.selectedStore,
|
|
|
|
|
mobil: value.phone,
|
|
|
|
|
staffCode :value.staffCode,
|
|
|
|
|
roleId: value.role,
|
|
|
|
|
userId : this.formValidate.userId,
|
|
|
|
|
id:this.formValidate.id
|
|
|
|
|
};
|
|
|
|
|
//修改接口
|
|
|
|
|
this.editSattf(request);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
this.$Message.error('Fail!');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
handleReset (name) {
|
|
|
|
|
this.$refs[name].resetFields();
|
|
|
|
|
this.isShowAdd = false;
|
|
|
|
|
},
|
|
|
|
|
handleAdd(value){
|
|
|
|
|
value.name = "";
|
|
|
|
|
value.store = "";
|
|
|
|
|
value.phone ="";
|
|
|
|
|
value.staffCode ="";
|
|
|
|
|
value.role ="";
|
|
|
|
|
value.region ="";
|
|
|
|
|
value.checkbox=['vail'];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.region {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
}
|
|
|
|
|
.row-style {
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
padding-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
