form.vue 7.83 KB
<template>
  <el-dialog :close-on-click-modal="false" :title="isAdd?'新建规则':'编辑规则'" width="600px" :visible.sync="visible">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="规则名称" prop="ruleName">
        <el-input v-model="form.ruleName"></el-input>
      </el-form-item>
      <el-form-item label="规则关系">
        <el-radio-group v-model="form.ruleType">
          <el-radio :label="1">满足以下任一规则</el-radio>
          <el-radio :label="2">满足以下全部规则</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="group-head">
        <b>基础规则1: 创建订单数限制</b>
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="form.ruleSwitchPlaceOrder"
        >
        </el-switch>
      </div>
      <div class="group-body">
        最近
        <el-input type="number" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="rulePlaceOrderLimit.timeNum" placeholder="输入小时数"></el-input>
        小时,创建订单数
        <el-select v-model="rulePlaceOrderLimit.compare" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input class="mar-l" type="number" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="rulePlaceOrderLimit.num" placeholder="输入订单数"></el-input>
      </div>
      <div class="group-head">
        <b>基础规则2: 待付款订单数限制</b>
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="form.ruleSwitchWaitPay"
        >
        </el-switch>
      </div>
      <div class="group-body">
        最近
        <el-input type="number" v-model="ruleWaitPayLimit.timeNum" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="输入小时数"></el-input>
        小时,待付款订单数
        <el-select v-model="ruleWaitPayLimit.compare" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input class="mar-l" type="number" v-model="ruleWaitPayLimit.num" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="输入订单数"></el-input>
      </div>
      <div class="group-head">
        <b>基础规则3: 单sku商品采购数限制</b>
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="form.ruleSwitchSku"
        >
        </el-switch>
      </div>
      <div class="group-body">
        单sku商品采购数量
        <el-select v-model="ruleSkuLimit.compare" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input class="mar-l" type="number" v-model="ruleSkuLimit.num" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="输入采购数"></el-input>
      </div>
      <div class="group-head">
        <b>基础规则4: 售后订单数限制</b>
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="form.ruleSwitchPostSale"
        >
        </el-switch>
      </div>
      <div class="group-body">
        最近
        <el-input type="number" v-model="rulePostSaleLimit.timeNum" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="输入月数"></el-input>
        个月,售后订单数
        <el-select v-model="rulePostSaleLimit.compare" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input class="mar-l" type="number" v-model="rulePostSaleLimit.num" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="输入采购数"></el-input>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="doCancel">取消</el-button>
      <el-button type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addRule,
  updateRule
} from '@/api/risk'
export default {
  name: 'AdForm',
  data () {
    return {
      visible: false,
      form: {
        ruleName: '',
        ruleType: 1,
        ruleSwitchPlaceOrder: 0,
        ruleSwitchPostSale: 0,
        ruleSwitchSku: 0,
        ruleSwitchWaitPay: 0,
        rulePlaceOrderLimit: {},
        rulePostSaleLimit: {},
        ruleSkuLimit: {},
        ruleWaitPayLimit: {}
      },
      rules: {
        ruleName: [
          { required: true, message: '规则名称不能为空', trigger: 'blur' }
        ]
      },
      rulePlaceOrderLimit: {
        timeNum: 0,
        compare: 'lt',
        num: 0
      },
      rulePostSaleLimit: {
        timeNum: 0,
        compare: 'lt',
        num: 0
      },
      ruleSkuLimit: {
        compare: 'lt',
        num: 0
      },
      ruleWaitPayLimit: {
        timeNum: 0,
        compare: 'lt',
        num: 0
      },
      cateId: null,
      options: [{
        value: 'lt',
        label: '小于'
      }, {
        value: 'eq',
        label: '等于'
      }, {
        value: 'gt',
        label: '大于'
      }],
      isAdd: false
    }
  },
  methods: {
    // 打开弹出窗
    show (row) {
      this.isAdd = !row
      if (this.isAdd) {
        this.form = {
          ruleName: '',
          ruleType: 1,
          ruleSwitchPlaceOrder: 0,
          ruleSwitchPostSale: 0,
          ruleSwitchSku: 0,
          ruleSwitchWaitPay: 0,
          status: 1,
        }
        this.rulePlaceOrderLimit = {}
        this.rulePostSaleLimit = {}
        this.ruleSkuLimit = {}
        this.ruleWaitPayLimit = {}
      } else {
        this.form = JSON.parse(JSON.stringify(row))
        this.rulePlaceOrderLimit = JSON.parse(row.rulePlaceOrderLimit)
        this.rulePostSaleLimit = JSON.parse(row.rulePostSaleLimit)
        this.ruleSkuLimit = JSON.parse(row.ruleSkuLimit)
        this.ruleWaitPayLimit = JSON.parse(row.ruleWaitPayLimit)
      }
      this.visible = true
    },
    // 取消
    doCancel () {
      this.visible = false
    },
    // 提交
    doSubmit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.rulePlaceOrderLimit = JSON.stringify(this.rulePlaceOrderLimit)
          this.form.rulePostSaleLimit = JSON.stringify(this.rulePostSaleLimit)
          this.form.ruleSkuLimit = JSON.stringify(this.ruleSkuLimit)
          this.form.ruleWaitPayLimit = JSON.stringify(this.ruleWaitPayLimit)
          if (this.isAdd) {
            addRule(this.form).then(res => {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.$emit('reset')
              this.visible = false
            }).catch(err => {
              this.visible = false
            })
          } else {
            updateRule(this.form).then(res => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.$emit('reset')
              this.visible = false
            }).catch(err => {
              this.visible = false
            })
          }
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.group-head{
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  b{}
}
.group-body{
  margin-bottom: 30px;
  .el-input{
    width: 100px;
    >>> .el-input__inner{
      padding-right: 0;
    }
  }
  .el-select{
    width: 100px;
  }
  .mar-l{
    margin-left: 10px;
  }
}
.el-table .el-button{
  margin-left: 0;
}
</style>