yos_web/src/HDrpManagement/ProductMag/modules/components/addScheme.vue

<template>
  <div>
    <el-button size="small" type="primary" @click="onAdd(dialogVisible = true)">{{$t(`新建方案`)}}</el-button>
    <el-drawer
        :title="$t(`新建提成方案`)"
        :visible.sync="dialogVisible"
        :wrapperClosable="false"
        size="900px"
        direction="rtl"
        append-to-body
        @close="onClose">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules" ref="form" :label-width="tool.onlyZh('90px')" label-position="right" size="mini">
            <el-col :span="12">
              <el-form-item :label="$t(`商品大类`)" prop="value">
                <el-select v-model="form.value" style="width:100%">
                  <el-option v-for="item in categoriesList" :key="item.index" :value="item.value" :label="$t(item.remarks)"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`产品售价折扣区间及其提成比例`)+':'" prop="valuereward" :label-width="tool.onlyZh('245px')">
                <span style="color:#c0c4cc;">({{$t(`上限值、下限值表示为牌价的折扣值`)}})</span>
                <el-button size="small" type="success" style="float: right" @click="delRow" :disabled="list.length === 0">{{$t(`删除末行`)}}</el-button>
                <el-button size="small" type="primary" style="float: right" class="inline-16" @click="addRow">{{$t(`添加行`)}}</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <tableLayout :layout="tablecols" :data="list" :opwidth="200" :custom="true" :height="'600px'">
                <template v-slot:customcol="scope">
                  <div v-if="scope.column.columnname === 'rewardstart'">
                    <el-input v-model="scope.column.data.rewardstart" :placeholder="$t(`请填写`)" type="number" ></el-input>
                  </div>
                  <div v-else-if="scope.column.columnname === 'includerewardstart'">
                    <el-select v-model="scope.column.data.includerewardstart" :placeholder="$t('请选择')">
                      <el-option :label="$t(`是`)" value="1"></el-option>
                      <el-option :label="$t(`否`)" value="0"></el-option>
                    </el-select>
                  </div>
                  <div v-else-if="scope.column.columnname === 'rewardend'">
                    <el-input v-model="scope.column.data.rewardend" :placeholder="$t(`请填写`)" type="number"></el-input>
                  </div>
                  <div v-else-if="scope.column.columnname === 'includerewardend'">
                    <el-select v-model="scope.column.data.includerewardend" :placeholder="$t('请选择')">
                      <el-option :label="$t(`是`)" value="1"></el-option>
                      <el-option :label="$t(`否`)" value="0"></el-option>
                    </el-select>
                  </div>
                  <div v-else-if="scope.column.columnname === 'reward_rate'">
                    <el-input v-model="scope.column.data.reward_rate" :placeholder="$t(`请填写`)" type="number"></el-input>
                  </div>
                  <p v-else>{{$t(scope.column.data[scope.column.columnname])}}</p>
                </template>
              </tableLayout>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onClose" class="normal-btn-width">{{$t('取 消')}}</el-button>
        <el-button size="small" type="primary" :loading="loading" @click="onSubmit" class="normal-btn-width">{{$t(`确定保存`)}}</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "addScheme",
  data(){
    return {
      dialogVisible:false,
      form:{
        "action": "1",//1 新增 0 更新
        "type":'商品大类',
        "value": "",//商品大类
        "valuereward": []
      },
      rules:{
        value:[
          { required: true, message: this.$t('未选择商品大类'), trigger: 'change'},
        ],
        valuereward:[
          { required: true, message: this.$t('未设置产品售价折扣区间及其提成比例'), trigger: 'change'},
        ],
      },
      categoriesList:[],
      tablecols:[],
      list:[],
      loading:false,
      errorMessage:""
    }
  },
  methods:{
    onAdd(){
      this.getCategoriesList()
    },
    addRow(){
      this.list.push(
        {
          "rewardstart": "",
          "rewardend": "",
          "includerewardstart": "0",
          "includerewardend": "0",
          "reward_rate": "0",
          "rowindex":this.list.length + 1
        }
      )
    },
    delRow(){
      this.list.pop()
    },
    /*获取可选商品大类*/
    async getCategoriesList () {
      const res = await this.$store.dispatch('optiontypeselect','categories')
      this.categoriesList = res.data
    },
    validateInput(value1,value2){
      if (value1 && value2 !== ''){
        if (value1 > value2){
          this.errorMessage = this.$t('不合法')
          return false
        }
      }

    },
    onSubmit(){
      this.form.valuereward = this.list
      this.$refs.form.validate(async (valid)=>{
        if (!valid) return false
        this.form.action = '1'
        this.form.valuereward.forEach(item=>{
          item.rewardstart = item.rewardstart?(item.rewardstart/100).toFixed(4):''
          item.rewardend = item.rewardend?(item.rewardend/100).toFixed(4):''
          item.reward_rate = item.reward_rate?(item.reward_rate/100).toFixed(4):0
        })
        const res = await this.$api.requested({
          "id": 20240311150704,
          "content":this.form
        })
        if (res.code === 0){
          this.form.valuereward.forEach(item=>{
            item.rewardstart = item.rewardstart?Math.round((item.rewardstart*100)*100)/100:''
            item.rewardend = item.rewardend?Math.round((item.rewardend*100)*100)/100:''
            item.reward_rate = item.reward_rate?Math.round((item.reward_rate*100)*100)/100:0
          })
        }
        this.tool.showMessage(res,()=>{
          this.form = {
            "action": "1",//0 新增 1 更新
            "type":'商品大类',
            "value": "",//商品大类
            "valuereward": []
          }
          this.list = []
          this.dialogVisible = false
          this.$emit('addSuccess')
        })
      })
    },
    onClose(){
      this.form = {
        "action": "0",//0 新增 1 更新
        "type":'商品大类',
        "value": "",//商品大类
        "valuereward": []
      }
      this.list = []
      this.dialogVisible = false
      this.$emit('addSuccess')
    }
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).commissionSet.tablecols
  }
}
</script>

<style scoped>

</style>