You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

264 lines
7.5 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div>
<xy-dialog :width="74" ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增政策' : '编辑政策'" :form="form" :rules="rules" @submit="submit">
<template v-slot:name>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>名称
</div>
<div class="xy-table-item-content">
<el-input v-model="form.name" placeholder="请输入名称" clearable style="width: 300px;"></el-input>
</div>
</div>
</template>
<template v-slot:items>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>政策:
</div>
<div class="xy-table-item-content" style="min-width: 640px">
<el-form-item v-for="(item,index) in form.items" :key="item.index">
<div class="xy-table-item-content-items">
<div class="xy-table-item-content-items-item">
<div class="xy-table-item-content-items-item__title">{{'政策'+item.index}}</div>
</div>
<div class="xy-table-item-content-items-item">
<div class="xy-table-item-content-items-item__label">操作</div>
<el-select v-model="item.action" style="width: 160px;">
<el-option v-for="(value,key) of actions" :value="key" :label="value"></el-option>
</el-select>
</div>
<div class="xy-table-item-content-items-item">
<div class="xy-table-item-content-items-item__label">计时</div>
<el-input-number style="width: 100px;" :controls="false" :precision="1" v-model="item.timer"></el-input-number>
</div>
<div class="xy-table-item-content-items-item">
<div class="xy-table-item-content-items-item__label">对订单操作</div>
<el-select multiple v-model="item.operations" style="width: 160px;">
<el-option v-for="(value,key) of operations" :value="key" :label="value"></el-option>
</el-select>
</div>
<div class="xy-table-item-content-items-item">
<div class="xy-table-item-content-items-item__label">佣金比</div>
<el-input-number class="xy-table-item-content-items-item__percent" style="width: 100px;" v-model="item.fee_ratio" :controls="false" :precision="2"></el-input-number>
</div>
<div class="xy-table-item-content-items-item">
<el-button type="primary" size="small" icon="el-icon-minus" style="width: 80px;" @click="removePolicy(item.index)"></el-button>
</div>
</div>
</el-form-item>
<Button style="width: 200px;margin-top:20px;position: relative;left: 50%;transform: translateX(-50%);" type="dashed" @click="addPolicy" icon="md-add">新增政策</Button>
</div>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import {store,save} from '@/api/policy'
import { Message } from 'element-ui'
export default {
data() {
var itemsCheck = (rule, value, callback) => {
if(value.length === 0){
callback()
}else{
value.forEach(item => {
if(!item.action){
return callback(new Error(`请填写政策${item.index}操作`))
}
if(item.operations.length === 0){
return callback(new Error(`请选择政策${item.index}对订单操作`))
}
callback()
})
}
}
return {
id:'',
isShow:false,
type:'',
policyIndex:0,
actions:{
follow:'跟进',
assign:'分发',
recover:'收回',
cancel:'取消',
follow_by_merchant:'跟进',
accept_by_merchant:'接受',
return_by_merchant:'退回',
confirm_by_merchant:'确认有效',
finish_by_merchant:'核销',
mark_cancel_by_member:'用户退单',
mark_cancel_by_merchant:'标注退单',
confirm_merchant_cancel:'确认商家标注无效',
confirm_member_cancel:'确认用户退单'
},
operations:{
auto_accept:'自动接收',
auto_confirm:'自动确认',
auto_recover:'自动回收',
auto_fee:'自动扣除佣金',
auto_refund_fee:'自动反佣',
manually_refund_fee:'手工返佣',
auto_finish:'自动核销'
},
detail:{},
form:{
name:'',
items:[]
},
rules:{
name:[
{required:true,message:'请填写名称'}
],
items:[
{ validator: itemsCheck, trigger: 'blur' }
]
}
}
},
methods: {
getDetail(){
this.form.name = this.detail.name
this.form.items = this.detail.items.map(item => {
return {
index:++this.policyIndex,
action:item?.action,
timer:item?.timer,
operations:item?.operations.split(','),
fee_ratio:item?.fee_ratio,
}
})
},
addPolicy(){
this.form.items.push({
index:++this.policyIndex,
action:'',
timer:'',
operations:[],
fee_ratio:'',
})
},
removePolicy(index){
this.form.items.map((item,index1)=>{
if(index == item.index){
this.form.items.splice(index1,1)
}
})
},
submit(){
if(this.type === 'add'){
this.form.items.forEach(item => {
item.operations = item.operations.toString()
})
console.log(this.form)
store({
name:this.form.name,
items:this.form.items
}).then(res => {
Message({
type:'success',
message:'添加政策成功'
})
this.isShow = false
this.$emit('refresh')
})
return
}
if(this.type === 'editor'){
this.form.items.forEach(item => {
item.operations = item.operations.toString()
})
console.log(this.form)
save({
id:this.id,
name:this.form.name,
items:this.form.items
}).then(res => {
Message({
type:'success',
message:'编辑政策成功'
})
this.isShow = false
this.$emit('refresh')
})
return
}
}
},
computed:{
},
watch:{
isShow(newVal){
if(newVal){
if(this.type === 'editor'){
this.getDetail()
}
}else{
this.policyIndex = 0
this.id = ''
this.type = ''
this.$refs['dialog'].reset()
}
}
}
}
</script>
<style scoped lang="scss">
.xy-table-item-label{
width: 130px;
}
.xy-table-item-content-items{
display: flex;
&-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 10px;
margin-right: 10px;
&__title{
width: 100px;
word-break: keep-all;
white-space: nowrap;
font-weight: 600;
text-align: center;
}
&__label{
word-break: keep-all;
white-space: nowrap;
padding: 0 10px;
}
&__percent{
position: relative;
&::after{
content:'%';
position: absolute;
right: 6%;
top: 0;
}
}
}
}
::v-deep .el-input__inner{
text-align: left;
}
</style>