Compare commits
4 Commits
4f810ee26a
...
61b6ceb965
| Author | SHA1 | Date | |
|---|---|---|---|
| 61b6ceb965 | |||
|
39aaf82345 | ||
|
|
4dceaca2e3 | ||
|
|
7ad64c7611 |
2
.env.dev
2
.env.dev
@ -1,7 +1,7 @@
|
||||
###
|
||||
# @Author: Do not edit
|
||||
# @Date: 2023-08-29 09:40:39
|
||||
# @LastEditTime: 2024-01-29 16:29:24
|
||||
# @LastEditTime: 2024-01-30 16:17:03
|
||||
# @LastEditors: zhp
|
||||
# @Description:
|
||||
###
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2023-12-04 14:10:37
|
||||
* @LastEditTime: 2024-01-29 16:48:40
|
||||
* @LastEditTime: 2024-01-30 18:06:48
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
@ -19,7 +19,7 @@ export function createQualityInspectionBoxBtn(data) {
|
||||
// 更新安灯按钮16键对应
|
||||
export function updateQualityInspectionBoxBtn(data) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-box-btn/updateBatch',
|
||||
url: '/base/quality-inspection-box-btn-auth/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
@ -28,7 +28,7 @@ export function updateQualityInspectionBoxBtn(data) {
|
||||
// 删除安灯按钮16键对应
|
||||
export function deleteQualityInspectionBoxBtn(id) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-box-btn/delete?id=' + id,
|
||||
url: 'base/quality-inspection-box-btn-auth/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@ -36,7 +36,7 @@ export function deleteQualityInspectionBoxBtn(id) {
|
||||
// 获得安灯按钮16键对应
|
||||
export function getQualityInspectionBoxBtn(id) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-box-btn/get?id=' + id,
|
||||
url: 'base/quality-inspection-box-btn-auth/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-01-29 16:50:26
|
||||
* @LastEditTime: 2024-01-29 17:06:50
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-01-29 15:00:30
|
||||
* @LastEditTime: 2024-01-29 17:05:37
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -142,12 +149,13 @@ import screenfull from 'screenfull'
|
||||
import alarmLevel from './components/alarmLevel'
|
||||
import pileBarChart from './components/pileBarChart'
|
||||
import colorDiv from './components/colorDiv'
|
||||
import moment from "moment";
|
||||
|
||||
// import axios from '@/utils/request'
|
||||
import doubleYChart from './components/coldDoubleYChart'
|
||||
import { parseTime } from '../core/mixins/code-filter';
|
||||
import ISRAChart from './components/ISRAChart.vue';
|
||||
import { getDcsMsg, closeDcsMsg } from "@/websocket/wsInterface"
|
||||
import { getDcsMsg, closeDcsMsg } from "./wsInterface"
|
||||
import LinearBarChart from './components/linearBarChart'
|
||||
const qualityYearTableProps= []
|
||||
const EqMonitoringPropsFun = [
|
||||
@ -398,6 +406,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss'));
|
||||
this.funInitWebSocket()
|
||||
// if (num > 0) {
|
||||
if (!this.wsIsOpen) {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-01-29 16:17:04
|
||||
* @LastEditTime: 2024-01-30 17:19:32
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -616,6 +616,19 @@ export default {
|
||||
this.SJGWebsocketClose()
|
||||
},
|
||||
mounted() {
|
||||
let eqArr = this.qualityYearList.map((item, index) => [
|
||||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
|
||||
</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
|
||||
])
|
||||
this.eqConfig.data = eqArr
|
||||
this.$refs['eqScrollBoard'].updateRows(eqArr)
|
||||
this.getList()
|
||||
this.initWebSocket()
|
||||
this.SJGInitWebSocket()
|
||||
@ -669,23 +682,22 @@ export default {
|
||||
'get',
|
||||
).then((res) => {
|
||||
// console.log('11111', res);
|
||||
if (res.data.length !==0) {
|
||||
let processArr = res.data.map((item, index) => [
|
||||
// console.log(item)
|
||||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||
let processArr = qualityMonthList.map((item, index) => [
|
||||
// console.log(item)
|
||||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''}
|
||||
</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''}</span>`,
|
||||
])
|
||||
this.processConfig.data = processArr
|
||||
this.$refs['processScrollBoard'].updateRows(processArr)
|
||||
} else {
|
||||
let processArr = qualityMonthList.map((item, index) => [
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''}</span>`,
|
||||
])
|
||||
this.processConfig.data = processArr
|
||||
this.$refs['processScrollBoard'].updateRows(processArr)
|
||||
if (res.data.length !==0) {
|
||||
let processArr = res.data.map((item, index) => [
|
||||
// console.log(item)
|
||||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||
</span>`,
|
||||
@ -850,22 +862,6 @@ export default {
|
||||
// console.log(this.EnergyMonitoringList)
|
||||
// this.$nextTick(() => {
|
||||
this.$refs.productLineChart.initChart(Array.from(new Set(nameList)), passRateList, outputNumList)
|
||||
} else {
|
||||
console.log(this.qualityYearList);
|
||||
|
||||
let eqArr = this.qualityYearList.map((item,index) => [
|
||||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
|
||||
</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
|
||||
])
|
||||
this.eqConfig.data = eqArr
|
||||
this.$refs['eqScrollBoard'].updateRows(eqArr)
|
||||
}
|
||||
},
|
||||
// 数据发送
|
||||
|
||||
183
src/views/OperationalOverview/websocket.js
Normal file
183
src/views/OperationalOverview/websocket.js
Normal file
@ -0,0 +1,183 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-01-29 17:05:25
|
||||
* @LastEditTime: 2024-01-29 17:05:25
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
/**
|
||||
* 发起websocket请求函数
|
||||
* @param {string} url ws连接地址
|
||||
* @param {Object} agentData 传给后台的参数
|
||||
* @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
|
||||
* @param {function} errCallback ws连接错误的回调函数
|
||||
*/
|
||||
export function WsConnect(url, agentData, successCallback, errCallback) {
|
||||
this.wsUrl = url;
|
||||
this.wsObj = null;
|
||||
// 是否执行重连 true/不执行 ； false/执行
|
||||
this.lockReconnect = false;
|
||||
// 重连定时器
|
||||
this.wsCreateHandler = null;
|
||||
// 连接成功，执行回调函数
|
||||
this.messageCallback = successCallback;
|
||||
// 连接失败，执行回调函数
|
||||
this.errorCallback = errCallback;
|
||||
// 发送给后台的数据
|
||||
this.sendDatas = agentData;
|
||||
// 创建ws函数
|
||||
this.createWebSoket = () => {
|
||||
if (typeof WebSocket === "undefined") {
|
||||
writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
this.wsObj = new WebSocket(url);
|
||||
initWsEventHandle();
|
||||
} catch (e) {
|
||||
writeToScreen("连接异常，开始重连");
|
||||
reconnect();
|
||||
}
|
||||
};
|
||||
// 手动关闭websocket （这里手动关闭会执行onclose事件）
|
||||
this.closeWebsocket = () => {
|
||||
if (this.wsObj) {
|
||||
writeToScreen("手动关闭websocket");
|
||||
this.wsObj.close(); // 关闭websocket
|
||||
// this.wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
|
||||
// 关闭重连
|
||||
this.lockReconnect = true;
|
||||
this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
|
||||
// 关闭心跳检查
|
||||
// heartCheck.stop();
|
||||
}
|
||||
};
|
||||
const initWsEventHandle = () => {
|
||||
try {
|
||||
// 连接成功
|
||||
this.wsObj.onopen = (event) => {
|
||||
onWsOpen(event);
|
||||
// heartCheck.start();
|
||||
};
|
||||
|
||||
// 监听服务器端返回的信息
|
||||
this.wsObj.onmessage = (event) => {
|
||||
onWsMessage(event);
|
||||
// heartCheck.start();
|
||||
};
|
||||
|
||||
this.wsObj.onclose = (event) => {
|
||||
writeToScreen("onclose执行关闭事件");
|
||||
onWsClose(event);
|
||||
};
|
||||
|
||||
this.wsObj.onerror = (event) => {
|
||||
writeToScreen("onerror执行error事件，开始重连");
|
||||
onWsError(event);
|
||||
reconnect();
|
||||
};
|
||||
} catch (err) {
|
||||
writeToScreen("绑定事件没有成功，开始重连");
|
||||
reconnect();
|
||||
}
|
||||
};
|
||||
|
||||
const onWsOpen = (event) => {
|
||||
writeToScreen("CONNECT");
|
||||
// // 客户端与服务器端通信
|
||||
// wsObj.send('我发送消息给服务端');
|
||||
// 添加状态判断，当为OPEN时，发送消息
|
||||
if (this.wsObj.readyState === this.wsObj.OPEN) {
|
||||
// wsObj.OPEN = 1
|
||||
// 发给后端的数据需要字符串化
|
||||
this.wsObj.send(JSON.stringify(this.sendDatas));
|
||||
}
|
||||
if (this.wsObj.readyState === this.wsObj.CLOSED) {
|
||||
// wsObj.CLOSED = 3
|
||||
writeToScreen("wsObj.readyState=3, ws连接异常，开始重连");
|
||||
reconnect();
|
||||
this.errorCallback(event);
|
||||
}
|
||||
};
|
||||
const onWsMessage = (event) => {
|
||||
const jsonStr = event.data;
|
||||
// writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
|
||||
this.messageCallback(jsonStr);
|
||||
};
|
||||
const onWsClose = (event) => {
|
||||
writeToScreen("DISCONNECT");
|
||||
// e.code === 1000 表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
|
||||
// e.code !== 1000 表示非正常关闭。
|
||||
console.log("onclose event: ", event);
|
||||
if (event && event.code !== 1000) {
|
||||
writeToScreen("非正常关闭");
|
||||
this.errorCallback(event);
|
||||
// 如果不是手动关闭，这里的重连会执行；如果调用了手动关闭函数，这里重连不会执行
|
||||
reconnect();
|
||||
}
|
||||
};
|
||||
const onWsError = (event) => {
|
||||
writeToScreen("onWsError: ", event.data);
|
||||
this.errorCallback(event);
|
||||
};
|
||||
|
||||
const writeToScreen = (massage) => {
|
||||
console.log(massage);
|
||||
};
|
||||
|
||||
// 重连函数
|
||||
const reconnect = () => {
|
||||
if (this.lockReconnect) {
|
||||
return;
|
||||
}
|
||||
writeToScreen("3秒后重连");
|
||||
this.lockReconnect = true;
|
||||
// 没连接上会一直重连，设置延迟避免请求过多
|
||||
this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
|
||||
this.wsCreateHandler = setTimeout(() => {
|
||||
writeToScreen("重连..." + this.wsUrl);
|
||||
this.createWebSoket();
|
||||
this.lockReconnect = false;
|
||||
writeToScreen("重连完成");
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
// 心跳检查（看看websocket是否还在正常连接中）
|
||||
// let heartCheck = {
|
||||
// timeout: 15000,
|
||||
// timeoutObj: null,
|
||||
// serverTimeoutObj: null,
|
||||
// // 重启
|
||||
// reset() {
|
||||
// clearTimeout(this.timeoutObj);
|
||||
// clearTimeout(this.serverTimeoutObj);
|
||||
// this.start();
|
||||
// },
|
||||
// // 停止
|
||||
// stop() {
|
||||
// clearTimeout(this.timeoutObj);
|
||||
// clearTimeout(this.serverTimeoutObj);
|
||||
// },
|
||||
// // 开启定时器
|
||||
// start() {
|
||||
// this.timeoutObj && clearTimeout(this.timeoutObj);
|
||||
// this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
|
||||
// // 15s之内如果没有收到后台的消息，则认为是连接断开了，需要重连
|
||||
// this.timeoutObj = setTimeout(() => {
|
||||
// writeToScreen("心跳检查，发送ping到后台");
|
||||
// try {
|
||||
// const datas = { ping: true };
|
||||
// this.wsObj.send(JSON.stringify(datas));
|
||||
// } catch (err) {
|
||||
// writeToScreen("发送ping异常");
|
||||
// }
|
||||
// console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj);
|
||||
// // 内嵌定时器
|
||||
// this.serverTimeoutObj = setTimeout(() => {
|
||||
// writeToScreen("没有收到后台的数据，重新连接");
|
||||
// reconnect();
|
||||
// }, this.timeout);
|
||||
// }, this.timeout);
|
||||
// },
|
||||
// };
|
||||
}
|
||||
51
src/views/OperationalOverview/wsInterface.js
Normal file
51
src/views/OperationalOverview/wsInterface.js
Normal file
@ -0,0 +1,51 @@
|
||||
import { WsConnect } from './websocket'
|
||||
import store from "@/store";
|
||||
|
||||
// 创建websocket链接
|
||||
|
||||
const timestr = new Date().getTime()
|
||||
// ISRA
|
||||
const mesIsra = new WsConnect(
|
||||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=KILN'+timestr,
|
||||
'',
|
||||
(data) => {
|
||||
// console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
// console.log(msgData)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "israKiln": {
|
||||
store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
export const getDcsMsg = () => {
|
||||
// dcsConn.createWebSoket()
|
||||
mesIsra.createWebSoket()
|
||||
// mesMA.createWebSoket()
|
||||
// mesEN.createWebSoket()
|
||||
// mesGAS.createWebSoket()
|
||||
// mesIS.createWebSoket()
|
||||
// mesSJG.createWebSoket()
|
||||
// mesOV.createWebSoket()
|
||||
// mesCUTTING.createWebSoket()
|
||||
}
|
||||
export const closeDcsMsg = () => {
|
||||
// dcsConn.closeWebsocket()
|
||||
mesIsra.closeWebsocket()
|
||||
// mesMA.closeWebsocket()
|
||||
// mesEN.closeWebsocket()
|
||||
// mesGAS.closeWebsocket()
|
||||
// mesIS.closeWebsocket()
|
||||
// mesSJG.closeWebsocket()
|
||||
// mesOV.closeWebsocket()
|
||||
// mesCUTTING.closeWebsocket()
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
<!--
|
||||
<!--
|
||||
filename: BomSelection.vue
|
||||
author: liubin
|
||||
date: 2023-11-20 13:23:36
|
||||
description:
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
@ -50,7 +50,8 @@ export default {
|
||||
watch: {
|
||||
list: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
if (val) {
|
||||
console.log(val);
|
||||
this.list__inner = val.map((item) => ({ ...item, disabled: false }));
|
||||
}
|
||||
},
|
||||
@ -74,7 +75,8 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleChange(bomItem, selected) {
|
||||
handleChange(bomItem, selected) {
|
||||
console.log(selected);
|
||||
this.list__inner = this.list__inner.map((item) => ({
|
||||
...item,
|
||||
disabled: selected ? item.id !== bomItem.id : false,
|
||||
|
||||
@ -0,0 +1,119 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-01-30 10:54:51
|
||||
* @LastEditTime: 2024-01-30 16:53:35
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="bom-selection" v-for="item in list__inner" :key="item.id + randomKey">
|
||||
<el-checkbox :label="item.name" :checked="item.id === selected" @change="(e) => handleChange(item, e)"
|
||||
class="sl__body-item"></el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BomSelection',
|
||||
components: {},
|
||||
// model: {
|
||||
// prop: 'selected',
|
||||
// event: 'update',
|
||||
// },
|
||||
props: {
|
||||
currentSelect: {
|
||||
type: String | Number,
|
||||
default: null,
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
equipmentId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list__inner: [],
|
||||
selected: null,
|
||||
randomKey: Math.random(),
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
list: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.list__inner = val.map((item) => ({ ...item, disabled: false }));
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
currentSelect: {
|
||||
handler(val) {
|
||||
// val: string
|
||||
this.selected = val;
|
||||
this.randomKey = Math.random();
|
||||
// 更新选中状态
|
||||
if (val) {
|
||||
this.list__inner.forEach((item) => {
|
||||
if (item.id == val) item.disabled = false;
|
||||
else item.disabled = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleChange(bomItem, selected) {
|
||||
this.list__inner = this.list__inner.map((item) => ({
|
||||
...item,
|
||||
disabled: selected ? item.id !== bomItem.id : false,
|
||||
}));
|
||||
|
||||
if (selected) this.selected = null;
|
||||
|
||||
|
||||
this.$emit('change', this.equipmentId, bomItem.id, selected);
|
||||
this.$nextTick(() => {
|
||||
this.$forceUpdate();
|
||||
});
|
||||
},
|
||||
clearSelected() {
|
||||
console.log('clearSelected');
|
||||
this.selected = null;
|
||||
this.randomKey = Math.random();
|
||||
// this.$emit('update', null);
|
||||
// this.$nextTick(() => {
|
||||
// this.$forceUpdate();
|
||||
// });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bom-selection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.sl__body-item {
|
||||
margin: 0;
|
||||
padding: 3px 6px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background: #0001;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,266 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-01-30 10:53:32
|
||||
* @LastEditTime: 2024-01-30 17:51:13
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="bom-selector">
|
||||
<el-row v-if="filteredBomList.length" style="border: 1px solid #ccc; display: flex">
|
||||
<el-col :span="12">
|
||||
<div class="select-list">
|
||||
<div class="sl__header" style="background: #f3f4fb; padding: 12px">
|
||||
<span style="">选择产线</span>
|
||||
<span>
|
||||
{{ selectedEquipments.length }}/{{ filteredBomList.length }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="sl__body">
|
||||
<div class="sl__body-item" v-for="eq in filteredBomList" :key="eq.id + refreshKey">
|
||||
<el-checkbox :key="refreshKey" :checked="selectedEquipments.includes(eq.id)"
|
||||
@change="(e) => handleEquipmentChange(eq, e)" class=""></el-checkbox>
|
||||
<span :key="'label' + refreshKey" @click.stop="() => handleLoadDom(eq)">
|
||||
{{ eq.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="border-left: 1px solid #ccc">
|
||||
<div class="select-list">
|
||||
<div class="sl__header" style="background: #f3f4fb; padding: 12px">
|
||||
<span style="">选择工序</span>
|
||||
</div>
|
||||
|
||||
<BomSelection ref="materialsBomList" :key="materialsBomList.equipmentId + 'materialsBomList'"
|
||||
:list="materialsBomList" :equipment-id="materialsBomList.equipmentId"
|
||||
:current-select="currentSelectedMaterialBomId" @change="handleMaterialBomChange" />
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- <el-col :span="8" style="border-left: 1px solid #ccc">
|
||||
<div class="select-list">
|
||||
<div class="sl__header" style="background: #f3f4fb; padding: 12px">
|
||||
<span style="">参数BOM</span>
|
||||
</div>
|
||||
|
||||
<BomSelection
|
||||
ref="valuesBomList"
|
||||
:key="valuesBomList.equipmentId + 'valuesBomList'"
|
||||
:list="valuesBomList"
|
||||
:equipment-id="valuesBomList.equipmentId"
|
||||
:current-select="currentSelectedValueBomId"
|
||||
@change="handleValueBomChange" />
|
||||
</div>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<div class="no-data-bg" v-else></div>
|
||||
</div>
|
||||
</template>
|
||||
;
|
||||
<script>
|
||||
|
||||
import { thisTypeAnnotation } from '@babel/types';
|
||||
import BomSelection from './BomSelection.vue';
|
||||
export default {
|
||||
name: 'BomSelector',
|
||||
components: { BomSelection },
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'update',
|
||||
},
|
||||
props: {
|
||||
bomList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchText: '',
|
||||
selectedEquipments: [],
|
||||
selected: [],
|
||||
bomArr:[],
|
||||
materialsBomList: [],
|
||||
valuesBomList: [],
|
||||
|
||||
refreshKey: Math.random(),
|
||||
currentSelectedMaterialBomId: null,
|
||||
currentSelectedValueBomId: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
console.log('value', val);
|
||||
if (val) {
|
||||
this.selectedEquipments = val.map((item) => item.equipmentId);
|
||||
this.selected = val;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
filteredBomList() {
|
||||
return this.bomList.filter((item) => {
|
||||
return item.name.includes(this.searchText);
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
commit() {
|
||||
this.$emit('update', this.selected);
|
||||
},
|
||||
|
||||
handleLoadDom(eq) {
|
||||
// 只显示 dom 列表
|
||||
this.currentEquipment = eq.id;
|
||||
this.materialsBomList = eq.materialsBom;
|
||||
this.valuesBomList = eq.valuesBom;
|
||||
// 回复选中的bom信息
|
||||
if (this.selectedEquipments.includes(eq.id)) {
|
||||
const selectedItem = this.selected.find(
|
||||
(item) => item.equipmentId == eq.id
|
||||
);
|
||||
this.currentSelectedMaterialBomId =
|
||||
selectedItem.equMaterialBomId ?? null;
|
||||
this.currentSelectedValueBomId = selectedItem.equValueBomId ?? null;
|
||||
}
|
||||
},
|
||||
|
||||
handleEquipmentChange(eq, selected) {
|
||||
this.currentEquipment = eq.id;
|
||||
this.materialsBomList = eq.materialsBom;
|
||||
this.valuesBomList = eq.valuesBom;
|
||||
if (selected) {
|
||||
console.log(selected)
|
||||
this.selectedEquipments.push(eq.id);
|
||||
this.selected.push({
|
||||
equipmentId: eq.id,
|
||||
// equValueBomId: null,
|
||||
children: [],
|
||||
});
|
||||
// this.$emit('update', this.selected);
|
||||
} else {
|
||||
// 清空选择状态
|
||||
this.selectedEquipments = this.selectedEquipments.filter(
|
||||
(id) => id !== eq.id
|
||||
);
|
||||
// this.$refs.materialsBomList.clearSelected();
|
||||
// this.$refs.valuesBomList.clearSelected();
|
||||
this.currentSelectedMaterialBomId = null;
|
||||
this.currentSelectedValueBomId = null;
|
||||
this.selected = this.selected.filter(
|
||||
(item) => item.equipmentId !== eq.id
|
||||
);
|
||||
// this.$emit('update', this.selected);
|
||||
}
|
||||
},
|
||||
|
||||
handleMaterialBomChange(equipmentId, bomId, selected) {
|
||||
const selectedItem = this.selected.find(
|
||||
(item) => item.equipmentId == equipmentId
|
||||
);
|
||||
this.bomArr.push(bomId)
|
||||
// console.log(this.selected);
|
||||
// arr.push(bomId)
|
||||
// console.log(arr);
|
||||
// console.log(selectedItem)
|
||||
if (selected) {
|
||||
// 如果没找到这个
|
||||
this.selectedEquipments.push(equipmentId);
|
||||
console.log(this.selected.indexOf(equipmentId))
|
||||
this.selected.forEach((ele,index) => {
|
||||
if (ele.equipmentId === equipmentId) {
|
||||
this.selected[index].children.push({ id: bomId })
|
||||
}
|
||||
})
|
||||
// this.selected.push({
|
||||
// equipmentId,
|
||||
// // equValueBomId: null,
|
||||
// equMaterialBomId: bomId,
|
||||
// });
|
||||
// 强制更新'设备'一栏
|
||||
this.refreshKey = Math.random();
|
||||
// this.$emit('update', this.selected);
|
||||
return;
|
||||
} else {
|
||||
this.selected.forEach((ele, index) => {
|
||||
ele.children.forEach((e, i) => {
|
||||
if (ele.equipmentId === equipmentId && e.id == bomId) {
|
||||
this.selected[index].children.splice(i,1)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
// this.$emit('getData', this.dataForm)
|
||||
selectedItem && (selectedItem.equMaterialBomId = selected ? bomId : null);
|
||||
this.currentSelectedMaterialBomId = selected ? bomId : null;
|
||||
console.log(this.selected)
|
||||
},
|
||||
|
||||
// handleValueBomChange(equipmentId, bomId, selected) {
|
||||
// const selectedItem = this.selected.find(
|
||||
// (item) => item.equipmentId == equipmentId
|
||||
// );
|
||||
// if (selected && !selectedItem) {
|
||||
// // 如果没找到这个
|
||||
// this.selectedEquipments.push(equipmentId);
|
||||
// this.selected.push({
|
||||
// equipmentId,
|
||||
// equValueBomId: bomId,
|
||||
// equMaterialBomId: null,
|
||||
// });
|
||||
// this.refreshKey = Math.random();
|
||||
// // this.$emit('update', this.selected);
|
||||
// return;
|
||||
// }
|
||||
// selectedItem && (selectedItem.equValueBomId = selected ? bomId : null);
|
||||
// this.currentSelectedValueBomId = selected ? bomId : null;
|
||||
// // this.$emit('update', this.selected);
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bom-selector {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.sl__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.sl__body-item {
|
||||
margin: 0;
|
||||
padding: 3px 6px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease-in-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
> span {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #0001;
|
||||
}
|
||||
}
|
||||
.sl__header {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,386 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-01-30 10:52:01
|
||||
* @LastEditTime: 2024-01-30 18:03:08
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<section class="process-bom">
|
||||
<!-- <SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
|
||||
|
||||
<div
|
||||
class="btns"
|
||||
style="
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
:disabled="currentDet == null"
|
||||
class="btn-create"
|
||||
@click="handleAddEquipment"
|
||||
icon="el-icon-plus">
|
||||
分配设备
|
||||
</el-button>
|
||||
<el-input
|
||||
icon="el-icon-search"
|
||||
placeholder="搜索"
|
||||
v-model="searchText"
|
||||
:disabled="currentDet == null"
|
||||
@change="handleSearchTextChange"
|
||||
clearable
|
||||
style="margin-left: 20px">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
</div> -->
|
||||
|
||||
<!-- 列表 -->
|
||||
<!-- <base-table
|
||||
:table-props="tableProps"
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun">
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
</base-table> -->
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<!-- <pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" /> -->
|
||||
|
||||
<base-dialog dialogTitle="选择产线工序" :dialogVisible="open" width="45%" @close="cancel" @cancel="cancel"
|
||||
@confirm="submitForm">
|
||||
<el-row>
|
||||
<el-form ref="dataForm" :model="dataForm" label-width="120px" :inline="true" class="demo-form-inline">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户名" prop="userId" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select v-model="dataForm.userId" placeholder="用户名" filterable @change="handleProductlineChange">
|
||||
<el-option v-for="opt in userList" :key="opt.id" :label="opt.name" :value="opt.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户昵称" prop="nickname" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-input v-model="dataForm.nickname">
|
||||
<!-- <el-option v-for="opt in workshopSectionList" :key="opt.value" :label="opt.label" :value="opt.value" /> -->
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<BomSelector ref="bomSelector" v-if="open" :bom-list="bomList" :value="selectedBoms"
|
||||
@update="selectedBoms = $event" />
|
||||
|
||||
<el-row slot="footer">
|
||||
<el-button size="small" @click="cancel">取消</el-button>
|
||||
<el-button type="primary" size="small" @click="submitForm" :loading="btnLoading">
|
||||
确定
|
||||
</el-button>
|
||||
</el-row>
|
||||
</base-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BomSelector from './BomSelector.vue';
|
||||
import {
|
||||
getUserList
|
||||
} from '@/api/base/qualityInspectionBoxPermissions';
|
||||
export default {
|
||||
name: 'ProcessBom',
|
||||
components: { BomSelector },
|
||||
props: {
|
||||
currentDet: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
btnLoading: false,
|
||||
open: false,
|
||||
eqList: [],
|
||||
bomList: [],
|
||||
finalList: [],
|
||||
choosedEquipments: [],
|
||||
searchBarFormConfig: [{ label: '工序下设备' }],
|
||||
tableProps: [
|
||||
{ prop: 'equName', label: '设备名称' },
|
||||
{ prop: 'materialName', label: '物料BOM' },
|
||||
{ prop: 'valueName', label: '参数BOM' },
|
||||
],
|
||||
list: [],
|
||||
total: 0,
|
||||
tableBtn: [],
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
equipmentName: '',
|
||||
},
|
||||
dataForm: {
|
||||
userId: null,
|
||||
nickname: null,
|
||||
list: [],
|
||||
},
|
||||
userList: [],
|
||||
data:{},
|
||||
searchText: '',
|
||||
selectedBoms: {},
|
||||
timer: null,
|
||||
};
|
||||
},
|
||||
// watch: {
|
||||
// currentDet: {
|
||||
// handler(val) {
|
||||
// console.log('currentDet', val);
|
||||
// if (val != null) {
|
||||
// this.getList(val);
|
||||
// } else {
|
||||
// this.clearList();
|
||||
// }
|
||||
// },
|
||||
// immediate: true,
|
||||
// deep: true,
|
||||
// },
|
||||
// },
|
||||
mounted () {
|
||||
this.getData()
|
||||
this.getDict()
|
||||
},
|
||||
methods: {
|
||||
getDict() {
|
||||
getUserList({
|
||||
pageNo: 1,
|
||||
pageSize: 999
|
||||
}).then((res) => {
|
||||
this.userList = res.data.map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.username,
|
||||
nickname: item.nickname
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
async handleProductlineChange(id) {
|
||||
this.userList.forEach((ele) => {
|
||||
if (ele.id === id) {
|
||||
this.dataForm.nickname = ele.nickname
|
||||
}
|
||||
})
|
||||
},
|
||||
handleEmitFun() { },
|
||||
getData() {
|
||||
this.selectedBoms = [];
|
||||
// 获取设备及bom列表
|
||||
this.http('base/quality-inspection-box-btn-auth/getQualityAuthTree', 'get',
|
||||
// {
|
||||
// sectionId,
|
||||
// flowDetId: detId,
|
||||
// }
|
||||
)
|
||||
.then(({ code, data }) => {
|
||||
console.log(data)
|
||||
if (code == 0) {
|
||||
this.bomList = data.map((eq) => {
|
||||
eq.materialsBom = eq.children || [];
|
||||
// eq.valuesBom = eq.valuesBom || [];
|
||||
// 设置选中状态
|
||||
eq.materialsBom.chosen = eq.materialsBomChoseId ?? null;
|
||||
// eq.valuesBom.chosen = eq.valuesBomChoseId ?? null;
|
||||
if (
|
||||
eq.equChose ||
|
||||
eq.materialsBom.chosen
|
||||
// eq.valuesBom.chosen
|
||||
) {
|
||||
this.selectedBoms.push({
|
||||
equipmentId: eq.id,
|
||||
equMaterialBomId: eq.materialsBom.chosen,
|
||||
// equValueBomId: eq.valuesBom.chosen,
|
||||
});
|
||||
}
|
||||
// 设置设备id
|
||||
eq.materialsBom.equipmentId = eq.id;
|
||||
// eq.valuesBom.equipmentId = eq.id;
|
||||
return eq;
|
||||
});
|
||||
} else {
|
||||
this.bomList.splice(0);
|
||||
this.selectedBoms = [];
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.bomList.splice(0);
|
||||
this.selectedBoms = [];
|
||||
});
|
||||
},
|
||||
handleTableBtnClick() {},
|
||||
|
||||
handleSearchTextChange(val) {
|
||||
if (this.timer) clearTimeout(this.timer);
|
||||
this.timer = setTimeout(() => {
|
||||
console.log('geting list.......');
|
||||
this.queryParams.equipmentName = val;
|
||||
this.$nextTick(() => {
|
||||
this.getList(this.currentDet);
|
||||
});
|
||||
}, 300);
|
||||
},
|
||||
|
||||
put(payload) {
|
||||
return this.http(this.updateUrl, 'put', payload);
|
||||
},
|
||||
post(payload) {
|
||||
return this.http(this.addUrl, 'post', payload);
|
||||
},
|
||||
recv(payload) {
|
||||
return this.http(this.pageUrl, 'get', payload);
|
||||
},
|
||||
info(payload) {
|
||||
return this.http(this.infoUrl, 'get', payload);
|
||||
},
|
||||
http(url, method, payload) {
|
||||
return this.$axios({
|
||||
url,
|
||||
method,
|
||||
params: method === 'get' ? payload : null,
|
||||
data: method !== 'get' ? payload : null,
|
||||
});
|
||||
},
|
||||
submitForm() {
|
||||
this.btnLoading = true;
|
||||
// 现将子组件的修改提交更新至本组件
|
||||
this.$refs.bomSelector.commit();
|
||||
// 再提交至后端
|
||||
this.$nextTick(async () => {
|
||||
console.log('selectedBoms', this.selectedBoms);
|
||||
// console.log('selectedBoms', this.data);
|
||||
this.dataForm.list = this.selectedBoms.map((ele) => {
|
||||
return {
|
||||
id: ele.equipmentId,
|
||||
children: ele.children
|
||||
}
|
||||
})
|
||||
console.log(this.dataForm);
|
||||
if (this.selectedBoms.length) {
|
||||
const { code, data } = await this.http(
|
||||
'base/quality-inspection-box-btn-auth/create',
|
||||
'post',
|
||||
this.dataForm
|
||||
);
|
||||
if (code == 0) {
|
||||
this.$message.success('操作成功');
|
||||
// this.getList(this.currentDet);
|
||||
this.btnLoading = false;
|
||||
this.$emit('getList')
|
||||
this.cancel();
|
||||
} else {
|
||||
this.btnLoading = false;
|
||||
this.$message.error('操作失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// async getList({
|
||||
// detId,
|
||||
// detName,
|
||||
// detDesc,
|
||||
// flowId,
|
||||
// sectionName,
|
||||
// sectionId,
|
||||
// } = {}) {
|
||||
// console.log('get list', detId, detName, flowId);
|
||||
// const { data, code } = await this.http(
|
||||
// '/extend/process-flow-det-equipment/page',
|
||||
// 'get',
|
||||
// { flowDetId: detId, ...this.queryParams }
|
||||
// );
|
||||
// if (code == 0) {
|
||||
// this.list = data.list;
|
||||
// this.total = data.total;
|
||||
// } else {
|
||||
// this.list.splice(0);
|
||||
// this.total = 0;
|
||||
// }
|
||||
|
||||
// // this.selectedBoms = [];
|
||||
// // // 获取设备及bom列表
|
||||
// // this.http('base/quality-inspection-box-btn-auth/getQualityAuthTree', 'get',
|
||||
// // // {
|
||||
// // // sectionId,
|
||||
// // // flowDetId: detId,
|
||||
// // // }
|
||||
// // )
|
||||
// // .then(({ code, data }) => {
|
||||
// // console.log(data)
|
||||
// // if (code == 0) {
|
||||
// // this.bomList = data.map((eq) => {
|
||||
// // eq.materialsBom = eq.materialsBom || [];
|
||||
// // eq.valuesBom = eq.valuesBom || [];
|
||||
// // // 设置选中状态
|
||||
// // eq.materialsBom.chosen = eq.materialsBomChoseId ?? null;
|
||||
// // eq.valuesBom.chosen = eq.valuesBomChoseId ?? null;
|
||||
// // if (
|
||||
// // eq.equChose ||
|
||||
// // eq.materialsBom.chosen ||
|
||||
// // eq.valuesBom.chosen
|
||||
// // ) {
|
||||
// // this.selectedBoms.push({
|
||||
// // equipmentId: eq.id,
|
||||
// // equMaterialBomId: eq.materialsBom.chosen,
|
||||
// // equValueBomId: eq.valuesBom.chosen,
|
||||
// // });
|
||||
// // }
|
||||
// // // 设置设备id
|
||||
// // eq.materialsBom.equipmentId = eq.id;
|
||||
// // eq.valuesBom.equipmentId = eq.id;
|
||||
// // return eq;
|
||||
// // });
|
||||
// // } else {
|
||||
// // this.bomList.splice(0);
|
||||
// // this.selectedBoms = [];
|
||||
// // }
|
||||
// // })
|
||||
// // .catch((err) => {
|
||||
// // this.bomList.splice(0);
|
||||
// // this.selectedBoms = [];
|
||||
// // });
|
||||
// },
|
||||
async handleAddEquipment() {
|
||||
this.open = true;
|
||||
},
|
||||
cancel() {
|
||||
this.open = false;
|
||||
},
|
||||
clearList() {
|
||||
this.list = [];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.process-bom {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: 12px 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,173 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-01-30 18:05:04
|
||||
* @LastEditTime: 2024-01-30 18:06:16
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
/*
|
||||
* @Author: zwq
|
||||
* @Date: 2022-08-24 11:19:43
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-01-30 18:00:53
|
||||
* @Description:
|
||||
*/
|
||||
export default {
|
||||
data() {
|
||||
/* eslint-disable */
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: '',
|
||||
deleteURL: '',
|
||||
statusUrl: '',
|
||||
exportURL: ''
|
||||
},
|
||||
tableData: [],
|
||||
listQuery: {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
total: 1,
|
||||
},
|
||||
exportLoading: false,
|
||||
dataListLoading: false,
|
||||
addOrEditTitle: '',
|
||||
addOrUpdateVisible: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
this.dataListLoading = true;
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(response => {
|
||||
this.tableData = response.data.list;
|
||||
this.listQuery.total = response.data.total;
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
this.listQuery.pageSize = val;
|
||||
this.listQuery.pageNo = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.listQuery.pageNo = val;
|
||||
this.getDataList();
|
||||
},
|
||||
// 新增 / 修改
|
||||
addOrUpdateHandle() {
|
||||
this.addOrUpdateVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init();
|
||||
});
|
||||
},
|
||||
cancel(id) {
|
||||
this.$refs["popover-" + id].showPopper = false;
|
||||
},
|
||||
//改变状态
|
||||
changeStatus(id) {
|
||||
this.$http
|
||||
.post(this.urlOptions.statusUrl, { id })
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.$refs["popover-" + id].showPopper = false;
|
||||
this.$message({
|
||||
message: this.$t("prompt.success"),
|
||||
type: "success",
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.getDataList();
|
||||
},
|
||||
});
|
||||
})
|
||||
.catch(() => { });
|
||||
},
|
||||
//tableBtn点击
|
||||
handleClick(val) {
|
||||
if (val.type === "edit") {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.handleAddEquipment(val.data.userId);
|
||||
});
|
||||
} else if (val.type === "delete") {
|
||||
this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex,val.data)
|
||||
} else if (val.type === "change") {
|
||||
this.changeStatus(val.data.id)
|
||||
} else {
|
||||
this.otherMethods(val)
|
||||
}
|
||||
},
|
||||
// 删除
|
||||
deleteHandle(id, name, index) {
|
||||
this.$confirm(`确定对${name ? '[名称=' + name + ']' : '[序号=' + index + ']'}进行删除操作?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
this.urlOptions.deleteURL(id).then(({ data }) => {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getDataList();
|
||||
},
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(() => { });
|
||||
},
|
||||
//search-bar点击
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case "search":
|
||||
this.listQuery.xm1 = val.xm1;
|
||||
this.listQuery.xm2 = val.xm2;
|
||||
this.listQuery.pageNo = 1;
|
||||
this.getDataList();
|
||||
break;
|
||||
case "add":
|
||||
this.addOrEditTitle = '新增'
|
||||
this.addOrUpdateVisible = true;
|
||||
this.addOrUpdateHandle()
|
||||
break;
|
||||
default:
|
||||
console.log(val)
|
||||
}
|
||||
},
|
||||
handleCancel() {
|
||||
this.$refs.addOrUpdate.formClear()
|
||||
this.addOrUpdateVisible = false
|
||||
this.addOrEditTitle = ''
|
||||
},
|
||||
handleConfirm() {
|
||||
this.$refs.addOrUpdate.dataFormSubmit()
|
||||
},
|
||||
successSubmit() {
|
||||
this.handleCancel()
|
||||
this.getDataList()
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
// 处理查询参数
|
||||
let params = { ...this.queryParams };
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
|
||||
this.exportLoading = true;
|
||||
return this.urlOptions.exportURL(params);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '工厂.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => { });
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -9,30 +9,28 @@
|
||||
<el-form ref="dataForm" :model="dataForm" label-width="120px" v-loading="formLoading" label-position="top">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产线" prop="productionLineId"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select v-model="dataForm.productionLineId" placeholder="请选择产线" filterable
|
||||
@change="handleProductlineChange">
|
||||
<el-option v-for="opt in productionLineList" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
<el-form-item label="用户名" prop="userId" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select v-model="dataForm.userId" placeholder="用户名" filterable @change="handleProductlineChange">
|
||||
<el-option v-for="opt in userList" :key="opt.id" :label="opt.name" :value="opt.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工段" prop="sectionId" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select v-model="dataForm.sectionId" placeholder="请选择工段" filterable @change="$emit('update', dataForm)">
|
||||
<el-option v-for="opt in workshopSectionList" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-form-item label="用户昵称" prop="nickname" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-input v-model="dataForm.nickname">
|
||||
<!-- <el-option v-for="opt in workshopSectionList" :key="opt.value" :label="opt.label" :value="opt.value" /> -->
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="检测内容" prop="inspectionDetIdList"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
|
||||
<div class="itemDet" v-for="item in inspectionDetList" :key="item.typeId" style="padding: 0 20px;">
|
||||
<div>{{ item.typeName}} </div>
|
||||
<div class="itemDet" v-for="item in treeData" :key="item.typeId" style="padding: 0 20px;">
|
||||
<div>{{ item.name}} </div>
|
||||
<!-- <div>{{ item.data }} </div> -->
|
||||
<div class="content">
|
||||
<el-checkbox-group v-model="dataForm.inspectionDetIdList" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="i in item.data" :key="i.content" :label="i.detId">{{ i.content }}
|
||||
<el-checkbox v-for="i in item.children" :key="i.id" :label="i.id">{{ i.bane }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
@ -85,13 +83,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { children } from '@antv/x6-common/lib/dom/elem';
|
||||
import basicAdd from '../../mixins/basic-add';
|
||||
import {
|
||||
createQualityInspectionBoxBtn,
|
||||
updateQualityInspectionBoxBtn,
|
||||
getQualityInspectionBoxBtn,
|
||||
getListByLineSection
|
||||
} from '@/api/base/qualityInspectionBoxBtn';
|
||||
getListByLineSection,
|
||||
getUserList
|
||||
} from '@/api/base/qualityInspectionBoxPermissions';
|
||||
export default {
|
||||
mixins: [basicAdd],
|
||||
data() {
|
||||
@ -105,10 +105,20 @@ export default {
|
||||
},
|
||||
dataForm: {
|
||||
// id: null,
|
||||
sectionId: null,
|
||||
productionLineId: null,
|
||||
inspectionDetIdList:[],
|
||||
userId: null,
|
||||
nickname:null,
|
||||
// productionLineId: null,
|
||||
list: [
|
||||
// children:[],
|
||||
],
|
||||
},
|
||||
treeData: [],
|
||||
props: {
|
||||
label: "name",
|
||||
children: "children"
|
||||
},
|
||||
defaultProps: [],
|
||||
userList:[],
|
||||
formLoading: true,
|
||||
productionLineList: [],
|
||||
inspectionDetList:[],
|
||||
@ -118,6 +128,9 @@ export default {
|
||||
mounted() {
|
||||
this.getProductionLineList()
|
||||
this.getQualityInspectionDetList()
|
||||
this.getData()
|
||||
this.getDict()
|
||||
|
||||
// this.getList()
|
||||
// this.getWorksectionList();
|
||||
// this.getCode('/base/equipment-group-alarm/getCode').then((code) => {
|
||||
@ -135,8 +148,117 @@ export default {
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo() {
|
||||
const getC = this.$refs.tree.getCheckedNodes();
|
||||
const getHC = this.$refs.tree.getHalfCheckedNodes();
|
||||
let selected_nodes = getHC.concat(getC);
|
||||
let selected_ids = new Set(); // 记录选中的节点tree_id
|
||||
let used_ids = new Set(); // 记录已经查询过的节点
|
||||
// 遍历初始化selected_ids
|
||||
for (let node of selected_nodes) {
|
||||
selected_ids.add(node.$treeNodeId);
|
||||
}
|
||||
// 最终的结果数据用一个根节点存储, 为了对齐递归的数据结构
|
||||
let root_node = {
|
||||
treeNodeId: -1,
|
||||
children: [],
|
||||
};
|
||||
// 添加给parent_node节点一个新节点 node
|
||||
// 注意:node 的类型是原始的 tree 节点
|
||||
// 而parent_node 的类型是真正的结果节点
|
||||
function AddNode(node, parent_node) {
|
||||
if (
|
||||
!selected_ids.has(node.$treeNodeId) ||
|
||||
used_ids.has(node.$treeNodeId)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
used_ids.add(node.$treeNodeId); // 加过的要存入 used_ids 做标记
|
||||
let real_node = {
|
||||
treeNodeId: node.$treeNodeId,
|
||||
children: [],
|
||||
label: node.name,
|
||||
desc: node.desc,
|
||||
grade: node.grade,
|
||||
// 存储一下节点的数据
|
||||
};
|
||||
// // 添加子节点
|
||||
if (node.children) {
|
||||
for (let child_node of node.children) {
|
||||
AddNode(child_node, real_node);
|
||||
}
|
||||
}
|
||||
if (real_node.children.length === 0) {
|
||||
delete real_node.children;
|
||||
}
|
||||
if (!real_node.grade) {
|
||||
delete real_node.grade;
|
||||
}
|
||||
if (!real_node.desc) {
|
||||
delete real_node.desc;
|
||||
}
|
||||
parent_node.children.push(real_node);
|
||||
}
|
||||
for (let node of selected_nodes) {
|
||||
AddNode(node, root_node);
|
||||
}
|
||||
let result = root_node.children;
|
||||
console.log(result);
|
||||
},
|
||||
handleCheck(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
|
||||
// console.log(checkedNodes, checkedKeys)
|
||||
// checkedKeys.checkedNodes.forEach((ele) => {
|
||||
// this.dataForm.list.push()
|
||||
// })
|
||||
// checkedKeys.checkedNodes.forEach((item) => {
|
||||
// // if(this.dataForm.list)
|
||||
// // this.dataForm.list.push(item)
|
||||
// })
|
||||
// console.log(this.dataForm.list);
|
||||
},
|
||||
handleCheckChange(data, checked, indeterminate) {
|
||||
var checkedNodes = this.$refs.tree.getCheckedNodes(true)
|
||||
var menuIds = []
|
||||
checkedNodes.forEach(nodes => {
|
||||
menuIds.push(nodes.id, nodes.id)
|
||||
})
|
||||
// 利用set没有重复的值这一特性, 实现数组去重。Array.form方法可以将 Set 结构转为数组。
|
||||
// this.roleForm.menuIds = Array.from(new Set(menuIds))
|
||||
console.log(menuIds);
|
||||
let arr = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
|
||||
console.log(arr)
|
||||
// console.log(data, checked, indeterminate)
|
||||
|
||||
// if (checked === true && this.dataForm.list.indexOf(data.productionLineId) === -1) {
|
||||
// } else {
|
||||
// this.dataForm.list[this.dataForm.list.indexOf(data.productionLineId)].children.push(data.id)
|
||||
// }
|
||||
},
|
||||
getDict() {
|
||||
getUserList({
|
||||
pageNo: 1,
|
||||
pageSize: 999
|
||||
}).then((res) => {
|
||||
this.userList = res.data.map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.username,
|
||||
nickname: item.nickname
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
http(url, method, payload) {
|
||||
return this.$axios({
|
||||
url,
|
||||
method,
|
||||
params: method === 'get' ? payload : null,
|
||||
data: method !== 'get' ? payload : null,
|
||||
});
|
||||
},
|
||||
init(obj) {
|
||||
// console.log(productionLineId);
|
||||
console.log(obj);
|
||||
@ -175,6 +297,23 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
getData() {
|
||||
this.http('base/quality-inspection-box-btn-auth/getQualityAuthTree', 'get',
|
||||
// {
|
||||
// sectionId,
|
||||
// flowDetId: detId,
|
||||
// }
|
||||
)
|
||||
.then(({ code, data }) => {
|
||||
console.log(data)
|
||||
if (code == 0) {
|
||||
this.treeData = data
|
||||
} else {
|
||||
// this.bomList.splice(0);
|
||||
// this.selectedBoms = [];
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 模拟透传 ref */
|
||||
handleCheckedCitiesChange(value) {
|
||||
;console.log(value);
|
||||
@ -257,11 +396,26 @@ export default {
|
||||
}
|
||||
this.formLoading = false;
|
||||
},
|
||||
|
||||
async handleProductlineChange(id) {
|
||||
await this.getWorksectionList(id);
|
||||
this.dataForm.sectionId = null;
|
||||
this.$emit('update', this.dataForm);
|
||||
// getDict() {
|
||||
// getUserList({
|
||||
// pageNo: 1,
|
||||
// pageSize: 999
|
||||
// }).then((res) => {
|
||||
// this.userList = res.data.map((item) => {
|
||||
// return {
|
||||
// id: item.id,
|
||||
// name: item.username,
|
||||
// nickname: item.nickname
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
// },
|
||||
async handleProductlineChange(id) {
|
||||
this.userList.forEach((ele) => {
|
||||
if (ele.id === id) {
|
||||
this.dataForm.nickname = ele.nickname
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// async getCode(url) {
|
||||
|
||||
@ -14,10 +14,12 @@
|
||||
@pagination="getDataList" /> -->
|
||||
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="addOrUpdateVisible" width="50%" @cancel="handleCancel"
|
||||
<!-- <base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="addOrUpdateVisible" width="50%" @cancel="handleCancel"
|
||||
@confirm="handleConfirm" :before-close="handleCancel">
|
||||
<add-or-update ref="addOrUpdate" @refreshDataList="successSubmit"></add-or-update>
|
||||
</base-dialog>
|
||||
</base-dialog> -->
|
||||
<ProcessBomList ref="addOrUpdate" style="margin-top: 16px" @getList="getDataList" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -31,14 +33,14 @@ import {
|
||||
exportQualityInspectionBoxBtnExcel,
|
||||
getUserList
|
||||
} from '@/api/base/qualityInspectionBoxPermissions';
|
||||
import basicPage from '../../mixins/basic-page';
|
||||
import basicPage from './basic-page';
|
||||
import moment from 'moment';
|
||||
import addOrUpdate from './dialogForm.vue';
|
||||
|
||||
import ProcessBomList from './ProcessBomList.vue';
|
||||
export default {
|
||||
name: 'QualityInspectionBoxBtn',
|
||||
mixins: [basicPage],
|
||||
components: { addOrUpdate },
|
||||
components: { addOrUpdate, ProcessBomList },
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
@ -99,15 +101,15 @@ export default {
|
||||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
// },
|
||||
{
|
||||
prop: 'productionLineName',
|
||||
prop: 'userName',
|
||||
label: '用户名',
|
||||
},
|
||||
{
|
||||
prop: 'sectionName',
|
||||
prop: 'nickName',
|
||||
label: '用户昵称',
|
||||
},
|
||||
{
|
||||
prop: 'inspectionInfoList',
|
||||
prop: 'datas',
|
||||
label: '产线及工段',
|
||||
}
|
||||
],
|
||||
@ -134,31 +136,36 @@ export default {
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.getDict()
|
||||
this.getDict()
|
||||
},
|
||||
methods: {
|
||||
// getDict() {
|
||||
// // getUserList({
|
||||
// // pageNo: 1,
|
||||
// // pageSize:999
|
||||
// // }).then((res) => {
|
||||
// // this.searchBarFormConfig[0].selectOptions = res.data
|
||||
// // })
|
||||
// },
|
||||
getDict() {
|
||||
getUserList({
|
||||
pageNo: 1,
|
||||
pageSize:999
|
||||
}).then((res) => {
|
||||
this.searchBarFormConfig[0].selectOptions = res.data.map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
name:item.username
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
getDataList() {
|
||||
this.dataListLoading = true;
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(response => {
|
||||
this.tableData = response.data.map((item) => {
|
||||
// console.log(item);
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(res => {
|
||||
this.tableData = res.data.list.map((item) => {
|
||||
return {
|
||||
inspectionInfoList: item.inspectionInfoList.toString(),
|
||||
productionLineId:item.productionLineId,
|
||||
productionLineName:item.productionLineName,
|
||||
sectionId: item.sectionId,
|
||||
sectionName: item.sectionName
|
||||
// datas: item.strList.toString(),
|
||||
nickName: item.nickName,
|
||||
userName: item.userName,
|
||||
// sectionId: item.sectionId,
|
||||
// sectionName: item.sectionName
|
||||
}
|
||||
})
|
||||
this.listQuery.total = response.data.total;
|
||||
console.log(this.tableData);
|
||||
this.listQuery.total = res.data.total;
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
@ -175,13 +182,14 @@ export default {
|
||||
this.resetForm('form');
|
||||
},
|
||||
deleteHandle(id, name, index, data) {
|
||||
this.$confirm(`确认要删除产线名为${data.productionLineName}的数据项?`, "提示", {
|
||||
// console.log(data)
|
||||
this.$confirm(`确认要删除产线名为${data.userName}的数据项?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
this.urlOptions.deleteURL(id).then(({ data }) => {
|
||||
this.urlOptions.deleteURL(data.userId).then(({ data }) => {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
@ -204,11 +212,11 @@ export default {
|
||||
this.getDataList()
|
||||
break;
|
||||
case 'add':
|
||||
this.addOrEditTitle = '新增';
|
||||
this.addOrUpdateVisible = true;
|
||||
// this.addOrEditTitle = '新增';
|
||||
// this.addOrUpdateVisible = true;
|
||||
// this.addOrUpdateVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init();
|
||||
this.$refs.addOrUpdate.handleAddEquipment();
|
||||
});
|
||||
break;
|
||||
case 'export':
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2022-08-24 11:19:43
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2023-12-14 09:36:05
|
||||
* @LastEditTime: 2024-01-30 18:00:53
|
||||
* @Description:
|
||||
*/
|
||||
export default {
|
||||
@ -92,7 +92,7 @@ export default {
|
||||
this.$refs.addOrUpdate.init(val.data);
|
||||
});
|
||||
} else if (val.type === "delete") {
|
||||
this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex)
|
||||
this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex,val.data)
|
||||
} else if (val.type === "change") {
|
||||
this.changeStatus(val.data.id)
|
||||
} else {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user