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

<template>
  <el-dialog
    title="水权设置"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
    width="700px"
  >
    <el-form
      ref="baseForm"
      class="base-form"
      label-position="right"
      label-width="130px"
      :model="baseForm"
      :rules="rules"
      size="small"
    >
      <el-row>
        <el-form-item label="年度：">
          <el-input
            placeholder="请输入"
            disabled
            style="width:250px;"
            v-model="editRow.waterrightYear"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="区域：">
          <el-input
            placeholder="请输入"
            disabled
            style="width:250px;"
            v-model="editRow.cusareaName">
          </el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="">
          <span>（上级组织：{{ infoData.cusareaName }} 总面积：{{ infoData.areasizeResidue || 0 }} 亩 额定水权：{{ infoData.waterrightAmount || 0 }} m³ 剩余水权：{{ infoData.amountResidue || 0 }}）</span>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="面积：" prop="area">
          <el-input
            placeholder="请输入"
            v-model="baseForm.area"
            style="width:250px;"
          >
          </el-input>
          <span style="margin-left:5px">亩</span>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="额定水权：" prop="ratedWater">
          <el-input
            placeholder="请输入"
            style="width:250px;"
            v-model="baseForm.ratedWater">
          </el-input>
          <span style="margin-left:5px">m³ </span>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="">
          <span>（上年实际用水量：{{ baseForm.lastYearUseWater }}m³）</span>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="亩均水权：">
          <el-input
            placeholder="请输入"
            style="width:250px;"
            disabled
            v-model="averageWater">
          </el-input>
          <span style="margin-left:5px">亩/m³</span>
        </el-form-item>
      </el-row>
    </el-form>

    <div style="text-align: right">
      <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 { getWaterrightUpareaInfo, editWaterright } from '@/api/waterright/index.js'

export default {
  name: 'recompose',
  props: {
    data: {
      default() {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    editRow: {
      type: Object,
      default:() => {}
    }
  },
  data() {
    return {
      dialogSubmitLoading: false,
      dialogVisible: false,
      baseForm: {
        area: '',
        ratedWater: '',
        lastYearUseWater: '0'
      },
      averageWater: 0,
      infoData: {},
      hasFetched: false,
      rules: {
        area: [
          { required: true, message: '请输入面积', trigger: 'blur' }
        ],
        ratedWater: [
          { 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;
          }
        }
      }
    },
    editRow:{
      handler(val) {
        this.visible && this.getWaterrightUpareaList(val)
      },
      deep: true
    },
    baseForm: {
      handler(val) { 
        const { area, ratedWater } = val
        if (area && ratedWater) {
          this.averageWater =  (+ratedWater / +area).toFixed(2)
        }
      },
      deep: true
     }
  },
  methods: {
    async getWaterrightUpareaList(row) {
      const { waterrightId } = row
      const res = await getWaterrightUpareaInfo({
        waterrightId
      })
      this.infoData = res?.data
    },
    resetForm() {
      this.dialogVisible = false; 
      this.baseForm = {
        area: '',
        ratedWater: '',
      }
      this.averageWater = 0
    },
    async editRecompose() { 
      const { waterrightId } = this.editRow
      const { area: waterrightAreasize, ratedWater: waterrightAmount } = this.baseForm
      const params = {
        waterrightId,
        waterrightAreasize,
        waterrightAmount
      }
      const res = await editWaterright(params)
      this.handleClose()
      this.$emit('refresh')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        valid && this.editRecompose(formName)
      })
    },

    handleClose() {
      this.$emit('update:visible', false);
      this.$emit('resetEdit');
      this.resetForm();
    },
  }
};
</script>

<style lang="scss" scoped>
.input-number {
  width: 100%;
}
.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>