kd-aiot-frontend-ems/src/views/centralizedMeterReading/meterReadingDialog.vue

<template>
  <ele-modal
    :visible="visible"
    :title="title"
    width="600px"
    :destroy-on-close="true"
    :maxable="true"
    @update:visible="updateVisible"
    :bodyStyle="{ padding: '30px 40px' }"
  >
    <div class="switch" v-if="isView">
      <div class="switch_left">
        <ul>
          <li
            v-for="item in tabOptions"
            :key="item.key"
            :class="{ active: activeComp == item.key }"
            @click="activeComp = item.key"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <el-form
      v-show="activeComp == 'main'"
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="120px"
      size="small"
    >
      <el-form-item label="表计设备名称" prop="substanceId">
        <el-input
          v-model="form.substanceName"
          placeholder="请选择表计设备"
          readonly
          :disabled="isView"
          @click.native="openMaterialAdd"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="表计设备编号">
        <el-input v-model="form.meterEquipmentNumber" disabled></el-input>
      </el-form-item>
      <el-form-item label="用能分类">
        <el-input v-model="form.energyClassificationName" disabled></el-input>
      </el-form-item>
      <el-form-item label="能源名称">
        <el-input v-model="form.energyTypeName" disabled></el-input>
      </el-form-item>
      <el-form-item label="表计单位">
        <el-input v-model="form.unit" disabled></el-input>
      </el-form-item>
      <el-form-item label="抄表人" prop="meterReadingName">
        <el-input
          v-model="form.meterReadingName"
          placeholder="请输入抄表人"
          :disabled="isView"
        ></el-input>
      </el-form-item>
      <el-form-item label="本期抄表时间" prop="currentMeterReadingTime">
        <el-date-picker
          v-model="form.currentMeterReadingTime"
          type="datetime"
          placeholder="选择本期抄表时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          :disabled="isView"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="本期抄表数" prop="currentMeterReadingNum">
        <el-input
          v-model.number="form.currentMeterReadingNum"
          type="number"
          placeholder="请输入本期抄表数"
          :disabled="isView"
        ></el-input>
      </el-form-item>
    </el-form>

    <template slot="footer">
      <el-button
        type="primary"
        size="small"
        @click="handleSubmit"
        :loading="loading"
        v-if="!isView"
        >确定</el-button
      >
      <el-button size="small" @click="handleCancel">
        {{ isView ? '关闭' : '取消' }}
      </el-button>
    </template>
    <MaterialAdd
      ref="materialAddRef"
      @chooseEquipment="handleChooseEquipment"
    ></MaterialAdd>
    <bpmDetail
      v-if="activeComp == 'bpm' && form.processInstanceId"
      :id="form.processInstanceId"
    ></bpmDetail>
  </ele-modal>
</template>

<script>
  import {
    save,
    update,
    getById
  } from '@/api/centralizedMeterReading/index.js';
  import MaterialAdd from '@/components/common/MaterialAdd.vue';
  import dayjs from 'dayjs';
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';
  import { energyConsumingUnitList } from '@/enum/dict.js';

  const defForm = {
    id: '',
    substanceId: '',
    substanceName: '',
    substanceCode: '',
    meterEquipmentNumber: '',
    energyClassificationName: '',
    energyTypeName: '',
    unit: '',
    meterReadingName: '',
    meterReadingId: '',
    currentMeterReadingTime: '',
    currentMeterReadingNum: '',
    meterReadingMethod: 1
  };

  export default {
    name: 'MeterReadingDialog',
    components: {
      MaterialAdd,
      bpmDetail
    },
    data() {
      return {
        activeComp: 'main',
        tabOptions: [
          { key: 'main', name: '详情' },
          { key: 'bpm', name: '流程详情' }
        ],
        visible: false,
        loading: false,
        title: '新增',
        type: 'add',
        form: { ...defForm },
        rules: {
          substanceId: [
            { required: true, message: '请选择表计设备', trigger: 'change' }
          ],
          meterReadingName: [
            { required: true, message: '请输入抄表人', trigger: 'blur' }
          ],
          currentMeterReadingTime: [
            { required: true, message: '请选择本期抄表时间', trigger: 'change' }
          ],
          currentMeterReadingNum: [
            { required: true, message: '请输入本期抄表数', trigger: 'blur' }
          ]
        }
      };
    },
    computed: {
      isView() {
        return this.type === 'view';
      }
    },
    methods: {
      // 打开弹窗
      async open(row, type = 'add') {
        this.activeComp = 'main';

        this.type = type;
        if (type === 'add') {
          this.title = '新增';
          this.resetForm();
          // 初始化抄表人和抄表时间
          const currentUser = this.$store.state.user.info;
          this.form.meterReadingName = currentUser?.name || '';
          this.form.meterReadingId = currentUser?.userId || '';
          this.form.currentMeterReadingTime = dayjs().format(
            'YYYY-MM-DD HH:mm:ss'
          );
        } else {
          this.title = type === 'edit' ? '编辑' : '详情';
          try {
            const res = await getById(row.id);
            this.form = { ...defForm, ...res };
          } catch (e) {
            console.error('获取详情失败', e);
          }
        }
        this.visible = true;
      },
      // 关闭弹窗
      updateVisible(val) {
        this.visible = val;
        if (!val) {
          this.resetForm();
        }
      },
      // 重置表单
      resetForm() {
        this.form = { ...defForm };
        this.$nextTick(() => {
          this.$refs.formRef && this.$refs.formRef.clearValidate();
        });
      },
      // 打开设备选择弹窗
      openMaterialAdd() {
        if (this.isView) {
          return;
        }
        this.$refs.materialAddRef.open();
      },
      // 选择设备回调
      handleChooseEquipment(row) {
        console.log('选择设备：', row);
        this.form.substanceId = row.id;
        this.form.substanceName = row.name;
        this.form.substanceCode = row.code;
        this.form.areaCode = row.areaCode;
        this.form.areaId = row.areaId;
        this.form.areaName = row.areaName;
        this.form.meterEquipmentNumber = row.codeNumber;
        // 根据实际数据结构带出其他字段
        this.form.energyClassificationName = row.energyClassificationName;
        this.form.energyClassificationCode = row.energyClassificationCode;
        this.form.energyTypeName = row.energyTypeName || '';
        this.form.energyTypeId = row.energyTypeId || '';
        this.form.energyTypeCode = row.energyTypeCode || '';

        this.form.unit = energyConsumingUnitList
          .find((item) => item.value == row.energyClassificationCode)
          ?.unit.find((item) => item.value == row.energyUnit)?.label;
      },
      // 提交
      handleSubmit() {
        this.$refs.formRef.validate((valid) => {
          if (!valid) return;

          const api = this.type === 'edit' ? update : save;
          this.loading = true;
          api(this.form)
            .then(() => {
              this.$message.success(
                this.type === 'edit' ? '编辑成功' : '新增成功'
              );
              this.visible = false;
              this.$emit('reload');
            })
            .finally(() => {
              this.loading = false;
            });
        });
      },
      // 取消
      handleCancel() {
        this.visible = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-form-item__label {
    color: #606266;
  }
</style>