<template>
|
<div class="ledger-main">
|
<div class="page-header-search">
|
<div class="search-bar">
|
<el-form ref="form" :inline="true" :model="searchData">
|
<el-form-item>
|
<el-input
|
v-model="searchData.keyword"
|
placeholder="请输入编号/设备名称/型号规格"
|
>
|
<i slot="prefix" class="el-input__icon el-icon-search" />
|
</el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary">查询</el-button>
|
<el-button type="primary" plain>重置</el-button>
|
<!-- <el-button type="text">高级搜索<i class="el-icon-arrow-down el-icon--right" /></el-button> -->
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="serve-btn">
|
<el-button type="primary" icon="el-icon-plus" @click="drawerFormVisible = true">新增人员</el-button>
|
</div>
|
</div>
|
<div class="content-main">
|
<div class="library-bom">
|
<div class="bom-item-search">
|
<el-row>
|
<el-col :span="19">
|
<el-input
|
v-model="filterText"
|
placeholder="输入关键字进行过滤"
|
/>
|
</el-col>
|
<el-col :span="5">
|
<el-button type="primary" size="small" @click="FormVisible = true"><i class="el-icon-plus" /></el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<el-tree
|
ref="classTree"
|
:data="classTree"
|
:props="defaultProps"
|
default-expand-all
|
:filter-node-method="filterNode"
|
@node-click="nodeClickHandler"
|
/>
|
</div>
|
<div class="library-table">
|
<div class="table-header">
|
<div class="search-bar">
|
<el-radio-group v-model="radioValue">
|
<el-radio-button label="全部" />
|
<el-radio-button label="运行" />
|
<el-radio-button label="待机" />
|
<el-radio-button label="检修" />
|
<el-radio-button label="故障" />
|
<el-radio-button label="报废" />
|
</el-radio-group>
|
<el-checkbox v-model="isOut" :style="{'marginLeft':'12px'}">已过期</el-checkbox>
|
</div>
|
<div class="serve-btn">
|
<!-- <el-button type="primary" icon="el-icon-plus">新增人员</el-button> -->
|
</div>
|
</div>
|
<div class="table-box">
|
<el-table
|
ref="equipmentTable"
|
node-key="father_name"
|
:cell-style="{textAlign: 'center'}"
|
:header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
|
:data="equipmentTable"
|
style="width: 100%"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
min-width="90"
|
/>
|
<el-table-column
|
prop="equipment_code"
|
label="仪器设备编号"
|
min-width="200"
|
/>
|
<el-table-column
|
prop="equipment_name"
|
label="仪器设备名称"
|
min-width="150"
|
/>
|
<el-table-column
|
prop="specifications_models"
|
label="规格型号"
|
min-width="150"
|
/>
|
<el-table-column
|
prop="name"
|
label="保管人"
|
min-width="200"
|
/>
|
<el-table-column
|
prop="termValidity"
|
label="计量截止有效期"
|
min-width="200"
|
/>
|
<el-table-column
|
prop="conditions"
|
label="设备状态"
|
min-width="120"
|
>
|
<template slot-scope="scope">
|
<el-tag
|
:type="scope.row.businessStatus === 0 ? 'primary' : 'success'"
|
disable-transitions
|
>{{ scope.row.businessStatus === 0 ? '未同意' : '已同意' }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="storage_place"
|
label="存放地"
|
min-width="200"
|
/>
|
<el-table-column
|
prop="storage_place"
|
label="存放地"
|
min-width="200"
|
/>
|
<el-table-column
|
label="操作"
|
min-width="120"
|
fixed="right"
|
>
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="openDetail(scope.row)">编辑</el-button>
|
<el-button type="text" size="small">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- 弹出表单页 -->
|
<div>
|
<!-- 添加分类 -->
|
<el-dialog title="添加分类" :visible.sync="FormVisible" width="33%">
|
<el-form :model="treeForm">
|
<el-form-item label="分类名称" label-width="100px">
|
<el-input v-model="treeForm.name" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="父级分类" label-width="100px">
|
<el-select v-model="treeForm.type" placeholder="请选择">
|
<el-option label="原材料" value="0" />
|
<el-option label="电线电缆" value="1" />
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="FormVisible = false">取 消</el-button>
|
<el-button type="primary">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
<div>
|
<el-pagination
|
:current-page="currentPage"
|
:page-sizes="[10, 15, 20, 25]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 抽屉 -->
|
<el-drawer
|
title="新增仪器设备"
|
:before-close="handleClose"
|
:visible.sync="drawerFormVisible"
|
direction="rtl"
|
custom-class="demo-drawer"
|
ref="drawer"
|
size="40%"
|
>
|
<div class="demo-drawer__content">
|
<el-form label-position="top" :model="equipmentform">
|
<el-row :gutter="50">
|
<el-col :span="11">
|
<el-form-item label="所属分类：" label-width="80">
|
<el-select
|
v-model="equipmentform.classifyId"
|
clearable
|
filterable
|
:allow-create="true"
|
placeholder="请选择"
|
@blur="productSelect"
|
style="width:100%"
|
>
|
<el-option
|
v-for="item in fatherOpetions"
|
:key="item.id"
|
:label="item.label"
|
:value="item.label"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="设备编号：" label-width="80">
|
<el-input v-model="equipmentform.equipmentCode" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="50">
|
<el-col :span="11">
|
<el-form-item label="仪器设备名称：" label-width="80">
|
<el-input v-model="equipmentform.name" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="状态：" label-width="80">
|
<el-select
|
v-model="equipmentform.classifyId"
|
clearable
|
filterable
|
:allow-create="true"
|
placeholder="请选择仪器设备状态"
|
@blur="productSelect"
|
style="width:100%"
|
>
|
<el-option
|
v-for="item in fatherOpetions"
|
:key="item.id"
|
:label="item.label"
|
:value="item.label"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="50">
|
<el-col :span="11">
|
<el-form-item label="型号规格：" label-width="80">
|
<el-input v-model="equipmentform.specification_models" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="测量范围：" label-width="80">
|
<el-input v-model="equipmentform.measuringRange" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="50">
|
<el-col :span="11">
|
<el-form-item label="不确定度/准确度/最大允许误差：" label-width="80">
|
<el-input v-model="equipmentform.errorRate" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="生产厂家：" label-width="80">
|
<el-input v-model="equipmentform.manufacturer" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="50">
|
<el-col :span="11">
|
<el-form-item label="存放地点：" label-width="80">
|
<el-input v-model="equipmentform.storagePlace" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="到货日期：" label-width="80">
|
<el-date-picker
|
v-model="equipmentform.arrivalDate"
|
type="date"
|
placeholder="请选择到货日期"
|
style="width:100%">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="50">
|
<el-col :span="11">
|
<el-form-item label="验收日期：" label-width="80">
|
<el-date-picker
|
v-model="equipmentform.acceptanceDate"
|
type="date"
|
placeholder="请选择验收日期"
|
style="width:100%">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="保管人：" label-width="80">
|
<el-select
|
v-model="equipmentform.keeper"
|
clearable
|
filterable
|
:allow-create="true"
|
placeholder="请选择保管人"
|
@blur="productSelect"
|
style="width:100%"
|
>
|
<el-option
|
v-for="item in fatherOpetions"
|
:key="item.id"
|
:label="item.label"
|
:value="item.label"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="50">
|
<el-col :span="11">
|
<el-form-item label="是否支持数采：" label-width="80">
|
<el-radio v-model="equipmentform.whetherDataAcquisition" label="1">是</el-radio>
|
<el-radio v-model="equipmentform.whetherDataAcquisition" label="2">否</el-radio>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="仪器设备计量：" label-width="80">
|
<el-radio v-model="equipmentform.equipmentMeasurement" label="1">需要</el-radio>
|
<el-radio v-model="equipmentform.equipmentMeasurement" label="2">不需要</el-radio>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="50">
|
<el-col :span="11">
|
<el-form-item label="描述：" label-width="80">
|
<el-input
|
type="textarea"
|
:rows="2"
|
placeholder="请输入内容"
|
v-model=equipmentform.descriptiveness
|
style="width:217%">
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div class="demo-drawer__footer">
|
<el-button @click="drawerFormVisible = false" class="el-button--default">取 消</el-button>
|
<el-button type="primary" class="el-button--primary el-button--medium">确 定</el-button>
|
</div>
|
</div>
|
</el-drawer>
|
<!-- -->
|
<el-drawer
|
title="仪器设备详情"
|
:visible.sync="detailDrawer"
|
size="80%"
|
class="detailDrawer"
|
>
|
<div>
|
<div class="detail-info">
|
<div class="tips-main">
|
<div class="tips">
|
<span />
|
<div>基本信息</div>
|
</div>
|
<div class="tips-btn">
|
<span><i class="el-icon-edit" />操作：</span>
|
<el-button type="text" @click="dialogFormVisible = true">编辑</el-button>
|
</div>
|
</div>
|
<div class="message">
|
<div class="message-item"><span><i class="el-icon-edit" />所属分类：</span></div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />创建人：</span>
|
<el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" /></el-tag>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />建档日期：</span>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />设备编号：</span>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />型号规格：</span>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />测量范围：</span>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />不确定度/误差：</span>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />生产厂家：</span>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />存放地点：</span>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />到货日期：</span>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />验收日期：</span>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />保管人：</span>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />是否支持数采：</span>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />仪器设备计量：</span>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />计量周期：</span>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />描述：</span>
|
</div>
|
</div>
|
</div>
|
<el-tabs>
|
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
|
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
|
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
|
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
|
</el-tabs>
|
<el-drawer
|
title="编辑"
|
:append-to-body="true"
|
:visible.sync="editDrawer"
|
>
|
<p>_(:зゝ∠)_</p>
|
</el-drawer>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import { getClassifyList, getInstrumentList } from '@/api/laboratory/ledger'
|
export default {
|
data() {
|
return {
|
// 表格数据
|
classTree: [{
|
id: 1,
|
label: '一级 1',
|
children: [{
|
id: 4,
|
label: '二级 1-1',
|
children: [{
|
id: 9,
|
label: '三级 1-1-1'
|
}, {
|
id: 10,
|
label: '三级 1-1-2'
|
}]
|
}]
|
}],
|
treeForm: [{
|
name: '',
|
type: ''
|
}],
|
personnerlTable: [{
|
specification_models: 'WCDMS-1', // 型号规格
|
equipment_name: '数字电桥', // 仪器设备名称
|
term_validity: 12, // 计量截止有效期
|
equipment_code: 'JSTC-W1-00001', // 仪器设备编号
|
keeper: 0, // 保管人
|
id: 1, // 序号
|
conditions: 1, // 设备状态
|
storage_place: '地球亚洲中国江苏南通' // 存放地
|
}],
|
// tree默认值
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
// 搜索关键字
|
searchData: {
|
keyword: ''
|
},
|
// 表格搜索单选值
|
radioValue: '全部',
|
// 表格搜索已过期
|
isOut: false,
|
FormVisible: false,
|
drawerFormVisible: false,
|
loading: false,
|
equipmentform: {
|
acceptanceDate: '', // 验收日期
|
arrivalDate: '', // 到货日期
|
classifyId: '', // 所属分类
|
conditions: '', // 状态
|
descriptiveness: '', // 描述
|
equipmentCode: '', // 设备编号
|
equipmentMeasurement: '', // 仪器设备计量
|
equipmentName: '', // 仪器设备名称
|
errorRate: '', // 不确定度/准确度/最大允许误差
|
keeper: '', // 保管人
|
manufacturer: '', // 生产厂家
|
measuringRange: '', // 测量范围
|
specificationsModels: '', // 型号规格
|
storagePlace: '', // 存放地点
|
whetherDataAcquisition: '' // 是否支持数采
|
},
|
timer: null,
|
formLabelWidth: '80',
|
detailDrawer: false,
|
editDrawer: false,
|
equipmentTable: [],
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
}
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.classTree.filter(val)
|
}
|
},
|
created() {
|
this.getThreeData()
|
},
|
methods: {
|
openDetail(row) {
|
console.log(row)
|
this.detailDrawer = true
|
},
|
nodeClickHandler(data, node, element) {
|
console.log(data)
|
// 只有数据中携带id才能发送查询请求
|
if (data.id) {
|
this.getEquipmentTable({ classifyId: data.id, pageSize: this.pageSize, pageNo: this.currentPage })
|
}
|
},
|
async getEquipmentTable(ages) {
|
console.log('条件对象', ages)
|
const { data } = await getInstrumentList(ages)
|
console.log(data)
|
this.equipmentTable = data.row
|
this.total = data.total
|
},
|
filterNode(value, data) {
|
if (!value) return true
|
return data.label.indexOf(value) !== -1
|
},
|
async getThreeData() {
|
const { data } = await getClassifyList()
|
console.log(data)
|
this.classTree = data.map(item => {
|
if (item.children) {
|
item.children = item.children.map(childrenItem => {
|
return { ...childrenItem, label: childrenItem.son_name }
|
})
|
}
|
return { ...item, label: item.father_name }
|
})
|
console.log(this.classTree)
|
},
|
handleSizeChange() {
|
// 当前页大小
|
},
|
handleCurrentChange() {
|
// 当前页更改
|
}
|
},
|
handleClose(done) {
|
if (this.loading) {
|
return
|
}
|
this.$confirm('确定要提交表单吗？')
|
.then(_ => {
|
this.loading = true
|
this.timer = setTimeout(() => {
|
done()
|
// 动画关闭需要一定的时间
|
setTimeout(() => {
|
this.loading = false
|
}, 400)
|
}, 2000)
|
})
|
.catch(_ => {})
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.demo-drawer__content{
|
margin-left: 50px;
|
// margin-right: 5px;
|
}
|
.demo-drawer__footer {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.demo-drawer__footer .el-button--default {
|
background-color: #fff;
|
color: #333;
|
width: 45%;
|
}
|
|
.demo-drawer__footer .el-button--primary {
|
background-color: #409EFF;
|
color: #fff;
|
width: 45%;
|
margin-right: 60px;
|
}
|
.ledger-main{
|
width: 100%;
|
height: 100%;
|
// 页面头部条件搜索
|
.page-header-search{
|
background: #fff;
|
display: flex;
|
justify-content: space-between;
|
padding: 0 24px 12px 24px;
|
.search-bar{
|
.el-radio-button.is-active{
|
color: #409EFF !important;
|
background: #ecf5ff !important;
|
border-color: #b3d8ff !important;
|
}
|
.el-form{
|
.el-form-item{
|
margin-bottom: 0px !important;
|
.el-input{
|
width: 360px;
|
}
|
}
|
}
|
}
|
}
|
|
// 页面中心内容区域
|
.content-main{
|
display: flex;
|
height: 100%;
|
min-height: calc(100vh - 88px);
|
padding: 15px;
|
>div{
|
padding: 20px;
|
background: #fff;
|
}
|
.library-bom{
|
flex: 2;
|
margin-right: 12px;
|
.bom-item-search{
|
margin-bottom: 12px;
|
::v-deep .el-input{
|
input{
|
height: 33px;
|
line-height: 33px;
|
}
|
}
|
.tips{
|
height: 33px !important;
|
display: flex;
|
height: 24px;
|
align-items: center;
|
font-size: 16px;
|
// margin-bottom: 12px;
|
>span{
|
display: inline-block;
|
margin-right: 10px;
|
width: 4px;
|
height: 16px;
|
background: #0077DB;
|
}
|
>div{
|
height: 100%;
|
line-height: 36px;
|
}
|
.el-button{
|
padding: 0;
|
}
|
}
|
}
|
.bom-item-search .el-row{
|
// display: flex;
|
.el-col{
|
text-align: right;
|
}
|
}
|
.el-tree {
|
margin-top: 12px;
|
::v-deep .el-tree-node__content{
|
height: 24px !important;
|
font-size: 14px;
|
display: inline-block !important;
|
padding: 2px;
|
color: #333;
|
}
|
::v-deep .el-tree-node__content:hover{
|
background: rgba(58,124,253,0.1) !important;
|
// opacity: 0.31;
|
border-radius: 3px;
|
color: #333 !important;
|
}
|
::v-deep .el-tree-node:focus>.el-tree-node__content{
|
background: rgba(58,124,253,0.1) !important;
|
// opacity: 0.31;
|
border-radius: 3px;
|
color: #333 !important;
|
}
|
}
|
}
|
.library-table{
|
flex: 8;
|
max-width: 80%;
|
margin-left: 12px;
|
display: flex;
|
flex-direction: column;
|
|
/* .table-header{
|
display: flex;
|
justify-content: space-between;
|
.el-form-item{
|
margin-bottom: 30px !important;
|
}
|
} */
|
.table-box{
|
margin-top: 30px;
|
flex: 1;
|
background: #fff;
|
// padding: 20px 20px 10px 20px;
|
display: flex;
|
flex-direction: column;
|
.el-table {
|
flex: 1;
|
}
|
>div:nth-child(2){
|
display: flex;
|
justify-content: end;
|
margin: 10px 0;
|
}
|
}
|
}
|
}
|
|
.detailDrawer{
|
::v-deep .el-drawer__body{
|
padding: 24px !important;
|
}
|
.detail-info{
|
background: #fff;
|
box-shadow: rgba(100, 100, 111, 0.2) 0px 5px 15px;
|
|
// padding: 10px 20px 10px 20px;
|
margin: 0;
|
margin-bottom: 12px;
|
border-radius: 6px;
|
overflow: hidden;
|
.tips-main{
|
// margin: ;
|
padding: 10px 20px 0 20px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 50px;
|
// height: ;
|
&:hover{
|
background: #85bff810;
|
.tips-btn{
|
display: block;
|
left: 0;
|
opacity:1;
|
}
|
}
|
.tips-btn{
|
height: 100%;
|
// display: none;
|
position: relative;
|
opacity:0;
|
left: 100px;
|
transition: all 0.3s ease-in-out;
|
}
|
.tips{
|
height: 100%;
|
display: flex;
|
height: 24px;
|
align-items: center;
|
font-size: 16px;
|
// margin-bottom: 12px;
|
>span{
|
display: inline-block;
|
margin-right: 10px;
|
width: 4px;
|
height: 16px;
|
background: #0077DB;
|
}
|
>div{
|
height: 100%;
|
line-height: 26px;
|
}
|
.el-button{
|
padding: 0;
|
}
|
}
|
}
|
|
// 基本信息和企业信息的每一个信息项样式
|
.message{
|
padding: 0px 20px 8px 20px;
|
|
display: flex;
|
flex-wrap: wrap;
|
border-top: 1px solid #F2F6FC;
|
// border-top: 1px solid #F2F6FC;
|
>div{
|
flex: 30%;
|
max-width: 30%;
|
padding: 8px;
|
color: #606266;
|
align-items: center;
|
// height: 65px;
|
font-size: 12px;
|
height: 40px;
|
display: flex;
|
align-items: center;
|
>span{
|
color: #303133;
|
font-size: 14px;
|
//
|
>i{
|
margin-right: 8px;
|
}
|
}
|
}
|
// >div:nth-child(5){
|
// flex: 60%;
|
// max-width: 60%;
|
// }
|
}
|
}
|
}
|
}
|
</style>
|
