调整设备台账页面功能模态窗样式

zhaowei

2025-03-20 90794c60e1e38c5d7d5590faabdeed0944b2d53a

调整设备台账页面功能模态窗样式

 src/components/jeecg/LxSwitch.vue

@@ -12,6 +12,7 @@
</template>

<script>
import moment from 'moment'
export default {
  name: 'LxSwitch',
  props: {

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

@@ -3,60 +3,61 @@
    :title="title"
    :width="1200"
    :visible="visible"
    centered
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-divider
          orientation="center"
          style="font-size: large;font-style: italic;color: #66aeed;"
        > 设备基础信息
      <a-form-model ref="form" :model="model" :rules="validatorRules" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-divider orientation="center" style="font-size: large;font-style: italic;color: #66aeed;"> 设备基础信息
        </a-divider>

        <a-row :gutter="24">
          <a-col :span="18">
            <a-row>
              <a-col :span="8">
                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentCode" label="设备编号">
                  <a-input placeholder="请输入设备编号" v-model="model.equipmentCode" />
                <a-form-model-item prop="equipmentCode" label="设备编号">
                  <a-input placeholder="请输入设备编号" v-model="model.equipmentCode"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentName" label="设备名称">
                  <a-input placeholder="请输入设备名称" v-model="model.equipmentName" />
                <a-form-model-item prop="equipmentName" label="设备名称">
                  <a-input placeholder="请输入设备名称" v-model="model.equipmentName"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentModel" label="设备型号">
                  <a-input placeholder="请输入设备型号" v-model="model.equipmentModel" />
                <a-form-model-item prop="equipmentModel" label="设备型号">
                  <a-input placeholder="请输入设备型号" v-model="model.equipmentModel"/>
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row>
              <a-col :span="8">
                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentSpecification"
                <a-form-model-item prop="equipmentSpecification"
                                   label="设备规格">
                  <a-input placeholder="请输入设备规格" v-model="model.equipmentSpecification" />
                  <a-input placeholder="请输入设备规格" v-model="model.equipmentSpecification"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentCategory"
                <a-form-model-item prop="equipmentCategory"
                                   label="设备分类">
                  <j-dict-select-tag dict-code="equipment_category" placeholder="请选择设备分类" v-model="model.equipmentCategory" />
                  <j-dict-select-tag dict-code="equipment_category" placeholder="请选择设备分类"
                                     v-model="model.equipmentCategory"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="operationSystem"
                <a-form-model-item prop="operationSystem"
                                   label="操作系统">
                  <a-input placeholder="请输入操作系统" v-model="model.operationSystem" />
                  <a-input placeholder="请输入操作系统" v-model="model.operationSystem"/>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentImportance"
                <a-form-model-item prop="equipmentImportance"
                                   label="关键设备标识">
                  <lx-switch
                    checked-children='是'
@@ -66,13 +67,13 @@
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentPower" label="总功率">
                  <a-input placeholder="请输入总功率" v-model="model.equipmentPower" />
                <a-form-model-item prop="equipmentPower" label="总功率">
                  <a-input placeholder="请输入总功率" v-model="model.equipmentPower"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cardNumber" label="立项卡号">
                  <a-input placeholder="请输入立项卡号" v-model="model.cardNumber" />
                <a-form-model-item prop="cardNumber" label="立项卡号">
                  <a-input placeholder="请输入立项卡号" v-model="model.cardNumber"/>
                </a-form-model-item>
              </a-col>
            </a-row>
@@ -81,156 +82,134 @@
            <j-image-upload></j-image-upload>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentWeight" label="重量">
              <a-input placeholder="请输入重量" v-model="model.equipmentWeight" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentPort" label="设备端口">
              <a-input placeholder="请输入设备端口" v-model="model.equipmentPort" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="coordinateNum" label="坐标数量">
              <a-input-number v-model="model.coordinateNum" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="assetStatus" label="资产状态">
              <j-dict-select-tag dict-code="asset_status" placeholder="请选择资产状态" v-model="model.assetStatus" disabled/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-divider
          orientation="center"
          style="font-size: large;font-style: italic;color: #66aeed;"
        > 出厂信息
        </a-divider>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="factoryNumber" label="出厂编号">
              <a-input placeholder="请输入出厂编号" v-model="model.factoryNumber" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="leaveFactoryDate" label="出厂日期">
              <a-date-picker placeholder="请选择出厂日期" v-model="model.leaveFactoryDate" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="acceptanceCheckDate"
                               label="验收日期">
              <a-date-picker placeholder="请选择验收日期" v-model="model.acceptanceCheckDate" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="installationPosition"
                               label="安装位置">
              <a-input placeholder="请输入安装位置" v-model="model.installationPosition" />
            </a-form-model-item>
          </a-col>

        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spindleConnectDimension"
                               label="主轴连接尺寸">
              <a-input placeholder="请输入主轴连接尺寸" v-model="model.spindleConnectDimension" />
            <a-form-model-item prop="equipmentWeight" label="重量">
              <a-input placeholder="请输入重量" v-model="model.equipmentWeight"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="specialEquipment"
                               label="是否特种设备">
              <lx-switch
                checked-children='是'
                un-checked-children='否'
                v-model="model.specialEquipment"
              />
            <a-form-model-item prop="equipmentPort" label="设备端口">
              <a-input placeholder="请输入设备端口" v-model="model.equipmentPort"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="manufacturingEnterprise"
                               label="制造厂家">
              <a-input placeholder="请输入制造厂家" v-model="model.manufacturingEnterprise" />
            <a-form-model-item prop="coordinateNum" label="坐标数量">
              <a-input-number v-model="model.coordinateNum" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="originCountry" label="来源国家">
              <a-input placeholder="请输入来源国家" v-model="model.originCountry" />
            <a-form-model-item prop="assetStatus" label="资产状态">
              <j-dict-select-tag dict-code="asset_status" placeholder="请选择资产状态" v-model="model.assetStatus"
                                 disabled/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-divider
          orientation="center"
          style="font-size: large;font-style: italic;color: #66aeed;"
        > 使用信息

        <a-divider orientation="center" style="font-size: large;font-style: italic;color: #66aeed;"> 出厂信息
        </a-divider>

        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="orgId" label="使用部门">
              <a-input placeholder="请输入使用部门" v-model="model.orgId" />
            <a-form-model-item prop="factoryNumber" label="出厂编号">
              <a-input placeholder="请输入出厂编号" v-model="model.factoryNumber"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentManager" label="设备管理员">
              <a-input placeholder="请输入设备管理员" v-model="model.equipmentManager" />
            <a-form-model-item prop="leaveFactoryDate" label="出厂日期">
              <a-date-picker placeholder="请选择出厂日期" v-model="model.leaveFactoryDate"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="technologyStatus" label="技术状态">
              <j-dict-select-tag dict-code="technology_status" placeholder="请选择技术状态" v-model="model.technologyStatus" />
            <a-form-model-item prop="acceptanceCheckDate" label="验收日期">
              <a-date-picker placeholder="请选择验收日期" v-model="model.acceptanceCheckDate"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mdcFlag" label="是否实施MDC">
              <lx-switch
                checked-children='是'
                un-checked-children='否'
                v-model="model.mdcFlag"
              />
            <a-form-model-item prop="installationPosition" label="安装位置">
              <a-input placeholder="请输入安装位置" v-model="model.installationPosition"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="warrantyStartDate"
                               label="质保开始日期">
              <a-date-picker placeholder="请选择开始日期" v-model="model.warrantyStartDate" />
            <a-form-model-item prop="spindleConnectDimension" label="主轴连接尺寸">
              <a-input placeholder="请输入主轴连接尺寸" v-model="model.spindleConnectDimension"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="warrantyEndDate"
                               label="质保结束日期">
              <a-date-picker placeholder="请选择结束日期" v-model="model.warrantyEndDate" />
            <a-form-model-item prop="specialEquipment" label="是否特种设备">
              <lx-switch checked-children='是' un-checked-children='否' v-model="model.specialEquipment"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="processParametersFlag"
                               label="有无工艺参数">
              <lx-switch
                checked-children='有'
                un-checked-children='无'
                v-model="model.processParametersFlag"
              />
            <a-form-model-item prop="manufacturingEnterprise" label="制造厂家">
              <a-input placeholder="请输入制造厂家" v-model="model.manufacturingEnterprise"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="precisionParametersFlag"
                               label="有无精度参数">
              <lx-switch
                checked-children='有'
                un-checked-children='无'
                v-model="model.precisionParametersFlag"
              />
            <a-form-model-item prop="originCountry" label="来源国家">
              <a-input placeholder="请输入来源国家" v-model="model.originCountry"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-divider orientation="center" style="font-size: large;font-style: italic;color: #66aeed;"> 使用信息
        </a-divider>

        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item prop="orgId" label="使用部门">
              <a-input placeholder="请输入使用部门" v-model="model.orgId"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item prop="equipmentManager" label="设备管理员">
              <a-input placeholder="请输入设备管理员" v-model="model.equipmentManager"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item prop="technologyStatus" label="技术状态">
              <j-dict-select-tag dict-code="technology_status" placeholder="请选择技术状态"
                                 v-model="model.technologyStatus"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item prop="mdcFlag" label="是否实施MDC">
              <lx-switch checked-children='是' un-checked-children='否' v-model="model.mdcFlag"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item prop="warrantyStartDate" label="质保开始日期">
              <a-date-picker placeholder="请选择开始日期" v-model="model.warrantyStartDate"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item prop="warrantyEndDate" label="质保结束日期">
              <a-date-picker placeholder="请选择结束日期" v-model="model.warrantyEndDate"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item prop="processParametersFlag" label="有无工艺参数">
              <lx-switch checked-children='有' un-checked-children='无' v-model="model.processParametersFlag"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item prop="precisionParametersFlag" label="有无精度参数">
              <lx-switch checked-children='有' un-checked-children='无' v-model="model.precisionParametersFlag"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark" label="备注">
              <a-textarea placeholder="请输入备注" v-model="model.remark" />
            <a-form-model-item :labelCol="labelColLong" :wrapperCol="wrapperColLong" prop="remark" label="备注">
              <a-textarea placeholder="请输入备注" v-model="model.remark"/>
            </a-form-model-item>
          </a-col>
        </a-row>
@@ -252,13 +231,20 @@
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 10 }
        sm: { span: 9 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },

      labelColLong: {
        xs: { span: 24 },
        sm: { span: 2 }
      },
      wrapperColLong: {
        xs: { span: 24 },
        sm: { span: 22 }
      },
      confirmLoading: false,
      validatorRules: {
        equipmentCode: [
@@ -266,20 +252,20 @@
          { validator: (rule, value, callback) => validateDuplicateValueInDelFlag('eam_equipment', 'equipment_code', value, this.model.id, true, callback) }
        ],
        equipmentName: [
          { required: true, message: '请输入设备名称' },
          { required: true, message: '请输入设备名称' }
        ],
        equipmentCategory: [
          { required: true, message: '请选择设备分类' },
          { required: true, message: '请选择设备分类' }
        ],
        leaveFactoryDate: [
          { required: true, message: '请选择出厂日期' },
          { required: true, message: '请选择出厂日期' }
        ],
        acceptanceCheckDate: [
          { required: true, message: '请选择验收日期' },
          { required: true, message: '请选择验收日期' }
        ],
        technologyStatus: [
          { required: true, message: '请选择技术状态' },
        ],
          { required: true, message: '请选择技术状态' }
        ]
      },
      url: {
        add: '/eam/equipment/add',
@@ -343,5 +329,31 @@
</script>

<style lang="less" scoped>
/deep/ .ant-modal-body {
  padding: 0 24px;
}

/deep/ .ant-upload {
  width: 185px;
  height: 185px;
}

/deep/ .img {
  display: flex;
  justify-content: center;

  .ant-upload-picture-card-wrapper {
    width: auto;
  }
}

/deep/ .ant-upload-list-picture-card-container {
  width: 185px;
  height: 185px;
}

/deep/ .ant-upload-list-item {
  width: 185px;
  height: 185px;
}
</style>