修改
This commit is contained in:
17630416519
parent
b5a577ab99
commit
b9107c2d14
@ -27,7 +27,7 @@
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<div class="table-container">
|
||||
<div class="table-container" ref="tableContainerRef">
|
||||
<el-table :data="dataList" v-loading="loading" ref="table" border header-cell-class-name="el-table-header-cell"
|
||||
highlight-current-row @sort-change="sortChange">
|
||||
<el-table-column type="index" width="70" label="序号" align="center" />
|
||||
@ -40,34 +40,7 @@
|
||||
<el-table-column prop="lineName" label="产线名称" align="center" :show-overflow-tooltip="true"
|
||||
v-if="columns.showColumn('lineName')">
|
||||
<template #default="scope">
|
||||
<el-tooltip placement="bottom" :width="880" :visible="activeLineId === scope.row.lineId"
|
||||
popper-class="custom-process-tooltip">
|
||||
<div class="process-box" v-if="processMap[scope.row.lineId] && processMap[scope.row.lineId].length">
|
||||
<!-- <template v-for="(item, index) in processMap[scope.row.lineId]" :key="index">
|
||||
<div class="process-item green">
|
||||
<span class="process-code">{{ item.workstationCode }}</span>
|
||||
<span class="process-name">{{ item.workstationName }}</span>
|
||||
</div>
|
||||
<div class="arrow" v-if="index < processMap[scope.row.lineId].length - 1">→</div>
|
||||
</template> -->
|
||||
</div>
|
||||
<!-- <div class="process-box empty-box" v-else>
|
||||
<span>暂无工作站数据</span>
|
||||
</div> -->
|
||||
<template #content>
|
||||
<div class="tooltip-content" style="display: flex;">
|
||||
<template v-for="(item, index) in processMap[scope.row.lineId]" :key="index">
|
||||
<div class="process-item green">
|
||||
<span class="process-code">{{ item.workstationCode }}</span>
|
||||
<span class="process-name">{{ item.workstationName }}</span>
|
||||
</div>
|
||||
<div class="arrow" v-if="index < processMap[scope.row.lineId].length - 1">→</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-tooltip>
|
||||
|
||||
<span class="line-name-click" @click="handleLineClick(scope.row)" :data-id="scope.row.lineId">
|
||||
<span class="line-name-click" @click.stop="handleLineClick(scope.row)" :data-id="scope.row.lineId">
|
||||
{{ scope.row.lineName }}
|
||||
</span>
|
||||
</template>
|
||||
@ -89,6 +62,28 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- ✅ 核心修改：独立出来的 表格居中弹窗 (和工艺路线页面一致) -->
|
||||
<el-tooltip placement="bottom" :width="880" :visible="activeLineId !== ''" popper-class="custom-process-tooltip"
|
||||
trigger="manual" append-to-body="false">
|
||||
<template #content>
|
||||
<div class="process-box" v-if="activeLineId && processMap[activeLineId] && processMap[activeLineId].length">
|
||||
<template v-for="(item, index) in processMap[activeLineId]" :key="index">
|
||||
<div class="process-item green">
|
||||
<span class="process-code">{{ item.workstationCode }}</span>
|
||||
<span class="process-name">{{ item.workstationName }}</span>
|
||||
</div>
|
||||
<div class="arrow" v-if="index < processMap[activeLineId].length - 1">→</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="process-box empty-box" v-else>
|
||||
<span>暂无工作站数据</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #reference>
|
||||
<span></span>
|
||||
</template>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
@ -144,6 +139,7 @@
|
||||
</template>
|
||||
|
||||
<script setup name="plantproductlinebody">
|
||||
import { ref, reactive, toRefs, getCurrentInstance, onMounted, onUnmounted } from 'vue'
|
||||
import {
|
||||
listPlantProductlinebody,
|
||||
addPlantProductlinebody, delPlantProductlinebody,
|
||||
@ -162,6 +158,7 @@ const workshopSelect = ref([])
|
||||
const activeLineId = ref('')
|
||||
const processMap = ref({})
|
||||
const requestLock = ref({})
|
||||
const tableContainerRef = ref(null)
|
||||
|
||||
const queryParams = reactive({
|
||||
pageNum: 1,
|
||||
@ -190,7 +187,7 @@ const queryRef = ref()
|
||||
function handleLineClick(row) {
|
||||
const lineId = row.lineId
|
||||
|
||||
// 如果再次点击同一个产线，关闭tooltip
|
||||
// 如果再次点击同一个产线，关闭弹窗
|
||||
if (activeLineId.value === lineId) {
|
||||
activeLineId.value = ''
|
||||
return
|
||||
@ -402,22 +399,28 @@ function handleDelete(row) {
|
||||
})
|
||||
}
|
||||
|
||||
// 页面挂载时添加事件监听
|
||||
|
||||
const handleDocumentClick = (e) => {
|
||||
if (!e.target.classList.contains('line-name-click') && !e.target.closest('.custom-process-tooltip')) {
|
||||
activeLineId.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
// 点击页面其他地方关闭tooltip
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.classList.contains('line-name-click')) {
|
||||
activeLineId.value = ''
|
||||
}
|
||||
})
|
||||
document.addEventListener('click', handleDocumentClick)
|
||||
handleQuery()
|
||||
})
|
||||
|
||||
handleQuery()
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleDocumentClick)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-container {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 220px);
|
||||
}
|
||||
|
||||
.line-name-click {
|
||||
@ -508,11 +511,17 @@ handleQuery()
|
||||
|
||||
<style>
|
||||
.custom-process-tooltip {
|
||||
position: absolute !important;
|
||||
left: 50% !important;
|
||||
top: 50% !important;
|
||||
transform: translate(-50%, -200%) !important;
|
||||
margin: 0 !important;
|
||||
min-width: 880px !important;
|
||||
padding: 12px 15px !important;
|
||||
background-color: #fff !important;
|
||||
border: solid 1px #fff !important;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1) !important;
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
.custom-process-tooltip .el-tooltip__content {
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<div class="table-container">
|
||||
<div class="table-container" ref="tableContainerRef">
|
||||
<el-table :data="dataList" v-loading="loading" ref="table" border header-cell-class-name="el-table-header-cell"
|
||||
highlight-current-row @sort-change="sortChange" @row-click="handleRowClick" :row-class-name="tableRowClassName">
|
||||
<el-table-column type="index" width="70" label="序号" align="center" />
|
||||
@ -44,31 +44,12 @@
|
||||
<span class="route-name-click" @click.stop="handleRouteClick(scope.row)" :data-id="scope.row.routingCode">
|
||||
{{ scope.row.routingName }}
|
||||
</span>
|
||||
<el-popover :visible="activeRouteId === scope.row.routingCode" placement="bottom" :width="880"
|
||||
popper-class="custom-process-popover" trigger="manual">
|
||||
<div class="process-box"
|
||||
v-if="processMap[scope.row.routingCode] && processMap[scope.row.routingCode].length">
|
||||
<template v-for="(item, index) in processMap[scope.row.routingCode]" :key="index">
|
||||
<div class="process-item" :class="item.colorType">
|
||||
<span class="process-code">{{ item.operationCode }}</span>
|
||||
<span class="process-name">{{ item.operationName }}</span>
|
||||
</div>
|
||||
<div class="arrow" v-if="index < processMap[scope.row.routingCode].length - 1">→</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="process-box empty-box" v-else>
|
||||
<span>暂无工序数据</span>
|
||||
</div>
|
||||
<template #reference>
|
||||
<span></span>
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="routingCode" label="工艺路线编号" align="center" :show-overflow-tooltip="true"
|
||||
v-if="columns.showColumn('routingCode')" />
|
||||
<el-table-column prop="version" label="版本号" align="center" v-if="columns.showColumn('version')">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="描述" align="center" :show-overflow-tooltip="true"
|
||||
v-if="columns.showColumn('description')" />
|
||||
@ -97,6 +78,24 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-popover :visible="activeRouteId !== ''" width="880" popper-class="custom-process-popover" trigger="manual"
|
||||
append-to-body="false">
|
||||
<div class="process-box" v-if="currentProcessList && currentProcessList.length">
|
||||
<template v-for="(item, index) in currentProcessList" :key="index">
|
||||
<div class="process-item" :class="item.colorType">
|
||||
<span class="process-code">{{ item.operationCode }}</span>
|
||||
<span class="process-name">{{ item.operationName }}</span>
|
||||
</div>
|
||||
<div class="arrow" v-if="index < currentProcessList.length - 1">→</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="process-box empty-box" v-else>
|
||||
<span>暂无工序数据</span>
|
||||
</div>
|
||||
<template #reference>
|
||||
<span></span>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
|
||||
@ -105,7 +104,6 @@
|
||||
<el-dialog :title="title" :lock-scroll="false" v-model="open" width="800">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
|
||||
<el-col :lg="24">
|
||||
<el-form-item label="产品查询" prop="name">
|
||||
<el-select v-model="queryProduct" @change="handleProductCode" multiple filterable remote reserve-keyword
|
||||
@ -114,19 +112,16 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="产成品编号" prop="fkProductMaterialCode">
|
||||
<el-input v-model="form.fkProductMaterialCode" placeholder="请输入产成品编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="产品名称" prop="productMaterialName">
|
||||
<el-input v-model="form.productMaterialName" placeholder="请输入产品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="工艺路线编号" prop="routingCode">
|
||||
<el-input v-model="form.routingCode" placeholder="请输入工艺路线编号" :disabled="opertype != 1" />
|
||||
@ -142,7 +137,6 @@
|
||||
<el-input v-model.number="form.version" placeholder="请输入版本号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择状态" clearable>
|
||||
@ -184,6 +178,10 @@ const activeRouteId = ref('')
|
||||
const processMap = ref({})
|
||||
const requestLock = ref({})
|
||||
const optionsQuery = ref([])
|
||||
const currentProcessList = ref([])
|
||||
const tableContainerRef = ref(null)
|
||||
const routeRefs = ref({})
|
||||
|
||||
const queryParams = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
@ -221,7 +219,6 @@ const total = ref(0)
|
||||
const dataList = ref([])
|
||||
const queryRef = ref()
|
||||
|
||||
// 表格行类名函数 - 用于根据版本号设置行颜色
|
||||
const tableRowClassName = ({ row, rowIndex }) => {
|
||||
if (row.version == 1 || row.version == '1') {
|
||||
return 'success-row'
|
||||
@ -233,25 +230,37 @@ const handleRouteClick = async (row) => {
|
||||
const routingId = row.routingCode
|
||||
if (activeRouteId.value === routingId) {
|
||||
activeRouteId.value = ''
|
||||
currentProcessList.value = []
|
||||
return
|
||||
}
|
||||
if (requestLock.value[routingId]) return
|
||||
requestLock.value[routingId] = true
|
||||
|
||||
if (processMap.value[routingId]) {
|
||||
currentProcessList.value = processMap.value[routingId]
|
||||
activeRouteId.value = routingId
|
||||
requestLock.value[routingId] = false
|
||||
return
|
||||
}
|
||||
|
||||
const res = await getProcessRoutingOperation(routingId)
|
||||
requestLock.value[routingId] = false
|
||||
if (res.code === 200 && res.data) {
|
||||
processMap.value[routingId] = res.data.map(item => ({
|
||||
const formatData = res.data.map(item => ({
|
||||
operationCode: item.operationCode,
|
||||
operationName: item.operationName,
|
||||
colorType: item.colorType || 'green'
|
||||
}))
|
||||
processMap.value[routingId] = formatData
|
||||
currentProcessList.value = formatData
|
||||
activeRouteId.value = routingId
|
||||
}
|
||||
requestLock.value[routingId] = false
|
||||
activeRouteId.value = routingId
|
||||
}
|
||||
|
||||
const handleDocumentClick = (e) => {
|
||||
if (!e.target.classList.contains('route-name-click') && !e.target.closest('.el-popover')) {
|
||||
if (!e.target.classList.contains('route-name-click') && !e.target.closest('.custom-process-popover')) {
|
||||
activeRouteId.value = ''
|
||||
currentProcessList.value = []
|
||||
}
|
||||
}
|
||||
|
||||
@ -275,8 +284,8 @@ function getList() {
|
||||
if (code == 200) {
|
||||
dataList.value = data.result
|
||||
total.value = data.totalNum
|
||||
loading.value = false
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
@ -345,7 +354,7 @@ function reset() {
|
||||
updatedTime: null,
|
||||
};
|
||||
proxy.resetForm("formRef")
|
||||
queryProduct.value = []; // 清空选择的产品
|
||||
queryProduct.value = [];
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
@ -365,7 +374,6 @@ function handleUpdate(row) {
|
||||
title.value = '修改工艺路线'
|
||||
opertype.value = 2
|
||||
form.value = { ...data }
|
||||
// 如果有产品编号，设置到查询选择框中
|
||||
if (form.value.fkProductMaterialCode) {
|
||||
queryProduct.value = [form.value.fkProductMaterialCode];
|
||||
}
|
||||
@ -378,7 +386,6 @@ function remoteMethod(val) {
|
||||
loading.value = true;
|
||||
getProcessRoutingOperationMaterialName({ materialCode: val }).then(res => {
|
||||
if (res.code == 200) {
|
||||
console.log(res, '远程搜索物料');
|
||||
optionsQuery.value = res.data.map(item => {
|
||||
return {
|
||||
value: item.code,
|
||||
@ -398,25 +405,17 @@ function remoteMethod(val) {
|
||||
function submitForm() {
|
||||
proxy.$refs["formRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (form.value.routingId != undefined && opertype.value === 2) {
|
||||
updateProcessRouting(form.value).then((res) => {
|
||||
proxy.$modal.msgSuccess("修改成功")
|
||||
open.value = false
|
||||
getList()
|
||||
})
|
||||
} else {
|
||||
addProcessRouting(form.value).then((res) => {
|
||||
proxy.$modal.msgSuccess("新增成功")
|
||||
open.value = false
|
||||
getList()
|
||||
})
|
||||
}
|
||||
const submitApi = form.value.routingId && opertype.value === 2 ? updateProcessRouting : addProcessRouting
|
||||
submitApi(form.value).then((res) => {
|
||||
proxy.$modal.msgSuccess(opertype.value === 2 ? "修改成功" : "新增成功")
|
||||
open.value = false
|
||||
getList()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
console.log(row);
|
||||
const Ids = row.routingId || ids.value
|
||||
proxy.$confirm('是否确认删除工艺路线名称为"' + row.routingName + '"的数据项？')
|
||||
.then(function () {
|
||||
@ -434,8 +433,10 @@ function handleDelete(row) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ✅ 核心修改：表格容器开启相对定位，作为弹框的定位父级 */
|
||||
.table-container {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 220px);
|
||||
}
|
||||
|
||||
.route-name-click {
|
||||
@ -525,8 +526,14 @@ function handleDelete(row) {
|
||||
|
||||
<style>
|
||||
.custom-process-popover {
|
||||
position: absolute !important;
|
||||
left: 50% !important;
|
||||
top: 50% !important;
|
||||
transform: translate(-50%, -100%) !important;
|
||||
margin: 0 !important;
|
||||
min-width: 880px !important;
|
||||
padding: 12px 15px !important;
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
.custom-process-popover .el-popover__content {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user