490 lines
17 KiB
Vue
490 lines
17 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
|
||
<!--查询参数-->
|
||
<el-form size="small" :inline="true" label-width="68px">
|
||
<el-form-item label="方案类别" prop="comType">
|
||
<el-select v-model="comTypeParam" placeholder="请选择类别" clearable style="width: 100%;">
|
||
<el-option key="1" label="项目" value="1"/>
|
||
<el-option key="3" label="商品" value="3"/>
|
||
<el-option key="4" label="次卡" value="4"/>
|
||
<el-option key="5" label="储值" value="5"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="方案名称">
|
||
<el-input
|
||
v-model="comNameParam"
|
||
placeholder="请输入方案名称"
|
||
clearable
|
||
style="width: 240px;"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||
<el-button
|
||
type="primary"
|
||
plain
|
||
icon="el-icon-plus"
|
||
size="mini"
|
||
v-hasPermi="['commission:rule:index']"
|
||
@click="handleAdd('')"
|
||
>新增方案
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!--方案列表-->
|
||
<el-table :data="tableData" border size="medium" style="width: 100%">
|
||
<el-table-column prop="comName" label="方案名称"></el-table-column>
|
||
<el-table-column prop="comType" label="商品分类" :formatter="dataFormat2"></el-table-column>
|
||
<el-table-column label="创建时间">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="更新时间">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.updateTime) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-edit"
|
||
v-hasPermi="['scheme:add']"
|
||
@click="handleAdd(scope.row.id)"
|
||
>修改
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-delete"
|
||
v-hasPermi="['scheme:remove']"
|
||
@click="handleDelete(scope.row)"
|
||
>删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
style="margin-top: 5px;text-align: right"
|
||
background
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
:page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
|
||
:page-size="pageSize"
|
||
:current-page="currentPage"
|
||
@current-change="getCommissionRuleList"
|
||
@size-change="handleSizeChange"
|
||
></el-pagination>
|
||
|
||
<!-- 添加或修改方案对话框 -->
|
||
<el-dialog :title="title" :visible.sync="open" class="common-dialog" width="1100px" append-to-body>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="126px">
|
||
<el-row>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="提成方案名称" prop="comName">
|
||
<el-input v-model="form.comName" placeholder="请输入名称" maxlength="90" style="width: 55%"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="提成方案类别" prop="comType">
|
||
<el-radio-group v-model="form.comType">
|
||
<el-radio label="1">项目</el-radio>
|
||
<el-radio label="3">商品</el-radio>
|
||
<el-radio label="4">次卡</el-radio>
|
||
<el-radio label="5">储值</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="方案适用门店" prop="storeIdList">
|
||
<el-select v-model="form.storeIdList" filterable multiple clearable placeholder="请选择适用门店"
|
||
style="width: 55%">
|
||
<el-option v-for="item in storeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<div style="margin-bottom: 20px;">
|
||
<span style="size: 26px;font-weight: bold;margin-left: 20px;"><span
|
||
style="color: red;margin-right: 5px;">*</span>提成规则配置：</span>
|
||
<el-button type="primary" size="mini" icon="el-icon-plus" plain @click="addTc">添加项目提成</el-button>
|
||
</div>
|
||
|
||
<el-table :data="form.detailList" id="elTableIdWW" border size="medium" style="width: 100%">
|
||
<el-table-column label="图片" align="center" width="136">
|
||
<template slot-scope="scope">
|
||
<img class="list-img" style="width: 45px;height: 35px;" :src="uploadAction + scope.row.logo">
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="goodsName" label="商品名称" min-width="136" :show-overflow-tooltip="true"></el-table-column>
|
||
<el-table-column label="标准价(原价)">
|
||
<template slot-scope="scope">
|
||
￥ {{scope.row.price}} 元
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="comType" label="提成类型" :formatter="dataFormat"></el-table-column>
|
||
|
||
<el-table-column label="价格类型" width="99">
|
||
<template slot-scope="scope">
|
||
原价
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="tcWay" label="提成方式" width="126">
|
||
<template slot-scope="scope">
|
||
<select :rowId="scope.row.goodsId" tp="tcWay" @change="selectChange(scope.row.goodsId,'tcWay')" style="border: 1px solid #dbdee5;">
|
||
<option :selected="scope.row.tcWay=='1'?true:false" value="1">比率提成（%）</option>
|
||
<option :selected="scope.row.tcWay=='2'?true:false" value="2">固定提成（元）</option>
|
||
</select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="visitorVal" :label="form.comType=='5'?'首冲':'散客'" width="99">
|
||
<template slot-scope="scope">
|
||
<input :value="scope.row.visitorVal" v-if="form.comType != '4'" @change="inputChange(scope.row.goodsId,'visitorVal')" onkeyup="value=value.replace(/[^\d.]/g,'')" :rowId="scope.row.goodsId" tp="visitorVal"/>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column :label="form.comType=='5'?'次冲':'会员'" width="99">
|
||
<template slot-scope="scope">
|
||
<input :value="scope.row.memberVal" @change="inputChange(scope.row.goodsId,'memberVal')" onkeyup="value=value.replace(/[^\d.]/g,'')" :rowId="scope.row.goodsId" tp="memberVal"/>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="操作" width="77">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" @click="removeGd(scope.row.goodsId)" slot="reference" type="text">删除<i class="el-icon-delete"></i>
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="open=false">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!--商品服务选择列表-->
|
||
<el-dialog title="卡项/商品/服务选择" :visible.sync="openSelect" class="common-dialog" width="700px" append-to-body>
|
||
<el-table
|
||
:data="selectGoodList"
|
||
border
|
||
size="medium"
|
||
ref="multipleTable"
|
||
@selection-change="handleSelectionChange"
|
||
:row-key="getRowKeys"
|
||
style="width: 100%">
|
||
<el-table-column
|
||
type="selection"
|
||
width="55"
|
||
:reserve-selection="true"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column label="图片" align="center" width="156">
|
||
<template slot-scope="scope">
|
||
<img class="list-img" style="width: 45px;height: 35px;" :src="uploadAction + scope.row.logo">
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="name" label="商品名称"></el-table-column>
|
||
<el-table-column label="标准价(原价)" width="100">
|
||
<template slot-scope="scope">
|
||
￥{{scope.row.price}} 元
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="selectOk">确 定</el-button>
|
||
<el-button @click="openSelect=false">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getCommissionRuleList, removeCommissionRule, getCommissionRuleInfo, saveCommissionRule, selectGoodList } from "@/api/commission/rule";
|
||
import { searchStore } from "@/api/store";
|
||
|
||
export default {
|
||
name: 'busStaffList',
|
||
data() {
|
||
return {
|
||
multipleSelection: [],
|
||
uploadAction: process.env.VUE_APP_SERVER_URL + '/backendApi/file/getImg/',
|
||
currentPage: 1, //初始页
|
||
pageSize: 10, //每页的数据
|
||
total: 0,
|
||
tableData: [],
|
||
selectGoodList: [],
|
||
storeOptions: [],
|
||
comNameParam: '',
|
||
comTypeParam: '',
|
||
title: '',
|
||
open: false,
|
||
openSelect: false,
|
||
|
||
form: {
|
||
id: '',
|
||
storeIdList: [],
|
||
comName: '',
|
||
comType: '1',
|
||
createTime: '',
|
||
updateTime: '',
|
||
status: '',
|
||
detailList: []
|
||
},
|
||
rules: {
|
||
storeIdList: [{required: true, message: '请选择方案使用门店', trigger: 'blur'}],
|
||
comName: [{required: true, message: '请输入方案名称', trigger: 'blur'}],
|
||
comType: [{required: true, message: '请选择商品分类', trigger: 'blur'}]
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
getCommissionRuleList(page) {
|
||
let params = {
|
||
page: page,
|
||
limit: this.pageSize,
|
||
comName: this.comNameParam,
|
||
comType: this.comTypeParam
|
||
}
|
||
getCommissionRuleList(params).then(r => {
|
||
this.tableData = r.data.rows;
|
||
this.total = r.data.total;
|
||
}
|
||
);
|
||
},
|
||
handleSizeChange(val) {
|
||
this.pageSize = val;
|
||
this.getCommissionRuleList(1);
|
||
},
|
||
dataFormat: function (row, column) {
|
||
//商品分类=提成类型：1：项目=劳动提成:2：卡项=销售提成:3：商品=销售提成
|
||
let val = row[column.property];
|
||
if (val == '1') {return '劳动提成'}
|
||
if (val == '3') {return '销售提成'}
|
||
if (val == '4') {return '销售提成'}
|
||
if (val == '5') {return '销售提成'}
|
||
return val;
|
||
},
|
||
dataFormat2: function (row, column) {
|
||
//商品分类=提成类型：1：项目=劳动提成:2：卡项=销售提成:3：商品=销售提成
|
||
let val = row[column.property];
|
||
if (val == '1') {return '项目'}
|
||
if (val == '3') {return '商品'}
|
||
if (val == '4') {return '次卡'}
|
||
if (val == '5') {return '储值'}
|
||
return val;
|
||
},
|
||
// 店铺列表
|
||
getStoreList() {
|
||
searchStore().then(response => {
|
||
this.storeOptions = response.data.storeList;
|
||
}
|
||
)
|
||
},
|
||
handleQuery() {
|
||
this.getCommissionRuleList(1);
|
||
},
|
||
handleAdd(id) {
|
||
this.title = "新增方案"
|
||
this.form.id = '';
|
||
this.form.storeIdList = [];
|
||
this.form.detailList = [];
|
||
this.form.comName = '';
|
||
this.form.comType = '1';
|
||
this.form.createTime = '';
|
||
this.form.updateTime = '';
|
||
this.form.status = '';
|
||
this.open = true;
|
||
if (id) {
|
||
this.title = "修改方案"
|
||
getCommissionRuleInfo({id: id}).then(r => {
|
||
this.form = r.data;
|
||
}
|
||
);
|
||
}
|
||
},
|
||
// 提交按钮
|
||
submitForm: function () {
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
if (!this.form.id) {
|
||
saveCommissionRule(this.form).then(r => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.open = false;
|
||
this.handleQuery();
|
||
});
|
||
} else {
|
||
saveCommissionRule(this.form).then(r => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.open = false;
|
||
this.handleQuery();
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
handleDelete(row) {
|
||
this.$confirm('确认删除?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
let id = row.id;
|
||
removeCommissionRule({id: id}).then(r => {
|
||
if (r.code == 200) {
|
||
this.$message({ // 成功
|
||
type: 'success',
|
||
message: '操作成功'
|
||
})
|
||
this.getCommissionRuleList(1);
|
||
}
|
||
}
|
||
)
|
||
}).catch(() => {
|
||
});
|
||
},
|
||
addTc() {//添加提成方案详情
|
||
if (!this.form.comType) {
|
||
this.$modal.msgWarning("请先选择提成方案类别");
|
||
return;
|
||
}
|
||
this.openSelect = true;
|
||
|
||
this.multipleSelection = [];//清空已选择的列表
|
||
//清空所有选中
|
||
this.$nextTick(() => {
|
||
this.$refs.multipleTable.clearSelection();
|
||
})
|
||
|
||
let params = {comType: this.form.comType}
|
||
selectGoodList(params).then(r => {
|
||
this.selectGoodList = r.data;
|
||
//数据回显
|
||
this.selectGoodList.forEach(item => {
|
||
this.form.detailList.forEach(item2 => {
|
||
if(item2.goodsId==item.id){
|
||
//满足条件选中
|
||
this.$refs.multipleTable.toggleRowSelection(item);
|
||
}
|
||
})
|
||
})
|
||
}
|
||
);
|
||
},
|
||
removeGd(goodId){//删除提成方案商品服务
|
||
this.form.detailList = this.form.detailList.filter(item => {
|
||
return item.goodsId != goodId;
|
||
})
|
||
},
|
||
inputChange(goodId,filed){
|
||
let input = $("#elTableIdWW .el-table__body-wrapper tbody").find("input[rowId='" + goodId + "'][tp='" + filed + "']");
|
||
if (input.val()=='') {
|
||
input.val(0)
|
||
}
|
||
//去掉左右空格
|
||
let val = Number($.trim(input.val()));
|
||
input.val(val);
|
||
this.form.detailList.forEach(item => {
|
||
if (item.goodsId == goodId) {
|
||
item[filed] = val;
|
||
}
|
||
})
|
||
},
|
||
selectChange(goodId,filed){
|
||
let select = $("#elTableIdWW .el-table__body-wrapper tbody").find("select[rowId='" + goodId + "'][tp='" + filed + "']");
|
||
let val = select.val();
|
||
this.form.detailList.forEach(item => {
|
||
if (item.goodsId == goodId) {
|
||
item[filed] = val;
|
||
}
|
||
})
|
||
},
|
||
getRowKeys(row) {
|
||
return row.id;
|
||
},
|
||
handleSelectionChange(val) {
|
||
this.multipleSelection = val;
|
||
},
|
||
selectOk() {//确定选择的商品服务
|
||
let selectList = [];
|
||
//1.转换已经选择的商品
|
||
this.multipleSelection.forEach(item => {
|
||
if (item.comType == this.form.comType) {
|
||
let detailObj = {
|
||
goodsId: item.id,//商品ID
|
||
priceType: "1",//价格类型 1：标准价(原价) 2：会员价
|
||
tcWay: "1",//提成方式 1：比率提成(按100的比率) 2：固定提成
|
||
visitorVal: 0.00,//散客（提成值）
|
||
memberVal: 0.00,//会员（提成值）
|
||
comType: item.comType,//商品分类=提成类型：1：项目=劳动提成:3：商品=销售提成 4：次卡=销售提成: 5：储值=销售提成:
|
||
goodsName: item.name,//商品名称
|
||
price: item.price,//商品价格
|
||
logo: item.logo//商品图片
|
||
}
|
||
|
||
//2.比对现有已选择的商品
|
||
this.form.detailList.forEach(item2 => {
|
||
if(item2.goodsId==item.id){
|
||
detailObj = item2;
|
||
}
|
||
})
|
||
|
||
selectList.push(detailObj);
|
||
}
|
||
})
|
||
|
||
this.form.detailList = selectList;
|
||
this.openSelect = false;
|
||
}
|
||
},
|
||
created: function () {
|
||
this.getCommissionRuleList(this.currentPage);
|
||
this.getStoreList();
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
|
||
select {
|
||
/*去除select边框*/
|
||
border: 0;
|
||
background: transparent;
|
||
/*去除下拉框的三角下标*/
|
||
appearance: none;
|
||
-moz-appearance: none; /* Firefox */
|
||
-webkit-appearance: none; /* Safari 和 Chrome */
|
||
height: 32px;
|
||
width: 100%;
|
||
background-color: white;
|
||
padding-left: 5px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
input {
|
||
width: 96%;
|
||
height: 32px;
|
||
font-size: 14px;
|
||
color: #686868;
|
||
border: 1px solid #d3d6dd;
|
||
padding-left: 5px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.queryInput >>> .el-input__inner {
|
||
border-radius: 0px;
|
||
width: 200px;
|
||
}
|
||
</style>
|