<template>
|
<div class="laboratoryMangement">
|
<el-row>
|
<el-col :span="12" class="top_left_name">设备维护</el-col>
|
<el-col :span="12" style="text-align: right;" class="title">
|
<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" @change="selectinstall" 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="设备组" prop="name">
|
<el-select v-model="ruleForm.equr" allow-create filterable @create="" placeholder="请选择设备组">
|
<el-option v-for="list in equaip" :key="list" :label="list" :value="list">
|
</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-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="equipment"
|
@input="RadioChange">
|
<el-radio-button label="1">生产设备</el-radio-button>
|
<el-radio-button label="2">检验设备</el-radio-button>
|
</el-radio-group>
|
<el-tree :data="towTree" ref="tree" :props="{ children: 'children', label: 'father' }" node-key="father"
|
default-expand-all highlight-current style="margin-top: 20px;" @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.father }}</span>
|
</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 @change="staueValueChange" v-model="staue_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="userName" label="保管人"> </el-table-column>
|
<el-table-column prop="DATE_FORMAT(end_measure, '%Y-%m-%d')" 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="name" label="操作">
|
<template v-slot="scope">
|
<el-button @click="handleClick(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,
|
checkTreeNode: {},
|
isCollapse: true, //默认为展开
|
radio1: "true", // 分类切换
|
tableData: [], // 主页表格数据
|
inspectionList: [], //检验项目下拉框列表
|
showCodeNameModel: {}, // 新增仪器展示禁止框
|
keeperList: [], // 新增设备保管人下拉框
|
parentClassificationList: [], // 新增设备父级分类下拉框
|
search_class: "", // 分类搜索框内容
|
codeNameModel: "", // 编码名称型号模糊查询
|
staue_value: "", // 主页表格上方的状态选择
|
// BOM树数据结构
|
towTree: [],
|
equipment: '1',
|
equaip: [],
|
ruleForm: {
|
// 新增仪器表单
|
code: "",
|
father: "",
|
deviceStatus: "",
|
endMeasure: "",
|
factory: "",
|
keeper: "",
|
name: "",
|
rawInsProductId: "",
|
type: "",
|
equr: '',
|
},
|
delete: {},
|
equip: 1,
|
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;
|
}
|
},
|
};
|
},
|
mounted() {
|
this.twoTreeApi();
|
},
|
methods: {
|
handleNodeClick(val) {
|
this.checkTreeNode = val
|
this.selectDevice()
|
},
|
staueValueChange() {
|
this.selectDevice()
|
},
|
// 动态控制展开与收起和切换对应图标
|
isC() {
|
this.isCollapse = !this.isCollapse;
|
},
|
productSelect(e) {
|
let value = e.target.value; // 输入框值
|
if (value) {
|
// 你输入才有这个值 不为空，如果你下拉框选择的话 这个值为空
|
this.value = value;
|
}
|
},
|
submitForm() {
|
this.addApi()
|
this.dialogVisible = 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;
|
});
|
},
|
selectinstall(val) {
|
this.equip = val
|
this.listgroup()
|
},
|
listgroup() {
|
this.$axios.get(this.$api.url.listgroup, {
|
params: {
|
type: this.equip
|
}
|
})
|
.then(res => {
|
this.equaip = res.data
|
})
|
},
|
RadioChange(val) {
|
this.equip = val
|
this.twoTreeApi()
|
},
|
twoTreeApi() {
|
this.$axios.get(this.$api.url.towTree, {
|
params: {
|
type: this.equip,
|
}
|
}).then(res => {
|
this.towTree = res.data;
|
this.$nextTick(() => {
|
this.$refs.tree.setCurrentKey(this.towTree[0].father) // 默认选中节点第一个
|
})
|
let one = this.towTree[0]
|
let name = one.father
|
this.checkTreeNode.father = name
|
this.selectDeviceStart(name)
|
});
|
},
|
selectDeviceStart(name, ) { //右边数据
|
this.$axios.get(this.$api.url.selectDevice, {
|
params: {
|
father: name,
|
type: this.equip,
|
deviceStatus: this.staue_value,
|
message: this.codeNameModel,
|
}
|
}).then(res => {
|
this.tableData = res.data
|
}, {
|
headers: {
|
"Content-Type": "application/json"
|
}
|
})
|
},
|
selectDevice() { //右边数据
|
this.$axios.get(this.$api.url.selectDevice, {
|
params: {
|
father: this.checkTreeNode.father,
|
type: this.equip,
|
deviceStatus: this.staue_value,
|
message: this.codeNameModel,
|
}
|
}).then(res => {
|
this.tableData = res.data
|
}, {
|
headers: {
|
"Content-Type": "application/json"
|
}
|
})
|
},
|
addApi() {
|
this.$axios.post(this.$api.url.addApi, {
|
code: this.ruleForm.code,
|
deviceStatus: this.ruleForm.deviceStatus,
|
endMeasure: this.ruleForm.endMeasure,
|
factory: this.ruleForm.factory,
|
father: this.ruleForm.equr,
|
keeper: this.ruleForm.keeper,
|
name: this.ruleForm.name,
|
type: this.ruleForm.type,
|
}, {
|
headers: {
|
"Content-Type": "application/json"
|
}
|
}).then(res => {
|
this.twoTreeApi();
|
this.$message.success('新增成功')
|
this.$refs.ruleForm.resetFields()
|
})
|
},
|
reset() {
|
this.staue_value = ""
|
this.codeNameModel = ""
|
this.selectDevice()
|
},
|
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.selectDevice()
|
},
|
delDeviceById() {
|
this.$axios.post(this.$api.url.delDeviceById, {
|
id: this.delete.id
|
}).then(res => {
|
this.$parent.removeAllTab()
|
});
|
},
|
handleClick(row) {
|
this.delete = row
|
this.delDeviceById()
|
this.selectDevice()
|
},
|
remove(node, data) {
|
this.$confirm("此操作将永久删除该设备, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
let val = 1;
|
if (this.radio1 === "false") {
|
val = 2;
|
}
|
if (data.id === undefined) {
|
this.$axios
|
.delete(this.$api.url.deleteIdorFather, {
|
params: {
|
deviceFather: data.name,
|
type: val
|
}
|
})
|
.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"
|
});
|
}
|
});
|
}
|
});
|
},
|
},
|
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;
|
});
|
}
|
}
|
},
|
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.id = i.children[0].id;
|
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;
|
}
|
|
.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>
|
<style>
|
.laboratoryMangement .title * {
|
font-size: 14px;
|
}
|
|
.laboratoryMangement .table_top_div * {
|
font-size: 14px;
|
}
|
|
.laboratoryMangement .title .el-button {
|
height: 32px;
|
border: 1px solid rgba(190, 190, 190, 0.44);
|
box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
|
padding: 0 12px;
|
}
|
|
.laboratoryMangement .table_top_div .el-button {
|
height: 32px;
|
border: 1px solid rgba(190, 190, 190, 0.44);
|
box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
|
padding: 0 12px;
|
}
|
</style>
|
