<template>
|
<div>
|
<el-row>
|
<el-col :span="12" class="top_left_name">实验室管理</el-col>
|
<el-col :span="12" style="text-align: right;">
|
<el-button @click="testItem()" type="primary" size="mini" icon="el-icon-plus" style="background: #004EA2; ">新增仪器设备</el-button>
|
<el-dialog
|
title="新增仪器设备"
|
:visible.sync="dialogVisible"
|
width="750px"
|
:before-close="handleClose">
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="设备名称" prop="name">
|
<el-input placeholder="请输入仪器设备编号" style="width: 206px" clearable v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="设备用途" prop="type">
|
<el-select v-model="ruleForm.type" placeholder="请选择设备用途">
|
<el-option label="生产设备" value="1"></el-option>
|
<el-option label="检测设备" value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="父级分类">
|
<el-select v-model="value" @blur="productSelect" filterable allow-create placeholder="请选择父级分类">
|
<el-option
|
v-for="list in parentClassificationList"
|
:key="list.index"
|
:label="list.father"
|
:value="list.father"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="仪器设备编号" prop="name">
|
<el-input placeholder="请输入仪器设备编号" style="width: 206px" clearable v-model="ruleForm.code"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="保管人" prop="keeper">
|
<el-select v-model="ruleForm.keeper" placeholder="请选择保管人">
|
<el-option
|
v-for="list in keeperList"
|
:key="list.index"
|
:label="list.name"
|
:value="list.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="计量截至有效期" prop="endMeasure">
|
<el-date-picker
|
style="width: 206px"
|
type="date"
|
placeholder="请选择计量截至有效期"
|
v-model="ruleForm.endMeasure"
|
:picker-options="pickerOptions"
|
></el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="设备状态" prop="deviceStatus" required>
|
<el-select v-model="ruleForm.deviceStatus" placeholder="请选择设备状态">
|
<el-option label="运行" style="color: #66c03b" value="1"></el-option>
|
<el-option label="报废" style="color: #ac9299" value="2"></el-option>
|
<el-option label="检修" style="color: #52d6c0" value="3"></el-option>
|
<el-option label="故障" style="color: #f36b6c" value="4"></el-option>
|
<el-option label="空闲" style="color: #fcb642" value="5"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="厂家" prop="factory" required>
|
<el-input style="width: 206px" placeholder="请输入厂家" clearable v-model="ruleForm.factory"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="检测项目" prop="rawInsProductId" required>
|
<el-select v-model="ruleForm.rawInsProductId" placeholder="请选择检测项目">
|
<el-option v-for="item in inspectionList"
|
:key="item.index"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="检测样品" required>
|
<el-form-item>
|
<el-input
|
placeholder="检测样品"
|
:disabled="true"
|
style="width: 206px"
|
v-model="showCodeNameModel.name">
|
</el-input>
|
</el-form-item>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="规格型号">
|
<el-input
|
placeholder="规格型号"
|
:disabled="true"
|
style="width: 206px"
|
v-model="showCodeNameModel.specifications">
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="检测人">
|
<el-input
|
placeholder="检测人"
|
:disabled="true"
|
style="width: 206px"
|
v-model="showCodeNameModel.user_name">
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
</span>
|
</el-dialog>
|
</el-col>
|
</el-row>
|
<el-row class="left_row">
|
<div :style="`width: ${isCollapse?300:0}px;transition: 1s;opacity: ${isCollapse?1:0};`" class="class_sidebar">
|
<el-radio-group class="ai-tab-change" style="width: 270px; margin-top: 5px" v-model="radio1">
|
<el-radio-button size="small" label="true">
|
<div class="el_radio_button_div">生产设备</div>
|
</el-radio-button>
|
<el-radio-button size="small" label="false">
|
<div class="el_radio_button_div">检测设备</div>
|
</el-radio-button>
|
</el-radio-group>
|
<el-input
|
class="frame_input"
|
v-model="search_class"
|
placeholder="请输入分类名称"
|
size="small"
|
>
|
<i slot="suffix" class="el-icon-search" style="font-size: 23px; padding: 5px 0;cursor:pointer;" @click="handlerDeptList"></i>
|
</el-input>
|
<el-tree
|
:data="towTree" ref="tree"
|
:props="{children: 'children',label: 'father'}"
|
node-key="id"
|
default-expand-all
|
@node-click="handleNodeClick"
|
>
|
<div class="custom-tree-node" slot-scope="{ node, data }">
|
<span><i :class="`node_i ${data.code != '[4]'?'el-icon-folder-opened':'el-icon-tickets'}`"></i>
|
{{ data.name }}</span>
|
<el-button type="text" size="mini" @click.stop="remove(node, data)">
|
<i class="el-icon-delete"></i>
|
</el-button>
|
</div>
|
</el-tree>
|
</div>
|
<div class="table_div" :style="`width: calc(100vw - ${isCollapse?'475':'170'}px);`">
|
<div :title="isCollapse ? '点击展开' : '点击收起'" class="box_bgd" @click="isC">
|
<div class="upper_triangle"></div>
|
<div class="corner">
|
<!-- 点击展开收起导航和切换对应图标 -->
|
<i :class="!isCollapse ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
|
</div>
|
<div class="under_triangle"></div>
|
</div>
|
<div class="main_table_div">
|
<div class="table_top_div">
|
<el-input
|
class="table_top_input"
|
size="small"
|
v-model="codeNameModel"
|
prefix-icon="el-icon-search"
|
placeholder="请输入编号/设备名称/型号规格"
|
clearable>
|
</el-input>
|
<el-button size="mini" @click="reset"><span>重 置</span></el-button>
|
<el-button size="mini" type="primary" @click="selectSearch" style="background: #004EA2;"><span>查 询</span></el-button>
|
<el-select v-model="value" size="small" placeholder="请选择设备状态" class="table_top">
|
<el-option label="运行" style="color: #66c03b" value="1"></el-option>
|
<el-option label="报废" style="color: #ac9299" value="2"></el-option>
|
<el-option label="检修" style="color: #52d6c0" value="3"></el-option>
|
<el-option label="故障" style="color: #f36b6c" value="4"></el-option>
|
<el-option label="空闲" style="color: #fcb642" value="5"></el-option>
|
</el-select>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
height="calc(100vh - 220px)"
|
style="padding: 10px;">
|
<el-table-column
|
prop="date"
|
label="序号"
|
width="60">
|
<template v-slot="scope">
|
{{ scope.$index + 1 }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="code"
|
label="仪器设备编号"
|
width="125">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="仪器设备名称"
|
width="125">
|
</el-table-column>
|
<el-table-column
|
prop="keeper"
|
label="保管人">
|
</el-table-column>
|
<el-table-column
|
prop="end_measure"
|
label="计量截至有效期"
|
width="147">
|
</el-table-column>
|
<el-table-column
|
prop="device_status"
|
label="使用状态">
|
<template slot-scope="scope">
|
<el-tag v-if="scope.row.device_status==1" disable-transitions type="success">运行</el-tag>
|
<el-tag v-else-if="scope.row.device_status==2" disable-transitions type="info">报废</el-tag>
|
<el-tag v-else-if="scope.row.device_status==3" style="color: #52d6c0" disable-transitions type="info">检修</el-tag>
|
<el-tag v-else-if="scope.row.device_status==4" disable-transitions type="danger">故障</el-tag>
|
<el-tag v-else-if="scope.row.device_status==5" style="color: #fcb642" disable-transitions type="info">空闲</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="factory"
|
label="厂家"
|
:show-overflow-tooltip="true">
|
</el-table-column>
|
<el-table-column
|
prop="inspectProject"
|
label="检测项目">
|
</el-table-column>
|
<el-table-column
|
prop="testSample"
|
label="检验样品">
|
</el-table-column>
|
<el-table-column
|
prop="user_name"
|
label="检测人">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="操作">
|
<template v-slot="scope">
|
<el-button @click="handleClick(scope.$index, tableData, scope.row)" type="text" size="small">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "LaboratoryManagement",
|
data() {
|
return {
|
value: '',
|
dialogVisible: false,
|
isCollapse: true, //默认为展开
|
radio1: 'true', // 分类切换
|
tableData: [],
|
inspectionList: [], //检验项目下拉框列表
|
showCodeNameModel: {}, // 新增仪器展示禁止框
|
keeperList: [], // 新增设备保管人下拉框
|
parentClassificationList: [], // 新增设备父级分类下拉框
|
search_class: '', // 分类搜索框内容
|
codeNameModel: '', // 编码名称型号模糊查询
|
// BOM树数据结构
|
towTree: [],
|
ruleForm: {
|
code: '',
|
father: '',
|
deviceStatus: '',
|
endMeasure: '',
|
factory: '',
|
keeper: '',
|
name: '',
|
rawInsProductId: '',
|
type: ''
|
},
|
rules: {
|
name: [
|
{ required: true, message: '请输入仪器设备编号', trigger: 'blur' },
|
{ min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur' }
|
],
|
keeper: [
|
{ required: true, message: '请选择保管人', trigger: 'change' }
|
],
|
endMeasure: [
|
{ type: 'date', required: true, message: '请选择计量截至有效期', trigger: 'change' }
|
],
|
deviceStatus: [
|
{ required: true, message: '请选择设备状态', trigger: 'change' }
|
],
|
factory: [
|
{ required: true, message: '请输入厂家', trigger: 'blur' },
|
{ min: 2, max: 25, message: '长度在 2 到 50 个字符', trigger: 'blur' }
|
],
|
rawInsProductId: [
|
{ required: true, message: '请选择检测项目', trigger: 'change' }
|
],
|
type: [
|
{ required: true, message: '请选择设备用途', trigger: 'change' }
|
]
|
},
|
pickerOptions:{
|
//禁用当前日期之前的日期
|
disabledDate(time) {
|
//Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
|
return time.getTime() < Date.now() - 8.64e7;
|
}
|
},
|
}
|
},
|
methods: {
|
// 动态控制展开与收起和切换对应图标
|
isC() {
|
this.isCollapse = !this.isCollapse;
|
},
|
productSelect(e) {
|
let value = e.target.value; // 输入框值
|
if(value) { // 你输入才有这个值 不为空，如果你下拉框选择的话 这个值为空
|
this.value = value
|
}
|
},
|
submitForm() {
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
this.ruleForm.father = this.value
|
this.$axios.post(this.$api.url.addDeviceInstrument, this.ruleForm,{
|
headers: {
|
'Content-Type': 'application/json'
|
}
|
}).then(res => {
|
this.keeperList = res.data
|
// 成功关闭新增弹出框
|
this.dialogVisible = false
|
})
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
handleClose(done) {
|
this.$confirm('确认关闭？')
|
.then(_ => {
|
done();
|
})
|
.catch(_ => {});
|
},
|
testItem() {
|
this.dialogVisible = true
|
this.$axios.get(this.$api.url.addDeviceKeeper).then(res => {
|
this.keeperList = res.data
|
})
|
this.$axios.get(this.$api.url.addDeviceInspectDownBox).then(res => {
|
this.inspectionList = res.data
|
})
|
this.$axios.get(this.$api.url.addDeviceParentClassification).then(res => {
|
this.parentClassificationList = res.data
|
})
|
},
|
twoTreeApi() {
|
this.$axios.get(this.$api.url.towTree).then(res => {
|
let list = res.data
|
list.forEach(i => {
|
if (i.name === undefined){
|
i.name = i.children[0].name
|
i.children = undefined
|
}
|
})
|
this.towTree = res.data
|
})
|
},
|
tableDataApi() {
|
this.$axios.get(this.$api.url.tableDeviceList).then(res => {
|
this.tableData = res.data
|
})
|
},
|
reset() {
|
this.tableDataApi()
|
this.radio1 = 'true'
|
this.codeNameModel = ''
|
},
|
handleNodeClick(data) {
|
if (data.id === undefined) {
|
this.$axios.get(this.$api.url.tableDeviceList, {params: {fatherName: data.name}}).then(res => {
|
this.tableData = res.data
|
})
|
} else if (data.id !== undefined){
|
this.$axios.get(this.$api.url.tableDeviceList, {params: {deviceId: data.id}}).then(res => {
|
this.tableData = res.data
|
})
|
}
|
},
|
handlerDeptList() {
|
this.towTree = []
|
let val = 1
|
if (this.radio1 === "false"){
|
val = 2
|
}
|
this.$axios.get(this.$api.url.towTree, {params: {type: val, search_class: this.search_class}}).then(res => {
|
this.towTree = res.data
|
})
|
},
|
selectSearch() {
|
this.tableData = []
|
if (this.radio1 === 'false'){
|
this.$axios.get(this.$api.url.tableDeviceList, {params: {type: 1, codeNameModel: this.codeNameModel}}).then(res => {
|
this.tableData = res.data
|
})
|
} else if (this.radio1 === 'true') {
|
this.$axios.get(this.$api.url.tableDeviceList, {params: {type: 2, codeNameModel: this.codeNameModel}}).then(res => {
|
this.tableData = res.data
|
})
|
}
|
},
|
handleClick(index, datas, row) {
|
this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$axios.delete(this.$api.url.deleteDevice,{params: {deviceId: row.id}}).then(res => {
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
datas.splice(index, 1);
|
}).catch(err => {
|
this.$message({
|
message: err.message,
|
type: 'warning'
|
});
|
})
|
})
|
},
|
remove(node, data) {
|
this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
console.log(data)
|
let val = '';
|
if(data.id === undefined && data.children === undefined ) {
|
this.$axios.delete(this.$api.url.deleteIdorFather,{params: {deviceFather: data.name}}).then(res => {
|
if (res.code === 200){
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
this.handlerDeptList()
|
this.selectSearch()
|
} else {
|
this.$message({
|
message: res.message,
|
type: 'warning'
|
});
|
}
|
})
|
} else if (data.id !== undefined){
|
this.$axios.delete(this.$api.url.deleteIdorFather,{params: {id: data.id}}).then(res => {
|
if (res.code === 200){
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
this.handlerDeptList()
|
this.selectSearch()
|
} else {
|
this.$message({
|
message: res.message,
|
type: 'warning'
|
});
|
}
|
})
|
}
|
})
|
}
|
},
|
mounted() {
|
// 初始化调用二级树
|
this.twoTreeApi()
|
// 初始化调用表格数据
|
this.tableDataApi()
|
},
|
watch: {
|
'ruleForm.rawInsProductId': { //监听ruleForm.rawInsProductId
|
handler: function (newVal, oldVal) {
|
if (newVal != null && newVal !== ''){
|
this.$axios.get(this.$api.url.selectDeviceInspectMessage,{params: {inspectId: newVal}}).then(res => {
|
this.showCodeNameModel = res.data
|
})
|
}
|
}
|
},
|
dialogVisible: {
|
handler: function (newVal, oldVal) {
|
if (newVal){
|
// 成功清空输入内容
|
this.ruleForm = {}
|
this.value = ''
|
this.showCodeNameModel = {}
|
this.$refs.ruleForm.resetFields()
|
}
|
}
|
},
|
radio1: {
|
handler: function (newVal, oldVal) {
|
this.towTree = []
|
this.tableData = []
|
if (newVal === "true"){
|
this.twoTreeApi()
|
this.tableDataApi()
|
} else if (newVal === "false") {
|
this.$axios.get(this.$api.url.towTree, {params: {type: 2}}).then(res => {
|
let list = res.data
|
list.forEach(i => {
|
if (i.name === undefined){
|
i.name = i.children[0].name
|
i.children = undefined
|
}
|
})
|
this.towTree = res.data
|
})
|
this.$axios.get(this.$api.url.tableDeviceList, {params: {type: 2}}).then(res => {
|
this.tableData = res.data
|
})
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.el-tag.el-tag {
|
border-color: transparent;
|
background-color: transparent;
|
}
|
.el-tag.el-tag:hover {
|
border-color: transparent;
|
background-color: transparent;
|
}
|
.el-form-item >>> .el-form-item__error {
|
color: #F56C6C;
|
font-size: 12px;
|
line-height: 1;
|
padding-top: 6px;
|
position: absolute;
|
top: 100%;
|
left: 18px;
|
}
|
/deep/ .el-icon-arrow-left{
|
display: flex;
|
line-height: 60px !important;
|
justify-content: center;
|
}
|
/deep/ .el-icon-arrow-right{
|
display: flex;
|
line-height: 60px !important;
|
justify-content: center;
|
}
|
.top_left_name{
|
padding-left: 20px;
|
line-height: 32px;
|
}
|
.left_row{
|
height: calc(100vh - 165px);
|
margin-top: 9px;
|
}
|
.frame_input{
|
width: 90%;
|
margin: 10px 0;
|
transition: 1.5s;
|
}
|
.table_top_div{
|
margin-left: 20px;
|
padding-top: 15px;
|
padding-bottom: 15px
|
}
|
.el-dialog__footer {
|
padding: 0px 20px 20px;
|
text-align: right;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
}
|
.table_top{
|
float: right;
|
width: 224px;
|
margin-right: 52px;
|
}
|
.main_table_div{
|
background-color: #fbfbfd;
|
height: 100%;
|
}
|
.dialog-footer{
|
display: block;
|
text-align:center
|
}
|
.table_div{
|
padding-left: 5px;
|
transition: 1s;
|
float: left;
|
position: relative
|
}
|
.table_top_input{
|
width: 20%;
|
margin-right: 24px;
|
}
|
.custom-tree-node {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
padding-right: 8px;
|
width: 250px;
|
}
|
.el-tree{
|
width: 280px;
|
margin: 0 10px;
|
}
|
.custom-tree-node span{
|
font-size: 14px!important;
|
}
|
.el-icon-delete {
|
display: none;
|
color: #004EA2;
|
}
|
.custom-tree-node:hover .el-icon-delete {
|
display: inline;
|
}
|
.node_i {
|
color: orange;
|
}
|
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
background: #f2f2f2;
|
border: 0 !important;
|
color: #696969;
|
line-height: 14px;
|
outline: none;
|
box-shadow: none;
|
}
|
.class_sidebar {
|
overflow: hidden;
|
height: calc(100vh - 175px);
|
text-align: center;
|
padding: 8px;
|
float: left;
|
background-color: #fdfdfe;
|
}
|
.box_bgd {
|
width: 12px;
|
height: 60px;
|
position: absolute;
|
float: left;
|
top: 40%;
|
left: -10px;
|
}
|
.corner{
|
height: 60px;
|
background: #ebebec;
|
}
|
.upper_triangle{
|
width: 0px; /* 宽高设置为0，很重要，否则达不到效果 */
|
height: 0px;
|
border: 6px solid #ebebec;
|
border-left-color: transparent;
|
border-top-color: transparent;
|
}
|
.under_triangle{
|
width: 0px; /* 宽高设置为0，很重要，否则达不到效果 */
|
height: 0px;
|
border: 6px solid #ebebec;
|
border-left-color: transparent;
|
border-bottom-color: transparent;
|
}
|
.ai-tab-change {
|
.el-radio-button__inner {
|
border: 1px solid #ececed;
|
line-height: 14px;
|
}
|
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
background: #fdfdfe;
|
border: 1px solid #004da2;
|
color: #004da2;
|
line-height: 14px;
|
}
|
}
|
</style>
|
