yunyubang-web/src/views/productService/components/addPolicy.vue

<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>