<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="tree"
|
class="filter-tree"
|
:data="data"
|
:props="defaultProps"
|
default-expand-all
|
:filter-node-method="filterNode"
|
/>
|
</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="personnerlTable"
|
:max-height="800"
|
:cell-style="{textAlign: 'center'}"
|
:header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
|
:data="personnerlTable"
|
style="width: 100%"
|
>
|
<el-table-column
|
prop="id"
|
label="序号"
|
min-width="90"
|
/>
|
<el-table-column
|
prop="equipment_code"
|
label="仪器设备编号"
|
min-width="200"
|
/>
|
<el-table-column
|
prop="equipment_name"
|
label="仪器设备名称"
|
min-width="200"
|
/>
|
<el-table-column
|
prop="specification_models"
|
label="型号规格"
|
min-width="200"
|
/>
|
<el-table-column
|
prop="keeper"
|
label="保管人"
|
min-width="200"
|
/>
|
<el-table-column
|
prop="term_validity"
|
label="计量截止有效期"
|
min-width="200"
|
/>
|
<el-table-column
|
prop="conditions"
|
label="设备状态"
|
min-width="200"
|
:filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
|
:filter-method="filterTag"
|
filter-placement="bottom-end"
|
>
|
<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
|
label="操作"
|
min-width="200"
|
fixed="right"
|
>
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="handleClick(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="[100, 200, 300, 400]"
|
:page-size="100"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="400"
|
@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>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
// 表格数据
|
data: [{
|
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'
|
}
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val)
|
}
|
},
|
methods: {
|
filterNode(value, data) {
|
if (!value) return true
|
return data.label.indexOf(value) !== -1
|
}
|
},
|
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;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
