优化滚动分页，封装组件，

licp

2024-04-24 70b128785737df0d6065b09a75cf79b49efe22fa

 src/components/view/a6-device-management.vue

@@ -77,7 +77,7 @@
                  v-model="componentData.entity.specificationModel" @keyup.enter.native="refreshTable()"></el-input></div>
         </div>
         <div class="search_thing">
            <div class="search_label">设备大类：</div>
            <div class="search_label">设备分类：</div>
            <el-select v-model="componentData.entity.largeCategory" placeholder="请选择">
               <el-option v-for="item in equipmentList" :key="item.value" :label="item.label" :value="item.value">
               </el-option>
@@ -199,7 +199,7 @@
                  <el-form-item label="规格型号:">
                     <el-input :disabled="isUp" v-model="formData.specificationModel" size="small"></el-input>
                  </el-form-item>
                  <el-form-item label="设备状态:">
                  <el-form-item label="当前状态:">
                     <el-select :disabled="isUp" v-model="formData.deviceStatus" placeholder="请选择" size="small"
                        style="width:100%">
                        <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label" :value="item.value">
@@ -277,13 +277,20 @@
                     </div>
                  </el-image>
                  <!-- 表单 -->
                  <el-form :label-position="labelPosition" :model="formData2" label-width="90px">
                     <el-form-item label="出厂日期:">
                        <el-date-picker style="width:100%" v-model="formData2.dateProduction" type="datetime" size="small"
                           format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
                        </el-date-picker>
                  <el-form :label-position="labelPosition" :model="formData2" label-width="100px">
                     <el-form-item label="仪器名称:">
                <el-input v-model="formData2.deviceName" size="small"></el-input>
                     </el-form-item>
                     <el-form-item label="设备负责人:">
              <el-form-item label="仪器名称EN:">
                <el-input v-model="formData2.deviceName" size="small"></el-input>
                     </el-form-item>
              <el-form-item label="规格型号:">
                <el-input v-model="formData2.deviceName" size="small"></el-input>
                     </el-form-item>
              <el-form-item label="生产厂家:">
                <el-input v-model="formData2.deviceName" size="small"></el-input>
                     </el-form-item>
                     <!-- <el-form-item label="设备负责人:">
                        <el-select v-model="formData2.equipmentManager" placeholder="请选择" size="small" style="width:100%">
                           <el-option v-for="item in responsiblePersonList" :key="item.value" :label="item.label"
                              :value="item.value">
@@ -309,87 +316,102 @@
                separator=","
                clearable></el-cascader>
                     </el-form-item>
              -->
                  </el-form>
               </el-col>
            </el-col>
            <!-- 中间布局 -->
            <el-col :span="7">
               <el-form :label-position="labelPosition" :model="formData2" label-width="116px">
                  <el-form-item label="设备名称:">
                     <el-input v-model="formData2.deviceName" size="small"></el-input>
                  </el-form-item>
                  <el-form-item label="内部编码:">
                     <el-input v-model="formData2.internalCode" size="small"></el-input>
                  </el-form-item>
                  <el-form-item label="资产编码:">
                     <el-input v-model="formData2.assetCode" size="small"></el-input>
                  </el-form-item>
                  <el-form-item label="校准日期（月）:">
                     <el-date-picker v-model="formData2.calibrationDate" type="month" size="small" format="yyyy-MM"
                        value-format="yyyy-MM" style="width:100%" placeholder="选择月">
               <el-form :label-position="labelPosition" :model="formData2" label-width="110px">
            <el-form-item label="生产厂家EN:">
              <el-input v-model="formData2.deviceName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="出厂编号:">
              <el-input v-model="formData2.deviceName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="管理编号:">
              <el-input v-model="formData2.deviceName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="技术指标:">
              <el-input v-model="formData2.deviceName" :rows="7" type="textarea" size="small"></el-input>
            </el-form-item>
            <el-form-item label="购置日期:">
                     <el-date-picker style="width:100%" v-model="formData2.scrapTime" type="date"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="small" placeholder="选择日期">
                     </el-date-picker>
                  </el-form-item>
                  <el-form-item label="报废时间:">
                     <el-date-picker style="width:100%" v-model="formData2.scrapTime" type="datetime"
                        format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择时间">
            <el-form-item label="启用日期:">
                     <el-date-picker style="width:100%" v-model="formData2.scrapTime" type="date"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="small" placeholder="选择日期">
                     </el-date-picker>
                  </el-form-item>
                  <el-form-item label="验收记录:">
                     <el-input v-model="formData2.acceptanceRecords" size="small"></el-input>
                  </el-form-item>
                  <el-form-item label="设备编码:">
                     <el-input v-model="formData2.factoryNo" size="small"></el-input>
                  </el-form-item>
                  <el-form-item label="购置日期:">
                     <el-date-picker style="width:100%" v-model="formData2.acquisitionDate" type="datetime" size="small"
                        format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
                     </el-date-picker>
                  </el-form-item>
                  <el-form-item label="准确度量值:">
                     <el-input v-model="formData2.accurateMeasurement" size="small"></el-input>
                  </el-form-item>
                  <el-form-item label="备注:">
                     <el-input v-model="formData2.notes" size="small"></el-input>
                  </el-form-item>
            <el-form-item label="管理人:">
              <el-select v-model="formData2.equipmentManager" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in responsiblePersonList" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="地址:">
              <el-input v-model="formData2.deviceName" size="small"></el-input>
            </el-form-item>
               </el-form>
            </el-col>
            <!-- 右边布局 -->
            <el-col :span="7">
               <el-form :label-position="labelPosition" :model="formData2" label-width="110px" ref="ruleForm">
                  <el-form-item label="规格型号:">
                     <el-input v-model="formData2.specificationModel" size="small"></el-input>
               <el-form :label-position="labelPosition" :model="formData2" label-width="120px" ref="ruleForm">
            <!-- 实验室列表 -->
            <el-form-item label="所属部门:">
              <el-select v-model="formData2.equipmentManager" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in responsiblePersonList" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="检测项目:">
              <el-cascader
              v-model="formData.insProductIds"
              :options="options"
              :show-all-levels="false"
              :props="props"
              placeholder="请选择" size="small"
              style="width:100%"
              collapse-tags
              separator=","
              clearable></el-cascader>
            </el-form-item>
            <el-form-item label="校准服务机构:">
              <el-input v-model="formData2.deviceName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="最近校准日期:">
                     <el-date-picker style="width:100%" v-model="formData2.latestTraceability" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期">
                     </el-date-picker>
                  </el-form-item>
                  <el-form-item label="设备状态:">
            <el-form-item label="下次校准日期:">
                     <el-date-picker style="width:100%" v-model="formData2.latestTraceability" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期">
                     </el-date-picker>
                  </el-form-item>
            <el-form-item label="设备类型:">
              <el-select v-model="formData2.equipmentManager" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in equipmentList" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单价(万元):">
              <el-input v-model="formData2.deviceName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="当前状态:">
                     <el-select v-model="formData2.deviceStatus" placeholder="请选择" size="small" style="width:100%">
                        <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                     </el-select>
                  </el-form-item>
                  <el-form-item label="存放点:">
                     <el-input v-model="formData2.storagePoint" size="small"></el-input>
                  </el-form-item>
                  <el-form-item label="最近追溯日期:">
                     <el-date-picker style="width:100%" v-model="formData2.latestTraceability" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="small" placeholder="选择日期">
                     </el-date-picker>
                  </el-form-item>
                  <el-form-item label="停用时间:">
                     <el-date-picker style="width:100%" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="formData2.downTime" type="datetime" size="small" placeholder="选择时间">
                     </el-date-picker>
                  </el-form-item>
                  <el-form-item label="维修记录:">
                     <el-input v-model="formData2.maintenanceRecords" size="small"></el-input>
                  </el-form-item>
                  <el-form-item label="生产厂家:">
                     <el-input v-model="formData2.manufacturer" size="small"></el-input>
                  </el-form-item>
                  <el-form-item label="采购费用:">
                     <el-input v-model="formData2.procurementCosts" size="small"></el-input>
                  </el-form-item>
                  <el-form-item label="校准证书:">
                     <el-input v-model="formData2.calibrationCerticate" size="small"></el-input>
                  </el-form-item>
            <el-form-item label="校准周期（月）:">
              <el-input v-model="formData2.deviceName" size="small"></el-input>
            </el-form-item>
                  <el-form-item label="图片:">
                     <div
                        style="border: 1px solid #DCDFE6;border-radius:4px;height:32px;lineHeight:32px;display:flex;justify-content: space-around;font-size: 13px;">
@@ -434,7 +456,7 @@
            options: [],
            labelPosition: 'right',
            dialogVisible: false,
            dialogVisible2: false,
            dialogVisible2: true,
            addPower: false,
            componentData: {
               entity: {
@@ -518,7 +540,7 @@
            responsiblePersonList: [],
            // 授权人列表
            authorizerList: [],
            // 设备状态列表
            // 当前状态列表
            deviceStatusList: [],
            upLoad: false,
            upLoad2: false,