agmp_wpr_vue/src/views/infrastructure/components/setAnnualWaterRight.vue

<template>
  <el-dialog
    title="修改"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
    width="660px"
  >
  <el-tooltip
    class="item_tooltip" 
    effect="dark"
    content="操作提示：设置每亩农田同水量的水价信息和用电量的电价信息"
    placement="right"
  >
    <i class="el-alert__icon el-icon-info"></i>
  </el-tooltip>
    <el-form
      ref="baseForm"
      class="base-form"
      label-position="right"
      label-width="100px"
      :model="baseForm"
      size="small"
    >
    <el-row>
      <el-col :span="24">
        <el-form-item label="所属区域">
          <el-row>
            <el-col :span="24">
              <el-input
                style="width: 100%"
                placeholder="请选择您的行政区"
                disabled
                v-model="editRow.cusareaName"
              />
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <h3>水价</h3>
      <el-col :span="24">
        <el-form-item label="水价计费方式">
          <el-row>
            <el-col :span="18">
              <el-radio v-model="constantWaterPrice" label="0">恒定水价</el-radio>
              <el-radio v-model="constantWaterPrice" label="1">阶梯水价</el-radio>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="水价" 
          v-if="constantWaterPrice == 0" 
          prop="priceconfigWaterunitprice"
          :rules="[{ required: true, message: '请选择您的恒定水价', trigger: 'blur' }]"
        >
          <el-row>
            <el-col :span="18">
              <el-input
                style="width: 50%"
                type="number"
                v-model="baseForm.priceconfigWaterunitprice"
              />
              <span style="display:inline-block;margin-left:5px">元/吨</span>
            </el-col>
          </el-row>
        </el-form-item>
        <ladderLikeWaterPrice
          v-else
          :type="'water'"
          @changeList="changeList"
          :list="baseForm.waterPriceSteps || []"
        />
      </el-col>
    </el-row>
    <el-row>
      <h3>电价</h3>
      <el-col :span="24">
        <el-form-item label="电价计费方式">
          <el-row>
            <el-col :span="18">
              <el-radio v-model="ladderLikeWaterPrice" label="0">恒定电价</el-radio>
              <el-radio v-model="ladderLikeWaterPrice" label="1">阶梯电价</el-radio>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          label="电价"
          v-if="ladderLikeWaterPrice == 0"
          :rules="[{ required: true, message: '请选择您的恒定电价', trigger: 'blur' }]"
          prop="priceconfigElectricityunitprice"
        >
          <el-row>
            <el-col :span="18">
              <el-input 
                style="width: 50%" 
                type="number"
                v-model="baseForm.priceconfigElectricityunitprice"
              />
              <span style="display:inline-block;margin-left:5px">元/度</span>
            </el-col>
          </el-row>
        </el-form-item>
        <ladderLikeWaterPrice 
          v-else
          :type="'electricity'"
          @changeList="changeList"
          :list="baseForm.elecPriceSteps || []"
        />
      </el-col>
    </el-row>
    </el-form>

    <div style="text-align: right;margin-top: 20px;">
      <el-button type="info" plain @click="resetForm('baseForm')"
        >取消</el-button
      >
      <el-button
        type="primary"
        style="margin-left:16px;"
        @click="submitForm('baseForm')"
        :disabled="dialogSubmitLoading"
        :loading="dialogSubmitLoading"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { assign } from 'lodash-es';
import { Message  } from 'element-ui'
import ladderLikeWaterPrice from './ladderLikeWaterPrice.vue'
import { editPrice } from '@/api/price/index.js'
export default {
  name: 'setAnnualWaterRight',
  props: {
    data: {
      default() {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    editRow: {
      type: Object
    }
  },
  components: {
    ladderLikeWaterPrice
  },
  data() {
    return {
      dialogSubmitLoading: false,
      constantWaterPrice: '1',
      ladderLikeWaterPrice: '1',
      dialogVisible: false,
      priceconfigElectricityunitprice: '',
      priceconfigWaterunitprice: '',
      baseForm: {
        priceconfigElectricityunitprice: '',
        priceconfigWaterunitprice: '',
        elecPriceSteps: [],
        waterPriceSteps: []
      },
      hasFetched: false,
      rules1: {
        priceconfigWaterunitprice: [
          { required: true, message: '输入您的恒定水价', trigger: 'blur' }
        ],
      },
      rules2: {
        priceconfigElectricityunitprice: [
          { required: true, message: '输入您的恒定电价', trigger: 'blur' }
        ]
      },
      rules3: {
        priceconfigWaterunitprice: [
          { required: true, message: '输入您的恒定水价', trigger: 'blur' }
        ],
        priceconfigElectricityunitprice: [
          { required: true, message: '输入您的恒定电价', trigger: 'blur' }
        ]
      },
      rules4: {
        stockAmount: [
          { required: true, message: '请选择负责人', trigger: 'blur' }
        ],
        sourceinfoId: [
          { required: true, message: '请选择管辖范围', trigger: 'blur' }
        ],
        productName: [
          { required: true, message: '请输入协会名称', trigger: 'blur' }
        ],
        supplierId: [
          { required: false, message: '请输入协会介绍', trigger: 'blur' }
        ],
        goodsSpecValue: [
          { required: true, message: '请选择规格', trigger: 'blur' }
        ]
      }
    };
  },
  watch: {
    visible(val) {
      if (val !== this.dialogVisible) {
        this.dialogVisible = val;
        if (val) {
          assign(this.baseForm, this.data);
          if (!this.hasFetched) {
            this.hasFetched = true;
          }
        }
      }
    },
    data: {
      deep: true,
      handler(val) {
        assign(this.baseForm, val);
      }
    },
    editRow: {
      handler(val) {
        this.constantWaterPrice = val?.priceconfigWaterchargingtype
        this.ladderLikeWaterPrice = val?.priceconfigElectricitychargingtype
        this.baseForm.priceconfigWaterunitprice = val?.priceconfigWaterunitprice
        this.baseForm.priceconfigElectricityunitprice = val?.priceconfigElectricityunitprice
        this.baseForm.elecPriceSteps = val?.elecPriceSteps?.length > 0 ? val.elecPriceSteps : [{ 
          pricestepUsagemin: '0',
          pricestepUsagemax: '',
          pricestepUnitprice: '',
        }, {
          pricestepUsagemin: '',
          pricestepUsagemax: '',
          pricestepUnitprice: '',
        }]
        this.baseForm.waterPriceSteps = val?.waterPriceSteps?.length > 0 ? val?.waterPriceSteps : [{
          pricestepUsagemin: '0',
          pricestepUsagemax: '',
          pricestepUnitprice: '',
        }, {
          pricestepUsagemin: '',
          pricestepUsagemax: '',
          pricestepUnitprice: '',
        }]
      }
    },
    immediate: true
  },
  methods: {
    changeList(list,type,row, index) {
      if (type === 'water') {
        if (this.baseForm.waterPriceSteps[index + 1]) {
          const params = this.baseForm.waterPriceSteps[index + 1]
          params.pricestepUsagemin = row
          this.$set(this.baseForm.waterPriceSteps, index + 1, params)
         }
      } else { 
        if (this.baseForm.elecPriceSteps[index + 1]) {
          const params = this.baseForm.elecPriceSteps[index + 1]
          params.pricestepUsagemin = row
          this.$set(this.baseForm.elecPriceSteps, index + 1, params)
         }
      }
     },
    async editPriceHandler() {
      const { areaId, priceconfigId } = this.editRow
      if (this.constantWaterPrice == 1) { 
        for (let i = 0; i < this.baseForm.waterPriceSteps.length; i++) {
          const waterPriceItem = this.baseForm.waterPriceSteps[i]
          if (waterPriceItem?.pricestepUsagemin != ''  && waterPriceItem?.pricestepUsagemax != '' && +waterPriceItem?.pricestepUsagemax < +waterPriceItem?.pricestepUsagemin) {
            Message({
              type: 'warning',
              message: `水价第${i+1}阶梯的最大量不能小于最小量`
            })
            return
          }
          if (!waterPriceItem?.pricestepUnitprice) {
            Message({
              type: 'warning',
              message: '请正确输入您的水价信息'
            })
            return
          }
          waterPriceItem.pricestepNum = i
        }
      }
      if (this.ladderLikeWaterPrice == 1) {
        for (let i = 0; i < this.baseForm.elecPriceSteps.length; i++) {
          const elePriceItem = this.baseForm.elecPriceSteps[i]
          if (elePriceItem?.pricestepUsagemin != '' && elePriceItem?.pricestepUsagemax != '' && +elePriceItem?.pricestepUsagemax < +elePriceItem?.pricestepUsagemin) {
            Message({
              type: 'warning',
              message: `电价第${i + 1}阶梯的最大量不能小于最小量`
            })
            return
          }
          if (!elePriceItem?.pricestepUnitprice) {
            Message({
              type: 'warning',
              message: '请正确输入您的电价信息'
            })
            return
          }
          elePriceItem.pricestepNum = i
        }
      }
      
      const params = {
        areaId,
        priceconfigId,
        priceconfigWaterchargingtype: this.constantWaterPrice,
        priceconfigElectricityunitprice:  this.ladderLikeWaterPrice == 0 ? this.baseForm.priceconfigElectricityunitprice: '0',
        priceconfigElectricitychargingtype: this.ladderLikeWaterPrice,
        priceconfigWaterunitprice: this.constantWaterPrice == 0 ? this.baseForm.priceconfigWaterunitprice :'0',
        waterPriceSteps: this.constantWaterPrice == 1 ? this.baseForm.waterPriceSteps : [],
        elePriceSteps: this.ladderLikeWaterPrice == 1 ? this.baseForm.elecPriceSteps : [],
      }
      await editPrice(
        params
      )
      this.handleClose()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      // this.resetFormData();
      this.dialogVisible = false;
    },
    resetFormData() {
      this.baseForm = {};
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        valid && this.editPriceHandler()
      })
    },
    handleClose() {
      this.$emit('update:visible', false);
      this.$emit('clearEdit')
      this.resetForm('baseForm');
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label{
  text-align: right !important;
}

.item_tooltip{
  position: absolute;
  top: 25px;
  left: 70px;
  color: #00000066;
}
h3{
  color: #303133;
  font-family: Source Han Sans CN VF;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}
.base-form {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 20px;
}
</style>
<style lang="css" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #ebeef5;
}
</style>
<style>
.el-tooltip__popper.is-dark {
	background: rgba(0,0,0,0.5);
}

.el-tooltip__popper[x-placement^=right] .popper__arrow{
  border-right-color:#888;
}
.el-tooltip__popper[x-placement^=right] .popper__arrow::after{
  border-right-color:#888;
}
</style>