完成设备模块搬迁

licp

2025-01-06 efad6058c9c9ee6ba754dc9cc61c8d744cd199b8

完成设备模块搬迁

 node_modules.zip

Binary files differ

 package.json

@@ -21,6 +21,7 @@
    "bootstart": "0.0.0",
    "bootstrap": "^5.0.1",
    "core-js": "^3.37.1",
    "dom-to-image": "^2.6.0",
    "dragula": "^3.7.3",
    "echarts": "^5.4.2",
    "element-ui": "^2.15.6",

 src/assets/api/controller.js

@@ -75,6 +75,16 @@
    personCommunicationAbility,
    procurementSuppliesContents,
    procurementSuppliesStore,
    deviceAcceptance,
    deviceAccidentReport,
    deviceExaminePlan,
    deviceCalibrationPlan,
    deviceExternalApply,
    deviceBreakdownMaintenance,
    deviceMaintenancePlan,
    deviceScrapped,
    deviceInspectionRecord,
    deviceTraceabilityManagement,
  }
}

@@ -1003,3 +1013,121 @@
  exportExcel: '/procurementSuppliesStore/exportExcel', // è€—材入库导出
  updateStore: '/procurementSuppliesStore/updateStore', // è€—材入库修改
}

// è®¾å¤‡éªŒæ”¶ï¼ˆè£…备）
const deviceAcceptance = {
  addDeviceAcceptance: '/deviceAcceptance/addDeviceAcceptance', // æ–°å¢žè®¾å¤‡éªŒæ”¶
  updateDeviceAcceptance: '/deviceAcceptance/updateDeviceAcceptance', // ç¼–辑设备验收
  delDeviceAcceptance: '/deviceAcceptance/delDeviceAcceptance', // åˆ é™¤è®¾å¤‡éªŒæ”¶
  delDeviceAcceptanceFileList: '/deviceAcceptance/delDeviceAcceptanceFileList', // è®¾å¤‡éªŒæ”¶é™„件删除
  getDeviceAcceptance: '/deviceAcceptance/getDeviceAcceptance', // æŸ¥è¯¢è®¾å¤‡éªŒæ”¶
  getDeviceAcceptanceFileList: '/deviceAcceptance/getDeviceAcceptanceFileList', // è®¾å¤‡éªŒæ”¶é™„件列表
  pageDeviceAcceptance: '/deviceAcceptance/pageDeviceAcceptance', // è®¾å¤‡éªŒæ”¶åˆ—表
  uploadDeviceAcceptanceFile: '/deviceAcceptance/uploadDeviceAcceptanceFile', // è®¾å¤‡éªŒæ”¶é™„件新增
  exportDeviceAcceptance: '/deviceAcceptance/exportDeviceAcceptance', // å¯¼å‡º
}

// è®¾å¤‡äº‹æ•…
const deviceAccidentReport = {
  addDeviceAccidentReport: '/deviceAccidentReport/addDeviceAccidentReport', // æ–°å¢žè®¾å¤‡äº‹æ•…报告
  delDeviceAccidentReport: '/deviceAccidentReport/delDeviceAccidentReport', // åˆ é™¤è®¾å¤‡äº‹æ•…报告
  getDeviceAccidentReport: '/deviceAccidentReport/getDeviceAccidentReport', // æŸ¥è¯¢è®¾å¤‡äº‹æ•…报告
  pageDeviceAccidentReport: '/deviceAccidentReport/pageDeviceAccidentReport', // è®¾å¤‡äº‹æ•…报告列表
  exportDeviceAccidentReport: '/deviceAccidentReport/exportDeviceAccidentReport', // å¯¼å‡º
}

// è®¾å¤‡æ ¸æŸ¥è®¡åˆ’
const deviceExaminePlan = {
  addDeviceExaminePlanDetail: '/deviceExaminePlan/addDeviceExaminePlanDetail', // æ–°å¢žè®¾å¤‡æ ¸æŸ¥è®¡åˆ’详情
  addExamineRecord: '/deviceExaminePlan/addExamineRecord', // æ–°å¢žæ ¸æŸ¥è®°å½•
  addExamineRecordContrast: '/deviceExaminePlan/addExamineRecordContrast', // æ–°å¢žæ ¸æŸ¥å¯¹æ¯”记录
  delDeviceExaminePlanDetail: '/deviceExaminePlan/delDeviceExaminePlanDetail', // åˆ é™¤è®¾å¤‡æ ¸æŸ¥è®¡åˆ’详情
  delQualitySupervise: '/deviceExaminePlan/delQualitySupervise', // è®¾å¤‡æ ¸æŸ¥è®¡åˆ’删除
  exportDeviceExaminePlanDetail: '/deviceExaminePlan/exportDeviceExaminePlanDetail', // å¯¼å‡ºè®¾å¤‡æ ¸æŸ¥è®¡åˆ’
  getExamineRecord: '/deviceExaminePlan/getExamineRecord', // æŸ¥è¯¢æ ¸æŸ¥è®°å½•
  getExamineRecordContrast: '/deviceExaminePlan/getExamineRecordContrast', // æŸ¥è¯¢æ ¸æŸ¥å¯¹æ¯”记录
  importDeviceExaminePlan: '/deviceExaminePlan/importDeviceExaminePlan', // å¯¼å…¥è®¾å¤‡æ ¸æŸ¥è®¡åˆ’
  pageDeviceExaminePlan: '/deviceExaminePlan/pageDeviceExaminePlan', // è®¾å¤‡æ ¸æŸ¥è®¡åˆ’列表
  pageDeviceExaminePlanDetail: '/deviceExaminePlan/pageDeviceExaminePlanDetail', // è®¾å¤‡æ ¸æŸ¥è®¡åˆ’详情列表
  ratifyDeviceExaminePlan: '/deviceExaminePlan/ratifyDeviceExaminePlan', // è®¾å¤‡æ ¸æŸ¥è®¡åˆ’批准
  reviewExamineRecord: '/deviceExaminePlan/reviewExamineRecord', // å¤æ ¸æ ¸æŸ¥è®°å½•
  reviewExamineRecordContrast: '/deviceExaminePlan/reviewExamineRecordContrast', // å®¡æ ¸æ ¸æŸ¥å¯¹æ¯”记录
  updateDeviceExaminePlanDetail: '/deviceExaminePlan/updateDeviceExaminePlanDetail', // ä¿®æ”¹è®¾å¤‡æ ¸æŸ¥è®¡åˆ’详情
  exportReviewExamineRecordDetail: '/deviceExaminePlan/exportReviewExamineRecordDetail', // æ ¸æŸ¥è®°å½•å¯¼å‡º
  exportReviewExamineRecordContrast: '/deviceExaminePlan/exportReviewExamineRecordContrast', // æ ¸æŸ¥å¯¹æ¯”导出
  addDeviceExaminePlan: '/deviceExaminePlan/addDeviceExaminePlan', // æ·»åŠ è®¾å¤‡æ ¸æŸ¥è®¡åˆ’
}

// è®¾å¤‡æ ¡å‡†è®¡åˆ’
const deviceCalibrationPlan = {
  pageDeviceCalibrationPlan: '/deviceCalibrationPlan/pageDeviceCalibrationPlan', // è®¾å¤‡æ ¡å‡†è®¡åˆ’列表查询
  importDeviceCalibrationPlan: '/deviceCalibrationPlan/importDeviceCalibrationPlan', // å¯¼å…¥è®¾å¤‡æ ¡å‡†è®¡
  ratifyDeviceCalibrationPlan: '/deviceCalibrationPlan/ratifyDeviceCalibrationPlan', // è®¾å¤‡æ ¡å‡†è®¡åˆ’批准
  exportDeviceCalibrationPlanDetail: '/deviceCalibrationPlan/exportDeviceCalibrationPlanDetail', // è®¾å¤‡æ ¡å‡†è®¡åˆ’导出
  delQualitySupervise: '/deviceCalibrationPlan/delQualitySupervise', // è®¾å¤‡æ ¡å‡†è®¡åˆ’删除
  pageDeviceCalibrationPlanDetail: '/deviceCalibrationPlan/pageDeviceCalibrationPlanDetail', // è®¾å¤‡æ ¡å‡†è®¡åˆ’详情列表
  addDeviceCalibrationPlanDetail: '/deviceCalibrationPlan/addDeviceCalibrationPlanDetail', // æ–°å¢žè®¾å¤‡æ ¡å‡†è®¡åˆ’详情
  updateDeviceCalibrationPlanDetail: '/deviceCalibrationPlan/updateDeviceCalibrationPlanDetail', // ä¿®æ”¹è®¾å¤‡æ ¡å‡†è®¡åˆ’详情
  delDeviceCalibrationPlanDetail: '/deviceCalibrationPlan/delDeviceCalibrationPlanDetail', // è®¾å¤‡æ ¡å‡†è®¡åˆ’详情删除
  addDeviceCalibrationPlan: '/deviceCalibrationPlan/addDeviceCalibrationPlan', // æ–°å¢žè®¾å¤‡æ ¡å‡†è®¡åˆ’
}

// å€Ÿç”¨å¤–部仪器
const deviceExternalApply = {
  addDeviceExternalApply: '/deviceExternalApply/addDeviceExternalApply', // æ–°å¢žåˆ©ç”¨å¤–部设备申请
  delDeviceExternalApply: '/deviceExternalApply/delDeviceExternalApply', // åˆ é™¤åˆ©ç”¨å¤–部设备申请
  getDeviceExternalApply: '/deviceExternalApply/getDeviceExternalApply', // æŸ¥è¯¢åˆ©ç”¨å¤–部设备申请
  pageDeviceExternalApply: '/deviceExternalApply/pageDeviceExternalApply', // åˆ©ç”¨å¤–部设备申请列表
  exportDeviceExternalApply: '/deviceExternalApply/exportDeviceExternalApply', // å¯¼å‡º
}

// è®¾å¤‡æ•…障与维修
const deviceBreakdownMaintenance = {
  addDeviceBreakdownMaintenance: '/deviceBreakdownMaintenance/addDeviceBreakdownMaintenance', // æ–°å¢žè®¾å¤‡æ•…障维修
  delDeviceBreakdownMaintenance: '/deviceBreakdownMaintenance/delDeviceBreakdownMaintenance', // åˆ é™¤è®¾å¤‡æ•…障维修
  getDeviceBreakdownMaintenance: '/deviceBreakdownMaintenance/getDeviceBreakdownMaintenance', // æŸ¥è¯¢è®¾å¤‡æ•…障维修
  pageDeviceBreakdownMaintenance: '/deviceBreakdownMaintenance/pageDeviceBreakdownMaintenance', // è®¾å¤‡æ•…障维修列表
  exportDeviceBreakdownMaintenance: '/deviceBreakdownMaintenance/exportDeviceBreakdownMaintenance', // å¯¼å‡º
}

// è®¾å¤‡ä¿å…»
const deviceMaintenancePlan = {
  addMaintenancePlan: '/deviceMaintenancePlan/addMaintenancePlan', // æ–°å¢žè®¾å¤‡ä¿å…»è®¡åˆ’
  deleteMaintenancePlan: '/deviceMaintenancePlan/deleteMaintenancePlan', // åˆ é™¤è®¾å¤‡ä¿å…»è®¡åˆ’
  exportDeviceMaintenancePlan: '/deviceMaintenancePlan/exportDeviceMaintenancePlan', // å¯¼å‡ºè®¾å¤‡ä¿å…»è®¡åˆ’
  getMaintenancePlanDetail: '/deviceMaintenancePlan/getMaintenancePlanDetail', // æŸ¥è¯¢è®¾å¤‡ä¿å…»è®¡åˆ’详情
  reviewMaintenancePlanStatus: '/deviceMaintenancePlan/reviewMaintenancePlanStatus', // ä¿å…»è®¡åˆ’审核状态修改
  selectDeviceMaintenancePlanByPage: '/deviceMaintenancePlan/selectDeviceMaintenancePlanByPage', // åˆ†é¡µæŸ¥è¯¢è®¾å¤‡ä¿å…»è®¡åˆ’
  updateMaintenancePlan: '/deviceMaintenancePlan/updateMaintenancePlan', // ä¿®æ”¹è®¾å¤‡ä¿å…»è®¡åˆ’
}

// è®¾å¤‡æŠ¥åºŸ
const deviceScrapped = {
  addDeviceScrapped: '/deviceScrapped/addDeviceScrapped', // æ–°å¢žè®¾å¤‡æŠ¥åºŸç”³è¯·
  delDeviceScrapped: '/deviceScrapped/delDeviceScrapped', // åˆ é™¤è®¾å¤‡æŠ¥åºŸç”³è¯·
  getDeviceScrapped: '/deviceScrapped/getDeviceScrapped', // æŸ¥è¯¢è®¾å¤‡æŠ¥åºŸç”³è¯·
  pageDeviceScrapped: '/deviceScrapped/pageDeviceScrapped', // è®¾å¤‡æŠ¥åºŸç”³è¯·åˆ—表
  exportDeviceScrapped: '/deviceScrapped/exportDeviceScrapped', // å¯¼å‡º
}

// è®¾å¤‡ç‚¹æ£€
const deviceInspectionRecord = {
  addDeviceInspectionRecord: '/deviceInspectionRecord/addDeviceInspectionRecord', // æ–°å¢žè®¾å¤‡ç‚¹æ£€è®°å½•
  deleteDeviceInspectionRecord: '/deviceInspectionRecord/deleteDeviceInspectionRecord', // åˆ é™¤è®¾å¤‡ç‚¹æ£€è®°å½•
  exportDeviceInspectionRecord: '/deviceInspectionRecord/exportDeviceInspectionRecord', // å¯¼å‡ºè®¾å¤‡ç‚¹æ£€è®°å½•
  getDeviceInspectionRecordByPage: '/deviceInspectionRecord/getDeviceInspectionRecordByPage', // åˆ†é¡µæŸ¥è¯¢è®¾å¤‡ç‚¹æ£€è®°å½•
  updateDeviceInspectionRecord: '/deviceInspectionRecord/updateDeviceInspectionRecord', // ä¿®æ”¹è®¾å¤‡ç‚¹æ£€è®°å½•
  reviewDeviceInspectionRecord: '/deviceInspectionRecord/reviewDeviceInspectionRecord', // å¤æ ¸è®¾å¤‡ç‚¹æ£€è®°å½•
  getDeviceInspectionRecord: '/deviceInspectionRecord/getDeviceInspectionRecord', // è®¾å¤‡ç‚¹æ£€è®°å½•è¯¦æƒ…
}

// è®¾å¤‡é‡å€¼æº¯æºè®¡åˆ’
const deviceTraceabilityManagement = {
  addTraceabilityManagement: '/deviceTraceabilityManagement/addTraceabilityManagement', // æ–°å¢žé‡å€¼æº¯æºè®¡åˆ’
  deleteTraceabilityManagement: '/deviceTraceabilityManagement/deleteTraceabilityManagement', // åˆ é™¤é‡å€¼æº¯æºè®¡åˆ’
  exportDeviceTraceabilityManagement: '/deviceTraceabilityManagement/exportDeviceTraceabilityManagement', // å¯¼å‡ºé‡å€¼æº¯æºè®¡åˆ’
  getTraceabilityManagementDetail: '/deviceTraceabilityManagement/getTraceabilityManagementDetail', // æŸ¥è¯¢é‡å€¼æº¯æºè®¡åˆ’详情
  reviewTraceabilityManagementStatus: '/deviceTraceabilityManagement/reviewTraceabilityManagementStatus', // é‡å€¼æº¯æºè®¡åˆ’审核状态修改
  selectDeviceTraceabilityManagementByPage: '/deviceTraceabilityManagement/selectDeviceTraceabilityManagementByPage', // åˆ†é¡µæŸ¥è¯¢é‡å€¼æº¯æºè®¡åˆ’
  updateTraceabilityManagement: '/deviceTraceabilityManagement/updateTraceabilityManagement', // ä¿®æ”¹é‡å€¼æº¯æºè®¡åˆ’
}

 src/components/do/a6-device/acquisition-config.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,792 @@
<template>
  <div class="data-acquisition-config">
    <div>
      <el-row class="title">
        <el-col :span="6" style="padding-left: 20px;text-align: left;">数采配置</el-col>
        <el-col :span="18" style="text-align: right;">
          <el-button size="medium" type="primary" @click="fileConfiguration">文件配置</el-button>
          <el-button size="medium" @click="$parent.closeDataVue()">
            <span style="color: #3A7BFA;">返回</span>
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table">
      <el-table :data="tableList.slice(
          (page.current - 1) * page.size,
          page.current * page.size
        )
          " border tooltip-effect="dark" style="width: 74%;" height="100%" :span-method="spanMethod">
        <el-table-column type="index" label="序号" align="center" width="65"></el-table-column>
        <el-table-column prop="deviceName" align="center" min-width="100" label="设备名称"></el-table-column>
        <el-table-column prop="fileType" align="center" label="文件后缀"></el-table-column>
        <el-table-column prop="collectUrl" align="center" min-width="100" show-overflow-tooltip
          label="采集地址"></el-table-column>
        <el-table-column prop="storageUrl" align="center" min-width="100" show-overflow-tooltip
          label="存储地址"></el-table-column>
        <el-table-column prop="ip" align="center" label="IP地址" min-width="100"></el-table-column>
        <el-table-column prop="sample" align="center" label="检验对象" show-overflow-tooltip
          min-width="150"></el-table-column>
        <el-table-column prop="inspectionItemClass" align="center" label="检验项分类" min-width="120"></el-table-column>
        <el-table-column prop="inspectionItem" align="center" label="检验项" min-width="100"></el-table-column>
        <el-table-column prop="inspectionItemSubclass" align="center" label="检验子项" min-width="100"></el-table-column>
        <el-table-column prop="referx" align="center" label="参照X" min-width="100"></el-table-column>
        <el-table-column prop="x" align="center" label="X"></el-table-column>
        <el-table-column prop="refery" align="center" label="参照Y" min-width="100"></el-table-column>
        <el-table-column prop="y" align="center" label="Y"></el-table-column>
        <el-table-column prop="anotherName" align="center" label="别名" min-width="100"></el-table-column>
        <el-table-column prop="matchingName" align="center" label="匹配名称" min-width="100"></el-table-column>
        <el-table-column prop="formula" align="center" label="公式"></el-table-column>
        <el-table-column prop="section" fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="dataConfig(scope.row)">数采配置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page" v-if="tableList.length > 0">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page.current"
        :page-sizes="[10, 20, 30, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
        :total="tableList.length">
      </el-pagination>
    </div>
    <el-dialog title="数采配置" :visible.sync="dialogVisible3" width="920px" :before-close="closeForm">
      <el-form :model="configForm" label-position="top" size="small" ref="configForm" label-width="100px"
        class="demo-ruleForm">
        <el-table :data="domains" style="width: 100%" height="300">
          <el-table-column label="序号" type="index" width="80">
            <template v-slot="scope">
              {{ getIndexWithAlphabet(scope.$index) }}
            </template>
          </el-table-column>
          <el-table-column prop="referx" label="参照X" min-width="140">
            <template v-slot="scope">
              <el-input style="width: 100%" v-model="scope.row.referx"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="x" label="X" min-width="100">
            <template v-slot="scope">
              <el-input style="width: 100%" v-model="scope.row.x"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="refery" label="参照Y" min-width="140">
            <template v-slot="scope">
              <el-input style="width: 100%" v-model="scope.row.refery"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="y" label="Y" min-width="100">
            <template v-slot="scope">
              <el-input style="width: 100%" v-model="scope.row.y"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="anotherName" label="别名" min-width="140">
            <template v-slot="scope">
              <el-input style="width: 100%" v-model="scope.row.anotherName"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="matchingName" label="匹配名称" min-width="140">
            <template v-slot="scope">
              <el-input style="width: 100%" v-model="scope.row.matchingName"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template v-slot="scope">
              <el-button @click.prevent="removeDomain(scope.row)" size="small" type="text">删除</el-button>
              <el-button @click="addDomain" size="small" type="text">新增</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="fomItem2">
          <el-form-item class="fomItemInput1">
            <template v-slot="label">
              å…¬å¼ï¼š
              <el-tooltip v-for="(formula, key) in formulas" class="itemFomItem" effect="dark" :content="formula.content" :key="key"
                placement="top">
                <label>{{ formula.label }}()</label>
              </el-tooltip>
              <el-input type="textarea" autosi:autosize="{ minRows: 2, maxRows: 4}" ze placeholder="请输入内容"
                v-model="configForm.formula" @change="evalResult">
              </el-input>
            </template>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-button @click="closeForm">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="submitForm3" :loading="upLoad3">ç¡® å®š</el-button>
        </el-row>
      </span>
    </el-dialog>
    <el-dialog title="数采配置" :visible.sync="dialogVisible4" width="400px">
      <div class="search_thing" style="margin-bottom: 14px;">
        <div class="search_label">
          <span style="color:red;margin-right: 4px;">*</span>IP：
        </div>
        <el-input size="small" placeholder="请输入" clearable v-model="configForm.ip"></el-input>
      </div>
      <div class="search_thing" style="margin-bottom: 14px;">
        <div class="search_label">
          <span style="color:red;margin-right: 4px;">*</span>采集地址：
        </div>
        <el-input size="small" placeholder="请输入" clearable v-model="configForm.collectUrl"></el-input>
      </div>
      <div class="search_thing" style="margin-bottom: 14px;">
        <div class="search_label">储存地址：</div>
        <el-input size="small" placeholder="请输入" clearable v-model="configForm.storageUrl"></el-input>
      </div>
      <div class="search_thing" style="margin-bottom: 14px;">
        <div class="search_label">
          <span style="color:red;margin-right: 4px;">*</span>文件后缀：
        </div>
        <el-select v-model="configForm.fileType" size="small" placeholder="请选择" style="width: 100%;">
          <el-option v-for="item in fileTypeOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search_thing" style="margin-bottom: 14px;">
        <div class="search_label">委托字段：</div>
        <el-input size="small" placeholder="请输入" clearable v-model="configForm.entrustCode"></el-input>
      </div>
      <div class="search_thing" style="margin-bottom: 14px;">
        <div class="search_label">样品字段：</div>
        <el-input size="small" placeholder="请输入" clearable v-model="configForm.sampleCode"></el-input>
      </div>
      <div class="search_thing" style="margin-bottom: 14px;">
        <div class="search_label">文件名称：</div>
        <el-input size="small" placeholder="请输入" clearable v-model="configForm.dbFileName"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-button @click="dialogVisible4 = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="submitForm4" :loading="upLoad4">ç¡® å®š</el-button>
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "dataAcquisitionConfig",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  props: {
    deviceId: {
      type: Number,
      default: () => []
    }
  },
  mounted() {
    this.init();
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      formulas: [
        {
          label: "MAX",
          content: "求参数最大值，参数个数最少两个，如：MAX(A1,B2)"
        },
        {
          label: "MIN",
          content: "求参数最小值，参数个数最少两个，如：MIN(A1,B2)"
        },
        {
          label: "SUM",
          content: "求和，参数个数最少两个，如：SUM(A1,B2)"
        },
        {
          label: "ABS",
          content: "求绝对值，参数个数最少一个，如：ABS(A1)"
        },
        {
          label: "AVERAGE",
          content: "求平均值，参数个数最少两个个，如：AVERAGE(A1,B2)"
        },
        {
          label: "MEDIAN",
          content: "求中值，参数个数最少两个个，如：MEDIAN(A1,B2)"
        },
      ],
      dialogVisible4: false,
      tableList: [],
      page: {
        current: 1,
        size: 20
      },
      dialogVisible3: false,
      configForm: {
        formula: "",
        collectUrl: "",
        storageUrl: "",
        entrustCode: "",
        sampleCode: "",
        dbFileName: "",
        fiberOpticRibbon: ""
      },
      domains: [
        {
          referx: "",
          refery: "",
          x: "",
          y: "",
          anotherName: "",
          matchingName: ""
        }
      ],
      upLoad3: false,
      upLoad4: false,
      fileTypeOptions: [
        { label: "csv", value: ".csv" },
        { label: "db", value: ".db" },
        { label: "mdb", value: ".mdb" },
        { label: "word", value: ".docx" },
        { label: "excel", value: ".xlsx" },
        { label: "txt", value: ".txt" },
        { label: "png", value: ".png" }
      ],
      spanList: [],
      specialSpanList: [],
      spanConfig: {
        special: {
          main: "inspectionItemSubclass",
          rows: [
            {
              name: "deviceName",
              index: 1
            },
            {
              name: "fileType",
              index: 2
            },
            {
              name: "collectUrl",
              index: 3
            },
            {
              name: "storageUrl",
              index: 4
            },
            {
              name: "ip",
              index: 5
            },
            {
              name: "inspectionItem",
              index: 6
            },
            {
              name: "inspectionItemSubclass",
              index: 7
            },
            {
              name: "formula",
              index: 13
            },
            {
              name: "section",
              index: 14
            }
          ]
        }
      },
      deleteList: []
    };
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    getIndexWithAlphabet(index) {
      const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      const letterIndex = index % 26;
      return alphabet.charAt(letterIndex) + (index + 1);
    },
    rowspan(spanArr, position, spanName) {
      this.tableList.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1);
          position = 0;
        } else {
          if (
            this.tableList[index][spanName] ===
            this.tableList[index - 1][spanName]
          ) {
            spanArr[position] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            position = index;
          }
        }
      });
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // ä¸€èˆ¬çš„合并行
      if (
        this.spanConfig != undefined &&
        this.spanConfig.rows &&
        this.spanConfig.rows.length > 0
      ) {
        let i = null;
        let obj = this.spanConfig.rows.find((item, index) => {
          i = index;
          return item.index == columnIndex;
        });
        if (obj) {
          const _row = this.spanList[i].arr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      }
      // ç‰¹æ®Šçš„合并行
      if (
        this.spanConfig != undefined &&
        this.spanConfig.special &&
        this.spanConfig.special.main &&
        this.spanConfig.special.rows &&
        this.spanConfig.special.rows.length > 0
      ) {
        let i = null;
        let obj = this.spanConfig.special.rows.find((item, index) => {
          i = index;
          return item.index == columnIndex;
        });
        if (obj) {
          const _row = this.specialSpanList[i].arr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      }
    },
    fileConfiguration() {
      this.dialogVisible4 = true;
      if (this.tableList[0]) {
        this.$set(this.configForm, "fileType", this.tableList[0].fileType);
        this.$set(this.configForm, "collectUrl", this.tableList[0].collectUrl);
        this.$set(this.configForm, "storageUrl", this.tableList[0].storageUrl);
        this.$set(this.configForm, "ip", this.tableList[0].ip);
        this.$set(
          this.configForm,
          "entrustCode",
          this.tableList[0].entrustCode
        );
        this.$set(
          this.configForm,
          "sampleCode",
          this.tableList[0].sampleCode
        );
        this.$set(
          this.configForm,
          "dbFileName",
          this.tableList[0].dbFileName
        );
        this.$set(
          this.configForm,
          "fiberOpticRibbon",
          this.tableList[0].fiberOpticRibbon
        )
      }
    },
    init() {
      this.$axios
        .get(
          this.$api.deviceScope.queryDataAcquisitionConfiguration +
          "?deviceId=" +
          this.deviceId +
          "&isDevice=" +
          false
        )
        .then(res => {
          this.tableList = res.data;
          this.tableList.forEach(i => {
            let isIncludes = false
            if (i.formula && i.formula != "") {
              this.formulas.forEach(j => {
                if (i.formula.includes(j.label)) {
                  isIncludes = true
                }
              })
            }
            if (!isIncludes && i.formula) {
              i.formula = i.formula.slice(1, -1)
            }
            i.sample = i.sample
              .replace(/"/g, "")
              .replace(/],/g, "；")
              .replace(/\[/g, "")
              .replace(/]/g, "");
          });
          if (this.tableList[0]) {
            this.$set(this.configForm, "fileType", this.tableList[0].fileType);
            this.$set(
              this.configForm,
              "collectUrl",
              this.tableList[0].collectUrl
            );
            this.$set(
              this.configForm,
              "storageUrl",
              this.tableList[0].storageUrl
            );
            this.$set(this.configForm, "ip", this.tableList[0].ip);
            this.$set(
              this.configForm,
              "entrustCode",
              this.tableList[0].entrustCode
            );
            this.$set(
              this.configForm,
              "sampleCode",
              this.tableList[0].sampleCode
            );
            this.$set(
              this.configForm,
              "dbFileName",
              this.tableList[0].dbFileName
            );
            this.$set(
              this.configForm,
              "fiberOpticRibbon",
              this.tableList[0].fiberOpticRibbon
            )
          }
          // ä¸€èˆ¬çš„合并行
          if (
            this.spanConfig != undefined &&
            this.spanConfig.rows &&
            this.spanConfig.rows.length > 0
          ) {
            this.spanList = [];
            this.spanConfig.rows.forEach((item, index) => {
              this.spanList.push({
                arr: [],
                position: 0
              });
              this.rowspan(
                this.spanList[index].arr,
                this.spanList[index].position,
                item.name
              );
            });
          }
          // ç‰¹æ®Šçš„合并行
          if (
            this.spanConfig != undefined &&
            this.spanConfig.special &&
            this.spanConfig.special.main &&
            this.spanConfig.special.rows &&
            this.spanConfig.special.rows.length > 0
          ) {
            this.specialSpanList = [];
            this.spanConfig.special.rows.forEach((item, index) => {
              this.specialSpanList.push({
                arr: [],
                position: 0
              });
              this.rowspan(
                this.specialSpanList[index].arr,
                this.specialSpanList[index].position,
                this.spanConfig.special.main
              );
            });
          }
        });
    },
    submitForm4() {
      const obj = Object.assign({
        deviceId: this.deviceId,
        fileType: this.configForm.fileType,
        collectUrl: this.configForm.collectUrl,
        storageUrl: this.configForm.storageUrl,
        ip: this.configForm.ip,
        isDevice: true,
        entrustCode: this.configForm.entrustCode,
        sampleCode: this.configForm.sampleCode,
        dbFileName: this.configForm.dbFileName,
        fiberOpticRibbon: this.configForm.fiberOpticRibbon
      });
      this.upLoad4 = true;
      this.$axios
        .post(
          this.$api.deviceScope.saveDataAcquisitionConfiguration +
          "?deviceId=" +
          this.deviceId,
          obj,
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          if (res.code == 200) {
            // this.tableList = res.data;
            this.dialogVisible4 = false;
            this.init();
            this.$message.success("操作成功");
          }
          this.upLoad4 = false;
        })
        .catch(err => {
          this.upLoad4 = false;
        });
    },
    dataConfig(row) {
      this.configForm = {
        deviceId: row.deviceId,
        inspectionItem: row.inspectionItem.trim(),
        inspectionItemSubclass: row.inspectionItemSubclass,
        structureItemParameterId: row.structureItemParameterId,
        inspectionItemClass: row.inspectionItemClass,
      };
      this.dialogVisible3 = true;
      this.$axios
        .get(
          this.$api.deviceScope.queryDataAcquisitionConfiguration +
          "?deviceId=" +
          this.deviceId +
          "&inspectionItem=" +
          row.inspectionItem.trim() +
          "&isDevice=" +
          true +
          "&inspectionItemSubclass=" +
          row.inspectionItemSubclass.trim() +
            "&inspectionItemClass=" +
            row.inspectionItemClass.trim()
            +
            "&structureItemParameterId=" +
            row.structureItemParameterId
        )
        .then(res => {
          const data = res.data;
          if (data[0]) {
            this.domains.splice(0, 1);
            let formula = data[0].formula
            let isIncludes = false
            if (formula && formula != "") {
              for (let key in this.formulas) {
                if (formula.includes(this.formulas[key].label)) {
                  isIncludes = true
                }
              }
            }
            if (!isIncludes && formula) {
              let formulaValue = formula.slice(1, -1)
              this.$set(this.configForm, "formula", formulaValue);
            } else {
              this.$set(this.configForm, "formula", data[0].formula);
            }
            data.forEach(i => {
              this.domains.push({
                referx: i.referx,
                refery: i.refery,
                x: i.x,
                y: i.y,
                anotherName: i.anotherName,
                matchingName: i.matchingName,
                id: i.id
              });
            });
          }
        });
    },
    submitForm3() {
      this.$refs.configForm.validate(valid => {
        // è¡¨å•æ ¡éªŒ
        if (valid) {
          this.domains.forEach(item => {
            const isEmpty = Object.values(item).every(val => val === "");
            if (isEmpty) {
              this.$message.error("请填写参照数据");
            }
          });
          this.domains.forEach((i, index) => {
            let isIncludes = false
            if (this.configForm.formula && this.configForm.formula !== "") {
              for (let formula in this.formulas) {
                if (this.configForm.formula.includes(this.formulas[formula].label)) {
                  isIncludes = true
                }
              }
            }
            if (isIncludes === false && this.configForm.formula !== "" && this.configForm.formula !== undefined) {
              i.formula = "(" + this.configForm.formula + ")";
            } else {
              i.formula = this.configForm.formula;
            }
            i.deviceId = this.deviceId;
            i.inspectionItem = this.configForm.inspectionItem;
            i.inspectionItemSubclass = this.configForm.inspectionItemSubclass;
            i.structureItemParameterId = this.configForm.structureItemParameterId;
            i.inspectionItemClass = this.configForm.inspectionItemClass;
            i.serialNumber = this.getIndexWithAlphabet(index)
          });
          this.$axios
            .post(
              this.$api.deviceScope.saveDataAcquisitionConfiguration +
              "?deviceId=" +
              this.deviceId,
              { dataConfigList: this.domains, isDevice: false },
              {
                headers: {
                  "Content-Type": "application/json"
                }
              }
            )
            .then(res => {
              this.dialogVisible3 = false;
              this.domains = [
                {
                  referx: "",
                  refery: "",
                  x: "",
                  y: "",
                  id: ""
                }
              ];
              if (this.deleteList.length > 0) {
                this.$axios
                  .delete(
                    this.$api.deviceScope.deleteDataAcquisitionConfiguration +
                    "?ids=" +
                    this.deleteList.join()
                  )
                  .then(res => {
                    if (res.code == 200) {
                      this.init();
                    }
                  });
              }
              this.init();
              this.$message.success("添加成功");
            });
        } else {
          return false;
        }
      });
    },
    removeDomain(item) {
      // åˆ é™¤å…¬å¼formItem
      const index = this.domains.indexOf(item);
      if (index !== -1 && this.domains.length > 1) {
        if (item.id) {
          this.deleteList.push(item.id);
          this.domains.splice(index, 1);
        } else {
          this.domains.splice(index, 1);
        }
      } else {
        this.$message.error("不允许删除最后一条数据！");
      }
    },
    addDomain() {
      // æ·»åŠ å…¬å¼formItem
      this.domains.push({
        referx: "",
        refery: "",
        x: "",
        y: "",
        id: ""
      });
    },
    evalResult(val) {
      this.configForm.formula = val;
      // æ ¹æ®å…¬å¼è®¡ç®—出结果
    },
    sizeChange(val) {
      this.page.size = val;
    },
    currentChange(val) {
      this.page.current = val;
    },
    closeForm() {
      this.deleteList = [];
      this.domains = [
        {
          referx: "",
          refery: "",
          x: "",
          y: "",
          id: ""
        }
      ];
      this.dialogVisible3 = false;
      this.$refs.configForm.resetFields();
    }
  }
};
</script>

<style scoped>
.itemFomItem {
  margin-left: 20px;
}

.search_thing {
  width: 350px;
  display: flex;
  align-items: center;
}

.search_label {
  width: 110px;

  font-size: 14px;
  text-align: right;
}

.data-acquisition-config {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  .title {
    height: 60px;
    line-height: 60px;
  }
}

.page {
  width: 100%;
  height: 30px;
  text-align: right;
  margin-top: 10px;
}

.table {
  margin-top: 10px;
  background-color: #fff;
  width: calc(100vw - 1em);
  height: calc(100vh - 18em);
}

.fomItem1 {
  display: flex;
  height: 74px;
}

.fomItem2 {
  display: flex;
  width: 100%;
}

.fomItemInput {
  width: 180px;
  margin-right: 6px;
}

.fomItemInput1 {
  width: 100%;
  margin-right: 6px;
}

>>>.el-form-item__label {
  padding-bottom: 0 !important;
}
</style>

 src/components/do/a6-device/borrow.vue

@@ -1,13 +1,641 @@
<!-- è®¾å¤‡å€Ÿç”¨ -->
<template>
  <div>设备借用</div>
  <div>
    <div class="search">
      <div class="search_thing">
        <div class="search_label">流程编号：</div>
        <div ><el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.processNumber"
            @keyup.enter.native="refreshTable()"></el-input></div>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="small" @click="refresh()">重 ç½®</el-button>
        <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
      </div>
      <div class="btns">
        <el-button size="small" type="primary" @click="add">新增</el-button>
        <el-button size="small" type="primary" @click="handleDown" :loading="outLoading">导出</el-button>
      </div>
    </div>
    <div class="tables" style="margin-top: 10px;">
      <ValueTable ref="ValueTable" :url="$api.deviceBorrow.deviceBorrowPage"
          :delUrl="$api.deviceBorrow.deleteDeviceBorrow"
          :componentData="componentData" :key="upIndex"/>
    </div>
    <el-dialog title="仪器设备领(借)用登记" top="5vh" :visible.sync="dialogVisible" width="60%">
      <el-steps :active="currentStep" finish-status="success"  align-center>
        <el-step style="cursor:pointer" v-for="(v, i) in steps" :title="v" :key="i"
          @click.native="choiceStep(i)"></el-step>
      </el-steps>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <div v-show="currentStepClick === 0">
          <el-card style="margin-top: 1em; height: 51vh; overflow-y: scroll;">
            <!-- æ–°å¢žè®¾å¤‡äº‹è®°å½•å¡ç‰‡ -->
            <el-row>
              <el-col :span="12">
                <el-form-item label="编号：" prop="processNumber">
                  <el-input v-model="form.processNumber" size="small" :disabled="currentStep>0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备名称：">
                  <el-input v-model="form.deviceName" size="small" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="管理编号：" prop="unifyNumber">
                  <el-input v-model="form.unifyNumber" size="small" :disabled="currentStep>0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="借用人：" prop="recipientUser">
                  <el-select v-model="form.recipientUser" filterable placeholder="请选择" clearable
                   size="small" style="width: 100%;" :disabled="currentStep>0">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="借用人联系方式：" prop="borrowerContactInformation" label-width="150px">
                  <el-input v-model="form.borrowerContactInformation" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="借用日期：" prop="recipientTime">
                  <el-date-picker
                    v-model="form.recipientTime"
                    type="date"
                    placeholder="选择日期" size="small"  format="yyyy-MM-dd" style="width: 100%" value-format="yyyy-MM-dd" :disabled="currentStep>0">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="借用时状态："
                >
                  <el-radio-group v-model="form.recipientState" :disabled="currentStep !== 0">
                    <el-radio :label="0">合格</el-radio>
                    <el-radio :label="1">ç»´ä¿®</el-radio>
                    <el-radio :label="2">停用</el-radio>
                    <el-radio :label="3">报废</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="相关附件：" prop="fileName">
                  <el-input v-model="form.fileName" disabled size="small"
                    :style="`width: ${currentStep == 0 ? '88%' : '100%'};`">
                    <el-button slot="append" v-if="currentStep === 0" icon="el-icon-delete-solid"
                      @click="deleteFile"></el-button>
                  </el-input>
                  <el-upload ref="upload" style="float: right;" :action="action" :show-file-list="false"
                    :on-success="onSuccess" :disabled="currentStep !== 0">
                    <el-button style="position: relative;top: -4px" class="uploadFile" slot="trigger" size="small"
                      type="primary" v-if="currentStep === 0">附件上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下环节责任人：" prop="nextUser">
                  <el-select v-model="form.nextUser" filterable placeholder="请选择" clearable
                   size="small" style="width: 100%;" :disabled="currentStep !== 0">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.submitOperationUser }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.submitOperationTime }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 1">
          <el-card style="margin-top: 1em; height: 51vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="12">
                <el-form-item label="归还人：" prop="rebackUser" :rules="[{ required: currentStep === 1, message: '请输入归还人', trigger: 'change' }]">
                  <!-- <el-input v-model="form.rebackUser" size="small" :disabled="currentStep !== 1"></el-input> -->
                  <el-select v-model="form.rebackUser" filterable placeholder="请选择" clearable
                   size="small" style="width: 50%;" :disabled="currentStep !== 1">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="归还日期：" prop="rebackTime" :rules="[{ required: currentStep === 1, message: '请选择归还日期', trigger: 'change' }]">
                  <el-date-picker
                    v-model="form.rebackTime"
                    :disabled="currentStep !== 1"
                    type="date"
                    placeholder="选择日期" size="small"  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接收状况："
                >
                  <el-radio-group v-model="form.receiveState" :disabled="currentStep !== 1">
                    <el-radio :label="0">合格</el-radio>
                    <el-radio :label="1">ç»´ä¿®</el-radio>
                    <el-radio :label="2">停用</el-radio>
                    <el-radio :label="3">报废</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备负责人：" prop="deviceUser" :rules="[{ required: currentStep === 1, message: '请选择设备负责人', trigger: 'change' }]">
                  <!-- <el-input v-model="form.deviceUser" size="small" :disabled="currentStep !== 1"></el-input> -->
                  <el-select v-model="form.deviceUser" filterable placeholder="请选择" clearable
                   size="small" style="width: 50%;" :disabled="currentStep !== 1">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注：">
                  <el-input type="textarea" v-model="form.note" :disabled="currentStep !== 1"
                    size="small"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.receiveOperationUser }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.receiveOperationTime }}
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitForm('3reject')" v-if="currentStep !== 0 && currentStep !== 2">驳回</el-button>
        <el-button @click="submitForm('2save')" v-if="currentStep === 0">保存</el-button>
        <el-button type="primary" v-if="currentStep !== 2" @click="submitForm('1submit')">{{ currentStep === 0 ? '提交' :
          '通过'
          }}</el-button>
      </span>
    </el-dialog>
    <el-dialog title="流程跟踪" top="5vh" :visible.sync="dialogVisible0" width="60%">
      <el-table
      :data="deviceLogs"
      style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="operator"
          label="操作人"
          width="180">
        </el-table-column>
        <el-table-column
          prop="operationTime"
          label="操作日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="operationType"
          label="提交类型">
        </el-table-column>
        <el-table-column
          prop="operationContent"
          label="操作内容">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import ValueTable from '../../tool/value-table.vue'
import { dateFormat } from '../../../util/date'
export default {

  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    ValueTable
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisible0:false,
      //表头显示
      componentData:{
        entity: {
          processNumber: null,
          deviceId:null,
          orderBy: {
            field: 'id',
            order: 'asc'
          }
          },
          isIndex: true,
          showSelect: false,
          select: false,
          do: [
          {
            id: 'show',
            font: '查看',
            type: 'text',
            method: 'lookDetail'
          },
            {
            id: 'delete',
            font: '删除',
            type: 'text',
            method: 'doDiy'
          },
          {
            id: '111',
            font: '流程跟踪',
            type: 'text',
            method: 'handleLookList'
          }],
          init:false,
          tagField: {
            recipientState:{
              select: [{
                                value: 0,
                                type: 'success',
                                label: '合格'
                            }, {
                                value: 1,
                                type: 'warning',
                                label: 'ç»´ä¿®'
                            }, {
                                value: 2,
                                type: 'info',
                                label: '停用'
                            }, {
                                value: 3,
                                type: 'danger',
                                label: '报废'
                            }]
            }
          },
          selectField: {},
          requiredAdd: [],
          requiredUp: [],
      },
      upIndex:0,
      entityCopy:null,
      currentStep: 0, // æ­¥éª¤æ¡æ˜¾ç¤ºç¬¬å‡ æ­¥
      currentStepClick: 0, // ç‚¹å‡»æ­¥éª¤æ¡å˜åŒ–
      steps: ['借出', '借用'],
      responsibleOptions: [], // ä¸‹çŽ¯èŠ‚负责人list
      form:{
        processNumber:null,
        deviceName:null,
        unifyNumber:null,
        recipientUser:null,
        recipientTime:null,
        nextUser:null,
        rebackUser:null,
        rebackTime:null,
        receiveState:null,
        deviceUser:null,
        fileName:null,
      },
      rules:{
        processNumber: [{ required: true, message: '请输入编号', trigger: 'blur' }],
        deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
        unifyNumber: [{ required: true, message: '请输入管理编号', trigger: 'blur' }],
        recipientUser: [{ required: true, message: '请输入借用人', trigger: 'blur' }],
        borrowerContactInformation: [{ required: true, message: '请输入借用人联系方式', trigger: 'blur' }],
        recipientTime: [{ required: true, message: '请选择借用日期', trigger: 'change' }],
        nextUser: [{ required: true, message: '请选择下环节负责人', trigger: 'change' }],
      },
      deviceLogs:[],
      outLoading:false
    }
  },
  watch:{
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.componentData.entity.deviceId = this.clickNodeVal.value
        this.entityCopy = this.HaveJson(this.componentData.entity)
        this.refreshTable()
      }
    },
    dialogVisible(newVal) {
      if (!newVal) {
        this.form = {}
        this.currentStep = 0 // æ­¥éª¤æ¡æ˜¾ç¤ºç¬¬å‡ æ­¥
        this.currentStepClick = 0 // ç‚¹å‡»æ­¥éª¤æ¡å˜åŒ–
        this.$refs['form'].clearValidate()
      }
    }
  },
  computed: {
    action() {
      return this.javaApi + this.$api.personnel.saveCNASFile
    }
  },
  mounted() {
    this.componentData.entity.deviceId = this.clickNodeVal.value
    this.entityCopy = this.HaveJson(this.componentData.entity)
    // console.log(333,this.clickNodeVal)
    this.getUserList()
    this.refreshTable()
  },
  methods: {
    refreshTable(e) {
      this.$refs['ValueTable'].selectList(e)
    },
    refresh() {
      this.componentData.entity = this.HaveJson(this.entityCopy)
      this.refreshTable()
      // this.upIndex++
    },
    choiceStep(index) {
      this.currentStepClick = index
    },
    //提交表单
    async submitForm(saveState) {
      this.$refs.form.validate((valid) => {
        if (valid === true || saveState !== '1submit') {
          // ç»™å½“前环节设置创建人与时间
          let user = JSON.parse(localStorage.getItem('user'))
          const dateTime = dateFormat(new Date())
          // èŽ·å–当前环节操作人与日期
          switch (this.currentStep) {
            case 0:
              this.form.submitOperationUser = user.name
              this.form.submitOperationTime = dateTime
              break
            case 1:
              this.form.receiveOperationUser = user.name
              this.form.receiveOperationTime = dateTime
              break
            default:
              break
          }
          // èŽ·å–当前环节负责人
          switch (saveState === '3reject' ? this.currentStep - 1 : this.currentStep) {
            case 0:
              this.form.nowUser = this.form.nextUser
              break
            default:
              break
          }
          let currentStepAction;
          // è®¾ç½®è¯¥æ“ä½œåˆ¤æ–­æ˜¯å¦ä¸ºæäº¤ï¼Œä¿å­˜ï¼Œé©³å›žï¼Œé€šè¿‡
          switch (saveState) {
            // æäº¤ï¼Œé€šè¿‡
            case '1submit':
              currentStepAction = this.currentStep + 1
              break
            // ä¿å­˜
            case '2save':
              currentStepAction = this.currentStep
              break
            // é©³å›ž
            case '3reject':
              currentStepAction = this.currentStep - 1
              break
            default:
              break
          }
          // èŽ·å–当前状态
          this.form.nowState = currentStepAction === 2 ? '关闭' : this.steps[currentStepAction]
          this.form.deviceId = this.clickNodeVal.value
          delete  this.form.deviceLogs
          this.$axios.post(this.$api.deviceBorrow.saveDeviceBorrow, this.form, {
            headers: {
              'Content-Type': 'application/json'
            },
            noQs:true
          }).then(res => {
            if (res.code == 200) {
              this.$message.success('提交成功')
              this.dialogVisible = false
              this.refreshTable()
            }
          })
        } else {
          let step = this.steps[this.currentStep]
          this.$message.warning(step + '  æµç¨‹ä¸­æœ‰å¿…填项未填！');
        }
      });
    },
    deleteFile() {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.personnel.deleteCNASFile + "?fileName=" + this.form.fileName).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    onSuccess(response, file, fileList) {
      if (response.code == 200) {
        // åœ¨ä¿å­˜èµ‹å€¼æ–°æ–‡ä»¶
        this.form.fileName = file.name
        this.form.url= response.data
      } else {
        this.$message.error(response.message)
      }
    },
    // èŽ·å–负责人信息接口
    getUserList() {
      this.$axios.get(this.$api.deviceScope.selectUserList).then(res => {
        if (res.code == 200) {
          this.responsibleOptions = res.data
        }
      })
    },
    // æŸ¥çœ‹è¯¦æƒ…
    lookDetail(row){
      this.$axios.get(this.$api.deviceBorrow.getDeviceBorrow+'?id='+row.id).then(res => {
        if (res.code == 200) {
          this.form = res.data
          this.form.deviceName = this.clickNodeVal.label
          this.form.deviceId = this.clickNodeVal.value
          this.deviceLogs = res.data.deviceLogs
          let i = this.steps.findIndex(item => item == row.nowState)
          if(i==-1){
            this.currentStep = 2
            this.currentStepClick = 0
          }else{
            this.currentStep = i
            this.currentStepClick = i
          }
          console.log(this.currentStepClick)
          this.dialogVisible = true
        }
      })
    },
    // æ–°å¢ž
    add(){
      this.dialogVisible = true
      this.form = {
        processNumber:null,
        deviceName:null,
        unifyNumber:null,
        recipientUser:null,
        recipientTime:null,
        nextUser:null,
        rebackUser:null,
        rebackTime:null,
        receiveState:null,
        deviceUser:null,
        fileName:null,
      }
      this.form.deviceName = this.clickNodeVal.label
      this.form.deviceId = this.clickNodeVal.value
    },
    //导出
    handleDown() {
      this.outLoading = true
      this.$axios.post(this.$api.deviceBorrow.deviceBorrowExport,{deviceId:this.clickNodeVal.value},{responseType: 'blob'}).then(res => {
        this.outLoading = false
        const blob = new Blob([res], {
          type: 'application/force-download'
        })
        const filename = decodeURI(this.clickNodeVal.label+'设备借出统计'+'.xlsx')
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              // åˆ›å»ºä¸€ä¸ªè¶…链接，将文件流赋进去，然后实现这个超链接的单击事件
              const elink = document.createElement('a')
              elink.download = filename
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click();
              URL.revokeObjectURL(elink.href) // é‡Šæ”¾URL å¯¹è±¡
              document.body.removeChild(elink)
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            // åˆ›å»ºä¸€ä¸ªè¶…链接，将文件流赋进去，然后实现这个超链接的单击事件
            const elink = document.createElement('a')
            elink.download = filename
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click();
            URL.revokeObjectURL(elink.href) // é‡Šæ”¾URL å¯¹è±¡
            document.body.removeChild(elink)
            this.$message.success('导出成功')
          }
        }
      })
    },
    handleLookList(row){
      this.$axios.get(this.$api.deviceBorrow.getDeviceBorrow+'?id='+row.id).then(res => {
        if (res.code == 200) {
          this.deviceLogs = res.data.deviceLogs
          this.dialogVisible0 = true
        }
      })
    }
  },
}
</script>

<style scoped>
h4 {
  font-weight: 400;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

h4 .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}

.tables {
  width: 100%;
  height: calc(100vh - 15em);
}

.search {
  background-color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 10px;
}

.search_thing {
  display: flex;
  align-items: center;
  height: 40px;
}

.search_label {
  width: 70px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: calc(100% - 120px);
}

.btns {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(0, -50%);
}

.btns_thing {
  position: absolute;
  right: 230px;
  top: 50%;
  transform: translate(0, -50%);
}

.form .search_label {
  width: 120px;
}
.el-radio{
  margin-right: 10px;
}
.el-radio-group{
  width: 100%;
  display: flex;
  margin-top: 12px;
}
</style>

 src/components/do/a6-device/calibration.vue

@@ -1,259 +1,698 @@
<!-- è®¾å¤‡æ ¡å‡† -->
<template>
  <div>
    <div class="search">
      <div class="search_thing">
        <el-button size="small" type="primary" @click="dialogVisible0=true">校准项目维护</el-button>
      </div>
      <div class="btns">
        <el-button size="small" type="primary">添加校准记录</el-button>
        <el-button size="small" type="primary">导出</el-button>
      </div>
    <div class="btnS">
      <el-button size="small" type="primary" @click="calibrationMaintenance()">校准项目维护</el-button>
      <el-button size="small" type="primary" @click="add('add')">添加校准记录</el-button>
      <el-button size="small" type="primary" @click="handleDown">导出Excel</el-button>
    </div>
    <div class="tables" style="margin-top: 16px;">
      <ValueTable ref="ValueTable"
                :url="$api.auxiliaryWorkingHoursDay.selectAuxiliaryWorkingHoursDay"
                :delUrl="$api.auxiliaryWorkingHoursDay.deleteAuxiliaryWorkingHoursDay" :componentData="componentData" :key="upIndex"/>
    <div class="tables" style="margin-top: 10px;">
      <el-table :data="tableData" height="calc(100vh - 20em)">
        <el-table-column label="序号" type="index" width="120">
          <template v-slot="scope">
            <span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="记录编号" min-width="150" prop="processNumber"></el-table-column>
        <el-table-column label="校准机构" min-width="150" prop="unitOfMeasure"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="校准结论" min-width="150" prop="status">
          <template v-slot="scope">
            {{ scope.row.status === '0yes' ? '合格' : scope.row.status === '1no' ? '不合格' : '其他' }}
          </template>
        </el-table-column>
        <el-table-column label="校准证书编号" min-width="150" prop="certificateSerialNumber"></el-table-column>
        <el-table-column label="说明" min-width="150" prop="remark" show-overflow-tooltip></el-table-column>
        <el-table-column label="校准日期" min-width="150" prop="calibrationDate"></el-table-column>
        <el-table-column label="下次校准日期" min-width="150" prop="nextCalibrationDate"></el-table-column>
        <el-table-column label="确认日期" min-width="150" prop="confirmDate"></el-table-column>
        <el-table-column label="登记人" min-width="150" prop="createUser"></el-table-column>
        <el-table-column label="登记日期" min-width="150" prop="createTime"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="180" align="center">
          <template #default="{ row }">
            <el-button size="small" type="text" @click="handleAttachmentClick(row)">下载附件</el-button>
            <el-button size="small" type="text" @click="handleViewClick('view', row)">查看</el-button>
            <el-button size="small" type="text" @click="handleDeleteClick(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
                     :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" style="margin-right: 5%;"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog
      title="校准项目维护"
      :visible.sync="dialogVisible0"
      width="60%"
      style="max-height: 80vh;margin-top: 10vh;"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
    <!-- æ ¡å‡†é¡¹ç›®ç»´æŠ¤ -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible0" title="校准项目维护"
               top="5vh" width="70%">
      <h4>
        <div style="display: flex;
  align-items: center;"><span class="line"></span><span>设备校准参数维护</span></div>
        <el-button type="primary" size="small" @click="addCalibrate">æ·» åŠ </el-button>
        <span style="display: flex;align-items: center;"><span class="line"></span><span>设备校准参数维护</span></span>
        <el-button :loading="addCalibrateLoading" size="small" type="primary" @click="addCalibrate">æ·» åŠ </el-button>
      </h4>
      <div class="search">
        <div class="search_thing">
          <div class="search_label">计量参数：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
              v-model="form0.value"></el-input></div>
        </div>
        <div class="search_thing">
          <div class="search_label">量程范围：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
              v-model="form0.value"></el-input></div>
        </div>
        <div class="search_thing">
          <div class="search_label" style="width: 100px;">最大允许误差：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
              v-model="form0.value"></el-input></div>
        </div>
        <div class="search_thing">
          <div class="search_label">判定标准：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
              v-model="form0.value"></el-input></div>
        </div>
      <div>
        <el-form ref="form0" :model="form0" :rules="form0Rules"
                 label-position="right" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="计量参数:" prop="measurementParameter">
                <el-input v-model="form0.measurementParameter" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="量程范围:" prop="rangeOfMeasurement">
                <el-input v-model="form0.rangeOfMeasurement" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最大允许误差:" prop="maxPermissibleError">
                <el-input v-model="form0.maxPermissibleError" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="判定标准:" prop="judgmentCriteria">
                <el-input v-model="form0.judgmentCriteria" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <h4>
        <div style="display: flex;
  align-items: center;"><span class="line"></span><span>设备校准参数</span></div>
        <span style="display: flex;align-items: center;"><span class="line"></span><span>设备校准参数</span></span>
      </h4>
      <ValueTable ref="ValueTable0"
                :url="$api.auxiliaryWorkingHoursDay.selectAuxiliaryWorkingHoursDay"
                :delUrl="$api.auxiliaryWorkingHoursDay.deleteAuxiliaryWorkingHoursDay" :componentData="componentData0" :key="upIndex0"/>
      <!-- è®¾å¤‡æ ¡å‡†å‚数表格 -->
      <el-table ref="calibrateTable" v-loading="calibrateParamsLoading" :data="calibrateParams"
                max-height="450"
                stripe style="width: 100%">
        <el-table-column label="编号" type="index" width="80"></el-table-column>
        <el-table-column label="计量参数" prop="measurementParameter"></el-table-column>
        <el-table-column label="量程范围" prop="rangeOfMeasurement"></el-table-column>
        <el-table-column label="最大允许误差" prop="maxPermissibleError"></el-table-column>
        <el-table-column label="判定标准" prop="judgmentCriteria"></el-table-column>
        <el-table-column label="创建人" prop="createdBy"></el-table-column>
        <el-table-column label="创建时间" prop="creationTime"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- æ·»åŠ æ ¡å‡†è®°å½• -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible1" title="添加校准记录"
               top="5vh"
               width="80%" @close="resetCalibrationRecord">
      <div style="height: 70vh;overflow-y: auto;overflow-x: hidden;">
        <h4>
          <div style="display: flex;align-items: center;">
            <span class="line"></span>
            <span>添加设备校准记录</span>
          </div>
        </h4>
        <el-form ref="calibrationRecord" :model="calibrationRecord"
                 :rules="formRules" label-position="right" label-width="120px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="校准服务机构:" prop="unitOfMeasure">
                <el-input v-model="calibrationRecord.unitOfMeasure" :disabled="operationType === 'view'"
                          size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="校准日期:" prop="calibrationDate">
                <el-date-picker v-model="calibrationRecord.calibrationDate" :disabled="operationType === 'view'"
                                format="yyyy-MM-dd"
                                placeholder="选择日期"
                                size="small"
                                style="width: 90%" type="date"
                                value-format="yyyy-MM-dd" @change="getNextCalibrationDate">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="下次校准日期:" label-width="140px">
                <el-date-picker v-model="calibrationRecord.nextCalibrationDate" disabled
                                format="yyyy-MM-dd" placeholder="选择日期" size="small" style="width: 90%"
                                type="date" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计算器具:" prop="calculatingApparatus">
                <el-input v-model="calibrationRecord.calculatingApparatus" :disabled="operationType === 'view'"
                          size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计算标准量程:" prop="standardRange">
                <el-input v-model="calibrationRecord.standardRange" :disabled="operationType === 'view'" size="small"
                          style="width: 90%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="计量标准不确定度:" label-width="140px" prop="calibrationStandardUncertainty">
                <el-input v-model="calibrationRecord.calibrationStandardUncertainty" :disabled="operationType === 'view'" size="small"
                          style="width: 90%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所依据文件:" prop="byDocument">
                <el-input v-model="calibrationRecord.byDocument" :disabled="operationType === 'view'"
                          size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证书编号:" prop="certificateSerialNumber">
                <el-input v-model="calibrationRecord.certificateSerialNumber" :disabled="operationType === 'view'" size="small"
                          style="width: 90%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="状态:" label-width="140px" prop="status" required>
                <el-radio-group v-model="calibrationRecord.status" :disabled="operationType === 'view'">
                  <el-radio label="0yes">合格</el-radio>
                  <el-radio label="1no">不合格</el-radio>
                  <el-radio label="2other">其他</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="确认日期:">
                <el-date-picker v-model="calibrationRecord.confirmDate" :disabled="operationType === 'view'"
                                format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" size="small" style="width: 100%"
                                type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="17">
              <el-form-item label="附件：" prop="fileName">
                <el-input v-model="calibrationRecord.fileName" :style="`width: ${operationType === 'add' ? '85%' : '100%'};}`" disabled
                          size="small">
                  <el-button v-if="operationType === 'add'" slot="append" icon="el-icon-delete-solid"
                             @click="deleteFile"></el-button>
                </el-input>
                <el-upload v-if="operationType === 'add'" ref="upload" :action="action"
                           :before-upload="beforeUpload"
                           :headers="headers"
                           :limit="1" :on-error="onError" :on-success="handleSuccessUp"
                           :show-file-list="false"
                           style="float: right;">
                  <el-button :loading="upLoading" size="small" style="position: relative; top: -4px;"
                             type="primary">附件上传
                  </el-button>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注:">
                <el-input v-model="calibrationRecord.remark" :disabled="operationType === 'view'" :rows="3" size="small" style="width: 96%"
                          type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <h4>
          <span style="display: flex;align-items: center;">
            <span class="line"></span><span>校准条目确认结果</span>
          </span>
        </h4>
        <el-table ref="calibrateTable" :data="calibrateParams" border>
          <el-table-column label="编号" type="index" width="60"></el-table-column>
          <el-table-column label="计量参数" prop="measurementParameter"></el-table-column>
          <el-table-column label="量程范围" prop="rangeOfMeasurement"></el-table-column>
          <el-table-column label="最大允许误差" prop="maxPermissibleError"></el-table-column>
          <el-table-column label="判定标准" prop="judgmentCriteria"></el-table-column>
          <el-table-column label="是否校准" prop="isCalibration">
            <template slot="header" slot-scope="scope">
              <span class="required-span">* </span>是否校准
            </template>
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.isCalibration" :disabled="operationType === 'view'">
                <el-radio label="0yes">是</el-radio>
                <el-radio label="1no">否</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="判定结果" min-width="140" prop="result">
            <template slot="header" slot-scope="scope">
              <span class="required-span">* </span>判定结果
            </template>
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.result" :disabled="operationType === 'view'" @input="checkRadio()">
                <el-radio label="0yes">合格</el-radio>
                <el-radio label="1no">不合格</el-radio>
                <el-radio label="2other">其他</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="单项结果说明" prop="singleResultStatement">
            <template slot-scope="scope">
              <el-input v-model="scope.row.singleResultStatement" :disabled="operationType === 'view'"
                        size="small"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <!-- æ“ä½œæ—¥å¿— -->
        <!--        <h4>-->
        <!--          <div style="display: flex;-->
        <!--      align-items: center;">-->
        <!--            <span class="line"></span><span>本记录状态和操作日志</span>-->
        <!--          </div>-->
        <!--        </h4>-->
        <!--        <el-table :data="tableDataOperate" style="width: 100%">-->
        <!--          <el-table-column type="index" label="序号" width="100"></el-table-column>-->
        <!--          <el-table-column prop="operator" label="操作人" width="120"></el-table-column>-->
        <!--          <el-table-column prop="operationTime" label="操作时间" width="180"></el-table-column>-->
        <!--          <el-table-column prop="operationType" label="操作类型" width="120"></el-table-column>-->
        <!--          <el-table-column prop="operationContent" label="操作内容"></el-table-column>-->
        <!--        </el-table>-->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible0 = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="dialogVisible0 = false">ç¡® å®š</el-button>
        <el-button v-if="operationType === 'add'" @click="dialogVisible1 = false">取 æ¶ˆ</el-button>
        <el-button v-if="operationType === 'add'" :loading="addRecordLoading" type="primary"
                   @click="addRecord">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ValueTable from '../../tool/value-table.vue'
import file from '../../../util/file';
import fileDownload from "../../../util/file";

export default {
  components: {
    ValueTable
  },
  data(){
    return {
      componentData: {
        entity: {
          week: null,
          weekDay: null,
          dateTime: null,
          name:null,
          orderBy: {
            field: 'id',
            order: 'desc'
          }
        },
        isIndex: true,
        showSelect: false,
        select: false,
        do: [{
          id: 'handleLook',
          font: '查看详情',
          type: 'text',
          method: 'handleLook'
        }],
        tagField: {
          shift:{
            select:[]
          },
          state:{
            select:[
              {
                label:'已提交',
                value:'已提交',
                type:'primary'
              },
              {
                label:'已审核',
                value:'已审核',
                type:'warning'
              },
              {
                label:'已批准',
                value:'已批准',
                type:'success'
              },
            ]
          },
          weekDay:{
            select:[]
          }
        },
        linkEvent: {},
        selectField: {
          shift:{
            select:[]
          },
          state:{
            select:[
              {
                label:'已提交',
                value:'已提交',
                type:'primary'
              },
              {
                label:'已审核',
                value:'已审核',
                type:'warning'
              },
              {
                label:'已批准',
                value:'已批准',
                type:'success'
              },
            ]
          },
          weekDay:{
            select:[]
          }
        },
        requiredAdd: [],
        requiredUp: []
            },
      upIndex:0,
      componentData0: {
        entity: {
          week: null,
          weekDay: null,
          dateTime: null,
          name:null,
          orderBy: {
            field: 'id',
            order: 'desc'
          }
        },
        isIndex: true,
        showSelect: false,
        select: false,
        isPage:false,
        do: [{
          id: 'delete',
          font: '删除',
          type: 'text',
          method: 'doDiy',
        }],
        tagField: {
          shift:{
            select:[]
          },
          state:{
            select:[
              {
                label:'已提交',
                value:'已提交',
                type:'primary'
              },
              {
                label:'已审核',
                value:'已审核',
                type:'warning'
              },
              {
                label:'已批准',
                value:'已批准',
                type:'success'
              },
            ]
          },
          weekDay:{
            select:[]
          }
        },
        linkEvent: {},
        selectField: {
          shift:{
            select:[]
          },
          state:{
            select:[
              {
                label:'已提交',
                value:'已提交',
                type:'primary'
              },
              {
                label:'已审核',
                value:'已审核',
                type:'warning'
              },
              {
                label:'已批准',
                value:'已批准',
                type:'success'
              },
            ]
          },
          weekDay:{
            select:[]
          }
        },
        requiredAdd: [],
        requiredUp: []
            },
      upIndex0:0,
      dialogVisible0:false,
      form0:{
        value:''
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods:{
    addCalibrate(){
      if(!this.form0.value){
        this.$message.error('请输入计量参数')
        return
  data() {
    return {
      value: "",
      calibrateParams: [],
      calibrateParamsLoading: false,
      addCalibrateLoading: false,
      calibrationRecord: {
        unitOfMeasure: '', // è®¡é‡å•ä½
        calibrationDate: null, // æ ¡å‡†æ—¥æœŸ
        nextCalibrationDate: null, // ä¸‹æ¬¡æ ¡å‡†æ—¥æœŸ
        calculatingApparatus: '', // è®¡ç®—器具
        confirmDate: null, // ç¡®è®¤æ—¥æœŸ
        standardRange: '', // è®¡ç®—标准量程
        calibrationStandardUncertainty: '', // è®¡é‡æ ‡å‡†ä¸ç¡®å®šåº¦
        byDocument: '', // ä¾æ®æ–‡ä»¶
        certificateSerialNumber: '', // è¯ä¹¦ç¼–号
        status: '', // çŠ¶æ€
        remark: '', // å¤‡æ³¨
        systemFileName: '', //
        fileName: '', //
      },
      formRules: {
        unitOfMeasure: [{required: true, message: '请输入校准服务机构', trigger: 'blur'}],
        calibrationDate: [{required: true, message: '请选择校准日期', trigger: 'change'}],
        calculatingApparatus: [{required: true, message: '请输入计算器具', trigger: 'blur'}],
        standardRange: [{required: true, message: '请输入计算标准量程', trigger: 'blur'}],
        calibrationStandardUncertainty: [{required: true, message: '请输入计量标准不确定度', trigger: 'blur'}],
        byDocument: [{required: true, message: '请输入所依据文件', trigger: 'blur'}],
        status: [{required: true, message: '请选择状态', trigger: 'change'}],
      },
      tableData: [],
      dialogVisible0: false,
      dialogVisible1: false,
      form0: {
        measurementParameter: '', // è®¡é‡å‚æ•°
        rangeOfMeasurement: '',
        maxPermissibleError: '',
        judgmentCriteria: '',
        createdBy: '',
        action: '',
        deviceId: null
      },
      form0Rules: {
        measurementParameter: [
          {required: true, message: '请输入计量参数', trigger: 'blur'}
        ],
        rangeOfMeasurement: [
          {required: true, message: '请输入量程范围', trigger: 'blur'}
        ],
        maxPermissibleError: [
          {required: true, message: '请输入最大允许误差', trigger: 'blur'}
        ],
        judgmentCriteria: [
          {required: true, message: '请输入判定标准', trigger: 'blur'}
        ],
      },
      addRecordLoading: false,
      tableDataOperate: [], // æœ¬è®°å½•çŠ¶æ€å’Œæ“ä½œæ—¥å¿—
      upLoading: false,
      operationType: '',
      search: {
        size: 20,
        current: 1,
        total: 0
      },
    }
  },
  // ç”¨äºŽä¸Šä¼ æ–‡ä»¶çš„信息
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
      // ä¿å­˜
      // æ›´æ–°åˆ—表
    },
    action() {
      return this.javaApi + this.$api.personnel.saveCNASFile
    }
  },
  mounted() {
    //获取操作记录信息
    this.getOperateMsg();
    this.getTableList(this.clickNodeVal.value) // èŽ·å–设备校准列表数据
  },
  methods: {
    //状态判定
    checkRadio(){
      let resultList = this.calibrateParams.map(ele=>ele.result)
      if(resultList && resultList.filter(ele=>ele=='1no').length>0){
        this.calibrationRecord.status = '1no'
      }else if(resultList && resultList.filter(ele=>ele=='2other').length==resultList.length){
        this.calibrationRecord.status = '2other'
      }else if(resultList && resultList.filter(ele=>ele=='0yes').length==resultList.length){
        this.calibrationRecord.status = '0yes'
      }
    },
    getNextCalibrationDate(val) {
      let oneYearLaterDate = new Date(val)
      oneYearLaterDate.setFullYear(oneYearLaterDate.getFullYear() + 1);
      oneYearLaterDate.setDate(oneYearLaterDate.getDate() - 1);
      // let obj = oneYearLaterDate.toISOString().split('T')[0];
      this.calibrationRecord.nextCalibrationDate = oneYearLaterDate
    },
    handleSizeChange(val) {
      this.search.size = val
      this.getTableList(this.clickNodeVal.value);
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.getTableList(this.clickNodeVal.value);
    },
    getTableList(deviceId) {
      this.$axios.get(this.$api.deviceCheck.deviceMetricRecordPage + '?deviceId=' + deviceId + "&size=" + this.search.size + "&current=" + this.search.current + "&type=calibrate").then(res => {
        this.tableData = res.data.records
        this.search.total = res.data.total
      })
    },
    getOperateMsg() {
      this.$axios.get(this.$api.deviceOperate.list + "/" + this.clickNodeVal.value).then(res => {
        this.tableDataOperate = res.data
      })
    },
    // æ·»åŠ æ ¸æŸ¥è®°å½•
    add(type) {
      this.operationType = type
      this.dialogVisible1 = true
      this.getXmsg()
    },
    // æŸ¥çœ‹è¯¦æƒ…
    handleViewClick(type, row) {
      this.$axios.get(this.$api.deviceCheck.showDeviceMetricsCopy + "?id=" + row.id + "&type=calibrate").then(res => {
        this.calibrateParams = res.data
      })
      this.calibrationRecord = {...row}
      this.operationType = type
      this.dialogVisible1 = true
    },
    // è¡¨æ ¼åˆ é™¤æ“ä½œ
    handleDeleteClick(row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.deviceCheck.deleteDeviceMetricRecord + "?id=" + row.id).then(res => {
          this.getTableList(this.clickNodeVal.value) // èŽ·å–设备校准列表数据
          this.$message.success('删除成功！')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    handleAttachmentClick(row) {
      let state = /\.(jpg|jpeg|png|gif)$/i.test(row.systemFileName)
      if (state) {
        let url = this.javaApi + '/img/' + row.systemFileName;
        fileDownload.downloadIamge(url, row.systemFileName)
      } else {
        const url = this.javaApi+'/word/'+ row.systemFileName
        const link = document.createElement('a');
        link.href = url;
        link.download = row.systemFileName;
        link.click();
        this.$message.success('下载成功')
      }
    },
    //导出
    handleDown() {
      this.outLoading = true
      this.$axios.get(this.$api.deviceCheck.deviceMetricRecordExport + '?deviceId=' + this.clickNodeVal.value + "&type=calibrate", {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], {type: 'application/octet-stream'});
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '设备校准.xlsx';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '设备校准.xlsx';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    deleteFile() {
      this.$confirm('此操作将永久删除文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.personnel.deleteCNASFile + "?fileName=" + this.calibrationRecord.systemFileName).then(res => {
          this.calibrationRecord.fileName = ''
          this.$refs.upload.clearFiles()
          if (res.code == 200) {
            this.$message.success('删除成功！')
          }
        })
      }).catch((err) => {
        console.log('err----', err)
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // æ ¡å‡†é¡¹ç›®ç»´æŠ¤
    calibrationMaintenance() {
      this.dialogVisible0 = true
      this.getXmsg();
    },
    // èŽ·å–设备校准参数table信息
    async getXmsg() {
      this.calibrateParamsLoading = true
      try {
        await this.$axios.get(this.$api.deviceCheck.selectDeviceMetric + "?deviceId=" + this.clickNodeVal.value + "&type=calibrate").then(res => {
          if (res.code == 200) {
            this.calibrateParams = res.data
          }
          this.calibrateParamsLoading = false
        })
      } catch (e) {
        console.log('getXmsg---', e)
        this.calibrateParamsLoading = false
      }
    },
    // æ ¡å‡†é¡¹ç›®ç»´æŠ¤-删除设备校准参数
    handleDelete(row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.deviceCheck.deleteDeviceMetrics + '?id=' + row.id).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功!');
            this.getXmsg();
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除');
      })
    },
    addCalibrate() {
      this.$refs['form0'].validate((valid) => {
        if (valid) {
          // ä¿å­˜
          this.calibrateParamsLoading = true
          this.addCalibrateLoading = true
          this.form0.deviceId = this.clickNodeVal.value;
          const user = JSON.parse(localStorage.getItem('user'))
          this.form0.createdBy = user.name;
          this.form0.type = 'calibrate'
          this.$axios.post(this.$api.deviceCheck.saveOrUpdateDeviceMetric, this.form0, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
            if (res.code == 200) {
              this.$message.success('保存成功')
              this.$refs['form0'].resetFields()
              this.getXmsg() // åˆ·æ–°è®¾å¤‡æ ¡å‡†å‚数表格
            }
            this.calibrateParamsLoading = false
            this.addCalibrateLoading = false
          })
        } else {
          this.addCalibrateLoading = false
          this.$message.warning('有必填项未填');
        }
      })
    },
    addRecord() {
      this.$refs['calibrationRecord'].validate((valid) => {
        if (valid) {
          try {
            if (this.calibrateParams.some(m => m.isCalibration === undefined)) {
              this.$message.error('请选择是否校准')
              return
            }
            if (!this.calibrateParams.every(m => m.result !== undefined)) {
              this.$message.error('请选择判定结果')
              return
            }
            this.addRecordLoading = true
            this.calibrationRecord.deviceId = this.clickNodeVal.value;
            let user = JSON.parse(localStorage.getItem('user'))
            this.calibrationRecord.createUser = user.name
            this.calibrationRecord.type = 'calibrate'
            this.calibrationRecord.deviceMetricsCopyList = this.calibrateParams
            this.$axios.post(this.$api.deviceCheck.addOrUpdateDeviceMetricRecord, this.calibrationRecord, {
              headers: {
                'Content-Type': 'application/json'
              }
            }).then(res => {
              if (res.code == 200) {
                this.$message.success('添加成功')
                this.dialogVisible1 = false
                this.getTableList(this.clickNodeVal.value)
              }
              this.addRecordLoading = false
            })
          } catch (e) {
            console.log('addRecord---', e)
            this.addRecordLoading = false
          }
        } else {
          this.$message.warning('有必填项未填');
        }
      })
    },
    resetCalibrationRecord() {
      this.$refs.calibrationRecord.resetFields()
    },
    // ä¸Šä¼ é™„件
    handleSuccessUp(response, file) {
      if (response.code == 200) {
        // åœ¨ä¿å­˜èµ‹å€¼æ–°æ–‡ä»¶
        this.calibrationRecord.fileName = file.name
        this.calibrationRecord.systemFileName = response.data
        this.upLoading = false;
      } else {
        this.upLoading = false;
        this.$message.error(response.message)
      }
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        this.upLoading = true;
        return true;
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    // end
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getTableList(newVal.value);
      }
    },
    dialogVisible1(newVal) {
      if (newVal === false) {
        this.calibrateParams = []
        this.calibrationRecord = {
          unitOfMeasure: '', // è®¡é‡å•ä½
          calibrationDate: null, // æ ¡å‡†æ—¥æœŸ
          nextCalibrationDate: null, // ä¸‹æ¬¡æ ¡å‡†æ—¥æœŸ
          calculatingApparatus: '', // è®¡ç®—器具
          standardRange: '', // è®¡ç®—标准量程
          calibrationStandardUncertainty: '', // è®¡é‡æ ‡å‡†ä¸ç¡®å®šåº¦
          byDocument: '', // ä¾æ®æ–‡ä»¶
          certificateSerialNumber: '', // è¯ä¹¦ç¼–号
          status: '', // çŠ¶æ€
          remark: '', // å¤‡æ³¨
        }
      }
    }
  }
}
</script>

function downloadImage(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target="_blank"
  link.download = 'attachment.jpg'; // æ–‡ä»¶å
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

</script>
<style scoped>
.tables{
  width: calc(100vw - 390px);
.tables {
  width: 100%;
  height: calc(100vh - 230px);
}

.search {
  background-color: #fff;
  height: 40px;
@@ -272,29 +711,68 @@
  width: 70px;
  font-size: 14px;
  text-align: right;
  margin-right: 10px;
}

.search_input {
  width: calc(100% - 110px);
}
.btns{
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translate(0,-50%);

.btnS {
  text-align: right;
  margin-top: 10px;
}
h4{

h4 {
  font-weight: 400;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
h4 .line{

h4 .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}

.check {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.check_thing {
  flex: 0 0 calc(20% - 10px);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.check_label {
  font-size: 14px;
  margin-bottom: 5px;
}

.check_data .check_input {
  width: 100%;
}

.el-table {
  font-size: 14px;
  color: #333;
}

.el-table thead {
  background-color: #f5f5f5;
}
</style>





 src/components/do/a6-device/check-and-accept.vue

@@ -1,147 +1,900 @@
<!-- è®¾å¤‡éªŒæ”¶ -->
<template>
  <div>
    <div class="search">
      <div class="search_thing">
        <div class="search_label">关键字：</div>
        <div class="search_input"><el-input size="small" placeholder="请输入" clearable
            v-model="value" @keyup.enter.native="refreshTable()"></el-input></div>
        <div class="search_label">流程编号：</div>
        <div class="search_input"><el-input v-model="search.processNumber" clearable placeholder="请输入" size="small"
            @keyup.enter.native="getDeviceAList(clickNodeVal.value)"></el-input></div>
        <el-button size="small" style="margin-left: 10px" @click="resetSearch">重 ç½®</el-button>
        <el-button size="small" type="primary" @click="getDeviceAList(clickNodeVal.value)">查 è¯¢</el-button>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
      </div>
      <div class="btns">
        <el-button size="small" type="primary">新建</el-button>
        <el-button size="small" type="primary">导出</el-button>
      <div class="search_thing">
        <el-button size="small" type="primary" @click="dialogVisible = true">添加验收</el-button>
        <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出</el-button>
      </div>
    </div>
    <div class="tables" style="margin-top: 16px;">
      <ValueTable ref="ValueTable"
                :url="$api.auxiliaryWorkingHoursDay.selectAuxiliaryWorkingHoursDay"
                :delUrl="$api.auxiliaryWorkingHoursDay.deleteAuxiliaryWorkingHoursDay" :componentData="componentData" :key="upIndex"/>
    <div class="tables">
      <el-table ref="table" :data="tableDataAlist" height="100%">
        <el-table-column label="序号" type="index" width="60">
          <template v-slot="scope">
            <span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="流程编号" min-width="150" prop="processNumber" show-overflow-tooltip/>
        <el-table-column label="设备名称" min-width="140" prop="deviceName" show-overflow-tooltip/>
        <el-table-column label="管理编号" min-width="140" prop="managementNumber" show-overflow-tooltip/>
        <el-table-column label="序列号" min-width="80" prop="serialNumber" />
        <el-table-column label="提交者" min-width="100" prop="submitUser" />
        <el-table-column label="提交日期" min-width="150" prop="createTime" />
        <el-table-column label="当前状态" min-width="140" prop="currentState" />
        <el-table-column label="当前负责人" min-width="120" prop="currentResponsible" />
        <el-table-column fixed="right" label="操作" min-width="180">
          <template #default="{ row }">
            <el-button size="small" type="text" @click="handleAttachmentClick(row)">附件</el-button>
            <el-button size="small" type="text" @click="handleViewClick(row)">查看</el-button>
            <el-button size="small" type="text" @click="handleDownOne(row)">导出</el-button>
            <el-button size="small" type="text" @click="handleDeleteClick(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
        :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!-- æ·»åŠ è®¾å¤‡æ•…障记录 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="仪器设备验收记录"
      width="60%" @open="openRecordAcceptance">
      <el-steps :active="currentStep" finish-status="success">
        <el-step v-for="(v, i) in steps" :key="i" :title="v" style="cursor:pointer"
          @click.native="choiceStep(i)"></el-step>
      </el-steps>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <div v-show="currentStepClick === 0">
          <el-card style="margin-top: 1em; height: 56vh; overflow-y: scroll;">
            <!-- æ–°å¢žè®¾å¤‡äº‹è®°å½•å¡ç‰‡ -->
            <el-row>
              <el-col :span="24">
                <el-form-item label="流程编号：" prop="processNumber">
                  <el-input v-model="form.processNumber" disabled size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备名称：">
                  <el-input v-model="form.deviceName" disabled size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生产厂家：">
                  <el-input v-model="form.manufacturer" disabled size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备型号：">
                  <el-input v-model="form.specificationModel" disabled size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="管理编号：">
                  <el-input v-model="form.managementNumber" disabled size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请输入序列号', trigger: 'blur' }]" label="序列号："
                  prop="serialNumber">
                  <el-input v-model="form.serialNumber" :disabled="currentStep !== 0" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请输入设备类别', trigger: 'change' }]" label="设备类别："
                  prop="deviceClass">
                  <el-radio-group v-model="form.deviceClass" :disabled="currentStep !== 0">
                    <el-radio label="0precision">精密型设备</el-radio>
                    <el-radio label="1conventional">常规设备</el-radio><br />
                    <el-radio label="2auxiliary_class">辅助类设备</el-radio>
                    <el-radio label="4environmental">环境类设备</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请输入开箱前检查外包装有无破损', trigger: 'blur' }]" label="开箱前检查外包装有无破损：" label-width="220px"
                  prop="checkOuterPackaging">
                  <el-input v-model="form.checkOuterPackaging" :disabled="currentStep !== 0" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="相关附件：" prop="fileName">
                  <el-input v-model="form.fileName" :style="`width: ${currentStep == 0 ? '88%' : '100%'};`" disabled
                    size="small">
                    <el-button v-if="currentStep === 0" slot="append" icon="el-icon-delete-solid"
                      @click="deleteFile"></el-button>
                  </el-input>
                  <el-upload ref="upload" :action="action" :on-success="onSuccess" :show-file-list="false"
                    style="float: right;">
                    <el-button v-if="currentStep === 0" slot="trigger" class="uploadFile" size="small"
                      style="position: relative;top: -4px" type="primary">附件上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请选择下环节责任人', trigger: 'change' }]" label="下环节责任人："
                  prop="submitNextPesponsible">
                  <el-select v-model="form.submitNextPesponsible" :disabled="currentStep !== 0" clearable filterable
                    placeholder="请选择下环节负责人" size="small" style="width: 50%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请输入设备开箱验收结论', trigger: 'change' }]" label="设备开箱验收结论：" label-width="150px"
                  prop="unpackingAcceptanceConclusion">
                  <el-radio-group v-model="form.unpackingAcceptanceConclusion" :disabled="currentStep !== 0">
                    <el-radio :label="'0qualified'">合格</el-radio>
                    <el-radio :label="'1unqualified'">不合格，缺少备件供应商补发</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div style="margin-bottom: 20px; width: 100%;">
                  <label>备件确认：</label>
                  <el-button v-if="currentStep === 0" size="small" style="float: right;"
                    type="primary" @click="addTableRow('sparePartsConfirmationList')">增加行</el-button>
                </div>
                <el-table :data="form.sparePartsConfirmationList" border stripe style="width: 100%; min-height: 30vh">
                  <el-table-column label="序号" prop="序号" type="index" width="80" />
                  <el-table-column label="名称" min-width="120" prop="name">
                    <template v-slot="scope">
                      <el-input v-if="currentStep === 0" v-model="scope.row.name" size="small"></el-input>
                      <label v-else>{{ scope.row.name }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量" min-width="120" prop="number">
                    <template v-slot="scope">
                      <el-input v-if="currentStep === 0" v-model="scope.row.number" size="small"></el-input>
                      <label v-else>{{ scope.row.number }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column label="备注" min-width="120" prop="note">
                    <template v-slot="scope">
                      <el-input v-if="currentStep === 0" v-model="scope.row.note" size="small"></el-input>
                      <label v-else>{{ scope.row.note }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column v-if="currentStep === 0" fixed="right" label="操作" width="90">
                    <template slot-scope="scope">
                      <el-button icon="el-icon-delete" type="text"
                        @click="deleteRow(scope.$index, scope.row, 'sparePartsConfirmationList')">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="24">
                <div style="margin: 20px 0; width: 100%;">
                  <label>文件类确认：</label>
                  <el-button v-if="currentStep === 0" size="small" style="float: right;"
                    type="primary" @click="addTableRow('fileClassConfirmationList')">增加行</el-button>
                </div>
                <el-table :data="form.fileClassConfirmationList" border stripe style="width: 100%; min-height: 30vh">
                  <el-table-column label="序号" prop="序号" type="index" width="80" />
                  <el-table-column label="应有册数" min-width="120" prop="expectedCopies">
                    <template v-slot="scope">
                      <el-input v-if="currentStep === 0" v-model="scope.row.expectedCopies" size="small"></el-input>
                      <label v-else>{{ scope.row.expectedCopies }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column label="实际收到册数" min-width="120" prop="actualCopies">
                    <template v-slot="scope">
                      <el-input v-if="currentStep === 0" v-model="scope.row.actualCopies" size="small"></el-input>
                      <label v-else>{{ scope.row.actualCopies }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column v-if="currentStep === 0" fixed="right" label="操作" width="90">
                    <template v-slot="scope">
                      <el-button icon="el-icon-delete" type="text"
                        @click="deleteRow(scope.$index, scope.row, 'fileClassConfirmationList')">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="24" style="margin-top: 10px;">
                <el-form-item label="备注：" label-width="90px">
                  <el-input v-model="form.submitRemarks" :disabled="currentStep !== 0" size="small"
                    type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.submitOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.submitDate }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 1">
          <el-card style="margin-top: 1em; height: 56vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="复核意见：" prop="accidentDescription">
                  <el-input v-model="form.unpackingReviewOpinion" :disabled="currentStep !== 1" size="small"
                    type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 1, message: '请输入下环节责任人', trigger: 'change' }]" label="下环节责任人："
                  prop="unpackingNextPesponsible">
                  <el-select v-model="form.unpackingNextPesponsible" :disabled="currentStep !== 1" clearable filterable
                    placeholder="请选择下环节负责人" size="small" style="width: 50%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.unpackingOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.unpackingDate }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 2">
          <el-card style="margin-top: 1em; height: 56vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 2, message: '请输入安装位置', trigger: 'blur' }]" label="安装位置："
                  prop="installLocation">
                  <el-input v-model="form.installLocation" :disabled="currentStep !== 2" clearable placeholder="请输入安装位置"
                    size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注：">
                  <el-input v-model="form.installRemarks" :disabled="currentStep !== 2" size="small"
                    type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 2, message: '请输入下环节责任人', trigger: 'blur' }]" label="下环节责任人："
                  prop="installNextPesponsible">
                  <el-select v-model="form.installNextPesponsible" :disabled="currentStep !== 2" clearable filterable
                    placeholder="请选择下环节负责人" size="small" style="width: 50%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div style="margin-bottom: 20px; width: 100%;">
                  <label>安装验收记录</label>
                  <el-button v-if="currentStep === 2" size="small" style="float: right;"
                    type="primary" @click="addTableRow('installationAcceptanceRecordList')">增加行</el-button>
                </div>
                <el-table :data="form.installationAcceptanceRecordList" border stripe
                  style="width: 100%; min-height: 30vh">
                  <el-table-column label="序号" prop="序号" type="index" width="80" />
                  <el-table-column label="项目" min-width="120" prop="installationProject">
                    <template v-slot="scope">
                      <el-input v-if="currentStep === 2" v-model="scope.row.installationProject"
                        size="small"></el-input>
                      <label v-else>{{ scope.row.installationProject }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column label="安装情况" min-width="120" prop="installationSituation">
                    <template v-slot="scope">
                      <el-input v-if="currentStep === 2" v-model="scope.row.installationSituation"
                        size="small"></el-input>
                      <label v-else>{{ scope.row.installationSituation }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column label="安装完成" min-width="120" prop="installationCompleted">
                    <template v-slot="scope">
                      <el-select v-if="currentStep === 2" v-model="scope.row.installationCompleted" placeholder="请选择">
                        <el-option label="是" value="0yes"></el-option>
                        <el-option label="否" value="1no"></el-option>
                      </el-select>
                      <label v-else>{{ scope.row.installationCompleted === '0yes' ? '是' :
                        scope.row.installationCompleted === '1no' ? '否' : '' }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column v-if="currentStep === 2" fixed="right" label="操作" width="90">
                    <template slot-scope="scope">
                      <el-button icon="el-icon-delete" type="text"
                        @click="deleteRow(scope.$index, scope.row, 'installationAcceptanceRecordList')">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.installOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.installDate }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 3">
          <el-card style="margin-top: 1em; height: 56vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 3, message: '请输入复合意见', trigger: 'blur' }]" label="复合意见："
                  prop="installationAcceptanceCompoundOpinion">
                  <el-input v-model="form.installationAcceptanceCompoundOpinion" :disabled="currentStep !== 3"
                    size="small" type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 3, message: '请输入下环节负责人', trigger: 'change' }]" label="下环节责任人："
                  prop="installationAcceptanceNextPesponsible">
                  <el-select v-model="form.installationAcceptanceNextPesponsible" :disabled="currentStep !== 3" clearable
                    filterable placeholder="请选择下环节负责人" size="small" style="width: 50%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.installationAcceptanceOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.installationAcceptanceDate }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 4">
          <el-card style="margin-top: 1em; height: 56vh; overflow-y: scroll;">
            <div style="margin-bottom: 20px; width: 100%;">
              <label>验收核查记录：</label>
              <el-button v-if="currentStep === 4" size="small" style="float: right;"
                type="primary" @click="addTableRow('acceptanceCheckRecordList')">增加行</el-button>
            </div>
            <el-table :data="form.acceptanceCheckRecordList" border style="width: 100%; min-height: 30vh">
              <el-table-column label="序号" prop="sequence" width="80">
              </el-table-column>
              <el-table-column label="仪器模块" min-width="120" prop="instrumentModule">
                <template v-slot="scope">
                  <el-input v-if="currentStep === 4" v-model="scope.row.instrumentModule" size="small"></el-input>
                  <label v-else>{{ scope.row.instrumentModule }}</label>
                </template>
              </el-table-column>
              <el-table-column label="核查参数" min-width="120" prop="verificationParameter">
                <template v-slot="scope">
                  <el-input v-if="currentStep === 4" v-model="scope.row.verificationParameter" size="small"></el-input>
                  <label v-else>{{ scope.row.verificationParameter }}</label>
                </template>
              </el-table-column>
              <el-table-column label="可接收限" min-width="120" prop="acceptableLimit">
                <template v-slot="scope">
                  <el-input v-if="currentStep === 4" v-model="scope.row.acceptableLimit" size="small"></el-input>
                  <label v-else>{{ scope.row.acceptableLimit }}</label>
                </template>
              </el-table-column>
              <el-table-column label="核查结果" min-width="120" prop="verificationResult">
                <template v-slot="scope">
                  <el-input v-if="currentStep === 4" v-model="scope.row.verificationResult" size="small"></el-input>
                  <label v-else>{{ scope.row.verificationResult }}</label>
                </template>
              </el-table-column>
              <el-table-column label="核查结论" min-width="120" prop="verificationConclusion">
                <template v-slot="scope">
                  <el-select v-if="currentStep === 4" v-model="scope.row.verificationConclusion" placeholder="请选择">
                    <el-option label="符合" value="0accordWith"></el-option>
                    <el-option label="不符合" value="1inconformity"></el-option>
                  </el-select>
                  <label v-else>{{ scope.row.verificationConclusion }}</label>
                </template>
              </el-table-column>
              <el-table-column v-if="currentStep === 4" fixed="right" label="操作" width="90">
                <template slot-scope="scope">
                  <el-button size="small" type="text"
                    @click="deleteRow(scope.$index, scope.row, 'acceptanceCheckRecordList')">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-form-item :rules="[{ required: currentStep === 4, message: '请输入设备开箱验收结论', trigger: 'change' }]" label="设备开箱验收结论："
              label-width="150px" prop="acceptanceCheckUnpackingConclusion">
              <el-radio-group v-model="form.acceptanceCheckUnpackingConclusion" :disabled="currentStep !== 4">
                <el-radio :label="'0qualified'">合格</el-radio>
                <el-radio :label="'1unqualified'">不合格，缺少备件供应商补发</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :rules="[{ required: currentStep === 4, message: '请输入下环节责任人', trigger: 'change' }]" label="下环节责任人："
              prop="acceptanceCheckNextPesponsible">
              <el-select v-model="form.acceptanceCheckNextPesponsible" :disabled="currentStep !== 4" clearable
                filterable placeholder="请选择下环节负责人" size="small" style="width: 50%;">
                <el-option v-for="item in responsibleOptions" :key="item.value" :label="item.label" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.acceptanceCheckOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.acceptanceCheckDate }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 5">
          <el-card style="margin-top: 1em; height: 56vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 5, message: '请输入审核意见', trigger: 'blur' }]" label="审核意见："
                  prop="acceptanceAuditAuditOpinion">
                  <el-input v-model="form.acceptanceAuditAuditOpinion" :disabled="currentStep !== 5" size="small"
                    type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.acceptanceAuditOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.acceptanceAuditDate }}
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="currentStep !== 0 && currentStep !== 6" @click="submitForm('3reject')">驳回</el-button>
        <el-button v-if="currentStep === 0" @click="submitForm('2save')">保存</el-button>
        <el-button v-if="currentStep !== 6" type="primary" @click="submitForm('1submit')">{{ currentStep === 0 ? '提交' :
          '通过'
          }}</el-button>
      </span>
    </el-dialog>
  </div>
  <!-- æŸ¥å•ç¼–辑框 -->
</template>

<script>
import ValueTable from '../../tool/value-table.vue'
import { dateFormat } from '../../../util/date'
import file from '../../../util/file';

export default {
  components: {
    ValueTable
  },
  data(){
    return {
      value:'',
      componentData: {
        entity: {
          week: null,
          weekDay: null,
          dateTime: null,
          name:null,
          orderBy: {
            field: 'id',
            order: 'desc'
          }
        },
        isIndex: true,
        showSelect: false,
        select: false,
        do: [{
          id: 'getFile',
          font: '附件',
          type: 'text',
          method: 'getFile'
        }, {
          id: 'handleLook',
          font: '查看',
          type: 'text',
          method: 'handleLook'
        },{
          id: 'delete',
          font: '删除',
          type: 'text',
          method: 'doDiy',
          disabFun: (row, index) => {
            return row.state === '已审核' || row.state === '已批准'
          }
        }],
        tagField: {
          shift:{
            select:[]
          },
          state:{
            select:[
              {
                label:'已提交',
                value:'已提交',
                type:'primary'
              },
              {
                label:'已审核',
                value:'已审核',
                type:'warning'
              },
              {
                label:'已批准',
                value:'已批准',
                type:'success'
              },
            ]
          },
          weekDay:{
            select:[]
          }
        },
        linkEvent: {},
        selectField: {
          shift:{
            select:[]
          },
          state:{
            select:[
              {
                label:'已提交',
                value:'已提交',
                type:'primary'
              },
              {
                label:'已审核',
                value:'已审核',
                type:'warning'
              },
              {
                label:'已批准',
                value:'已批准',
                type:'success'
              },
            ]
          },
          weekDay:{
            select:[]
          }
        },
        requiredAdd: [],
        requiredUp: []
            },
      upIndex:0,
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods:{
    refreshTable(){}
  data() {
    return {
      //事故设备信息
      tableDataAlist: [], // æ›´æ”¹å˜é‡åç§°
      dialogVisible: false,
      rules: {
        quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
      },
      currentStep: 0, // æ­¥éª¤æ¡æ˜¾ç¤ºç¬¬å‡ æ­¥
      currentStepClick: 0, // ç‚¹å‡»æ­¥éª¤æ¡å˜åŒ–
      steps: ['提交', '开箱验收复核', '安装验收检查', '安装验收复核', '验收核查', '验收核查审核'],
      form: {
        sparePartsConfirmationList: [], // å¤‡ä»¶ç¡®è®¤List
        fileClassConfirmationList: [], // æ–‡ä»¶ç¡®è®¤List
        installationAcceptanceRecordList: [], // å®‰è£…验收记录
        acceptanceCheckRecordList: [], // éªŒæ”¶æ ¸æŸ¥è®°å½•
        fileName: '', // æ–‡ä»¶åç§°
        systemFileName: '', // ç³»ç»Ÿæ–‡ä»¶åç§°
      },
      outLoading: false,
      responsibleOptions: [], // ä¸‹çŽ¯èŠ‚负责人list
      isUpdate: false,
      search: {
        size: 20,
        current: 1,
        total: 0,
        processNumber: '',
      },
    }
  },
  computed: {
    action() {
      return this.javaApi + this.$api.personnel.saveCNASFile
    }
  },
  mounted() {
    // èŽ·å–设备事故信息
    this.getDeviceAList(this.clickNodeVal.value);
    window.excelClosed = this.closed
  },
  methods: {
    handleSizeChange(val) {
      this.search.size = val
      this.getPersonnelTraining(this.clickNodeVal.value);
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.getPersonnelTraining(this.clickNodeVal.value);
    },
    deleteFile() {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.personnel.deleteCNASFile + "?fileName=" + this.form.systemFileName).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    onSuccess(response, file, fileList) {
      if (response.code == 200) {
        // åœ¨ä¿å­˜èµ‹å€¼æ–°æ–‡ä»¶
        this.form.fileName = file.name
        this.form.systemFileName = response.data
      } else {
        this.$message.error(response.message)
      }
    },
    addTableRow(value) {
      switch (value) {
        // å¤‡ä»¶ç¡®è®¤
        case 'sparePartsConfirmationList':
          const obj = Object.assign({
            name: '',
            number: null,
            note: ''
          })
          this.form.sparePartsConfirmationList.push(obj)
          break
        // æ–‡ä»¶ç¡®è®¤List
        case 'fileClassConfirmationList':
          const obj1 = Object.assign({
            expectedCopies: '',
            actualCopies: '',
          })
          this.form.fileClassConfirmationList.push(obj1)
          break
        // å®‰è£…验收记录
        case 'installationAcceptanceRecordList':
          const obj2 = Object.assign({
            installationProject: '',
            installationSituation: '',
            installationCompleted: ''
          })
          this.form.installationAcceptanceRecordList.push(obj2)
          break
        // éªŒæ”¶æ ¸æŸ¥è®°å½•
        case 'acceptanceCheckRecordList':
          const obj3 = Object.assign({
            instrumentModule: '',
            verificationParameter: '',
            acceptableLimit: '',
            verificationResult: '',
            verificationConclusion: ''
          })
          this.form.acceptanceCheckRecordList.push(obj3)
        default:
          break
      }
    },
    deleteRow(index, row, type) {
      switch (type) {
        // å¤‡ä»¶ç¡®è®¤
        case 'sparePartsConfirmationList':
          if (row.sparePartsId) {
            this.$axios.delete(this.$api.deviceCheck.deleteIncidentReportAll + '?sparePartsId=' + row.sparePartsId).then(res => { });
          }
          this.form.sparePartsConfirmationList.splice(index, 1)
          this.$message.success('删除成功！')
          break
        // æ–‡ä»¶ç¡®è®¤List
        case 'fileClassConfirmationList':
          if (row.fileId) {
            this.$axios.delete(this.$api.deviceCheck.deleteIncidentReportAll + '?fileId=' + row.fileId).then(res => { });
          }
          this.form.fileClassConfirmationList.splice(index, 1)
          this.$message.success('删除成功！')
          break
        // å®‰è£…验收记录
        case 'installationAcceptanceRecordList':
          if (row.installId) {
            this.$axios.delete(this.$api.deviceCheck.deleteIncidentReportAll + '?installId=' + row.installId).then(res => { });
          }
          this.form.installationAcceptanceRecordList.splice(index, 1)
          this.$message.success('删除成功！')
          break
        // éªŒæ”¶æ ¸æŸ¥è®°å½•
        case 'acceptanceCheckRecordList':
          if (row.acceptanceCheckId) {
            this.$axios.delete(this.$api.deviceCheck.deleteIncidentReportAll + '?acceptanceCheckId=' + row.acceptanceCheckId).then(res => { });
          }
          this.form.acceptanceCheckRecordList.splice(index, 1)
          this.$message.success('删除成功！')
        default:
          break
      }
    },
    choiceStep(index) {
      this.currentStepClick = index
    },
    openRecordAcceptance() {
      // èŽ·å–设备基础信息
      this.$axios.get(this.$api.deviceScope.selectDeviceByCode + '?id=' + this.clickNodeVal.value).then(res => {
        this.form.deviceName = res.data.deviceName
        this.form.manufacturer = res.data.manufacturer
        this.form.specificationModel = res.data.specificationModel
        this.form.managementNumber = res.data.managementNumber
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      });
      // èŽ·å–负责人信息
      this.getUserList()
    },
    //提交表单
    async submitForm(saveState) {
      this.$refs.form.validate((valid) => {
        if (valid === true || saveState !== '1submit') {
          // ç»™å½“前环节设置创建人与时间
          let user = JSON.parse(localStorage.getItem('user'))
          const dateTime = dateFormat(new Date())
          // èŽ·å–当前环节操作人与日期
          switch (this.currentStep) {
            case 0:
              this.form.submitOperatingPersonnel = user.name
              this.form.submitDate = dateTime
              break
            case 1:
              this.form.unpackingOperatingPersonnel = user.name
              this.form.unpackingDate = dateTime
              break
            case 2:
              this.form.installOperatingPersonnel = user.name
              this.form.installDate = dateTime
              break
            case 3:
              this.form.installationAcceptanceOperatingPersonnel = user.name
              this.form.installationAcceptanceDate = dateTime
              break
            case 4:
              this.form.acceptanceCheckOperatingPersonnel = user.name
              this.form.acceptanceCheckDate = dateTime
              break
            case 5:
              this.form.acceptanceAuditOperatingPersonnel = user.name
              this.form.acceptanceAuditDate = dateTime
              break
            default:
              break
          }
          // èŽ·å–当前环节负责人
          switch (saveState === '3reject' ? this.currentStep - 1 : this.currentStep) {
            case 0:
              this.form.currentResponsible = this.form.submitNextPesponsible
              break
            case 1:
              this.form.currentResponsible = this.form.unpackingNextPesponsible
              break
            case 2:
              this.form.currentResponsible = this.form.installNextPesponsible
              break
            case 3:
              this.form.currentResponsible = this.form.installationAcceptanceNextPesponsible
              break
            case 4:
              this.form.currentResponsible = this.form.acceptanceCheckNextPesponsible
              break
            default:
              break
          }
          let currentStepAction;
          // è®¾ç½®è¯¥æ“ä½œåˆ¤æ–­æ˜¯å¦ä¸ºæäº¤ï¼Œä¿å­˜ï¼Œé©³å›žï¼Œé€šè¿‡
          switch (saveState) {
            // æäº¤ï¼Œé€šè¿‡
            case '1submit':
              currentStepAction = this.currentStep + 1
              break
            // ä¿å­˜
            case '2save':
              currentStepAction = this.currentStep
              break
            // é©³å›ž
            case '3reject':
              currentStepAction = this.currentStep - 1
              break
            default:
              break
          }
          // èŽ·å–当前状态
          this.form.currentState = currentStepAction === 6 ? '关闭' : this.steps[currentStepAction]
          this.form.deviceId = this.clickNodeVal.value
          this.$axios.post(this.$api.deviceCheck.saveIncidentReportData, this.form, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
            if (res.code == 200) {
              this.$message.success('提交成功')
              this.getDeviceAList(this.clickNodeVal.value);
              this.dialogVisible = false
            }
          })
        } else {
          let step = this.steps[this.currentStep]
          this.$message.warning(step + '  æµç¨‹ä¸­æœ‰å¿…填项未填！');
        }
      });
    },
    // èŽ·å–负责人信息接口
    getUserList() {
      this.$axios.get(this.$api.deviceScope.selectUserList).then(res => {
        if (res.code == 200) {
          this.responsibleOptions = res.data
        }
      })
    },
    resetSearch() {
      this.search = {
        size: 20,
          current: 1,
          total: 0,
          processNumber: '',
      }
      this.getDeviceAList(this.clickNodeVal.value);
    },
    // èŽ·å–设备事故信息(根据从vuex中获取到的设备名称id进行数据查询)
    getDeviceAList(deviceId) {
      this.$axios.get(this.$api.deviceCheck.incidentReportPage + "?deviceId=" + deviceId + "&size=" + this.search.size + "&current=" + this.search.current + "&processNumber=" + this.search.processNumber).then(res => {
        if (res.code == 200) {
          this.tableDataAlist = res.data.records
          this.search.total = res.data.total
        }
      })
    },
    //table äº‹ä»¶å¤„理开始处
    handleAttachmentClick(row) {
      // æ¨¡æ‹Ÿä¸‹è½½é™„件
      const imageUrl = this.javaApi+'/img/'+row.systemFileName; // å›¾ç‰‡ URL
      // downloadImage(imageUrl);
      file.downloadIamge(imageUrl,row.fileName)
    },
    handleViewClick(row) {
      this.$axios.get(this.$api.deviceCheck.getShowIncidentReport + "?id=" + row.id).then(res => {
        this.form = { ...res.data }
        // å¦‚果索引为6表示全部通过
        this.currentStep = this.steps.indexOf(this.form.currentState) === -1 ? 6 : this.steps.indexOf(this.form.currentState)
        this.currentStepClick = this.currentStep === 6 ? 0 : this.currentStep
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      })
      this.dialogVisible = true
    },
    // å¯¼å‡º
    handleDownOne(row) {
      this.outLoading = true
      this.$axios.get(this.$api.deviceCheck.acceptanceCertificateExport + '?deviceId=' + row.deviceId + '&processNumber=' + row.processNumber, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        this.$message.success('导出成功')
        const blob = new Blob([res], { type: 'application/octet-stream' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '设备验收.doc';
        link.click();
      })
    },
    // åˆ é™¤
    handleDeleteClick(row) {
      this.$confirm('此操作将删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.deviceCheck.deleteIncidentReport + '?id=' + row.id).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getDeviceAList(this.clickNodeVal.value);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //导出
    handleDown() {
      this.outLoading = true
      this.$axios.get(this.$api.deviceCheck.incidentReportExport + '?deviceId=' + this.clickNodeVal.value, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        this.$message.success('导出成功')
        const blob = new Blob([res], { type: 'application/octet-stream' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '设备验收.xlsx';
        link.click();
      })
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getDeviceAList(newVal.value);
      }
    },
    dialogVisible(newVal) {
      if (!newVal) {
        this.form = {
          sparePartsConfirmationList: [], // å¤‡ä»¶ç¡®è®¤List
          fileClassConfirmationList: [], // æ–‡ä»¶ç¡®è®¤List
          installationAcceptanceRecordList: [], // å®‰è£…验收记录
          acceptanceCheckRecordList: [], // éªŒæ”¶æ ¸æŸ¥è®°å½•
          fileName: '', // æ–‡ä»¶åç§°
          systemFileName: '', // ç³»ç»Ÿæ–‡ä»¶åç§°
        }
        this.currentStep = 0 // æ­¥éª¤æ¡æ˜¾ç¤ºç¬¬å‡ æ­¥
        this.currentStepClick = 0 // ç‚¹å‡»æ­¥éª¤æ¡å˜åŒ–
        this.$refs['form'].clearValidate()
      }
    }
  }
}
function downloadImage(url) {
  const link = document.createElement('a');
  link.href = url;
  link.download = 'attachment.jpg'; // æ–‡ä»¶å
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
</script>

<style scoped>
.tables{
  width: calc(100vw - 390px);
  height: calc(100vh - 230px);
>>>.el-radio {
  color: #606266;
  font-weight: 500;
  cursor: pointer;
  margin-right: 0px;
  width: 10em;
}

.tables {
  width: 100%;
  height: calc(100vh - 17em);
}

.search {
  background-color: #fff;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: space-between;
}

.search_thing {
@@ -151,18 +904,28 @@
}

.search_label {
  width: 70px;
  font-size: 14px;
  text-align: right;
  width: 110px;
}

.search_input {
  width: calc(100% - 120px);
}
.btns{
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translate(0,-50%);

.search_thing {
  display: flex;
  margin: 10px 0;
}

.line {
  width: 20px;
  height: 1px;
  background-color: #ccc;
  display: inline-block;
  margin-right: 10px;
}

.form .search_label {
  width: 120px;
}
</style>

 src/components/do/a6-device/check.vue

@@ -1,13 +1,686 @@
<!-- è®¾å¤‡æ ¸æŸ¥ -->
<template>
  <div>设备核查</div>
  <div>
    <div class="btns">
      <el-button size="small" type="primary" @click="calibrationMaintenance()">核查项目维护</el-button>
      <el-button size="small" type="primary" @click="add('add')">添加核查记录</el-button>
      <el-button size="small" type="primary">导出Excel</el-button>
    </div>
    <div class="tables" style="margin-top: 16px;">
      <el-table :data="tableData" height="calc(100vh - 20em)">
        <el-table-column label="序号" type="index" width="120">
          <template v-slot="scope">
            <span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="记录编号" min-width="150" prop="processNumber"></el-table-column>
        <el-table-column label="核查机构" min-width="150" prop="calibrationInstitution"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="核查结论" min-width="150" prop="status">
          <template v-slot="scope">
            {{ scope.row.status === '0yes' ? '合格' : scope.row.status === '1no' ? '不合格' : '其他' }}
          </template>
        </el-table-column>
        <el-table-column label="核查证书编号" min-width="150" prop="certificateSerialNumber"></el-table-column>
        <el-table-column label="说明" min-width="150" prop="remark" show-overflow-tooltip></el-table-column>
        <el-table-column label="核查日期" min-width="150" prop="calibrationDate"></el-table-column>
        <el-table-column label="下次核查日期" min-width="150" prop="nextCalibrationDate"></el-table-column>
        <el-table-column label="登记人" min-width="150" prop="createUser"></el-table-column>
        <el-table-column label="登记日期" min-width="150" prop="createTime"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="150">
          <template #default="{ row }">
            <el-button size="small" type="text" @click="handleAttachmentClick(row)">附件</el-button>
            <el-button size="small" type="text" @click="handleViewClick('view', row)">查看</el-button>
            <el-button size="small" type="text" @click="handleDeleteClick(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
                     :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" style="margin-right: 5%;"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>

    <!-- æ ¡å‡†é¡¹ç›®ç»´æŠ¤ -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible0" title="核查项目维护"
               top="5vh" width="70%">
      <h4>
        <span style="display: flex;align-items: center;"><span class="line"></span><span>设备核查参数维护</span></span>
        <el-button :loading="addCalibrateLoading" size="small" type="primary" @click="addCalibrate">æ·» åŠ </el-button>
      </h4>
      <div>
        <el-form ref="form0" :model="form0" :rules="form0Rules"
                 label-position="right" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="核查参数:" prop="measurementParameter">
                <el-input v-model="form0.measurementParameter" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="核查范围:" prop="rangeOfMeasurement">
                <el-input v-model="form0.rangeOfMeasurement" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最大允许误差:" prop="maxPermissibleError">
                <el-input v-model="form0.maxPermissibleError" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="判定标准:" prop="judgmentCriteria">
                <el-input v-model="form0.judgmentCriteria" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <h4>
        <span style="display: flex;align-items: center;"><span class="line"></span><span>设备核查参数</span></span>
      </h4>
      <!-- è®¾å¤‡æ ¡å‡†å‚数表格 -->
      <el-table ref="calibrateTable" v-loading="calibrateParamsLoading" :data="calibrateParams"
                max-height="450"
                stripe style="width: 100%">
        <el-table-column label="编号" type="index" width="80"></el-table-column>
        <el-table-column label="核查参数" prop="measurementParameter"></el-table-column>
        <el-table-column label="核查范围" prop="rangeOfMeasurement"></el-table-column>
        <el-table-column label="最大允许误差" prop="maxPermissibleError"></el-table-column>
        <el-table-column label="判定标准" prop="judgmentCriteria"></el-table-column>
        <el-table-column label="创建人" prop="createdBy"></el-table-column>
        <el-table-column label="创建时间" prop="creationTime"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- æ·»åŠ æ ¸æŸ¥è®°å½• -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible1" title="添加核查记录"
               top="5vh"
               width="80%" @close="resetcalibrationRecord">
      <div class="dialog-content">
        <h4>
          <span style="display: flex;align-items: center;">
           <span class="line"></span>
            <span>添加设备核查记录</span>
          </span>
        </h4>
        <el-form ref="calibrationRecord" :model="calibrationRecord" :rules="formRules"
                 label-position="right" label-width="120px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="核查人:" prop="unitOfMeasure">
                <el-input v-model="calibrationRecord.unitOfMeasure" :disabled="operationType === 'view'"
                          size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核查日期:" prop="calibrationDate">
                <el-date-picker v-model="calibrationRecord.calibrationDate" :disabled="operationType === 'view'" format="yyyy-MM-dd" placeholder="选择日期"
                                size="small"
                                style="width: 90%" type="date" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="下次核查日期:" label-width="140px" prop="nextCalibrationDate">
                <el-date-picker v-model="calibrationRecord.nextCalibrationDate" :disabled="operationType === 'view'" :picker-options="{ disabledDate: this.disabledDate }"
                                format="yyyy-MM-dd"
                                placeholder="选择日期"
                                size="small" style="width: 90%" type="date"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="核查器具:" prop="calculatingApparatus">
                <el-input v-model="calibrationRecord.calculatingApparatus" :disabled="operationType === 'view'"
                          size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核查标准量程:" prop="standardRange">
                <el-input v-model="calibrationRecord.standardRange" :disabled="operationType === 'view'" size="small"
                          style="width: 90%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="核查标准不确定度:" label-width="140px" prop="calibrationStandardUncertainty">
                <el-input v-model="calibrationRecord.calibrationStandardUncertainty" :disabled="operationType === 'view'" size="small"
                          style="width: 90%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="核查指导书:" prop="byDocument">
                <el-input v-model="calibrationRecord.byDocument" :disabled="operationType === 'view'"
                          size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检查报告编号:" prop="certificateSerialNumber">
                <el-input v-model="calibrationRecord.certificateSerialNumber" :disabled="operationType === 'view'" size="small"
                          style="width: 90%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核查总结论:" label-width="140px" prop="status">
                <el-radio-group v-model="calibrationRecord.status" :disabled="operationType === 'view'">
                  <el-radio label="0yes">合格</el-radio>
                  <el-radio label="1no">不合格</el-radio>
                  <el-radio label="2other">其他</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="附件：" prop="fileName">
                <el-input v-model="calibrationRecord.fileName" :style="`width: ${operationType === 'add' ? '90%' : '100%'};}`" disabled
                          size="small">
                  <el-button v-if="operationType === 'add'" slot="append" icon="el-icon-delete-solid"
                             @click="deleteFile"></el-button>
                </el-input>
                <el-upload v-if="operationType === 'add'" ref="upload" :action="action" :before-upload="beforeUpload" :headers="headers"
                           :limit="1" :on-error="onError" :on-success="handleSuccessUp"
                           :show-file-list="false"
                           style="float: right;">
                  <el-button :loading="upLoading" size="small" style="position: relative; top: -4px;"
                             type="primary">附件上传
                  </el-button>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注:">
                <el-input v-model="calibrationRecord.remark" :disabled="operationType === 'view'" :rows="3" size="small"
                          style="width: 96%" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <h4>
          <span style="display: flex;align-items: center;">
            <span class="line"></span><span>核查条目确认结果</span>
          </span>
        </h4>
        <el-table ref="calibrateTable" :data="calibrateParams" stripe style="width: 100%;">
          <el-table-column label="编号" type="index" width="80"></el-table-column>
          <el-table-column label="核查参数" prop="measurementParameter" width="150"></el-table-column>
          <el-table-column label="核查范围" prop="rangeOfMeasurement" width="150"></el-table-column>
          <el-table-column label="最大允许误差" prop="maxPermissibleError" width="150"></el-table-column>
          <el-table-column label="判定标准" prop="judgmentCriteria" width="150"></el-table-column>
          <el-table-column label="是否核查" prop="isCalibration">
            <template slot="header" slot-scope="scope">
              <span class="required-span">* </span>是否核查
            </template>
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.isCalibration" :disabled="operationType === 'view'">
                <el-radio label="0yes">是</el-radio>
                <el-radio label="1no">否</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="判定结果" prop="result">
            <template slot="header" slot-scope="scope">
              <span class="required-span">* </span>判定结果
            </template>
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.result" :disabled="operationType === 'view'" @input="checkRadio()">
                <el-radio label="0yes">合格</el-radio>
                <el-radio label="1no">不合格</el-radio>
                <el-radio label="2other">其他</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="单项结果说明" prop="singleResultStatement">
            <template slot-scope="scope">
              <el-input v-model="scope.row.singleResultStatement" :disabled="operationType === 'view'" size="small"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer" style="float: right;margin-top: 10px">
          <el-button v-if="operationType === 'add'" @click="dialogVisible1 = false">取 æ¶ˆ</el-button>
          <el-button v-if="operationType === 'add'" type="primary" @click="addRecord">ç¡® å®š</el-button>
        </span>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import ValueTable from '../../tool/value-table.vue'
import file from '../../../util/file';
export default {
  components: {
    ValueTable
  },
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      search: {
        size: 20,
        current: 1,
        total: 0
      },
      calibrateParamsLoading: false,
      addCalibrateLoading: false,
      form0: {
        measurementParameter: '', // è®¡é‡å‚æ•°
        rangeOfMeasurement: '',
        maxPermissibleError: '',
        judgmentCriteria: '',
        createdBy: '',
        action: '',
        deviceId: null
      },
      form0Rules: {
        measurementParameter: [
          {required: true, message: '请输入计量参数', trigger: 'blur'}
        ],
        rangeOfMeasurement: [
          {required: true, message: '请输入量程范围', trigger: 'blur'}
        ],
        maxPermissibleError: [
          {required: true, message: '请输入最大允许误差', trigger: 'blur'}
        ],
        judgmentCriteria: [
          {required: true, message: '请输入判定标准', trigger: 'blur'}
        ],
      },
      dialogVisible0: false,
      calibrationRecord: {
        unitOfMeasure: '', // æ ¸æŸ¥äºº
        calibrationDate: '', // æ ¸æŸ¥æ—¥æœŸ
        nextCalibrationDate: '', // ä¸‹æ¬¡æ ¸æŸ¥æ—¥æœŸ
        calculatingApparatus: '', // æ ¸æŸ¥å™¨å…·
        standardRange: '', // æ ¸æŸ¥æ ‡å‡†é‡ç¨‹
        calibrationStandardUncertainty: '', // æ ¸æŸ¥æ ‡å‡†ä¸ç¡®å®šåº¦
        byDocument: '', // æ ¸æŸ¥æŒ‡å¯¼ä¹¦
        certificateSerialNumber: '', // æ£€æŸ¥æŠ¥å‘ŠæŒ‡å¯¼ä¹¦
        fileName: '', // é™„件
        status: '', // æ ¸æŸ¥æ€»ç»“论
        remark: '', // å¤‡æ³¨
      },
      formRules: {
        unitOfMeasure: [{required: true, message: '请输入核查人', trigger: 'blur'}],
        calibrationDate: [{required: true, message: '请选择核查日期', trigger: 'change'}],
        nextCalibrationDate: [{required: true, message: '请选择下次核查日期', trigger: 'change'}],
        calculatingApparatus: [{required: true, message: '请输入核查器具', trigger: 'blur'}],
        standardRange: [{required: true, message: '请输入核查标准量程', trigger: 'blur'}],
        calibrationStandardUncertainty: [{required: true, message: '请输入核查标准不确定度', trigger: 'blur'}],
        byDocument: [{required: true, message: '请输入核查指导书', trigger: 'blur'}],
        certificateSerialNumber: [{required: true, message: '请输入检查报告指导书', trigger: 'blur'}],
        status: [{required: true, message: '请选择核查总结论', trigger: 'change'}]
      },
      calibrateParams: [],
      tableData: [],
      operationType: '',
      dialogVisible1: false,
      formData: {
        person: '',
        data1: '',
        name: '',
      },
      upLoading: false
    }
  },
  // ç”¨äºŽä¸Šä¼ æ–‡ä»¶çš„信息
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
    },
    action() {
      return this.javaApi + this.$api.personnel.saveCNASFile
    }
  },
  mounted() {
    this.getTableList(this.clickNodeVal.value) // èŽ·å–设备核查列表数据
  },
  methods: {
    //状态判定
    checkRadio(){
      let resultList = this.calibrateParams.map(ele=>ele.result)
      if(resultList && resultList.filter(ele=>ele=='1no').length>0){
        this.calibrationRecord.status = '1no'
      }else if(resultList && resultList.filter(ele=>ele=='2other').length==resultList.length){
        this.calibrationRecord.status = '2other'
      }else if(resultList && resultList.filter(ele=>ele=='0yes').length==resultList.length){
        this.calibrationRecord.status = '0yes'
      }
    },
    //下次核查日期:禁用在核查日期前的日期
    disabledDate(time){
      let selectDate = this.calibrationRecord.calibrationDate
      if(selectDate){
       let oldDate = new Date(selectDate)
       return time <= oldDate.getTime()
      }
      return false
    },
    handleSizeChange(val) {
      this.search.size = val
      this.getTableList(this.clickNodeVal.value);
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.getTableList(this.clickNodeVal.value);
    },
    // èŽ·å–设备校准参数table信息
    async getXmsg() {
      this.calibrateParamsLoading = true
      try {
        await this.$axios.get(this.$api.deviceCheck.selectDeviceMetric + "?deviceId=" + this.clickNodeVal.value + "&type=examine").then(res => {
          if (res.code == 200) {
            this.calibrateParams = res.data
          }
          this.calibrateParamsLoading = false
        })
      } catch (e) {
        this.calibrateParamsLoading = false
      }
    },
    // æ ¡å‡†é¡¹ç›®ç»´æŠ¤
    calibrationMaintenance() {
      this.dialogVisible0 = true
      this.getXmsg();
    },
    addCalibrate() {
      this.$refs['form0'].validate((valid) => {
        if (valid) {
            // ä¿å­˜
            this.calibrateParamsLoading = true
            this.addCalibrateLoading = true
            this.form0.deviceId = this.clickNodeVal.value;
            const user = JSON.parse(localStorage.getItem('user'))
            this.form0.createdBy = user.name;
            this.form0.type = 'examine'
            this.$axios.post(this.$api.deviceCheck.saveOrUpdateDeviceMetric, this.form0, {
              headers: {
                'Content-Type': 'application/json'
              }
            }).then(res => {
              if (res.code == 200) {
                this.$message.success('保存成功')
                this.$refs['form0'].resetFields()
                this.getXmsg() // åˆ·æ–°è®¾å¤‡æ ¡å‡†å‚数表格
              }
              this.calibrateParamsLoading = false
              this.addCalibrateLoading = false
            })
        } else {
          this.addCalibrateLoading = false
          this.$message.warning('有必填项未填');
        }
      })
    },
    // æŸ¥è¯¢è®¾å¤‡æ ¸æŸ¥åˆ—表
    getTableList(deviceId) {
      this.$axios.get(this.$api.deviceCheck.deviceMetricRecordPage + '?deviceId=' + deviceId + "&size=" + this.search.size + "&current=" + this.search.current + "&type=examine").then(res => {
        this.tableData = res.data.records
        this.search.total = res.data.total
      })
    },
    // æäº¤è¦æ·»åŠ çš„记录
    addRecord() {
      this.$refs['calibrationRecord'].validate((valid) => {
        if (valid) {
          try {
            if (this.calibrateParams.some(m => m.isCalibration === undefined)) {
              this.$message.error('请选择是否核查')
              return
            }
            if (!this.calibrateParams.every(m => m.result !== undefined)) {
              this.$message.error('请选择判定结果')
              return
            }
            this.addRecordLoading = true
            this.calibrationRecord.deviceId = this.clickNodeVal.value;
            let user = JSON.parse(localStorage.getItem('user'))
            this.calibrationRecord.createUser = user.name
            this.calibrationRecord.deviceMetricsCopyList = this.calibrateParams
            this.calibrationRecord.type = 'examine'
            this.$axios.post(this.$api.deviceCheck.addOrUpdateDeviceMetricRecord, this.calibrationRecord, {
              headers: {
                'Content-Type': 'application/json'
              }
            }).then(res => {
              if (res.code == 200) {
                this.$message.success('添加成功')
                this.dialogVisible1 = false
                this.getTableList(this.clickNodeVal.value)
              }
              this.addRecordLoading = false
            })
          } catch (e) {
            console.log('addRecord---', e)
            this.addRecordLoading = false
          }
        } else {
          this.$message.warning('有必填项未填');
        }
      })
    },
    resetcalibrationRecord() {
      this.$refs.calibrationRecord.resetFields()
    },
    // é™„件上传
    handleSuccessUp(response, file) {
      if (response.code == 200) {
        // åœ¨ä¿å­˜èµ‹å€¼æ–°æ–‡ä»¶
        this.calibrationRecord.fileName = file.name
        this.calibrationRecord.systemFileName = response.data
        this.upLoading = false;
      } else {
        this.$message.error(response.message)
      }
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        this.upLoading = true;
        return true;
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    deleteFile() {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.personnel.deleteCNASFile + "?fileName=" + this.form.systemFileName).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // end
    handleAttachmentClick(row) {
      // æ¨¡æ‹Ÿä¸‹è½½é™„件
      const imageUrl = this.javaApi+'/img/'+row.systemFileName; // å›¾ç‰‡ URL
      file.downloadIamge(imageUrl,row.fileName)
      // downloadImage(imageUrl, row.fileName);
    },
    // æ·»åŠ æ ¸æŸ¥è®°å½•
    add(type) {
      this.operationType = type
      this.dialogVisible1 = true
      this.getXmsg()
    },
    // æŸ¥çœ‹è¯¦æƒ…
    handleViewClick(type, row) {
      this.$axios.get(this.$api.deviceCheck.showDeviceMetricsCopy + "?id=" + row.id + "&type=examine").then(res => {
        this.calibrateParams = res.data
      })
      this.calibrationRecord = {...row}
      this.operationType = type
      this.dialogVisible1 = true
    },

    // è¡¨æ ¼åˆ é™¤æ“ä½œ
    handleDeleteClick(row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.deviceCheck.deleteDeviceMetricRecord + "?id=" + row.id).then(res => {
          this.getTableList(this.clickNodeVal.value) // èŽ·å–设备校准列表数据
          this.$message.success('删除成功！')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    handleDelete(row){
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.deviceCheck.deleteDeviceMetrics + "?id=" + row.id).then(res => {
          this.getXmsg();
          this.$message.success('删除成功！')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    }
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getTableList(newVal.value);
      }
    },
  }
}

function downloadImage(url,name) {
  const link = document.createElement('a');
  link.href = url;
  link.download = name; // æ–‡ä»¶å
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
</script>

<style scoped>
.dialog-content {
  max-height: 70vh; /* è®¾ç½®æœ€å¤§é«˜åº¦ */
  overflow-y: auto; /* å¯ç”¨åž‚直滚动 */
}

.tables {
  width: 100%;
  height: calc(100vh - 230px);
}

.search {
  background-color: #fff;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
}

.search_thing {
  display: flex;
  align-items: center;
  height: 40px;
}

.search_label {
  width: 70px;
  font-size: 14px;
  text-align: right;
  margin-right: 10px;
}

.search_input {
  width: calc(100% - 110px);
}

.btns {
  text-align: right;
}

h4 {
  font-weight: 400;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

h4 .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}

.check {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.check_thing {
  flex: 0 0 calc(20% - 10px);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.check_label {
  font-size: 14px;
  margin-bottom: 5px;
}

.check_data .check_input {
  width: 100%;
}

.el-table {
  font-size: 14px;
  color: #333;
}

.el-table thead {
  background-color: #f5f5f5;
}
</style>

 src/components/do/a6-device/device-overview.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,408 @@
<!-- è®¾å¤‡æ€»è§ˆ -->
<style scoped>
.title {
  height: 60px;
  line-height: 60px;
}

.search {
  background-color: #fff;
  height: 50px;
  display: flex;
  align-items: center;
}

.search_thing {
  width: 350px;
  display: flex;
  align-items: center;
}

.search_label {
  width: 110px;
  font-size: 14px;
  text-align: left;
}

.search_input {
  width: calc(100% - 110px);
}

.table {
  background-color: #fff;
  width: calc(100% - 40px);
  height: calc(100vh - 17em);
  /* padding: 10px; */
  overflow-y: auto;
}

.card {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, 380px);
  justify-content: start;
  grid-gap: 16px;
  min-height: 300px;
}

.card li {
  width: 380px;
  height: 165px;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #EEEEEE;
  margin: 0 !important;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 16px;
  font-size: 14px;
  color: #666666;
  position: relative;
  overflow: hidden;
}

.card li .img {
  width: 114px;
  height: 114px;
  border-radius: 16px;
  margin-right: 24px;
}

.list-left .list-left-info {
  line-height: 36px;
  display: flex;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.circles {
  position: absolute;
  width: 70px;
  height: 70px;
  right: 0;
  top: 0;
  z-index: 0;
}

.circles .circle {
  border-radius: 50%;
  opacity: 0.2;
}

.circle0,
.circle1,
.circle2 {
  width: 60px;
  height: 60px;
  position: absolute;
}

.circle3 {
  width: 16px;
  height: 16px;
  position: absolute;
}

.circle0 {
  bottom: 6px;
  left: 0;
}

.circle1 {
  bottom: 0;
  right: -30px;
}

.circle2 {
  left: 0;
  top: -30px;
}

.circle3 {
  top: 0;
  right: 0;
}

.success .circle {
  background: #34BD66;
}

.danger .circle {
  background: #FF3838;
}

.warning .circle {
  background: #FBB247;
}
.info .circle {
  background: #909399;
}
</style>

<template>
  <div class="role_manage">
    <div>
      <el-form :model="entity" inline label-position="right" label-width="80px">
        <el-form-item label="状态:">
          <el-select v-model="entity.deviceStatus" placeholder="全部" size="small" clearable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称:">
          <el-input size="small" placeholder="请输入" clearable v-model="entity.deviceName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="refresh()">重 ç½®</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary"
          @click="currentPage = 1, keyMap = {}, list = [], finishLoding = false, refreshTable()">查 è¯¢</el-button>
        </el-form-item>
      </el-form>
      <!-- <div class="search_thing">
        <div class="search_label">状态：</div>
        <el-select v-model="entity.deviceStatus" placeholder="全部" size="small" clearable>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search_thing">
        <div class="search_label">设备名称：</div>
        <div class="search_input">
          <el-input size="small" placeholder="请输入" clearable
            v-model="entity.deviceName"></el-input>
            </div>
      </div> -->


      <!-- <div class="search_thing" style="padding-left: 30px;">
      </div> -->
    </div>
    <div class="table" v-loading="loading">
      <scroll-pagination @load="refreshTable()" :finishLoding="finishLoding" :list="list"
        v-if="list.length > 0 || loading">
        <ul class="card">
          <li v-for="(m, i) in list" :key="i">
            <el-image class="img" :src="javaApi + '/img/' + m.imageUpload">
              <div slot="error" class="image-error" style="width: 112px;
            height: 112px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #EEEEEE;">
                <i class="el-icon-picture-outline" style="font-size:30px;color:#666666;"></i>
              </div>
            </el-image>
            <div class="list-left">
              <div class="list-left-info">
                <span class="label">设备名称：</span>
                <span style="color:#3A7BFA;
              font-size: 16px;
              display: inline-block;
              width: 129px;
              word-break: break-all;" class="text-truncate" :title="m.deviceName">{{ m.deviceName ? m.deviceName : '无' }}</span>
              </div>
              <div class="list-left-info">
                <span class="label">规格型号：</span>
                <span style="color:#333333;font-size: 16px;">{{ m.specificationModel ? m.specificationModel : '无'
                  }}</span>
              </div>
              <div class="list-left-info">
                <span class="label">状态：</span>
                <el-tag :type="m.type" v-if="m.deviceStatusName">{{ m.deviceStatusName }}</el-tag>
                <span v-else style="color:#333333;font-size: 16px;">无</span>
              </div>
            </div>
            <div class="circles" :class="m.type">
              <div class="circle0 circle"></div>
              <div class="circle1 circle"></div>
              <div class="circle2 circle"></div>
              <div class="circle3 circle"></div>
            </div>
          </li>
        </ul>
      </scroll-pagination>
      <div v-if="list.length < 1 && !loading" style="color:#909399;font-size:14px;text-align: center;margin-top:200px">
        æš‚无数据
      </div>
    </div>
  </div>
</template>

<script>
import ScrollPagination from '../../tool/scroll-paging.vue'
export default {
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    ScrollPagination
  },
  data() {
    return {
      entity: {
        deviceStatus: null,
        deviceName: null,
        orderBy: { field: "id", order: "asc" }
      },
      options: [],
      list: [],
      currentPage: 1, // å½“前页
      pageSize: 16, // ä¸€é¡µ16条
      total: '',
      loading: true, // ç»„件loading的展示,默认为true
      finishLoding: false, // åŠ è½½å®Œæˆï¼Œæ˜¾ç¤ºå·²ç»æ²¡æœ‰æ›´å¤šäº†
      keyMap: {},
      laboratoryNameIsNull: false,
    }
  },
  created() {
    this.selectEnumByCategory()
    this.keyMap = {};
    this.currentPage = 1;
    this.list = [];
    this.clickSidebar(this.clickNodeVal)
  },
  methods: {
    refreshTable() {
      const key = `_${this.currentPage}`
      const value = this.keyMap[key]
      // å¦‚æžœvalue存在，表示缓存有值，那么阻止请求
      if (value) {
        return
      }
      // value不存在，表示第一次请求,设置占位
      this.keyMap[key] = 'temp'
      if (this.currentPage == 1) {
        this.loading = true
      }
      if(this.list.length==0){
          this.finishLoding = false;
        }
      this.$axios.post(this.$api.deviceScope.selectDeviceParameter + "?laboratoryNameIsNull=" + this.laboratoryNameIsNull, {
        page: {
          current: this.currentPage,
          size: this.pageSize
        },
        entity: this.entity
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code == 200) {
          this.total = res.data.body.total
          let list = res.data.body.records.map(m => {
            switch (m.deviceStatus) {
              case 0:
                // æ­£å¸¸
                m.type = 'success'
                break;
              case 1:
                // ç»´ä¿®
                m.type = 'warning'
                break;
              case 2:
                // åœç”¨
                m.type = 'danger'
                break;
              case 3:
                // æŠ¥åºŸ
                m.type = 'info'
                break;
            }
            this.options.forEach(j => {
              if (m.deviceStatus == j.value) {
                m.deviceStatusName = j.label
              }
            })
            return m;
          })
          if (list.length == 0) {
            this.finishLoding = true;
          } else {
            if (list.length < this.pageSize) {
              this.finishLoding = true;
            }
            this.list = this.list.concat(list)
            if (this.total == this.list.length) {
              this.finishLoding = true;
            }
            this.currentPage++;
          }
        }
        this.loading = false
      })
    },
    refresh() {
      this.keyMap = {};
      this.currentPage = 1;
      this.list = [];
      this.finishLoding = false;
      this.entity = {
        deviceStatus: null,
        deviceName: null,
        orderBy: { field: "id", order: "asc" }
      };
      this.refreshTable()
    },
    // èŽ·å–å­—å…¸
    selectEnumByCategory() {
      this.$axios.post(this.$api.enums.selectEnumByCategory, {
        category: "设备状态"
      }).then(res => {
        this.options = res.data
      })
    },
    // ç‚¹å‡»ä¾§è¾¹æ åˆ·æ–°
    clickSidebar(clickNodeVal) {
      this.laboratoryNameIsNull = false
      // æ˜¯å¦å­˜åœ¨value，存在value代表为三级
      if (!clickNodeVal.value) {
        this.finishLoding = false;
        this.keyMap = {};
        this.currentPage = 1;
        this.list = [];
        this.entity.laboratoryName = null
        this.entity.storagePoint = null
        // ç­‰äºŽ1代表为树的一级，label为部门
        if (clickNodeVal.label == '其他') {
          this.laboratoryNameIsNull = true
          this.refreshTable();
          return
        }
        if (clickNodeVal.level == 1) {
          this.entity.laboratoryName = clickNodeVal.label
          // ç­‰äºŽäºŒçº§ã€‚label为存储地点
        } else if (clickNodeVal.level == 2) {
          // å…¶ä»–表示没有配置实验室，只配置了地点
          if (clickNodeVal.parent.label == '其他') {
            this.laboratoryNameIsNull = true
          } else {
            this.entity.laboratoryName = clickNodeVal.parent.label
          }
          this.entity.storagePoint = clickNodeVal.label
        }
        this.refreshTable();
      }
    }
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      this.clickSidebar(newVal)
    }
  }
}
</script>

 src/components/do/a6-device/fault.vue

@@ -1,13 +1,696 @@
<!-- è®¾å¤‡æ•…éšœ -->
<template>
  <div>设备故障</div>
  <div>
    <div class="search">
      <div class="search_thing">
        <div class="search_label">流程编号：</div>
        <div>
          <el-input size="small" placeholder="请输入" clearable v-model="search.processNumber" style="width: 100%;"
                    @keyup.enter.native="getTableList(clickNodeVal.value)">
          </el-input>
        </div>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="small" @click="resetSearch">重 ç½®</el-button>
        <el-button size="small" type="primary" @click="getTableList(clickNodeVal.value)">查 è¯¢</el-button>
      </div>
      <div class="btns">
        <el-button size="small" type="primary" @click="dialogVisible = true, addRecode()">新建</el-button>
        <el-button size="small" type="primary" @click="handleDown" :loading="outLoading">导出</el-button>
      </div>
    </div>
    <div>
      <div class="tables" style="margin-top: 16px;">
        <el-table :data="faultParam" style="width: 100%" height="calc(100vh - 20em)">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column header-align="center" align="center" width="70" prop="prop" label="序号"
                           type="index"></el-table-column>
          <el-table-column prop="processNumber" label="流程编号" min-width="180"></el-table-column>
          <el-table-column prop="deviceName" label="设备名称" min-width="150"></el-table-column>
          <el-table-column prop="managementNumber" label="统一编号" min-width="150"></el-table-column>
          <el-table-column prop="faultSituation" label="故障情况" min-width="130"></el-table-column>
          <el-table-column prop="submitPerson" label="提交人" min-width="130"></el-table-column>
          <el-table-column prop="createTime" label="提交日期" min-width="150"></el-table-column>
          <el-table-column prop="currentState" label="当前状态" min-width="130"></el-table-column>
          <el-table-column prop="currentResponsible" label="当前责任人" width="180"></el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column label="操作" fixed="right" min-width="150">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="showDetailsDialog(scope.row)">查看详情</el-button>
              <el-button type="text" size="small" @click="handleDeleteClick(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
                       style="margin-right: 5%;" :page-sizes="[10, 20, 30, 50, 100]" :page-size="search.size"
                       layout="->,total, sizes, prev, pager, next, jumper" :total="search.total">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="新增维修记录" top="5vh" :visible.sync="dialogVisible" width="60%" @open="openRecordAcceptance"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step v-for="(v, i) in steps" style="cursor:pointer" :title="v" :key="i"
                 @click.native="choiceStep(i)"></el-step>
      </el-steps>
      <el-form ref="form" :model="form" label-position="right" label-width="120px">
        <!-- æäº¤ -->
        <div v-show="currentStepClick == 0">
          <el-card style="margin-top: 1em;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="流程编号:">
                  <el-input v-model="form.processNumber" size="small" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备名称:">
                  <el-input v-model="form.deviceName" size="small" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规格型号:">
                  <el-input v-model="form.specificationModel" size="small" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备编号:">
                  <el-input v-model="form.managementNumber" size="small" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="准确度量值:" prop="measureOfAccuracy"
                              :rules="[{required: currentStep === 0, message: '请输入准确度量值', trigger: 'blur'}]">
                  <el-input v-model="form.measureOfAccuracy" size="small" :disabled="currentStep !== 0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="故障日期:" prop="faultDate">
                  <el-date-picker
                    v-model="form.faultDate"
                    type="date"
                    placeholder="选择日期" size="small"  format="yyyy-MM-dd" style="width: 100%" value-format="yyyy-MM-dd" :disabled="currentStep !== 0">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="要求修复日期:" prop="requestRepairDate">
                  <el-date-picker
                    v-model="form.requestRepairDate"
                    :picker-options="{ disabledDate: this.disabledDate }"
                    type="date"
                    placeholder="选择日期" size="small"  format="yyyy-MM-dd" style="width: 100%" value-format="yyyy-MM-dd" :disabled="currentStep !== 0">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="故障情况:" prop="faultSituation"
                :rules="[{required: currentStep === 0, message: '请输入故障情况', trigger: 'blur'}]">
                  <el-input v-model="form.faultSituation" type="textarea" size="small" :disabled="currentStep !== 0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="相关附件:">
                  <el-input v-model="form.fileName" :disabled="true" size="small" style="width: 80%;">
                    <el-button slot="append" icon="el-icon-delete-solid" @click="deleteFile" :disabled="currentStep !== 0"></el-button>
                  </el-input>
                  <el-upload ref="upload" style="float: right;" :action="action" :show-file-list="false"
                             :on-success="handleSuccess">
                    <el-button style="position: relative;top: -4px;" class="uploadFile" slot="trigger" size="small"
                               type="primary" :disabled="currentStep !== 0">附件上传
                    </el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下环节负责人:" prop="submitNextPesponsible"
                :rules="[{required: currentStep === 0, message: '请输入下环节负责人', trigger: 'change'}]">
                  <el-select v-model="form.submitNextPesponsible" placeholder="请选择下环节负责人" size="small" style="width: 100%" :disabled="currentStep !== 0">
                    <el-option v-for="(v, i) in users" :label="v.name" :value="v.name" :key="i"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.submitOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.submitDate }}
            </el-col>
          </el-row>
        </div>
        <!-- è®¾å¤‡ç®¡ç†å‘˜æ„è§ -->
        <div v-show="currentStepClick == 1">
          <el-card style="margin-top: 1em; height: 45vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="维修方式及费用:" prop="methodCost"
                :rules="[{required: currentStep === 1, message: '请输入维修方式及费用', trigger: 'blur'}]">
                  <el-input v-model="form.methodCost" type="textarea" size="small" :disabled="currentStep !== 1"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="审核意见:" prop="adminAuditOption"
                :rules="[{required: currentStep === 1, message: '请输入审核意见', trigger: 'blur'}]">
                  <el-input v-model="form.adminAuditOption" type="textarea" size="small" :disabled="currentStep !== 1"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下环节负责人:" prop="adminNextPesponsible"
                :rules="[{required: currentStep === 1, message: '请输入下环节负责人', trigger: 'change'}]">
                  <el-select v-model="form.adminNextPesponsible" placeholder="请选择下环节负责人" size="small" style="width: 100%" :disabled="currentStep !== 1">
                    <el-option v-for="(v, i) in users" :label="v.name" :value="v.name" :key="i"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.adminOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.adminDate }}
            </el-col>
          </el-row>
        </div>
        <!-- æŠ€æœ¯è´Ÿè´£äººæ„è§ -->
        <div v-show="currentStepClick == 2">
          <el-card style="margin-top: 1em; height: 45vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="审核意见:" prop="technicalAuditOption"
                :rules="[{required: currentStep === 2, message: '请输入审核意见', trigger: 'blur'}]">
                  <el-input v-model="form.technicalAuditOption" type="textarea" size="small" :disabled="currentStep !== 2"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下环节负责人:" prop="technicalNextPesponsible"
                :rules="[{required: currentStep === 2, message: '请输入下环节负责人', trigger: 'change'}]">
                  <el-select v-model="form.technicalNextPesponsible" placeholder="请选择下环节负责人" size="small" style="width: 100%" :disabled="currentStep !== 2">
                    <el-option v-for="(v, i) in users" :label="v.name" :value="v.name" :key="i"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.technicalOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.technicalDate }}
            </el-col>
          </el-row>
        </div>
        <!-- ç»´ä¿®æƒ…况记录 -->
        <div v-show="currentStepClick == 3">
          <el-card style="margin-top: 1em; height: 45vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="维修情况:" prop="maintainSituation"
                :rules="[{required: currentStep === 3, message: '请输入维修情况', trigger: 'blur'}]">
                  <el-input v-model="form.maintainSituation" type="textarea" size="small" :disabled="currentStep !== 3"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下环节负责人:" prop="maintainNextPesponsible"
                :rules="[{required: currentStep === 3, message: '请输入下环节负责人', trigger: 'change'}]">
                  <el-select v-model="form.maintainNextPesponsible" placeholder="请选择下环节负责人" size="small" style="width: 100%" :disabled="currentStep !== 3">
                    <el-option v-for="(v, i) in users" :label="v.name" :value="v.name" :key="i"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.maintainOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.maintainDate }}
            </el-col>
          </el-row>
        </div>
        <!-- ç»´ä¿®åŽçš„确认 -->
        <div v-show="currentStepClick == 4">
          <el-card style="margin-top: 1em; height: 45vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="验收、确认、校准情况:" prop="checkCalSituation" label-width="200"
                :rules="[{required: currentStep === 4, message: '请输入验收、确认、校准情况', trigger: 'blur'}]">
                  <el-input v-model="form.checkCalSituation" type="textarea" size="small" style="width: 100%" :disabled="currentStep !== 4"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.afterMaintenanceOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.afterMaintenanceDate }}
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitForm('3reject')" v-if="currentStep !== 0 && currentStep !== 5"
                   :loading="sumbitLoading1">驳回</el-button>
        <el-button @click="submitForm('2save')" v-if="currentStep === 0" :loading="sumbitLoading2">保存</el-button>
        <el-button type="primary" v-if="currentStep !== 5" @click="submitForm('1submit')" :loading="sumbitLoading3">
          {{ currentStep === 0 ? '提交' : '通过' }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
import {dateFormat} from '../../../util/date'

export default {
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      search: {
        size: 20,
        current: 1,
        total: 0,
        processNumber: ''
      },
      users: [],
      currentStep: 0,
      currentStepClick: 0,
      steps: ['提交', '设备管理员意见', '技术负责人意见', '维修情况记录', '维修后的确认'],
      outLoading: false,
      form: {},
      faultParam: [],
      dialogVisible: false,
      sumbitLoading1: false,
      sumbitLoading2: false,
      sumbitLoading3: false,
    }
  },
  computed: {
    action() {
      return this.javaApi + this.$api.personnel.saveCNASFile
    }
  },
  mounted() {
    this.getTableList(this.clickNodeVal.value)
  },
  methods: {
    //要求修复日期:禁用在故障日期前的日期
    disabledDate(time){
      let selectDate = this.form.faultDate
      if(selectDate){
       let selectTime = new Date(selectDate).getTime() - 28800000
       return time < selectTime
      }
      return false
    },
    //提交表单
    async submitForm(saveState) {
      let currentStepAction;
      // è®¾ç½®è¯¥æ“ä½œåˆ¤æ–­æ˜¯å¦ä¸ºæäº¤ï¼Œä¿å­˜ï¼Œé©³å›žï¼Œé€šè¿‡ å¼€å¯loding
      switch (saveState) {
        // æäº¤ï¼Œé€šè¿‡
        case '1submit':
          currentStepAction = this.currentStep + 1
          this.sumbitLoading1 = true
          break
        // ä¿å­˜
        case '2save':
          currentStepAction = this.currentStep
          this.sumbitLoading2 = true
          break
        // é©³å›ž
        case '3reject':
          currentStepAction = this.currentStep - 1
          this.sumbitLoading3 = true
          break
        default:
          break
      }
      this.$refs.form.validate((valid) => {
        if (valid === true || saveState !== '1submit') {
          // ç»™å½“前环节设置创建人与时间
          let user = JSON.parse(localStorage.getItem('user'))
          const dateTime = dateFormat(new Date())
          // èŽ·å–当前环节操作人与日期
          switch (this.currentStep) {
            case 0:
              this.form.submitUser = user.name
              this.form.submitOperatingPersonnel = user.name
              this.form.submitDate = dateTime
              break
            case 1:
              this.form.adminOperatingPersonnel = user.name
              this.form.adminDate = dateTime
              break
            case 2:
              this.form.technicalOperatingPersonnel = user.name
              this.form.technicalDate = dateTime
              break
            case 3:
              this.form.maintainOperatingPersonnel = user.name
              this.form.maintainDate = dateTime
              break
            case 4:
              this.form.afterMaintenanceOperatingPersonnel = user.name
              this.form.afterMaintenanceDate = dateTime
              break
            default:
              break
          }
          // èŽ·å–当前环节负责人
          switch (saveState === '3reject' ? this.currentStep - 1 : this.currentStep) {
            case 0:
              this.form.currentResponsible = this.form.submitOperatingPersonnel
              break
            case 1:
              this.form.currentResponsible = this.form.departmentOperatingPersonnel
              break
            case 2:
              this.form.currentResponsible = this.form.measuringRoomOperatingPersonnel
              break
            case 3:
              this.form.currentResponsible = this.form.approvalOperatingPersonnel
              break
            default:
              break
          }
          // èŽ·å–当前状态
          this.form.currentState = currentStepAction === 5 ? '关闭' : this.steps[currentStepAction]
          this.form.deviceId = this.clickNodeVal.value
          this.$axios.post(this.$api.deviceCheck.addOrUpdateDeviceFaultOne, this.form, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
            if (res.code == 200) {
              this.$message.success('提交成功')
              this.getTableList(this.clickNodeVal.value)
              this.dialogVisible = false
            }
            this.closeLoading()
          })
        } else {
          let step = this.steps[this.currentStep]
          this.$message.warning(step + '  æµç¨‹ä¸­æœ‰å¿…填项未填！');
          this.closeLoading()
        }
      });
    },
    closeLoading() {
      this.sumbitLoading1 = false
      this.sumbitLoading2 = false
      this.sumbitLoading3 = false
    },
    openRecordAcceptance() {
      // èŽ·å–设备基础信息
      this.$axios.get(this.$api.deviceScope.selectDeviceByCode + '?id=' + this.clickNodeVal.value).then(res => {
        this.form.deviceName = res.data.deviceName
        this.form.manufacturer = res.data.manufacturer
        this.form.specificationModel = res.data.specificationModel
        this.form.managementNumber = res.data.managementNumber
      });
      // èŽ·å–负责人信息
      this.getUserList()
    },
    // èŽ·å–负责人信息接口
    getUserList() {
      this.$axios.get(this.$api.deviceScope.selectUserList).then(res => {
        if (res.code == 200) {
          this.users = res.data
        }
      })
    },
    handleSizeChange(val) {
      this.search.size = val
      this.getTableList(this.clickNodeVal.value);
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.getTableList(this.clickNodeVal.value);
    },
    deleteFile() {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.personnel.deleteCNASFile + "?fileName=" + this.form.systemFileName).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    choiceStep(index) {
      this.currentStepClick = index
    },
    //文档
    handleSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.form.fileName = response.data
        this.$message.success('上传成功')
      } else {
        this.$message.error(response.message)
      }
    },
    onError(error, file, fileList) {
      // æ–‡ä»¶ä¸Šä¼ å¤±è´¥æ—¶çš„处理逻辑
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        return true;
      }
    },
    resetSearch() {
      this.search = {
        size: 20,
        current: 1,
        total: 0,
        processNumber: '',
      }
      this.getTableList(this.clickNodeVal.value);
    },
    //获取所有信息
    getTableList(deviceId) {
      this.$axios.get(this.$api.deviceCheck.deviceFaultOnePage + '?deviceId=' + deviceId + "&size=" + this.search.size + "&current=" + this.search.current + "&processNumber=" + this.search.processNumber).then(res => {
        if (res.code == 200) {
          this.faultParam = res.data.records
          this.search.total = res.data.total
        }
      })
    },
    //导出
    handleDown() {
      this.outLoading = true
      this.$axios.post(this.$api.deviceCheck.exportRewardAndPunishmentRecords, {
        deviceId: this.clickNodeVal.value
      }, {responseType: "blob"}).then(res => {
        this.outLoading = false
        this.$message.success('导出成功')
        const blob = new Blob([res], {type: 'application/octet-stream'});
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '设备故障表.xlsx';
        link.click();
      }).finally(() => {
        this.outLoading = false
      })
    },
    selectAllByOne(row) {
      this.dialogVisible = true;
      this.formData = this.HaveJson(row);
    },
    //添加记录按钮
    addRecode() {
      this.currentStep = 0;
      this.currentStepClick = 0;
    },
    //查看详情
    showDetailsDialog(row) {
      this.form = {...row}
      this.currentStep = this.steps.indexOf(this.form.currentState) === -1 ? 5 : this.steps.indexOf(this.form.currentState)
      this.currentStepClick = this.currentStep === 5 ? 0 : this.currentStep
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.dialogVisible = true
    },
    //删除操作
    handleDeleteClick(index, row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.deviceCheck.deleteDeviceFaultOne + '?id=' + row.id).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getTableList(this.clickNodeVal.value)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getTableList(newVal.value);
      }
    },
    dialogVisible(newVal) {
      if (!newVal) {
        this.form = {}
        this.closeLoading()
        this.currentStep = 0 // æ­¥éª¤æ¡æ˜¾ç¤ºç¬¬å‡ æ­¥
        this.currentStepClick = 0 // ç‚¹å‡»æ­¥éª¤æ¡å˜åŒ–
        this.$refs['form'].clearValidate()
      }
    }
  }
}
</script>

<style scoped>
h4 {
  font-weight: 400;
  font-size: 16px;
  /* display: flex;
  justify-content: space-between; */
  margin: 10px 0;
}

/*
保存提交按钮样式
*/
h4 .title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h4 .title .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}

.tables {
  width: 100%;
  height: calc(100vh - 230px);
}

.el-from {
  max-width: 400px;
  margin: 0 auto;
}

.form-row {
  display: flex;
  justify-content: space-between;
}

.dialogBottom {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
}

.form-operation {
  display: flex;
  justify-content: center;
}

.form-item {
  display: flex;
  margin-right: 100px;
}

.label {
  margin-right: 20px;
  line-height: 40px;
}

.value {
  font-weight: normal;
  line-height: 40px;
}

.form-row .el-form-item {
  flex: 1;
  /* æ¯ä¸ªè¡¨å•é¡¹å æ®ç›¸åŒæ¯”例的空间 */
  margin-right: 100px;
  /* å¯é€‰ï¼šä¸ºå³ä¾§å…ƒç´ æ·»åŠ é—´è· */
}

.search {
  background-color: #fff;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
}

.search_thing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}

.search_label {
  width: 70px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: calc(100% - 120px);
}

.btns {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(0, -50%);
}

.form .search_label {
  width: 120px;
}
</style>

 src/components/do/a6-device/files.vue

@@ -1,416 +1,577 @@
<!-- è®¾å¤‡æ¡£æ¡ˆ -->
<template>
  <div class="page">
    <div class="page-header">
      <h4><span class="line"></span><span>设备档案</span></h4>
      <div class="btns">
        <el-button type="primary" size="small" @click="dialogVisible=true" style="margin-right: 16px;">修订档案</el-button>
        <!-- <el-button type="primary" size="small">添加附件</el-button> -->
        <el-upload
            class="upload-demo"
            :action="action"
            :headers="headers"
            :show-file-list="false"
            :limit="1"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            ref="upload"
            :on-error="onError">
            <el-button size="small" type="primary" :loading="inLoading">添加附件</el-button>
          </el-upload>
        <el-button type="primary" size="small" @click="openEditForm"
          style="">修订档案</el-button>
        <el-button type="primary" size="small" @click="dialogVisible1 = true"
          style="">添加附件</el-button>
        <el-button type="primary" v-if="isPermission('showDeviceQrCodeButton')" size="small" @click="deviceDialog = true"
          style="">查看设备二维码</el-button>
        <el-button type="primary" size="small" @click="handleDownOne"
          style="">导出</el-button>
      </div>
    </div>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-image src="" fit="fill" style="width: 200px;height: 300px;border: 1px solid #000;border-radius: 10px;margin-left: 30px;margin-top: 20px;">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" style="font-size: 40px;"></i>
    <div class="main_div">
      <el-row :gutter="20">
        <el-col :span="6">
          <!-- åŠ æ—¶é—´æˆ³é¿å…æµè§ˆå™¨ç¼“存问题 -->
          <el-image :src="`${javaApi}/img/${Mdata.imageUpload}`" fit="fill" :key="'personalPicture' + timeStamp"
            style="width: 200px;height: 300px;border: 1px solid #000;border-radius: 10px;margin-left: 30px;margin-top: 20px;">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" style="font-size: 40px;"></i>
            </div>
          </el-image>
        </el-col>
        <el-col :span="8">
          <div class="form-item">
            <label>设备名称</label>
            <!-- <p>{{ Mdata.deviceName }}</p> -->
            <el-tooltip
              class="item"
              :content="Mdata.deviceName"
            >
              <span class="text-ellipsis" >{{ Mdata.deviceName }}</span>
            </el-tooltip>
          </div>
        </el-image>
      </el-col>
      <el-col :span="8">
        <div class="form-item">
          <label>设备名称</label>
          <p>{{ handleData('扫描电镜(带能谱)') }}</p>
        </div>
        <div class="form-item">
          <label>大类</label>
          <p>{{ handleData('分析仪器') }}</p>
        </div>
        <div class="form-item">
          <label>内部编号</label>
          <p>{{ handleData('扫描电镜(带能谱)') }}</p>
        </div>
        <div class="form-item">
          <label>生产厂家</label>
          <p>{{ handleData('扫描电镜(带能谱)') }}</p>
        </div>
        <div class="form-item">
          <label>资产编码</label>
          <p>{{ handleData('扫描电镜(带能谱)') }}</p>
        </div>
        <div class="form-item">
          <label>出厂日期</label>
          <p>{{ handleData('2024-7-20') }}</p>
        </div>
        <div class="form-item">
          <label>启用日期</label>
          <p>{{ handleData('2024-7-20') }}</p>
        </div>
        <div class="form-item">
          <label>核准周期(月)</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>检测类型</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>报废时间</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>准确度量值</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>被授权人</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>维修记录</label>
          <p>{{ handleData('12') }}</p>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="form-item">
          <label>规格型号</label>
          <p>{{ handleData('JSM-6010LA') }}</p>
        </div>
        <div class="form-item">
          <div class="form-item">
            <label>设备类型</label>
            <p>{{ Mdata.largeCategory }}</p>
          </div>

          <div class="form-item">
            <label>管理编号</label>
            <p>{{ Mdata.managementNumber }}</p>
          </div>
          <div class="form-item">
            <label>所属部门</label>
            <p>{{ Mdata.laboratoryName }}</p>
          </div>
          <div class="form-item">
            <label>生产厂家</label>
            <!-- <p>{{ Mdata.manufacturer }}</p> -->
            <el-tooltip
              class="item"
              :content="Mdata.manufacturer"
            >
              <span class="text-ellipsis" >{{ Mdata.manufacturer }}</span>
            </el-tooltip>
          </div>
          <div class="form-item">
            <label>资产编码</label>
              <p class="text-ellipsis">{{ Mdata.assetCode }}</p>
          </div>

          <div class="form-item">
            <label>出厂日期</label>
            <p>{{ Mdata.acquisitionDate | formaterDateTime }}</p>
          </div>
          <div class="form-item">
            <label>启用日期</label>
            <p>{{ Mdata.activationDate | formaterDateTime }}</p>
          </div>
          <div class="form-item">
            <label>核准周期(月)</label>
            <p>{{ Mdata.calibrationDate }}</p>
          </div>

          <div class="form-item">
            <label>报废时间</label>
            <p>{{ handleData() }}</p>
          </div>
          <div class="form-item">
            <label>准确度量值</label>
            <el-tooltip
              class="item"
              :content="Mdata.technicalIndicators"
            >
              <span class="text-ellipsis">{{ Mdata.technicalIndicators }}</span>
            </el-tooltip>
            <!-- <p>{{ Mdata.technicalIndicators }}</p> -->
          </div>
          <div class="form-item">
            <label>维修记录</label>
            <p>{{ handleData() }}</p>
          </div>
          <div class="form-item">
            <label>被授权人</label>
            <p>{{ Mdata.authorizedPersonName }}</p>
          </div>

        </el-col>
        <el-col :span="10">
          <div class="form-item">
            <label>规格型号</label>
            <p>{{ Mdata.specificationModel }}</p>
          </div>
          <!-- <div class="form-item">
          <label>细类</label>
          <p>{{ handleData('分析仪器') }}</p>
        </div>
        <div class="form-item">
          <label>设备状态</label>
          <el-radio-group v-model="form.value1" disabled>
            <el-radio :label="0" style="width: 40px;">合格</el-radio>
            <el-radio :label="1" style="width: 40px;">ç»´ä¿®</el-radio>
            <el-radio :label="2" style="width: 40px;">停用</el-radio>
            <el-radio :label="3" style="width: 40px;">报废</el-radio>
          </el-radio-group>
        </div>
        <div class="form-item">
          <label>出厂编号</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>存放点</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>购置日期</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>产地</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>最近溯源日期</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>采购费用(元)</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>停用时间</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>设备负责人</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>验收记录</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>核准证书</label>
          <p>{{ handleData() }}</p>
        </div>
      </el-col>
    </el-row>
    <h4 style="margin-bottom: 10px;margin-top: 10px;"><span class="line"></span><span>附件和相关文档</span></h4>
    <div class="tables">
      <ValueTable ref="ValueTable"
                :url="$api.auxiliaryWorkingHoursDay.selectAuxiliaryWorkingHoursDay"
                :delUrl="$api.auxiliaryWorkingHoursDay.deleteAuxiliaryWorkingHoursDay" :componentData="componentData" :key="upIndex" style="min-height: 400px;"/>
        </div> -->
          <div class="form-item">
            <label>出厂编号</label>
            <p>{{ Mdata.factoryNo }}</p>
          </div>
          <div class="form-items">
              <label>设备状态</label>
              <el-radio-group v-model="Mdata.deviceStatus" style="margin-left: 10px;">
              <el-radio :label="0"  :disabled="Mdata.deviceStatus != 0">正常</el-radio>
              <el-radio :label="1"  :disabled="Mdata.deviceStatus != 1">ç»´ä¿®</el-radio>
              <el-radio :label="2"  :disabled="Mdata.deviceStatus != 2">停用</el-radio>
              <el-radio :label="3"  :disabled="Mdata.deviceStatus != 3">报废</el-radio>
             </el-radio-group>
          </div>
          <div class="form-item">
            <label>存放点</label>
            <p>{{ Mdata.storagePoint }}</p>
          </div>
          <div class="form-item">
            <label>产地</label>
            <p>{{ Mdata.origin }}</p>
          </div>
          <div class="form-item">
            <label>检验项</label>
            <el-tooltip
              class="item"
              effect="dark"
              :content="Mdata.insProductItem"
              placement="top"
            >
              <span class="text-ellipsis" >{{ Mdata.insProductItem }}</span>
            </el-tooltip>
          </div>
          <div class="form-item">
            <label>购置日期</label>
            <p>{{ Mdata.acquisitionDate | formaterDateTime }}</p>
          </div>

          <div class="form-item">
            <label>最近溯源日期</label>
            <p>{{ Mdata.lastCalibrationDate | formaterDateTime }}</p>
          </div>
          <div class="form-item">
            <label>采购费用(元)</label>
            <p>{{ Mdata.unitPrice }}</p>
          </div>
          <div class="form-item">
            <label>停用时间</label>
            <p>{{ Mdata.nextCalibrationDate | formaterDateTime }}</p>
          </div>
          <div class="form-item">
            <label>设备负责人</label>
            <p>{{ Mdata.equipmentManagerName }}</p>
          </div>
          <div class="form-item">
            <label>验收记录</label>
            <p>{{ handleData() }}</p>
          </div>
          <div class="form-item">
            <label>核准证书</label>
            <p>{{ Mdata.calibrateNo }}</p>
          </div>
        </el-col>
      </el-row>
      <h4 style="margin-bottom: 10px;margin-top: 10px;"><span class="line"></span><span>附件和相关文档</span></h4>
      <el-table height="200px" :data="tableDataA">
        <el-table-column header-align="center" align="center" prop="prop" label="序号" type="index" width="60" />
        <el-table-column prop="documentType" label="类型" min-width="100">
          <template v-slot="scope">
            {{ scope.row.documentType === '0' ? '附件' : scope.row.documentType === '1' ? '文档' : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" min-width="150" />
        <el-table-column prop="number" label="编号" min-width="150" />
        <el-table-column prop="version" label="版本" min-width="80" />
        <el-table-column prop="quantity" label="份数" min-width="80" />
        <el-table-column prop="pageCount" label="页码" min-width="80" />
        <el-table-column prop="provider" label="提供者" min-width="150" />
        <el-table-column prop="provideDate" label="提供日期" min-width="150" />
        <el-table-column prop="comments" label="备注" min-width="150" />
        <el-table-column fixed="right" label="操作" min-width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleAttachmentClick(scope.row)">下载附件</el-button>
            <el-button type="text" size="small" @click="handleViewClick(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="handleDeleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="档案修订" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
            <el-row style="display:flex;justify-content: space-around;">
                <!-- å·¦è¾¹å¸ƒå±€ -->
                <el-col :span="7">
                    <el-col>
                        <!-- å›¾ç‰‡ -->
                        <el-image class="img" style="width:100%;height: 320px;marginBottom:16px"
                            :src="javaApi+'/img/'+formData.imageUpload">
                            <div slot="error" class="image-error" style="width: calc(100% -2px);
    <!-- ä¿®è®¢ -->
    <el-dialog title="修订档案" top="5vh" :visible.sync="dialogVisible" width="70%" @open="openFileRevisionDialog"
      :before-close="handleClose">
      <el-row style="display:flex;justify-content: space-around;">
        <!-- å·¦è¾¹å¸ƒå±€ -->
        <el-col :span="7">
          <el-col>
            <!-- å›¾ç‰‡ -->
            <el-image class="img" style="width:100%;height: 320px;margin-bottom:16px"
              :src="javaApi + '/img/' + editData.imageUpload">
              <div slot="error" class="image-error" style="width: calc(100% -2px);
            height: 318px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #EEEEEE;">
                                <i class="el-icon-picture-outline" style="font-size:60px;color:#666666;"></i>
                            </div>
                        </el-image>
                        <!-- è¡¨å• -->
                        <el-form :model="formData" label-width="120px">
                            <el-form-item label="仪器名称:" required>
                            <el-input v-model="formData.deviceName" size="small"></el-input>
                                        </el-form-item>
                            <el-form-item label="仪器名称EN:" required>
                                <el-input v-model="formData.enDeviceName" size="small"></el-input>
                                            </el-form-item>
                            <el-form-item label="规格型号:" required>
                                <el-input v-model="formData.specificationModel" size="small"></el-input>
                                            </el-form-item>
                            <el-form-item label="生产厂家:">
                                <el-input v-model="formData.manufacturer" size="small"></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </el-col>
                                </el-col>
                                <!-- ä¸­é—´å¸ƒå±€ -->
                                <el-col :span="7">
                                    <el-form :model="formData" label-width="116px">
                                        <el-form-item label="校准服务机构:">
                            <el-input v-model="formData.calibrationServices" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="出厂编号:">
                            <el-input v-model="formData.factoryNo" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="管理编号:" required>
                            <el-input v-model="formData.managementNumber" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="购置日期:">
                                            <el-date-picker style="width:100%" v-model="formData.acquisitionDate" type="date"
                                                format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
                                            </el-date-picker>
                                        </el-form-item>
                            <el-form-item label="启用日期:" required>
                                            <el-date-picker style="width:100%" v-model="formData.activationDate" type="date"
                                                format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
                                            </el-date-picker>
                                        </el-form-item>
                            <el-form-item label="管理人:">
                            <el-select v-model="formData.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="formData.storagePoint" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="技术指标:">
                            <el-input v-model="formData.technicalIndicators" :rows="7" type="textarea" size="small"></el-input>
                            </el-form-item>
                    </el-form>
                </el-col>
                <!-- å³è¾¹å¸ƒå±€ -->
                <el-col :span="7">
                    <el-form :model="formData" label-width="140px" ref="ruleForm">
                <i class="el-icon-picture-outline" style="font-size:60px;color:#666666;"></i>
              </div>
            </el-image>
            <!-- è¡¨å• -->
            <el-form :model="editData" label-width="120px" ref="rules1" :rules="rules1">
              <el-form-item label="仪器名称:" prop="deviceName">
                <el-input v-model="editData.deviceName" size="small"></el-input>
              </el-form-item>
              <el-form-item label="仪器名称EN:" prop="enDeviceName">
                <el-input v-model="editData.enDeviceName" size="small"></el-input>
              </el-form-item>
              <el-form-item label="规格型号:" prop="specificationModel">
                <el-input v-model="editData.specificationModel" size="small"></el-input>
              </el-form-item>
              <el-form-item label="生产厂家:">
                <el-input v-model="editData.manufacturer" size="small"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-col>
        <!-- ä¸­é—´å¸ƒå±€ -->
        <el-col :span="7">
          <el-form :model="editData" label-width="116px" ref="rules2" :rules="rules1">
            <el-form-item label="校准服务机构:">
              <el-input v-model="editData.calibrationServices" disabled size="small"></el-input>
            </el-form-item>
            <el-form-item label="资产编码:">
              <el-input v-model="editData.assetCode" size="small"></el-input>
            </el-form-item>
            <el-form-item label="产地:">
              <el-input v-model="editData.origin" size="small"></el-input>
            </el-form-item>
            <el-form-item label="出厂编号:">
              <el-input v-model="editData.factoryNo" size="small"></el-input>
            </el-form-item>
            <el-form-item label="管理编号:" prop="managementNumber">
              <el-input v-model="editData.managementNumber" size="small"></el-input>
            </el-form-item>
            <el-form-item label="购置日期:">
              <el-date-picker style="width:100%" v-model="editData.acquisitionDate" type="date" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="启用日期:" prop="activationDate">
              <el-date-picker style="width:100%" v-model="editData.activationDate" type="date" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="负责人:">
              <el-select v-model="editData.equipmentManager" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in responsiblePersonList" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="存放点:">
              <el-input v-model="editData.storagePoint" size="small"></el-input>
            </el-form-item>
            <el-form-item label="技术指标:">
              <el-input v-model="editData.technicalIndicators" :rows="7" type="textarea" size="small"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- å³è¾¹å¸ƒå±€ -->
        <el-col :span="7">
          <el-form :model="editData" label-width="140px" ref="ruleForm" :rules="rules1">
            <!-- å®žéªŒå®¤åˆ—表 -->
            <el-form-item label="所属部门:">
              <el-select v-model="formData.subordinateDepartmentsId" placeholder="请选择" size="small" style="width:100%">
              <el-select v-model="editData.subordinateDepartmentsId" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in subordinateDepartmentsList" :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="true"
              separator=","
              filterable
              clearable></el-cascader>
              <el-cascader v-model="editData.insProductIds" :options="options" :show-all-levels="false" :props="props"
                placeholder="请选择" size="small" style="width:100%;" :collapse-tags="true" separator="," filterable
                clearable></el-cascader>
            </el-form-item>
            <el-form-item label="最近校准日期:">
                            <el-date-picker style="width:100%" v-model="formData.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-date-picker style="width:100%" v-model="formData.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-date-picker style="width:100%" v-model="Mdata.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-date-picker style="width:100%" v-model="Mdata.nextCalibrationDate" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss" type="date" size="small" placeholder="选择日期">
              </el-date-picker>
            </el-form-item> -->
            <el-form-item label="设备类型:">
              <el-select v-model="formData.largeCategory" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in equipmentList" :key="item.value" :label="item.label"
                  :value="item.value">
              <el-select v-model="editData.largeCategory" 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="formData.unitPrice" size="small"></el-input>
              <el-input v-model="editData.unitPrice" size="small"></el-input>
            </el-form-item>
            <el-form-item label="当前状态:" required>
                            <el-select 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">
                                </el-option>
                            </el-select>
                        </el-form-item>
            <el-form-item label="校准周期（月）:" required>
              <el-input v-model="formData.calibrationDate" size="small"></el-input>
            <el-form-item label="当前状态:" prop="deviceStatus">
              <el-select v-model="editData.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="图片:">
                            <div
                                style="border: 1px solid #DCDFE6;border-radius:4px;height:32px;lineHeight:32px;display:flex;justify-content: space-around;font-size: 13px;">
                                <div v-show="formData.imageName" class="picName">{{formData.imageName}}</div>
                                <el-upload :action="action" :on-success="handleSuccessUpImg2" :show-file-list="false"
                                    accept='image/jpg,image/jpeg,image/png' :headers="headers" :on-change="beforeUpload"
                                    :on-error="onError" ref='upload'>
                                    <el-button type="text" style="height:30px;padding-top:8px">上传</el-button>
                                </el-upload>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-row>
                    <el-button @click="handleClose">取 æ¶ˆ</el-button>
                    <el-button type="primary" @click="submitForm" :loading="upLoad">ç¡® å®š</el-button>
                </el-row>
            </span>
        </el-dialog>
            <el-form-item label="校准周期（月）:" prop="calibrationDate">
              <el-input v-model="editData.calibrationDate" size="small"></el-input>
            </el-form-item>
            <el-form-item label="被授权人:">
              <el-select v-model="editData.authorizedPerson" multiple  placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in responsiblePersonList" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </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;">
                <div v-show="Mdata.imageName" class="picName">{{ Mdata.imageName }}</div>
                <el-upload :action="action" :on-success="handleSuccessUpImg2" :show-file-list="false"
                  accept='image/jpg,image/jpeg,image/png' :headers="headers" :on-change="beforeUpload"
                  :on-error="onError" ref='upload'>
                  <el-button type="text" style="height:30px;padding-top:8px"><span v-if="Mdata.imageName"></span></el-button>
                </el-upload>
              </div> -->

              <div>
                <div v-show="editData.imageName" class="picName">{{ editData.imageName }}</div>
                <el-upload :action="action" :on-success="handleSuccessUpImg2" :show-file-list="false"
                  accept='image/jpg,image/jpeg,image/png' :headers="headers" :on-change="beforeUpload"
                  :on-error="onError" ref='upload' class="avatar-uploader"
                  >
                  <img v-if="editData.imageUpload" :src="javaApi + '/img/' + editData.imageUpload" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-button @click="handleClose">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="submitForm" :loading="upLoad">ç¡® å®š</el-button>
        </el-row>
      </span>
    </el-dialog>
    <el-dialog title="添加设备附件" top="5vh" v-if="dialogVisible1" :visible.sync="dialogVisible1" width="40%">
      <el-form ref="form" :model="addFile" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="维护类型：">
              <el-radio-group v-model="addFile.documentType">
                <el-radio :label="0">附件</el-radio>
                <el-radio :label="1">文档</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="档案名称：">
              <el-input size="small" placeholder="请输入" clearable v-model="addFile.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库号/资产编号:">
              <el-input size="small" placeholder="请输入" clearable v-model="addFile.number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本：">
              <el-input size="small" placeholder="请输入" clearable v-model="addFile.version"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="份数：">
              <el-input-number v-model="addFile.quantity" controls-position="right" style="width: 100%;" size="small"
                :min="0" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="页码：">
              <el-input-number v-model="addFile.pageCount" controls-position="right" style="width: 100%;" size="small"
                :min="0" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提供者：">
              <el-input size="small" placeholder="请输入" clearable v-model="addFile.provider"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归档日期：">
              <el-date-picker type="date" style="width:100%" placeholder="请选择日期" size="small" v-model="addFile.archiveDate"
                format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input type="textarea" :rows="2" size="small" v-model="addFile.comments"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件：" style="float: left;">
              <el-upload class="upload-demo" :action="action" :headers="headers" ref="uploadFile" :on-error="onError"
                :on-remove="handleRemove" :on-success="onSuccess" :before-remove="beforeRemove" multiple :limit="1"
                :on-exceed="handleExceed" :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-button @click="dialogVisible1 = false" size="small">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="saveRecord" size="small" :loading="isLoading">{{ isAddFileUpdate == true ?
            '更新' :
            'ç¡® å®š' }}</el-button>
        </el-row>
      </span>
    </el-dialog>
    <el-dialog
      title="设备二维码"
      :visible.sync="deviceDialog"
       top="5vh"
      width="30%">
      <div style="width:90%;text-align: right;">
        <el-button type="primary" size="mini" @click="clickGeneratePicture">下载图片</el-button>
        <el-button type="primary" size="mini" @click="labelPrint">标签打印</el-button>
      </div>
      <div class="device-main" ref="deviceQrCode" id="deviceCode">
        <div class="device-center" >
          <p class="device-title">{{Mdata.deviceName}}</p>
          <div class="device-footer">
            <div>
                <vueQr class="qr-code" :text="'https://zttx-lims.ztt.cn:8021/lims/qr/qrScan?code='+Mdata.managementNumber+'&type=device'" :size="200" :margin="10"></vueQr>
            </div>
            <div class="device-number">
              <span class="device-text">设备编码:</span>
              <span class="device-text">{{Mdata.managementNumber}}</span>
            </div>
            <div class="device-name">
              <span class="device-text">设备型号:</span>
              <span class="device-text">{{Mdata.specificationModel}}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { MessageBox } from 'element-ui'
import ValueTable from '../../tool/value-table.vue'
import fileDownload from '../../../util/file'
import vueQr from 'vue-qr'
import PrintJS from 'print-js'
import domtoimage from 'dom-to-image';
import {isPermission} from '../../../util/auth'
export default {
  components: {
    ValueTable
  filters:{
    formaterDateTime(dateTime){
      if(dateTime === undefined || dateTime === null || dateTime === ''){
        return dateTime
      }
      return dateTime.split(" ")[0]
    }
  },
  data(){
    return{
      componentData: {
        entity: {
          week: null,
          weekDay: null,
          dateTime: null,
          name:null,
          orderBy: {
            field: 'id',
            order: 'desc'
          }
        },
        isIndex: true,
        showSelect: false,
        select: false,
        isPage:false,
        do: [{
          id: 'getFile',
          font: '附件',
          type: 'text',
          method: 'getFile'
        }, {
          id: 'handleLook',
          font: '查看',
          type: 'text',
          method: 'handleLook'
        },{
          id: 'delete',
          font: '删除',
          type: 'text',
          method: 'doDiy',
          disabFun: (row, index) => {
            return row.state === '已审核' || row.state === '已批准'
          }
        }],
        tagField: {
          shift:{
            select:[]
          },
          state:{
            select:[
              {
                label:'已提交',
                value:'已提交',
                type:'primary'
              },
              {
                label:'已审核',
                value:'已审核',
                type:'warning'
              },
              {
                label:'已批准',
                value:'已批准',
                type:'success'
              },
            ]
          },
          weekDay:{
            select:[]
          }
        },
        linkEvent: {},
        selectField: {
          shift:{
            select:[]
          },
          state:{
            select:[
              {
                label:'已提交',
                value:'已提交',
                type:'primary'
              },
              {
                label:'已审核',
                value:'已审核',
                type:'warning'
              },
              {
                label:'已批准',
                value:'已批准',
                type:'success'
              },
            ]
          },
          weekDay:{
            select:[]
          }
        },
        requiredAdd: [],
        requiredUp: []
            },
      upIndex:0,
      dialogVisible:false,
      inLoading:false,
      form: {
        value1:''
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    ValueTable,
    vueQr
  },
  data() {
    return {
      isPermission:isPermission,
      deviceDialog: false,//查看设备二维码弹框
      rules1: {
        deviceName: [
            { required: true, message: '请输入仪器名称', trigger: 'blur' },
          ],
          enDeviceName: [
            { required: true, message: '请输入仪器名称EN', trigger: 'blur' },
          ],
          specificationModel: [
            { required: true, message: '请输入规格型号', trigger: 'blur' },
          ],
          managementNumber: [
            { required: true, message: '请输入管理编号', trigger: 'blur' },
          ],
          activationDate: [
            { required: true, message: '请输入启用日期', trigger: 'blur' },
          ],
          deviceStatus: [
            { required: true, message: '请输入当前状态', trigger: 'blur' },
          ],
          calibrationDate: [
            { required: true, message: '请输入校准周期(月)', trigger: 'blur' },
          ],
      },
      upLoad:false,
      formData:{},
      responsiblePersonList:[],
      subordinateDepartmentsList:[],
      options:[],
      equipmentList:[],
      deviceStatusList:[],
      props: { multiple: true,emitPath:false,value:'id',label:'name' },
      // dateForm: {

      // },
      fileList: [], // æ·»åŠ é™„件上传文件列表
      timeStamp: '', // ç»™å›¾ç‰‡æ·»åŠ key，在每次加载页面的时候新建时间戳
      equipmentManager: [],
      formLabelWidth: '100px',
      dialogVisible1: false,
      recordNumber: '',
      inLoading: false, // æŽ§åˆ¶ä¸Šä¼ æŒ‰é’®åŠ è½½çŠ¶æ€
      isLoading: false, // æŽ§åˆ¶ç¡®å®šæŒ‰é’®åŠ è½½çŠ¶æ€
      formData: {},
      tableDataA: [],
      num: 1,
      //添加附件数据收集
      addFile: {
        documentType: '', // ç»´æŠ¤ç±»åž‹
        archiveDate: null, // å½’档日期
        name: '', // æ¡£æ¡ˆåç§°
        number: '', // åº“号/资产编号
        version: '', // ç‰ˆæœ¬
        quantity: 1, // ä»½æ•°
        pageCount: 1, // é¡µç 
        provider: '', // æä¾›è€…
        comments: "", // å¤‡æ³¨
        fileName: "", // æ–‡ä»¶åŽŸåç§°
        systemFileName: "", // ç³»ç»Ÿç”Ÿæˆåç§°
      },
      componentData: {
        entity: { name: "", orderBy: { field: "id", order: "asc" } },
        page: { current: "1", size: "80" }
      },
      upIndex: 0,
      dialogVisible: false,
      dialogVisible1: false,
      inLoading: false,
      upLoad: false,
      responsiblePersonList: [],
      subordinateDepartmentsList: [],
      options: [],
      equipmentList: [],
      deviceStatusList: [],
      props: { multiple: true, emitPath: false, value: 'id', label: 'name' },
      // æ”¶é›†è®¾å¤‡æ¡£æ¡ˆæ•°æ®
      Mdata: {
        deviceName: null
      },
      isAddFileUpdate: false,
      editData: {
        authorizedPerson: [],
      },
    }
  },
  computed: {
@@ -423,90 +584,288 @@
      return this.javaApi + this.$api.deviceScope.uploadFile
    }
  },
  mounted(){
    this.selectDevicePrincipal()
    this.obtainItemParameterList()
    this.getInsProductIds()
    this.selectEnumByCategory()
  mounted() {
    // æ”¶é›†æ•°æ®
    this.getList(this.clickNodeVal.value)
    // èŽ·å–相关文档的数据
    this.getPage()
    this.timeStamp = Date.now()
  },
  methods: {
    handleData(m){
      if(m){
      /**
     * å°†é¡µé¢æŒ‡å®šèŠ‚点内容转为图片
     * 1.拿到想要转换为图片的内容节点DOM；
     * 2.转换，拿到转换后的canvas
     * 3.转换为图片
     */
     clickGeneratePicture() {
      const _than = this
      domtoimage.toPng(_than.$refs.deviceQrCode,{ quality: 1,width:440,}).then(function (dataUrl) {
        // å°†è½¬æ¢åŽçš„图像数据存储为 data URL
        fileDownload.downloadIamge(dataUrl,_than.Mdata.deviceName)
      });
    },
    //打印设备二维码
    labelPrint(){
      PrintJS({
            printable: 'deviceCode',//页面
            type: "html",//文档类型
            maxWidth:360,
            css: ['/static/css/device-print.css'],
            style: '@page { size: auto;  margin: 0mm;}',
            targetStyles: ["*"], // ä½¿ç”¨dom的所有样式，很重要
        });
    },
    openFileRevisionDialog() {
      // èŽ·å–档案修订负责人下拉框数据
      this.selectDevicePrincipal()
      // èŽ·å–档案修订所属部门下拉框数据
      this.obtainItemParameterList()
      // èŽ·å–档案修订设备状态下拉框数据
      this.selectEnumByCategory()
      // èŽ·å–档案修订检验项目级联弹框数据
      this.getInsProductIds()
    },
    //附件和相关文档事件
    handleAttachmentClick(row) {
      console.log(row)
      if (row.fileName && row.documentType == 0) {
        const fileUrl = this.javaApi + '/img/' + row.fileName;
        fileDownload.downloadIamge(fileUrl, row.systemFileName)
      } else if (row.fileName && row.documentType == 1) {
        const url = this.javaApi+'/word/'+ row.fileName
        const link = document.createElement('a');
        link.href = url;
        link.download = row.fileName;
        link.click();
        this.$message.success('下载成功')
      } else {
        this.$message.warning('未上传文件！')
      }
    },
    handleViewClick(row) {
      this.isAddFileUpdate = true
      this.addFile = { ...row }
      this.dialogVisible1 = true
      if (row.fileName) {
        const obj = Object.assign({
          name: row.fileName,
          url: row.fileName,
          status: 'success',
          uid: Date.now(),
        })
        this.fileList.push(obj)
      }
    },
    handleDeleteClick(row) {
      // åˆ é™¤é€»è¾‘
      MessageBox.confirm('确定要删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$axios.delete(this.$api.getDocuments.list + "/" + row.id).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getPage()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    saveRecord() {
      //转换数据
      this.addFile.deviceId = this.clickNodeVal.value
      let obj= this.addFile.systemFileName
      this.addFile.systemFileName = obj.name
      this.addFile.fileName = obj.url

      // æ›´æ–°
      if (this.isAddFileUpdate) {
        this.$axios.put(this.$api.getDocuments.updateDocument, this.addFile, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          if (res.code == 200) {
            this.$message.success('更新成功')
            this.dialogVisible1 = false;
            this.getPage()
          }
        })
      } else {
        // æ–°å¢ž
        this.$axios.post(this.$api.getDocuments.list, this.addFile).then(res => {
          if (res.code == 200) {
            this.$message.success('保存成功')
            this.dialogVisible1 = false;
            this.getPage()
          }
        })
      }
    },
    onSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.addFile.systemFileName = response.data
        this.addFile.fileName = file.name
      } else {
        this.$refs.uploadFile.clearFiles()
        this.$message.error('上传失败：' + response.message)
      }
    },
    handleRemove(file, fileList) {
      this.deleteFile(this.addFile.systemFileName)
    },
    deleteFile(fileName) {
      this.$axios.delete(this.$api.personnel.deleteCNASFile + "?fileName=" + fileName).then(res => {
        this.$message.success('删除成功！')
      })
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 ä¸ªæ–‡ä»¶ï¼Œæœ¬æ¬¡é€‰æ‹©äº† ${files.length} ä¸ªæ–‡ä»¶ï¼Œå…±é€‰æ‹©äº† ${files.length + fileList.length} ä¸ªæ–‡ä»¶`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // èŽ·å–相关文档数据的api
    getPage() {
      this.$axios.get(this.$api.getDocuments.get + "/" + this.clickNodeVal.value).then(res => {
        if (res.code == 200)
          this.tableDataA = res.data
      })
    },
    // æ”¶é›†æ•°æ®
    getList(id) {
      this.$axios
        .get(
          this.$api.deviceScope.selectDeviceByCode + "?id=" + id)
        .then(res => {
          // å°†åˆ†ç±»åˆ—表的信息存起来
          if (res.code == 200) {
            this.Mdata = res.data;
            this.Mdata.insProductIds = this.Mdata.insProductIds.split(',')
            this.Mdata.authorizedPerson = JSON.parse(this.Mdata.authorizedPerson)
          }
        });
    },
    handleData(m) {
      if (m) {
        return m
      }else{
      } else {
        return '-'
      }
    },
    handleClose(){
    handleClose() {
      this.dialogVisible = false
    },
    handleSuccess(response,){
      this.inLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功')
        // æ›´æ–°é¡µé¢
      }else{
        this.$message.error(response.message)
      }
    //打开修订档案弹框
    openEditForm(){
      this.editData = JSON.parse(JSON.stringify(this.Mdata))
      this.$nextTick(()=>{
        this.dialogVisible = true
      })
    },
    submitForm(){
      if(!this.formData.deviceName){
          this.$message.error('未输入仪器名称')
    //修订档案
    submitForm() {
      let flag = true
      this.$refs['rules1'].validate((valid) => {
        if (!valid) {
          flag = false;
          return false;
        }
      });
      this.$refs['rules2'].validate((valid) => {
        if (!valid) {
          flag = false;
          return false;
        }
      });
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          flag = false;
          return false;
        }
      });
      if(!flag) {
        return;
      }
      delete this.editData.nextCalibrationDate
      delete this.editData.createTime
      delete this.editData.updateTime
      delete this.editData.createUser
      delete this.editData.updateUser
      delete this.editData.orderBy
      // this.Mdata.equipmentManager = 1;

      this.editData.userAllow = this.equipmentManager.toString();
      this.editData.insProductIds = Array.isArray(this.editData.insProductIds)
        ? this.editData.insProductIds.join(',')
        : '';
      this.upLoad = true;
      this.editData.authorizedPerson = JSON.stringify(this.editData.authorizedPerson)
      this.$axios.post(this.$api.deviceScope.upDeviceParameter, this.editData, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code === 201) {
          this.upLoad = false
          return
        }
        if(!this.formData.enDeviceName){
          this.$message.error('未输入仪器名称EN')
          return
        this.$message.success('修改成功')
        this.upLoad = false
        this.getList(this.clickNodeVal.value)
        this.dialogVisible = false
      }).catch(e => {
        this.$message.error('修改失败')
        this.dialogVisible = false
        this.upLoad = false
      })
    },
    // å¯¼å‡º
    handleDownOne(row) {
      this.outLoading = true
      this.$axios.get(this.$api.deviceCheck.exportDeviceFile + '?deviceId=' + this.clickNodeVal.value, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '设备档案卡.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '设备档案卡.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
        if(!this.formData.specificationModel){
          this.$message.error('未输入规格型号')
          return
        }
        if(!this.formData.managementNumber){
          this.$message.error('未输入管理编号')
          return
        }
        if(!this.formData.activationDate){
          this.$message.error('未输入启用日期')
          return
        }
        if(this.formData.deviceStatus==='' || this.formData.deviceStatus===null){
          this.$message.error('未选择当前状态')
          return
        }
        if(!this.formData.calibrationDate){
          this.$message.error('未输入校准周期（月）')
          return
        }
                delete this.formData.createTime
                delete this.formData.updateTime
                delete this.formData.createUser
                delete this.formData.updateUser
        this.formData.insProductIds = this.formData.insProductIds?this.formData.insProductIds.join():''
        this.upLoad = true;
                this.$axios.post(this.$api.deviceScope.upDeviceParameter, this.formData, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {
                    if (res.code === 201) {
                        this.upLoad = false
                        return
                    }
                    this.$message.success('修改成功')
                    this.upLoad = false
                    this.dialogVisible = false
                }).catch(e => {
                    this.$message.error('修改失败')
                    this.dialogVisible = false
                    this.upLoad = false
                })
      })
    },
    handleSuccessUpImg2(response) {
      if (response.code == 200) {
        this.$nextTick(() => {
          this.formData.imageUpload = response.data.url;
          this.formData.imageName = response.data.name;
          this.editData.imageUpload = response.data.url;
          this.editData.imageName = response.data.name;
          console.log(this.javaApi + 'img/' + this.editData.imageUpload);

        })
      }
    },
@@ -525,21 +884,18 @@
    },
    // èŽ·å–负责人列表
    selectDevicePrincipal() {
      this.$axios.get(this.$api.deviceScope.selectDevicePrincipal).then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.name,
            value: a.id
          })
        })
        this.responsiblePersonList = data
      this.$axios.post(this.$api.user.selectUserList, this.componentData, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        this.responsiblePersonList = res.data.body.records;
      })
    },
    obtainItemParameterList() {
      this.$axios.get(this.$api.laboratoryScope.obtainItemParameterList).then(res => {
        let data = []
        res.data.forEach(a=>{
        res.data.forEach(a => {
          data.push({
            label: a.laboratoryName,
            value: a.id
@@ -548,22 +904,22 @@
        this.subordinateDepartmentsList = data
      })
    },
    getInsProductIds(){
    getInsProductIds() {
      this.$axios.post(this.$api.capacityScope.getInsProduction).then(res => {
        this.options = res.data.map((m,i)=>{
        this.options = res.data.map((m, i) => {
          m.id = m.name;
          return m
        })
        this.options.forEach(item=>{
          if(item.children.length==0){
        this.options.forEach(item => {
          if (item.children.length == 0) {
            item.children = null;
          }else{
            item.children.forEach(m=>{
              if(m.children.length==0){
          } else {
            item.children.forEach(m => {
              if (m.children.length == 0) {
                m.children = null;
              }else{
                m.children.forEach(n=>{
                  if(n.children&&n.children.length==0){
              } else {
                m.children.forEach(n => {
                  if (n.children && n.children.length == 0) {
                    n.children = null;
                  }
                })
@@ -579,8 +935,8 @@
        category: "设备状态"
      }).then(res => {
        this.deviceStatusList = res.data
        this.deviceStatusList.forEach(a=>{
          if(!isNaN(a.value)){
        this.deviceStatusList.forEach(a => {
          if (!isNaN(a.value)) {
            a.value = parseInt(a.value)
          }
        })
@@ -591,59 +947,233 @@
        this.equipmentList = res.data
      })
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getList(newVal.value)
        this.getPage()
      }
    },
    dialogVisible1(newVal) {
      if (newVal == false) {
        this.isAddFileUpdate = false
        this.addFile = {}
        this.fileList = []
      }
    }
  }
}
</script>

<style scoped>
.page{
  width: 100%;
  height: 100%;
.main_div {
  height: calc(100vh - 15em);
  overflow-y: auto;
  overflow-x: hidden;
}
.page-header{

.page {
  width: 100%;
  height: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
h4{

h4 {
  display: flex;
  align-items: center;
}
h4 .line{

h4 .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}
.tables{
  width: calc(100vw - 390px);

.tables {
  width: 100%;
}

.el-image {
  position: relative;
}
.el-icon-picture-outline{

.el-icon-picture-outline {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  transform: translate(-50%, -50%);
}
.form-item{

.form-item {
  line-height: 34px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.form-item label{
  width: 110px;

.text-ellipsis {
  display: inline-block;
  width: 200px;                    /* æˆ–者您可以设置一个具体的宽度值 */
  box-sizing: border-box;         /* ç¡®ä¿padding和border不影响元素的总宽度 */
  white-space: nowrap;            /* ç¦æ­¢æ–‡æœ¬æ¢è¡Œ */
  text-overflow: ellipsis;        /* ä½¿ç”¨çœç•¥å·è¡¨ç¤ºè¢«æˆªæ–­çš„文本 */
  overflow: hidden;               /* éšè—è¶…出容器的内容 */
}

.form-items {
  line-height: 34px;
   /* display: flex; */
  /* align-items: center;  */
  margin-left: 15%;
  font-size: 14px;
}


.form-item label {
  min-width: 130px;
  display: inline-block;
  text-align: right;
  margin-right: 20px;
  color: #999;
}

.form-item p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* è¿™é‡Œè®¾ç½®ä½ æƒ³è¦çš„行数 */
  -webkit-box-orient: vertical;
}

.btns {
  display: flex;
  align-items: center;
}

.search_thing,
.check_thing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.search_label,
.check_label {
  width: 120px;
}

.search_input,
.check_data,
.check_input {
  flex-grow: 1;
}

.avatar-uploader .el-upload {
    border: 1px dashed #190505;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

.device-main{
  width:90%;
  margin:0px 5%;
  height:460px;
  padding:25px 0px;
  background-color: #fff;
}
.device-center{
  width:90%;
  height:460px;
  margin:0px 5%;
  border-radius: 15px;
  background-color: #fff;
  overflow: hidden;
  /* box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.3); */
  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.3))
}
.device-title{
  position: relative;
  top:20px;
  z-index: 2;
  font-size: clamp(1rem, 0.582rem + 1.59vw, 1.475rem);
  font-weight: bold;
  color: #4f6ab2;
  width: 100%;
  height:90px;
  line-height: 100px;
  text-align: center;
}
.device-footer{
  width:100%;
  height:420px;
  background-color: #3361d0;
  position: relative
}
.device-footer::after{
  content: "";
  width: 100%;
    height: 70px;
    position: absolute;
  top:-30px;
  border-radius: 0 0 50% 50%;
  background-color: #fff;
}
.device-footer .qr-code{
  width: 55%;
  height: 200px;
  position: relative;
  top: 60px;
  left:22.5%;
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
}
.device-number{
  width:80%;
  height: 20px;
  margin-left:20%;
  position: relative;
  top: 80px;
}
.device-text{
  color:#fff;
  font-weight: bold;
  font-size:100%;
}
.device-name{
  width:80%;
  margin-left:20%;
  height: 20px;
  position: relative;
  top: 90px;
}
</style>

 src/components/do/a6-device/maintenance.vue

@@ -1,214 +1,329 @@
<!-- è®¾å¤‡ç»´æŠ¤ -->
<template>
  <div>
    <div class="search">
      <div class="search_thing">
        <div class="search_label">关键字：</div>
        <div class="search_input"><el-input size="small" placeholder="请输入" clearable
            v-model="value" @keyup.enter.native="refreshTable()"></el-input></div>
        <div class="search_label">流程编号：</div>
        <div class="search_input"><el-input v-model="search.deviceNumber" clearable placeholder="请输入" size="small"
            @keyup.enter.native="getAllMessage(clickNodeVal.value)"></el-input></div>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
        <el-button size="small" @click="resetSearch">重 ç½®</el-button>
        <el-button size="small" type="primary" @click="getAllMessage(clickNodeVal.value)">查 è¯¢</el-button>
      </div>
      <div class="btns">
        <el-button size="small" type="primary" @click="dialogVisible=true">新建</el-button>
        <el-button size="small" type="primary">导出</el-button>
        <el-button size="small" type="primary" @click="dialogVisible = true; add()">添加维护记录</el-button>
        <el-button :loading="outLoading" size="small" type="primary" @click="handleDownOne">导出</el-button>
      </div>
    </div>
    <div class="tables" style="margin-top: 16px;">
      <ValueTable ref="ValueTable"
                :url="$api.auxiliaryWorkingHoursDay.selectAuxiliaryWorkingHoursDay"
                :delUrl="$api.auxiliaryWorkingHoursDay.deleteAuxiliaryWorkingHoursDay" :componentData="componentData" :key="upIndex"/>
    <div class="tables" style="margin-top: 10px;">
      <el-table ref="table" :data="MaintainParam" height="calc(100vh - 20em)">
        <el-table-column label="序号" type="index" width="120">
          <template v-slot="scope">
            <span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="流程编号" min-width="180" prop="deviceNumber" />
        <el-table-column label="设备名称" min-width="150" prop="deviceName" />
        <el-table-column label="管理编号" min-width="150" prop="managementNumber" />
        <el-table-column label="维护内容" min-width="150" prop="content" />
        <el-table-column label="维护时间" min-width="150" prop="date" />
        <el-table-column label="提交人" min-width="150" prop="name" />
        <el-table-column label="提交日期" min-width="150" prop="date">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="110">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="handleViewClick(scope.row)">查看</el-button>
            <el-button size="small" type="text" @click="handleDeleteClick(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
        :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog
      title="仪器设备维护记录表"
      :visible.sync="dialogVisible"
      width="30%"
      style="max-height: 80vh;margin-top: 10vh;"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <div class="form">
        <div class="search_thing">
          <div class="search_label">设备编号：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
              v-model="value"></el-input></div>
        </div>
        <div class="search_thing">
          <div class="search_label">设备名称：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
              v-model="value"></el-input></div>
        </div>
        <div class="search_thing">
          <div class="search_label">统一编号：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
              v-model="value"></el-input></div>
        </div>
        <div class="search_thing" style="margin: 10px 0;">
          <div class="search_label">维护内容：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
              v-model="value" type="textarea"
              :rows="2"></el-input></div>
        </div>
        <div class="search_thing">
          <div class="search_label">维护时间：</div>
          <div class="search_input">
            <el-date-picker style="width:100%" v-model="value" type="date"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
        <div class="search_thing">
          <div class="search_label">维护类型：</div>
          <div class="search_input">
            <el-radio-group v-model="value">
              <el-radio :label="0">使用前后维护</el-radio>
              <el-radio :label="1">计划中维护</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="search_thing">
          <div class="search_label">下次维护时间：</div>
          <div class="search_input">
            <el-date-picker style="width:100%" v-model="value" type="date"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
        <div class="search_thing">
          <div class="search_label">维护人：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
              v-model="value"></el-input></div>
        </div>
        <div class="search_thing" style="margin: 10px 0;">
          <div class="search_label">备注：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
              v-model="value" type="textarea"
              :rows="2"></el-input></div>
        </div>
      </div>
    <!-- æ–°å»ºç»´æŠ¤ -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible"
      title="添加维护记录"
      top="5vh" width="60%">
      <el-form ref="form" :model="formData" label-width="130px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="流程编号:" prop="deviceNumber">
              <el-input v-model="formData.deviceNumber" clearable disabled size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称:" prop="deviceName">
              <el-input v-model="formData.deviceName" clearable disabled placeholder="请输入" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理编号:" prop="managementNumber">
              <el-input v-model="formData.managementNumber" clearable disabled placeholder="请输入"
                size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :rules="[{ required: true, message: '请输入维护内容', trigger: 'blur' }]" label="维护内容:"
              prop="content">
              <el-input v-model="formData.content" placeholder="请输入" size="small" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请输入维护时间', trigger: 'blur' }]" label="维护时间:" prop="date">
              <el-date-picker v-model="formData.date" format="yyyy-MM-dd" placeholder="选择日期" size="small"
                style="width:100%" type="date" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请输入维护时间', trigger: 'blur' }]" label="维护类型:"
              prop="maintenanceType">
              <el-radio-group v-model="formData.maintenanceType" :disabled="!this.editMode">
                <el-radio :label="0">使用前后维护</el-radio>
                <el-radio :label="1">计划中维护</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请选择下次维护时间', trigger: 'blur' }]" label="下次维护时间:"
              prop="nextDate">
              <el-date-picker
                v-model="formData.nextDate"
                :picker-options="{ disabledDate: this.disabledDate }"
                format="yyyy-MM-dd"
                placeholder="选择日期" size="small"
                style="width:100%"
                type="date"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请输入维护人', trigger: 'blur' }]" label="维护人:" prop="name">
              <el-input v-model="formData.name" clearable placeholder="请输入" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:">
              <el-input v-model="formData.comments" placeholder="请输入" size="small" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="dialogVisible = false">ç¡® å®š</el-button>
        <el-button v-if="editMode" @click="dialogVisible = false">取 æ¶ˆ</el-button>
        <el-button v-if="editMode" type="primary" @click="addRecord">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ValueTable from '../../tool/value-table.vue'
export default {
  components: {
    ValueTable
  },
  data(){
    return {
      value:'',
      componentData: {
        entity: {
          week: null,
          weekDay: null,
          dateTime: null,
          name:null,
          orderBy: {
            field: 'id',
            order: 'desc'
          }
        },
        isIndex: true,
        showSelect: false,
        select: false,
        do: [{
          id: 'handleLook',
          font: '查看',
          type: 'text',
          method: 'handleLook'
        },{
          id: 'delete',
          font: '删除',
          type: 'text',
          method: 'doDiy',
          disabFun: (row, index) => {
            return row.state === '已审核' || row.state === '已批准'
          }
        }],
        tagField: {
          shift:{
            select:[]
          },
          state:{
            select:[
              {
                label:'已提交',
                value:'已提交',
                type:'primary'
              },
              {
                label:'已审核',
                value:'已审核',
                type:'warning'
              },
              {
                label:'已批准',
                value:'已批准',
                type:'success'
              },
            ]
          },
          weekDay:{
            select:[]
          }
        },
        linkEvent: {},
        selectField: {
          shift:{
            select:[]
          },
          state:{
            select:[
              {
                label:'已提交',
                value:'已提交',
                type:'primary'
              },
              {
                label:'已审核',
                value:'已审核',
                type:'warning'
              },
              {
                label:'已批准',
                value:'已批准',
                type:'success'
              },
            ]
          },
          weekDay:{
            select:[]
          }
        },
        requiredAdd: [],
        requiredUp: []
            },
      upIndex:0,
      dialogVisible:true
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods:{
    refreshTable(){}
  data() {
    return {
      search: {
        size: 20,
        current: 1,
        total: 0,
        deviceNumber: ''
      },
      editMode: false,
      dialogVisible: false,
      //表单维护内容
      formData: {},
      //表头显示
      MaintainParam: [],
      outLoading: false
    }
  },
  mounted() {
    this.getAllMessage(this.clickNodeVal.value)
  },
  methods: {
    //下次维护日期:禁用在维护日期前的日期
    disabledDate(time){
      let selectDate = this.formData.date
      if(selectDate){
       let oldDate = new Date(selectDate)
       return time <= oldDate.getTime()
      }
      return false
    },
    handleSizeChange(val) {
      this.search.size = val
      this.getAllMessage(this.clickNodeVal.value)
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.getAllMessage(this.clickNodeVal.value)
    },
    //操作详情查看
    handleViewClick(row) {
      this.editMode = false;
      this.dialogVisible = true;
      this.formData = row;
    },
    // å¯¼å‡º
    handleDownOne() {
      this.outLoading = true
      this.$axios.get(this.$api.deviceCheck.exportMaintenanceRecord + '?deviceId=' + this.clickNodeVal.value, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '设备维护保养记录.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '设备维护保养记录.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    //操作详情删除
    handleDeleteClick(index, row) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.deviceCheck.deviceMaintenanceDelete + '/' + row.id).then(res => {
        })
        this.MaintainParam.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //点击后可编辑
    add() {
      this.$axios.get(this.$api.deviceScope.selectDeviceByCode + '?id=' + this.clickNodeVal.value).then(res => {
        this.formData.deviceName = res.data.deviceName
        this.formData.managementNumber = res.data.managementNumber
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      });
      this.editMode = true;
    },
    //添加维护记录
    addRecord() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.formData.deviceId = this.clickNodeVal.value;
          this.$axios.post(this.$api.deviceCheck.deviceMaintainAdd, this.formData).then(res => {
            if (res.code == 200) {
              this.$message.success('添加成功');
              this.getAllMessage(this.clickNodeVal.value)
            }
          })
          this.MaintainParam.push(this.formData)
          this.dialogVisible = false;
          this.formData = {}; //清空表单
        }
      })
    },
    resetSearch() {
      this.search = {
        size: 20,
        current: 1,
        total: 0,
        deviceNumber: '',
      }
      this.getAllMessage(this.clickNodeVal.value);
    },
    //获取表单设备维护信息
    getAllMessage(deviceId) {
      this.$axios.get(this.$api.deviceCheck.getDeviceMaintenancePage + "?deviceId=" + deviceId + "&size=" + this.search.size + "&current=" + this.search.current + "&deviceNumber=" + this.search.deviceNumber).then(res => {
        if (res.code == 200) {
          this.MaintainParam = res.data.records
          this.search.total = res.data.total
        }
      })
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getAllMessage(newVal.value)
      }
    },
    dialogVisible(newVal) {
      if (newVal === false) {
        this.formData = {}
        this.$refs['form'].clearValidate()
      }
    }
  }
}
</script>

<style scoped>
.tables{
  width: calc(100vw - 390px);
  height: calc(100vh - 230px);
h4 {
  font-weight: 400;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

h4 .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}

.tables {
  width: 100%;
  height: calc(100vh - 17em);
}

.search {
  background-color: #fff;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 10px;
}

.search_thing {
@@ -218,21 +333,30 @@
}

.search_label {
  width: 70px;
  width: 80px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: calc(100% - 120px);
  width: 73%;
}
.btns{

.btns {
  position: absolute;
  right: 40px;
  right: 0px;
  top: 50%;
  transform: translate(0,-50%);
  transform: translate(0, -50%);
}
.form .search_label{

.btns_thing {
  position: absolute;
  right: 230px;
  top: 50%;
  transform: translate(0, -50%);
}

.form .search_label {
  width: 120px;
}
</style>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1041 @@
<!-- è®¾å¤‡å·¥å…·æ˜Žç»† -->
<template>
    <div class="role_manage">
        <div class="search" v-show="!showData">
      <div class="search_thing">
        <div class="search_label">状态：</div>
        <el-select v-model="componentData.entity.deviceStatus" placeholder="全部" size="small">
          <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search_thing">
        <div class="search_label">设备名称：</div>
        <div class="search_input">
          <el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.deviceName"
                    @keyup.enter.native="refreshTable()">
          </el-input>
        </div>
      </div>
      <div class="search_thing">
        <div class="search_label">规格型号：</div>
        <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                                            v-model="componentData.entity.specificationModel"
                                            @keyup.enter.native="refreshTable()"></el-input>
        </div>
      </div>
            <div class="search_thing" style="padding-left: 30px;">
                <el-button size="small" @click="refresh()">重 ç½®</el-button>
                <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
        <el-button size="small" type="primary" @click="dialogVisible2 = true">新 å¢ž</el-button>
        <el-button size="small" type="primary" @click="handleDownOne">导 å‡º</el-button>
            </div>
        </div>
        <div class="table" v-show="!showData">
            <!-- è¯­æ³• å­ç»„件通过 this.$emit +传入方法名 è°ƒç”¨çˆ¶ç»„件方法 ä¾‹å¦‚  this.$emit（selectAllByOne） å°±éœ€åœ¨çˆ¶ç»„件声明并传入  @selectAllByOne="selectAllByOne" -->
            <ValueTable @selectAllByOne="selectAllByOne" @isUpdate="isUpdate" ref="ValueTable"
                :dateFormat="dateFormat"
                :upUrl="$api.deviceScope.upDeviceParameter" :delUrl="$api.deviceScope.delDeviceParameter"
                :componentData="componentData" :key="upIndex" :url="$api.deviceScope.selectDeviceParameter + '?laboratoryNameIsNull=' + laboratoryNameIsNull" />
        </div>
        <el-dialog :title="isUp ? '设备详情' : '档案修订'" :visible.sync="dialogVisible" width="70%"
      top="5vh"
            :before-close="handleClose">
            <el-row style="display:flex;justify-content: space-around;max-height: 75vh;overflow-y: auto;">
                <!-- å·¦è¾¹å¸ƒå±€ -->
                <el-col :span="7">
                    <el-col>
                        <!-- å›¾ç‰‡ -->
                        <el-image class="img" style="width:100%;height: 320px;marginBottom:16px"
                            :src="javaApi + '/img/' + formData.imageUpload">
                            <div slot="error" class="image-error" style="width: calc(100% -2px);
            height: 318px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #EEEEEE;">
                                <i class="el-icon-picture-outline" style="font-size:60px;color:#666666;"></i>
                            </div>
                        </el-image>
                        <!-- è¡¨å• -->
                        <el-form :label-position="labelPosition" :model="formData" label-width="120px">
                            <el-form-item label="仪器名称:" required>
                                <el-input :disabled="isUp" v-model="formData.deviceName" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="仪器名称EN:" required>
                                <el-input :disabled="isUp" v-model="formData.enDeviceName" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="规格型号:" required>
                                <el-input :disabled="isUp" v-model="formData.specificationModel"
                                    size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="生产厂家:">
                                <el-input :disabled="isUp" v-model="formData.manufacturer" size="small"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-col>
                <!-- ä¸­é—´å¸ƒå±€ -->
                <el-col :span="7">
                    <el-form :label-position="labelPosition" :model="formData" label-width="116px">
                        <el-form-item label="校准服务机构:">
                            <el-input :disabled="isUp" v-model="formData.calibrationServices" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="出厂编号:">
                            <el-input :disabled="isUp" v-model="formData.factoryNo" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="管理编号:" required>
                            <el-input :disabled="isUp" v-model="formData.managementNumber" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="购置日期:">
                            <el-date-picker :disabled="isUp" style="width:100%" v-model="formData.acquisitionDate"
                                type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" size="small"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="校准日期:" required>
                            <el-date-picker :disabled="isUp" style="width:100%" v-model="formData.activationDate"
                                type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" size="small"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="管理人:">
                            <el-select v-model="formData.equipmentManager" placeholder="请选择" size="small"
                                style="width:100%">
                                <el-option :disabled="isUp" 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 :disabled="isUp" v-model="formData.storagePoint" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="技术指标:">
                            <el-input :disabled="isUp" v-model="formData.technicalIndicators" :rows="7" type="textarea"
                                size="small"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
                <!-- å³è¾¹å¸ƒå±€ -->
                <el-col :span="7">
                    <el-form :label-position="labelPosition" :model="formData" label-width="140px" ref="ruleForm">
                        <!-- å®žéªŒå®¤åˆ—表 -->
                        <el-form-item label="所属部门:">
                            <el-select :disabled="isUp" v-model="formData.subordinateDepartmentsId" placeholder="请选择"
                                size="small" style="width:100%">
                                <el-option v-for="item in subordinateDepartmentsList" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="检测项目:">
                            <el-cascader :disabled="isUp" v-model="formData.insProductIds" :options="options"
                                :show-all-levels="false" :props="props" placeholder="请选择" size="small"
                                style="width:100%;" :collapse-tags="!isUp" separator="," filterable
                                clearable></el-cascader>
                        </el-form-item>
                        <el-form-item label="最近校准日期:" v-if="isUp">
                            <el-date-picker :disabled="isUp" style="width:100%" v-model="formData.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="下次校准日期:" v-if="isUp">
                            <el-date-picker :disabled="isUp" style="width:100%" v-model="formData.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 :disabled="isUp" v-model="formData.largeCategory" 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 :disabled="isUp" v-model="formData.unitPrice" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="当前状态:" required>
                            <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">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="校准周期（月）:" required>
                            <el-input :disabled="isUp" v-model="formData.calibrationDate" 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;">
                                <div v-show="formData.imageName" class="picName">{{ formData.imageName }}</div>
                                <el-upload :disabled="isUp" :action="action" :on-success="handleSuccessUpImg2"
                                    :show-file-list="false" accept='image/jpg,image/jpeg,image/png' :headers="headers"
                                    :on-change="beforeUpload" :on-error="onError" ref='upload'>
                                    <el-button type="text" style="height:30px;padding-top:8px">上传</el-button>
                                </el-upload>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-row v-if="!isUp">
                    <el-button @click="handleClose">取 æ¶ˆ</el-button>
                    <el-button type="primary" @click="submitForm" :loading="upLoad">ç¡® å®š</el-button>
                </el-row>
            </span>
        </el-dialog>
        <!-- æ–°å¢ž-->
        <el-dialog title="新增设备" top="5vh" :visible.sync="dialogVisible2" width="70%" :before-close="handleClose2">
            <el-row style="display:flex;justify-content: space-around;">
                <!-- å·¦è¾¹å¸ƒå±€ -->
                <el-col :span="7">
                    <el-col>
                        <!-- å›¾ç‰‡ -->
                        <el-image class="img" style="width:100%;height: 320px;margin-bottom:16px"
                            :src="javaApi + '/img/' + formData2.imageUpload">
                            <div slot="error" class="image-error" style="width: calc(100% -2px);
          height: 318px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #EEEEEE;">
                                <i class="el-icon-picture-outline" style="font-size:60px;color:#666666;"></i>
                            </div>
                        </el-image>
                        <!-- è¡¨å• -->
                        <el-form :label-position="labelPosition" :model="formData2" label-width="120px">
                            <el-form-item label="仪器名称:" required>
                                <el-input v-model="formData2.deviceName" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="仪器名称EN:" required>
                                <el-input v-model="formData2.enDeviceName" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="规格型号:" required>
                                <el-input v-model="formData2.specificationModel" 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>
                    </el-col>
                </el-col>
                <!-- ä¸­é—´å¸ƒå±€ -->
                <el-col :span="7">
                    <el-form :label-position="labelPosition" :model="formData2" label-width="110px">
                        <!-- <el-form-item label="生产厂家EN:">
              <el-input v-model="formData2.factoryNo" size="small"></el-input>
            </el-form-item> -->
                        <el-form-item label="校准服务机构:">
                            <el-input v-model="formData2.calibrationServices" 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="管理编号:" required>
                            <el-input v-model="formData2.managementNumber" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="购置日期:">
                            <el-date-picker style="width:100%" v-model="formData2.acquisitionDate" type="date"
                                format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="启用日期:" required>
                            <el-date-picker style="width:100%" v-model="formData2.activationDate" type="date"
                                format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" 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 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.storagePoint" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="技术指标:">
                            <el-input v-model="formData2.technicalIndicators" :rows="7" type="textarea"
                                size="small"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
                <!-- å³è¾¹å¸ƒå±€ -->
                <el-col :span="7">
                    <el-form :label-position="labelPosition" :model="formData2" label-width="120px" ref="ruleForm">
                        <!-- å®žéªŒå®¤åˆ—表 -->
                        <el-form-item label="所属部门:">
                            <el-select v-model="formData2.subordinateDepartmentsId" placeholder="请选择" size="small"
                                style="width:100%">
                                <el-option v-for="item in subordinateDepartmentsList" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="检测项目:">
                            <el-cascader v-model="formData2.insProductIds" :options="options" :show-all-levels="false"
                                :props="props" placeholder="请选择" size="small" style="width:100%" collapse-tags
                                separator="," filterable clearable></el-cascader>
                        </el-form-item>
                        <el-form-item label="设备类型:">
                            <el-select v-model="formData2.largeCategory" 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.unitPrice" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="当前状态:" required>
                            <el-select v-model="formData2.deviceStatus" placeholder="请选择" size="small"
                                style="width:100%">
                                <el-option v-for="item in deviceStatusList" :key="item.id" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="校准周期（月）:" required>
                            <el-input v-model="formData2.calibrationDate" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="图片:">
                            <div
                                style="border: 1px solid #DCDFE6;border-radius:4px;height:32px;line-height:32px;display:flex;justify-content: space-around;font-size: 13px;">
                                <div v-show="formData2.imageName" class="picName">{{ formData2.imageName }}</div>
                                <el-upload :action="action" :on-success="handleSuccessUpImg2" :show-file-list="false"
                                    accept='image/jpg,image/jpeg,image/png' :headers="headers" :on-change="beforeUpload"
                                    :on-error="onError" ref='upload'>
                                    <el-button type="text" style="height:30px;padding-top:8px">上传</el-button>
                                </el-upload>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-row>
                    <el-button @click="handleClose2">取 æ¶ˆ</el-button>
                    <el-button type="primary" @click="submitForm2" :loading="upLoad2">ç¡® å®š</el-button>
                </el-row>
            </span>
        </el-dialog>
        <el-dialog title="数采配置" :visible.sync="dialogVisible3" width="400px">
            <div class="search_thing" style="margin-bottom: 14px;">
                <div class="search_label"><span style="color:red;margin-right: 4px;">*</span>IP：</div>
                <el-input size="small" placeholder="请输入" clearable v-model="configForm.ip"></el-input>
            </div>
            <div class="search_thing" style="margin-bottom: 14px;">
                <div class="search_label"><span style="color:red;margin-right: 4px;">*</span>采集地址：</div>
                <el-input size="small" placeholder="请输入" clearable v-model="configForm.collectUrl"></el-input>
            </div>
            <div class="search_thing" style="margin-bottom: 14px;">
                <div class="search_label"><span style="color:red;margin-right: 4px;">*</span>储存地址：</div>
                <el-input size="small" placeholder="请输入" clearable v-model="configForm.storageUrl"></el-input>
            </div>
            <div class="search_thing" style="margin-bottom: 14px;">
                <div class="search_label"><span style="color:red;margin-right: 4px;">*</span>参照：</div>
                <el-input size="small" placeholder="请输入" clearable v-model="configForm.refer"></el-input>
            </div>
            <div class="search_thing" style="margin-bottom: 14px;">
                <div class="search_label"><span style="color:red;margin-right: 4px;">*</span>X：</div>
                <el-input size="small" placeholder="请输入" clearable v-model="configForm.x"></el-input>
            </div>
            <div class="search_thing" style="margin-bottom: 14px;">
                <div class="search_label"><span style="color:red;margin-right: 4px;">*</span>Y：</div>
                <el-input size="small" placeholder="请输入" clearable v-model="configForm.y"></el-input>
            </div>
            <div class="search_thing">
                <div class="search_label">公式：</div>
                <el-input size="small" placeholder="请输入" clearable v-model="configForm.formula"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-row>
                    <el-button @click="dialogVisible3 = false">取 æ¶ˆ</el-button>
                    <el-button type="primary" @click="submitForm3" :loading="upLoad3">ç¡® å®š</el-button>
                </el-row>
            </span>
        </el-dialog>
        <dataAcquisitionConfig v-if="showData" :deviceId="deviceId" />
    </div>
</template>

<script>
import ValueTable from '../../tool/value-table.vue'
import dataAcquisitionConfig from './acquisition-config.vue'
export default {
    props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
    components: {
        ValueTable,
        dataAcquisitionConfig,
    },
    data() {
        return {
            dateFormat: 'yyyy-MM-dd',
            deviceId: '',
            fileTypeOptions: [
                { label: 'csv', value: '.csv' },
                { label: 'db', value: '.db' },
                { label: 'mdb', value: '.mdb' },
                { label: 'word', value: '.docx' },
                { label: 'excel', value: '.xlsx' },
                { label: 'txt', value: '.txt' },
                { label: 'png', value: '.png' },
            ],
            //是否是档案修订  true不是 false是
            isUp: true,
            formData: {
            },
            formData2: {
                imageUpload: '',
                imageName: ''
            },
            value: '',
            props: { multiple: true, emitPath: false, value: 'id', label: 'name' },
            options: [],
            labelPosition: 'right',
            dialogVisible: false,
            dialogVisible2: false,
            addPower: false,
            showData: false, // æ•°é‡‡é…ç½®é¡µé¢
            tableList: [],
            componentData: {
                entity: {
                    largeCategory: null,
                    orderBy: {
                        field: 'id',
                        order: 'asc'
                    }
                },
                init: false,
                isIndex: true,
                showSelect: false,
                select: false,
                do: [{
                    id: 'delete',
                    font: '删除',
                    type: 'text',
                    method: 'doDiy'
                }, {
                    id: 'archives',
                    font: '档案修订',
                    type: 'text',
                    method: 'isUpdate'
                }, {
                    id: 'handleConfig',
                    font: '数采配置',
                    type: 'text',
                    method: 'handleConfig',
                    disabFun: (row, index) => {
            return row.insProductItem == null || row.insProductItem === ''
                    }
                }],
                headNoShow: ['enDeviceName'],
                tagField: {
                    deviceStatus: {
                        select: []
                    },
                    equipmentManager: {
                        select: []
                    },
                    authorizedPerson: {
                        select: []
                    },
                    insProductIds: {
                        select: []
                    }
                },
                linkEvent: {
                    deviceName: {
                        method: 'selectAllByOne'
                    }
                },
                selectField: {
                    authorizedPerson: {
                        select: [],
                        choose: true
                    },
                    equipmentManager: {
                        select: []
                    },
                    insProductIds: {
                        select: [],
                        choose: true
                    },
                    largeCategory: {
                        select: []
                    },
                },
                requiredAdd: [],
                requiredUp: [],
                needSort: ['deviceName', 'acquisitionDate', 'activationDate', 'lastCalibrationDate', 'nextCalibrationDate', 'deviceStatus'],
            },
            entityCopy: {},
            upIndex: 0,
            addDia: true,
            addPower: true,
            //设备类型列表
            equipmentList: [],
            // è´Ÿè´£äººåˆ—表
            responsiblePersonList: [],
            // æŽˆæƒäººåˆ—表
            authorizerList: [],
            // å½“前状态列表
            deviceStatusList: [],
            // æ‰€å±žéƒ¨é—¨
            subordinateDepartmentsList: [],
            upLoad: false,
            upLoad2: false,
            dialogVisible3: false,
            upLoad3: false,
            configForm: {},
            laboratoryNameIsNull: false
        }
    },
    computed: {
        headers() {
            return {
                'token': sessionStorage.getItem('token')
            }
        },
        action() {
            return this.javaApi + this.$api.deviceScope.uploadFile
        }
    },
    mounted() {
        this.entityCopy = this.HaveJson(this.componentData.entity)
        this.getPower()
        this.selectEnumByCategory()
        this.selectDevicePrincipal()
        this.obtainItemParameterList()
        this.getInsProductIds()
        // this.$customEvents.$on('largeCategory', this.handleNotification);
        // åˆå§‹åŒ–
        this.clickSidebar(this.clickNodeVal)
    },
    methods: {
        //分类
        handleNotification(cate) {
            this.componentData.entity.largeCategory = cate
        },
        obtainItemParameterList() {
            this.$axios.get(this.$api.laboratoryScope.obtainItemParameterList).then(res => {
                let data = []
                res.data.forEach(a => {
                    data.push({
                        label: a.laboratoryName,
                        value: a.id
                    })
                })
                this.subordinateDepartmentsList = data
            })
        },
        refreshTable(e) {
            this.$refs['ValueTable'].selectList(e)
        },
        refresh() {
            this.componentData.entity.deviceStatus = null
      this.componentData.entity.deviceName = null
      this.componentData.entity.specificationModel = null
      this.refreshTable()
            // this.upIndex++
        },
    // å¯¼å‡º
    handleDownOne() {
      this.outLoading = true
      this.$axios.get(this.$api.deviceCheck.exportEquipmentDetails, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '设备仪器一览表.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '设备仪器一览表.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
        // æƒé™åˆ†é…
        getPower(radio) {
            let power = JSON.parse(sessionStorage.getItem('power'))
            let up = false
            let del = false
            let add = false
            let config = false
            for (var i = 0; i < power.length; i++) {
                if (power[i].menuMethod == 'upDeviceParameter') {
                    up = true
                }
                if (power[i].menuMethod == 'delDeviceParameter') {
                    del = true
                }
                if (power[i].menuMethod == 'addDeviceParameter') {
                    add = true
                }
                if (power[i].menuMethod == 'saveDataAcquisitionConfiguration') {
                    config = true
                }
            }
            if (!config) {
                this.componentData.do.splice(2, 1)
            }
            if (!up) {
                this.componentData.do.splice(1, 1)
            }
            if (!del) {
                this.componentData.do.splice(0, 1)
            }
            this.addPower = add
        },
        // èŽ·å–å­—å…¸
        selectEnumByCategory() {
            this.$axios.post(this.$api.enums.selectEnumByCategory, {
                category: "设备状态"
            }).then(res => {
                this.deviceStatusList = res.data
                this.deviceStatusList.forEach(a => {
                    if (!isNaN(a.value)) {
                        a.value = parseInt(a.value)
                    }
                })
                this.componentData.tagField.deviceStatus.select = res.data
            })
            this.$axios.post(this.$api.enums.selectEnumByCategory, {
                category: "设备分类"
            }).then(res => {
                this.equipmentList = res.data
            })
        },
        // èŽ·å–负责人列表
        selectDevicePrincipal() {
            this.$axios.get(this.$api.deviceScope.selectDevicePrincipal).then(res => {
                let data = []
                res.data.forEach(a => {
                    data.push({
                        label: a.name,
                        value: a.id
                    })
                })
                this.responsiblePersonList = data
                this.authorizerList = data
                this.componentData.tagField.equipmentManager = data
                this.componentData.tagField.authorizedPerson = data
            })
        },
        getInsProductIds() {
            this.$axios.post(this.$api.capacityScope.getInsProduction).then(res => {
                this.componentData.tagField.insProductIds.select = []
                this.componentData.selectField.insProductIds.select = []
                this.options = res.data.map((m, i) => {
                    m.id = m.name;
                    let children = m.children.map(n => {
                        n.label = n.name;
                        n.value = n.id;
                        return n
                    })
                    this.componentData.tagField.insProductIds.select = [...this.componentData.tagField.insProductIds.select, ...children]
                    this.componentData.selectField.insProductIds.select = [...this.componentData.selectField.insProductIds.select, ...children]
                    return m
                })
                this.options.forEach(item => {
                    if (item.children.length == 0) {
                        item.children = null;
                    } else {
                        item.children.forEach(m => {
                            if (m.children.length == 0) {
                                m.children = null;
                            } else {
                                m.children.forEach(n => {
                                    if (n.children && n.children.length == 0) {
                                        n.children = null;
                                    }
                                })
                            }
                        })
                    }
                })
            })
        },
        handleClose() {
            this.formData = {}
            this.formData2 = {
                imageUpload: '',
                imageName: ''
            }
            this.dialogVisible = false;
            this.upLoad = false;
        },
        handleClose2() {
            this.formData = {}
            this.formData2 = {
                imageUpload: '',
                imageName: ''
            }
            this.dialogVisible2 = false;
            this.upLoad = false;
        },
        selectAllByOne(row) {
            this.isUp = true
            //打开弹框
            this.dialogVisible = true;
            //row = ç‚¹å‡»å¯¹åº”行值
            //复制给formData
            this.formData = this.HaveJson(row);
            console.log(row.insProductIds + 'valll');
            this.formData.insProductIds = row.insProductIds ? row.insProductIds.split(',') : [];
        },
        isUpdate(row) {
            //修改  isUp ä¸ºæ¡£æ¡ˆä¿®æ”¹
            this.isUp = false
            //打开弹框
            this.dialogVisible = true;
            //row = ç‚¹å‡»å¯¹åº”行值一行值
            //复制给formData
            this.formData = this.HaveJson(row);
            if (typeof (row.insProductIds) === 'number') {
                row.insProductIds = row.insProductIds + ''
            }
            this.formData.insProductIds = row.insProductIds ? row.insProductIds.split(',') : [];
            // å°†æ—¶é—´æ ¼å¼ä¸ºyyyy-MM-dd è¿›è¡Œè½¬æ¢
            const dateRegex = /^\d{4}-\d{2}-\d{2}$/
            Object.keys(this.formData).forEach(key => {
                if(dateRegex.test(this.formData[key])) {
                    this.formData[key] = `${this.formData[key]} 00:00:00`
                }
            })
        },
        beforeUpload(file) {
            if (file.size > 1024 * 1024 * 10) {
                this.$message.error('上传文件不超过10M');
                this.$refs.upload.clearFiles()
                return false;
            } else {
                return true;
            }
        },
        onError(err, file, fileList) {
            this.$message.error('上传失败')
            this.$refs.upload.clearFiles()
        },
        // ä¸Šä¼ å›¾ç‰‡æˆåŠŸ
        handleSuccessUpImg(response,) {
            if (response.code == 200) {
                this.formData.imageUpload = response.data.url;
                this.formData.imageName = response.data.name;
            }
        },
        handleSuccessUpImg2(response) {
            if (response.code == 200) {
                this.$nextTick(() => {
                    this.formData.imageUpload = response.data.url;
                    this.formData.imageName = response.data.name;
                    this.formData2.imageUpload = response.data.url;
                    this.formData2.imageName = response.data.name;
                })
            }
        },
        submitForm() {
            if (!this.formData.deviceName) {
                this.$message.error('未输入仪器名称')
                return
            }
            if (!this.formData.enDeviceName) {
                this.$message.error('未输入仪器名称EN')
                return
            }
            if (!this.formData.specificationModel) {
                this.$message.error('未输入规格型号')
                return
            }
            if (!this.formData.managementNumber) {
                this.$message.error('未输入管理编号')
                return
            }
            if (!this.formData.activationDate) {
                this.$message.error('未输入启用日期')
                return
            }
            if (this.formData.deviceStatus === '' || this.formData.deviceStatus === null) {
                this.$message.error('未选择当前状态')
                return
            }
            if (!this.formData.calibrationDate) {
                this.$message.error('未输入校准周期（月）')
                return
            }
            delete this.formData.createTime
            delete this.formData.updateTime
            delete this.formData.createUser
            delete this.formData.updateUser
            this.formData.insProductIds = this.formData.insProductIds ? this.formData.insProductIds.join() : ''
            this.upLoad = true;
            this.formData.authorizedPerson = JSON.stringify(this.formData.authorizedPerson)
            console.log('this.formData',this.formData);
            this.$axios.post(this.$api.deviceScope.upDeviceParameter, this.formData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(res => {
                if (res.code === 201) {
                    this.upLoad = false
                    return
                }
                this.$message.success('修改成功')
                this.upLoad = false
                this.refreshTable('page')
                this.dialogVisible = false
            }).catch(e => {
                this.$message.error('修改失败')
                this.dialogVisible = false
                this.upLoad = false
            })
        },
        submitForm2() {
            if (!this.formData2.deviceName) {
                this.$message.error('未输入仪器名称')
                return
            }
            if (!this.formData2.enDeviceName) {
                this.$message.error('未输入仪器名称EN')
                return
            }
            if (!this.formData2.specificationModel) {
                this.$message.error('未输入规格型号')
                return
            }
            if (!this.formData2.managementNumber) {
                this.$message.error('未输入管理编号')
                return
            }
            if (!this.formData2.activationDate) {
                this.$message.error('未输入启用日期')
                return
            }
            if (!this.formData2.deviceStatus) {
                this.$message.error('未选择当前状态')
                return
            }
            if (!this.formData2.calibrationDate) {
                this.$message.error('输入校准周期（月）')
                return
            }
            this.upLoad2 = true;
            this.formData2.insProductIds = this.formData2.insProductIds.join()
            this.$axios.post(this.$api.deviceScope.addDeviceParameter, this.formData2, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(res => {
                if (res.code === 201) {
                    this.upLoad2 = false
                    return
                }
                this.$message.success('提交成功')
                this.upLoad2 = false
                this.refreshTable('page')
                this.dialogVisible2 = false
                this.formData2 = {
                    imageUpload: '',
                    imageName: ''
                }
            }).catch(e => {
                this.$message.error('提交失败')
                this.dialogVisible2 = false
                this.upLoad2 = false
            })
        },
        handleConfig(row) {
            let list = []
      if(row.insProductItem){
        list = row.insProductItem.split(';')
      }
            let list2 = []
            list.map((item) => {
        const obj = Object.assign({
          deviceId: row.id,
                    insProductItem: item,
                })
                list2.push(obj)
            })
            this.tableList = list2
            this.deviceId = row.id
      this.$nextTick(()=>{
        this.showData = true
      })
        },
        closeDataVue() {
      this.clickSidebar(this.clickNodeVal)
            this.showData = false
        },
        submitForm3() {
            if (!this.configForm.ip) {
                this.$message.error('请填写IP');
                return
            }
            if (!this.configForm.collectUrl) {
                this.$message.error('请填写采集地址');
                return
            }
            if (!this.configForm.storageUrl) {
                this.$message.error('请填写储存地址');
                return
            }
            if (!this.configForm.refer) {
                this.$message.error('请填写参照');
                return
            }
            if (!this.configForm.x) {
                this.$message.error('请填写X');
                return
            }
            if (!this.configForm.y) {
                this.$message.error('请填写Y');
                return
            }

            this.upLoad3 = true
            this.$axios.post(this.$api.deviceScope.numberCollect, this.configForm, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(res => {
                this.upLoad3 = false
                if (res.code === 201) {
                    return
                }
                this.$message.success('操作成功')
                this.refreshTable('page')
                this.dialogVisible3 = false
            }).catch(e => {
                this.$message.error('操作失败')
                this.dialogVisible3 = false
                this.upLoad3 = false
            })
        },
        // ç‚¹å‡»ä¾§è¾¹æ åˆ·æ–°
        clickSidebar(clickNodeVal) {
            this.laboratoryNameIsNull = false
            // æ˜¯å¦å­˜åœ¨value，存在value代表为三级
            if (!clickNodeVal.value) {
                this.list = [];
                this.componentData.entity.laboratoryName = null
                this.componentData.entity.storagePoint = null
                // ç­‰äºŽ1代表为树的一级，label为部门
                if (clickNodeVal.label == '其他') {
                this.laboratoryNameIsNull = true
                this.refreshTable('page')
                return
                }
                if (clickNodeVal.level == 1) {
                this.componentData.entity.laboratoryName = clickNodeVal.label
                // ç­‰äºŽäºŒçº§ã€‚label为存储地点
                } else if (clickNodeVal.level == 2) {
          // å…¶ä»–表示没有配置实验室，只配置了地点
          if (clickNodeVal.parent.label == '其他') {
            this.laboratoryNameIsNull = true
          } else {
            this.componentData.entity.laboratoryName = clickNodeVal.parent.label
          }
          this.componentData.entity.storagePoint = clickNodeVal.label
                }
                this.refreshTable('page')
            }
        }
    },
    watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      this.clickSidebar(newVal)
    }
  }
}
</script>

<style scoped>
.role_manage {
    width: 100%;
    height: 100%;
}

.title {
    line-height: 15px;
}

.search {
    display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.search_thing {
    width: 17em;
    display: flex;
    align-items: center;
}

.search_label {
    width: 110px;
    font-size: 14px;
    text-align: right;
}

.search_input {
    width: calc(100% - 110px);
}

.table {
    margin-top: 12px;
    background-color: #fff;
    height: calc(100vh - 17em);
}

.el-form-item {
    margin-bottom: 16px;
}

.picName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    width: 120px;
}
</style>

 src/components/do/a6-device/operation-instruction.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,562 @@
<!-- ä½œä¸šæŒ‡å¯¼ä¹¦ -->
<template>
  <div>
    <div style="width:100%;height:30px;margin:5px 0px">
      <el-row>
        <el-col :span="12" style="text-align: left;">
          <p style="line-height: 30px;">作业指导书</p>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button size="small" type="primary" @click="getList">刷新</el-button>
          <el-button size="small" type="primary" @click="dialogVisible = true">受控申请</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="tableData" border height="calc(100vh - 18em)">
      <el-table-column type="index" label="序号" width="120">
        <template v-slot="scope">
          <span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请编号" min-width="150" prop="applicationNumber"></el-table-column>
      <el-table-column label="设备名称" min-width="150" prop="deviceName"></el-table-column>
      <el-table-column label="设备编号" min-width="150" prop="deviceNumber"></el-table-column>
      <el-table-column label="设备型号" min-width="150" prop="deviceModel"></el-table-column>
      <el-table-column label="文件编号" min-width="150" prop="documentNumber"></el-table-column>
      <el-table-column label="文件名字" min-width="150" prop="fileName"></el-table-column>
      <el-table-column label="文档说明" min-width="150" prop="documentNote"></el-table-column>
      <el-table-column label="上传人" min-width="150" prop="uploaderName"></el-table-column>
      <el-table-column label="上传时间" min-width="150" prop="updateTime"></el-table-column>
      <el-table-column label="生效时间" min-width="150" prop="entryIntoForceTime"></el-table-column>
      <el-table-column label="审批人" min-width="150" prop="approverName"></el-table-column>
      <el-table-column label="审批状态" min-width="150" prop="status">
        <template v-slot="scope">
          {{scope.row.status === true ? '通过' : scope.row.status === false ? '不通过' : '未审核'}}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180" fixed="right" prop="name">
        <template v-slot="scope">
          <el-button type="text" size="small" @click="downloadFile(scope.row.fileSystemName)">下载</el-button>
          <el-button type="text" size="small" style="color: red;" @click="deleteHomeworkGuidebook(scope.row)">删除</el-button>
          <el-button type="text" size="small" @click="instructionEditFun(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="approval(scope.row)">审批</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
                   :page-sizes="[10, 20, 30, 50, 100]" :page-size="search.size"
                   layout="->,total, sizes, prev, pager, next, jumper"
                   :total="search.total">
    </el-pagination>
    <el-dialog :visible.sync="dialogVisible" title="受控申请" width="60%">
      <div style="height: 60vh; overflow-y: auto; overflow-x: hidden;">
        <el-form ref="form1" label-width="110px" :model="instructionForm">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="申请编号:">
                <el-input v-model="instructionForm.applicationNumber" disabled size="small" clearable></el-input>
              </el-form-item>
              <el-form-item label="附件：" style="float: left;">
                <el-upload ref="uploadFile" :action="action" :before-remove="beforeRemove" :file-list="fileList1"
                           :headers="headers"
                           :limit="1" :on-error="onError" :on-exceed="handleExceed" :on-remove="handleRemove1"
                           :on-success="onSuccess1"
                           class="upload-demo" multiple>
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请部门:">
                <el-input v-model="instructionForm.applicationDepartment" clearable size="small"></el-input>
              </el-form-item>
              <el-form-item label="责任人:">
                <el-input v-model="instructionForm.personLiable" clearable size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="受控申请说明:" prop="controlledApplicationDescription"
                            :rules="[{required: true, message: '请输入受控申请说明', trigger: 'blur'}]">
                <el-input v-model="instructionForm.controlledApplicationDescription" type="textarea"
                          clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="text-align: right; margin-bottom: 10px">
          <el-button size="small" type="primary" @click="dialogVisible1 = true">添加受控文件</el-button>
          <el-button size="small" @click="delFile">删除</el-button>
        </div>
        <el-table :data="documentTableData" border style="width: 100%;"
                  tooltip-effect="dark"
                  :row-key="getRowKey"
                  @selection-change="handleSelectionChange" height="30em">
          <el-table-column type="selection" width="55%">
          </el-table-column>
          <el-table-column label="序号" prop="id" type="index" width="60"></el-table-column>
          <el-table-column label="设备名称" prop="deviceName" show-overflow-tooltip min-width="125"></el-table-column>
          <el-table-column label="设备编号" prop="deviceNumber" show-overflow-tooltip min-width="125"></el-table-column>
          <el-table-column label="设备型号" prop="deviceModel" show-overflow-tooltip min-width="125"></el-table-column>
          <el-table-column label="文件编号" prop="documentNumber" show-overflow-tooltip
                           min-width="125"></el-table-column>
          <el-table-column label="文件名称" prop="fileName" show-overflow-tooltip min-width="125"></el-table-column>
          <el-table-column label="上传人" prop="author" show-overflow-tooltip min-width="125"></el-table-column>
          <el-table-column label="上传时间" prop="updateTime" show-overflow-tooltip min-width="125"></el-table-column>
          <el-table-column min-width="100" label="操作" fixed="right">
            <template #default="{row, $index}">
              <el-button type="text" size="small" @click="downloadFile(row.fileSystemName)">下载</el-button>
              <el-button type="text" @click="editFun(row, $index)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer">
        <el-button @click="dialogVisible = false" size="small">取 æ¶ˆ</el-button>
        <el-button size="small" type="primary" @click="submitFun">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible1" title="添加设备作业指导书" width="40%">
      <div style="height: 50vh;">
        <el-form ref="form" :model="form" label-width="90px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="文件类型:" prop="documentType"
                            :rules="[{required: true, message: '请输入文件类型', trigger: 'blur'}]">
                <el-input v-model="form.documentType" clearable size="small" placeholder="请输入文件类型"></el-input>
              </el-form-item>
              <el-form-item label="设备名称:" prop="deviceName"
                            :rules="[{required: true, message: '请选择设备', trigger: 'change'}]">
                <el-select v-model="form.deviceName" size="small" clearable style="width: 100%"
                           placeholder="请选择设备名称"
                           @change="onDeviceNameChange" filterable>
                  <el-option v-for="item in deviceNameOption"
                             :key="item.id"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文档编号:" prop="documentNumber"
                            :rules="[{required: true, message: '请输入文档编号', trigger: 'blur'}]">
                <el-input v-model="form.documentNumber" size="small" clearable placeholder="请输入文档编号"></el-input>
              </el-form-item>
              <el-form-item label="管理编号:">
                <el-input v-model="form.deviceNumber" size="small" clearable disabled
                          placeholder="请输入管理编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文件版本:" prop="documentVersion"
                            :rules="[{required: true, message: '请输入文件版本', trigger: 'blur'}]">
                <el-input v-model="form.documentVersion" size="small" placeholder="请输入文件版本" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作者:" prop="author"
                            :rules="[{required: true, message: '请输入作者', trigger: 'blur'}]">
                <el-input v-model="form.author" size="small" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="提交日期:" prop="submitDate"
                            :rules="[{required: true, message: '请选择提交日期', trigger: 'change'}]">
                <el-date-picker v-model="form.submitDate" format="yyyy-MM-dd" style="width: 100%" size="small" clearable
                                placeholder="选择日期"
                                type="date" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="文档说明:" prop="documentNote"
                            :rules="[{required: true, message: '请输入文档说明', trigger: 'blur'}]">
                <el-input v-model="form.documentNote" placeholder="请输入文档说明" type="textarea" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="附件：" style="float: left;">
                <el-upload ref="uploadFile" :action="action" :before-remove="beforeRemove" :file-list="fileList"
                           :headers="headers"
                           :limit="1" :on-error="onError" :on-exceed="handleExceed" :on-remove="handleRemove"
                           :on-success="onSuccess"
                           class="upload-demo" multiple>
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="dialogVisible1 = false" size="small">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="addFile" size="small">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import fileDownload from "../../../util/file";

export default {
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  name: '',
  components: {},
  data() {
    return {
      search: {
        size: 20,
        current: 1,
        total: 0
      },
      dialogVisible: false,
      dialogVisible1: false,
      value: '',
      selectRow: null,
      device: null,
      form: {
        documentType: '',
        documentNumber: '',
        deviceName: '',
        deviceModel: '',
        deviceNumber: '',
        fileName: '',
        fileSystemName: '',
        submitDate: '',
        documentNote: '',
      },
      tableData: [],
      documentTableData: [],
      formData: {},
      fileList: [],
      fileList1: [],
      laboratoryNameIsNull: false,
      devices: [], //设备列表数据
      deviceNameOption: [], //设备名称下拉框数据
      entity: {
        deviceName: null,
        laboratoryName: '',
        storagePoint: ''
      },
      selectedRow: [],
      instructionForm: {
        applicationNumber: '', // ç”³è¯·ç¼–号
        applicationDepartment: '', // ç”³è¯·éƒ¨é—¨
        personLiable: '', // è´£ä»»äºº
        controlledApplicationDescription: '', // å—控申请说明
      }
    }
  },
  mounted() {
    this.getAllDevice();
    this.getList()
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal) {
        this.getList()
        this.clickSidebar(newVal)
      }
    },
    dialogVisible1(newVal) {
      this.form.deviceName = this.clickNodeVal.label
      this.onDeviceNameChange()
      if (newVal === false) {
        this.$refs.form.resetFields()
        // this.form = {}
        this.fileList = []
      }
    },
    dialogVisible(newVal) {
      if (newVal === false) {
        this.instructionForm = {}
        this.documentTableData = []
        this.fileList1 = []
      }
    }
  },
  methods: {
    approval(row) {
      this.$confirm('是否审批通过！', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '不通过',
        type: 'warning'
      }).then(() => {
        this.approvalFun(row.id, true)
      }).catch(() => {
        this.approvalFun(row.id, false)
      });
    },
    approvalFun(id, status) {
      this.$axios.get(this.$api.deviceCheck.approvalOfHomeworkInstructionManual + "?id=" + id + "&status=" + status).then(res => {
        this.getList()
      })
      this.$message({
        type: 'success',
        message: '操作成功!'
      });
    },
    getRowKey (row) {
      return row.index
    },
    deleteHomeworkGuidebook(row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.deviceCheck.homeworkGuidebook + "?id=" + row.id + "&instructionId=" + row.instructionId).then(res => {
          this.$message.success('删除成功！')
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    downloadFile(fileName) {
      let state = /\.(jpg|jpeg|png|gif)$/i.test(fileName)
      if (state) {
        let url = this.javaApi + '/img/' + fileName;
        fileDownload.downloadIamge(url, fileName)
      } else {
        const url = this.javaApi+'/word/'+ fileName
        const link = document.createElement('a');
        link.href = url;
        link.download = fileName;
        link.click();
        this.$message.success('下载成功')
      }
    },
    instructionEditFun(row) {
      this.dialogVisible = true
      this.$axios.get(this.$api.deviceCheck.homeworkGuidebookEditor + "?instructionId=" + row.instructionId).then(res => {
        if (res.code == 200) {
          this.instructionForm = res.data.instruction;
          if (this.instructionForm.fileSystemName) {
            this.fileList1.push({name: this.instructionForm.fileName})
          }
          this.documentTableData = res.data.list;
          // åˆ é™¤ç”¨
          this.documentTableData.forEach((v, k) => {
            v.index = k
          })
        }
      })
    },
    handleSizeChange(val) {
      this.search.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.getList()
    },
    submitFun() {
      this.$refs.form1.validate((valid) => {
        if (valid) {
          this.instructionForm.feTempHumRecordList = this.documentTableData
          this.$axios.post(this.$api.deviceCheck.newHomeworkGuidebookAdded, this.instructionForm, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
            if (res.code == 200) {
              this.$message.success('操作成功！')
              this.dialogVisible = false
              this.getList()
            }
          })
        } else {
          return false;
        }
      });
    },
    clickSidebar(clickNodeVal) {
      this.laboratoryNameIsNull = false
      // æ˜¯å¦å­˜åœ¨value，存在value代表为三级
      if (!clickNodeVal.value) {
        this.list = [];
        this.entity.laboratoryName = null
        this.entity.storagePoint = null
        // ç­‰äºŽ1代表为树的一级，label为部门
        if (clickNodeVal.label === '其他') {
          this.laboratoryNameIsNull = true
          this.getAllDevice()
          return
        }
        if (clickNodeVal.level === 1) {
          this.entity.laboratoryName = clickNodeVal.label
          // ç­‰äºŽäºŒçº§ã€‚label为存储地点
        } else if (clickNodeVal.level === 2) {
          // å…¶ä»–表示没有配置实验室，只配置了地点
          if (clickNodeVal.parent.label === '其他') {
            this.laboratoryNameIsNull = true
          } else {
            this.entity.laboratoryName = clickNodeVal.parent.label
          }
          this.entity.storagePoint = clickNodeVal.label
        }
        this.getAllDevice()
      }
    },
    //新增
    addFile() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.index !== undefined) {
            this.$set(this.documentTableData, this.form.index, this.form)
            this.dialogVisible1 = false;
            this.$message.success('修改成功');
          } else {
            this.documentTableData.push(this.form);
            // åˆ é™¤ç”¨
            this.documentTableData.forEach((v, k) => {
              v.index = k
            })
            this.dialogVisible1 = false;
            this.$message.success('添加成功');
          }
        } else {
          return false;
        }
      });
    },
    editFun(row, index) {
      this.form = {...row}
      // æ›´æ–°ç”¨
      this.form.index = index;
      // å›žæ˜¾åˆ—表
      if (this.form.fileSystemName) {
        this.fileList.push({name: this.form.fileName})
      }
      this.dialogVisible1 = true
    },
    handleSelectionChange(selected) {
      this.selectedRow = selected
    },
    async delFile() {
      if (this.selectedRow.length === 0) {
        this.$message.error('请选择要删除的选项');
        return;
      }
      // åˆ é™¤ä¿å­˜å¥½çš„数据
      let ids = this.selectedRow
        .filter(item => item.id!== undefined)
        .map(item => item.id).join(',');
      //有错误
      const res = await this.$axios.get(this.$api.deviceCheck.deleteHomeworkGuidebook + '?ids=' + ids);
      if (res.code === 200) {
        // åˆ é™¤è§†å›¾çš„数据
        for (const resKey in this.selectedRow) {
          this.documentTableData = this.documentTableData.filter(item => item.index === this.selectedRow[resKey].index)
        }
        this.$message.success({
          message: '删除成功',
          type: 'success'
        });
      }
    },
    onSuccess(response, file, fileList) {
      this.form.fileName = file.name;
      this.form.fileSystemName = response.data;
    },
    onSuccess1(response, file, fileList) {
      this.instructionForm.fileName = file.name;
      this.instructionForm.fileSystemName = response.data;
    },
    onError(error, file, fileList) {
      this.$message.error('上传失败:', error, file, fileList);
    },
    handleRemove(file, fileList) {
      this.form.fileName = ''
      this.form.fileSystemName = ''
    },
    handleRemove1(file, fileList) {
      this.form.fileName = ''
      this.form.fileSystemName = ''
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 ä¸ªæ–‡ä»¶ï¼Œæœ¬æ¬¡é€‰æ‹©äº† ${files.length} ä¸ªæ–‡ä»¶ã€‚`);
    },
    getList() {
      this.$axios.get(this.$api.deviceCheck.pageByPageQueryOfHomeworkInstructions + "?size=" + this.search.size + "&current=" + this.search.current).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.search.total = res.data.total
        }
      })
    },
    getAllDevice() {
      this.$axios.post(this.$api.deviceScope.selectDeviceParameter + "?laboratoryNameIsNull=" + this.laboratoryNameIsNull, {
        page: {
          current: 1,
          size: -1
        },
        entity: this.entity
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code == 200) {
          this.devices = res.data.body.records;
          this.updateDeviceNameOptions();
        }
      })
    },
    // æ›´æ–°è®¾å¤‡åç§°ä¸‹æ‹‰æ¡†çš„选项
    updateDeviceNameOptions() {
      this.deviceNameOption = this.devices.map(device => ({
        value: device.deviceName,
        label: device.deviceName
      }));
    },
    // è®¾å¤‡åç§°æ”¹å˜æ—¶è§¦å‘
    onDeviceNameChange() {
      // æ ¹æ®é€‰ä¸­çš„设备名称，更新管理编号下拉框的选项
      const selectedDevice = this.devices.find(device => device.deviceName === this.form.deviceName);
      if (selectedDevice) {
        this.form.deviceNumber = selectedDevice.managementNumber;
        this.form.deviceModel = selectedDevice.specificationModel;
        this.form.deviceId = selectedDevice.id
      }
    },
  },
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
    },
    action() {
      return this.javaApi + this.$api.personnel.saveCNASFile
    }
  },
}
</script>

<style scoped>

h4 {
  font-weight: 400;
  font-size: 16px;
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
</style>

 src/components/do/a6-device/operation-overview.vue

@@ -1,100 +1,65 @@
<!-- è®¾å¤‡è¿è¡Œæ€»è§ˆ -->
<template>
  <div class="page">
    <echart-module :id="'page-left'" :config="chartConfig" :datas="chartData" class="page-left"></echart-module>
    <div class="page-right">
      <div class="form-item">
        <label>故障次数</label>
        <span>0</span>
      </div>
      <div class="form-item">
        <label>最近故障日期</label>
        <el-date-picker
          v-model="form.value1"
          type="date"
          size="small"
          placeholder="选择日期" style="width: calc(100% - 200px);" readonly>
        </el-date-picker>
      </div>
      <div class="form-item">
        <label>最近校准日期</label>
        <el-date-picker
          v-model="form.value1"
          type="date"
          size="small"
          placeholder="选择日期" style="width: calc(100% - 200px);" readonly>
        </el-date-picker>
      </div>
      <div class="form-item">
        <label>下次校准日期</label>
        <el-date-picker
          v-model="form.value1"
          type="date"
          size="small"
          placeholder="选择日期" style="width: calc(100% - 200px);" readonly>
        </el-date-picker>
      </div>
      <div class="form-item">
        <label>校准总结论</label>
        <el-radio-group v-model="form.value1" disabled>
          <el-radio :label="0">合格</el-radio>
          <el-radio :label="1">不合格</el-radio>
          <el-radio :label="2">其他</el-radio>
        </el-radio-group>
      </div>
      <div class="form-item">
        <label>最近核查日期</label>
        <el-date-picker
          v-model="form.value1"
          type="date"
          size="small"
          placeholder="选择日期" style="width: calc(100% - 200px);" readonly>
        </el-date-picker>
      </div>
      <div class="form-item">
        <label>下次核查日期</label>
        <el-date-picker
          v-model="form.value1"
          type="date"
          size="small"
          placeholder="选择日期" style="width: calc(100% - 200px);" readonly>
        </el-date-picker>
      </div>
      <div class="form-item">
        <label>核查总结论</label>
        <el-radio-group v-model="form.value1" disabled>
          <el-radio :label="0">合格</el-radio>
          <el-radio :label="1">不合格</el-radio>
          <el-radio :label="2">其他</el-radio>
        </el-radio-group>
      </div>
      <div class="form-item">
        <label>最近维护日期</label>
        <el-date-picker
          v-model="form.value1"
          type="date"
          size="small"
          placeholder="选择日期" style="width: calc(100% - 200px);" readonly>
        </el-date-picker>
      </div>
      <div class="form-item">
        <label>下次维护日期</label>
        <el-date-picker
          v-model="form.value1"
          type="date"
          size="small"
          placeholder="选择日期" style="width: calc(100% - 200px);" readonly>
        </el-date-picker>
      </div>
      <div class="form-item">
        <label>维护类型</label>
        <el-radio-group v-model="form.value1" disabled>
          <el-radio :label="0">使用前后维护</el-radio>
          <el-radio :label="1">计划中维护</el-radio>
        </el-radio-group>
      </div>
      <div class="form-item">
        <label>测量项目</label>
        <span>1111111</span>
  <div>
    <div class="page">
      <echart-module id="'page-left'" :config="chartConfig" :datas="chartData" class="page-left"></echart-module>
      <div class="page-right">
        <div class="form-item">
          <label>启用时长(å¹´)</label>
          <span>{{deviceData.usedYears}}</span>
        </div>
        <div class="form-item">
          <label>故障次数</label>
          <span>{{deviceData.faultCount}}</span>
        </div>
        <div class="form-item">
          <label>最近故障日期</label>
          <span>{{ deviceData.faultDate }}</span>
        </div>
        <div class="form-item">
          <label>最近校准日期</label>
        <span>{{deviceData.lastCalibrationDate }}</span>
        </div>
        <div class="form-item">
          <label>下次校准日期</label>
        <span>{{deviceData.nextCalibrationDate}}</span>
        </div>
        <div class="form-item">
          <label>校准总结论</label>
          <span :class="formatColorStyle(deviceData.calibrateStatus)">{{ deviceData.calibrateStatus }}</span>
        </div>
        <div class="form-item">
          <label>最近核查日期</label>
        <span>{{deviceData.lastExamineDate}}</span>
        </div>
        <div class="form-item">
          <label>下次核查日期</label>
          <span>{{deviceData.nextExamineDate}}</span>
        </div>
        <div class="form-item">
          <label>核查总结论</label>
          <span :class="formatColorStyle(deviceData.examineStatus)">{{deviceData.examineStatus}}</span>
        </div>
        <div class="form-item">
          <label>设备运行状态</label>
          <span :class="formatColorStyle(deviceData.deviceStatus)">{{deviceData.deviceStatus}}</span>
        </div>
        <div class="form-item">
          <label>最近维护日期</label>
        <span>{{ deviceData.maintenanceDate }}</span>
        </div>
        <div class="form-item">
          <label>下次维护日期</label>
          <span>{{ deviceData.nextMaintenanceDate }}</span>
        </div>
        <div class="form-item">
          <label>维护类型</label>
          <span>{{ deviceData.maintenanceType }}</span>
        </div>
        <div class="form-item">
          <label>测量项目</label>
          <span>{{ deviceData.insProduct }}</span>
        </div>
      </div>
    </div>
  </div>
@@ -102,8 +67,17 @@

<script>
import EchartModule from '../../tool/echart.vue'

export default {
  components: {EchartModule},
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data(){
    return {
      chartConfig:{
@@ -112,16 +86,77 @@
        type:'gauge'
      },
      chartData:{
        xData:[],
        yData:[
          {
            title:'任务接收量',
            data:[]
          }
        ]
        formatter: "已过校准日期百分比: {c}%",
        color:[
            [0.3, '#21a700'],
            [0.7, '#0066ff'],
            [1, '#d80000']
        ],
        value: 0,
      },
      form:{
        value1:''
      },
      formData:{
        usedAge:12
      },
      //设备数据收集
      deviceData:{

      }
    }
  },
  mounted(){
    //获取设备故障的信息
    this.getDeviceInfo(this.clickNodeVal.value);
  },
  methods:{
    formatColorStyle(status){
      if(status==null || status=="" || status==undefined){
         return ""
      }
      let styleStr = ''
      switch(status){
        case"合格":
          styleStr = 'success'
        break;
        case"不合格":
          styleStr = 'failed'
        break;
        case"其他":
          styleStr = 'other'
        break;
        case"正常":
          styleStr = 'success'
        break;
        case"ç»´ä¿®":
          styleStr = 'other'
        break;
        case"停用":
          styleStr = 'stop'
        break;
        case"报废":
          styleStr = 'failed'
        break;
      }
      return styleStr;
    },
    //获取设备运行总览信息
    getDeviceInfo(deviceId){
      this.$axios.get(this.$api.deviceFault.getDevice+"/"+deviceId).then(res=>{
        if(res.code==200){
        this.deviceData=res.data
        this.chartData.value = res.data.progress
        }
      })
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      // æ˜¯å¦å­˜åœ¨value，存在value代表为三级
      if (this.clickNodeVal.value) {
        this.getDeviceInfo(newVal.value)
      }
    }
  }
@@ -131,7 +166,7 @@
<style scoped>
.page{
  width: 100%;
  height: 100%;
  height: 100vh;
  display: flex;
}
.page-left{
@@ -142,6 +177,8 @@
}
.page-right{
  flex: 1;
  height:calc(100% - 200px);
  overflow: scroll;
  /* background: red; */
}
.form-item{
@@ -155,7 +192,19 @@
  text-align: right;
  margin-right: 20px;
}
>>>.el-radio__input.is-disabled+span.el-radio__label{
.el-radio__input.is-disabled+span.el-radio__label{
  color: #606266 !important;
}
.success{
    color:#21a700
}
.failed{
    color:#d80000
}
.other{
    color: #e8a849;
}
.stop{
    color: #909399;
}
</style>

 src/components/do/a6-device/record.vue

@@ -1,13 +1,479 @@
<!-- ä½¿ç”¨è®°å½• -->
<template>
  <div>设备记录</div>
  <div>
    <div class="search">
      <div class="search_thing">
        <div class="search_label">样品编号：</div>
        <el-input v-model="search.sampleCode" clearable placeholder="请输入" size="small" style="width: 70%;"
          @keyup.enter.native="getTableList(clickNodeVal.value)"></el-input>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="small" @click="resetSearch">重 ç½®</el-button>
        <el-button size="small" type="primary" @click="getTableList(clickNodeVal.value)">查 è¯¢</el-button>
      </div>
      <div class="btns">
        <el-button size="small" type="primary" @click="dialogVisible = true, openAdd()">新 å»º</el-button>
        <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导 å‡º</el-button>
      </div>
    </div>
    <div class="tables" style="margin-top: 10px;">
      <el-table ref="Recordtable" :data="formParamList" height="calc(100vh - 20em)">
        <!-- è¡¨æ ¼åˆ— -->
        <el-table-column label="序号" type="index" width="120">
          <template v-slot="scope">
            <span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="样品编号" min-width="180" prop="sampleCode" />
        <el-table-column label="设备名称" min-width="150" prop="deviceName" />
        <el-table-column label="管理编号" min-width="150" prop="managementNumber" />
<!--        <el-table-column label="温度(°C)" min-width="120" prop="temperature" />-->
<!--        <el-table-column label="湿度(%RH)" min-width="120" prop="humidity" />-->
        <el-table-column label="使用前" min-width="120" prop="useBefore">
          <template v-slot="scope">
            {{ scope.row.useBefore === 1 ? '正常' : '不正常' }}
          </template>
        </el-table-column>
        <el-table-column label="使用后" min-width="120" prop="useAfter">
          <template v-slot="scope">
            {{ scope.row.useAfter === 1 ? '正常' : '不正常' }}
          </template>
        </el-table-column>
<!--        <el-table-column label="异常情况" min-width="120" prop="abnormal" />-->
        <el-table-column label="使用开始日期" min-width="150" prop="useStartDate" />
        <el-table-column label="使用结束日期" min-width="150" prop="useEndDate" />
        <el-table-column label="使用人" min-width="120" prop="usePerson" />
        <el-table-column label="备注" min-width="120" prop="remark" />
        <!-- æ“ä½œæŒ‰é’® -->
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="showDetailsDialog('edit',scope.row)">编辑</el-button>
            <el-button size="small" type="text" @click="showDetailsDialog('view',scope.row)">查看</el-button>
            <el-button size="small" type="text" @click="handleDeleteClick(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
        :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="仪器设备使用记录表" top="5vh" width="55%">
      <el-form ref="form" :model="form" label-width="130px">
        <el-row>
          <el-col :span="24">
            <el-form-item :rules="[{ required: true, message: '样品编号', trigger: 'blur' }]" label="样品编号:" prop="sampleCode">
              <el-input v-model="form.sampleCode" :disabled="operationType === 'view'" size="small" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称:" required>
              <el-input v-model="form.deviceName" :disabled="operationType === 'view'" size="small" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理编号:" required>
              <el-input v-model="form.managementNumber" :disabled="operationType === 'view'" size="small" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item :rules="[{ required: true, message: '请输入温度(°C)', trigger: 'blur' }]" label="温度(°C):"-->
<!--              prop="temperature">-->
<!--              <el-input v-model="form.temperature" :disabled="isShow" size="small" style="width: 100%;"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item :rules="[{ required: true, message: '请输入湿度(%RH)', trigger: 'blur' }]" label="湿度(%RH):"-->
<!--              prop="humidity">-->
<!--              <el-input v-model="form.humidity" :disabled="isShow" size="small" style="width: 100%;"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请选择使用前', trigger: 'change' }]" label="使用前:"
              prop="useBefore">
              <el-radio-group v-model="form.useBefore" :disabled="operationType === 'view'">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">不正常</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请选择使用后', trigger: 'change' }]" label="使用后:"
              prop="useAfter">
              <el-radio-group v-model="form.useAfter" :disabled="operationType === 'view'">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">不正常</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
<!--          <el-col v-if="form.useAfter === 0" :span="24">-->
<!--            <el-form-item :rules="[{ required: form.useAfter === 0, message: '请输入异常情况', trigger: 'blur' }]" label="异常情况:"-->
<!--              prop="abnormal">-->
<!--              <el-input v-model="form.abnormal" :disabled="operationType === 'view'" size="small" style="width: 100%;"-->
<!--                type="textarea"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请输入使用日期', trigger: 'blur' }]" label="使用日期:"
              prop="useDateList">
              <el-date-picker
                v-model="form.useDateList" :disabled="operationType === 'view'" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"
                size="small"
                start-placeholder="开始日期"
                style="width:100%"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请输入使用人', trigger: 'change' }]" label="使用人:"
              prop="usePersonId">
              <el-select @change="usePersonName" v-model="form.usePersonId" :disabled="operationType === 'view'" placeholder="请选择" size="small" style="width: 100%">
                <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:">
              <el-input v-model="form.remark" :disabled="operationType === 'view'" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
        <el-button v-if="operationType !== 'view'" type="primary" @click="saveRecord">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {

  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      search: {
        size: 20,
        current: 1,
        total: 0,
        sampleCode: ''
      },
      responsiblePersonList: {},
      isShow: false,
      outLoading: false,
      userList: [],
      form: {
        // deviceId:'',
        processNumber: '',
        deviceName: '',
        managementNumber: '',
        //温度
        temperature: '',
        //湿度
        humidity: '',
        //使用前
        useBefore: 1,
        //使用后
        useAfter: 1,
        //异常情况
        abnormal: '',
        useDateList: [],
        //使用日期
        useStartDate: null,
        useEndDate: null,
        //使用人
        usePerson: '',
        usePersonId: '',
        //备注
        remark: '',
      },
      dialogVisible: false,
      operationType: '',
      formParamList: [],
    }
  },
  mounted() {
    this.getTableList(this.clickNodeVal.value);
  },
  methods: {
    handleSizeChange(val) {
      this.search.size = val
      this.getTableList(this.clickNodeVal.value);
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.getTableList(this.clickNodeVal.value);
    },
    resetSearch() {
      this.search = {
        size: 20,
        current: 1,
        total: 0,
        sampleCode: '',
      }
      this.getTableList(this.clickNodeVal.value);
    },
    async getTableList(deviceId) {
      await this.$axios.get(this.$api.deviceCheck.deviceRecordPage + "?deviceId=" + deviceId + "&size=" + this.search.size + "&current=" + this.search.current + "&sampleCode=" + this.search.sampleCode).then(res => {
        if (res.code == 200) {
          this.formParamList = res.data.records
          this.search.total = res.data.total
        }
      })
    },
    //导出
    handleDown() {
      this.outLoading = true
      this.$axios.get(this.$api.deviceCheck.exportUseRecord + "?deviceId=" + this.clickNodeVal.value, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '设备使用记录.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '设备使用记录.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    //新建
    openAdd() {
      this.operationType = 'add'
      this.getUserList()
      this.$axios.get(this.$api.deviceScope.selectDeviceByCode + '?id=' + this.clickNodeVal.value).then(res => {
        this.form.deviceName = res.data.deviceName
        this.form.managementNumber = res.data.managementNumber
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      });
    },
    usePersonName (value) {
      const index = this.userList.findIndex(item => item.id === value)
      if (index > -1) {
        this.form.usePerson = this.userList[index].name
      }
    },
    //确认添加记录
    saveRecord() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.useStartDate = this.form.useDateList[0]
          this.form.useEndDate = this.form.useDateList[1]
          this.form.deviceId = this.clickNodeVal.value
          if (this.operationType === 'add') {
            this.$axios.post(this.$api.deviceCheck.saveDeviceRecord, this.form, {
              headers: {
                'Content-Type': 'application/json'
              },
              noQs: true
            }).then(res => {
              if (res.code == 200) {
                this.$message.success('新增成功')
                this.getTableList(this.clickNodeVal.value)
                this.dialogVisible = false
              }
            })
            this.dialogVisible = false;
          } else {
            this.$axios.post(this.$api.deviceCheck.updateDeviceRecord, this.form, {
              headers: {
                'Content-Type': 'application/json'
              },
              noQs: true
            }).then(res => {
              if (res.code == 200) {
                this.$message.success('修改成功')
                this.getTableList(this.clickNodeVal.value)
                this.dialogVisible = false
              }
            })
            this.dialogVisible = false;
          }
        }
      });
    },
    //查看详情
    showDetailsDialog(type,row) {
      this.operationType = type;
      console.log(row)
      this.dialogVisible = true;
      this.getUserList()
      this.form = row;
      let list = []
      if (row.useStartDate === null) {
        row.useStartDate = ''
      }
      if (row.useEndDate === null) {
        row.useEndDate = ''
      }
      list.push(row.useStartDate)
      list.push(row.useEndDate)
      this.$set(this.form, 'useDateList', list)
    },
    handleDeleteClick(index, row) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.deviceCheck.deleteDeviceRecord + '?id=' + row.id).then(res => {
          this.formParamList.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    getUserList(){
      this.$axios.post(this.$api.user.selectUserList, {
        page: {current: -1, size: -1,},
        entity: {name: null}
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code === 201) {
          return
        }
        this.userList = res.data.body.records
      })
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getTableList(newVal.value);
      }
    },
    dialogVisible(newVal) {
      if (newVal === false) {
        this.form = {
          // deviceId:'',
          sampleCode: '',
          deviceName: '',
          managementNumber: '',
          //温度
          temperature: '',
          //湿度
          humidity: '',
          //使用前
          useBefore: 1,
          //使用后
          useAfter: 1,
          //异常情况
          abnormal: '',
          //使用日期
          useDateList: [],
          //使用人
          usePersonId: '',
          //备注
          remark: '',
        }
        this.$refs.form.clearValidate()
      }
    }
  }
}
</script>

<style scoped>
.tables {
  width: 100%;
  height: calc(100vh - 15em);
}

.el-from {
  max-width: 400px;
  margin: 0 auto;
}

.form-row {
  display: flex;
  justify-content: space-between;
}

.el-input {
  width: calc(100% - 120px);
  /* ç¡®ä¿è¾“入框宽度一致 */
}

.form-row .el-form-item {
  flex: 1;
  /* æ¯ä¸ªè¡¨å•é¡¹å æ®ç›¸åŒæ¯”例的空间 */
  margin-right: 100px;
  /* å¯é€‰ï¼šä¸ºå³ä¾§å…ƒç´ æ·»åŠ é—´è· */
}

/* ç§»é™¤æœ€åŽä¸€ä¸ªå…ƒç´ çš„右边距 */
.form-row .el-form-item:last-child {
  margin-right: 0;

}

.search {
  background-color: #fff;
  margin-top: 10px;
  display: flex;
  align-items: center;
  position: relative;
}

.search_thing {
  display: flex;
  align-items: center;
  height: 40px;

}

.search_label {
  width: 80px;
  font-size: 14px;
  text-align: right;
  margin-right: 10px;
}

.btns {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(0, -50%);
}
</style>

 src/components/do/a6-device/resource-reservation.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,504 @@
<!-- èµ„源预定 -->
<template>
  <div class="">
    <div style="margin-top: 10px">
      <el-row class="title">
        <el-col :span="12" style="text-align: left;">预定总览</el-col>
        <el-col :span="12" style="text-align: left;padding-bottom:10px">
          <el-date-picker
          v-model="startTime"
          format="yyyy-MM-dd"
          placeholder="选择起始日期"
          size="mini"
          type="date"
          value-format="yyyy-MM-dd"/>
          è‡³
          <el-date-picker
          v-model="endTime"
          format="yyyy-MM-dd"
          placeholder="选择结束日期"
          size="mini"
          type="date"
          value-format="yyyy-MM-dd"/>
          <el-button size="mini" type="primary" @click="ValidateAndQuery">查 è¯¢</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table-container">
      <el-table :data="tableData" border class="scrollable-table" style="width: 100%">
        <el-table-column label="序号"
                         type="index"
                         width="60">
        </el-table-column>
        <el-table-column label="设备" min-width="60" prop="deviceName"/>
        <el-table-column label="时间" min-width="60" prop="time"/>
        <el-table-column v-for="date in dates" :key="date" :label="date">
          <template #default="{ row }">
            <el-button v-if="!row[date]" size="mini" type="primary" @click="openModal(date, row)">
              {{ getDisplayText(row, date) }}
            </el-button>
            <span v-else></span>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="showModal" title="预定信息"
                 top="5vh" width="70%">
        <h4>
          <el-button v-if="isBeforeDate()" size="small" @click="cancelReservation(selectedRow)">取消预定</el-button>
          <el-button v-if="isBeforeDate()" size="small" type="primary" @click="openAdd()">新建预定</el-button>
        </h4>
        <el-table ref="table" :data="tableData2" style="width: 100%" tooltip-effect="dark"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55%">
          </el-table-column>
          <el-table-column label="序号" width="120">
            <template #default="{ row, $index }">
              <!-- ä½¿ç”¨ $index æ¥èŽ·å–行索引，通常从0开始，所以+1以符合常规序号习惯 -->
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="预定编号" prop="deviceNumber" width="120">
          </el-table-column>
          <el-table-column label="客户名称" prop="customerName" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="联系人" prop="linkPerson" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="联系电话" prop="phone" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="预定说明" prop="reservationSpecification" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="创建人" prop="name" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="创建时间" prop="createDate" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
    <el-dialog :visible.sync="addVisiable" title="新建预定" top="5vh" width="40%">
      <el-form ref="addReservationForm" :model="addReservation" :rules="rules" label-width="90px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="预定设备:">
              <el-input v-model="addReservation.deviceName"></el-input>
            </el-form-item>
            <el-form-item label="客户名称:">
              <el-input v-model="addReservation.customerName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预定时间:">
              <el-input v-model="addReservation.reservationTime"></el-input>
            </el-form-item>
            <el-form-item label="流程编号:">
              <el-input v-model="addReservation.deviceNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人:">
              <el-input v-model="addReservation.linkPerson"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话:" prop="phone">
              <el-input v-model="addReservation.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="预定说明:" required>
              <el-input v-model="addReservation.reservationSpecification" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisiable = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="addRecord">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {

    return {
      // startDate: new Date(),
      // endDate: new Date(new Date().setDate(new Date().getDate() + 3)),
      // startDate:'',
      // endDate:'',
      timeSlots: ['09:00-12:00', '13:00-18:00', '18:00-22:00'],
      dates: [],
      showModal: false,
      selectedDate: '',
      selectedTime: '',
      selectedDevice: '',
      tableData: [
        {
          id: '',
          deviceName: '',
          date: ''
        }
      ],
      tableData2: [],
      selectedReservationId: null, // ç”¨äºŽå­˜å‚¨é€‰ä¸­çš„ID
      selectedRow: null,
      addVisiable: false,
      laboratoryNameIsNull: false,
      currentPage: 1, // å½“前页
      pageSize: 16, // ä¸€é¡µ16条
      startTime: '',
      endTime: '',
      entity: {
        deviceName: null,
        laboratoryName: '',
        storagePoint: '',
      },
      addReservation: {
        deviceName: '',
        reservationTime: '',
        specificTime: '',
        customerName: '',
        deviceNumber: '',
        linkPerson: '',
        phone: '',
        reservationSpecification: ''
      },
      total: '',
      // loading:true,
      componentData: {
        entity: {
          largeCategory: null,
          orderBy: {
            field: 'id',
            order: 'asc'
          }
        },
      },
      yuyue: null,
      yuyuetime: '',
      rules: {
        phone: [
          {required: true, message: '请输入联系电话',
            trigger: 'blur'},
          {pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: ['blur', 'change']
          }
        ]
      },
      appointment: ''
    }
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      this.clickSidebar(newVal)
    }
  },

  created() {
    this.clickSidebar(this.clickNodeVal)
    this.initDate();
  },
  mounted() {
    this.getAllDeviceParam();

  },
  methods: {
    isBeforeDate() {
      let currentDate = this.$moment().format('YYYY-MM-DD')
      let currentTime = this.$moment().format('HH')
      const appointment = this.appointment && this.appointment.split('-')
      let appointment0 = ''
      let appointment1 = ''
      if (appointment !== '') {
        appointment0 = appointment[0].slice(0,2)
        appointment1 = appointment[1].slice(0,2)
      }
      if (currentDate < this.yuyuetime) {
        // æœªæ¥çš„日期，一定能新增预约
        return true
      } else if (currentDate === this.yuyuetime) {
        // å½“天的日期，已经过了的时间不可取消和新增
        if (currentTime < appointment1) {
          return true
        } else if (currentTime > appointment1) {
          return false
        }
      }
    },
    getDisplayText(row, date) {
      if (!row || row.dateList === null || row.dateList === undefined || row.dateList === "") {
        return '预约';
      }
      var dateLst = row.dateList
      for (const dateLstElement of dateLst) {
        if (dateLstElement.date === date) {
          if (dateLstElement.value === 0) {
            return '预约';
          } else {
            return dateLstElement.value;
          }
        }
      }
      return '预约';
    },

    ValidateAndQuery() {
      if (!this.startTime || !this.endTime) {
        this.$message.error('请选择日期范围');
        return;
      }
      if((new Date(this.endTime)-new Date(this.startTime))/(1000*60*60*24) >= 10) {
        this.$message.error('只能预约10天以内');
        return;
      }
      if (new Date(this.startTime) > new Date(this.endTime)) {
        this.$message.error('开始日期不能大于结束日期');
        return;
      }
      this.query();
    },
    initDate(){
      if(this.startTime=='' || this.endTime=='' ||this.startTime==null||this.endTime==null){
      const daysAdd = 3;
      const now =  new Date();
      this.startTime = now.getFullYear() + "-" +
        String(now.getMonth() + 1).padStart(2, '0') + "-" +
        String(now.getDate()).padStart(2, '0');
        let endTime = new Date(now);
        endTime.setDate(now.getDate() + daysAdd);
        this.endTime = endTime.getFullYear() + "-" +
          String(endTime.getMonth() + 1).padStart(2, '0') + "-" +
          String(endTime.getDate()).padStart(2, '0');
      const start = new Date(this.startTime);
      const end = new Date(this.endTime);
      const tempDates = [];
      while (start<=end) {
        const year = start.getFullYear();
        const month = String(start.getMonth() + 1).padStart(2, '0'); // æœˆä»½ä»Ž0开始，所以加1，并使用padStartè¡¥0
        const day = String(start.getDate()).padStart(2, '0'); // ä½¿ç”¨padStartè¡¥0
        tempDates.push(`${year}-${month}-${day}`);
        start.setDate(start.getDate() + 1);
      }
      this.dates = tempDates;
      this.getStartTimeAndEndTime();
    }},
    query() {
      if (this.startTime && this.endTime) {
        const start = new Date(this.startTime);
        const end = new Date(this.endTime);
        const tempDates = [];
        while (start <= end) {
          const year = start.getFullYear();
          const month = String(start.getMonth() + 1).padStart(2, '0'); // æœˆä»½ä»Ž0开始，所以加1，并使用padStartè¡¥0
          const day = String(start.getDate()).padStart(2, '0'); // ä½¿ç”¨padStartè¡¥0
          tempDates.push(`${year}-${month}-${day}`);
          start.setDate(start.getDate() + 1);
        }
        this.dates = tempDates;
        this.getStartTimeAndEndTime();
      }
    },
    //查询时间
    getStartTimeAndEndTime(){
      //查询逻辑
      this.$axios.post(this.$api.deviceReservate.get + "?laboratoryNameIsNull=" + this.laboratoryNameIsNull + "&starttime=" + this.startTime + "&endtime=" + this.endTime, {
        page: {
          current: this.currentPage,
          size: this.pageSize
        },
        entity: this.entity
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code == 200) {
          const devices = res.data.body;
          this.initTable(devices)
        }
      })
    },
    updateDates() {
      if (this.startTime && this.endTime) {
        const start = new Date(this.startDate);
        const end = new Date(this.endDate);
        const tempDates = [];
        while (start <= end) {
          const month = start.getMonth() + 1;
          const day = start.getDate();
          tempDates.push(`${month}/${day}`);
          start.setDate(start.getDate() + 1);
        }
        this.dates = tempDates;
        this.initTableData(devices);
      }
    },
    getAllDeviceParam() {
      this.$axios.post(this.$api.deviceReservate.get + "?laboratoryNameIsNull=" + this.laboratoryNameIsNull, {
        page: {
          current: this.currentPage,
          size: this.pageSize
        },
        entity: this.entity
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code == 200) {
          const devices = res.data.body;
          this.initTable(devices)
        }
      })
    },
    initTable(devices) {
      this.tableData = devices;
    },
    openModal(date, row) {
      this.yuyue = row;
      this.yuyuetime = date;
      this.appointment = row.time
      this.showModal = true;
      this.getList();
    },
    openAdd() {
      this.addVisiable = true;
      this.addReservation.deviceId = this.yuyue.id;
      // this.addReservation.deviceNumber = this.yuyue.deviceNumber;
      this.addReservation.deviceName = this.yuyue.deviceName;
      this.addReservation.reservationTime = this.yuyuetime + " " + this.yuyue.time;
      this.addReservation.specificTime = this.yuyue.time;
      this.addReservation.deviceNumber = 'TX-ABC-01'+Math.floor(Math.random() * 10 + 1);
    },
    handleSelectionChange(selected) {
      this.selectedRow = selected.length > 0 ? selected : null;
    },
    async cancelReservation(selectedRow) {
      if (!selectedRow || selectedRow.length == 0) {
        this.$message.error('请选择要删除的预约');
        return;
      }
      let ids = selectedRow.map(item => item.id).join(',');
      try {
        const res = await this.$axios.delete(this.$api.deviceReservate.del + '/' + ids);
        if (res.code === 200) {
          this.$message.success({
            message: '删除成功',
            type: 'success'
          });
          this.getList();
          this.query();
          this.showModal = false;
        } else {
          this.$message.error({
            message: '删除失败',
            type: 'error'
          });
        }
      } catch (error) {
        this.$message.error({
          message: '删除过程中发生错误，请稍后重试',
          type: 'error'
        });
      }
    },
    addRecord() {
      this.$refs.addReservationForm.validate((valid) => {
        if (valid) {
          this.addReservation.reservationTime = this.yuyuetime;
          this.$axios.post(this.$api.deviceReservate.save, this.addReservation).then(res => {
            if (res.code == 200) {
              this.$message.success('保存成功')
              this.addVisiable = false
              this.getList();
              this.query();
              this.addReservation = {};
            }
          })
        } else {
          this.$message.error({message: '请检查表单填写是否正确', type: 'error'});
          return false;
        }
      });
    },
    getList() {
      this.$axios.post(this.$api.deviceReservate.list + "?deviceId=" + this.yuyue.id + "&reservationTime=" + this.yuyuetime + "&specificTime=" + this.yuyue.time).then(res => {
        if (res.code == 200) {
          this.tableData2 = res.data;
        }
      })
    },
    // ç‚¹å‡»ä¾§è¾¹æ åˆ·æ–°
    clickSidebar(clickNodeVal) {
      this.laboratoryNameIsNull = false
      // æ˜¯å¦å­˜åœ¨value，存在value代表为三级
      if (!clickNodeVal.value) {
        this.finishLoding = false;
        this.keyMap = {};
        this.currentPage = 1;
        this.list = [];
        this.entity.laboratoryName = null
        this.entity.storagePoint = null
        // ç­‰äºŽ1代表为树的一级，label为部门
        if (clickNodeVal.label == '其他') {
          this.laboratoryNameIsNull = true
          this.getAllDeviceParam();
          return
        }
        if (clickNodeVal.level == 1) {
          this.entity.laboratoryName = clickNodeVal.label
          // ç­‰äºŽäºŒçº§ã€‚label为存储地点
        } else if (clickNodeVal.level == 2) {
          // å…¶ä»–表示没有配置实验室，只配置了地点
          if (clickNodeVal.parent.label == '其他') {
            this.laboratoryNameIsNull = true
          } else {
            this.entity.laboratoryName = clickNodeVal.parent.label
          }
          this.entity.storagePoint = clickNodeVal.label
        }
        this.getAllDeviceParam();
      }
    }
  },

}
</script>

<style scoped>
.table-container {
  overflow: auto;
  height: 500px;
  /* å¯ä»¥æ ¹æ®éœ€è¦è°ƒæ•´é«˜åº¦ */
}

.scrollable-table {
  max-height: 100%;
  overflow-y: auto;
  /* overflow-x: auto; */
}

h4 {
  font-weight: 400;
  font-size: 16px;
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}

.form-row {
  display: flex;
  justify-content: space-between;
}
</style>

 src/components/do/a6-device/state.vue

@@ -1,13 +1,650 @@
<!-- è®¾å¤‡åœç”¨å¯ç”¨ -->
<template>
  <div>设备停用/启用</div>
  <div>
    <div class="search">
      <el-row :gutter="10" style="width: 100%;">
        <el-col :span="20" style="display: flex;flex-wrap: wrap;">
          <div class="search_thing">
            <div class="search_label">流程编号：</div>
            <div class="search_input">
              <el-input v-model="search.processNumber" clearable placeholder="请输入" size="small" style="width: 100%"
                @keyup.enter.native="getDeviceStatePage(clickNodeVal.value)"></el-input>
            </div>
          </div>
          <div class="search_thing" style="padding-left: 20px;">
            <el-button size="small" @click="resetSearch">重 ç½®</el-button>
            <el-button size="small" type="primary" @click="getDeviceStatePage(clickNodeVal.value)">查 è¯¢</el-button>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="btns">
            <el-button size="small" type="primary" @click="dialogVisible = true">新建</el-button>
            <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出Excel</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-table :data="tableDatalist" height="calc(100vh - 20em)" style="width: 100% ;">
        <!-- è¡¨æ ¼åˆ— -->
        <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index"
          width="70"></el-table-column>
        <el-table-column label="流程编号" min-width="180" prop="processNumber"></el-table-column>
        <el-table-column label="设备名称" min-width="180" prop="deviceName"></el-table-column>
        <el-table-column label="管理编号" min-width="150" prop="managementNumber"></el-table-column>
        <el-table-column label="设备状态" min-width="130" prop="deviceStatus">
          <template #default="{ row }">
            {{ row.deviceStatus === '0scrap' ? '报废' : row.deviceStatus === '1startUsing' ? '启用' : '停用' }}
          </template>
        </el-table-column>
        <el-table-column label="停用/启用理由" min-width="180" prop="reason"></el-table-column>
        <el-table-column label="提交人" min-width="130" prop="createUser"></el-table-column>
        <el-table-column label="提交日期" min-width="150" prop="createTime"></el-table-column>
        <el-table-column label="当前状态" min-width="130" prop="currentState"></el-table-column>
        <el-table-column label="当前责任人" min-width="180" prop="currentResponsible"></el-table-column>
        <!-- æ“ä½œæŒ‰é’® -->
        <el-table-column fixed="right" label="操作" min-width="150">
          <template #default="{ row }">
            <el-button size="small" type="text" @click="handleViewClick(row)">查看</el-button>
            <el-button size="small" type="text" @click="handleDownOne(row)">导出</el-button>
            <el-button size="small" type="text" @click="handleDeleteClick(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
        :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="设备情况" top="5vh"
      width="60%" @open="openRecordAcceptance">
      <el-steps :active="currentStep" align-center finish-status="success">
        <el-step v-for="(v, i) in steps" :key="i" :title="v" style="cursor:pointer"
          @click.native="choiceStep(i)"></el-step>
      </el-steps>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <div v-show="currentStepClick === 0">
          <el-card style="margin-top: 1em; height: 42vh; overflow-y: scroll;">
            <!-- å¡ç‰‡ -->
            <el-row>
              <el-col :span="24">
                <el-form-item label="流程编号：">
                  <el-input v-model="form.processNumber" disabled size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="管理编号：">
                  <el-input v-model="form.managementNumber" disabled size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备名称：">
                  <el-input v-model="form.deviceName" disabled size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规格型号：">
                  <el-input v-model="form.specificationModel" disabled size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请输入配件', trigger: 'blur' }]" label="配件："
                  prop="accessoryPart">
                  <el-input v-model="form.accessoryPart" :disabled="currentStep !== 0" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请选择设备状态', trigger: 'change' }]" label="设备情况："
                  prop="deviceStatus">
                  <el-select v-model="form.deviceStatus" :disabled="currentStep !== 0" placeholder="请选择" size="small"
                    style="width:100%">
                    <el-option label="报废" value="0scrap"></el-option>
                    <el-option label="启用" value="1startUsing"></el-option>
                    <el-option label="停用" value="2stopUsing"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请输入停用启用理由', trigger: 'blur' }]" label="停用启用理由："
                  prop="reason">
                  <el-input v-model="form.reason" :disabled="currentStep !== 0" :rows="3" size="small"
                    type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请选择下环节责任人', trigger: 'change' }]" label="下环节责任人："
                  prop="submitNextPesponsible">
                  <el-select v-model="form.submitNextPesponsible" :disabled="currentStep !== 0" clearable filterable
                    placeholder="请选择下环节负责人" size="small" style="width: 100%">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.submitOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.submitDate }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 1">
          <el-card style="margin-top: 1em; height: 42vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="部门负责人意见：" prop="departmentReviewOpinion">
                  <el-input v-model="form.departmentReviewOpinion" :disabled="currentStep !== 1" size="small"
                    type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: currentStep === 1, message: '请输入下环节责任人', trigger: 'change' }]" label="下环节责任人："
                  prop="departmentNextPesponsible">
                  <el-select v-model="form.departmentNextPesponsible" :disabled="currentStep !== 1" clearable filterable
                    placeholder="请选择下环节负责人" size="small" style="width: 100%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.departmentOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.departmentDate }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 2">
          <el-card style="margin-top: 1em; height: 42vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 2, message: '请输入计量室意见', trigger: 'blur' }]" label="计量室意见："
                  prop="measuringRoomReviewOpinion">
                  <el-input v-model="form.measuringRoomReviewOpinion" :disabled="currentStep !== 2" size="small"
                    type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: currentStep === 2, message: '请输入下环节责任人', trigger: 'blur' }]" label="下环节责任人："
                  prop="measuringRoomNextPesponsible">
                  <el-select v-model="form.measuringRoomNextPesponsible" :disabled="currentStep !== 2" clearable filterable
                    placeholder="请选择下环节负责人" size="small" style="width: 100%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.measuringRoomOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.measuringRoomDate }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 3">
          <el-card style="margin-top: 1em; height: 42vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 3, message: '请输入批准意见', trigger: 'blur' }]" label="批准意见："
                  prop="approvalOpinion">
                  <el-input v-model="form.approvalOpinion" :disabled="currentStep !== 3" size="small"
                    type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: currentStep === 3, message: '请输入下环节负责人', trigger: 'change' }]" label="下环节责任人："
                  prop="approvalNextPesponsible">
                  <el-select v-model="form.approvalNextPesponsible" :disabled="currentStep !== 3" clearable
                    filterable placeholder="请选择下环节负责人" size="small" style="width: 100%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.approvalOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.approvalDate }}
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="currentStep !== 0 && currentStep !== 4" :loading="sumbitLoading1"
          @click="submitForm('3reject')">驳回</el-button>
        <el-button v-if="currentStep === 0" :loading="sumbitLoading2" @click="submitForm('2save')">保存</el-button>
        <el-button v-if="currentStep !== 4" :loading="sumbitLoading3" type="primary" @click="submitForm('1submit')">
          {{ currentStep === 0 ? '提交' : '通过' }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat } from '../../../util/date'
export default {
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      outLoading: false, // å¯¼å‡ºloading
      dialogVisible: false,
      form: {},
      currentStep: 0, // æ­¥éª¤æ¡æ˜¾ç¤ºç¬¬å‡ æ­¥
      currentStepClick: 0, // ç‚¹å‡»æ­¥éª¤æ¡å˜åŒ–
      steps: ['提交', '部门负责人', '计量室', '批准人'],
      responsibleOptions: [], // ä¸‹çŽ¯èŠ‚负责人
      tableDatalist: [], // table表格
      rules: {
        quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
      },
      search: {
        size: 20,
        current: 1,
        total: 0,
        processNumber: ''
      },
      sumbitLoading1: false,
      sumbitLoading2: false,
      sumbitLoading3: false,
    }
  },
  mounted() {
    this.getDeviceStatePage(this.clickNodeVal.value)
  },
  methods: {
    // åˆ†é¡µ
    handleSizeChange(val) {
      this.search.size = val
      this.getDeviceStatePage(this.clickNodeVal.value)
    },
    // åˆ†é¡µ
    handleCurrentChange(val) {
      this.search.current = val
      this.getDeviceStatePage(this.clickNodeVal.value)
    },
    //提交表单
    async submitForm(saveState) {
      let currentStepAction;
      // è®¾ç½®è¯¥æ“ä½œåˆ¤æ–­æ˜¯å¦ä¸ºæäº¤ï¼Œä¿å­˜ï¼Œé©³å›žï¼Œé€šè¿‡ å¼€å¯loding
      switch (saveState) {
        // æäº¤ï¼Œé€šè¿‡
        case '1submit':
          currentStepAction = this.currentStep + 1
          this.sumbitLoading1 = true
          break
        // ä¿å­˜
        case '2save':
          currentStepAction = this.currentStep
          this.sumbitLoading2 = true
          break
        // é©³å›ž
        case '3reject':
          currentStepAction = this.currentStep - 1
          this.sumbitLoading3 = true
          break
        default:
          break
      }
      this.$refs.form.validate((valid) => {
        if (valid === true || saveState !== '1submit') {
          // ç»™å½“前环节设置创建人与时间
          let user = JSON.parse(localStorage.getItem('user'))
          const dateTime = dateFormat(new Date())
          // èŽ·å–当前环节操作人与日期
          switch (this.currentStep) {
            case 0:
              this.form.createUser = user.name
              this.form.submitOperatingPersonnel = user.name
              this.form.submitDate = dateTime
              break
            case 1:
              this.form.departmentOperatingPersonnel = user.name
              this.form.departmentDate = dateTime
              break
            case 2:
              this.form.measuringRoomOperatingPersonnel = user.name
              this.form.measuringRoomDate = dateTime
              break
            case 3:
              this.form.approvalOperatingPersonnel = user.name
              this.form.approvalDate = dateTime
              break
            default:
              break
          }
          // èŽ·å–当前环节负责人
          switch (saveState === '3reject' ? this.currentStep - 1 : this.currentStep) {
            case 0:
              this.form.currentResponsible = this.form.submitOperatingPersonnel
              break
            case 1:
              this.form.currentResponsible = this.form.departmentOperatingPersonnel
              break
            case 2:
              this.form.currentResponsible = this.form.measuringRoomOperatingPersonnel
              break
            case 3:
              this.form.currentResponsible = this.form.approvalOperatingPersonnel
              break
            default:
              break
          }
          // èŽ·å–当前状态
          this.form.currentState = currentStepAction === 4 ? '关闭' : this.steps[currentStepAction]
          this.form.deviceId = this.clickNodeVal.value
          this.$axios.post(this.$api.deviceCheck.saveDeviceState, this.form, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
            if (res.code == 200) {
              this.$message.success('提交成功')
              this.getDeviceStatePage(this.clickNodeVal.value)
              this.dialogVisible = false
              this.closeLoading()
            }
            this.closeLoading()
          })
        } else {
          let step = this.steps[this.currentStep]
          this.$message.warning(step + '  æµç¨‹ä¸­æœ‰å¿…填项未填！');
          this.closeLoading()
        }
      });
    },
    closeLoading() {
      this.sumbitLoading1 = false
      this.sumbitLoading2 = false
      this.sumbitLoading3 = false
    },
    choiceStep(index) {
      this.currentStepClick = index
    },
    openRecordAcceptance() {
      // èŽ·å–设备基础信息
      this.$axios.get(this.$api.deviceScope.selectDeviceByCode + '?id=' + this.clickNodeVal.value).then(res => {
        this.form.deviceName = res.data.deviceName
        this.form.specificationModel = res.data.specificationModel
        this.form.managementNumber = res.data.managementNumber
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      });
      // èŽ·å–负责人信息
      this.getUserList()
    },
    // èŽ·å–负责人信息接口
    getUserList() {
      this.$axios.get(this.$api.deviceScope.selectUserList).then(res => {
        if (res.code == 200) {
          this.responsibleOptions = res.data
        }
      })
    },
    // æŸ¥çœ‹
    handleViewClick(row) {
      this.form = { ...row }
      // å¦‚果索引为6表示全部通过
      this.currentStep = this.steps.indexOf(this.form.currentState) === -1 ? 4 : this.steps.indexOf(this.form.currentState)
      this.currentStepClick = this.currentStep === 4 ? 0 : this.currentStep
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.dialogVisible = true
    },
    // å¯¼å‡º
    handleDownOne(row) {
      this.outLoading = true
      this.$axios.get(this.$api.deviceCheck.exportDeviceStatus + '?deviceId=' + row.deviceId + '&processNumber=' + row.processNumber, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '设备停/启用.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '设备停/启用.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    // åˆ é™¤
    handleDeleteClick(row) {
      this.$confirm('此操作将删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.deviceCheck.deleteDeviceState + '?stateId=' + row.stateId).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getDeviceStatePage(this.clickNodeVal.value)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //导出
    handleDown() {
      this.outLoading = true
      this.$axios.post(this.$api.deviceCheck.deviceStateExport, {
        deviceId: this.clickNodeVal.value,
        processNumber: this.search.processNumber
      }, {responseType: "blob"}).then(res => {
        this.outLoading = false
        const blob = new Blob([res], {type: 'application/octet-stream'});
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '设备停用/启用.xlsx';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '设备停用/启用.xlsx';
            link.click();
            this.$message.success('导出成功')
          }
        }
      }).finally(() => {
        this.outLoading = false
      })
    },
    resetSearch() {
      this.search = {
        size: 20,
        current: 1,
        total: 0,
        processNumber: '',
      }
      this.getDeviceStatePage(this.clickNodeVal.value);
    },
    getDeviceStatePage(deviceId) {
      this.$axios.get(this.$api.deviceCheck.getDeviceStatePage + '?deviceId=' + deviceId + "&size=" + this.search.size + "&current=" + this.search.current + "&processNumber=" + this.search.processNumber).then(res => {
        if (res.code == 200) {
          this.tableDatalist = res.data.records
          this.search.total = res.data.total
        }
      })
    }
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.componentData.entity.deviceId = this.clickNodeVal.value
        this.entityCopy = this.HaveJson(this.componentData.entity)
        this.getDeviceStatePage(newVal.value)
      }
    },
    dialogVisible(newVal) {
      if (!newVal) {
        this.form = {
        }
        this.closeLoading()
        this.currentStep = 0 // æ­¥éª¤æ¡æ˜¾ç¤ºç¬¬å‡ æ­¥
        this.currentStepClick = 0 // ç‚¹å‡»æ­¥éª¤æ¡å˜åŒ–
        this.$refs['form'].clearValidate()
      }
    }
  },
}
</script>

<style scoped>
.dialog-content {
  max-height: 70vh;
  /* è®¾ç½®æœ€å¤§é«˜åº¦ */
  overflow-y: auto;
  /* å¯ç”¨åž‚直滚动 */
}

h4 {
  font-weight: 400;
  font-size: 16px;
  margin: 10px 0;
}

/*
保存提交按钮样式
*/
h4 .title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h4 .title .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}

.tables {
  width: 100%;
  height: calc(100vh - 15em);
}

.el-from {
  max-width: 400px;
  margin: 0 auto;
}

.form-row {
  display: flex;
  justify-content: space-between;
}


.form-row .el-form-item {
  flex: 1;
  /* æ¯ä¸ªè¡¨å•é¡¹å æ®ç›¸åŒæ¯”例的空间 */
  margin-right: 100px;
  /* å¯é€‰ï¼šä¸ºå³ä¾§å…ƒç´ æ·»åŠ é—´è· */
}

/* ç§»é™¤æœ€åŽä¸€ä¸ªå…ƒç´ çš„右边距 */
.form-row .el-form-item:last-child {
  margin-right: 0;

}

.search {
  background-color: #fff;
  margin: 10px 0;
  display: flex;
  align-items: center;
  position: relative;
}

.search_thing {
  display: flex;
  align-items: center;
  height: 40px;
}

.search_label {
  width: 70px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: 70%;
}

.btns {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}

.form .search_label {
  width: 120px;
}
</style>

 src/components/equipment/acceptance-form.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,210 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="仪器设备验收单"
               width="80%" @close="resetForm">
      <el-form ref="modelForm"
               :model="form" :rules="rules" label-width="180px">
        <el-col :span="12">
          <el-form-item label="到货日期：" prop="arrivalDate">
            <el-date-picker
              v-model="form.arrivalDate"
              type="date"
              placeholder="选择日期"
              size="small"
              format="yyyy-MM-dd"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              :disabled="operationType === 'view'">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="金额：" prop="goldAmount">
            <el-input v-model="form.goldAmount" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修单位：" prop="maintenanceunit">
            <el-input v-model="form.maintenanceunit" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收设备主机和备件情况：" prop="spareParts">
            <el-input v-model="form.spareParts" :disabled="operationType === 'view'" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="安装、调试情况：" prop="installationDebugging">
            <el-input v-model="form.installationDebugging" :disabled="operationType === 'view'" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="验收情况：" prop="checkSituation">
            <el-input v-model="form.checkSituation" :disabled="operationType === 'view'" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接收签字：" prop="receivingSignature">
            <el-input v-model="form.receivingSignature" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="厂家代表：" prop="producer">
            <el-input v-model="form.producer" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接收人：" prop="recipient">
            <el-input v-model="form.recipient" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接收日期：" prop="recipientDate">
            <el-date-picker
              v-model="form.recipientDate"
              type="date"
              placeholder="选择日期"
              size="small"
              format="yyyy-MM-dd"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              :disabled="operationType === 'view'">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 æ¶ˆ</el-button>
        <el-button v-if="operationType !== 'view'" :loading="submitFormLoading" type="primary" @click="submitForm">ç¡® è®¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "acceptance-form",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      dialogVisible: false,
      submitFormLoading: false,
      form: {
        arrivalDate: '',
        goldAmount: '',
        maintenanceunit: '',
        spareParts: '',
        installationDebugging: '',
        checkSituation: '',
        receivingSignature: '',
        producer: '',
        recipient: '',
        recipientDate: '',
        deviceId: '',
      },
      operationType: '',
      rules: {
        arrivalDate: [{required: true, message: '请选择到货日期', trigger: 'change'}],
      },
      userList: [],
    }
  },
  mounted() {

  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æ‰“开弹框
    openDialog(type, id, deviceId) {
      this.dialogVisible = true
      this.operationType = type
      this.form.acceptanceId = id
      this.form.deviceId = deviceId
      this.getUserList()
      if (this.form.acceptanceId) {
        this.searchInfo()
      }
    },
    // æŸ¥è¯¢è¯¦æƒ…
    searchInfo() {
      this.$axios.get(this.$api.deviceAcceptance.getDeviceAcceptance + '?acceptanceId=' + this.form.acceptanceId).then(res => {
        if (res.code === 200) {
          this.form = {...res.data}
        }
      }).catch(error => {
        console.error(error)
      })
    },
    // æäº¤è¡¨å•
    submitForm() {
      this.$refs.modelForm.validate((valid) => {
        if (valid) {
          if (this.operationType === 'add') {
            this.$axios.post(this.$api.deviceAcceptance.addDeviceAcceptance,
              this.form, {
                headers: {
                  'Content-Type': 'application/json'
                },
                noQs: true
              }).then(res => {
              if (res.code == 200) {
                this.$message.success('新增成功')
                this.resetForm()
              }
              this.submitFormLoading = false
            }).catch(err => {
              this.submitFormLoading = false
            })
          } else {
            this.$axios.post(this.$api.deviceAcceptance.updateDeviceAcceptance,
              this.form, {
                headers: {
                  'Content-Type': 'application/json'
                },
                noQs: true
              }).then(res => {
              if (res.code == 200) {
                this.$message.success('修改成功')
                this.resetForm()
              }
              this.submitFormLoading = false
            }).catch(err => {
              this.submitFormLoading = false
            })
          }
        }
      })
    },
    // å…³é—­å¼¹æ¡†
    resetForm() {
      this.dialogVisible = false
      this.$emit('closeDialog')
    },
    getUserList() {
      this.$axios.post(this.$api.user.selectUserList, {
        page: {current: -1, size: -1,},
        entity: {name: null}
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code === 201) {
          return
        }
        this.userList = res.data.body.records
      })
    },
  },
}
</script>

<style scoped>
.form-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
</style>

 src/components/equipment/accident-form.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,236 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="dialogVisible" title="仪器设备事故报告单"
               width="80%" @close="resetForm">
      <el-steps :active="currentStep" align-center finish-status="success">
        <el-step title="填写报告单" @click.native="setStep(0)"></el-step>
        <el-step title="事故损失情况评估" @click.native="setStep(1)"></el-step>
        <el-step title="部门负责人意见" @click.native="setStep(2)"></el-step>
        <el-step title="技术负责人意见" @click.native="setStep(3)"></el-step>
        <el-step title="主任意见" @click.native="setStep(4)"></el-step>
      </el-steps>
      <el-form ref="modelForm"
               :model="form" :rules="rules" label-width="160px">
        <el-col v-if="showStep === 0" :span="12">
          <el-form-item label="地点：" prop="address">
            <el-input v-model="form.address" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="12">
          <el-form-item label="日期：" prop="accidentDate">
            <el-date-picker
              v-model="form.accidentDate"
              :disabled="currentStep !== 0"
              format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              size="small"
              style="width: 100%"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="24">
          <el-form-item label="事故情况描述：" prop="descriptionOfAccident">
            <el-input v-model="form.descriptionOfAccident" :disabled="currentStep !== 0" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="24">
          <el-form-item label="请选择评估人：" prop="assessorUserId">
            <el-select v-model="form.assessorUserId" :disabled="currentStep !== 0" placeholder="请选择" size="small" style="width: 50%">
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 1" :span="24">
          <el-form-item label="事故损失情况评估：" prop="assessorOpinion">
            <el-input v-model="form.assessorOpinion" :disabled="currentStep !== 1" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 1" :span="24">
          <el-form-item label="请选择部门负责人：" prop="departmentHeadUserId">
            <el-select v-model="form.departmentHeadUserId" :disabled="currentStep !== 1" placeholder="请选择" size="small" style="width: 50%">
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 2" :span="24">
          <el-form-item label="部门负责人意见：" prop="departmentHeadOpinion">
            <el-input v-model="form.departmentHeadOpinion" :disabled="currentStep !== 2" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 2" :span="24">
          <el-form-item label="请选择技术负责人：" prop="technicalDirectorUserId">
            <el-select v-model="form.technicalDirectorUserId" :disabled="currentStep !== 2" placeholder="请选择" size="small" style="width: 50%">
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 3" :span="24">
          <el-form-item label="技术负责人意见：" prop="technicalDirectorOpinion">
            <el-input v-model="form.technicalDirectorOpinion" :disabled="currentStep !== 3" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 3" :span="24">
          <el-form-item label="请选择主任：" prop="directorHeadUserId">
            <el-select v-model="form.directorHeadUserId" :disabled="currentStep !== 3" placeholder="请选择" size="small" style="width: 50%">
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 4" :span="24">
          <el-form-item label="主任意见：" prop="directorHeadOpinion">
            <el-input v-model="form.directorHeadOpinion" :disabled="currentStep !== 4" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 æ¶ˆ</el-button>
        <el-button v-if="currentStep !== 5" :loading="submitFormLoading" type="primary" @click="submitForm">ç¡® è®¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "accident-form",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      dialogVisible: false,
      submitFormLoading: false,
      form: {
        accidentReportId: '',
        address: '',
        accidentDate: '',
        descriptionOfAccident: '',
        assessorUserId: '',
        assessorOpinion: '',
        departmentHeadUserId: '',
        departmentHeadOpinion: '',
        technicalDirectorUserId: '',
        technicalDirectorOpinion: '',
        directorHeadUserId: '',
        directorHeadOpinion: '',
        flowType: '',
        deviceId: '',
      },
      currentStep: 0,
      showStep: 0,
      rules: {
        assessorUserId: [{ required: true, message: '请选择评估人', trigger: 'change' }],
        departmentHeadUserId: [{ required: true, message: '请选择部门负责人', trigger: 'change' }],
        technicalDirectorUserId: [{ required: true, message: '请选择技术负责人', trigger: 'change' }],
        directorHeadUserId: [{ required: true, message: '请选择主任', trigger: 'change' }],
        directorHeadOpinion: [{ required: true, message: '请填写意见', trigger: 'blur' }],
      },
      userList: [],
    }
  },
  mounted() {

  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æ‰“开弹框
    openDialog (id, deviceId) {
      this.dialogVisible = true
      this.form.accidentReportId = id
      this.form.deviceId = deviceId
      this.getUserList()
      if (this.form.accidentReportId) {
        this.searchInfo()
      }
    },
    // æŸ¥è¯¢è¯¦æƒ…
    searchInfo () {
      this.$axios.get(this.$api.deviceAccidentReport.getDeviceAccidentReport+'?accidentReportId=' + this.form.accidentReportId).then(res => {
        if (res.code === 200) {
          this.form = {...res.data}
          if (res.data.isFinish === 0) {
            if (this.form.assessorUserId) {
              this.currentStep = 1
              this.showStep = 1
            }
            if (this.form.departmentHeadUserId) {
              this.currentStep = 2
              this.showStep = 2
            }
            if (this.form.technicalDirectorUserId) {
              this.currentStep = 3
              this.showStep = 3
            }
            if (this.form.directorHeadUserId) {
              this.currentStep = 4
              this.showStep = 4
            }
          } else {
            this.currentStep = 5
            this.showStep = 4
          }
        }
      }).catch(error => {
        console.error(error)
      })
    },
    setStep (step) {
      this.showStep = step
    },
    // æäº¤è¡¨å•
    submitForm () {
      this.form.flowType = this.currentStep
      this.$refs.modelForm.validate((valid) => {
        if (valid) {
          this.$axios.post(this.$api.deviceAccidentReport.addDeviceAccidentReport,
            this.form, {
              headers: {
                'Content-Type': 'application/json'
              },
              noQs: true
            }).then(res => {
            if (res.code == 200) {
              this.$message.success('新增成功')
              this.resetForm()
            }
            this.submitFormLoading = false
          }).catch(err => {
            this.submitFormLoading = false
          })
        }
      })
    },
    // å…³é—­å¼¹æ¡†
    resetForm () {
      this.dialogVisible = false
      this.$emit('closeDialog')
    },
    getUserList(){
      this.$axios.post(this.$api.user.selectUserList, {
        page: {current: -1, size: -1,},
        entity: {name: null}
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code === 201) {
          return
        }
        this.userList = res.data.body.records
      })
    },
  },
}
</script>

<style scoped>
.form-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
</style>

 src/components/equipment/addVerificationYearPlanDia.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,248 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="applicationForm" title="添加设备核查计划"
               width="80%" @close="closeDialog">
      <div style="display: flex;align-items: center;">
        <el-button style="margin-right: 10px" size="small" type="primary" @click="addTableRow">添加</el-button>
        <span style="width: 80px">计划名称：</span>
        <el-input style="width: 300px;margin-right: 10px" v-model="form.planName" clearable size="small"></el-input>
        <span style="width: 60px">年份：</span>
        <el-date-picker
          v-model="form.planYear"
          type="year"
          value-format="yyyy"
          clearable
          size="small"
          format="yyyy"
          placeholder="选择年">
        </el-date-picker>
      </div>
      <div style="margin: 10px 0">
        <el-table ref="yearTable" :data="examinePlanDetailsList"
                  id="templateParamTable" row-key="deviceId"
                  height="300px" style="width: 100% ;">
          <el-table-column label="设备名称" min-width="190" prop="deviceName">
            <template slot-scope="scope">
              <el-input v-model="scope.row.deviceName" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="设备编号" min-width="190" prop="deviceNumber">
            <template slot-scope="scope">
              <el-input v-model="scope.row.deviceNumber" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="核查时间" min-width="170" prop="checkTime">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.checkTime"
                              clearable
                              format="yyyy-MM"
                              placeholder="选择日期"
                              size="small"
                              style="width:100%"
                              type="date"
                              value-format="yyyy-MM">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="核查指标" min-width="120" prop="checkIndex">
            <template slot-scope="scope">
              <el-input v-model="scope.row.checkIndex" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="核查方法" min-width="120" prop="checkMethod">
            <template slot-scope="scope">
              <el-input v-model="scope.row.checkMethod" clearable size="small" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="结果如何判定" min-width="90" prop="howResults">
            <template slot-scope="scope">
              <el-input v-model="scope.row.howResults" clearable size="small" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="核查责任人" min-width="170" prop="checkChargerUserId">
            <template slot-scope="scope">
              <el-select v-model="scope.row.checkChargerUserId" placeholder="请选择" size="small" style="width: 100%" @change="setCheckChargerUser(scope.row.checkChargerUserId, scope.row)">
                <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="备注" min-width="170" prop="remark">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="80" align="center">
            <template slot-scope="scope">
              <el-button style="color: #f56c6c" type="text" @click="deleteRow(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 æ¶ˆ</el-button>
        <el-button :loading="submitFormLoading" type="primary" @click="submitForm">ç¡® è®¤</el-button>
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="addEquipDia" title="新增年度计划" width="50%">
      <el-table ref="multipleTable" :data="equipOptions" tooltip-effect="dark" height="500"
                style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="设备名称" prop="label"></el-table-column>
        <el-table-column prop="value" label="设备编号"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addEquipDia = false">取 æ¶ˆ</el-button>
        <el-button :loading="submitFormLoading" type="primary" @click="changeMachineName">ç¡® è®¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from "sortablejs";

export default {
  name: "addVerificationYearPlanDia",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      applicationForm: false,
      addEquipDia: false,
      submitFormLoading: false,
      equipOptions: [],
      examinePlanDetailsList: [],
      selectionRows: [],
      userList: [],
      form: {
        planName: '',
        planYear: '',
        examinePlanDetailsList: [],
      }
    }
  },
  mounted() {

  },
  // æ–¹æ³•é›†åˆ
  methods: {
    openDialog () {
      this.form = {
        planName: '',
        planYear: '',
        examinePlanDetailsList: [],
      }
      this.applicationForm = true
      this.getUserList()
    },
    // æ·»åŠ è®¾å¤‡
    addTableRow () {
      this.addEquipDia = true
      this.getEquipOptions()
    },
    handleSelectionChange (selection) {
      this.selectionRows = selection
    },
    setCheckChargerUser (id, row) {
      const index = this.userList.findIndex(item => item.id === id)
      if (index > -1) {
        row.checkChargerUser = this.userList[index].name
      }
    },
    changeMachineName () {
      this.examinePlanDetailsList = []
      this.selectionRows.map(val => {
        this.examinePlanDetailsList.push({deviceId: val.id, deviceName: val.label, deviceNumber: val.value, specificationModel: val.specificationModel})
      })
      this.addEquipDia = false
      this.rowDrop()
    },
    rowDrop() {
      const that = this
      const tbody = document.querySelector(
        '#templateParamTable .el-table__body-wrapper tbody'
      )
      if (!this.sortTable) {
        this.sortTable = Sortable.create(tbody, {
          animation: 200, //动画时长
          handle: ".el-table__row", //可拖拽区域class
          //拖拽中事件
          onMove: ({ dragged, related }) => {
            const oldRow = that.examinePlanDetailsList[dragged.rowIndex] //旧位置数据
            const newRow = that.examinePlanDetailsList[related.rowIndex] //被拖拽的新数据
          },
          //拖拽结束事件
          onEnd: evt => {
            const curRow = that.examinePlanDetailsList.splice(evt.oldIndex, 1)[0];
            that.examinePlanDetailsList.splice(evt.newIndex, 0, curRow);
          }
        })
      }
    },
    // åˆ é™¤è¡¨æ ¼è¡Œ
    deleteRow (index) {
      this.examinePlanDetailsList.splice(index, 1)
    },
    // æäº¤æ–°å¢ž
    submitForm() {
      this.form.examinePlanDetailsList = this.HaveJson(this.examinePlanDetailsList)
      this.submitFormLoading = true
      this.$axios.post(this.$api.deviceExaminePlan.addDeviceExaminePlan,
        this.form, {
          headers: {
            'Content-Type': 'application/json'
          },
          noQs: true
        }).then(res => {
        if (res.code == 200) {
          this.$message.success('新增成功')
          this.closeDialog()
          this.$emit('closeDia')
        }
        this.submitFormLoading = false
      }).catch(err => {
        this.submitFormLoading = false
      })
    },
    closeDialog () {
      this.applicationForm = false
    },
    // èŽ·å–所有设备
    getEquipOptions() {
      this.equipOptions = []
      this.$axios.get(this.$api.deviceScope.deviceScopeSearch+'?status=0').then(res => {
        if (res.code === 200 && res.data) {
          this.equipOptions = res.data.map(m => {
            m.value = m.managementNumber
            m.label = m.deviceName
            return m
          })
        }
      }).catch(error => {
        console.error(error)
      })
    },
    getUserList(){
      this.$axios.post(this.$api.user.selectUserList, {
        page: {current: -1, size: -1,},
        entity: {name: null}
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code === 201) {
          return
        }
        this.userList = res.data.body.records
      })
    },
  },
}
</script>

<style scoped>
</style>

 src/components/equipment/addYearPlanDia.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,231 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="applicationForm" title="添加设备校准计划"
               width="80%" @close="closeDialog">
      <div style="display: flex;align-items: center;">
        <el-button style="margin-right: 10px" size="small" type="primary" @click="addTableRow">添加</el-button>
        <span style="width: 80px">计划名称：</span>
        <el-input style="width: 300px;margin-right: 10px" v-model="form.planName" clearable size="small"></el-input>
        <span style="width: 60px">年份：</span>
        <el-date-picker
          v-model="form.planYear"
          type="year"
          value-format="yyyy"
          clearable
          size="small"
          format="yyyy"
          placeholder="选择年">
        </el-date-picker>
      </div>
      <div style="margin: 10px 0">
        <el-table ref="yearTable" :data="calibrationPlanDetailList"
                  id="templateParamTable" row-key="deviceId"
                  height="300px" style="width: 100% ;">
          <el-table-column label="设备名称及型号" min-width="190" prop="deviceName">
            <template slot-scope="scope">
              <el-input v-model="scope.row.deviceName" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="仪器编号" min-width="190" prop="deviceNumber">
            <template slot-scope="scope">
              <el-input v-model="scope.row.deviceNumber" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="设备数量" min-width="120" prop="deviceAmount">
            <template slot-scope="scope">
              <el-input v-model="scope.row.deviceAmount" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="检定单位" min-width="120" prop="verificationUnit">
            <template slot-scope="scope">
              <el-input v-model="scope.row.verificationUnit" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="检定周期" min-width="120" prop="verificationCycles">
            <template slot-scope="scope">
              <el-input v-model="scope.row.verificationCycles" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="最近检定时间" min-width="170" prop="lastDate">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.lastDate"
                              clearable
                              format="yyyy-MM-dd"
                              placeholder="选择日期"
                              size="small"
                              style="width:100%"
                              type="date"
                              value-format="yyyy-MM-dd">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="本年计划校准时间" min-width="170" prop="planDate">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.planDate"
                              clearable
                              format="yyyy-MM-dd"
                              placeholder="选择日期"
                              size="small"
                              style="width:100%"
                              type="date"
                              value-format="yyyy-MM-dd">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="备注" min-width="170" prop="remark">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="80" align="center">
            <template slot-scope="scope">
              <el-button style="color: #f56c6c" type="text" @click="deleteRow(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 æ¶ˆ</el-button>
        <el-button :loading="submitFormLoading" type="primary" @click="submitForm">ç¡® è®¤</el-button>
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="addEquipDia" title="新增年度计划" width="50%">
      <el-table ref="multipleTable" :data="equipOptions" tooltip-effect="dark" height="500"
                style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="设备名称" prop="label"></el-table-column>
        <el-table-column prop="value" label="设备编号"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addEquipDia = false">取 æ¶ˆ</el-button>
        <el-button :loading="submitFormLoading" type="primary" @click="changeMachineName">ç¡® è®¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from "sortablejs";

export default {
  name: "addYearPlanDia",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      applicationForm: false,
      addEquipDia: false,
      submitFormLoading: false,
      equipOptions: [],
      calibrationPlanDetailList: [],
      selectionRows: [],
      form: {
        planName: '',
        planYear: '',
        calibrationPlanDetailList: [],
      }
    }
  },
  mounted() {

  },
  // æ–¹æ³•é›†åˆ
  methods: {
    openDialog () {
      this.form = {
        planName: '',
        planYear: '',
        examinePlanDetailsList: [],
      }
      this.applicationForm = true
    },
    // æ·»åŠ è®¾å¤‡
    addTableRow () {
      this.addEquipDia = true
      this.getEquipOptions()
    },
    handleSelectionChange (selection) {
      this.selectionRows = selection
    },
    changeMachineName () {
      this.calibrationPlanDetailList = []
      this.selectionRows.map(val => {
        this.calibrationPlanDetailList.push({deviceId: val.id, deviceName: val.label, deviceNumber: val.value, specificationModel: val.specificationModel})
      })
      this.addEquipDia = false
      this.rowDrop()
    },
    rowDrop() {
      const that = this
      const tbody = document.querySelector(
        '#templateParamTable .el-table__body-wrapper tbody'
      )
      if (!this.sortTable) {
        this.sortTable = Sortable.create(tbody, {
          animation: 200, //动画时长
          handle: ".el-table__row", //可拖拽区域class
          //拖拽中事件
          onMove: ({ dragged, related }) => {
            const oldRow = that.calibrationPlanDetailList[dragged.rowIndex] //旧位置数据
            const newRow = that.calibrationPlanDetailList[related.rowIndex] //被拖拽的新数据
          },
          //拖拽结束事件
          onEnd: evt => {
            const curRow = that.calibrationPlanDetailList.splice(evt.oldIndex, 1)[0];
            that.calibrationPlanDetailList.splice(evt.newIndex, 0, curRow);
          }
        })
      }
    },
    // åˆ é™¤è¡¨æ ¼è¡Œ
    deleteRow (index) {
      this.calibrationPlanDetailList.splice(index, 1)
    },
    // æäº¤æ–°å¢ž
    submitForm() {
      this.form.calibrationPlanDetailList = this.HaveJson(this.calibrationPlanDetailList)
      this.submitFormLoading = true
      this.$axios.post(this.$api.deviceCalibrationPlan.addDeviceCalibrationPlan,
        this.form, {
          headers: {
            'Content-Type': 'application/json'
          },
          noQs: true
        }).then(res => {
        if (res.code == 200) {
          this.$message.success('新增成功')
          this.closeDialog()
          this.$emit('closeDia')
        }
        this.submitFormLoading = false
      }).catch(err => {
        this.submitFormLoading = false
      })
    },
    closeDialog () {
      this.applicationForm = false
    },
    // èŽ·å–所有设备
    getEquipOptions() {
      this.equipOptions = []
      this.$axios.get(this.$api.deviceScope.deviceScopeSearch+'?status=0').then(res => {
        if (res.code === 200 && res.data) {
          this.equipOptions = res.data.map(m => {
            m.value = m.managementNumber
            m.label = m.deviceName
            return m
          })
        }
      }).catch(error => {
        console.error(error)
      })
    },
  },
}
</script>

<style scoped>
</style>

 src/components/equipment/applicationForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,239 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="利用外部仪器设备申请表"
               width="80%" @close="resetForm">
      <el-steps :active="currentStep" align-center finish-status="success">
        <el-step title="填写申请表" @click.native="setStep(0)"></el-step>
        <el-step title="申请部门负责人意见" @click.native="setStep(1)"></el-step>
        <el-step title="计量室意见" @click.native="setStep(2)"></el-step>
        <el-step title="批准人" @click.native="setStep(3)"></el-step>
      </el-steps>
      <el-form ref="modelForm"
               :model="form" :rules="rules" label-width="160px">
        <el-col v-if="showStep === 0" :span="12">
          <el-form-item label="单位名称：" prop="unitName">
            <el-input v-model="form.unitName" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="12">
          <el-form-item label="地址：" prop="address">
            <el-input v-model="form.address" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="12">
          <el-form-item label="仪器名称：" prop="deviceName">
            <el-input v-model="form.deviceName" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="12">
          <el-form-item label="型号：" prop="deviceModel">
            <el-input v-model="form.deviceModel" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="12">
          <el-form-item label="配件：" prop="parts">
            <el-input v-model="form.parts" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="12">
          <el-form-item label="对方仪器编号：" prop="instrumentNumber">
            <el-input v-model="form.instrumentNumber" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="24">
          <el-form-item label="仪器技术指标：" prop="technicalIndex">
            <el-input v-model="form.technicalIndex" :disabled="currentStep !== 0" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="24">
          <el-form-item label="需求技术要求：" prop="technicalRequirements">
            <el-input v-model="form.technicalRequirements" :disabled="currentStep !== 0" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="24">
          <el-form-item label="利用原因：" prop="useReason">
            <el-input v-model="form.useReason" :disabled="currentStep !== 0" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="24">
          <el-form-item label="申请部门负责人：" prop="departmentHeadUserId">
            <el-select v-model="form.departmentHeadUserId" :disabled="currentStep !== 0" placeholder="请选择" size="small" style="width: 50%">
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 1" :span="24">
          <el-form-item label="申请部门负责人意见：" prop="departmentHeadOpinion">
            <el-input v-model="form.departmentHeadOpinion" :disabled="currentStep !== 1" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 1" :span="24">
          <el-form-item label="计量室负责人：" prop="meteringRoomUserId">
            <el-select v-model="form.meteringRoomUserId" :disabled="currentStep !== 1" placeholder="请选择" size="small" style="width: 50%">
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 2" :span="24">
          <el-form-item label="计量室意见：" prop="meteringRoomOpinion">
            <el-input v-model="form.meteringRoomOpinion" :disabled="currentStep !== 2" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 2" :span="24">
          <el-form-item label="批准人：" prop="approverUserId">
            <el-select v-model="form.approverUserId" :disabled="currentStep !== 2" placeholder="请选择" size="small" style="width: 50%">
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 3" :span="24">
          <el-form-item label="批准人意见：" prop="approverOpinion">
            <el-input v-model="form.approverOpinion" :disabled="currentStep !== 3" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 æ¶ˆ</el-button>
        <el-button v-if="currentStep !== 4" :loading="submitFormLoading" type="primary" @click="submitForm">ç¡® è®¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "applicationForm",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      dialogVisible: false,
      submitFormLoading: false,
      form: {
        externalApplyId: '',
        unitName: '',
        address: '',
        deviceName: '',
        deviceModel: '',
        parts: '',
        instrumentNumber: '',
        technicalIndex: '',
        technicalRequirements: '',
        useReason: '',
        departmentHeadUserId: '',
        departmentHeadOpinion: '',
        meteringRoomUserId: '',
        meteringRoomOpinion: '',
        approverUserId: '',
        approverOpinion: '',
        flowType: ''
      },
      currentStep: 0,
      showStep: 0,
      rules: {
        departmentHeadUserId: [{ required: true, message: '请选择申请部门负责人', trigger: 'change' }],
        meteringRoomUserId: [{ required: true, message: '请选择计量室负责人', trigger: 'change' }],
        approverUserId: [{ required: true, message: '请选择批准人', trigger: 'change' }],
      },
      userList: [],
    }
  },
  mounted() {

  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æ‰“开弹框
    openDialog (id) {
      this.dialogVisible = true
      this.form.externalApplyId = id
      this.getUserList()
      if (this.form.externalApplyId) {
        this.searchInfo()
      }
    },
    // æŸ¥è¯¢è¯¦æƒ…
    searchInfo () {
      this.$axios.get(this.$api.deviceExternalApply.getDeviceExternalApply+'?externalApplyId=' + this.form.externalApplyId).then(res => {
        if (res.code === 200) {
          this.form = {...res.data}
          if (res.data.isFinish === 0) {
            if (this.form.departmentHeadUserId) {
              this.currentStep = 1
              this.showStep = 1
            }
            if (this.form.meteringRoomUserId) {
              this.currentStep = 2
              this.showStep = 2
            }
            if (this.form.approverUserId) {
              this.currentStep = 3
              this.showStep = 3
            }
          } else {
            this.currentStep = 4
            this.showStep = 3
          }
        }
      }).catch(error => {
        console.error(error)
      })
    },
    setStep (step) {
      this.showStep = step
    },
    // æäº¤è¡¨å•
    submitForm () {
      this.form.flowType = this.currentStep
      this.$refs.modelForm.validate((valid) => {
        if (valid) {
          this.$axios.post(this.$api.deviceExternalApply.addDeviceExternalApply,
            this.form, {
              headers: {
                'Content-Type': 'application/json'
              },
              noQs: true
            }).then(res => {
            if (res.code == 200) {
              this.$message.success('新增成功')
              this.resetForm()
            }
            this.submitFormLoading = false
          }).catch(err => {
            this.submitFormLoading = false
          })
        }
      })
    },
    // å…³é—­å¼¹æ¡†
    resetForm () {
      this.dialogVisible = false
      this.$emit('closeDialog')
    },
    getUserList(){
      this.$axios.post(this.$api.user.selectUserList, {
        page: {current: -1, size: -1,},
        entity: {name: null}
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code === 201) {
          return
        }
        this.userList = res.data.body.records
      })
    },
  },
}
</script>

<style scoped>
.form-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
</style>

 src/components/equipment/check-record.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,424 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="仪器设备期间核查比对记录表"
               width="80%" @close="resetForm">
      <el-steps :active="currentStep" align-center finish-status="success">
        <el-step title="填写设备核查对比记录"></el-step>
        <el-step title="审核"></el-step>
      </el-steps>
      <el-row>
        <el-col :span="8">
          <div class="form-item">
            <span style="width: 110px">仪器名称：</span>
            <el-select v-model="form.deviceName"
                       :disabled="currentStep !== 0"
                       class="table_input"
                       clearable
                       filterable
                       placeholder="设备名称"
                       size="small"
                       style="width:200px"
                       @change="(val)=>changeMachineName(val)">
              <el-option v-for="item in equipOptions" :key="item.value"  :label="item.label" :value="item.label">
                {{item.label + '-' + item.value}}
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="form-item">
            <span style="width: 130px">仪器编号：</span>
            <el-input v-model="form.deviceNumber" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="form-item">
            <span style="width: 130px">精度等级：</span>
            <el-input v-model="form.accuracyGrade" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </div>
        </el-col>
      </el-row>
      <div style="margin: 10px">核查使用物质</div>
      <el-row>
        <el-col :span="8">
          <div class="form-item">
            <span style="width: 130px">名称：</span>
            <el-input v-model="form.materialName" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="form-item">
            <span style="width: 130px">编号：</span>
            <el-input v-model="form.materialNumber" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="form-item">
            <span style="width: 130px">精度/不确定度：</span>
            <el-input v-model="form.materialAccuracyUncertainty" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="form-item">
            <span style="width: 130px">型号：</span>
            <el-input v-model="form.materialModel" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="form-item">
            <span style="width: 130px">核查方式：</span>
            <el-input v-model="form.materialCheckMethod" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="form-item">
            <span style="width: 130px">核查项目：</span>
            <el-input v-model="form.materialCheckItems" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="form-item">
            <span style="width: 130px">温度：</span>
            <el-input v-model="form.temperature" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="form-item">
            <span style="width: 130px">湿度：</span>
            <el-input v-model="form.humidity" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </div>
        </el-col>
      </el-row>
      <el-button size="small" style="margin: 10px 0" type="primary" @click="addRow">添加</el-button>
      <el-table :data="recordDetailList" height="300" style="width: 100%">
        <el-table-column label="测试点" min-width="130" prop="testPoint">
          <template slot-scope="scope">
            <el-input v-model="scope.row.testPoint" clearable size="small"></el-input>
          </template>
        </el-table-column>
        <el-table-column min-width="180">
          <template slot="header" slot-scope="scope">
            <el-input v-model="form.dataValue1" :disabled="currentStep !== 0" size="small"/>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.dataValue1" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </template>
        </el-table-column>
        <el-table-column min-width="180">
          <template slot="header" slot-scope="scope">
            <el-input v-model="form.dataValue2" :disabled="currentStep !== 0" size="small"/>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.dataValue2" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </template>
        </el-table-column>
        <el-table-column min-width="180">
          <template slot="header" slot-scope="scope">
            <el-input v-model="form.dataValue3" :disabled="currentStep !== 0" size="small"/>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.dataValue3" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </template>
        </el-table-column>
        <el-table-column min-width="180">
          <template slot="header" slot-scope="scope">
            <el-input v-model="form.dataValue4" :disabled="currentStep !== 0" size="small"/>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.dataValue4" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </template>
        </el-table-column>
        <el-table-column min-width="180">
          <template slot="header" slot-scope="scope">
            <el-input v-model="form.dataValue5" :disabled="currentStep !== 0" size="small"/>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.dataValue5" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </template>
        </el-table-column>
        <el-table-column min-width="180">
          <template slot="header" slot-scope="scope">
            <el-input v-model="form.dataValue6" :disabled="currentStep !== 0" size="small"/>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.dataValue6" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <table border="1" cellspacing="10" class="table">
        <tr>
          <td>最大偏差</td>
          <th>
            <el-input v-model="form.maximun1" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </th>
          <th>
            <el-input v-model="form.maximun2" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </th>
          <th>
            <el-input v-model="form.maximun3" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </th>
          <th>
            <el-input v-model="form.maximun4" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </th>
          <th>
            <el-input v-model="form.maximun5" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </th>
          <th>
            <el-input v-model="form.maximun6" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </th>
        </tr>
        <tr>
          <td>相对偏差</td>
          <th>
            <el-input v-model="form.relative1" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </th>
          <th>
            <el-input v-model="form.relative2" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </th>
          <th>
            <el-input v-model="form.relative3" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </th>
          <th>
            <el-input v-model="form.relative4" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </th>
          <th>
            <el-input v-model="form.relative5" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </th>
          <th>
            <el-input v-model="form.relative6" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </th>
        </tr>
      </table>
      <el-row>
        <el-col :span="24">
          <div class="form-item">
            <span style="width: 80px">判定：</span>
            <el-input v-model="form.determine" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="form-item">
            <span style="width: 80px">备注：</span>
            <el-input v-model="form.remark" :disabled="currentStep !== 0" clearable size="small" type="textarea"></el-input>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="form-item">
            <span style="width: 116px">审核人：</span>
            <el-select v-model="form.reviewUserId" :disabled="currentStep !== 0" placeholder="请选择" size="small" style="width: 100%">
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 æ¶ˆ</el-button>
        <el-button v-if="currentStep === 0" :loading="submitFormLoading" type="primary" @click="submitCheck">ç¡® å®š</el-button>
        <el-button v-if="currentStep === 1" :loading="submitFormLoading" @click="examine(0)">不通过</el-button>
        <el-button v-if="currentStep === 1" :loading="submitFormLoading" type="primary" @click="examine(1)">通 è¿‡</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "check-record",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      dialogVisible: false,
      recordDetailList: [],
      search: "",
      form: {
        deviceName: '',
        deviceNumber: '',
        accuracyGrade: '',
        materialName: '',
        materialNumber: '',
        materialAccuracyUncertainty: '',
        materialModel: '',
        materialCheckMethod: '',
        materialCheckItems: '',
        temperature: '',
        humidity: '',
        recordDetailList: [],
        dataValue1: '',
        dataValue2: '',
        dataValue3: '',
        dataValue4: '',
        dataValue5: '',
        dataValue6: '',
        maximun1: '',
        maximun2: '',
        maximun3: '',
        maximun4: '',
        maximun5: '',
        maximun6: '',
        relative1: '',
        relative2: '',
        relative3: '',
        relative4: '',
        relative5: '',
        relative6: '',
        determine: '',
        remark: '',
        planDetailsId: '',
        checkerUserId: '',
      },
      currentStep: 0,
      distributionDetailList: [
        {label: '最大偏差', value: 1},
        {label: '相对偏差', value: 2},
      ],
      equipOptions: [],
      submitFormLoading: false,
      userList: [],
    }
  },
  mounted() {

  },
  // æ–¹æ³•é›†åˆ
  methods: {
    openDialog (row) {
      this.dialogVisible = true
      this.form.planDetailsId = row.planDetailsId
      this.getEquipOptions()
      this.getUserList()
      this.searchInfo()
    },
    searchInfo () {
      this.$axios.get(this.$api.deviceExaminePlan.getExamineRecord+'?planDetailsId=' + this.form.planDetailsId).then(res => {
        if (res.code === 200) {
          let planDetailsId = this.form.planDetailsId
          this.form = {...res.data}
          this.form.planDetailsId = planDetailsId
          this.recordDetailList = this.form.recordDetailList || []
          if (!this.form.checkerUserId) {
            this.currentStep = 0
          } else {
            this.currentStep = 1
          }
          if (this.form.reviewStatus === 1) {
            this.currentStep = 2
          }
        }
      }).catch(error => {
        console.error(error)
      })
    },
    // èµ‹å€¼ä»ªå™¨ç¼–号
    changeMachineName (value) {
      const index = this.equipOptions.findIndex(item => item.deviceName === value)
      this.form.deviceNumber = this.equipOptions[index].managementNumber
    },
    addRow () {
      this.recordDetailList.push({testPoint: ''})
    },
    // æäº¤è¡¨å•
    submitCheck () {
      console.log(333,this.form)
      this.form.recordDetailList = this.HaveJson(this.recordDetailList)
      this.submitFormLoading = true
      this.$axios.post(this.$api.deviceExaminePlan.addExamineRecord,
        this.form, {
          headers: {
            'Content-Type': 'application/json'
          },
          noQs: true
        }).then(res => {
        if (res.code == 200) {
          this.$message.success('新增成功')
          this.resetForm()
        }
        this.submitFormLoading = false
      }).catch(err => {
        this.submitFormLoading = false
      })
    },
    // æäº¤å®¡æ ¸
    examine (statue) {
      const params = {
        planDetailsId: this.form.planDetailsId,
        reviewStatus: statue,
      }
      this.$axios.post(this.$api.deviceExaminePlan.reviewExamineRecord,
        params, {
          headers: {
            'Content-Type': 'application/json'
          },
          noQs: true
        }).then(res => {
        if (res.code == 200) {
          this.$message.success('审核成功')
          this.resetForm()
        }
        this.submitFormLoading = false
      }).catch(err => {
        this.submitFormLoading = false
      })
    },
    resetForm () {
      this.dialogVisible = false
      this.$emit('closeDialog1')
    },
    // èŽ·å–所有设备
    getEquipOptions() {
      this.equipOptions = []
      this.$axios.get(this.$api.deviceScope.deviceScopeSearch+'?status=0').then(res => {
        if (res.code === 200 && res.data) {
          this.equipOptions = res.data.map(m => {
            m.value = m.managementNumber
            m.label = m.deviceName
            m.id = m.id
            return m
          })
        }
      }).catch(error => {
        console.error(error)
      })
    },
    getUserList(){
      this.$axios.post(this.$api.user.selectUserList, {
        page: {current: -1, size: -1,},
        entity: {name: null}
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code === 201) {
          return
        }
        this.userList = res.data.body.records
      })
    },
  },
}
</script>

<style scoped>
.table td {
  padding: 10px;
}
.table th {
  padding: 10px;
}
.form {
  display: flex;
  align-items: center;
}
.form-item {
  display: flex;
  align-items: center;
  margin-right: 10px;
  margin-top: 10px;
}
>>>.el-dialog__body {
  max-height: 650px;
  overflow-y: auto;
}
</style>

 src/components/equipment/equipment-acceptance.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,377 @@
<template>
  <div>
    <div>
      <div style="margin: 10px 0;text-align: right">
        <el-button size="small" type="primary" @click="handleForm('add')">新增</el-button>
      </div>
      <div>
        <el-table ref="yearTable" v-loading="yearTableDetailDataLoading" :data="yearTableDetailData"
                  height="calc(100vh - 18em)"
                  style="width: 100% ;">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index" width="70"></el-table-column>
          <el-table-column label="到货日期" min-width="150" prop="arrivalDate"></el-table-column>
          <el-table-column label="金额" min-width="100" prop="goldAmount"></el-table-column>
          <el-table-column label="维修单位" min-width="150" prop="maintenanceunit"></el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column align="center" label="操作" min-width="180">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="handleForm('edit',scope.row.acceptanceId)">编辑</el-button>
              <el-button size="small" type="text" @click="handleForm('view',scope.row.acceptanceId)">查看</el-button>
              <el-button size="small" type="text" @click="record(scope.row)">附件</el-button>
              <el-button size="small" type="text" @click="handleDownOne(scope.row.acceptanceId)">导出</el-button>
              <el-button size="small" style="color: #f56c6c" type="text" @click="deleteFun(scope.row.acceptanceId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
                       :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange1"
                       @current-change="handleCurrentChange1">
        </el-pagination>
      </div>
    </div>
    <acceptance-form v-if="applicationForm" ref="applicationForm" @closeDialog="closeDialog"></acceptance-form>
    <!--上传报告-->
    <el-dialog :visible.sync="filesDialogVisible" title="附件" width="80%" @closed="closeFilesLook">
      <div style="display: flex;justify-content: space-between;">
        <el-upload ref='upload'
                   :action="fileAction"
                   :auto-upload="true"
                   :before-upload="fileBeforeUpload"
                   :data="{acceptanceId: acceptanceId}"
                   :headers="headers" :on-error="onError"
                   :on-success="handleSuccessUp"
                   :show-file-list="false"
                   accept='.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar' style="width: 80px !important;">
          <el-button size="small" style="height: 38px" type="primary">附件上传</el-button>
        </el-upload>
      </div>
      <div>
        <ZTTable
          ref="yearTable"
          :column="columnData"
          :height="'calc(100vh - 30em)'"
          :highlightCurrentRow="true"
          :table-data="tableData"
          :table-loading="tableLoading"
          style="margin-top: 0.5em;">
        </ZTTable>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="lookDialogVisible"
      fullscreen
      title="查看附件" top="5vh" width="800px">
      <filePreview v-if="lookDialogVisible" :currentFile="{}"
                   :fileUrl="fileUrl" style="height: 90vh;overflow-y: auto;"/>
    </el-dialog>
  </div>
</template>

<script>
import AcceptanceForm from "./acceptance-form.vue";
import ZTTable from "../caorui/ZTTable/index.vue";
import filePreview from "../tool/file-preview.vue";

export default {
  name: "equipment-acceptance",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {filePreview, ZTTable, AcceptanceForm},
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      pagination1: {
        size: 10,
        current: 1,
        total: 0,
      },
      yearTableDetailDataLoading: false,
      yearTableDetailData: [],
      applicationForm: false,
      filesDialogVisible: false,
      columnData: [
        {
          label: '文件名称',
          prop: 'fileName',
          minWidth: '150px'
        },
        {
          dataType: 'action',
          minWidth: '100',
          label: '操作',
          fixed: 'right',
          operation: [
            {
              name: '预览',
              type: 'text',
              clickFun: (row) => {
                this.handleLook(row)
              }
            },
            {
              name: '下载',
              type: 'text',
              clickFun: (row) => {
                this.upload(row)
              }
            },
            {
              name: '删除',
              type: 'text',
              color: '#f56c6c',
              clickFun: (row) => {
                this.delete(row)
              }
            }
          ]
        }
      ],
      tableData: [],
      tableLoading: false,
      acceptanceId: '', // ä¸Šä¼ é™„件当前行的id
      currentInfo:{},
      lookDialogVisible: false,
      fileUrl: ''
    }
  },
  mounted() {
    this.getYearTableDetailData(this.clickNodeVal.value)
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æŸ¥è¯¢
    getYearTableDetailData(deviceId) {
      this.yearTableDetailDataLoading = true
      this.$axios.post(this.$api.deviceAcceptance.pageDeviceAcceptance, {
        page: {
          current: this.pagination1.current,
          size: this.pagination1.size,
        },
        entity: {
          deviceId: deviceId,
        }
      }, {
        headers: {
          'Content-Type': 'application/json'
        },
        noQs: true
      }).then(res => {
        if (res.code == 200) {
          this.yearTableDetailData = res.data.records
          this.pagination1.total = res.data.total
        }
        this.yearTableDetailDataLoading = false
      }).catch(err => {
        this.yearTableDetailDataLoading = false
      })
    },
    handleForm(type, id) {
      this.applicationForm = true
      this.$nextTick(() => {
        this.$refs.applicationForm.openDialog(type, id, this.clickNodeVal.value)
      })
    },
    closeDialog() {
      this.applicationForm = false
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // æ‰“开报告弹框
    record (row) {
      this.filesDialogVisible = true
      this.acceptanceId = row.acceptanceId
      this.searchTableList()
    },
    // æŸ¥è¯¢é™„件列表
    searchTableList () {
      this.tableLoading = true
      this.$axios.get(this.$api.deviceAcceptance.getDeviceAcceptanceFileList + '?acceptanceId=' + this.acceptanceId).then(res => {
        this.tableLoading = false
        if (res.code === 201) return
        this.tableData = res.data
      }).catch(err => {
        this.tableLoading = false
        console.log('err---', err);
      })
    },
    // æŸ¥çœ‹æ–‡ä»¶
    handleLook(row){
      this.currentInfo = row
      this.lookDialogVisible = true
      const state = /\.(jpg|jpeg|png|gif)$/i.test(this.currentInfo.fileUrl)
      if (state) {
        this.fileUrl = this.javaApi+'/img/'+ this.currentInfo.fileUrl
      } else {
        this.fileUrl = this.javaApi+'/word/'+ this.currentInfo.fileUrl
      }
    },
    // ä¸‹è½½
    upload (row) {
      let url = '';
      if(row.type==1){
        url = this.javaApi+'/img/'+row.fileUrl
        file.downloadIamge(url,row.fileName)
      }else{
        url = this.javaApi+'/word/'+row.fileUrl
        const link = document.createElement('a');
        link.href = url;
        link.download = row.fileName;
        link.click();
      }
    },
    // åˆ é™¤
    delete (row) {
      this.$confirm('此操作将删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true
        this.$axios.get(this.$api.deviceAcceptance.delDeviceAcceptanceFileList + '?acceptanceFileId=' + row.acceptanceFileId).then(res => {
          this.tableLoading = false
          if (res.code === 201) return
          this.$message.success('删除成功')
          this.searchTableList()
        }).catch(err => {
          this.tableLoading = false
          console.log('err---', err);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // ä¸Šä¼ é™„件
    fileBeforeUpload(file) {
      let flag = true
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        flag = false
      }
      if (!flag) {
        return Promise.reject(flag); //正确的终止
      }
    },
    onError(err, file, fileList,type) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    handleSuccessUp(response, ) {
      this.upLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功');
        this.searchTableList()
      }
    },
    closeFilesLook () {
      this.filesDialogVisible = false
    },
    // åˆ†é¡µ
    handleSizeChange1(val) {
      this.pagination1.size = val
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // åˆ†é¡µ
    handleCurrentChange1(val) {
      this.pagination1.current = val
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // å¯¼å‡º
    handleDownOne(id) {
      this.outLoading = true
      this.$axios.get(this.$api.deviceAcceptance.exportDeviceAcceptance + '?acceptanceId=' + id, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], {type: 'application/octet-stream'});
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '设备验收.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '设备验收.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    // åˆ é™¤
    deleteFun(id) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.deviceAcceptance.delDeviceAcceptance + '?acceptanceId=' + id).then(res => {
          this.$message.success('删除成功！');
          this.getYearTableDetailData(this.clickNodeVal.value);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getYearTableDetailData(newVal.value);
      }
    },
  },
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
    },
    fileAction() {
      return this.javaApi + this.$api.deviceAcceptance.uploadDeviceAcceptanceFile

    }
  },
}
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-search {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>

 src/components/equipment/equipment-accident.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,194 @@
<template>
  <div>
    <div>
      <div style="margin: 10px 0;text-align: right">
        <el-button size="small" type="primary" @click="getYearTableDetailData(clickNodeVal.value)">刷新</el-button>
        <el-button size="small" type="primary" @click="handleForm('')">新增</el-button>
      </div>
      <div>
        <el-table ref="yearTable" v-loading="yearTableDetailDataLoading" :data="yearTableDetailData"
                  height="calc(100vh - 18em)"
                  style="width: 100% ;">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index" width="70"></el-table-column>
<!--          <el-table-column label="仪器名称" min-width="150" prop="unitName"></el-table-column>-->
<!--          <el-table-column label="型号" min-width="100" prop="model"></el-table-column>-->
          <el-table-column label="地点" min-width="150" prop="address"></el-table-column>
          <el-table-column label="日期" min-width="180" prop="accidentDate"></el-table-column>
          <el-table-column label="事故情况" min-width="180" prop="descriptionOfAccident" show-overflow-tooltip></el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column align="center" fixed="right" label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.ratifyStatus === 1" size="small" type="text" @click="handleForm(scope.row.accidentReportId)">操作</el-button>
              <el-button size="small" type="text" @click="handleDownOne(scope.row.accidentReportId)">导出</el-button>
              <el-button :disabled="scope.row.isFinish === 1" size="small" style="color: #f56c6c" type="text" @click="deleteFun(scope.row.accidentReportId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
                       :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange1"
                       @current-change="handleCurrentChange1">
        </el-pagination>
      </div>
    </div>
    <accident-form v-if="applicationForm" ref="applicationForm" @closeDialog="closeDialog"></accident-form>
  </div>
</template>

<script>
import AccidentForm from "./accident-form.vue";

export default {
  name: "equipment-accident",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {AccidentForm},
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      pagination1: {
        size: 10,
        current: 1,
        total: 0,
      },
      yearTableDetailDataLoading: false,
      yearTableDetailData: [],
      applicationForm: false
    }
  },
  mounted() {
    this.getYearTableDetailData(this.clickNodeVal.value)
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æŸ¥è¯¢
    getYearTableDetailData(deviceId) {
      this.yearTableDetailDataLoading = true
      this.$axios.post(this.$api.deviceAccidentReport.pageDeviceAccidentReport, {
        page: {
          current: this.pagination1.current,
          size: this.pagination1.size,
        },
        entity: {
          deviceId: deviceId,
        }
      }, {
        headers: {
          'Content-Type': 'application/json'
        },
        noQs: true
      }).then(res => {
        if (res.code == 200) {
          this.yearTableDetailData = res.data.records
          this.pagination1.total = res.data.total
        }
        this.yearTableDetailDataLoading = false
      }).catch(err => {
        this.yearTableDetailDataLoading = false
      })
    },
    handleForm(id) {
      this.applicationForm = true
      this.$nextTick(() => {
        this.$refs.applicationForm.openDialog(id, this.clickNodeVal.value)
      })
    },
    closeDialog() {
      this.applicationForm = false
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // åˆ†é¡µ
    handleSizeChange1(val) {
      this.pagination1.size = val
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // åˆ†é¡µ
    handleCurrentChange1(val) {
      this.pagination1.current = val
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // å¯¼å‡º
    handleDownOne(id) {
      this.outLoading = true
      this.$axios.get(this.$api.deviceAccidentReport.exportDeviceAccidentReport + '?accidentReportId=' + id, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '仪器设备事故报告单.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '仪器设备事故报告单.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    // åˆ é™¤
    deleteFun(id) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.deviceAccidentReport.delDeviceAccidentReport + '?accidentReportId=' + id).then(res => {
          this.$message.success('删除成功！');
          this.getYearTableDetailData(this.clickNodeVal.value);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getYearTableDetailData(newVal.value);
      }
    },
  }
}
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-search {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>

 src/components/equipment/equipment-calibration-plan.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,602 @@
<template>
<!--  è®¾å¤‡æ ¡å‡†è®¡åˆ’-->
  <div>
    <div>
      <div style="margin: 10px 0;display: flex;align-items: center;justify-content: space-between;">
        <span>年度计划表</span>
        <div>
          <el-button size="small" type="primary" @click="getYearTableData">刷新</el-button>
          <el-button style="margin-right: 10px" size="small" type="primary" @click="addYearPlan">新增</el-button>
<!--          <el-button size="small" type="primary" @click="record">导入</el-button>-->
        </div>
      </div>
      <div>
        <el-table ref="yearTable" v-loading="yearTableDataLoading" :data="yearTableData"
                  height="calc(60vh - 20em)"
                  highlight-current-row
                  style="width: 100% ;" @current-change="currentChange">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index" width="70"></el-table-column>
          <el-table-column label="年份" min-width="80" prop="planYear"></el-table-column>
          <el-table-column label="计划名称" min-width="180" prop="planName"></el-table-column>
          <el-table-column label="编制人" min-width="100" prop="writeName"></el-table-column>
          <el-table-column label="编制日期" min-width="150" prop="writeTime"></el-table-column>
          <el-table-column label="批准状态" min-width="100" prop="ratifyStatus">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.ratifyStatus ===  1" type="success">批准</el-tag>
              <el-tag v-if="scope.row.ratifyStatus ===  0" type="danger">不批准</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="批准内容" min-width="150" prop="ratifyRemark"></el-table-column>
          <el-table-column label="批准人" min-width="100" prop="ratifyName"></el-table-column>
          <el-table-column label="批准时间" min-width="150" prop="ratifyTime"></el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column align="center" fixed="right" label="操作" min-width="140">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.ratifyStatus === 1" size="small" type="text" @click="handleApprove(scope.row.planId)">批准</el-button>
              <el-button size="small" type="text" @click="downLoadPost(scope.row.planId)">导出</el-button>
              <el-button size="small" style="color: #f56c6c" type="text" @click="deleteFun(scope.row.planId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination.size" :page-sizes="[10, 20, 30, 50, 100]"
                       :total="pagination.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
    <div>
      <span>年度计划明细表</span>
      <div class="title">
        <div class="title-search">
          <span style="width: 120px;font-size: 14px">设备名称及型号：</span>
          <el-input v-model="searchForm.deviceName" clearable size="small" style="margin-right: 10px;width: 220px"></el-input>
          <span style="width: 80px;font-size: 14px">仪器编号：</span>
          <el-input v-model="searchForm.deviceNumber" clearable size="small" style="margin-right: 10px;width: 220px"></el-input>
          <el-button size="small" type="primary" @click="getYearTableDetailData(currentRow)">查 è¯¢</el-button>
          <el-button size="small" @click="reset">重 ç½®</el-button>
        </div>
        <div>
          <el-button size="small" type="primary" @click="handleForm('add')">新增</el-button>
        </div>
      </div>
      <div>
        <el-table ref="yearTableDetailData" v-loading="yearTableDetailDataLoading"
                  :data="yearTableDetailData"
                  height="calc(60vh - 20em)" style="width: 100% ;">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index" width="70"></el-table-column>
          <el-table-column label="设备名称及型号" min-width="180" prop="deviceName"></el-table-column>
          <el-table-column label="设备数量" min-width="180" prop="deviceAmount"></el-table-column>
          <el-table-column label="仪器编号" min-width="150" prop="deviceNumber"></el-table-column>
          <el-table-column label="检定单位" min-width="150" prop="verificationUnit"> </el-table-column>
          <el-table-column label="检定周期" min-width="150" prop="verificationCycles"></el-table-column>
          <el-table-column label="最近检定时间" min-width="150" prop="lastDate"></el-table-column>
          <el-table-column label="本年计划校准时间" min-width="150" prop="planDate"></el-table-column>
          <el-table-column label="备注" min-width="150" prop="remark"></el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column align="center" fixed="right" label="操作" min-width="140">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="handleForm('edit', scope.row)">编辑</el-button>
              <el-button size="small" type="text" @click="handleForm('view', scope.row)">查看</el-button>
              <el-button size="small" style="color: #f56c6c" type="text" @click="deleteFun1(scope.row.planDetailId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
                       :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange1"
                       @current-change="handleCurrentChange1">
        </el-pagination>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="设备校准计划"
               width="80%" @close="resetForm">
      <el-form ref="modelForm" :model="form" :rules="rules" label-width="150px">
        <el-col :span="12">
          <el-form-item label="设备名称及型号：" prop="deviceName">
            <el-input v-model="form.deviceName" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备数量：" prop="deviceAmount">
            <el-input v-model="form.deviceAmount" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="仪器编号：" prop="deviceNumber">
            <el-input v-model="form.deviceNumber" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检定单位：" prop="verificationUnit">
            <el-input v-model="form.verificationUnit" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检定周期：" prop="verificationCycles">
            <el-input v-model="form.verificationCycles" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最近检定时间：" prop="lastDate">
            <el-date-picker v-model="form.lastDate"
                            :disabled="operationType === 'view'"
                            clearable
                            format="yyyy-MM-dd"
                            placeholder="选择日期"
                            size="small"
                            style="width:100%"
                            type="date"
                            value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="本年计划校准时间：" prop="planDate">
            <el-date-picker v-model="form.planDate"
                            :disabled="operationType === 'view'"
                            clearable
                            format="yyyy-MM-dd"
                            placeholder="选择日期"
                            size="small"
                            style="width:100%"
                            type="date"
                            value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注：" prop="remark">
            <el-input v-model="form.remark" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 æ¶ˆ</el-button>
        <el-button :loading="submitFormLoading" type="primary" @click="submitForm">ç¡® è®¤</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="approvalDialog" title="批准" width="30%" @close="approvalDialog = false">
      <span>
        æ‰¹å‡†å¤‡æ³¨ï¼š
        <el-input v-model="ratifyRemark" type="textarea"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="approvalLoading" @click="handleApproval(0)">不批准</el-button>
        <el-button :loading="approvalLoading" type="primary" @click="handleApproval(1)">批 å‡†</el-button>
      </span>
    </el-dialog>
    <!--上传报告-->
    <el-dialog :visible.sync="uploadDia" title="数据导入" width="500px">
      å¹´ä»½ï¼š
      <el-date-picker
        v-model="planYear"
        type="year"
        value-format="yyyy"
        clearable
        format="yyyy"
        placeholder="选择年">
      </el-date-picker>
      <div style="margin: 0 auto;">
        <el-upload ref="upload1" :action="action" :auto-upload="false" :file-list="fileList" :headers="headers" :limit="1"
                   accept='.doc,.docx'
                   :on-change="beforeUpload" :on-error="onError" :on-success="handleSuccessUp" drag
                   name="file">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadDia = false">取 æ¶ˆ</el-button>
        <el-button :loading="uploading" type="primary" @click="submitUpload()">上 ä¼ </el-button>
      </span>
    </el-dialog>
    <add-year-plan-dia v-if="addYearPlanDia" ref="addYearPlanDia" @closeDia="closeDia"></add-year-plan-dia>
  </div>
</template>

<script>
import AddYearPlanDia from "./addYearPlanDia.vue";
import AddVerificationYearPlanDia from "./addVerificationYearPlanDia.vue";

export default {
  name: "equipment-calibration-plan",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {AddVerificationYearPlanDia, AddYearPlanDia},
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      dialogVisible: false,
      searchForm: {
        deviceName: '',
        deviceNumber: '',
      },
      yearTableData: [],
      yearTableDetailData: [],
      pagination: {
        size: 10,
        current: 1,
        total: 0,
      },
      pagination1: {
        size: 10,
        current: 1,
        total: 0,
      },
      form: {
        deviceName: '',
        deviceAmount: '',
        deviceNumber: '',
        verificationUnit: '',
        verificationCycles: '',
        lastDate: '',
        planDate: '',
        remark: '',
        planId: '',
        planDetailId: '',
      },
      operationType: '',
      rules: {
        deviceNumber: [{ required: true, message: '请填写仪器编号', trigger: 'blur' }],
        planDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
      },
      yearTableDataLoading: false,
      yearTableDetailDataLoading: false,
      currentRow: {},
      approvalDialog: false,
      approvalLoading: false,
      submitFormLoading: false,
      ratifyRemark: '',
      currentRowId: '',
      uploadDia: false,
      uploading: false,
      addYearPlanDia: false,
      fileList: [],
      planYear: '',
    }
  },
  mounted() {
    this.getYearTableData()
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æŸ¥è¯¢å¹´åº¦è®¡åˆ’表
    getYearTableData () {
      this.yearTableDataLoading = true
      this.$axios.post(this.$api.deviceCalibrationPlan.pageDeviceCalibrationPlan,{
        page: {
          current: 1,
          size: 99,
        },
        entity: {}
      }, {
        headers: {
          'Content-Type': 'application/json'
        },
        noQs: true
      }).then(res => {
        if (res.code == 200) {
          this.yearTableData = res.data.records
          this.pagination.total = res.data.total
          if (this.yearTableData.length > 0) {
            this.currentRow = this.yearTableData[0]
            this.$refs.yearTable.setCurrentRow(this.currentRow)
          }
        }
        this.yearTableDataLoading = false
      }).catch(err => {
        this.yearTableDataLoading = false
      })
    },
    // åˆ†é¡µ
    handleSizeChange(val) {
      this.pagination.size = val
      this.getYearTableData()
    },
    // åˆ†é¡µ
    handleCurrentChange(val) {
      this.pagination.current = val
      this.getYearTableData()
    },
    // å¹´åº¦è®¡åˆ’表-批准
    handleApprove(id) {
      this.currentRowId = id
      this.approvalDialog = true
    },
    // å¹´åº¦è®¡åˆ’表-导出
    downLoadPost(planId) {
      this.$axios.get(this.$api.deviceCalibrationPlan.exportDeviceCalibrationPlanDetail + '?planId=' + planId,{responseType: "blob"}).then(res => {
        const blob = new Blob([res],{ type: 'application/msword' });
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '设备校准计划.docx';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '设备校准计划.docx';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    // å¹´åº¦è®¡åˆ’表-删除
    deleteFun(id) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.deviceCalibrationPlan.delQualitySupervise + '?planId=' + id).then(res => {
          this.$message.success('删除成功！');
          this.getYearTableData();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // å¹´åº¦è®¡åˆ’详情表-删除
    deleteFun1(id) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.deviceCalibrationPlan.delDeviceCalibrationPlanDetail + '?planDetailsId=' + id).then(res => {
          this.$message.success('删除成功！');
          this.getYearTableDetailData(this.currentRow)
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    currentChange (row) {
      this.currentRow = row
      this.getYearTableDetailData(this.currentRow)
    },
    getYearTableDetailData (row) {
      this.yearTableDetailDataLoading = true
      this.$axios.post(this.$api.deviceCalibrationPlan.pageDeviceCalibrationPlanDetail,{
        page: {
          current: this.pagination1.current,
          size: this.pagination1.size,
        },
        entity: {
          planId: row.planId,
          deviceName: this.searchForm.deviceName,
          deviceNumber: this.searchForm.deviceNumber,
        }
      }, {
        headers: {
          'Content-Type': 'application/json'
        },
        noQs: true
      }).then(res => {
        if (res.code == 200) {
          this.yearTableDetailData = res.data.records
          this.pagination1.total = res.data.total
        }
        this.yearTableDetailDataLoading = false
      }).catch(err => {
        this.yearTableDetailDataLoading = false
      })
    },
    reset () {
      this.searchForm = {
        deviceName: '',
        deviceNumber: '',
      }
      this.getYearTableDetailData(this.currentRow)
    },
    // åˆ†é¡µ
    handleSizeChange1(val) {
      this.pagination1.size = val
      this.getYearTableDetailData(this.currentRow)
    },
    // åˆ†é¡µ
    handleCurrentChange1(val) {
      this.pagination1.current = val
      this.getYearTableDetailData(this.currentRow)
    },
    // æ‰“开弹框
    handleForm (type, row) {
      this.operationType = type
      this.dialogVisible = true
      this.form.planId = this.currentRow.planId
      if (this.operationType !== 'add') {
        this.$nextTick(() => {
          this.form = this.HaveJson(row)
        })
      }else{
        this.form = {
          deviceName: '',
          deviceAmount: '',
          deviceNumber: '',
          verificationUnit: '',
          verificationCycles: '',
          lastDate: '',
          planDate: '',
          remark: '',
          planId: this.currentRow.planId,
          planDetailId: '',
        }
      }
    },
    // æäº¤è¡¨å•
    submitForm () {
      this.$refs.modelForm.validate(valid => {
        if (valid) {
          if (this.operationType === 'add') {
            this.submitFormLoading = true
            this.$axios.post(this.$api.deviceCalibrationPlan.addDeviceCalibrationPlanDetail,
              this.form, {
              headers: {
                'Content-Type': 'application/json'
              },
              noQs: true
            }).then(res => {
              if (res.code == 200) {
                this.$message.success('新增成功')
                this.dialogVisible = false
                this.getYearTableData()
              }
              this.submitFormLoading = false
            }).catch(err => {
              this.submitFormLoading = false
            })
          } else {
            this.submitFormLoading = true
            this.$axios.post(this.$api.deviceCalibrationPlan.updateDeviceCalibrationPlanDetail,
              this.form, {
              headers: {
                'Content-Type': 'application/json'
              },
              noQs: true
            }).then(res => {
              if (res.code == 200) {
                this.$message.success('新增成功')
                this.dialogVisible = false
                this.getYearTableData()
              }
              this.submitFormLoading = false
            }).catch(err => {
              this.submitFormLoading = false
            })
          }
        }
      })
    },
    // æ‰“开新增弹框
    addYearPlan () {
      this.addYearPlanDia = true
      this.$nextTick(() => {
        this.$refs.addYearPlanDia.openDialog()
      })
    },
    closeDia () {
      this.addYearPlanDia = false
      this.getYearTableData()
    },
    submitUpload() {
      if (!this.planYear) {
        this.$message.warning('请选择年份')
        return;
      }
      if (this.$refs.upload1.uploadFiles.length === 0) {
        this.$message.error('未选择文件')
        return
      }
      this.uploading = true
      this.$refs.upload1.submit();
    },
    // æäº¤æ‰¹å‡†
    handleApproval (status) {
      const personTrainingUpdateDto = {
        planId: this.currentRowId,
        ratifyRemark: this.ratifyRemark,
        ratifyStatus: status
      }
      this.approvalLoading = true
      this.$axios.post(this.$api.deviceCalibrationPlan.ratifyDeviceCalibrationPlan, personTrainingUpdateDto, {
        headers: {
          'Content-Type': 'application/json'
        },
        noQs: true
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('提交成功！');
          this.approvalDialog = false
          this.getYearTableData();
        }
        this.approvalLoading = false
      }).catch(() => {
        this.approvalLoading = false
      })
    },
    resetForm () {
      this.$refs.modelForm.resetFields();
      this.dialogVisible = false
    },
    // æ‰“开报告弹框
    record (row) {
      this.uploadDia = true
    },
    // å¯¼å…¥æµç¨‹
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        return true;
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    handleSuccessUp(response) {
      this.uploading = false;
      if (response.code == 200) {
        this.$message.success('上传成功');
        this.getYearTableData()
      } else {
        this.$message.error('上传失败')
      }
    },
  },
  // ç”¨äºŽä¸Šä¼ æ–‡ä»¶çš„信息
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
    },
    action() {
      return this.javaApi + this.$api.deviceCalibrationPlan.importDeviceCalibrationPlan + '?planYear=' + this.planYear
    }
  },
}
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-search {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>

 src/components/equipment/equipment-check.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,333 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="仪器设备期间核查比对记录表"
               width="80%" @close="resetForm">
      <el-steps :active="currentStep" align-center finish-status="success">
        <el-step title="填写设备核查对比记录"></el-step>
        <el-step title="审核"></el-step>
      </el-steps>
      <div class="form">
        <div class="form-item">
          <span style="width: 116px">核查方式：</span>
          <el-input v-model="form.checkMethod" :disabled="currentStep !== 0" clearable size="small"></el-input>
        </div>
      </div>
      <div class="form">
        <div class="form-item">
          <span style="width: 80px">A仪器名称：</span>
          <el-select v-model="form.adeviceId"
                     :disabled="currentStep !== 0"
                     class="table_input"
                     clearable
                     filterable
                     placeholder="设备名称"
                     size="small"
                     style="width:200px"
                     @change="(val)=>changeMachineName(val, 'A')">
            <el-option v-for="item in equipOptions" :key="item.value"  :label="item.label" :value="item.id">
              {{item.label + '-' + item.value}}
            </el-option>
          </el-select>
        </div>
        <div class="form-item">
          <span style="width: 116px">A仪器编号：</span>
          <el-input v-model="form.adeviceNumber" :disabled="currentStep !== 0" clearable size="small"></el-input>
        </div>
        <div class="form-item">
          <span style="width: 150px">A仪器测定范围/不确定度：</span>
          <el-input v-model="form.arangeUncertainty" :disabled="currentStep !== 0" clearable size="small"></el-input>
        </div>
      </div>
      <div class="form">
        <div class="form-item">
          <span style="width: 80px">B仪器名称：</span>
          <el-select v-model="form.bdeviceId"
                     :disabled="currentStep !== 0"
                     class="table_input"
                     clearable
                     filterable
                     placeholder="设备名称"
                     size="small"
                     style="width:200px"
                     @change="(val)=>changeMachineName(val, 'B')">
            <el-option v-for="item in equipOptions" :key="item.value"  :label="item.label" :value="item.id">
              {{item.label + '-' + item.value}}
            </el-option>
          </el-select>
        </div>
        <div class="form-item">
          <span style="width: 116px">B仪器编号：</span>
          <el-input v-model="form.bdeviceNumber" :disabled="currentStep !== 0" clearable size="small"></el-input>
        </div>
        <div class="form-item">
          <span style="width: 150px">B仪器测定范围/不确定度：</span>
          <el-input v-model="form.brangeUncertainty" :disabled="currentStep !== 0" clearable size="small"></el-input>
        </div>
      </div>
      <div class="form">
        <div class="form-item">
          <span style="width: 80px">C仪器名称：</span>
          <el-select v-model="form.cdeviceId"
                     :disabled="currentStep !== 0"
                     class="table_input"
                     clearable
                     filterable
                     placeholder="设备名称"
                     size="small"
                     style="width:200px"
                     @change="(val)=>changeMachineName(val, 'C')">
            <el-option v-for="item in equipOptions" :key="item.value"  :label="item.label" :value="item.id">
              {{item.label + '-' + item.value}}
            </el-option>
          </el-select>
        </div>
        <div class="form-item">
          <span style="width: 116px">C仪器编号：</span>
          <el-input v-model="form.cdeviceNumber" :disabled="currentStep !== 0" clearable size="small"></el-input>
        </div>
        <div class="form-item">
          <span style="width: 150px">C仪器测定范围/不确定度：</span>
          <el-input v-model="form.crangeUncertainty" :disabled="currentStep !== 0" clearable size="small"></el-input>
        </div>
      </div>
      <div>
        <el-button v-if="currentStep === 0" size="small" type="primary" @click="addTableRow">添加</el-button>
      </div>
      <div style="margin: 10px 0">
        <el-table ref="yearTable" :data="recordContrastDetailsList"
                  height="300px"
                  style="width: 100% ;">
          <el-table-column align="center" header-align="center" label="序号" type="index" width="60"></el-table-column>
          <el-table-column label="核查项目" min-width="170" prop="checkItems">
            <template slot-scope="scope">
              <el-input v-model="scope.row.checkItems" :disabled="currentStep !== 0" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="A仪器示值" min-width="120" prop="indicationA">
            <template slot-scope="scope">
              <el-input v-model="scope.row.indicationA" :disabled="currentStep !== 0" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="B仪器示值" min-width="120" prop="indicationB">
            <template slot-scope="scope">
              <el-input v-model="scope.row.indicationB" :disabled="currentStep !== 0" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="C仪器示值" min-width="120" prop="indicationC">
            <template slot-scope="scope">
              <el-input v-model="scope.row.indicationC" :disabled="currentStep !== 0" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="差值" min-width="90" prop="dvalue">
            <template slot-scope="scope">
              <el-input v-model="scope.row.dvalue" :disabled="currentStep !== 0" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="相对偏差" min-width="90" prop="deviation">
            <template slot-scope="scope">
              <el-input v-model="scope.row.deviation" :disabled="currentStep !== 0" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="判定" min-width="110" prop="determine">
            <template slot-scope="scope">
              <el-input v-model="scope.row.determine" :disabled="currentStep !== 0" clearable size="small"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="form">
        <div class="form-item">
          <span style="width: 116px">综合判定：</span>
          <el-input v-model="form.judgment" :disabled="currentStep !== 0" clearable size="small"></el-input>
        </div>
        <div class="form-item">
          <span style="width: 116px">审核人：</span>
          <el-select v-model="form.reviewUserId" :disabled="currentStep !== 0" placeholder="请选择" size="small" style="width: 100%">
            <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 æ¶ˆ</el-button>
        <el-button v-if="currentStep === 0" :loading="submitFormLoading" type="primary" @click="submitCheck">ç¡® å®š</el-button>
        <el-button v-if="currentStep === 1" :loading="submitFormLoading" @click="examine(0)">不通过</el-button>
        <el-button v-if="currentStep === 1" :loading="submitFormLoading" type="primary" @click="examine(1)">通 è¿‡</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "equipment-check",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      dialogVisible: false,
      submitFormLoading: false,
      currentStep: 0,
      showStep: 0,
      form: {
        checkerTime: '',
        checkMethod: '',
        adeviceId: '',
        adeviceNumber: '',
        arangeUncertainty: '',
        bdeviceId: '',
        bdeviceNumber: '',
        brangeUncertainty: '',
        cdeviceId: '',
        cdeviceNumber: '',
        crangeUncertainty: '',
        recordContrastDetailsList: [],
        judgment: '',
        reviewUserId: '',
        reviewStatus: '',
        planDetailsId: '',
      },
      equipOptions: [],
      recordContrastDetailsList: [],
      userList: [],
    }
  },
  mounted() {

  },
  // æ–¹æ³•é›†åˆ
  methods: {
    openDialog (row) {
      this.dialogVisible = true
      this.form.planDetailsId = row.planDetailsId
      this.getEquipOptions()
      this.getUserList()
      this.searchInfo()
    },
    searchInfo () {
      this.$axios.get(this.$api.deviceExaminePlan.getExamineRecordContrast+'?planDetailsId=' + this.form.planDetailsId).then(res => {
        if (res.code === 200) {
          this.form = {...res.data}
          this.recordContrastDetailsList = this.form.recordContrastDetailsList || []
          if (!this.form.reviewUserId) {
            this.currentStep = 0
          } else {
            this.currentStep = 1
          }
          if (this.form.reviewStatus === 1) {
            this.currentStep = 2
          }
        }
      }).catch(error => {
        console.error(error)
      })
    },
    // èµ‹å€¼ä»ªå™¨ç¼–号
    changeMachineName (value, type) {
      const index = this.equipOptions.findIndex(item => item.id === value)
      if (index > -1) {
        if (type === 'A') {
          this.$set(this.form, 'adeviceNumber', this.equipOptions[index].value)
        }
        if (type === 'B') {
          this.$set(this.form, 'bdeviceNumber', this.equipOptions[index].value)
        }
        if (type === 'C') {
          this.$set(this.form, 'cdeviceNumber', this.equipOptions[index].value)
        }
      }
    },
    // æ·»åŠ è¡¨æ ¼æ•°æ®
    addTableRow () {
      this.recordContrastDetailsList.push({checkItems: ''})
    },
    submitCheck () {
      this.form.recordContrastDetailsList = this.HaveJson(this.recordContrastDetailsList)
      this.submitFormLoading = true
      this.$axios.post(this.$api.deviceExaminePlan.addExamineRecordContrast,
        this.form, {
          headers: {
            'Content-Type': 'application/json'
          },
          noQs: true
        }).then(res => {
        if (res.code == 200) {
          this.$message.success('新增成功')
          this.resetForm()
        }
        this.submitFormLoading = false
      }).catch(err => {
        this.submitFormLoading = false
      })
    },
    examine (statue) {
      const params = {
        planDetailsId: this.form.planDetailsId,
        reviewStatus: statue,
      }
      this.$axios.post(this.$api.deviceExaminePlan.reviewExamineRecordContrast,
        params, {
          headers: {
            'Content-Type': 'application/json'
          },
          noQs: true
        }).then(res => {
        if (res.code == 200) {
          this.$message.success('审核成功')
          this.resetForm()
        }
        this.submitFormLoading = false
      }).catch(err => {
        this.submitFormLoading = false
      })
    },
    resetForm () {
      this.dialogVisible = false
      this.$emit('closeDialog')
    },
    // èŽ·å–所有设备
    getEquipOptions() {
      this.equipOptions = []
      this.$axios.get(this.$api.deviceScope.deviceScopeSearch+'?status=0').then(res => {
        if (res.code === 200 && res.data) {
          this.equipOptions = res.data.map(m => {
            m.value = m.managementNumber
            m.label = m.deviceName
            m.id = m.id
            return m
          })
        }
      }).catch(error => {
        console.error(error)
      })
    },
    getUserList(){
      this.$axios.post(this.$api.user.selectUserList, {
        page: {current: -1, size: -1,},
        entity: {name: null}
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code === 201) {
          return
        }
        this.userList = res.data.body.records
      })
    },
  },
}
</script>

<style scoped>
.form {
  display: flex;
  align-items: center;
}
.form-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
</style>

 src/components/equipment/equipment-failure.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,193 @@
<template>
  <div>
    <div>
      <div style="margin: 10px 0;text-align: right">
        <el-button size="small" type="primary" @click="getYearTableDetailData(clickNodeVal.value)">刷新</el-button>
        <el-button size="small" type="primary" @click="handleForm('')">新增</el-button>
      </div>
      <div>
        <el-table ref="yearTable" v-loading="yearTableDetailDataLoading" :data="yearTableDetailData"
                  height="calc(100vh - 18em)"
                  style="width: 100% ;">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index" width="70"></el-table-column>
<!--          <el-table-column label="仪器名称" min-width="150" prop="unitName"></el-table-column>-->
<!--          <el-table-column label="型号" min-width="100" prop="address"></el-table-column>-->
          <el-table-column label="安装地点" min-width="150" prop="location"></el-table-column>
          <el-table-column label="损坏或故障情况" min-width="180" prop="damageOrMalfunction"></el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column align="center" fixed="right" label="操作" min-width="140">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.ratifyStatus === 1" size="small" type="text" @click="handleForm(scope.row.maintenanceId)">操作</el-button>
              <el-button size="small" type="text" @click="handleDownOne(scope.row.maintenanceId)">导出</el-button>
              <el-button size="small" style="color: #f56c6c" type="text" @click="deleteFun(scope.row.maintenanceId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
                       :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange1"
                       @current-change="handleCurrentChange1">
        </el-pagination>
      </div>
    </div>
    <failure-form v-if="applicationForm" ref="applicationForm" @closeDialog="closeDialog"></failure-form>
  </div>
</template>

<script>
import FailureForm from "./failure-form.vue";

export default {
  name: "equipment-failure",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {FailureForm},
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      pagination1: {
        size: 10,
        current: 1,
        total: 0,
      },
      yearTableDetailDataLoading: false,
      yearTableDetailData: [],
      applicationForm: false
    }
  },
  mounted() {
    this.getYearTableDetailData(this.clickNodeVal.value)
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æŸ¥è¯¢
    getYearTableDetailData(deviceId) {
      this.yearTableDetailDataLoading = true
      this.$axios.post(this.$api.deviceBreakdownMaintenance.pageDeviceBreakdownMaintenance, {
        page: {
          current: this.pagination1.current,
          size: this.pagination1.size,
        },
        entity: {
          deviceId: deviceId,
        }
      }, {
        headers: {
          'Content-Type': 'application/json'
        },
        noQs: true
      }).then(res => {
        if (res.code == 200) {
          this.yearTableDetailData = res.data.records
          this.pagination1.total = res.data.total
        }
        this.yearTableDetailDataLoading = false
      }).catch(err => {
        this.yearTableDetailDataLoading = false
      })
    },
    handleForm(id) {
      this.applicationForm = true
      this.$nextTick(() => {
        this.$refs.applicationForm.openDialog(id, this.clickNodeVal.value)
      })
    },
    closeDialog() {
      this.applicationForm = false
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // åˆ†é¡µ
    handleSizeChange1(val) {
      this.pagination1.size = val
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // åˆ†é¡µ
    handleCurrentChange1(val) {
      this.pagination1.current = val
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // å¯¼å‡º
    handleDownOne(id) {
      this.outLoading = true
      this.$axios.get(this.$api.deviceBreakdownMaintenance.exportDeviceBreakdownMaintenance + '?maintenanceId=' + id, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '仪器设备修理申请表.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '仪器设备修理申请表.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    // åˆ é™¤
    deleteFun(id) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.deviceBreakdownMaintenance.delDeviceBreakdownMaintenance + '?maintenanceId=' + id).then(res => {
          this.$message.success('删除成功！');
          this.getYearTableDetailData(this.clickNodeVal.value);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getYearTableDetailData(newVal.value);
      }
    },
  }
}
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-search {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>

 src/components/equipment/equipment-maintenance-plan.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,425 @@
<template>
  <div>
    <div>
      <div style="margin: 10px 0;text-align: right">
        <el-button size="small" type="primary" @click="getYearTableDetailData">刷新</el-button>
        <el-button size="small" type="primary" @click="handleForm('add')">新增</el-button>
      </div>
      <div>
        <el-table ref="yearTable" v-loading="yearTableDetailDataLoading" :data="yearTableDetailData"
                  height="calc(100vh - 18em)"
                  style="width: 100% ;">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index" width="70"></el-table-column>
          <el-table-column label="年份" min-width="80" prop="planYear"></el-table-column>
          <el-table-column label="编制人" min-width="120" prop="compiler"></el-table-column>
          <el-table-column label="编制时间" min-width="150" prop="datePreparation"></el-table-column>
          <el-table-column label="审核人" min-width="150" prop="audit"></el-table-column>
          <el-table-column label="审核时间" min-width="180" prop="auditDate"></el-table-column>
          <el-table-column label="审核状态" min-width="180" prop="status">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status ===  1" type="success">通 è¿‡</el-tag>
              <el-tag v-if="scope.row.status ===  0" type="danger">不通过</el-tag>
            </template>
          </el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column align="center" fixed="right" label="操作" min-width="180">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.status === 1" size="small" type="text" @click="handleForm('edit', scope.row)">编辑</el-button>
              <el-button :disabled="scope.row.status === 1" size="small" type="text" @click="handleForm('check', scope.row)">审核</el-button>
              <el-button size="small" type="text" @click="handleDownOne(scope.row.maintenancePlanId)">导出</el-button>
              <el-button :disabled="scope.row.status === 1" size="small" style="color: #f56c6c" type="text" @click="deleteFun(scope.row.maintenancePlanId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
                       :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange1"
                       @current-change="handleCurrentChange1">
        </el-pagination>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="applicationForm" title="设备保养计划表"
               width="80%" @close="closeDialog">
      <div style="display: flex;align-items: center;">
        <el-button v-if="operationType !== 'check'" size="small" type="primary" @click="addTableRow">添加</el-button>
        <span style="width: 60px">年份：</span>
        <el-date-picker
          v-model="form.planYear"
          type="year"
          value-format="yyyy"
          clearable
          size="small"
          format="yyyy"
          placeholder="选择年">
        </el-date-picker>
      </div>
      <div style="margin: 10px 0">
        <el-table ref="yearTable" :data="deviceMaintenancePlanDetails"
                  id="templateParamTable" row-key="deviceId"
                  height="300px"
                  style="width: 100% ;">
          <el-table-column align="center" header-align="center" label="序号" type="index" width="60"></el-table-column>
          <el-table-column label="设备名称" min-width="170" prop="deviceName">
            <template slot-scope="scope">
              <el-input v-model="scope.row.deviceName" :disabled="operationType === 'check'" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="设备编号" min-width="140" prop="deviceNumber">
            <template slot-scope="scope">
              <el-input v-model="scope.row.deviceNumber" :disabled="operationType === 'check'" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="归属实验室" min-width="120" prop="storagePoint">
            <template slot-scope="scope">
              <el-input v-model="scope.row.storagePoint" :disabled="operationType === 'check'" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="保养关键部位" min-width="120" prop="maintenanceSite">
            <template slot-scope="scope">
              <el-input v-model="scope.row.maintenanceSite" :disabled="operationType === 'check'" clearable size="small" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="保养内容" min-width="120" prop="maintenanceContent">
            <template slot-scope="scope">
              <el-input v-model="scope.row.maintenanceContent" :disabled="operationType === 'check'" clearable size="small" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="保养周期" min-width="90" prop="maintenanceIntervals">
            <template slot-scope="scope">
              <el-input v-model="scope.row.maintenanceIntervals" :disabled="operationType === 'check'" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="80" align="center">
            <template slot-scope="scope">
              <el-button style="color: #f56c6c" type="text" @click="deleteRow(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 æ¶ˆ</el-button>
        <el-button v-if="operationType !=='check'" :loading="submitFormLoading" type="primary" @click="submitForm">ç¡® è®¤</el-button>
        <el-button v-if="operationType ==='check'" :loading="submitFormLoading" type="primary" @click="checkStatus(0)">不通过</el-button>
        <el-button v-if="operationType ==='check'" :loading="submitFormLoading" type="primary" @click="checkStatus(1)">通 è¿‡</el-button>
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="addEquipDia" title="添加设备" width="50%">
      <el-table ref="multipleTable" :data="equipOptions" tooltip-effect="dark" height="500"
                style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="设备名称" prop="label" width="190"></el-table-column>
        <el-table-column prop="value" label="设备编号" width="130"></el-table-column>
        <el-table-column prop="managementNumber" label="归属实验室"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addEquipDia = false">取 æ¶ˆ</el-button>
        <el-button v-if="operationType !=='check'" :loading="submitFormLoading" type="primary" @click="changeMachineName">ç¡® è®¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from "sortablejs";

export default {
  name: "equipment-maintenance-plan",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      pagination1: {
        size: 10,
        current: 1,
        total: 0,
      },
      yearTableDetailDataLoading: false,
      yearTableDetailData: [],
      deviceMaintenancePlanDetails: [],
      selectionRows: [],
      deviceIds: [],
      applicationForm: false,
      submitFormLoading: false,
      operationType: '',
      equipOptions: [],
      form: {
        planYear: '',
        deviceMaintenancePlanDetails: []
      },
      addEquipDia: false,
    }
  },
  mounted() {
    this.getYearTableDetailData()
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æŸ¥è¯¢
    getYearTableDetailData() {
      this.yearTableDetailDataLoading = true
      this.$axios.post(this.$api.deviceMaintenancePlan.selectDeviceMaintenancePlanByPage, {
        page: {
          current: this.pagination1.current,
          size: this.pagination1.size,
        },
        entity: {}
      }, {
        headers: {
          'Content-Type': 'application/json'
        },
        noQs: true
      }).then(res => {
        if (res.code == 200) {
          this.yearTableDetailData = res.data.records
          this.pagination1.total = res.data.total
        }
        this.yearTableDetailDataLoading = false
      }).catch(err => {
        this.yearTableDetailDataLoading = false
      })
    },
    // æ‰“开新增和编辑弹框
    handleForm(type, row) {
      this.operationType = type
      this.applicationForm = true
      this.form = {
        planYear: '',
        deviceMaintenancePlanDetails: [],
      }
      this.deviceMaintenancePlanDetails = []
      if (row) {
        this.maintenancePlanId = row.maintenancePlanId
        this.$axios.get(this.$api.deviceMaintenancePlan.getMaintenancePlanDetail+'?maintenancePlanId=' + this.maintenancePlanId).then(res => {
          if (res.code === 200) {
            this.form = res.data
            this.deviceMaintenancePlanDetails = this.form.deviceMaintenancePlanDetails
          }
        }).catch(error => {
          console.error(error)
        })
      }
      this.getEquipOptions()
    },
    // æ·»åŠ è®¾å¤‡
    addTableRow () {
      this.addEquipDia = true
      this.getEquipOptions()
    },
    handleSelectionChange (selection) {
      this.selectionRows = selection
    },
    // èµ‹å€¼ä»ªå™¨ç¼–号
    changeMachineName () {
      this.deviceMaintenancePlanDetails = []
      this.selectionRows.map(val => {
        this.deviceMaintenancePlanDetails.push({deviceId: val.id, deviceName: val.label, deviceNumber: val.value, storagePoint: val.storagePoint})
      })
      this.addEquipDia = false
      this.rowDrop()
    },
    rowDrop() {
      const that = this
      const tbody = document.querySelector(
        '#templateParamTable .el-table__body-wrapper tbody'
      )
      if (!this.sortTable) {
        this.sortTable = Sortable.create(tbody, {
          animation: 200, //动画时长
          handle: ".el-table__row", //可拖拽区域class
          //拖拽中事件
          onMove: ({ dragged, related }) => {
            const oldRow = that.deviceMaintenancePlanDetails[dragged.rowIndex] //旧位置数据
            const newRow = that.deviceMaintenancePlanDetails[related.rowIndex] //被拖拽的新数据
          },
          //拖拽结束事件
          onEnd: evt => {
            const curRow = that.deviceMaintenancePlanDetails.splice(evt.oldIndex, 1)[0];
            that.deviceMaintenancePlanDetails.splice(evt.newIndex, 0, curRow);
          }
        })
      }
    },
    // åˆ é™¤è¡¨æ ¼è¡Œ
    deleteRow (index) {
      this.deviceMaintenancePlanDetails.splice(index, 1)
    },
    // æäº¤æ–°å¢žå’Œä¿®æ”¹
    submitForm () {
      this.form.deviceMaintenancePlanDetails = this.HaveJson(this.deviceMaintenancePlanDetails)
      this.submitFormLoading = true
      if (this.operationType === 'add') {
        this.$axios.post(this.$api.deviceMaintenancePlan.addMaintenancePlan,
          this.form, {
            headers: {
              'Content-Type': 'application/json'
            },
            noQs: true
          }).then(res => {
          if (res.code == 200) {
            this.$message.success('新增成功')
            this.applicationForm = false
            this.getYearTableDetailData()
          }
          this.submitFormLoading = false
        }).catch(err => {
          this.submitFormLoading = false
        })
      } else {
        this.$axios.post(this.$api.deviceMaintenancePlan.updateMaintenancePlan,
          this.form, {
            headers: {
              'Content-Type': 'application/json'
            },
            noQs: true
          }).then(res => {
          if (res.code == 200) {
            this.$message.success('修改成功')
            this.applicationForm = false
            this.getYearTableDetailData()
          }
          this.submitFormLoading = false
        }).catch(err => {
          this.submitFormLoading = false
        })
      }
    },
    // æäº¤å®¡æ ¸
    checkStatus (status) {
      const params = {
        status: status,
        maintenancePlanId: this.maintenancePlanId
      }
      this.$axios.post(this.$api.deviceMaintenancePlan.addMaintenancePlan,
        params, {
          headers: {
            'Content-Type': 'application/json'
          },
          noQs: true
        }).then(res => {
        if (res.code == 200) {
          this.$message.success('审核成功')
          this.applicationForm = false
          this.getYearTableDetailData()
        }
        this.submitFormLoading = false
      }).catch(err => {
        this.submitFormLoading = false
      })
    },
    closeDialog() {
      this.applicationForm = false
      this.getYearTableDetailData()
    },
    // åˆ†é¡µ
    handleSizeChange1(val) {
      this.pagination1.size = val
      this.getYearTableDetailData()
    },
    // åˆ†é¡µ
    handleCurrentChange1(val) {
      this.pagination1.current = val
      this.getYearTableDetailData()
    },
    handleDownOne(id) {
      this.outLoading = true
      this.$axios.get(this.$api.deviceMaintenancePlan.exportDeviceMaintenancePlan + '?maintenancePlanId=' + id, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '设备维护保养记录.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '设备维护保养记录.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    // åˆ é™¤
    deleteFun(id) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.deviceMaintenancePlan.deleteMaintenancePlan + '?maintenancePlanId=' + id).then(res => {
          this.$message.success('删除成功！');
          this.getYearTableDetailData();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // èŽ·å–所有设备
    getEquipOptions() {
      this.equipOptions = []
      this.$axios.get(this.$api.deviceScope.deviceScopeSearch+'?status=0').then(res => {
        if (res.code === 200 && res.data) {
          this.equipOptions = res.data.map(m => {
            m.value = m.managementNumber
            m.label = m.deviceName
            return m
          })
        }
      }).catch(error => {
        console.error(error)
      })
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getYearTableDetailData();
      }
    },
  }
}
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-search {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>

 src/components/equipment/equipment-scrap.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,193 @@
<template>
  <div>
    <div>
      <div style="margin: 10px 0;text-align: right">
        <el-button size="small" type="primary" @click="getYearTableDetailData(clickNodeVal.value)">刷新</el-button>
        <el-button size="small" type="primary" @click="handleForm('')">新增</el-button>
      </div>
      <div>
        <el-table ref="yearTable" v-loading="yearTableDetailDataLoading" :data="yearTableDetailData"
                  height="calc(100vh - 18em)"
                  style="width: 100% ;">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index" width="70"></el-table-column>
<!--          <el-table-column label="仪器名称" min-width="150" prop="unitName"></el-table-column>-->
<!--          <el-table-column label="型号" min-width="100" prop="address"></el-table-column>-->
          <el-table-column label="配件" min-width="150" prop="parts"></el-table-column>
          <el-table-column label="编号" min-width="100" prop="number"></el-table-column>
          <el-table-column label="报废理由" min-width="150" prop="reasonsForScrap"></el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column align="center" fixed="right" label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.ratifyStatus === 1" size="small" type="text" @click="handleForm(scope.row.scrappedId)">操作</el-button>
              <el-button size="small" type="text" @click="handleDownOne(scope.row.scrappedId)">导出</el-button>
              <el-button size="small" style="color: #f56c6c" type="text" @click="deleteFun(scope.row.scrappedId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
                       :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange1"
                       @current-change="handleCurrentChange1">
        </el-pagination>
      </div>
    </div>
    <scrap-application-form v-if="applicationForm" ref="applicationForm" @closeDialog="closeDialog"></scrap-application-form>
  </div>
</template>

<script>
import scrapApplicationForm from "./scrapApplicationForm.vue";

export default {
  name: "equipment-scrap",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {scrapApplicationForm},
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      pagination1: {
        size: 10,
        current: 1,
        total: 0,
      },
      yearTableDetailDataLoading: false,
      yearTableDetailData: [],
      applicationForm: false
    }
  },
  mounted() {
    this.getYearTableDetailData(this.clickNodeVal.value)
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æŸ¥è¯¢
    getYearTableDetailData (deviceId) {
      this.yearTableDetailDataLoading = true
      this.$axios.post(this.$api.deviceScrapped.pageDeviceScrapped,{
        page: {
          current: this.pagination1.current,
          size: this.pagination1.size,
        },
        entity: {
          deviceId: deviceId,
        }
      }, {
        headers: {
          'Content-Type': 'application/json'
        },
        noQs: true
      }).then(res => {
        if (res.code == 200) {
          this.yearTableDetailData = res.data.records
          this.pagination1.total = res.data.total
        }
        this.yearTableDetailDataLoading = false
      }).catch(err => {
        this.yearTableDetailDataLoading = false
      })
    },
    handleForm (id) {
      this.applicationForm = true
      this.$nextTick(() => {
        this.$refs.applicationForm.openDialog(id, this.clickNodeVal.value)
      })
    },
    closeDialog () {
      this.applicationForm = false
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // åˆ†é¡µ
    handleSizeChange1(val) {
      this.pagination1.size = val
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // åˆ†é¡µ
    handleCurrentChange1(val) {
      this.pagination1.current = val
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // å¯¼å‡º
    handleDownOne(id) {
      this.outLoading = true
      this.$axios.get(this.$api.deviceScrapped.exportDeviceScrapped + '?scrappedId=' + id, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '仪器设备报废申请表.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '仪器设备报废申请表.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    // åˆ é™¤
    deleteFun(id) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.deviceScrapped.delDeviceScrapped + '?scrappedId=' + id).then(res => {
          this.$message.success('删除成功！');
          this.getYearTableDetailData(this.clickNodeVal.value);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getYearTableDetailData(newVal.value);
      }
    },
  }
}
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-search {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>

 src/components/equipment/equipment-verification-plan.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,682 @@
<template>
  <!--  è®¾å¤‡æ ¸æŸ¥è®¡åˆ’-->
  <div>
    <div>
      <div style="margin: 10px 0;display: flex;align-items: center;justify-content: space-between;">
        <span>年度计划表</span>
        <div style="display: flex;align-items: center;">
          <el-button style="margin-right: 10px" size="small" type="primary" @click="getYearTableData">刷新</el-button>
          <el-button style="margin-right: 10px" size="small" type="primary" @click="addYearPlan">新增</el-button>
<!--          <el-upload ref="upload" :action="action"-->
<!--                     :before-upload="beforeUpload" :headers="headers" :on-error="onError"-->
<!--                     :on-success="handleSuccessUp" :show-file-list="false" accept='.xls,.xlsx'>-->
<!--            <el-button :loading="upLoading" size="small" type="primary">导入</el-button>-->
<!--          </el-upload>-->
        </div>
      </div>
      <div>
        <el-table ref="yearTable" v-loading="yearTableDataLoading" :data="yearTableData"
                  height="calc(60vh - 20em)"
                  highlight-current-row
                  style="width: 100% ;" @current-change="currentChange">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index" width="70"></el-table-column>
          <el-table-column label="年份" min-width="80" prop="planYear"></el-table-column>
          <el-table-column label="计划名称" min-width="180" prop="planName"></el-table-column>
          <el-table-column label="编制人" min-width="100" prop="writeName"></el-table-column>
          <el-table-column label="编制日期" min-width="150" prop="writeTime"></el-table-column>
          <el-table-column label="批准状态" min-width="100" prop="ratifyStatus">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.ratifyStatus ===  1" type="success">批准</el-tag>
              <el-tag v-if="scope.row.ratifyStatus ===  0" type="danger">不批准</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="批准内容" min-width="150" prop="ratifyRemark"></el-table-column>
          <el-table-column label="批准人" min-width="100" prop="ratifyName"></el-table-column>
          <el-table-column label="批准时间" min-width="150" prop="ratifyTime"></el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column align="center" fixed="right" label="操作" min-width="140">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.ratifyStatus === 1" size="small" type="text" @click="handleApprove(scope.row.planId)">批准</el-button>
              <el-button size="small" type="text" @click="downLoadPost(scope.row.planId)">导出</el-button>
              <el-button size="small" style="color: #f56c6c" type="text" @click="deleteFun(scope.row.planId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination.size" :page-sizes="[10, 20, 30, 50, 100]"
                       :total="pagination.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
    <div>
      <span>年度计划明细表</span>
      <div class="title">
        <div class="title-search">
          <span style="width: 120px;font-size: 14px">设备编号：</span>
          <el-input v-model="searchForm.deviceNumber" clearable size="small" style="margin-right: 10px;width: 220px"></el-input>
          <span style="width: 80px;font-size: 14px">设备名称：</span>
          <el-input v-model="searchForm.deviceName" clearable size="small" style="margin-right: 10px;width: 220px"></el-input>
          <el-button size="small" type="primary" @click="getYearTableDetailData(currentRow)">查 è¯¢</el-button>
          <el-button size="small" @click="reset">重 ç½®</el-button>
        </div>
        <div>
          <el-button size="small" type="primary" @click="handleForm('add')">新增</el-button>
        </div>
      </div>
      <div>
        <el-table ref="yearTableDetailData" v-loading="yearTableDetailDataLoading"
                  :data="yearTableDetailData"
                  height="calc(60vh - 20em)" style="width: 100% ;">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index" width="70"></el-table-column>
          <el-table-column label="设备编号" min-width="180" prop="deviceNumber"></el-table-column>
          <el-table-column label="设备名称" min-width="180" prop="deviceName"></el-table-column>
          <el-table-column label="核查时间" min-width="150" prop="checkTime"></el-table-column>
          <el-table-column label="核查指标" min-width="150" prop="checkIndex"> </el-table-column>
          <el-table-column label="核查方法" min-width="150" prop="checkMethod"></el-table-column>
          <el-table-column label="结果如何判定" min-width="150" prop="howResults"></el-table-column>
          <el-table-column label="核查负责人" min-width="150" prop="checkChargerUser"></el-table-column>
          <el-table-column label="备注" min-width="150" prop="remark"></el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column align="center" fixed="right" label="操作" min-width="260">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="handleForm('edit', scope.row)">编辑</el-button>
              <el-button size="small" type="text" @click="handleForm('view', scope.row)">查看</el-button>
              <el-button size="small" type="text" @click="handleRecord(scope.row)">记录</el-button>
              <el-button size="small" type="text" @click="handleCheck(scope.row)">对比</el-button>
              <el-button size="small" type="text" @click="handleDown(scope.row)">导出</el-button>
              <el-button size="small" style="color: #f56c6c" type="text" @click="deleteFun1(scope.row.planDetailsId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
                       :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange1"
                       @current-change="handleCurrentChange1">
        </el-pagination>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="设备核查计划"
               width="80%" @close="resetForm">
      <el-form ref="modelForm" :model="form" :rules="rules" label-width="110px">
        <el-col :span="12">
          <el-form-item label="设备编号：" prop="deviceNumber">
            <el-input v-model="form.deviceNumber" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备名称：" prop="deviceName">
            <el-input v-model="form.deviceName" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="核查时间：" prop="checkTime">
            <el-date-picker v-model="form.checkTime"
                            :disabled="operationType === 'view'"
                            clearable
                            format="yyyy-MM"
                            placeholder="选择日期"
                            size="small"
                            style="width:100%"
                            type="date"
                            value-format="yyyy-MM">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="核查指标：" prop="checkIndex">
            <el-input v-model="form.checkIndex" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="核查方法：" prop="checkMethod">
            <el-input v-model="form.checkMethod" :disabled="operationType === 'view'" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结果如何判定：" prop="howResults">
            <el-input v-model="form.howResults" :disabled="operationType === 'view'" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="核查责任人：" prop="checkChargerUserId">
            <el-select v-model="form.checkChargerUserId" @change="setCheckChargerUser" :disabled="operationType === 'view'" placeholder="请选择" size="small" style="width: 100%">
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注：" prop="remark">
            <el-input v-model="form.remark" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 æ¶ˆ</el-button>
        <el-button :loading="submitFormLoading" type="primary" @click="submitForm">ç¡® è®¤</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="approvalDialog" title="批准" width="30%" @close="approvalDialog = false">
      <span>
        æ‰¹å‡†å¤‡æ³¨ï¼š
        <el-input v-model="ratifyRemark" type="textarea"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="approvalLoading" @click="handleApproval(0)">不批准</el-button>
        <el-button :loading="approvalLoading" type="primary" @click="handleApproval(1)">批 å‡†</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="downloadDialog" title="导出" width="600px">
      <span>
        <el-button :loading="outLoading" plain type="primary" @click="controlDown">核查记录</el-button>
        <el-button :loading="outLoading" plain type="primary" @click="processingDown">核查比对记录</el-button>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="downloadDialog = false">取 æ¶ˆ</el-button>
      </span>
    </el-dialog>
    <equipment-check v-if="equipmentCheck" ref="equipmentCheck" @closeDialog="closeDialog"></equipment-check>
    <check-record v-if="checkRecord" ref="checkRecord" @closeDialog1="closeDialog1"></check-record>
    <add-verification-year-plan-dia v-if="addYearPlanDia" ref="addYearPlanDia" @closeDia="closeDia"></add-verification-year-plan-dia>
  </div>
</template>

<script>
import EquipmentCheck from "./equipment-check.vue";
import CheckRecord from "./check-record.vue";
import AddVerificationYearPlanDia from "./addVerificationYearPlanDia.vue";

export default {
  name: "equipment-verification-plan",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {AddVerificationYearPlanDia, CheckRecord, EquipmentCheck},
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      upLoading: false,
      dialogVisible: false,
      searchForm: {
        deviceName: '',
        deviceNumber: '',
      },
      yearTableData: [],
      yearTableDetailData: [],
      pagination: {
        size: 10,
        current: 1,
        total: 0,
      },
      pagination1: {
        size: 10,
        current: 1,
        total: 0,
      },
      form: {
        deviceNumber: '',
        deviceName: '',
        checkTime: '',
        checkIndex: '',
        checkMethod: '',
        howResults: '',
        checkChargerUserId: '',
        checkChargerUser: '',
        remark: '',
        planId: '',
        planDetailsId: '',
      },
      operationType: '',
      rules: {
        deviceNumber: [{ required: true, message: '请填写设备编号', trigger: 'blur' }],
        checkMethod: [{ required: true, message: '请填写核查方法', trigger: 'blur' }],
      },
      yearTableDataLoading: false,
      yearTableDetailDataLoading: false,
      currentRow: {},
      approvalDialog: false,
      approvalLoading: false,
      submitFormLoading: false,
      ratifyRemark: '',
      currentRowId: '',
      userList: [],
      equipmentCheck: false,
      checkRecord: false,
      addYearPlanDia: false,
      downloadDialog: false,
      outLoading: false,
      downRow: {}
    }
  },
  mounted() {
    this.getYearTableData()
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æŸ¥è¯¢å¹´åº¦è®¡åˆ’表
    getYearTableData () {
      this.yearTableDataLoading = true
      this.$axios.post(this.$api.deviceExaminePlan.pageDeviceExaminePlan,{
        page: {
          current: 1,
          size: 99,
        },
        entity: {}
      }, {
        headers: {
          'Content-Type': 'application/json'
        },
        noQs: true
      }).then(res => {
        if (res.code == 200) {
          this.yearTableData = res.data.records
          this.pagination.total = res.data.total
          if (this.yearTableData.length > 0) {
            this.currentRow = this.yearTableData[0]
            this.$refs.yearTable.setCurrentRow(this.currentRow)
          }
        }
        this.yearTableDataLoading = false
      }).catch(err => {
        this.yearTableDataLoading = false
      })
    },
    // åˆ†é¡µ
    handleSizeChange(val) {
      this.pagination.size = val
      this.getYearTableData()
    },
    // åˆ†é¡µ
    handleCurrentChange(val) {
      this.pagination.current = val
      this.getYearTableData()
    },
    // æ‰“开新增弹框
    addYearPlan () {
      this.addYearPlanDia = true
      this.$nextTick(() => {
        this.$refs.addYearPlanDia.openDialog()
      })
    },
    closeDia () {
      this.addYearPlanDia = false
      this.getYearTableData()
    },
    // å¹´åº¦è®¡åˆ’表-批准
    handleApprove(id) {
      this.currentRowId = id
      this.approvalDialog = true
    },
    // å¹´åº¦è®¡åˆ’表-导出
    downLoadPost(planId) {
      this.$axios.get(this.$api.deviceExaminePlan.exportDeviceExaminePlanDetail + '?planId=' + planId,{responseType: "blob"}).then(res => {
        const blob = new Blob([res],{ type: 'application/msword' });
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '仪器设备期间核查计划表.docx';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '仪器设备期间核查计划表.docx';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    // å¹´åº¦è®¡åˆ’表-删除
    deleteFun(id) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.deviceExaminePlan.delQualitySupervise + '?planId=' + id).then(res => {
          this.$message.success('删除成功！');
          this.getYearTableData();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // å¹´åº¦è®¡åˆ’详情表-删除
    deleteFun1(id) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.deviceExaminePlan.delDeviceExaminePlanDetail + '?planDetailsId=' + id).then(res => {
          this.$message.success('删除成功！');
          this.getYearTableDetailData(this.currentRow)
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    currentChange (row) {
      this.currentRow = row
      this.getYearTableDetailData(this.currentRow)
    },
    getYearTableDetailData (row) {
      this.yearTableDetailDataLoading = true
      this.$axios.post(this.$api.deviceExaminePlan.pageDeviceExaminePlanDetail,{
        page: {
          current: this.pagination1.current,
          size: this.pagination1.size,
        },
        entity: {
          planId: row.planId,
          deviceName: this.searchForm.deviceName,
          deviceNumber: this.searchForm.deviceNumber,
        }
      }, {
        headers: {
          'Content-Type': 'application/json'
        },
        noQs: true
      }).then(res => {
        if (res.code == 200) {
          this.yearTableDetailData = res.data.records
          this.pagination1.total = res.data.total
        }
        this.yearTableDetailDataLoading = false
      }).catch(err => {
        this.yearTableDetailDataLoading = false
      })
    },
    reset () {
      this.searchForm = {
        deviceName: '',
        deviceNumber: '',
      }
      this.getYearTableDetailData(this.currentRow)
    },
    // åˆ†é¡µ
    handleSizeChange1(val) {
      this.pagination1.size = val
      this.getYearTableDetailData(this.currentRow)
    },
    // åˆ†é¡µ
    handleCurrentChange1(val) {
      this.pagination1.current = val
      this.getYearTableDetailData(this.currentRow)
    },
    // æ‰“开弹框
    handleForm (type, row) {
      this.getUserList()
      this.operationType = type
      this.dialogVisible = true
      this.form.planId = this.currentRow.planId
      if (this.operationType !== 'add') {
        this.$nextTick(() => {
          this.form = this.HaveJson(row)
        })
      }else{
        this.form = {
          deviceNumber: '',
          deviceName: '',
          checkTime: '',
          checkIndex: '',
          checkMethod: '',
          howResults: '',
          checkChargerUserId: '',
          checkChargerUser: '',
          remark: '',
          planId: this.currentRow.planId,
          planDetailsId: '',
        }
      }
    },
    // æäº¤è¡¨å•
    submitForm () {
      this.$refs.modelForm.validate(valid => {
        if (valid) {
          if (this.operationType === 'add') {
            this.submitFormLoading = true
            this.$axios.post(this.$api.deviceExaminePlan.addDeviceExaminePlanDetail,
              this.form, {
                headers: {
                  'Content-Type': 'application/json'
                },
                noQs: true
              }).then(res => {
              if (res.code == 200) {
                this.$message.success('新增成功')
                this.dialogVisible = false
                this.getYearTableData()
              }
              this.submitFormLoading = false
            }).catch(err => {
              this.submitFormLoading = false
            })
          } else {
            this.submitFormLoading = true
            this.$axios.post(this.$api.deviceExaminePlan.updateDeviceExaminePlanDetail,
              this.form, {
                headers: {
                  'Content-Type': 'application/json'
                },
                noQs: true
              }).then(res => {
              if (res.code == 200) {
                this.$message.success('新增成功')
                this.dialogVisible = false
                this.getYearTableData()
              }
              this.submitFormLoading = false
            }).catch(err => {
              this.submitFormLoading = false
            })
          }
        }
      })
    },
    // æäº¤æ‰¹å‡†
    handleApproval (status) {
      const personTrainingUpdateDto = {
        planId: this.currentRowId,
        ratifyRemark: this.ratifyRemark,
        ratifyStatus: status
      }
      this.approvalLoading = true
      this.$axios.post(this.$api.deviceExaminePlan.ratifyDeviceExaminePlan, personTrainingUpdateDto, {
        headers: {
          'Content-Type': 'application/json'
        },
        noQs: true
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('提交成功！');
          this.approvalDialog = false
          this.getYearTableData();
        }
        this.approvalLoading = false
      }).catch(() => {
        this.approvalLoading = false
      })
    },
    resetForm () {
      this.$refs.modelForm.resetFields();
      this.dialogVisible = false
    },
    // æ‰“开对比流程弹框
    handleCheck (row) {
      this.equipmentCheck = true
      this.$nextTick(() => {
        this.$refs.equipmentCheck.openDialog(row)
      })
    },
    // å…³é—­å¯¹æ¯”弹框
    closeDialog () {
      this.equipmentCheck = false
      this.getYearTableDetailData(this.currentRow)
    },
    // æ‰“开记录弹框
    handleRecord (row) {
      this.checkRecord = true
      this.$nextTick(() => {
        this.$refs.checkRecord.openDialog(row)
      })
    },
    // å…³é—­è®°å½•å¼¹æ¡†
    closeDialog1 () {
      this.checkRecord = false
      this.getYearTableDetailData(this.currentRow)
    },
    // æ‰“开导出弹框
    handleDown (row) {
      this.downRow = row
      this.downloadDialog = true
    },
    // æ ¸æŸ¥è®°å½•å¯¼å‡º
    controlDown () {
      this.outLoading = true
      this.$axios.get(this.$api.deviceExaminePlan.exportReviewExamineRecordDetail + '?planDetailsId=' + this.downRow.planDetailsId, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '仪器设备期间核查记录表.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '仪器设备期间核查记录表.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    // æ ¸æŸ¥å¯¹æ¯”导出
    processingDown () {
      this.outLoading = true
      this.$axios.get(this.$api.deviceExaminePlan.exportReviewExamineRecordContrast + '?planDetailsId=' + this.downRow.planDetailsId, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        this.$message.success('导出成功')
        const blob = new Blob([res], { type: 'application/octet-stream' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '仪器设备期间核查比对记录表.doc';
        link.click();
      })
    },
    // å¯¼å…¥æµç¨‹
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        this.upLoading = true;
        return true;
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    handleSuccessUp(response) {
      this.upLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功');
        this.getYearTableData()
      } else if (response.code == 201) {
        this.$message.error(response.message)
      }
    },
    getUserList(){
      this.$axios.post(this.$api.user.selectUserList, {
        page: {current: -1, size: -1,},
        entity: {name: null}
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code === 201) {
          return
        }
        this.userList = res.data.body.records
      })
    },
    setCheckChargerUser (val) {
      const index = this.userList.findIndex(item => item.id === val)
      if (index > -1) {
        this.form.checkChargerUser = this.userList[index].name
      }
    },
  },
  // ç”¨äºŽä¸Šä¼ æ–‡ä»¶çš„信息
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
    },
    action() {
      return this.javaApi + this.$api.deviceExaminePlan.importDeviceExaminePlan
    }
  },
}
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-search {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>

 src/components/equipment/failure-form.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,198 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="仪器设备修理申请表"
               width="80%" @close="resetForm">
      <el-steps :active="currentStep" align-center finish-status="success">
        <el-step title="填写申请表" @click.native="setStep(0)"></el-step>
        <el-step title="申请部门负责人意见" @click.native="setStep(1)"></el-step>
        <el-step title="维修记录" @click.native="setStep(2)"></el-step>
      </el-steps>
      <el-form ref="modelForm"
               :model="form" :rules="rules" label-width="160px">
        <el-col v-if="showStep === 0" :span="12">
          <el-form-item label="安装地点：" prop="location">
            <el-input v-model="form.location" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="12">
          <el-form-item label="损坏或故障情况：" prop="damageOrMalfunction">
            <el-input v-model="form.damageOrMalfunction" :disabled="currentStep !== 0" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="12">
          <el-form-item label="要求修复日期：" prop="repairDate">
            <el-date-picker
              v-model="form.repairDate"
              :disabled="currentStep !== 0"
              format="yyyy-MM-dd"
              placeholder="选择日期"
              size="small"
              style="width: 100%"
              type="date"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0 && currentStep !== 0" :span="12">
          <el-form-item label="申请人：" prop="applicantUser">
            <el-input v-model="form.applicantUser" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="12">
          <el-form-item label="申请部门负责人：" prop="departmentHeadUserId">
            <el-select v-model="form.departmentHeadUserId" :disabled="currentStep !== 0" placeholder="请选择" size="small" style="width: 50%">
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 1" :span="24">
          <el-form-item label="申请部门负责人意见：" prop="departmentHeadOpinion">
            <el-input v-model="form.departmentHeadOpinion" :disabled="currentStep !== 1" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 2" :span="24">
          <el-form-item label="维修记事：" prop="maintenanceRecord">
            <el-input v-model="form.maintenanceRecord" :disabled="currentStep !== 2" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 2" :span="24">
          <el-form-item label="维修人：" prop="maintenanceUser">
            <el-input v-model="form.maintenanceUser" :disabled="currentStep !== 2" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 æ¶ˆ</el-button>
        <el-button v-if="currentStep !== 3" :loading="submitFormLoading" type="primary" @click="submitForm">ç¡® è®¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "failure-form",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      dialogVisible: false,
      submitFormLoading: false,
      form: {
        location: '',
        damageOrMalfunction: '',
        repairDate: '',
        departmentHeadUserId: '',
        departmentHeadOpinion: '',
        maintenanceRecord: '',
        maintenanceUser: '',
        applicantUser: '',
        flowType: '',
        deviceId: '',
        isFinish: '',
      },
      currentStep: 0,
      showStep: 0,
      rules: {
        departmentHeadUserId: [{required: true, message: '请选择申请部门负责人', trigger: 'change'}],
        departmentHeadOpinion: [{required: true, message: '请填写意见', trigger: 'blur'}],
      },
      userList: [],
    }
  },
  mounted() {

  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æ‰“开弹框
    openDialog(id, deviceId) {
      this.dialogVisible = true
      this.form.maintenanceId = id
      this.form.deviceId = deviceId
      this.getUserList()
      if (this.form.maintenanceId) {
        this.searchInfo()
      }
    },
    // æŸ¥è¯¢è¯¦æƒ…
    searchInfo() {
      this.$axios.get(this.$api.deviceBreakdownMaintenance.getDeviceBreakdownMaintenance + '?maintenanceId=' + this.form.maintenanceId).then(res => {
        if (res.code === 200) {
          this.form = {...res.data}
          if (this.form.isFinish === 0) {
            if (this.form.departmentHeadUserId) {
              this.currentStep = 1
              this.showStep = 1
            }
            if (this.form.departmentHeadOpinion) {
              this.currentStep = 2
              this.showStep = 2
            }
          } else {
            this.currentStep = 3
            this.showStep = 2
          }
        }
      }).catch(error => {
        console.error(error)
      })
    },
    setStep(step) {
      this.showStep = step
    },
    // æäº¤è¡¨å•
    submitForm() {
      this.form.flowType = this.currentStep
      this.$refs.modelForm.validate((valid) => {
        if (valid) {
          this.$axios.post(this.$api.deviceBreakdownMaintenance.addDeviceBreakdownMaintenance,
            this.form, {
              headers: {
                'Content-Type': 'application/json'
              },
              noQs: true
            }).then(res => {
            if (res.code == 200) {
              this.$message.success('新增成功')
              this.resetForm()
            }
            this.submitFormLoading = false
          }).catch(err => {
            this.submitFormLoading = false
          })
        }
      })
    },
    // å…³é—­å¼¹æ¡†
    resetForm() {
      this.dialogVisible = false
      this.$emit('closeDialog')
    },
    getUserList() {
      this.$axios.post(this.$api.user.selectUserList, {
        page: {current: -1, size: -1,},
        entity: {name: null}
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code === 201) {
          return
        }
        this.userList = res.data.body.records
      })
    },
  },
}
</script>

<style scoped>
.form-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
</style>

 src/components/equipment/inspection-form.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,276 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="设备点检记录表"
               width="80%" @close="resetForm">
      <el-row>
        <el-col :span="24">
          <div class="form-item">
            <span style="width: 103px">测量范围：</span>
            <el-input v-model="form.measurementScope" :disabled="operationType === 'check'" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="24" style="text-align: center;margin-bottom: 10px">点检使用物质</el-col>
        <el-col :span="12">
          <div class="form-item">
            <span style="width: 116px">名称：</span>
            <el-input v-model="form.materialName" :disabled="operationType === 'check'" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="form-item">
            <span style="width: 116px">规格型号：</span>
            <el-input v-model="form.materialModel" :disabled="operationType === 'check'" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="form-item">
            <span style="width: 116px">管理编号：</span>
            <el-input v-model="form.materialManagementNumber" :disabled="operationType === 'check'" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="form-item">
            <span style="width: 116px">精度等级：</span>
            <el-input v-model="form.materialAccuracyGrade" :disabled="operationType === 'check'" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="24" style="text-align: center;margin-bottom: 10px">测试环境</el-col>
        <el-col :span="12">
          <div class="form-item">
            <span style="width: 116px">温度：</span>
            <el-input v-model="form.temperature" :disabled="operationType === 'check'" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="form-item">
            <span style="width: 116px">湿度：</span>
            <el-input v-model="form.humidity" :disabled="operationType === 'check'" clearable size="small"></el-input>
          </div>
        </el-col>
      </el-row>
      <div>
        <el-button v-if="operationType === 'add'" size="small" type="primary" @click="addTableRow">添加</el-button>
      </div>
      <div style="text-align: center">测试数据记录</div>
      <div style="margin: 10px 0">
        <el-table ref="yearTable" :data="details"
                  height="300px"
                  style="width: 100% ;">
          <el-table-column align="center" header-align="center" label="序号" type="index" width="60"></el-table-column>
          <el-table-column label="测试项目" min-width="170" prop="testItems">
            <template slot-scope="scope">
              <el-input v-model="scope.row.testItems" :disabled="operationType === 'check'" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="标准值" min-width="120" prop="standardValue">
            <template slot-scope="scope">
              <el-input v-model="scope.row.standardValue" :disabled="operationType === 'check'" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="实测值" min-width="120" prop="measuredValue">
            <template slot-scope="scope">
              <el-input v-model="scope.row.measuredValue" :disabled="operationType === 'check'" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="示值误差" min-width="120" prop="indicationError">
            <template slot-scope="scope">
              <el-input v-model="scope.row.indicationError" :disabled="operationType === 'check'" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="允许误差" min-width="90" prop="allowableError">
            <template slot-scope="scope">
              <el-input v-model="scope.row.allowableError" :disabled="operationType === 'check'" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单项结论" min-width="90" prop="singleItemConclusion">
            <template slot-scope="scope">
              <el-input v-model="scope.row.singleItemConclusion" :disabled="operationType === 'check'" clearable size="small"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row>
        <el-col :span="24">
          <div class="form-item">
            <span style="width: 103px">测试结论：</span>
            <el-input v-model="form.testConclusion" :disabled="operationType === 'check'" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="form-item">
            <span style="width: 116px">备注：</span>
            <el-input v-model="form.remark" :disabled="operationType === 'check'" clearable size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="form-item">
            <span style="width: 116px">请选择复核人：</span>
            <el-select v-model="form.reviewerId" :disabled="operationType === 'check'" placeholder="请选择" size="small" style="width: 100%">
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 æ¶ˆ</el-button>
        <el-button v-if="operationType !== 'check'" :loading="submitFormLoading" type="primary" @click="submitCheck">ç¡® å®š</el-button>
        <el-button v-if="operationType === 'check'" :loading="submitFormLoading" @click="examine(0)">不通过</el-button>
        <el-button v-if="operationType === 'check'" :loading="submitFormLoading" type="primary" @click="examine(1)">通 è¿‡</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "inspection-form",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      dialogVisible: false,
      submitFormLoading: false,
      form: {
        measurementScope: '',
        materialName: '',
        materialModel: '',
        materialManagementNumber: '',
        materialAccuracyGrade: '',
        temperature: '',
        humidity: '',
        testConclusion: '',
        remark: '',
        reviewerId: '',
        deviceId: '',
        inspectionRecordId: '',
      },
      operationType: '',
      equipOptions: [],
      details: [],
      userList: [],
    }
  },
  mounted() {

  },
  // æ–¹æ³•é›†åˆ
  methods: {
    openDialog(id,deviceId, type) {
      this.dialogVisible = true
      this.operationType = type
      this.form.deviceId = deviceId
      this.form.inspectionRecordId = id
      this.getUserList()
      if (this.form.inspectionRecordId) {
        this.searchInfo()
      }
    },
    searchInfo() {
      this.$axios.get(this.$api.deviceInspectionRecord.getDeviceInspectionRecord + '?inspectionRecordId=' + this.form.inspectionRecordId).then(res => {
        if (res.code === 200) {
          this.form = {...res.data}
          this.details = this.form.details || []
        }
      }).catch(error => {
        console.error(error)
      })
    },
    // æ·»åŠ è¡¨æ ¼æ•°æ®
    addTableRow() {
      this.details.push({testItems: ''})
    },
    submitCheck() {
      this.form.details = this.HaveJson(this.details)
      this.submitFormLoading = true
      if (this.operationType === 'add') {
        this.$axios.post(this.$api.deviceInspectionRecord.addDeviceInspectionRecord,
          this.form, {
            headers: {
              'Content-Type': 'application/json'
            },
            noQs: true
          }).then(res => {
          if (res.code == 200) {
            this.$message.success('新增成功')
            this.resetForm()
          }
          this.submitFormLoading = false
        }).catch(err => {
          this.submitFormLoading = false
        })
      } else {
        this.$axios.post(this.$api.deviceInspectionRecord.updateDeviceInspectionRecord,
          this.form, {
            headers: {
              'Content-Type': 'application/json'
            },
            noQs: true
          }).then(res => {
          if (res.code == 200) {
            this.$message.success('新增成功')
            this.resetForm()
          }
          this.submitFormLoading = false
        }).catch(err => {
          this.submitFormLoading = false
        })
      }
    },
    examine(status) {
      const params = {
        inspectionRecordId: this.form.inspectionRecordId,
        status: status,
      }
      this.$axios.post(this.$api.deviceInspectionRecord.reviewDeviceInspectionRecord,
        params, {
          headers: {
            'Content-Type': 'application/json'
          },
          noQs: true
        }).then(res => {
        if (res.code == 200) {
          this.$message.success('审核成功')
          this.resetForm()
        }
        this.submitFormLoading = false
      }).catch(err => {
        this.submitFormLoading = false
      })
    },
    resetForm() {
      this.dialogVisible = false
      this.$emit('closeDialog')
    },
    getUserList() {
      this.$axios.post(this.$api.user.selectUserList, {
        page: {current: -1, size: -1,},
        entity: {name: null}
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code === 201) {
          return
        }
        this.userList = res.data.body.records
      })
    },
  },
}
</script>

<style scoped>
.form {
  display: flex;
  align-items: center;
}

.form-item {
  display: flex;
  align-items: center;
  margin-right:  20px;
  margin-bottom: 10px;
}
</style>

 src/components/equipment/inspection-of-equipment.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,202 @@
<template>
  <div>
    <div>
      <div style="margin: 10px 0;text-align: right">
        <el-button size="small" type="primary" @click="getYearTableDetailData(clickNodeVal.value)">刷新</el-button>
        <el-button size="small" type="primary" @click="handleForm('', 'add')">新增</el-button>
      </div>
      <div>
        <el-table ref="yearTable" v-loading="yearTableDetailDataLoading" :data="yearTableDetailData"
                  height="calc(100vh - 18em)"
                  style="width: 100% ;">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index" width="70"></el-table-column>
          <el-table-column label="名称" min-width="150" prop="materialName"></el-table-column>
          <el-table-column label="规格型号" min-width="100" prop="materialModel"></el-table-column>
          <el-table-column label="管理编号" min-width="150" prop="materialManagementNumber"></el-table-column>
          <el-table-column label="精度等级" min-width="180" prop="materialAccuracyGrade"></el-table-column>
          <el-table-column label="温度" min-width="100" prop="temperature"></el-table-column>
          <el-table-column label="湿度" min-width="100" prop="humidity"></el-table-column>
          <el-table-column label="复核状态" min-width="180" prop="status">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status ===  1" type="success">通 è¿‡</el-tag>
              <el-tag v-if="scope.row.status ===  0" type="danger">不通过</el-tag>
            </template>
          </el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column align="center" fixed="right" label="操作" min-width="180">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.status === 1" size="small" type="text" @click="handleForm(scope.row.inspectionRecordId, 'edit')">编辑</el-button>
              <el-button :disabled="scope.row.status === 1" size="small" type="text" @click="handleForm(scope.row.inspectionRecordId, 'check')">审核</el-button>
              <el-button size="small" type="text" @click="handleDownOne(scope.row.inspectionRecordId)">导出</el-button>
              <el-button :disabled="scope.row.status === 1" size="small" style="color: #f56c6c" type="text" @click="deleteFun(scope.row.inspectionRecordId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
                       :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange1"
                       @current-change="handleCurrentChange1">
        </el-pagination>
      </div>
    </div>
    <inspection-form v-if="applicationForm" ref="applicationForm" @closeDialog="closeDialog"></inspection-form>
  </div>
</template>

<script>
import InspectionForm from "./inspection-form.vue";

export default {
  name: "inspection-of-equipment",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {InspectionForm},
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      pagination1: {
        size: 10,
        current: 1,
        total: 0,
      },
      yearTableDetailDataLoading: false,
      yearTableDetailData: [],
      applicationForm: false
    }
  },
  mounted() {
    this.getYearTableDetailData(this.clickNodeVal.value)
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æŸ¥è¯¢
    getYearTableDetailData(deviceId) {
      this.yearTableDetailDataLoading = true
      this.$axios.post(this.$api.deviceInspectionRecord.getDeviceInspectionRecordByPage, {
        page: {
          current: this.pagination1.current,
          size: this.pagination1.size,
        },
        entity: {
          deviceId: deviceId,
        }
      }, {
        headers: {
          'Content-Type': 'application/json'
        },
        noQs: true
      }).then(res => {
        if (res.code == 200) {
          this.yearTableDetailData = res.data.records
          this.pagination1.total = res.data.total
        }
        this.yearTableDetailDataLoading = false
      }).catch(err => {
        this.yearTableDetailDataLoading = false
      })
    },
    handleForm(id, type) {
      this.applicationForm = true
      this.$nextTick(() => {
        this.$refs.applicationForm.openDialog(id, this.clickNodeVal.value, type)
      })
    },
    closeDialog() {
      this.applicationForm = false
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // åˆ†é¡µ
    handleSizeChange1(val) {
      this.pagination1.size = val
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // åˆ†é¡µ
    handleCurrentChange1(val) {
      this.pagination1.current = val
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // å¯¼å‡º
    handleDownOne(id) {
      this.outLoading = true
      this.$axios.get(this.$api.deviceInspectionRecord.exportDeviceInspectionRecord + '?inspectionRecordId=' + id, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '设备点检记录表.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '设备点检记录表.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    // åˆ é™¤
    deleteFun(id) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.deviceInspectionRecord.deleteDeviceInspectionRecord + '?inspectionRecordId=' + id).then(res => {
          this.$message.success('删除成功！');
          this.getYearTableDetailData(this.clickNodeVal.value);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getYearTableDetailData(newVal.value);
      }
    },
  }
}
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-search {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>

 src/components/equipment/quantity-value-traceability-plan.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,434 @@
<template>
  <div>
    <div>
      <div style="margin: 10px 0;text-align: right">
        <el-button size="small" type="primary" @click="getYearTableDetailData">刷新</el-button>
        <el-button size="small" type="primary" @click="handleForm('add')">新增</el-button>
      </div>
      <div>
        <el-table ref="yearTable" v-loading="yearTableDetailDataLoading" :data="yearTableDetailData"
                  height="calc(100vh - 18em)"
                  style="width: 100% ;">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index" width="70"></el-table-column>
          <el-table-column label="年份" min-width="80" prop="planYear"></el-table-column>
          <el-table-column label="文件名称" min-width="120" prop="compiler"></el-table-column>
          <el-table-column label="编制人" min-width="150" prop="compiler"></el-table-column>
          <el-table-column label="编制时间" min-width="150" prop="datePreparation"></el-table-column>
          <el-table-column label="批准人" min-width="180" prop="audit"></el-table-column>
          <el-table-column label="批准状态" min-width="180" prop="status">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status ===  1" type="success">批 å‡†</el-tag>
              <el-tag v-if="scope.row.status ===  0" type="danger">不批准</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="批准时间" min-width="180" prop="auditDate"></el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column align="center" fixed="right" label="操作" min-width="180">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.status === 1" size="small" type="text" @click="handleForm('edit', scope.row)">编辑</el-button>
              <el-button :disabled="scope.row.status === 1" size="small" type="text" @click="handleForm('check', scope.row)">批准</el-button>
              <el-button size="small" type="text" @click="handleDownOne(scope.row.traceabilityManagementId)">导出</el-button>
              <el-button :disabled="scope.row.status === 1" size="small" style="color: #f56c6c" type="text" @click="deleteFun(scope.row.traceabilityManagementId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
                       :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange1"
                       @current-change="handleCurrentChange1">
        </el-pagination>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="applicationForm" title="仪器设备量值溯源管理总体计划"
               width="80%" @close="closeDialog">
      <div style="display: flex;align-items: center;">
        <el-button v-if="operationType !== 'check'" size="small" type="primary" @click="addTableRow">添加</el-button>
        <span style="width: 60px">年份：</span>
        <el-date-picker
          v-model="form.planYear"
          type="year"
          value-format="yyyy"
          clearable
          size="small"
          format="yyyy"
          placeholder="选择年">
        </el-date-picker>
      </div>
      <div style="margin: 10px 0">
        <el-table ref="yearTable" :data="deviceTraceabilityManagementDetails"
                  height="300px" id="templateParamTable" row-key="deviceId"
                  style="width: 100% ;">
          <el-table-column align="center" header-align="center" label="序号" type="index" width="60"></el-table-column>
          <el-table-column label="设备名称" min-width="170" prop="deviceId">
            <template slot-scope="scope">
              <el-input v-model="scope.row.deviceName" :disabled="operationType === 'check'" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="型号" min-width="140" prop="specificationModel">
            <template slot-scope="scope">
              <el-input v-model="scope.row.specificationModel" :disabled="operationType === 'check'" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="设备编号" min-width="140" prop="managementNumber">
            <template slot-scope="scope">
              <el-input v-model="scope.row.managementNumber" :disabled="operationType === 'check'" clearable size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="技术指标参数" min-width="120" prop="technicalIndexParameters">
            <template slot-scope="scope">
              <el-input v-model="scope.row.technicalIndexParameters" :disabled="operationType === 'check'" clearable size="small" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="技术指标要求" min-width="120" prop="technicalRequirements">
            <template slot-scope="scope">
              <el-input v-model="scope.row.technicalRequirements" :disabled="operationType === 'check'" clearable size="small" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="检定周期" min-width="120" prop="verificationCycle">
            <template slot-scope="scope">
              <el-input v-model="scope.row.verificationCycle" :disabled="operationType === 'check'" clearable size="small" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="检定单位" min-width="90" prop="verificationUnit">
            <template slot-scope="scope">
              <el-input v-model="scope.row.verificationUnit" :disabled="operationType === 'check'" clearable size="small" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="备注" min-width="90" prop="remark">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" :disabled="operationType === 'check'" clearable size="small" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="80" align="center">
            <template slot-scope="scope">
              <el-button style="color: #f56c6c" type="text" @click="deleteRow(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 æ¶ˆ</el-button>
        <el-button v-if="operationType !=='check'" :loading="submitFormLoading" type="primary" @click="submitForm">ç¡® è®¤</el-button>
        <el-button v-if="operationType ==='check'" :loading="submitFormLoading" type="primary" @click="checkStatus(0)">不通过</el-button>
        <el-button v-if="operationType ==='check'" :loading="submitFormLoading" type="primary" @click="checkStatus(1)">通 è¿‡</el-button>
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="addEquipDia" title="添加设备" width="50%">
      <el-table ref="multipleTable" :data="equipOptions" tooltip-effect="dark" height="500"
                style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="设备名称" prop="label" width="190"></el-table-column>
        <el-table-column prop="specificationModel" label="型号" width="120"></el-table-column>
        <el-table-column prop="managementNumber" label="设备编号"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addEquipDia = false">取 æ¶ˆ</el-button>
        <el-button v-if="operationType !=='check'" :loading="submitFormLoading" type="primary" @click="changeMachineName">ç¡® è®¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from "sortablejs";

export default {
  name: "quantity-value-traceability-plan",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      pagination1: {
        size: 10,
        current: 1,
        total: 0,
      },
      yearTableDetailDataLoading: false,
      yearTableDetailData: [],
      deviceTraceabilityManagementDetails: [],
      selectionRows: [],
      deviceIds: [],
      applicationForm: false,
      submitFormLoading: false,
      operationType: '',
      equipOptions: [],
      form: {
        planYear: '',
        deviceTraceabilityManagementDetails: []
      },
      addEquipDia: false,
    }
  },
  mounted() {
    this.getYearTableDetailData()
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æŸ¥è¯¢
    getYearTableDetailData() {
      this.yearTableDetailDataLoading = true
      this.$axios.post(this.$api.deviceTraceabilityManagement.selectDeviceTraceabilityManagementByPage, {
        page: {
          current: this.pagination1.current,
          size: this.pagination1.size,
        },
        entity: {}
      }, {
        headers: {
          'Content-Type': 'application/json'
        },
        noQs: true
      }).then(res => {
        if (res.code == 200) {
          this.yearTableDetailData = res.data.records
          this.pagination1.total = res.data.total
        }
        this.yearTableDetailDataLoading = false
      }).catch(err => {
        this.yearTableDetailDataLoading = false
      })
    },
    // æ‰“开新增和编辑弹框
    handleForm(type, row) {
      this.operationType = type
      this.applicationForm = true
      this.form = {
        planYear: '',
          deviceTraceabilityManagementDetails: []
      },
      this.deviceTraceabilityManagementDetails = []
      if (row) {
        this.traceabilityManagementId = row.traceabilityManagementId
        this.$axios.get(this.$api.deviceTraceabilityManagement.getTraceabilityManagementDetail + '?traceabilityManagementId=' + this.traceabilityManagementId).then(res => {
          if (res.code === 200) {
            this.form = res.data
            this.deviceTraceabilityManagementDetails = this.form.deviceTraceabilityManagementDetails
          }
        }).catch(error => {
          console.error(error)
        })
      }
    },
    // æ·»åŠ è®¾å¤‡
    addTableRow () {
      this.addEquipDia = true
      this.getEquipOptions()
    },
    handleSelectionChange (selection) {
      this.selectionRows = selection
    },
    // èµ‹å€¼ä»ªå™¨ç¼–号
    changeMachineName() {
      this.deviceTraceabilityManagementDetails = []
      this.selectionRows.map(val => {
        this.deviceTraceabilityManagementDetails.push({deviceId: val.id,managementNumber: val.value, deviceName: val.label, specificationModel: val.specificationModel})
      })
      this.addEquipDia = false
      this.rowDrop()
    },
    rowDrop() {
      const that = this
      const tbody = document.querySelector(
        '#templateParamTable .el-table__body-wrapper tbody'
      )
      if (!this.sortTable) {
        this.sortTable = Sortable.create(tbody, {
          animation: 200, //动画时长
          handle: ".el-table__row", //可拖拽区域class
          //拖拽中事件
          onMove: ({ dragged, related }) => {
            const oldRow = that.deviceTraceabilityManagementDetails[dragged.rowIndex] //旧位置数据
            const newRow = that.deviceTraceabilityManagementDetails[related.rowIndex] //被拖拽的新数据
          },
          //拖拽结束事件
          onEnd: evt => {
            const curRow = that.deviceTraceabilityManagementDetails.splice(evt.oldIndex, 1)[0];
            that.deviceTraceabilityManagementDetails.splice(evt.newIndex, 0, curRow);
          }
        })
      }
    },
    // åˆ é™¤è¡¨æ ¼è¡Œ
    deleteRow (index) {
      this.deviceTraceabilityManagementDetails.splice(index, 1)
    },
    // æäº¤æ–°å¢žå’Œä¿®æ”¹
    submitForm() {
      this.form.deviceTraceabilityManagementDetails = this.HaveJson(this.deviceTraceabilityManagementDetails)
      this.submitFormLoading = true
      if (this.operationType === 'add') {
        this.$axios.post(this.$api.deviceTraceabilityManagement.addTraceabilityManagement,
          this.form, {
            headers: {
              'Content-Type': 'application/json'
            },
            noQs: true
          }).then(res => {
          if (res.code == 200) {
            this.$message.success('新增成功')
            this.applicationForm = false
            this.getYearTableDetailData()
          }
          this.submitFormLoading = false
        }).catch(err => {
          this.submitFormLoading = false
        })
      } else {
        this.$axios.post(this.$api.deviceTraceabilityManagement.updateTraceabilityManagement,
          this.form, {
            headers: {
              'Content-Type': 'application/json'
            },
            noQs: true
          }).then(res => {
          if (res.code == 200) {
            this.$message.success('修改成功')
            this.applicationForm = false
            this.getYearTableDetailData()
          }
          this.submitFormLoading = false
        }).catch(err => {
          this.submitFormLoading = false
        })
      }
    },
    // æäº¤å®¡æ ¸
    checkStatus(status) {
      const params = {
        status: status,
        traceabilityManagementId: this.traceabilityManagementId
      }
      this.$axios.post(this.$api.deviceTraceabilityManagement.reviewTraceabilityManagementStatus,
        params, {
          headers: {
            'Content-Type': 'application/json'
          },
          noQs: true
        }).then(res => {
        if (res.code == 200) {
          this.$message.success('审核成功')
          this.applicationForm = false
          this.getYearTableDetailData()
        }
        this.submitFormLoading = false
      }).catch(err => {
        this.submitFormLoading = false
      })
    },
    closeDialog() {
      this.applicationForm = false
      this.getYearTableDetailData()
    },
    // åˆ†é¡µ
    handleSizeChange1(val) {
      this.pagination1.size = val
      this.getYearTableDetailData()
    },
    // åˆ†é¡µ
    handleCurrentChange1(val) {
      this.pagination1.current = val
      this.getYearTableDetailData()
    },
    handleDownOne(id) {
      this.outLoading = true
      this.$axios.get(this.$api.deviceTraceabilityManagement.exportDeviceTraceabilityManagement + '?traceabilityManagementId=' + id, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], {type: 'application/octet-stream'});
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '仪器设备量值溯源管理总体计划.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '仪器设备量值溯源管理总体计划.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    // åˆ é™¤
    deleteFun(id) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.deviceTraceabilityManagement.deleteTraceabilityManagement + '?traceabilityManagementId=' + id).then(res => {
          this.$message.success('删除成功！');
          this.getYearTableDetailData();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // èŽ·å–所有设备
    getEquipOptions() {
      this.equipOptions = []
      this.$axios.get(this.$api.deviceScope.deviceScopeSearch + '?status=0').then(res => {
        if (res.code === 200 && res.data) {
          this.equipOptions = res.data.map(m => {
            m.value = m.managementNumber
            m.label = m.deviceName
            return m
          })
        }
      }).catch(error => {
        console.error(error)
      })
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getYearTableDetailData();
      }
    },
  }
}
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-search {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>

 src/components/equipment/scrapApplicationForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,199 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="仪器设备报废申请表"
               width="80%" @close="resetForm">
      <el-steps :active="currentStep" align-center finish-status="success">
        <el-step title="填写申请表" @click.native="setStep(0)"></el-step>
        <el-step title="申请部门负责人意见" @click.native="setStep(1)"></el-step>
        <el-step title="计量室意见" @click.native="setStep(2)"></el-step>
        <el-step title="批准人" @click.native="setStep(3)"></el-step>
      </el-steps>
      <el-form ref="modelForm"
               :model="form" :rules="rules" label-width="160px">
        <el-col v-if="showStep === 0" :span="24">
          <el-form-item label="配件：" prop="parts">
            <el-input v-model="form.parts" :disabled="currentStep !== 0" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="24">
          <el-form-item label="报废理由：" prop="reasonsForScrap">
            <el-input v-model="form.reasonsForScrap" :disabled="currentStep !== 0" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 0" :span="24">
          <el-form-item label="申请部门负责人：" prop="departmentHeadUserId">
            <el-select v-model="form.departmentHeadUserId" :disabled="currentStep !== 0" placeholder="请选择" size="small" style="width: 50%">
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 1" :span="24">
          <el-form-item label="申请部门负责人意见：" prop="departmentHeadOpinion">
            <el-input v-model="form.departmentHeadOpinion" :disabled="currentStep !== 1" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 1" :span="24">
          <el-form-item label="计量室负责人：" prop="meteringRoomUserId">
            <el-select v-model="form.meteringRoomUserId" :disabled="currentStep !== 1" placeholder="请选择" size="small" style="width: 50%">
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 2" :span="24">
          <el-form-item label="计量室意见：" prop="meteringRoomOpinion">
            <el-input v-model="form.meteringRoomOpinion" :disabled="currentStep !== 2" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 2" :span="24">
          <el-form-item label="批准人：" prop="approverUserId">
            <el-select v-model="form.approverUserId" :disabled="currentStep !== 2" placeholder="请选择" size="small" style="width: 50%">
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="showStep === 3" :span="24">
          <el-form-item label="批准人意见：" prop="approverOpinion">
            <el-input v-model="form.approverOpinion" :disabled="currentStep !== 3" clearable size="small" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 æ¶ˆ</el-button>
        <el-button v-if="currentStep !== 4" :loading="submitFormLoading" type="primary" @click="submitForm">ç¡® è®¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "scrapApplicationForm",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      dialogVisible: false,
      submitFormLoading: false,
      form: {
        parts: '',
        reasonsForScrap: '',
        departmentHeadUserId: '',
        departmentHeadOpinion: '',
        meteringRoomUserId: '',
        meteringRoomOpinion: '',
        approverUserId: '',
        approverOpinion: '',
        flowType: '',
        deviceId: '',
        isFinish: '',
      },
      currentStep: 0,
      showStep: 0,
      rules: {
        departmentHeadUserId: [{ required: true, message: '请选择申请部门负责人', trigger: 'change' }],
        meteringRoomUserId: [{ required: true, message: '请选择计量室负责人', trigger: 'change' }],
        approverUserId: [{ required: true, message: '请选择批准人', trigger: 'change' }],
      },
      userList: [],
    }
  },
  mounted() {

  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æ‰“开弹框
    openDialog (id, deviceId) {
      this.dialogVisible = true
      this.form.scrappedId = id
      this.form.deviceId = deviceId
      this.getUserList()
      if (this.form.scrappedId) {
        this.searchInfo()
      }
    },
    // æŸ¥è¯¢è¯¦æƒ…
    searchInfo () {
      this.$axios.get(this.$api.deviceScrapped.getDeviceScrapped+'?scrappedId=' + this.form.scrappedId).then(res => {
        if (res.code === 200) {
          this.form = {...res.data}
          if (this.form.isFinish === 0) {
            if (this.form.departmentHeadUserId) {
              this.currentStep = 1
              this.showStep = 1
            }
            if (this.form.meteringRoomUserId) {
              this.currentStep = 2
              this.showStep = 2
            }
            if (this.form.approverUserId) {
              this.currentStep = 3
              this.showStep = 3
            }
          } else {
            this.currentStep = 4
            this.showStep = 3
          }
        }
      }).catch(error => {
        console.error(error)
      })
    },
    setStep (step) {
      this.showStep = step
    },
    // æäº¤è¡¨å•
    submitForm () {
      this.form.flowType = this.currentStep
      this.$refs.modelForm.validate((valid) => {
        if (valid) {
          this.$axios.post(this.$api.deviceScrapped.addDeviceScrapped,
            this.form, {
              headers: {
                'Content-Type': 'application/json'
              },
              noQs: true
            }).then(res => {
            if (res.code == 200) {
              this.$message.success('新增成功')
              this.resetForm()
            }
            this.submitFormLoading = false
          }).catch(err => {
            this.submitFormLoading = false
          })
        }
      })
    },
    // å…³é—­å¼¹æ¡†
    resetForm () {
      this.dialogVisible = false
      this.$emit('closeDialog')
    },
    getUserList(){
      this.$axios.post(this.$api.user.selectUserList, {
        page: {current: -1, size: -1,},
        entity: {name: null}
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code === 201) {
          return
        }
        this.userList = res.data.body.records
      })
    },
  },
}
</script>

<style scoped>
.form-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
</style>

 src/components/equipment/using-external-instruments.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,198 @@
<template>
  <div>
    <div>
      <div class="title">
        <div class="title-search">
          <span style="width: 80px;font-size: 14px">单位名称：</span>
          <el-input v-model="searchForm.unitName" clearable size="small" style="margin-right: 10px;width: 220px"></el-input>
          <el-button size="small" type="primary" @click="getYearTableDetailData">查 è¯¢</el-button>
          <el-button size="small" @click="reset">重 ç½®</el-button>
        </div>
        <div>
          <el-button size="small" type="primary" @click="handleForm('')">新增</el-button>
        </div>
      </div>
      <div>
        <el-table ref="yearTable" v-loading="yearTableDetailDataLoading" :data="yearTableDetailData"
                  height="calc(100vh - 18em)"
                  style="width: 100% ;">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index" width="70"></el-table-column>
          <el-table-column label="单位名称" min-width="150" prop="unitName"></el-table-column>
          <el-table-column label="地址" min-width="100" prop="address"></el-table-column>
          <el-table-column label="仪器名称" min-width="150" prop="deviceName"></el-table-column>
          <el-table-column label="型号" min-width="100" prop="deviceModel"></el-table-column>
          <el-table-column label="配件" min-width="150" prop="parts"></el-table-column>
          <el-table-column label="对方仪器编号" min-width="150" prop="instrumentNumber"></el-table-column>
          <el-table-column label="仪器技术指标" min-width="150" prop="technicalIndex" show-overflow-tooltip></el-table-column>
          <el-table-column label="需求技术指标" min-width="150" prop="technicalRequirements" show-overflow-tooltip></el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column align="center" fixed="right" label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.ratifyStatus === 1" size="small" type="text" @click="handleForm(scope.row.externalApplyId)">操作</el-button>
              <el-button size="small" type="text" @click="handleDownOne(scope.row.externalApplyId)">导出</el-button>
              <el-button size="small" style="color: #f56c6c" type="text" @click="deleteFun(scope.row.externalApplyId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
                       :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange1"
                       @current-change="handleCurrentChange1">
        </el-pagination>
      </div>
    </div>
    <application-form v-if="applicationForm" ref="applicationForm" @closeDialog="closeDialog"></application-form>
  </div>
</template>

<script>
import ApplicationForm from "./applicationForm.vue";

export default {
  name: "using-external-instruments",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {ApplicationForm},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      searchForm: {
        unitName: '',
      },
      pagination1: {
        size: 10,
        current: 1,
        total: 0,
      },
      yearTableDetailDataLoading: false,
      yearTableDetailData: [],
      applicationForm: false
    }
  },
  mounted() {
    this.getYearTableDetailData()
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æŸ¥è¯¢
    getYearTableDetailData () {
      this.yearTableDetailDataLoading = true
      this.$axios.post(this.$api.deviceExternalApply.pageDeviceExternalApply,{
        page: {
          current: this.pagination1.current,
          size: this.pagination1.size,
        },
        entity: {
          unitName: this.searchForm.unitName,
        }
      }, {
        headers: {
          'Content-Type': 'application/json'
        },
        noQs: true
      }).then(res => {
        if (res.code == 200) {
          this.yearTableDetailData = res.data.records
          this.pagination1.total = res.data.total
        }
        this.yearTableDetailDataLoading = false
      }).catch(err => {
        this.yearTableDetailDataLoading = false
      })
    },
    handleForm (id) {
      this.applicationForm = true
      this.$nextTick(() => {
        this.$refs.applicationForm.openDialog(id)
      })
    },
    closeDialog () {
      this.applicationForm = false
      this.getYearTableDetailData()
    },
    // é‡ç½®
    reset () {
      this.searchForm = {
        unitName: '',
      }
      this.getYearTableDetailData()
    },
    // åˆ†é¡µ
    handleSizeChange1(val) {
      this.pagination1.size = val
      this.getYearTableDetailData()
    },
    // åˆ†é¡µ
    handleCurrentChange1(val) {
      this.pagination1.current = val
      this.getYearTableDetailData()
    },
    // å¯¼å‡º
    handleDownOne(id) {
      this.outLoading = true
      this.$axios.get(this.$api.deviceExternalApply.exportDeviceExternalApply + '?externalApplyId=' + id, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '利用外部仪器设备申请表.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '利用外部仪器设备申请表.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
      })
    },
    // åˆ é™¤
    deleteFun(id) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get(this.$api.deviceExternalApply.delDeviceExternalApply + '?externalApplyId=' + id).then(res => {
          this.$message.success('删除成功！');
          this.getYearTableDetailData();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
}
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-search {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>

 src/components/view/a6-device.vue

@@ -1,18 +1,25 @@
<template>
  <div class="device-page">
    <div class="device-left">
      <el-input placeholder="输入设备名称" suffix-icon="el-icon-search" v-model="deviceName" size="small"
      @keyup.enter="geList"
      style="margin-bottom: 5px;" clearable @change="geList"></el-input>
      <el-tree :data="list" ref="tree" :props="{ children: 'children', label: 'label' }" node-key="id" @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen"
        @node-collapse="nodeClose" v-loading="loading" :expand-on-click-node="false"
        :default-expanded-keys="expandedKeys"
        style="height:calc(100% - 46px);overflow-y: scroll;scrollbar-width: none;">
        <div class="custom-tree-node" slot-scope="{ node, data }">
      <el-input v-model="deviceName" class="div_left_input" clearable placeholder="输入设备名称"
        size="small" suffix-icon="el-icon-search" @blur="searchFilter" @clear="searchFilter"
        @keyup.enter.native="searchFilter"></el-input>
      <el-tree ref="tree" v-loading="loading" :data="list" :expand-on-click-node="false"
        :filter-node-method="filterNode" :props="{ children: 'children', label: 'label' }" highlight-current node-key="id"
        style="height:calc(100% - 46px);
        overflow-y: scroll;
        scrollbar-width: none;" @node-click="handleNodeClick" @node-expand="nodeOpen" @node-collapse="nodeClose">
        <div slot-scope="{ node, data }" class="custom-tree-node">
          <el-row style="width: 100%;">
            <el-col :span="21" :title="data.label">
              <span class="single-line-ellipsis" style="width: 100%;display: inline-block;">
                <i :class="`node_i ${data.children != undefined ? (data.code==='[1]'?'el-icon-folder-opened':'el-icon-folder') : 'el-icon-tickets'}`"></i>
                <i :class="`node_i ${data.children != undefined
                  ? data.code === '[1]'
                    ? 'el-icon-folder-opened'
                    : 'el-icon-folder'
                  : 'el-icon-tickets'
                  }`
                  "></i>
                {{ data.label }}
              </span>
            </el-col>
@@ -21,30 +28,125 @@
      </el-tree>
    </div>
    <div class="device-right">
      <el-radio-group v-model="currentPage" size="small">
        <el-radio-button :label="item.id" v-for="(item,index) in tabList" :key="index"
          size="small">{{ item.title }}</el-radio-button>
      </el-radio-group>
      <div class="device-right-content">
        <component :is="currentPage"></component>
      <div v-if="isShowAll">
        <el-tabs v-model="menuListActiveName" class="main_right" type="border-card">
          <el-tab-pane label="设备总览" name="设备总览">
            <overview v-if="menuListActiveName == '设备总览'" :clickNodeVal="clickNodeVal" />
          </el-tab-pane>
          <el-tab-pane label="设备工具明细" name="设备工具明细">
            <management v-if="menuListActiveName == '设备工具明细'" :clickNodeVal="clickNodeVal" />
          </el-tab-pane>
<!--          <el-tab-pane label="资源预定" name="资源预定">-->
<!--            <resourceReservation v-if="menuListActiveName == '资源预定'" :clickNodeVal="clickNodeVal"/>-->
<!--          </el-tab-pane>-->
          <el-tab-pane label="设备校准计划" name="设备校准计划">
            <equipment-calibration-plan v-if="menuListActiveName == '设备校准计划'" :clickNodeVal="clickNodeVal"></equipment-calibration-plan>
          </el-tab-pane>
          <el-tab-pane label="设备核查计划" name="设备核查计划">
            <equipment-verification-plan v-if="menuListActiveName == '设备核查计划'" :clickNodeVal="clickNodeVal"></equipment-verification-plan>
          </el-tab-pane>
          <el-tab-pane label="设备保养计划" name="设备保养计划">
            <equipment-maintenance-plan v-if="menuListActiveName == '设备保养计划'" :clickNodeVal="clickNodeVal"></equipment-maintenance-plan>
          </el-tab-pane>
          <el-tab-pane label="量值溯源计划" name="量值溯源计划">
            <quantity-value-traceability-plan v-if="menuListActiveName == '量值溯源计划'" :clickNodeVal="clickNodeVal"></quantity-value-traceability-plan>
          </el-tab-pane>
          <el-tab-pane label="利用外部仪器设备" name="利用外部仪器设备">
            <using-external-instruments v-if="menuListActiveName == '利用外部仪器设备'" :clickNodeVal="clickNodeVal"></using-external-instruments>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-if="!isShowAll">
        <el-tabs v-model="tabListActiveName" class="main_right" type="border-card" @tab-click="handleClick">
<!--          <el-tab-pane label="设备运行总览" name="设备运行总览">-->
<!--            <operationOverview v-if="tabListActiveName == '设备运行总览'" :clickNodeVal="clickNodeVal"/>-->
<!--          </el-tab-pane>-->
          <el-tab-pane label="设备档案" name="设备档案">
            <files v-if="tabListActiveName == '设备档案'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="设备验收" name="设备验收">
<!--            <checkAndAccept v-if="tabListActiveName == '设备验收'" :clickNodeVal="clickNodeVal"/>-->
            <equipment-acceptance v-if="tabListActiveName == '设备验收'" :clickNodeVal="clickNodeVal"></equipment-acceptance>
          </el-tab-pane>
          <el-tab-pane label="设备校准" name="设备校准">
            <calibration v-if="tabListActiveName == '设备校准'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
<!--          <el-tab-pane label="设备核查" name="设备核查">-->
<!--            <check v-if="tabListActiveName == '设备核查'" :clickNodeVal="clickNodeVal"/>-->
<!--          </el-tab-pane>-->
          <el-tab-pane label="设备维护" name="设备维护">
            <maintenance v-if="tabListActiveName == '设备维护'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="设备借用" name="设备借用">
            <borrow v-if="tabListActiveName == '设备借用'" :clickNodeVal="clickNodeVal" />
          </el-tab-pane>
<!--          <el-tab-pane label="设备故障" name="设备故障">-->
<!--            <fault v-if="tabListActiveName == '设备故障'" :clickNodeVal="clickNodeVal" />-->
<!--          </el-tab-pane>-->
          <el-tab-pane label="使用记录" name="使用记录">
            <record v-if="tabListActiveName == '使用记录'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="设备停用/启用" name="设备停用/启用">
            <state v-if="tabListActiveName == '设备停用/启用'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="设备报废" name="设备报废">
            <equipment-scrap v-if="tabListActiveName == '设备报废'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="设备故障与维修" name="设备故障与维修">
            <equipment-failure v-if="tabListActiveName == '设备故障与维修'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="设备点检" name="设备点检">
            <inspection-of-equipment v-if="tabListActiveName == '设备点检'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="设备事故" name="设备事故">
            <equipment-accident v-if="tabListActiveName == '设备事故'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
          <el-tab-pane label="作业指导书" name="作业指导书">
            <operationInstruction v-if="tabListActiveName == '作业指导书'" :clickNodeVal="clickNodeVal"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import operationOverview from '../do/a6-device/operation-overview.vue';
import files from '../do/a6-device/files.vue';
import checkAndAccept from '../do/a6-device/check-and-accept.vue';
import calibration from '../do/a6-device/calibration.vue';
import check from '../do/a6-device/check.vue';
import maintenance from '../do/a6-device/maintenance.vue';
import operationOverview from "../do/a6-device/operation-overview.vue";
import files from "../do/a6-device/files.vue";
import checkAndAccept from "../do/a6-device/check-and-accept.vue";
import calibration from "../do/a6-device/calibration.vue";
import check from "../do/a6-device/check.vue";
import maintenance from "../do/a6-device/maintenance.vue";
import borrow from "../do/a6-device/borrow.vue";
import fault from "../do/a6-device/fault.vue";
import record from '../do/a6-device/record.vue';
import state from '../do/a6-device/state.vue';
import record from "../do/a6-device/record.vue";
import state from "../do/a6-device/state.vue";
import management from "../do/a6-device/management.vue";
import overview from "../do/a6-device/device-overview.vue";
import resourceReservation from "../do/a6-device/resource-reservation.vue";
import operationInstruction from "../do/a6-device/operation-instruction.vue";
import EquipmentCalibrationPlan from "../equipment/equipment-calibration-plan.vue";
import EquipmentVerificationPlan from "../equipment/equipment-verification-plan.vue";
import UsingExternalInstruments from "../equipment/using-external-instruments.vue";
import EquipmentScrap from "../equipment/equipment-scrap.vue";
import EquipmentFailure from "../equipment/equipment-failure.vue";
import InspectionOfEquipment from "../equipment/inspection-of-equipment.vue";
import EquipmentAccident from "../equipment/equipment-accident.vue";
import EquipmentMaintenancePlan from "../equipment/equipment-maintenance-plan.vue";
import EquipmentAcceptance from "../equipment/equipment-acceptance.vue";
import QuantityValueTraceabilityPlan from "../equipment/quantity-value-traceability-plan.vue";
export default {
  components:{
  components: {
    QuantityValueTraceabilityPlan,
    EquipmentAcceptance,
    EquipmentMaintenancePlan,
    EquipmentAccident,
    InspectionOfEquipment,
    EquipmentFailure,
    EquipmentScrap,
    UsingExternalInstruments,
    EquipmentVerificationPlan,
    EquipmentCalibrationPlan,
    operationOverview,
    files,
    checkAndAccept,
@@ -55,137 +157,109 @@
    fault,
    record,
    state,
    management,
    overview,
    resourceReservation,
    operationInstruction
  },
  data(){
  data() {
    return {
      deviceName:'',
      loading:false,
      tabList:[
        {
          id:'operationOverview',
          title:'设备运行总览',
        },
        {
          id:'files',
          title:'设备档案',
        },
        {
          id:'checkAndAccept',
          title:'设备验收',
        },
        {
          id:'calibration',
          title:'设备校准',
        },
        {
          id:'check',
          title:'设备核查',
        },
        {
          id:'maintenance',
          title:'设备维护',
        },
        {
          id:'borrow',
          title:'设备借用',
        },
        {
          id:'fault',
          title:'设备故障',
        },
        {
          id:'record',
          title:'使用记录',
        },
        {
          id:'state',
          title:'设备停用/启用',
        },
      ],
      currentPage:'operationOverview',
      expandedKeys:[],
      selectTree:'',
      list:[]
    }
      isShowAll: true,
      deviceName: "", // ä¾§è¾¹æ æœç´¢
      loading: false,
      tabListActiveName: '设备档案',
      menuListActiveName: '设备总览',
      list: [],
      clickNodeVal: {}
    };
  },
  mounted(){
    this.geList()
  mounted() {
    // åˆå§‹åŒ–调用
    this.geList();
  },
  methods:{
    geList(){
  methods: {
    handleClick(tab, event) {
    },
    searchFilter() {
      this.$refs.tree.filter(this.deviceName)
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // çˆ¶çº§
    geList() {
      this.loading = true;
      this.$axios.get(this.$api.deviceScope.treeDevice+'?deviceName='+this.deviceName).then(res => {
        this.loading = false;
          let data = res.data
          data.forEach((item,index) => {
            item.id = index +1
            item.label = item.largeCategory
            item.children.forEach((m,i)=>{
              m.label = m.deviceName
            })
          })
          this.list = data
        })
      this.$axios.get(
        this.$api.deviceScope.treeDevice
      ).then(res => {
        let data = res.data;
        this.list = data;
        this.loading = false
      });
    },
    handleNodeClick(val, node, el) { //树的值
      this.selectTree = ''
      this.getNodeParent(node)
      this.selectTree = this.selectTree.replace(' - ', '')
      let data = this.selectTree.split(' - ')
      let data2 = ''
      for (let index = data.length - 1; index >= 0; index--) {
        data2 += " - " + data[index]
      }
      this.selectTree = data2.replace(' - ', '')

      this.currentPage = 'operationOverview';
    },
    getNodeParent(val) {
      if (val.parent != null) {
        if(val.data.children === null){
          this.selectTree += ' - ' + val.label + ' - ' + 'null'
        }else{
          this.selectTree += ' - ' + val.label
        }
        this.getNodeParent(val.parent)
    handleNodeClick(val, node, el) {
      // ç‚¹å‡»ä¸´æ—¶ç¼“å­˜
      this.clickNodeVal = val;
      // å­˜å‚¨çˆ¶çº§èŠ‚点级数
      this.clickNodeVal.level = node.level
      this.clickNodeVal.parent = node.parent.data
      // æ˜¯å¦æ˜¾ç¤ºè®¾å¤‡è¯¦æƒ…
      if (!val.value) {
        this.isShowAll = true
      } else {
        this.isShowAll = false
      }
    },
    nodeOpen(data, node, el) {
      $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened')
      $($(el.$el).find(".node_i")[0]).attr(
        "class",
        "node_i el-icon-folder-opened"
      );
    },
    nodeClose(data, node, el) {
      $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder')
      $($(el.$el).find(".node_i")[0]).attr("class", "node_i el-icon-folder");
    },
  }
}
};
</script>

<style scoped>
.device-page{
.device-page {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  width: 100%;
}
.device-left{
  width: 200px;

.device-left {
  width: 250px;
  height: 100%;
  background: #fff;
  margin-right: 10px;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 10px 16px;
  flex-shrink: 0;
}
.device-right{

.device-right {
  background: #fff;
  flex: 1;
  width: calc(100% - 260px);
  height: 100%;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 10px 16px;
}
.device-right-content{
  margin-top: 10px;

.showLargeCategory {
  width: 100%;
  height: 100%;
}

.device-right-content {
  /* margin-top: 10px; */
  height: calc(100% - 42px);
  width: 100%;
}
@@ -199,4 +273,12 @@
  color: orange;
  font-size: 18px;
}

.main_right {
  height: calc(100% - 5px);
  overflow: hidden;
}
>>>.el-tabs__content {
  padding-top: 0;
}
</style>

 src/main.js

@@ -22,7 +22,7 @@
//本地
// Vue.prototype.LOCATIONVUE = "http://127.0.0.1:80";
// const javaApi = 'http://127.0.0.1:8001';
// const javaApi = 'http://172.20.10.5:8001';
// const javaApi = 'http://10.37.202.58:8001';

//通信测试库
// Vue.prototype.LOCATIONVUE = "http://10.1.13.77:8080";
@@ -31,11 +31,11 @@
// é€šä¿¡æ­£å¼åº“
// Vue.prototype.LOCATIONVUE = "http://192.168.22.29:8080";
// const javaApi = 'http://192.168.22.29:8001/lims/';
const javaApi = 'https://ztwxlims.ztt.cn:7443/lims/';
// const javaApi = 'https://ztwxlims.ztt.cn:7443/lims/';

// //云
// Vue.prototype.LOCATIONVUE = "http://114.132.189.42:8080";
// const javaApi = 'http://114.132.189.42:1234';
Vue.prototype.LOCATIONVUE = "http://114.132.189.42:8080";
const javaApi = 'http://114.132.189.42:1234';

// //检测中心正式库
// Vue.prototype.LOCATIONVUE = "http://10.1.200.86:8080";

 src/util/auth.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,17 @@
/**
 * åˆ¤æ–­å½“前角色是否有该权限
 * @param {*} methodName
 * @returns
 */
export function isPermission(methodName){
  if(undefined != methodName && '' != methodName && null!=methodName){
    //当前角色所有选中的权限
    let power = JSON.parse(sessionStorage.getItem('power'))
    for (var i = 0; i < power.length; i++) {
      if (methodName && power[i].menuMethod == methodName) {
        return true
      }
    }
  }
  return false
}

 static/js/menu.js

@@ -243,7 +243,7 @@
    //     ]
    // },
    {
        v: "5 ç»“构要求",
        v: "结构要求",
        i: "font icon-jiegouyaoqiu",
        p: "",
        c: [
@@ -264,19 +264,19 @@
            v: "实验室资质",
            i: "font icon-erjidaohang",
            u: "a5-laboratory-qualifications",
            g: "C能力范围和资质",
            g: "能力范围和资质",
            p: "getCertificationDetail"
        }, {
            v: "能力范围",
            i: "font icon-erjidaohang",
            u: "a5-capacity-scope",
            g: "C能力范围和资质",
            g: "能力范围和资质",
            p: "selectItemParameterList selectTestObjectList"
        }, {
            v: "场所或设施",
            i: "font icon-erjidaohang",
            u: "a5-laboratory-management",
            g: "D场所或设施",
            g: "场所或设施",
            p: "selectItemParameter"
        }
    // , {
@@ -300,7 +300,7 @@
        // }
  ]
    }, {
        v: "6 èµ„源要求",
        v: "资源要求",
        i: "font icon-ziyuanyaoqiu",
        p: "",
        c: [
@@ -315,21 +315,21 @@
            v: "人员总览",
            i: "font icon-erjidaohang",
            u: "a6-personnel-overview",
            g: "6.2 äººå‘˜",
            g: "人员",
            p: "selectPersonnelOverview"
        },
    {
            v: "人员",
            i: "font icon-erjidaohang",
            u: "a6-personnel",
            g: "6.2 äººå‘˜",
            g: "人员",
            p: ""
        },
      {
            v: "设施和环境条件",
            i: "font icon-erjidaohang",
            u: "a6-facilities-environment",
            g: "6.3 è®¾æ–½å’ŒçŽ¯å¢ƒæ¡ä»¶",
            g: "设施和环境条件",
            p: ""
        },
         {
@@ -337,32 +337,32 @@
            i: "font icon-erjidaohang",
            // u: "a6-device",
      u:"a6-device-management",
            g: "6.4 è®¾å¤‡",
            g: "设备",
            p: ""
        },
         {
            v: "量值溯源计划",
            i: "font icon-erjidaohang",
            u: "a6-quantity-value-traceability-plan",
            g: "6.5 è®¡é‡æº¯æºæ€§",
            g: "计量溯源性",
            p: ""
        }, {
            v: "标准物质清单",
            i: "font icon-erjidaohang",
            u: "a6-standard-material-list",
            g: "6.5 è®¡é‡æº¯æºæ€§",
            g: "计量溯源性",
            p: ""
        }, {
            v: "标准物质验收",
            i: "font icon-erjidaohang",
            u: "a6-standard-material-accep",
            g: "6.5 è®¡é‡æº¯æºæ€§",
            g: "计量溯源性",
            p: ""
        }, {
            v: "标准物质领用",
            i: "font icon-erjidaohang",
            u: "a6-standard-material-requisition",
            g: "6.5 è®¡é‡æº¯æºæ€§",
            g: "计量溯源性",
            p: ""
        },
    // {
@@ -376,13 +376,13 @@
            v: "服务和供应品采购",
            i: "font icon-erjidaohang",
            u: "a6.service-and-supply-purchase",
            g: "6.6 å¤–部提供的产品和服务",
            g: "外部提供的产品和服务",
            p: ""
        },{
            v: "供应商管理",
            i: "font icon-erjidaohang",
            u: "a6-supplier-manage",
            g: "6.6 å¤–部提供的产品和服务",
            g: "外部提供的产品和服务",
            p: ""
        },
    // {
@@ -401,7 +401,7 @@
  ]
    },
    {
        v: "7 è¿‡ç¨‹è¦æ±‚",
        v: "过程要求",
        i: "font icon-guochengyaoqiu",
        p: "",
        c: [
@@ -409,7 +409,7 @@
        v: "检验委托单",
        i: "font icon-erjidaohang",
        u: "a7-contract-review",
        g: "7.1 è¦æ±‚、标书和合同评审",
        g: "要求、标书和合同评审",
        p: "pageProcessOrder"
      },
      //  {
@@ -423,25 +423,25 @@
        v: "实验室的检测能力档案",
        i: "font icon-erjidaohang",
        u: "a7-standard-method",
        g: "7.2 æ–¹æ³•çš„选择、验证和确认",
        g: "方法的选择、验证和确认",
        p: "selectStandardMethodList"
      }, {
        v: "标准查新",
        i: "font icon-erjidaohang",
        u: "a7-standard-novelty-retrieval",
        g: "7.2 æ–¹æ³•çš„选择、验证和确认",
        g: "方法的选择、验证和确认",
        p: ""
      }, {
        v: "标准方法的变更",
        i: "font icon-erjidaohang",
        u: "a7-changes-standard-methods",
        g: "7.2 æ–¹æ³•çš„选择、验证和确认",
        g: "方法的选择、验证和确认",
        p: ""
      }, {
        v: "方法验证",
        i: "font icon-erjidaohang",
        u: "a7-method-verification",
        g: "7.2 æ–¹æ³•çš„选择、验证和确认",
        g: "方法的选择、验证和确认",
        p: ""
      },
      //  {
@@ -455,13 +455,13 @@
        v: "样品接收",
        i: "font icon-erjidaohang",
        u: "a7-sample-registration",
        g: "7.4 æ£€æµ‹æˆ–校准物品的处置",
        g: "检测或校准物品的处置",
        p: "pageProcessTotaldeal"
      },{
        v: "检测或校准物品的处置",
        i: "font icon-erjidaohang",
        u: "a7-sample-disposal",
        g: "7.4 æ£€æµ‹æˆ–校准物品的处置",
        g: "检测或校准物品的处置",
        p: "pageProcessTotaldeal"
      },
      // {
@@ -475,43 +475,43 @@
        v: "测量不确定度的评定",
        i: "font icon-erjidaohang",
        u: "a7-uncertainty-evaluation",
        g: "7.6 æµ‹é‡ä¸ç¡®å®šåº¦çš„评定",
        g: "测量不确定度的评定",
        p: "pageProcessEvaluate"
      }, {
        v: "质量监控计划",
        i: "font icon-erjidaohang",
        u: "a7-Ensure-results-validity",
        g: "7.7 ç¡®ä¿ç»“果有效性",
        g: "确保结果有效性",
        p: ""
      }, {
        v: "质量监督计划",
        i: "font icon-erjidaohang",
        u: "a7-quality-control-plan",
        g: "7.7 ç¡®ä¿ç»“果有效性",
        g: "确保结果有效性",
        p: ""
      }, {
        v: "报告结果",
        i: "font icon-erjidaohang",
        u: "a7-report-results",
        g: "7.8 æŠ¥å‘Šç»“æžœ",
        g: "报告结果",
        p: "pageProcessReport"
      },{
        v: "投诉情况汇总表",
        i: "font icon-erjidaohang",
        u: "a7-complaint",
        g: "7.9 æŠ•è¯‰",
        g: "投诉",
        p: "pageProcessComplain"
      }, {
        v: "不符合项",
        i: "font icon-erjidaohang",
        u: "a7-nonconforming-item",
        g: "7.10 ä¸ç¬¦åˆå·¥ä½œ",
        g: "不符合工作",
        p: ""
      }, {
        v: "不符合项的分布",
        i: "font icon-erjidaohang",
        u: "a7-distribution-of-nonconforming",
        g: "7.10 ä¸ç¬¦åˆå·¥ä½œ",
        g: "不符合工作",
        p: ""
      },
      // {
@@ -524,7 +524,7 @@
  ]
    },
    {
        v: "8 ä½“系管理要求",
        v: "体系管理要求",
        i: "font icon-guanlitixiyaoqiu",
        p: "",
        c: [
@@ -545,49 +545,49 @@
            v: "管理体系文件的控制",
            i: "font icon-erjidaohang",
            u: "a8-file-handling",
            g: "8.3 ç®¡ç†ä½“系文件的控制",
            g: "管理体系文件的控制",
            p: "doManageDocumentList pageManageDocumentControlled"
        },{
            v: "文件审批记录",
            i: "font icon-erjidaohang",
            u: "a8-document-approval-records",
            g: "8.4 è®°å½•çš„控制",
            g: "记录的控制",
            p: "pageManageRecordCheck"
        },{
            v: "外来文件确认记录",
            i: "font icon-erjidaohang",
            u: "a8-external-document-confirmation-records",
            g: "8.4 è®°å½•çš„控制",
            g: "记录的控制",
            p: "pageManageRecordTotal"
        },{
            v: "所有文件（内、外部文件）的发放与回收记录",
            i: "font icon-erjidaohang",
            u: "a8-distribution-retrieval-records-all-documents",
            g: "8.4 è®°å½•çš„控制",
            g: "记录的控制",
            p: "pageManageRecordIssueRecycle"
        },{
            v: "文件修订申请审批记录",
            i: "font icon-erjidaohang",
            u: "a8-document-revision-request-approval-records",
            g: "8.4 è®°å½•çš„控制",
            g: "记录的控制",
            p: "pageManageRecordAudit"
        },{
            v: "文件定期审查记录",
            i: "font icon-erjidaohang",
            u: "a8-periodic-document-review-records",
            g: "8.4 è®°å½•çš„控制",
            g: "记录的控制",
            p: "pageManageRecordIntervals"
        },{
            v: "作废文件销毁记录",
            i: "font icon-erjidaohang",
            u: "a8-obsolete-document-destruction-records",
            g: "8.4 è®°å½•çš„控制",
            g: "记录的控制",
            p: "pageManageRecordCancel"
        }, {
            v: "应对风险和机遇的措施",
            i: "font icon-erjidaohang",
            u: "a8-measures_deal_risks_opportunities",
            g: "8.5 åº”对风险和机遇的措施",
            g: "应对风险和机遇的措施",
            p: ""
        },
    // {
@@ -601,25 +601,25 @@
            v: "客户满意度",
            i: "font icon-erjidaohang",
            u: "a8-customer-satisfaction",
            g: "8.6 æ”¹è¿›",
            g: "改进",
            p: ""
        }, {
            v: "纠正措施",
            i: "font icon-erjidaohang",
            u: "a8-corrective-action",
            g: "8.7 çº æ­£æŽªæ–½",
            g: "纠正措施",
            p: ""
        }, {
            v: "内审管理",
            i: "font icon-erjidaohang",
            u: "a8-internal-audit-management",
            g: "8.8 å†…审管理",
            g: "内审管理",
            p: ""
        }, {
            v: "管理评审",
            i: "font icon-erjidaohang",
            u: "a9-management-review",
            g: "8.9 ç®¡ç†è¯„审",
            g: "管理评审",
            p: ""
        }]
    }