ldt-manger-web/src/views/ldt_mall/comps/mall-product-fee.vue

<template>
  <basic-container>
    <el-select v-model="productCodeSelect.value" placeholder="请选择商户" size="small" style="width:100%" @change="selectChange">
      <el-option
        v-for="opt in productCodeSelect.option"
        :key="opt.productCode"
        :label="opt.productName"
        :value="opt.productCode">
        <span style="float: left">{{ opt.productName }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ opt.productCode }}</span>
      </el-option>
    </el-select>
    <el-divider/>
    <avue-form ref="form" v-model="form" :option="option" @submit="submit"></avue-form>
  </basic-container>
</template>

<script>
import {
  queryProductFee,
  modifyProductFee
} from "@/api/ldt_mall/mall";

export default {
  props: {
    operateId: String
  },
  data() {
    return {
      form: {},
      productCodeSelect:{
        value:"",
        option:[]
      },
      option: {
        submitText: '保存',
        labelWidth: 150,
        entryBtn: false,
        column: [
          {
            label: '产品码',
            prop: 'productCode',
            disabled: true,
            rules: [
              {
                required: true,
                message: '请输入产品码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '计费策略',
            prop: 'rateType',
            type: 'select',
            change:(value)=>{
              const percentRate = this.option.column.find(ele=>{
                return ele.prop==='percentRate';
              });
              const fixedRate = this.option.column.find(ele=>{
                return ele.prop==='fixedRate';
              });
              switch (value.value){
                case "SINGLE_PERCENT":
                  percentRate.disabled = false;
                  percentRate.rules[0].required = true;
                  fixedRate.disabled = true;
                  fixedRate.rules[0].required = false;
                  break;
                case "SINGLE_FIXED":
                  percentRate.disabled = true;
                  percentRate.rules[0].required = false;
                  fixedRate.disabled = false;
                  fixedRate.rules[0].required = true;
                  break;
                case "FIXED_MIX_PERCENT":
                case "PERCENT_MIX_CAP":
                  percentRate.disabled = false;
                  percentRate.rules[0].required = true;
                  fixedRate.disabled = false;
                  fixedRate.rules[0].required = true;
                  break;
                default:
                  break;
              }
            },
            dicData: [
              {
                label:'单笔百分比',
                value:'SINGLE_PERCENT',
              },
              {
                label:'单笔固定值',
                value:'SINGLE_FIXED',
              },
              {
                label:'单笔固定值+单笔百分比',
                value:'FIXED_MIX_PERCENT',
              },
              {
                label:'单笔百分比+封顶值',
                value:'PERCENT_MIX_CAP',
              }
            ],
            rules: [
              {
                required: true,
                message: '请输入积分策略',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '单笔百分比',
            prop: 'percentRate',
            rules: [
              {
                required: false,
                message: '请输入单笔百分比',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '单笔固定值',
            prop: 'fixedRate',
            rules: [
              {
                required: false,
                message: '请输入单笔固定值',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '手续费承担方',
            prop: 'undertaker',
            type: 'select',
            dicData: [
              {
                label: '入驻商户',
                value: 'SETTLED_MERCHANT'
              },
              {
                label: '用户',
                value: 'USER'
              },
              {
                label: '标准商户',
                value: 'ORDINARY_MERCHANT'
              },
              {
                label: '平台商',
                value: 'PLATFORM_MERCHANT'
              },
              {
                label: '服务商',
                value: 'SAAS_SERVICE_PROVIDER'
              }
            ],
            rules: [
              {
                required: false,
                message: '请输入手续费承担方',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '手续费收取方式',
            prop: 'paymentMethod',
            type: 'select',
            dicData: [
              {
                label: '实收',
                value: 'REAL_TIME'
              },
              {
                label: '预付实扣',
                value: 'PREPAID_REAL'
              },
              {
                label: '后收',
                value: 'UN_REAL_TIME'
              }
            ],
            rules: [
              {
                required: false,
                message: '请输入手续费收取方式',
                trigger: 'blur'
              }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      queryProductFee({
        id:this.operateId
      }).then(res=>{
        this.productCodeSelect.option = res.data.data;
        this.productCodeSelect.value = res.data.data[0].productCode;
        this.selectChange(res.data.data[0].productCode);
      });
    },
    /**
     * 选择下拉框值
     * @param value
     */
    selectChange(value){
      const tab = this.productCodeSelect.option.find(ele=>{
        return ele.productCode===value;
      });
      this.form = tab;
    },
    submit(data, done) {
      const content = this.productCodeSelect.option.find(col=>{
        return col.productCode===data.productCode;
      });
      //拷贝对象值
      Object.assign(content,data);
      modifyProductFee({
        id:this.operateId,
        modifyProductInfo:JSON.stringify(this.productCodeSelect.option)
      }).then(res=>{
        this.$message.success("修改成功");
        done();
      },error => done());
      done();
    }
  }
};
</script>

<style>
</style>