Merge branch 'dev' of http://114.132.189.42:9002/r/center-lims-before-ruoyi...

lxp

2025-03-12 952a20f1c005d80e9bf881287c40e6f4e4266a0b

 src/views/CNAS/resourceDemand/device/component/files.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1141 @@
<!-- è®¾å¤‡æ¡£æ¡ˆ -->
<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="openEditForm" style="">修订档案</el-button>
        <el-button type="primary" size="small" @click="dialogVisible1 = true" style="">添加附件</el-button>
        <el-button type="primary" 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>
    <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>
          <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>
            <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="修订档案" 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="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="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="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="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="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="editData.unitPrice" size="small"></el-input>
            </el-form-item>
            <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="校准周期（月）:" 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="uploadHeader" :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="uploadHeader" 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 fileDownload from '@/utils/file'
import vueQr from 'vue-qr'
import PrintJS from 'print-js'
import domtoimage from 'dom-to-image';
import {
  deleteCNASFile,
  updateDocument,
  addDocument,
  deleteDocumentById,
  selectDeviceByCode,
  upDeviceParameter,
  exportDeviceFile,
  getInsProduction, getListByDId,
} from '@/api/cnas/resourceDemand/device.js'
import { selectUserCondition } from "@/api/system/user";
import {
  obtainItemParameterList,
} from '@/api/cnas/resourceDemand/device.js'
export default {
  filters: {
    formaterDateTime(dateTime) {
      if (dateTime === undefined || dateTime === null || dateTime === '') {
        return dateTime
      }
      return dateTime.split(" ")[0]
    }
  },
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    vueQr
  },
  data() {
    return {
      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' },
        ],
        subordinateDepartmentsId: [
          { required: true, message: '请选择所属部门', trigger: 'change' },
        ]
      },
      // dateForm: {

      // },
      fileList: [], // æ·»åŠ é™„件上传文件列表
      timeStamp: '', // ç»™å›¾ç‰‡æ·»åŠ key，在每次加载页面的时候新建时间戳
      equipmentManager: [],
      formLabelWidth: '100px',
      dialogVisible1: false,
      recordNumber: '',
      inLoading: false, // æŽ§åˆ¶ä¸Šä¼ æŒ‰é’®åŠ è½½çŠ¶æ€
      isLoading: false, // æŽ§åˆ¶ç¡®å®šæŒ‰é’®åŠ è½½çŠ¶æ€
      formData: {},
      tableDataA: [],
      num: 1,
      //添加附件数据收集
      addFile: {
        documentType: '', // ç»´æŠ¤ç±»åž‹
        provideDate: 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,
      upLoad: false,
      responsiblePersonList: [],
      subordinateDepartmentsList: [],
      options: [],
      equipmentList: [],
      deviceStatusList: [],
      props: { multiple: true, emitPath: false, value: 'id', label: 'name' },
      // æ”¶é›†è®¾å¤‡æ¡£æ¡ˆæ•°æ®
      Mdata: {
        deviceName: null
      },
      isAddFileUpdate: false,
      editData: {
        authorizedPerson: [],
      },
    }
  },
  computed: {
    action() {
      return this.javaApi + '/deviceScope/uploadFile'
    }
  },
  mounted() {
    // æ”¶é›†æ•°æ®
    this.getList(this.clickNodeVal.value)
    // èŽ·å–相关文档的数据
    this.getPage()
    this.timeStamp = Date.now()
  },
  methods: {
    /**
   * å°†é¡µé¢æŒ‡å®šèŠ‚点内容转为图片
   * 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) {
        this.$download.saveAs(row.fileName)
      } 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(() => {
        deleteDocumentById({ id: 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) {
        updateDocument(this.addFile).then(res => {
          if (res.code == 200) {
            this.$message.success('更新成功')
            this.dialogVisible1 = false;
            this.getPage()
          }
        })
      } else {
        // æ–°å¢ž
        addDocument(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) {
      deleteCNASFile({ 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() {
      getListByDId({ id: this.clickNodeVal.value }).then(res => {
        if (res.code == 200)
          this.tableDataA = res.data
      })
    },
    // æ”¶é›†æ•°æ®
    getList(id) {
      selectDeviceByCode({ id }).then(res => {
        // å°†åˆ†ç±»åˆ—表的信息存起来
        if (res.code == 200) {
          this.Mdata = res.data;
          this.Mdata.insProductIds = this.Mdata.insProductIds.split(',')
          if (this.Mdata.authorizedPerson) {
            this.Mdata.authorizedPerson = JSON.parse(this.Mdata.authorizedPerson)
          }
        }
      });
    },
    handleData(m) {
      if (m) {
        return m
      } else {
        return '-'
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    //打开修订档案弹框
    openEditForm() {
      this.editData = JSON.parse(JSON.stringify(this.Mdata))
      this.$nextTick(() => {
        this.dialogVisible = true
      })
    },
    //修订档案
    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.createTime
      delete this.editData.updateTime
      delete this.editData.createUser
      delete this.editData.updateUser
      delete this.editData.orderBy
      const formData = this.HaveJson(this.editData)
      formData.userAllow = this.equipmentManager.toString();
      formData.insProductIds = Array.isArray(formData.insProductIds) ? formData.insProductIds.join(',') : '';
      if (formData.authorizedPerson.length === 0) {
        formData.authorizedPerson = ''
      } else {
        formData.authorizedPerson = JSON.stringify(formData.authorizedPerson)
      }
      this.upLoad = true;
      upDeviceParameter(formData).then(res => {
        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
      exportDeviceFile({ deviceId: this.clickNodeVal.value }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        this.$download.saveAs(blob, '设备档案卡.doc')
      })
    },
    handleSuccessUpImg2(response) {
      if (response.code == 200) {
        this.$nextTick(() => {
          this.editData.imageUpload = response.data.url;
          this.editData.imageName = response.data.name;
          console.log(this.javaApi + 'img/' + this.editData.imageUpload);

        })
      }
    },
    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()
    },
    // èŽ·å–负责人列表
    selectDevicePrincipal() {
      selectUserCondition().then(res => {
        this.responsiblePersonList = res.data;
      })
    },
    obtainItemParameterList() {
      obtainItemParameterList().then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.laboratoryName,
            value: a.id
          })
        })
        this.subordinateDepartmentsList = data
      })
    },
    getInsProductIds() {
      getInsProduction().then(res => {
        this.options = res.data.map((m, i) => {
          m.id = m.name;
          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;
                  }
                })
              }
            })
          }
        })
      })
    },
    // èŽ·å–å­—å…¸
    selectEnumByCategory() {
      // è®¾å¤‡çŠ¶æ€
      this.getDicts("device_status").then((response) => {
        this.deviceStatusList = this.dictToValue(response.data)
        this.deviceStatusList.forEach(a => {
          if (!isNaN(a.value)) {
            a.value = parseInt(a.value)
          }
        })
      });
      // è®¾å¤‡åˆ†ç±»
      this.getDicts("device_type").then((response) => {
        this.equipmentList = this.dictToValue(response.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>
.main_div {
  height: calc(100vh - 15em);
  overflow-y: auto;
  overflow-x: hidden;
}

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

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

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

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

.tables {
  width: 100%;
}

.el-image {
  position: relative;
}

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

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

.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: 500px;
  padding: 25px 0px;
  background-color: #fff;
}

.device-center {
  width: 90%;
  height: 490px;
  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>