<template>
|
<div class="page">
|
<div class="page-header">
|
<h4><span class="line"></span><span>设备档案</span></h4>
|
<div class="btns">
|
<el-button type="primary" size="small" @click="dialogVisible=true" style="margin-right: 16px;">修订档案</el-button>
|
<!-- <el-button type="primary" size="small">添加附件</el-button> -->
|
<el-upload
|
class="upload-demo"
|
:action="action"
|
:headers="headers"
|
:show-file-list="false"
|
:limit="1"
|
:before-upload="beforeUpload"
|
:on-success="handleSuccess"
|
ref="upload"
|
:on-error="onError">
|
<el-button size="small" type="primary" :loading="inLoading">添加附件</el-button>
|
</el-upload>
|
</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>
|
</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">
|
<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>
|
<el-dialog title="档案修订" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
|
<el-row style="display:flex;justify-content: space-around;">
|
<!-- 左边布局 -->
|
<el-col :span="7">
|
<el-col>
|
<!-- 图片 -->
|
<el-image class="img" style="width:100%;height: 320px;marginBottom:16px"
|
:src="javaApi+'/img/'+formData.imageUpload">
|
<div slot="error" class="image-error" style="width: calc(100% -2px);
|
height: 318px;
|
border-radius: 16px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border: 1px solid #EEEEEE;">
|
<i class="el-icon-picture-outline" style="font-size:60px;color:#666666;"></i>
|
</div>
|
</el-image>
|
<!-- 表单 -->
|
<el-form :model="formData" label-width="120px">
|
<el-form-item label="仪器名称:" required>
|
<el-input v-model="formData.deviceName" size="small"></el-input>
|
</el-form-item>
|
<el-form-item label="仪器名称EN:" required>
|
<el-input v-model="formData.enDeviceName" size="small"></el-input>
|
</el-form-item>
|
<el-form-item label="规格型号:" required>
|
<el-input v-model="formData.specificationModel" size="small"></el-input>
|
</el-form-item>
|
<el-form-item label="生产厂家:">
|
<el-input v-model="formData.manufacturer" size="small"></el-input>
|
</el-form-item>
|
</el-form>
|
</el-col>
|
</el-col>
|
<!-- 中间布局 -->
|
<el-col :span="7">
|
<el-form :model="formData" label-width="116px">
|
<el-form-item label="校准服务机构:">
|
<el-input v-model="formData.calibrationServices" size="small"></el-input>
|
</el-form-item>
|
<el-form-item label="出厂编号:">
|
<el-input v-model="formData.factoryNo" size="small"></el-input>
|
</el-form-item>
|
<el-form-item label="管理编号:" required>
|
<el-input v-model="formData.managementNumber" size="small"></el-input>
|
</el-form-item>
|
<el-form-item label="购置日期:">
|
<el-date-picker style="width:100%" v-model="formData.acquisitionDate" type="date"
|
format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="启用日期:" required>
|
<el-date-picker style="width:100%" v-model="formData.activationDate" type="date"
|
format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="管理人:">
|
<el-select v-model="formData.equipmentManager" placeholder="请选择" size="small" style="width:100%">
|
<el-option v-for="item in responsiblePersonList" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="存放点:">
|
<el-input v-model="formData.storagePoint" size="small"></el-input>
|
</el-form-item>
|
<el-form-item label="技术指标:">
|
<el-input v-model="formData.technicalIndicators" :rows="7" type="textarea" size="small"></el-input>
|
</el-form-item>
|
</el-form>
|
</el-col>
|
<!-- 右边布局 -->
|
<el-col :span="7">
|
<el-form :model="formData" label-width="140px" ref="ruleForm">
|
<!-- 实验室列表 -->
|
<el-form-item label="所属部门:">
|
<el-select v-model="formData.subordinateDepartmentsId" placeholder="请选择" size="small" style="width:100%">
|
<el-option v-for="item in subordinateDepartmentsList" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="检测项目:">
|
<el-cascader
|
v-model="formData.insProductIds"
|
:options="options"
|
:show-all-levels="false"
|
:props="props"
|
placeholder="请选择" size="small"
|
style="width:100%;"
|
:collapse-tags="true"
|
separator=","
|
filterable
|
clearable></el-cascader>
|
</el-form-item>
|
<el-form-item label="最近校准日期:">
|
<el-date-picker style="width:100%" v-model="formData.latestTraceability" format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="下次校准日期:">
|
<el-date-picker style="width:100%" v-model="formData.latestTraceability" format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="设备类型:">
|
<el-select v-model="formData.largeCategory" placeholder="请选择" size="small" style="width:100%">
|
<el-option v-for="item in equipmentList" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="单价(万元):">
|
<el-input v-model="formData.unitPrice" size="small"></el-input>
|
</el-form-item>
|
<el-form-item label="当前状态:" required>
|
<el-select v-model="formData.deviceStatus" placeholder="请选择" size="small" style="width:100%">
|
<el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="校准周期（月）:" required>
|
<el-input v-model="formData.calibrationDate" size="small"></el-input>
|
</el-form-item>
|
<el-form-item label="图片:">
|
<div
|
style="border: 1px solid #DCDFE6;border-radius:4px;height:32px;lineHeight:32px;display:flex;justify-content: space-around;font-size: 13px;">
|
<div v-show="formData.imageName" class="picName">{{formData.imageName}}</div>
|
<el-upload :action="action" :on-success="handleSuccessUpImg2" :show-file-list="false"
|
accept='image/jpg,image/jpeg,image/png' :headers="headers" :on-change="beforeUpload"
|
:on-error="onError" ref='upload'>
|
<el-button type="text" style="height:30px;padding-top:8px">上传</el-button>
|
</el-upload>
|
</div>
|
</el-form-item>
|
</el-form>
|
</el-col>
|
</el-row>
|
<span slot="footer" class="dialog-footer">
|
<el-row>
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" @click="submitForm" :loading="upLoad">确 定</el-button>
|
</el-row>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import ValueTable from '../../tool/value-table.vue'
|
export default {
|
components: {
|
ValueTable
|
},
|
data(){
|
return{
|
componentData: {
|
entity: {
|
week: null,
|
weekDay: null,
|
dateTime: null,
|
name:null,
|
orderBy: {
|
field: 'id',
|
order: 'desc'
|
}
|
},
|
isIndex: true,
|
showSelect: false,
|
select: false,
|
isPage:false,
|
do: [{
|
id: 'getFile',
|
font: '附件',
|
type: 'text',
|
method: 'getFile'
|
}, {
|
id: 'handleLook',
|
font: '查看',
|
type: 'text',
|
method: 'handleLook'
|
},{
|
id: 'delete',
|
font: '删除',
|
type: 'text',
|
method: 'doDiy',
|
disabFun: (row, index) => {
|
return row.state === '已审核' || row.state === '已批准'
|
}
|
}],
|
tagField: {
|
shift:{
|
select:[]
|
},
|
state:{
|
select:[
|
{
|
label:'已提交',
|
value:'已提交',
|
type:'primary'
|
},
|
{
|
label:'已审核',
|
value:'已审核',
|
type:'warning'
|
},
|
{
|
label:'已批准',
|
value:'已批准',
|
type:'success'
|
},
|
]
|
},
|
weekDay:{
|
select:[]
|
}
|
},
|
linkEvent: {},
|
selectField: {
|
shift:{
|
select:[]
|
},
|
state:{
|
select:[
|
{
|
label:'已提交',
|
value:'已提交',
|
type:'primary'
|
},
|
{
|
label:'已审核',
|
value:'已审核',
|
type:'warning'
|
},
|
{
|
label:'已批准',
|
value:'已批准',
|
type:'success'
|
},
|
]
|
},
|
weekDay:{
|
select:[]
|
}
|
},
|
requiredAdd: [],
|
requiredUp: []
|
},
|
upIndex:0,
|
dialogVisible:false,
|
inLoading:false,
|
form: {
|
value1:''
|
},
|
upLoad:false,
|
formData:{},
|
responsiblePersonList:[],
|
subordinateDepartmentsList:[],
|
options:[],
|
equipmentList:[],
|
deviceStatusList:[],
|
props: { multiple: true,emitPath:false,value:'id',label:'name' },
|
}
|
},
|
computed: {
|
headers() {
|
return {
|
'token': sessionStorage.getItem('token')
|
}
|
},
|
action() {
|
return this.javaApi + this.$api.deviceScope.uploadFile
|
}
|
},
|
mounted(){
|
this.selectDevicePrincipal()
|
this.obtainItemParameterList()
|
this.getInsProductIds()
|
this.selectEnumByCategory()
|
},
|
methods: {
|
handleData(m){
|
if(m){
|
return m
|
}else{
|
return '-'
|
}
|
},
|
handleClose(){
|
this.dialogVisible = false
|
},
|
handleSuccess(response,){
|
this.inLoading = false;
|
if (response.code == 200) {
|
this.$message.success('上传成功')
|
// 更新页面
|
}else{
|
this.$message.error(response.message)
|
}
|
},
|
submitForm(){
|
if(!this.formData.deviceName){
|
this.$message.error('未输入仪器名称')
|
return
|
}
|
if(!this.formData.enDeviceName){
|
this.$message.error('未输入仪器名称EN')
|
return
|
}
|
if(!this.formData.specificationModel){
|
this.$message.error('未输入规格型号')
|
return
|
}
|
if(!this.formData.managementNumber){
|
this.$message.error('未输入管理编号')
|
return
|
}
|
if(!this.formData.activationDate){
|
this.$message.error('未输入启用日期')
|
return
|
}
|
if(this.formData.deviceStatus==='' || this.formData.deviceStatus===null){
|
this.$message.error('未选择当前状态')
|
return
|
}
|
if(!this.formData.calibrationDate){
|
this.$message.error('未输入校准周期（月）')
|
return
|
}
|
delete this.formData.createTime
|
delete this.formData.updateTime
|
delete this.formData.createUser
|
delete this.formData.updateUser
|
this.formData.insProductIds = this.formData.insProductIds?this.formData.insProductIds.join():''
|
this.upLoad = true;
|
this.$axios.post(this.$api.deviceScope.upDeviceParameter, this.formData, {
|
headers: {
|
'Content-Type': 'application/json'
|
}
|
}).then(res => {
|
if (res.code === 201) {
|
this.upLoad = false
|
return
|
}
|
this.$message.success('修改成功')
|
this.upLoad = false
|
this.dialogVisible = false
|
}).catch(e => {
|
this.$message.error('修改失败')
|
this.dialogVisible = false
|
this.upLoad = false
|
})
|
},
|
handleSuccessUpImg2(response) {
|
if (response.code == 200) {
|
this.$nextTick(() => {
|
this.formData.imageUpload = response.data.url;
|
this.formData.imageName = response.data.name;
|
})
|
}
|
},
|
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.get(this.$api.deviceScope.selectDevicePrincipal).then(res => {
|
let data = []
|
res.data.forEach(a => {
|
data.push({
|
label: a.name,
|
value: a.id
|
})
|
})
|
this.responsiblePersonList = data
|
})
|
},
|
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
|
})
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.page{
|
width: 100%;
|
height: 100%;
|
overflow-y: auto;
|
overflow-x: hidden;
|
}
|
.page-header{
|
display: flex;
|
justify-content: space-between;
|
}
|
h4{
|
display: flex;
|
align-items: center;
|
}
|
h4 .line{
|
display: inline-block;
|
width: 3px;
|
height: 16px;
|
background: #3A7BFA;
|
margin-right: 4px;
|
}
|
.tables{
|
width: calc(100vw - 390px);
|
}
|
.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;
|
}
|
.form-item label{
|
width: 110px;
|
display: inline-block;
|
text-align: right;
|
margin-right: 20px;
|
color: #999;
|
}
|
.btns {
|
display: flex;
|
align-items: center;
|
}
|
</style>
|
