<!-- 设备档案 -->
|
<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"
|
>修订档案</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>
|
<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.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 { 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 {
|
filters: {
|
formaterDateTime(dateTime) {
|
if (dateTime === undefined || dateTime === null || dateTime === "") {
|
return dateTime;
|
}
|
return dateTime.split(" ")[0];
|
}
|
},
|
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: {
|
/**
|
* 将页面指定节点内容转为图片
|
* 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;
|
if (obj) {
|
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>
|
.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: 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>
|
