优化设备台账页面样式

zhaowei

2025-07-02 c4c807f8c8d6f8ca7acde07afdd444e99e403818

 src/views/eam/equipment/modules/EamEquipmentModal.vue

@@ -6,270 +6,260 @@
    centered
    :confirmLoading="confirmLoading"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-tabs tab-position="left">
      <a-tab-pane tab="基础信息" :key="1">
        <a-form-model ref="form" :model="model" :rules="validatorRules" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-row :gutter="24">
            <a-col :span="customSpan">
              <a-form-model-item label="关键设备标识">
                <j-dict-select-tag dict-code="equipment_importance" placeholder="请输入关键设备标识"
                                   v-model="model.equipmentImportance" :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item prop="equipmentCode" label="统一编码">
                <a-input placeholder="请输入统一编码" v-model="model.equipmentCode" :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item prop="equipmentName" label="设备名称">
                <a-input placeholder="请输入设备名称" v-model="model.equipmentName" :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item prop="factoryOrgCode" label="使用部门">
                <a-tree-select v-model="model.factoryOrgCode"
                               style="width: 100%"
                               show-search
                               :tree-data="treeDataAlias"
                               :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                               placeholder="请选择使用部门"
                               allow-clear
                               treeNodeFilterProp="title"
                               searchPlaceholder="请输入关键字搜索"
                               tree-default-expand-all/>
              </a-form-model-item>
            </a-col>
          </a-row>
        <a-spin :spinning="confirmLoading">
          <j-form-container :disabled="disableSubmit">
            <a-form-model ref="form" :model="model" :rules="validatorRules" :labelCol="labelCol"
                          :wrapperCol="wrapperCol" slot="detail">
              <a-row>
                <a-col :span="customSpan">
                  <a-form-model-item label="关键设备标识">
                    <j-dict-select-tag dict-code="equipment_importance" placeholder="请输入关键设备标识"
                                       v-model="model.equipmentImportance"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item prop="equipmentCode" label="统一编码">
                    <a-input placeholder="请输入统一编码" v-model="model.equipmentCode"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item prop="equipmentName" label="设备名称">
                    <a-input placeholder="请输入设备名称" v-model="model.equipmentName"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item prop="factoryOrgCode" label="使用部门">
                    <a-tree-select v-model="model.factoryOrgCode" style="width: 100%" show-search
                                   :tree-data="productionTreeData"
                                   :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                                   placeholder="请选择使用部门" allow-clear treeNodeFilterProp="title"
                                   :replaceFields="{key:'orgCode',value:'orgCode'}"
                                   searchPlaceholder="请输入关键字搜索" tree-default-expand-all/>
                  </a-form-model-item>
                </a-col>
              </a-row>

          <a-row :gutter="24">
            <a-col :span="customSpan">
              <a-form-model-item prop="equipmentCategory" label="所属分类">
                <j-dict-select-tag dict-code="equipment_category" placeholder="请选择所属分类"
                                   v-model="model.equipmentCategory"
                                   :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="质保开始日期">
                <a-date-picker v-model="model.warrantyStartDate" value-format="YYYY-MM-DD" style="width:100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="质保结束日期">
                <a-date-picker v-model="model.warrantyEndDate" value-format="YYYY-MM-DD" style="width:100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="ABC标识">
                <j-dict-select-tag dict-code="abc_flag" placeholder="请选择ABC标识" v-model="model.abcFlag"
                                   :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
          </a-row>
              <a-row>
                <a-col :span="customSpan">
                  <a-form-model-item prop="equipmentCategory" label="所属分类">
                    <j-dict-select-tag dict-code="equipment_category" placeholder="请选择所属分类"
                                       v-model="model.equipmentCategory"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="质保开始日期">
                    <a-date-picker v-model="model.warrantyStartDate" value-format="YYYY-MM-DD" style="width:100%"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="质保结束日期">
                    <a-date-picker v-model="model.warrantyEndDate" value-format="YYYY-MM-DD" style="width:100%"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="ABC标识">
                    <j-dict-select-tag dict-code="abc_flag" placeholder="请选择ABC标识" v-model="model.abcFlag"/>
                  </a-form-model-item>
                </a-col>
              </a-row>

          <a-row :gutter="24">
            <a-col :span="customSpan">
              <a-form-model-item prop="repairDepartOrgCode" label="维修班组">
                <a-input placeholder="请选择维修班组" v-model="model.repairDepartOrgCode"
                         :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="安全配置">
                <a-input placeholder="请输入安全配置" v-model="model.securityConfiguration"
                         :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
          </a-row>
              <a-row>
                <a-col :span="customSpan">
                  <a-form-model-item prop="repairDepartOrgCode" label="维修班组">
                    <a-input placeholder="请选择维修班组" v-model="model.repairDepartOrgCode"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="安全配置">
                    <a-input placeholder="请输入安全配置" v-model="model.securityConfiguration"/>
                  </a-form-model-item>
                </a-col>
              </a-row>

          <a-row :gutter="24">
            <a-col :span="customSpan">
              <a-form-model-item label="冷却系统">
                <j-dict-select-tag dict-code="cooling_system" placeholder="请输入统一编码" v-model="model.coolSystem"
                                   :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="灭火器">
                <a-input placeholder="请输入灭火器" v-model="model.fireExtinguisher" :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="灭火器有效期">
                <a-date-picker v-model="model.fireExtinguisherExpirationDate" value-format="YYYY-MM-DD"
                               style="width:100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="操作系统">
                <j-dict-select-tag dict-code="yn " type="radio" v-model="model.operationSystem"/>
              </a-form-model-item>
            </a-col>
          </a-row>
              <a-row>
                <a-col :span="customSpan">
                  <a-form-model-item label="冷却系统">
                    <j-dict-select-tag dict-code="cooling_system" placeholder="请选择冷却系统" v-model="model.coolSystem"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="灭火器">
                    <a-input placeholder="请输入灭火器" v-model="model.fireExtinguisher"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="灭火器有效期">
                    <a-date-picker v-model="model.fireExtinguisherExpirationDate" value-format="YYYY-MM-DD"
                                   style="width:100%"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="操作系统">
                    <j-dict-select-tag dict-code="yn " type="radio" v-model="model.operationSystem"/>
                  </a-form-model-item>
                </a-col>
              </a-row>

          <a-row :gutter="24">
            <a-col :span="customSpan">
              <a-form-model-item label="系统">
                <a-input placeholder="请输入系统" v-model="model.system" :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="设备端口">
                <a-input placeholder="请输入设备端口" v-model="model.equipmentPort" :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="坐标数量">
                <a-input-number placeholder="请输入坐标数量" v-model="model.coordinateNum" :min="0" style="width: 100%"
                                :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="重量">
                <a-input-number placeholder="请输入重量" v-model="model.equipmentWeight" :min="0" style="width: 100%"
                                :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
          </a-row>
              <a-row>
                <a-col :span="customSpan">
                  <a-form-model-item label="系统">
                    <a-input placeholder="请输入系统" v-model="model.system"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="设备端口">
                    <a-input placeholder="请输入设备端口" v-model="model.equipmentPort"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="坐标数量">
                    <a-input-number placeholder="请输入坐标数量" v-model="model.coordinateNum" :min="0" style="width: 100%"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="重量">
                    <a-input-number placeholder="请输入重量" v-model="model.equipmentWeight" :min="0" style="width: 100%"/>
                  </a-form-model-item>
                </a-col>
              </a-row>

          <a-row :gutter="24">
            <a-col :span="customSpan">
              <a-form-model-item label="重量计量单位">
                <a-input placeholder="请输入重量计量单位" v-model="model.weightUnit" :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="功能位置">
                <a-input placeholder="请输入功能位置" v-model="model.functionalLocation"
                         :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="安装位置">
                <a-input placeholder="请输入安装位置" v-model="model.installationPosition"
                         :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="出厂日期">
                <a-date-picker v-model="model.leaveFactoryDate" value-format="YYYY-MM-DD" style="width:100%"/>
              </a-form-model-item>
            </a-col>
          </a-row>
              <a-row>
                <a-col :span="customSpan">
                  <a-form-model-item label="重量计量单位">
                    <a-input placeholder="请输入重量计量单位" v-model="model.weightUnit"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="功能位置">
                    <a-input placeholder="请输入功能位置" v-model="model.functionalLocation"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="安装位置">
                    <a-input placeholder="请输入安装位置" v-model="model.installationPosition"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="出厂日期">
                    <a-date-picker v-model="model.leaveFactoryDate" value-format="YYYY-MM-DD" style="width:100%"/>
                  </a-form-model-item>
                </a-col>
              </a-row>

          <a-row :gutter="24">
            <a-col :span="customSpan">
              <a-form-model-item label="立项卡号">
                <a-input placeholder="请输入立项卡号" v-model="model.cardNumber" :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="资金来源">
                <a-input placeholder="请输入资金来源" v-model="model.fundingSource" :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="验收日期">
                <a-date-picker v-model="model.acceptanceCheckDate" value-format="YYYY-MM-DD" style="width:100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="出厂编号">
                <a-input placeholder="请输入出厂编号" v-model="model.factoryNumber" :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
          </a-row>
              <a-row>
                <a-col :span="customSpan">
                  <a-form-model-item label="立项卡号">
                    <a-input placeholder="请输入立项卡号" v-model="model.cardNumber"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="资金来源">
                    <a-input placeholder="请输入资金来源" v-model="model.fundingSource"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="验收日期">
                    <a-date-picker v-model="model.acceptanceCheckDate" value-format="YYYY-MM-DD" style="width:100%"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="出厂编号">
                    <a-input placeholder="请输入出厂编号" v-model="model.factoryNumber"/>
                  </a-form-model-item>
                </a-col>
              </a-row>

          <a-row :gutter="24">
            <a-col :span="customSpan">
              <a-form-model-item label="资产制造商">
                <a-input placeholder="请输入资产制造商" v-model="model.manufacturingEnterprise"
                         :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="资产来源国家">
                <a-input placeholder="请输入资产来源国家" v-model="model.originCountry" :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="型号">
                <a-input placeholder="请输入型号" v-model="model.equipmentModel" :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="设备规格">
                <a-input placeholder="请输入设备规格" v-model="model.equipmentSpecification"
                         :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
          </a-row>
              <a-row>
                <a-col :span="customSpan">
                  <a-form-model-item label="资产制造商">
                    <a-input placeholder="请输入资产制造商" v-model="model.manufacturingEnterprise"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="资产来源国家">
                    <a-input placeholder="请输入资产来源国家" v-model="model.originCountry"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="型号">
                    <a-input placeholder="请输入型号" v-model="model.equipmentModel"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="设备规格">
                    <a-input placeholder="请输入设备规格" v-model="model.equipmentSpecification"/>
                  </a-form-model-item>
                </a-col>
              </a-row>

          <a-row :gutter="24">
            <a-col :span="customSpan">
              <a-form-model-item label="总功率">
                <a-input placeholder="请输入总功率" v-model="model.equipmentPower" :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="质保开始日期">
                <a-date-picker v-model="model.warrantyStartDate" value-format="YYYY-MM-DD" style="width:100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="质保结束日期">
                <a-date-picker v-model="model.warrantyEndDate" value-format="YYYY-MM-DD" style="width:100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="资产状态">
                <j-dict-select-tag dict-code="asset_status" placeholder="请选择资产状态" v-model="model.assetStatus"
                                   :disabled="editable || disableSubmit"/>
              </a-form-model-item>
            </a-col>
          </a-row>
              <a-row>
                <a-col :span="customSpan">
                  <a-form-model-item label="总功率">
                    <a-input placeholder="请输入总功率" v-model="model.equipmentPower"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="质保开始日期">
                    <a-date-picker v-model="model.warrantyStartDate" value-format="YYYY-MM-DD" style="width:100%"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="质保结束日期">
                    <a-date-picker v-model="model.warrantyEndDate" value-format="YYYY-MM-DD" style="width:100%"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="资产状态">
                    <j-dict-select-tag dict-code="asset_status" placeholder="请选择资产状态" v-model="model.assetStatus"/>
                  </a-form-model-item>
                </a-col>
              </a-row>

          <a-row :gutter="24">
            <a-col :span="customSpan">
              <a-form-model-item label="本次三保日期">
                <a-date-picker v-model="model.latestThirdMaintenance" value-format="YYYY-MM-DD" style="width:100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="下次三保日期">
                <a-date-picker v-model="model.nextThirdMaintenance" value-format="YYYY-MM-DD" style="width:100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="三保周期">
                <a-date-picker v-model="model.thirdMaintenancePeriod" value-format="YYYY-MM-DD" style="width:100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="本次技术鉴定日期">
                <a-date-picker v-model="model.latestTechnologyCheck" value-format="YYYY-MM-DD" style="width:100%"/>
              </a-form-model-item>
            </a-col>
          </a-row>
              <a-row>
                <a-col :span="customSpan">
                  <a-form-model-item label="本次三保日期">
                    <a-date-picker v-model="model.latestThirdMaintenance" value-format="YYYY-MM-DD" style="width:100%"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="下次三保日期">
                    <a-date-picker v-model="model.nextThirdMaintenance" value-format="YYYY-MM-DD" style="width:100%"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="三保周期">
                    <a-input-number placeholder="请输入三保周期" v-model="model.thirdMaintenancePeriod" :min="0"
                                    style="width: 100%"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="本次技术鉴定日期">
                    <a-date-picker v-model="model.latestTechnologyCheck" value-format="YYYY-MM-DD" style="width:100%"/>
                  </a-form-model-item>
                </a-col>
              </a-row>

          <a-row :gutter="24">
            <a-col :span="customSpan">
              <a-form-model-item label="下次技术鉴定日期">
                <a-date-picker v-model="model.nextTechnologyCheck" value-format="YYYY-MM-DD" style="width:100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="技术鉴定周期">
                <a-date-picker v-model="model.technologyCheckPeriod" value-format="YYYY-MM-DD" style="width:100%"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
              <a-row>
                <a-col :span="customSpan">
                  <a-form-model-item label="下次技术鉴定日期">
                    <a-date-picker v-model="model.nextTechnologyCheck" value-format="YYYY-MM-DD" style="width:100%"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="customSpan">
                  <a-form-model-item label="技术鉴定周期">
                    <a-input-number placeholder="请输入技术鉴定周期" v-model="model.technologyCheckPeriod" :min="0"
                                    style="width: 100%"/>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </j-form-container>
        </a-spin>
      </a-tab-pane>

      <template v-if="disableSubmit">
@@ -309,7 +299,7 @@
  export default {
    name: 'EamEquipmentModal',
    props: {
      treeDataAlias: {
      productionTreeData: {
        type: Array
      }
    },
@@ -360,8 +350,7 @@
        },
        url: {
          add: '/eam/equipment/add',
          edit: '/eam/equipment/edit',
          getProductionTreeList: '/eam/BaseFactory/queryTreeList'
          edit: '/eam/equipment/edit'
        }
      }
    },
@@ -380,20 +369,6 @@
        this.editable = true
        this.model = Object.assign({}, record)
        this.visible = true
      },
      loadAllProductionTree() {
        //加载车间选择树
        getAction(this.url.getProductionTreeList)
          .then(res => {
            if (res.success) {
              this.productionTreeData = res.result
            } else {
              this.$notification.warning({
                message: '消息',
                description: res.message
              })
            }
          })
      },

      handleOk() {