<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="region">
|
<el-select v-model="ruleForm.region" placeholder="请选择保管人">
|
<el-option label="区域一" value="shanghai"></el-option>
|
<el-option label="区域二" value="beijing"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="计量截至有效期" required>
|
<el-form-item prop="date1">
|
<el-date-picker style="width: 206px" type="date" placeholder="请选择计量截至有效期" v-model="ruleForm.date1"></el-date-picker>
|
</el-form-item>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="设备状态" prop="region">
|
<el-select v-model="ruleForm.region" placeholder="请选择设备状态">
|
<el-option label="1" value="运行"></el-option>
|
<el-option label="2" value="报废"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="厂家" prop="region">
|
<el-input style="width: 206px" placeholder="请输入厂家" clearable v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="检测项目" required>
|
<el-form-item prop="inspectionList">
|
<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-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="检测样品" required>
|
<el-form-item prop="date1">
|
<el-input placeholder="请输入仪器设备编号" style="width: 206px" clearable v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="规格型号" prop="region">
|
<el-input placeholder="请输入仪器设备编号" style="width: 206px" clearable v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="检测人" required>
|
<el-input placeholder="请输入仪器设备编号" style="width: 206px" clearable v-model="ruleForm.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="dialogVisible = false">确 定</el-button>
|
</span>
|
</el-dialog>
|
|
</el-col>
|
</el-row>
|
<el-row class="left_row">
|
<div :style="`width: ${isCollapse?300:0}px;transition: 1s;`" 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
|
v-model="search"
|
class="frame_input"
|
:style="`opacity: ${isCollapse?1:0};`"
|
suffix-icon="el-icon-search"
|
placeholder="请输入分类名称"
|
size="small" clearable>
|
</el-input>
|
<el-tree
|
:data="list" ref="tree"
|
:props="{children: 'children',label: 'label'}"
|
node-key="id"
|
default-expand-all
|
:filter-node-method="filterNode"
|
@node-click="handleNodeClick"
|
highlight-current @node-expand="nodeOpen"
|
@node-collapse="nodeClose">
|
<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.code}}{{ data.label }}</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"
|
v-model="searchName"
|
size="small"
|
prefix-icon="el-icon-search"
|
placeholder="请输入编号/设备名称/型号规格"
|
clearable>
|
</el-input>
|
<el-button size="mini" @click="()=>{searchName='';selectProductTableData()}"><span>重 置</span></el-button>
|
<el-button size="mini" type="primary" style="background: #004EA2;" @click="selectProductTableData"><span>查 询</span></el-button>
|
<el-select v-model="tableType" size="small" placeholder="请选择" class="table_top">
|
<el-option :value="0" label="工艺文件"></el-option>
|
<el-option :value="1" label="技术指标"></el-option>
|
</el-select>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
height="calc(100vh - 220px)"
|
style="padding: 10px;">
|
<el-table-column
|
prop="date"
|
label="日期"
|
width="180">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="姓名"
|
width="180">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="地址">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "LaboratoryManagement",
|
data() {
|
return {
|
dialogVisible: false,
|
isCollapse: true, //默认为展开
|
radio1: 'true',
|
tableData: [],
|
inspectionList: [], //检验项目下拉框列表
|
// BOM树数据结构
|
list: [],
|
ruleForm: {
|
code: '',
|
deviceStatus: '',
|
endMeasure: '',
|
factory: '',
|
keeper: '',
|
name: '',
|
rawInsProductId: '',
|
type: ''
|
},
|
rules: {
|
name: [
|
{ required: true, message: '请输入活动名称', trigger: 'blur' },
|
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
],
|
region: [
|
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
],
|
date1: [
|
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
|
],
|
date2: [
|
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
|
],
|
type: [
|
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
|
],
|
resource: [
|
{ required: true, message: '请选择活动资源', trigger: 'change' }
|
],
|
desc: [
|
{ required: true, message: '请填写活动形式', trigger: 'blur' }
|
]
|
}
|
}
|
},
|
methods: {
|
// 动态控制展开与收起和切换对应图标
|
isC() {
|
this.isCollapse = !this.isCollapse;
|
},
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
alert('submit!');
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields();
|
},
|
handleClose(done) {
|
this.$confirm('确认关闭？')
|
.then(_ => {
|
done();
|
})
|
.catch(_ => {});
|
},
|
testItem() {
|
this.dialogVisible = true
|
this.$axios.get(this.$api.url.addDeviceInspectDownBox).then(res => {
|
this.inspectionList = res.data
|
})
|
}
|
},
|
mounted() {
|
},
|
watch: {
|
'ruleForm.rawInsProductId': { //监听banner
|
handler: function (newVal, oldVal) {
|
if (newVal != null && newVal !== ''){
|
console.log("1222222222222")
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.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;
|
}
|
.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>
|
