yos_meida/src/HManagement/siteManage/paymentRules/modules/accountRule.vue

<template>
  <div>
    <div class="div-border" v-for="(item,rowIndex) in ruleList" :key="rowIndex">
      <el-row :gutter="20" style="margin-top: 10px;margin-left: 10px">
        <el-col style="margin-bottom: 10px">
          <el-button type="primary" icon="el-icon-delete" style="float: right;margin-right: 10px" :disabled="!disabled" v-if="index !== rowIndex && ruleList.length > 1 && tool.checkAuth($route.name,'delete')" @click="onDel(item)"></el-button>
          <el-button type="primary" icon="el-icon-edit" style="float: right;margin-right: 10px" v-if="index !== rowIndex && tool.checkAuth($route.name,'update')" :disabled="!disabled" @click="onEdit(rowIndex)"></el-button>
          <el-button type="warning" icon="el-icon-circle-check" style="float: right;margin-right: 10px" v-if="isSave && index === rowIndex && tool.checkAuth($route.name,'update')" :disabled="!disabled" @click="onSave(item,rowIndex)"></el-button>
        </el-col>
        <el-form :model="item"  :rules="rules" ref="form" label-width="120px" label-position="right" size="mini" :disabled="!disabled || !isSave || index !== rowIndex">
          <el-col  :span="20">
            <el-form-item label="账号类型:" prop="usertype" >
              <el-select v-model="item.usertype" placeholder="请选择" style="width: 100%" >
                <el-option
                    v-for="item in accountType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col  :span="20">
            <el-form-item label="版本:" prop="sys_site_systempartitionid">
              <el-select v-model="item.sys_site_systempartitionid" placeholder="请选择" style="width: 100%">
                <el-option
                    v-for="item in versionList"
                    :key="item.sys_site_systempartitionid"
                    :label="item.partitionname"
                    :value="item.sys_site_systempartitionid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" >
            <div style="width: 650px;margin-left: 15px" v-for="(ruleItem,ruleIndex) in item.paymentrules" :key="ruleIndex">
              <el-col :span="6">
                <el-form-item label="最少人数:"  label-width="90px"
                              :prop="'paymentrules.' + ruleIndex + '.min'"
                              :rules="{required: true, message: '人数不能为空', trigger: 'blur'}">
                  <el-input v-model="ruleItem.min" placeholder="请填写人数"  type="number"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="最多人数:"  label-width="90px"
                              :prop="'paymentrules.' + ruleIndex + '.max'"
                              :rules="{required: true, message: '人数不能为空', trigger: 'blur'}">
                  <el-input v-model="ruleItem.max" placeholder="请填写人数" type="number"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="定价(元):"  label-width="90px"
                              :prop="'paymentrules.' + ruleIndex + '.price'"
                              :rules="{required: true,pattern:/^\d+(.\d{1,2})?$/, message: '只能输入数字且最多2位小数', trigger: 'blur'}">
                  <el-input v-model="ruleItem.price" placeholder="请填写金额(元)"  type="number"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button size="mini" type="primary" icon="el-icon-plus" circle v-if="ruleIndex === item.paymentrules.length -1 && tool.checkAuth($route.name,'insert')" class="inline-16" @click="addPrice(rowIndex)"></el-button>
                <el-button size="mini" type="info" icon="el-icon-close" circle v-if="item.paymentrules.length >1 && tool.checkAuth($route.name,'update')" @click="delPrice(ruleIndex,rowIndex)"></el-button>
              </el-col>
            </div>

          </el-col>
        </el-form>
      </el-row>
    </div>
    <div  class="div-button">
      <el-button style="border: none;" :disabled="!disabled" icon="el-icon-plus" class="btn-block" @click="addRule" v-if="tool.checkAuth($route.name,'insert')">添 加</el-button>
    </div>
  </div>
</template>

<script>
import {log} from "@antv/g2plot/lib/utils";

export default {
  name: "accountRule",
  props:["disabled"],
  data() {
    return {
      form: {
        "type": 1, //1：按账号付费，2：按主体付费
        "sys_site_paymentrulesid": 0,
        "sys_site_systempartitionid": '', //系统版本ID
        "usertype": '', //用户类型，按账号付费时必填
        "paymentrules": [
          {
            "min": 0,
            "max": 5,
            "price": 100
          }
        ], //定价规则,按账号付费时必填
        "price": '' //定价，按主体付费时必填
      },
      rules:{
        usertype: [
          { required: true, message: '请选择账户类型', trigger: 'change' },
        ],
        sys_site_systempartitionid: [
          { required: true, message: '请选择版本', trigger: 'change' },
        ],

      },
      isSave:false,
      accountType:[
        {
          value: '21',
          label: '主账号'
        },
        {
          value: '22',
          label: '子账号'
        }
      ],
      versionList:[],
      ruleList:[],
      index:''
    }
  },
  methods: {
    /*查询按账号付费规则*/
    async listData(){
      this.ruleList = []
      const res = await this.$api.requested({
        "classname": "webmanage.site.paymentrules",
        "method": "list",
        "content": {
          "type": 1, //1：按账号付费，2：按主体付费
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ""
          }
        },
      })
      if (res.data.length < 1){
        this.ruleList.push({
          "type": 1, //1：按账号付费，2：按主体付费
          "sys_site_paymentrulesid": 0,
          "sys_site_systempartitionid": '', //系统版本ID
          "usertype": '', //用户类型，按账号付费时必填
          "paymentrules": [
            {
              "min": '',
              "max": '',
              "price": ''
            },
          ], //定价规则,按账号付费时必填
          "price": '' //定价，按主体付费时必填
        })
      }else {
        this.ruleList = res.data
      }
      this.ruleList.forEach(item=>{

        if (item.usertype == '21'){
          item.usertype = '主账号'
        }else {
          item.usertype = '子账号'
        }
      })


    },
    /*获取版本信息*/
    async queryVersion(){
      const res = await this.$api.requested({
        "classname": "webmanage.site.systempartition",
        "method": "list",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ""
          }
        },
      })
      this.versionList = res.data
    },
    /*配置价格*/
    addPrice(val){
      this.ruleList[val].paymentrules.push({
        "min": '',
        "max": '',
        "price": ''
      })
    },
    delPrice(val,rowIndex) {
      console.log(val,'删除价格')
      console.log(this.ruleList)
      this.ruleList[rowIndex].paymentrules.splice(val,1)
    },
    onEdit(val){
      this.index = val
      this.isSave = true
    },
    /*提交保存*/
    onSave(val,rowIndex){
      console.log(val,'保存')
      if (val.usertype === '主账号'){
        val.usertype = '21'
      }else if (val.usertype === '子账号'){
        val.usertype = '22'
      }
      val = {
        "type": 1, //1：按账号付费，2：按主体付费
        "sys_site_paymentrulesid": val.sys_site_paymentrulesid,
        "sys_site_systempartitionid": val.sys_site_systempartitionid, //系统版本ID
        "usertype": val.usertype, //用户类型，按账号付费时必填
        "paymentrules": val.paymentrules, //定价规则,按账号付费时必填
        "price": val.price //定价，按主体付费时必填
      }
       this.$refs.form[rowIndex].validate(async (valid) => {
        if (!valid) return false
         const res = await this.$api.requested({
           "classname": "webmanage.site.paymentrules",
           "method": "insertOrUpdate",
           "content": val,
         })
         this.isSave = false
         this.index = ''
         this.listData()
      })

    },
    /*新增规则*/
    addRule(val){
      this.ruleList.push({
        "type": 1, //1：按账号付费，2：按主体付费
        "sys_site_paymentrulesid": 0,
        "sys_site_systempartitionid": '', //系统版本ID
        "usertype": '', //用户类型，按账号付费时必填
        "paymentrules": [
          {
            "min": '',
            "max": '',
            "price": ''
          },
        ], //定价规则,按账号付费时必填
        "price": '' //定价，按主体付费时必填
      })
      this.index = this.ruleList.length -1
      this.isSave = true
    },
    /*删除规则*/
    async onDel(val){
      this.$confirm('此操作将永久删除该规则, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$api.requested({
          "classname": "webmanage.site.paymentrules",
          "method": "delete",
          "content": {
            "sys_site_paymentrulesid": val.sys_site_paymentrulesid
          },
        })
        this.tool.showMessage(res,()=>{
          this.listData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    }
  },
  mounted() {
    this.listData()
    this.queryVersion()
  }
}
</script>

<style scoped>
  .div-border{
    width: 100%;
    height: 390px;
    border: 2px dashed #c9c3c3;
    border-radius: 5px;
    margin-bottom: 20px;
    overflow:auto;
  }
  .div-button{
    width: 100%;
    height: 30px;
    border: 2px dashed #c9c3c3;
    border-radius: 5px;
    margin-bottom: 20px;
  }
  .btn-block {
    display: block;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    padding-top: 10px;
  }

</style>