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

<template>
  <el-dialog title="参数设置" :visible.sync="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false"
    @close="handleClose" width="800px">
    <el-form ref="baseForm" class="base-form" label-position="right" label-width="130px" :model="baseForm" :rules="rules"
      size="small">
      <el-row>
        <el-col :span="24">
          <el-row>
            <el-col :span="12">
              <el-form-item label="电表品牌型号：" prop="tmnconfigElecmetermodel">
                <el-input placeholder="请输入" v-model="baseForm.tmnconfigElecmetermodel">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="水表品牌型号：" prop="tmnconfigWatermetermodel">
                <el-input placeholder="请输入" v-model="baseForm.tmnconfigWatermetermodel">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row>
            <el-col :span="12">
              <el-form-item label="计算模式：" prop="tmnconfigMeteredmodel">
                <!-- <el-input placeholder="请输入" v-model="baseForm.tmnconfigMeteredmodel"> -->
                <!-- </el-input> -->
                <el-select  v-model="baseForm.tmnconfigMeteredmodel" style="width:100%">
                  <el-option
                    label="水电双计"
                    value="0"
                  ></el-option>
                  <el-option
                    label="只计水"
                    value="1"
                  ></el-option>
                  <el-option
                    label="只计电"
                    value="2"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="以电折水系数：" prop="tmnconfigCoefficient">
                <el-input placeholder="请输入" v-model="baseForm.tmnconfigCoefficient">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </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 { getTmnconfigInfo, addTmnconfig } from '@/api/tmn/index.js'
export default {
  name: 'setPreferenc',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    tmnId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogSubmitLoading: false,
      dialogVisible: false,
      baseForm: {
        tmnconfigElecmetermodel: '',//电表品牌型号
        tmnconfigWatermetermodel: '',//水表品牌型号
        tmnconfigMeteredmodel: '', //计量模式
        tmnconfigCoefficient: '',//以电折水系数
      },

      rules: {
        tmnconfigElecmetermodel: [
          { required: true, message: '电表品牌型号', trigger: 'blur' }
        ],
        tmnconfigWatermetermodel: [
          { required: true, message: '水表品牌型号', trigger: 'blur' }
        ],
        tmnconfigMeteredmodel: [
          { required: true, message: '计量模式', trigger: 'blur' }
        ],
        tmnconfigCoefficient: [
          { required: true, message: '以电折水系数', trigger: 'blur' }
        ]
      }
    };
  },
  watch: {
    visible(val) {
      val && this.getTmnconfigInfoHandler(this.tmnId)
      if (val !== this.dialogVisible) {
        this.dialogVisible = val;
      }
    },
  },
  methods: {
    async getTmnconfigInfoHandler(tmnId) {
      const response = await getTmnconfigInfo({ tmnId })
      const responseData = response?.data
      this.baseForm = {
        tmnconfigElecmetermodel: responseData?.tmnconfigElecmetermodel || '',
        tmnconfigWatermetermodel: responseData?.tmnconfigWatermetermodel || '',
        tmnconfigMeteredmodel: responseData?.tmnconfigMeteredmodel || '',
        tmnconfigCoefficient: responseData?.tmnconfigCoefficient || '',
      }
    },
    async addTmnconfigHandler() {
      const params = {
        tmnId: this.tmnId,
        ...this.baseForm
      }
      await addTmnconfig(params)
      this.handleClose()
      this.$emit('refresh')
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        valid && this.addTmnconfigHandler()
      })
    },

    handleClose() {
      this.$emit('update:visible', false);
      this.resetForm('baseForm');
    }
  }
};
</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>