yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/pipeequipment/PipeEquipmentForm.vue

<template>
  <ContentWarp>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
      class="form-container"
    >
      <!-- 使用单位信息 -->
      <div class="form-section">
        <h3>使用单位信息</h3>
        <div class="form-grid">
          <el-form-item label="使用单位名称" prop="unitName">
            <el-input v-model="formData.unitName" placeholder="请输入使用单位名称" @click="handleOpenUnitDialog" />
          </el-form-item>
          <el-form-item label="使用单位代码" prop="unitCode">
            <el-input v-model="formData.unitCode" placeholder="请输入使用单位代码" />
          </el-form-item>
          <el-form-item label="邮政编码" prop="postalCode">
            <el-input v-model="formData.postalCode" placeholder="请输入邮政编码" />
          </el-form-item>
          <el-form-item label="使用单位性质" prop="unitNature">
            <el-input v-model="formData.unitNature" placeholder="请输入使用单位性质" />
          </el-form-item>
          <el-form-item label="使用单位地址" prop="unitAddress">
            <el-input v-model="formData.unitAddress" placeholder="请输入使用单位地址" />
          </el-form-item>
          <el-form-item label="安全管理部门" prop="department">
            <el-input v-model="formData.department" placeholder="请输入安全管理部门" />
          </el-form-item>
          <el-form-item label="安全管理人" prop="securityMan">
            <el-input v-model="formData.securityMan" placeholder="请输入安全管理人" />
          </el-form-item>
          <el-form-item label="安全管理人电话" prop="securityManPhone">
            <el-input v-model="formData.securityManPhone" placeholder="请输入安全管理人电话" />
          </el-form-item>
          <el-form-item label="约检联系人" prop="contact">
            <el-input v-model="formData.contact" placeholder="请输入约检联系人" />
          </el-form-item>
          <el-form-item label="约检联系人电话" prop="contactPhone">
            <el-input v-model="formData.contactPhone" placeholder="请输入约检联系人电话" />
          </el-form-item>
          <el-form-item label="联系人邮箱" prop="contactEmail">
            <el-input v-model="formData.contactEmail" placeholder="请输入联系人邮箱" />
          </el-form-item>
          <el-form-item label="电子报告接收人" prop="recipient">
            <el-input v-model="formData.recipient" placeholder="请输入电子报告接收人" />
          </el-form-item>
          <el-form-item label="电子报告接收人手机" prop="recipientPhone">
            <el-input v-model="formData.recipientPhone" placeholder="请输入电子报告接收人手机" />
          </el-form-item>
          <el-form-item label="电子报告接收人邮箱" prop="recipientEmail">
            <el-input v-model="formData.recipientEmail" placeholder="请输入电子报告接收人邮箱" />
          </el-form-item>
          <el-form-item label="缴费联系人" prop="payment">
            <el-input v-model="formData.payment" placeholder="请输入缴费联系人" />
          </el-form-item>
          <el-form-item label="缴费联系人手机" prop="paymentPhone">
            <el-input v-model="formData.paymentPhone" placeholder="请输入缴费联系人手机" />
          </el-form-item>
          <el-form-item label="缴费联系人邮箱" prop="paymentEmail">
            <el-input v-model="formData.paymentEmail" placeholder="请输入缴费联系人邮箱" />
          </el-form-item>
        </div>
      </div>

      <!-- 管道信息 -->
      <div class="form-section">
        <div class="section-header">
          <h3>管道信息</h3>
        </div>
        <div class="form-grid">
          <el-form-item label="使用登记证编号" prop="pipeNum">
            <el-input v-model="formData.certificateNo" placeholder="请输入使用登记证编号" />
          </el-form-item>
          <el-form-item label="工程号" prop="projectNo">
            <el-input v-model="formData.projectNo" placeholder="请输入工程号" />
          </el-form-item>
          <el-form-item label="工程名称" prop="projectName">
            <el-input v-model="formData.projectName" placeholder="请输入工程名称" />
          </el-form-item>
          <el-form-item label="管道类别" prop="pipeCategory">
            <el-select v-model="formData.pipeCategory" placeholder="请选择管道类别">
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.PIPE_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="管道最高级别" prop="pipeClass">
            <el-select v-model="formData.pipeClass" placeholder="请选择管道最高级别">
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.PRESSURE2_PIPE_LEVEL)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
<!--          <el-form-item label="管道使用场所" prop="pipeUsePlace">-->
<!--            <el-input v-model="formData.pipeUsePlace" placeholder="请输入管道使用场所" />-->
<!--          </el-form-item>-->
          <el-form-item label="所在行政区" prop="equipDistrict">
            <AreaSelect
              v-model="formData.equipDistrict"
              placeholder="请选择所在区"
              @change="handleAreaChange"
              @clear="handleAreaClear"
            />
          </el-form-item>
          <el-form-item label="所在街道" prop="equipStreet">
            <StreetSelect
              v-model="formData.equipStreet"
              :district-ids="[formData.equipDistrict]"
              placeholder="请选择所在街道"
              @change="handleStreetChange"
              @clear="handleStreetClear"
            />
          </el-form-item>
          <el-form-item label="管道使用地址" prop="pipeAddress">
            <el-input v-model="formData.pipeAddress" placeholder="请输入管道使用地址" />
          </el-form-item>
          <el-form-item label="地址经度" prop="lng">
            <el-input-number controls-position="right" v-model="formData.lng" placeholder="请输入地址经度" />
          </el-form-item>
          <el-form-item label="地址纬度" prop="lat">
            <el-input-number controls-position="right"  v-model="formData.lat" placeholder="请输入地址纬度" />
          </el-form-item>
          <el-form-item label="使用状态" prop="useStatus">
            <el-select v-model="formData.useStatus" placeholder="请选择使用状态">
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.PIPE_USE_STATUS)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否有效" prop="isEffective">
            <el-radio-group v-model="formData.isEffective">
              <el-radio value="是">是</el-radio>
              <el-radio value="否">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="敷设方式" prop="layingMode">
            <el-input v-model="formData.layingMode" placeholder="请输入敷设方式" />
          </el-form-item>
          <el-form-item label="管道总长度" prop="pipeLengthTotal">
            <el-input controls-position="right" v-model="formData.pipeLengthTotal" placeholder="请输入总长度" />
          </el-form-item>
          <el-form-item label="是否存在埋地管道" prop="hasUndergroundPipe">
            <el-input v-model="hasUndergroundPipeText" placeholder="由子表汇总" disabled />
          </el-form-item>
          <el-form-item label="埋地管道总长度" prop="undergroundLengthTotal">
            <el-input controls-position="right" v-model="undergroundLengthTotal" placeholder="由子表汇总" disabled />
          </el-form-item>
          <el-form-item label="责任部门" prop="relationDept">
            <DeptSelect
              v-model="formData.relationDept"
              placeholder="请选择责任部门"
              clearable
            />
          </el-form-item>
          <el-form-item label="设计单位" prop="designUnit">
            <el-input v-model="formData.designUnit" placeholder="请输入设计单位" />
          </el-form-item>
          <el-form-item label="设计单位许可证书编号" prop="desognUnitPermitCode">
            <el-input v-model="formData.desognUnitPermitCode" placeholder="请输入设计单位许可证书编号" />
          </el-form-item>
          <el-form-item label="设计主图号" prop="designNo">
            <el-input v-model="formData.designNo" placeholder="请输入设计主图号" />
          </el-form-item>
          <el-form-item label="施工单位" prop="constructionUnit">
            <el-input v-model="formData.constructionUnit" placeholder="请输入施工单位" />
          </el-form-item>
          <el-form-item label="施工单位许可证书编号" prop="constructionUnitPermitCode">
            <el-input v-model="formData.constructionUnitPermitCode" placeholder="请输入施工单位许可证书编号" />
          </el-form-item>
          <el-form-item label="检测机构" prop="testingOrganization">
            <el-input v-model="formData.testingOrganization" placeholder="请输入检测机构" />
          </el-form-item>
          <el-form-item label="检测机构核准证书编号" prop="testingOrganizationPermitCode">
            <el-input v-model="formData.testingOrganizationPermitCode" placeholder="请输入检测机构核准证书编号" />
          </el-form-item>

          <el-form-item label="验收日期" prop="acceptdate">
            <el-date-picker v-model="formData.acceptdate" type="date" value-format="YYYY-MM-DD" placeholder="请选择验收日期" />
          </el-form-item>
          <el-form-item label="承受交变应力" prop="alternating">
            <el-input v-model="formData.alternating" placeholder="请输入承受交变应力" />
          </el-form-item>
          <el-form-item label="防腐层材料" prop="antisepsis">
            <el-input v-model="formData.antisepsis" placeholder="请输入防腐层材料" />
          </el-form-item>
          <el-form-item label="管道连接方式" prop="attendedMode">
            <el-input v-model="formData.attendedMode" placeholder="请输入管道连接方式" />
          </el-form-item>
          <el-form-item label="腐蚀裕量" prop="cautery">
            <el-input v-model="formData.cautery" placeholder="请输入腐蚀裕量" />
          </el-form-item>
          <el-form-item label="设计日期" prop="designdate">
            <el-date-picker v-model="formData.designdate" type="date" value-format="YYYY-MM-DD" placeholder="请选择设计日期" />
          </el-form-item>
          <el-form-item label="设计规范" prop="designstandard">
            <el-input v-model="formData.designstandard" placeholder="请输入设计规范" />
          </el-form-item>
          <el-form-item label="设计温度" prop="designtemperature">
            <el-input v-model="formData.designtemperature" placeholder="请输入设计温度" />
          </el-form-item>
          <el-form-item label="火灾危险性" prop="fireRisk">
            <el-input v-model="formData.fireRisk" placeholder="请输入火灾危险性" />
          </el-form-item>
          <el-form-item label="安装日期" prop="installdate">
            <el-date-picker v-model="formData.installdate" type="date" value-format="YYYY-MM-DD" placeholder="请选择安装日期" />
          </el-form-item>
          <el-form-item label="安装验收规范" prop="installstandard">
            <el-input v-model="formData.installstandard" placeholder="请输入安装验收规范" />
          </el-form-item>
          <el-form-item label="绝热层材料" prop="insulation">
            <el-input v-model="formData.insulation" placeholder="请输入绝热层材料" />
          </el-form-item>
          <el-form-item label="绝热层厚度" prop="insulationply">
            <el-input v-model="formData.insulationply" placeholder="请输入绝热层厚度" />
          </el-form-item>
<!--          <el-form-item label="敷设方式" prop="laytype">-->
<!--            <el-input v-model="formData.laytype" placeholder="请输入敷设方式" />-->
<!--          </el-form-item>-->
          <el-form-item label="管材牌号" prop="materialno">
            <el-input v-model="formData.materialno" placeholder="请输入管材牌号" />
          </el-form-item>
          <el-form-item label="管材标准" prop="materialstandard">
            <el-input v-model="formData.materialstandard" placeholder="请输入管材标准" />
          </el-form-item>
          <el-form-item label="介质毒性程度" prop="mediumToxicityLevel">
            <el-input v-model="formData.mediumToxicityLevel" placeholder="请输入介质毒性程度" />
          </el-form-item>
<!--          <el-form-item label="下次在线检验日期" prop="nextonlinedate">-->
<!--            <el-date-picker v-model="formData.nextonlinedate" type="date" value-format="YYYY-MM-DD" placeholder="请选择下次在线检验日期" />-->
<!--          </el-form-item>-->

          <el-form-item label="在线检验的项目" prop="onlineitem">
            <el-input v-model="formData.onlineitem" placeholder="请输入在线检验的项目" />
          </el-form-item>
          <el-form-item label="被计划的次数" prop="plannums">
            <el-input v-model="formData.plannums" placeholder="请输入被计划的次数" />
          </el-form-item>
          <el-form-item label="剧烈循环工况" prop="severeCyclic">
            <el-input v-model="formData.severeCyclic" placeholder="请输入剧烈循环工况" />
          </el-form-item>
          <el-form-item label="管道主要规格" prop="standard">
            <el-input v-model="formData.standard" placeholder="请输入管道主要规格" />
          </el-form-item>
        </div>
      </div>

      <!-- 管道明细子表 -->
      <div class="form-section">
        <div class="section-header">
          <h3>管道一览表</h3>
          <el-button plain type="primary" @click="openPipeDetailForm">
            <Icon icon="ep:plus" class="mr-5px" /> 新增管道设计安装信息
          </el-button>
        </div>
        <PipeEquipmentDetailList 
          ref="pipeEquipmentDetailFormRef" 
          v-model:rows="formData.detailSaveReqVOS"
          :project-no="formData.projectNo"
          :project-name="formData.projectName"
        />
      </div>

      <!-- 检验信息 -->
      <div class="form-section">
        <h3>安装监检信息</h3>
        <div class="form-grid">
          <el-form-item label="安装监检报告编号" prop="installCheckReportNo">
            <el-input v-model="formData.installCheckReportNo" placeholder="请输入安装监检报告编号">
              <template #append>
                <Copy :text="formData.installCheckReportNo" />
              </template>
            </el-input>
          </el-form-item>
          
        </div>
      </div>
      <!-- 法定检验信息 -->
      <div class="form-section">
        <h3>全面检验信息</h3>
        <div class="form-grid">
          
          <el-form-item label="上次全检报告编号" prop="lastLegalPeriodicalInspectionReportNo">
            <el-input v-model="formData.lastLegalPeriodicalInspectionReportNo" placeholder="请输入上次全检报告编号">
              <template #append>
                <Copy :text="formData.lastLegalPeriodicalInspectionReportNo" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="下次全面检验日期" prop="nextLegalCheckDate">
            <el-date-picker v-model="formData.nextLegalCheckDate" type="date" value-format="YYYY-MM-DD" placeholder="选择下次全面检验日期" />
          </el-form-item>
          <el-form-item label="最低安全状况等级" prop="minSafetyStatusReg">
            <el-input v-model="formData.minSafetyStatusReg" placeholder="请输入最低安全状况等级" />
          </el-form-item>
          <el-form-item label="上次检验检查结论" prop="lastLegalConclusion">
            <el-input v-model="formData.lastLegalConclusion" placeholder="请输入上次检验检查结论" />
          </el-form-item>
          <el-form-item label="上次检验检查发现的问题" prop="lastLegalIssues" class="full-width">
            <el-input type="textarea" v-model="formData.lastLegalIssues" placeholder="请输入上次检验检查发现的问题" />
          </el-form-item>
        </div>
      </div>

      <!-- 年度检查信息 -->
      <div class="form-section">
        <h3>年度检查信息</h3>
        <div class="form-grid">
          <el-form-item label="上次年检报告编号" prop="lastYearReportNo">
            <el-input v-model="formData.lastYearReportNo" placeholder="请输入上次年检报告编号">
              <template #append>
                <Copy :text="formData.lastYearReportNo" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="下次年检日期" prop="nextYearCheckDate">
            <el-date-picker v-model="formData.nextYearCheckDate" type="date" value-format="YYYY-MM-DD" placeholder="选择下次年检日期" />
          </el-form-item>
          <el-form-item label="最低安全状况等级" prop="installationStatusReg">
            <el-input v-model="formData.installationStatusReg" placeholder="请输入最低安全状况等级" />
          </el-form-item>
          <el-form-item label="上次检验检查结论" prop="lastYearConclusion">
            <el-input v-model="formData.lastYearConclusion" placeholder="请输入上次检验检查结论" />
          </el-form-item>
          <el-form-item label="上次检验检查发现的问题" prop="lastYearIssues" class="full-width">
            <el-input type="textarea" v-model="formData.lastYearIssues" placeholder="请输入上次检验检查发现的问题" />
          </el-form-item>
        </div>
      </div>

      <!-- 维修改造信息 -->
      <div class="form-section">
        <h3>维修改造监检信息</h3>
        <div class="form-grid">
          <el-form-item label="上次维修改造监检报告编号" prop="lastMaintenanceReportNo">
            <el-input v-model="formData.lastMaintenanceReportNo" placeholder="请输入上次维修改造监检报告编号">
              <template #append>
                <Copy :text="formData.lastMaintenanceReportNo" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="监督检验开始日期" prop="supervisionStartDate">
            <el-date-picker v-model="formData.supervisionStartDate" type="date" value-format="YYYY-MM-DD" placeholder="选择监督检验开始日期" />
          </el-form-item>
          <el-form-item label="监督检验结束日期" prop="supervisionEndDate">
            <el-date-picker v-model="formData.supervisionEndDate" type="date" value-format="YYYY-MM-DD" placeholder="选择监督检验结束日期" />
          </el-form-item>
          <el-form-item label="上次维修改造内容" prop="lastMaintenanceContent" class="full-width">
            <el-input type="textarea" v-model="formData.lastMaintenanceContent" placeholder="请输入上次维修改造内容" />
          </el-form-item>
        </div>
      </div>

      <!-- 历史信息组件 -->
      <PipeEquipmentHistory
        v-if="showHistory"
        ref="historyRef"
      />

      <!-- 底部按钮 -->
      <div class="form-footer">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button type="success" @click="toggleHistory">
          {{ showHistory ? '隐藏' : '显示' }}市局信息
        </el-button>
        <el-button @click="goBack">取消</el-button>
      </div>
      
    </el-form>

    <!-- 管道明细表单 -->
    <PipeEquipmentDetailForm ref="pipeDetailFormRef" @success="handleDetailSuccess" />

  </ContentWarp>

  <CustomDialog
    ref="customUnitDialogRef"
    v-model="customUnitDialogVisible"
    :dialogAttrs="{
      zIndex: 10006
    }"
    @confirm="handleUnitConfirm"
  >
    <SmartTable
      ref="unitTableRef"
      v-model:pageNo="unitPageNo"
      v-model:pagesize="unitPageSize"
      :total="unitTotal"
      :columns="unitColumns"
      :data="unitTableList"
      :buttons="[]"
      :showSettingTools="true"
      :showRefresh="false"
      :tableProps="{
        onSelect: handleUnitSelect
      }"
      @onPageNoChange="handleFetchUnitList"
      @onPageSizeChange="pageSizeChange"
    />
  </CustomDialog>
</template>

<script setup lang="ts">
import { ref, unref, watch, onMounted, nextTick } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useRouter, useRoute } from 'vue-router'
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { EquipPipeApi } from '@/api/pressure2/equippipe'
import type { EquipPipeDetailVO, EquipPipeVO } from '@/api/pressure2/equippipe'
import { required } from '@/utils/formRules'
import PipeEquipmentDetailList from './components/PipeEquipmentDetailList.vue'
import AreaSelect from '@/views/system/equipcontainer/components/AreaSelect.vue'
import StreetSelect from '@/views/system/equipcontainer/components/StreetSelect.vue'
import PipeEquipmentDetailForm from './components/PipeEquipmentDetailForm.vue'
import { useTagsViewStore } from '@/store/modules/tagsView'
import dayjs from 'dayjs'
import Copy from '@/views/system/equipcontainer/components/Copy.vue'
import PipeEquipmentHistory from './components/PipeEquipmentHistory.vue'
import SmartTable from "@/components/SmartTable/SmartTable";

import {getUnitList} from "@/api/laboratory/unit";
import {validatePhone} from "@/utils/validateRules";
import {string} from "vue-types";
import { useEmitt } from '@/hooks/web/useEmitt'

defineOptions({ name: 'PipeEquipmentForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const router = useRouter()
const route = useRoute()
const tagsViewStore = useTagsViewStore()
const { emitter } = useEmitt()

// 页面标题
const pageTitle = ref('')
// 表单相关变量
const formLoading = ref(false)
const formRef = ref()
const formData = ref<EquipPipeVO>({} as EquipPipeVO)
// 由子表计算的字段
const hasUndergroundPipeText = ref('否')
const undergroundLengthTotal = ref(0)
const pipeEquipmentDetailFormRef = ref()
const pipeDetailFormRef = ref()
const historyRef = ref()
const showHistory = ref(false)

// 表单校验规则
const formRules = {
  unitName: [required],
  equipDistrict : [required],
  useProjectCode: [required],
  projectNo: [required],
  projectName: [required],
  useStatus: [required],
  contactPhone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  contactEmail: [
    { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱', trigger: 'blur' }
  ],
  recipientPhone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  recipientEmail: [
    { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱', trigger: 'blur' }
  ],
  paymentPhone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  paymentEmail: [
    { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱', trigger: 'blur' }
  ]

}

const areaStreetMap = ref<Map<number, number[]>>(new Map())

const handleAreaClear = () => {
  formData.value.equipDistrict = ''
  areaStreetMap.value.clear()
}

const handleAreaChange = (areas: number[]) => {
  formData.value.equipStreet = ''
  areaStreetMap.value.clear()
  return
}

const handleStreetClear = () => {
  areaStreetMap.value.clear()
}

const handleStreetChange = (streets: number[], areaId: number) => {
  if (formData.value.equipDistrict && areaId === formData.value.equipDistrict) {
    areaStreetMap.value.set(areaId, streets)
  }
}

// 返回上一页
const goBack = () => {
  tagsViewStore.delView(route)
  router.back()
}

// 初始化数据
const initData = async () => {
  const id = route.query.id as string
  const type = route.query.type as string
  
  if (type === 'create') {
    pageTitle.value = t('action.create')
  } else {
    pageTitle.value = t('action.update')
    if (id) {
      formLoading.value = true
      try {
        const data = await EquipPipeApi.getEquipPipe(id)
        // 格式化日期字段
        const dateFields = ['nextLegalCheckDate', 'nextYearCheckDate', 'supervisionStartDate', 'supervisionEndDate']
        dateFields.forEach(field => {
          if (data[field]) {
            data[field] = dayjs(data[field]).format('YYYY-MM-DD')
          }
        })
        formData.value = data
      } finally {
        formLoading.value = false
      }
    }
  }
}

// 提交表单
const submitForm = async () => {
  const elForm = unref(formRef)
  if (!elForm) return
  await elForm.validate()
  
  formLoading.value = true
  try {
    // 转换明细数据
    const submitData = {
      ...formData.value,
    }

    // 使用 dayjs 将日期字段转换为时间戳
    // const dateFields = ['nextLegalCheckDate', 'nextYearCheckDate', 'supervisionStartDate', 'supervisionEndDate']
    // dateFields.forEach(field => {
    //   if (submitData[field]) {
    //     // 使用 dayjs().valueOf() 获取毫秒时间戳
    //     submitData[field] = dayjs(submitData[field]).valueOf()
    //   }
    // })
    // 去掉默认id
    submitData.detailSaveReqVOS?.forEach(item => {
      if (item.id && item.id.length !== 32){
        delete item.id
      }
    })

    if (route.query.type === 'create') {
      await EquipPipeApi.createEquipPipe(submitData)
      message.success(t('common.createSuccess'))
    } else {
      await EquipPipeApi.updateEquipPipe(submitData)
      message.success(t('common.updateSuccess'))
      // 发送设备编辑成功事件，通知任务详情页面刷新数据
      emitter.emit('equipment-edit-success')
    }
    tagsViewStore.delView(route)
    router.back()
  } finally {
    formLoading.value = false
  }
}

// 监听表单数据变化
watch(
  () => formData.value,
  (newVal) => {
    if (newVal.equipDistrict) {
      // 确保行政区划是数字类型
      formData.value.equipDistrict = Number(newVal.equipDistrict)
    }
    if (newVal.equipStreet) {
      // 确保街道是数字类型
      formData.value.equipStreet = Number(newVal.equipStreet)
    }
    // 计算管道总长度
    if (newVal.detailSaveReqVOS){
      formData.value.pipeLengthTotal = formData.value.detailSaveReqVOS.reduce((total, item) => total + item.pipeLength, 0)

    // 计算是否存在埋地管道（任一条为是则为是，全否则为否）
      undergroundLengthTotal.value = newVal.detailSaveReqVOS.reduce((total, item) => total + (item.undergroundLength || 0), 0)
    }
    if (newVal.detailSaveReqVOS && newVal.detailSaveReqVOS.length > 0) {
      hasUndergroundPipeText.value = newVal.detailSaveReqVOS.some(item => item.isUnderground === true) ? '是' : '否'
      // 计算埋地管道总长度
    } else {
      hasUndergroundPipeText.value = '否'
    }
  },
  { deep: true, immediate: true }
)

// 处理管道明细保存成功
const handleDetailSuccess = (detail: EquipPipeDetailVO,formType) => {
  // console.log('handleDetailSuccess', detail)
  if (!formData.value.detailSaveReqVOS) {
    formData.value.detailSaveReqVOS = []
  }
  if (formType.value == 'update') {
    const index = formData.value.detailSaveReqVOS.findIndex(item => item.id === detail.id)
      formData.value.detailSaveReqVOS[index] = detail
    } else if (formType.value == 'create'){
      // 如果是新增，直接追加
      formData.value.detailSaveReqVOS.push(detail)
  }
}

// 打开管道明细表单
const openPipeDetailForm = () => {
  pipeDetailFormRef.value?.open('create', undefined, {
    projectNo: formData.value.projectNo,
    projectName: formData.value.projectName
  })
}

// 切换历史信息显示/隐藏
const toggleHistory = async () => {
  showHistory.value = !showHistory.value
  if (showHistory.value && formData.value?.projectNo) {
    // 如果是显示且有工程号，则加载历史数据
    await nextTick()
    historyRef.value?.loadHistoryData(formData.value.projectNo)
  }
}

onMounted(() => {
  initData()
})

// 选择单位弹窗
const unitTableRef = ref()
const customUnitDialogVisible = ref(false)
const unitColumns = ref([
  {
    type: 'selection',
    width: '50px'
  },
  {
    label: '单位代码',
    prop: 'code',
  },
  {
    label: '单位名称',
    prop: 'name',
  }
])
const unitTableList = ref([])
const unitPageNo = ref(1)
const unitPageSize = ref(10)
const unitTotal = ref(0)
const handleUnitSelect = (selections, row) => {
  if(selections.length > 1) {
    ElMessage.warning(`最多可选择1个`)
    unitTableRef.value.getTableRef().toggleRowSelection(row, false)
    return
  }
}

const pageSizeChange = (value) => {
  unitPageSize.value = value
  handleFetchUnitList()
}

const handleFetchUnitList = async () => {
  const result = await getUnitList({
    pageNo: unitPageNo.value,
    pageSize: unitPageSize.value,
  })
  unitTableList.value = result.list
  unitTotal.value = result.total
}

const handleUnitConfirm = () => {
  const selectedRow = unitTableRef.value.getTableRef().getSelectionRows()
  if(selectedRow.length === 0) return
  formData.value.unitName = selectedRow[0].name
  formData.value.unitCode = selectedRow[0].code
  formData.value.unitId = selectedRow[0].id
  formData.value.postalCode = selectedRow[0].post
}
// 打开单位选择框
const handleOpenUnitDialog = (ev) => {
  ev.target.blur()
  customUnitDialogVisible.value = true
  handleFetchUnitList()
}
</script>

<style lang="scss" scoped>
.form-container {
  padding: 20px;
}

.form-section {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.section-header {
  display: flex;
  margin-bottom: 16px;
  align-items: center;

  h3 {
    align-items: center;
    margin: 0 16px 0 0 !important;
  }
}

.form-section h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  padding-left: 8px;
  border-left: 3px solid #409EFF;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 16px;
}

:deep(.el-form-item) {
  margin-bottom: 8px !important;
  margin-right: 0;
}

:deep(.el-form-item__label) {
  color: #606266;
  font-size: 14px;
  padding-right: 4px;
  height: 32px;
  display: flex;
  align-items: center;
  line-height: 1;
}

:deep(.el-input__wrapper),
:deep(.el-select),
:deep(.el-date-picker) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  border-radius: 4px;
  height: 32px;
  line-height: 32px;
}

:deep(.el-input__inner) {
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}

:deep(.el-form--label-right .el-form-item__label) {
  text-align: right;
}

:deep(.el-form-item__content) {
  line-height: 32px;
}

:deep(.el-select .el-input) {
  width: 100%;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

.full-width {
  grid-column: span 4;
}

:deep(.el-textarea .el-input__wrapper) {
  height: auto;
}

.form-footer {
  margin-top: 20px;
  padding: 20px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: flex-end;
}
</style>