修改设备模块bug

spring

2025-02-15 237f95b05e0f122ee9ec7beaf82ba366a8b220ed

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

@@ -1,307 +1,1501 @@
<!-- 设备档案 -->
<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">修订档案</el-button>
        <el-button type="primary" size="small">添加附件</el-button>
        <el-button type="primary" size="small" @click="openEditForm"
          >修订档案</el-button
        >
        <el-button type="primary" size="small" @click="dialogVisible1 = true"
          >添加附件</el-button
        >
        <el-button
          type="primary"
          v-if="isPermission('showDeviceQrCodeButton')"
          size="small"
          @click="deviceDialog = true"
          >查看设备二维码</el-button
        >
        <el-button type="primary" size="small" @click="handleDownOne"
          >导出</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.nextCalibrationDate | formaterDateTime }}</p>
          </div>
          <div class="form-item">
            <label>采购费用(元)</label>
            <p>{{ Mdata.unitPrice }}</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;max-height: 75vh;overflow-y: auto;"
      >
        <!-- 左边布局 -->
        <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"
                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="editData.lastCalibrationDate"
                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-date-picker
                style="width:100%"
                v-model="editData.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="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 ValueTable from '../../tool/value-table.vue'
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,
      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" }
        ]
      },
      // 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,
      upLoad: false,
      responsiblePersonList: [],
      subordinateDepartmentsList: [],
      options: [],
      equipmentList: [],
      deviceStatusList: [],
      props: { multiple: true, emitPath: false, value: "id", label: "name" },
      // 收集设备档案数据
      Mdata: {
        deviceName: null
      },
      isAddFileUpdate: false,
      editData: {
        authorizedPerson: []
      }
    };
  },
  computed: {
    headers() {
      return {
        token: sessionStorage.getItem("token")
      };
    },
    action() {
      return this.javaApi + this.$api.deviceScope.uploadFile;
    }
  },
  mounted() {
    // 收集数据
    this.getList(this.clickNodeVal.value);
    // 获取相关文档的数据
    this.getPage();
    this.timeStamp = Date.now();
  },
  methods: {
    handleData(m){
      if(m){
        return m
      }else{
        return '-'
    /**
     * 将页面指定节点内容转为图片
     * 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) {
        let state = /\.(jpg|jpeg|png|gif)$/i.test(row.fileName);
        if (state) {
          let url = this.javaApi + "/img/" + row.fileName;
          fileDownload.downloadIamge(url, row.fileName);
        } else {
          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(",");
            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;
      this.$axios
        .post(this.$api.deviceScope.upDeviceParameter, formData, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(res => {
          if (res.code === 201) {
            this.upLoad = false;
            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("导出成功");
            }
          };
        });
    },
    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() {
      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 => {
            data.push({
              label: a.laboratoryName,
              value: a.id
            });
          });
          this.subordinateDepartmentsList = data;
        });
    },
    getInsProductIds() {
      this.$axios.post(this.$api.capacityScope.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.$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.$axios
        .post(this.$api.enums.selectEnumByCategory, {
          category: "设备分类"
        })
        .then(res => {
          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;
  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>