<template>
|
<div>
|
<el-row>
|
<el-col :span="12" style="padding-left: 20px; line-height: 32px;">实验室管理</el-col>
|
<el-col :span="12" style="text-align: right;">
|
<el-button @click="handleAddNew" type="primary" size="mini" icon="el-icon-plus" style="background: #004EA2; ">新增仪器设备</el-button>
|
</el-col>
|
</el-row>
|
<el-row style="height: calc(100vh - 165px); margin-top: 9px;">
|
<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" :style="`width: 90%; margin: 10px 0;opacity: ${isCollapse?1:0};transition: 1.5s;`" 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 :style="`width: calc(100vw - ${isCollapse?'475':'170'}px); padding-left: 5px;transition: 1s;float: left;`">
|
<div :title="isCollapse ? '点击展开' : '点击收起'" class="box_bgd" @click="isC">
|
<!-- 点击展开收起导航和切换对应图标 -->
|
<i :class="!isCollapse ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
|
</div>
|
<div style="background-color: #fbfbfd; height: 100%;">
|
<div style="margin-left: 20px; padding-top: 15px; padding-bottom: 15px">
|
<el-input v-model="searchName" size="small" prefix-icon="el-icon-search" placeholder="请输入编号/设备名称/型号规格" style="width: 20%;margin-right: 24px;" 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="请选择" style="float: right; width: 224px;margin-right: 52px;">
|
<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="width: 100%; padding: 10px; position: absolute">
|
<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 {
|
isCollapse: true, //默认为展开
|
radio1: 'true',
|
tableData: [{
|
date: '2016-05-02',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1518 弄'
|
}, {
|
date: '2016-05-04',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1517 弄'
|
}, {
|
date: '2016-05-01',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1519 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}],
|
// BOM树数据结构
|
list: [{
|
label: '一级 1',
|
children: [{
|
label: '二级 1-1'
|
}]
|
}, {
|
label: '一级 2',
|
children: [{
|
label: '二级 2-1'
|
}, {
|
label: '二级 2-2'
|
}]
|
}, {
|
label: '一级 3',
|
children: [{
|
label: '二级 3-1'
|
}, {
|
label: '二级 3-2'
|
}]
|
}],
|
}
|
},
|
methods: {
|
// 动态控制展开与收起和切换对应图标
|
isC() {
|
this.isCollapse = !this.isCollapse;
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
.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 - 159px);
|
text-align: center;
|
padding: 8px;
|
float: left;
|
background-color: #fdfdfe;
|
}
|
.box_bgd {
|
width: 15px;
|
height: 40px;
|
position: relative;
|
float: left;
|
top: 50%!important;
|
left: -20px;
|
background: blue;
|
}
|
.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>
|
