ldt-manger-web/src/views/ldt_platform/platformsetting.vue

<template>
  <basic-container>
    <el-tabs type="border-card">
      <el-tab-pane :label="item.label" v-for="(item,key) in option" :key="key">
        <div v-if="item.key==='YEEPAY_PRODUCT_INFO'">
          <el-select v-model="item.value" placeholder="请选择商户" size="small" style="width:100%" @change="selectChange(item)">
            <el-option
              v-for="opt in item.opt"
              :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>
        </div>
        <el-divider/>
        <avue-form :option="item.option" v-model="item.data"
                   @submit="(data,done)=>{submit(data,done,item)}"></avue-form>
      </el-tab-pane>
    </el-tabs>
  </basic-container>
</template>

<script>
import {getList, update} from "@/api/ldt_platform/platformsetting";

export default {
  data() {
    return {
      option: [
        {
          label: "城市分红",
          id: "",
          key: "agent_city_setting",
          option: {
            labelWidth: 160,
            emptyBtn: false,
            column: [
              {
                label: '独家代理商分红率',
                prop: 'cityRate',
                type: 'number',
                rules: [
                  {
                    required: true,
                    message: '请输入分红率',
                    trigger: 'blur'
                  }
                ]
              },
              {
                label: '渠道合作伙伴分红率',
                prop: 'promoteRate',
                type: 'number',
                rules: [
                  {
                    required: true,
                    message: '请输入分红率',
                    trigger: 'blur'
                  }
                ]
              },
              {
                label: '保证金',
                prop: 'cost',
                type: 'number',
                rules: [
                  {
                    required: true,
                    message: '请输入分红率',
                    trigger: 'blur'
                  }
                ]
              }]
          },
          data: {}
        }, {
          label: "推广商店",
          id: "",
          key: "agent_channel_setting",
          option: {
            emptyBtn: false,
            labelWidth: 160,
            column: [
              {
                label: '独家代理商分红率',
                prop: 'cityRate',
                type: 'number',
                rules: [
                  {
                    required: true,
                    message: '请输入分红率',
                    trigger: 'blur'
                  }
                ]
              },
              {
                label: '渠道合作伙伴分红率',
                prop: 'promoteRate',
                type: 'number',
                rules: [
                  {
                    required: true,
                    message: '请输入分红率',
                    trigger: 'blur'
                  }
                ]
              },
              {
                label: '保证金',
                prop: 'cost',
                type: 'number',
                rules: [
                  {
                    required: true,
                    message: '请输入分红率',
                    trigger: 'blur'
                  }
                ]
              }]
          },
          data: {}
        }, {
          label: "平台费用",
          id: "",
          key: "platform_arg",
          option: {
            emptyBtn: false,
            labelWidth: 100,
            column: [
              {
                label: '服务费率',
                prop: 'serviceFee',
                type: 'number',
                rules: [
                  {
                    required: true,
                    message: '请输入分红率',
                    trigger: 'blur'
                  }
                ]
              },
              {
                label: '积分费率',
                prop: 'pointFee',
                type: 'number',
                rules: [
                  {
                    required: true,
                    message: '请输入分红率',
                    trigger: 'blur'
                  }
                ]
              }]
          },
          data: {}
        }, {
          label: "商户易宝",
          id: "",
          key: "YEEPAY_PRODUCT_INFO",
          option: {
            labelWidth: 160,
            emptyBtn: false,
            column: [
              {
                label: '产品码',
                prop: 'productCode',
                disabled: true,
                rules: [
                  {
                    required: true,
                    message: '请输入产品码',
                    trigger: 'blur'
                  }
                ]
              },
              {
                label: '计费策略',
                prop: 'rateType',
                type: 'select',
                change:(value)=>{
                  const percentRate = this.option[3].option.column.find(ele=>{
                    return ele.prop==='percentRate';
                  });
                  const fixedRate = this.option[3].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',
                disabled: true,
                rules: [
                  {
                    required: false,
                    message: '请输入单笔百分比',
                    trigger: 'blur'
                  }
                ]
              },
              {
                label: '单笔固定值',
                prop: 'fixedRate',
                disabled: true,
                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'
                  }
                ]
              }
            ]
          },
          data: {},
          opt:[],
          value:"",
        }
      ]
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      getList(1, 10).then(res => {
        res.data.data.records.forEach(ele => {
          //查找对应的选项卡
          const tab = this.option.find(col => {
            return col.key === ele.settingKey;
          });
          if (tab) {
            tab.id = ele.id;
            if(tab.key!=="YEEPAY_PRODUCT_INFO"){
              tab.data = JSON.parse(ele.settingValue);
            }else{ //易宝
              tab.opt = JSON.parse(ele.settingValue);
              tab.value = tab.opt[0].productCode;
              this.selectChange(tab);
            }
          }
        });
      });
    },
    /**
     * 选择下拉框值
     * @param value
     */
    selectChange(tab){
      if(tab){
        tab.data = tab.opt.find(col=>{
          return col.productCode === tab.value;
        });
      }
    },
    submit(data, done, item) {
      //判断是否是易宝提交
      if(item.key === "YEEPAY_PRODUCT_INFO"){
        const content = item.opt.find(col=>{
          return col.productCode===data.productCode;
        });
        //拷贝对象值
        Object.assign(content,data);
        data = item.opt;
      }
      update({
        "id": item.id,
        "settingKey": item.key,
        "settingValue": JSON.stringify(data)
      }).then(() => {
        this.$message({
          type: "success",
          message: "修改成功!"
        });
        done();
      });
    }
  }
};
</script>

<style>
</style>