10 changed files with 349 additions and 17 deletions
@ -0,0 +1,318 @@ |
|||
<template> |
|||
<Dialog |
|||
:title="dialogTitle" |
|||
v-model="dialogVisible" |
|||
:width="dialogWidth" |
|||
:close-on-click-modal="false" |
|||
:vLoading="formLoading" |
|||
> |
|||
<ContentWrap> |
|||
<Descriptions |
|||
:data="detailData" |
|||
labelClassName="label-class-name" |
|||
label-align="left" |
|||
direction="vertical" |
|||
:column="8" |
|||
:schema="allSchemas.detailSchema" |
|||
:columns="2" |
|||
width="200px" |
|||
/> |
|||
</ContentWrap> |
|||
<ContentWrap> |
|||
<el-container> |
|||
<el-aside width="320px"> |
|||
<el-card> |
|||
<template #header> |
|||
<div class="card-header"> |
|||
<span>工艺路线</span> |
|||
</div> |
|||
</template> |
|||
<el-table :data="processData" ref="tableProcess" style="width: 100%; height: 80%" > |
|||
<el-table-column prop="code" label="工序编码" /> |
|||
<el-table-column prop="name" label="工序名称" /> |
|||
</el-table> |
|||
</el-card> |
|||
</el-aside> |
|||
<el-main style="height: 480px; width: calc(100% - 980px);padding: 0px; margin:0px 20px"> |
|||
<div ref="graphContainer"></div |
|||
></el-main> |
|||
<el-aside width="640px"> |
|||
<el-tag>工序编码：{{currentNode.id}} -工序名称:{{currentNode.name }}</el-tag> |
|||
<el-tabs v-model="activeName" > |
|||
<el-tab-pane label="工序工位" name="workstation"> |
|||
<el-table :data="workstationData" ref="tableWorkstations" style="width: 100%; height: 80%"> |
|||
<el-table-column prop="stationName" label="工位名称" /> |
|||
<el-table-column prop="processCode" label="工序编码" /> |
|||
</el-table> |
|||
|
|||
</el-tab-pane> |
|||
<el-tab-pane label="工序物料" name="materials"> |
|||
<el-table :data="showMaterialsData" ref="tableMaterials" style="width: 100%; height: 80%"> |
|||
<el-table-column prop="repMaterialCode" label="物料编码" /> |
|||
<el-table-column prop="repMaterialCounts" label="物料数量" /> |
|||
<el-table-column prop="repMaterialModel" label="物料单位" /> |
|||
<el-table-column prop="sourceMaterialCounts" label="需求物料数"> |
|||
<template #default="scope">{{ getTotalcounts(scope.row.repMaterialCounts) }}</template> |
|||
</el-table-column> |
|||
<el-table-column prop="replaceFlag" label="是否替换" > |
|||
<template #default="scope"> |
|||
<el-switch disabled |
|||
v-model="scope.row.replaceFlag" |
|||
active-color="#13ce66" |
|||
inactive-color="#ff4949" |
|||
active-text="是" |
|||
inactive-text="否" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
small |
|||
hide-on-single-page="true" |
|||
layout="prev, pager, next" |
|||
:total="page.total" |
|||
:page-size="page.size" |
|||
:current-page="page.current" |
|||
@current-change="handleCurrentChangeM" |
|||
@prev-click="handlePrevClickM" |
|||
@next-click="handleNextClickM" |
|||
/> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="工序人员" name="workers"> |
|||
|
|||
<el-table :data="workerData" ref="tableWorker" style="width: 100%; height: 233px;overflow: auto;"> |
|||
<el-table-column prop="groupName" label="所属班组" /> |
|||
<el-table-column prop="workerMonitor" label="班长" /> |
|||
<el-table-column prop="workerCode" label="人员编码" /> |
|||
<el-table-column prop="workerName" label="人员昵称" /> |
|||
</el-table> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="工序设备" name="equipments"> |
|||
<el-table :data="equipmentData" ref="tableEquipment" style="width: 100%; height: 80%"> |
|||
<el-table-column prop="equipmentCode" label="设备编码" /> |
|||
<el-table-column prop="equipmentName" label="设备名称" /> |
|||
<el-table-column prop="equipmentType" label="设备类型" /> |
|||
<el-table-column prop="equipmentWorkstation" label="关联工位" /> |
|||
</el-table> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</el-aside> |
|||
</el-container> |
|||
</ContentWrap> |
|||
<template #footer> |
|||
<el-button @click="handleClose" >关闭</el-button> |
|||
</template> |
|||
|
|||
</Dialog> |
|||
|
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
|
|||
import { |
|||
start_node, |
|||
end_node, |
|||
createGraph, |
|||
getNewNode |
|||
} from '@/views/mes/processroute/components/graphbase.data' |
|||
import * as orderDayconfigApi from '@/api/mes/orderDayConfig' |
|||
import * as OrderDayApi from '@/api/mes/orderDay' |
|||
import {ProcessSearch} from '../../publicUtil/processSearch.data' |
|||
import * as ProcessApi from '@/api/wms/process' |
|||
import { Graph } from '@antv/x6' |
|||
import * as TeamApi from '@/api/wms/team' |
|||
import {searchUser} from "@/views/wms/basicDataManage/orderManage/team/team.data"; |
|||
import {DeviceInfo, OrderDay} from "@/views/mes/orderDay/orderDay.data"; |
|||
const graphContainer = ref<HTMLElement | null>(null) |
|||
const graph = ref<Graph>() |
|||
const message = useMessage() // 消息弹窗 |
|||
const { t } = useI18n() // 国际化 |
|||
const activeName = ref('workstation') |
|||
const formLoading = ref(false) |
|||
const dialogFormVisibleUser = ref(false) |
|||
const processData = ref([]) |
|||
const processCode = ref('') |
|||
//const isPublish=ref(false) |
|||
const queryParams:orderDayconfigApi.OrderDayQueryParamVo=ref() |
|||
const props = defineProps({ |
|||
// 查询弹窗是否显示筛选按钮 |
|||
isSearchFilterButtonHide: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 显示窗口宽度设置 |
|||
basicFormWidth: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
|
|||
allSchemas: { |
|||
type: Object, |
|||
required: true, |
|||
default: null |
|||
} |
|||
}) |
|||
const workerData=ref([]) |
|||
const detailData = ref(props.allSchemas) |
|||
const route = useRoute() // 路由信息 |
|||
const routeName = ref() |
|||
routeName.value = route.name |
|||
routeName.value = routeName.value.substring(0, routeName.value.length - 4) + 'Detail' |
|||
//const updateKey = ref(0) |
|||
const dialogWidth = ref() |
|||
const materialsData = ref() |
|||
const equipmentData=ref([]) |
|||
const workstationData=ref([]) |
|||
const dialogVisible = ref(false) // 弹窗的是否展示 |
|||
const dialogTitle = ref('') // 弹窗的标题 |
|||
const graphJson =ref() |
|||
const currentNode = ref({ |
|||
name:'', |
|||
id:'' |
|||
}) |
|||
const showMaterialsData=ref() //物料信息分页展示 |
|||
const page=ref({ |
|||
total:0, |
|||
current:1, |
|||
size:7 |
|||
}) |
|||
|
|||
/** 打开弹窗 */ |
|||
const open = ( row?: any, titleName?: any) => { |
|||
//console.log("scheduleDetail-182",row) |
|||
currentNode.value.name='' |
|||
currentNode.value.id='' |
|||
workerData.value=[] |
|||
equipmentData.value = [] |
|||
materialsData.value = [] |
|||
showMaterialsData.value=[] |
|||
page.value.total = 0 |
|||
page.value.current = 1 |
|||
workstationData.value = [] |
|||
dialogVisible.value = true |
|||
detailData.value = row |
|||
dialogWidth.value = props.basicFormWidth + '%' |
|||
queryParams.planNoDay=row.planNoDay |
|||
queryParams.productCode=row.productCode |
|||
queryParams.workroomCode=row.workroomCode |
|||
queryParams.lineCode=row.lineCode |
|||
queryParams.processrouteCode=row.processrouteCode |
|||
queryParams.batchCode=row.batchCode |
|||
//获取配置的 |
|||
if (titleName) { |
|||
dialogTitle.value = titleName |
|||
} else { |
|||
dialogTitle.value = type |
|||
} |
|||
nextTick?.(() => { |
|||
graph.value = createGraph(graphContainer.value as HTMLElement, true, 240, 320) |
|||
graph.value.on('node:click', ({ e, x, y, node, view }) => { |
|||
nodeClick(e, x, y, node, view) |
|||
}) |
|||
getProcessroute() |
|||
getConfigProcessRouteNode() |
|||
}) |
|||
} |
|||
const getTotalcounts=(a:any)=>{ |
|||
return detailData.value.planCount*a |
|||
} |
|||
|
|||
//获取工序的BOM |
|||
const getProcessBom=async (code:any) => { |
|||
queryParams.processCode=code |
|||
let res = await orderDayconfigApi.getOrderDayBomByOrder(queryParams) |
|||
materialsData.value=res |
|||
if(materialsData.value.length>0){ |
|||
page.value.total = materialsData.value.length |
|||
page.value.current = 1 |
|||
showMaterialsData.value=materialsData.value.slice(0,page.value.size) |
|||
} |
|||
} |
|||
// const currentStartNode = ref({ |
|||
// id:'' |
|||
// }) |
|||
//获取配置的工艺路线信息 |
|||
const getProcessroute = async () => { |
|||
let res = await orderDayconfigApi.getConfigProcessRoute(queryParams) |
|||
graphJson.value=JSON.parse(res.newGraphData) |
|||
graph.value?.fromJSON(graphJson.value.cells) |
|||
//首次打开弹窗，默认打开一个工序的数据 |
|||
//currentStartNode.value = graphJson.value.cells[0] |
|||
currentNode.value = graphJson.value.cells[0] |
|||
// 手动触发点击事件 |
|||
nodeClick('','','',currentNode.value,'') |
|||
|
|||
} |
|||
//获取配置的工序信息 |
|||
const getConfigProcessRouteNode= async () => { |
|||
let res = await orderDayconfigApi.getConfigProcessRouteNode(queryParams) |
|||
processData.value=res |
|||
} |
|||
//获取配置的工序工位 |
|||
const getConfigProcessWorkstation= async (code:any) => { |
|||
queryParams.processCode=code |
|||
workstationData.value = await orderDayconfigApi.getConfigProcessWorkstation(queryParams) |
|||
} |
|||
//获取配置的工序人员 |
|||
const getConfigProcessWorker= async (code:any) => { |
|||
queryParams.processCode=code |
|||
workerData.value = await orderDayconfigApi.getConfigProcessWorker(queryParams) |
|||
} |
|||
//获取配置的工序设备 |
|||
const getConfigProcessEquipment= async (code:any) => { |
|||
queryParams.processCode=code |
|||
equipmentData.value = await orderDayconfigApi.getConfigProcessEquipment(queryParams) |
|||
} |
|||
const nodeClick = (e, x, y, node, view) => { |
|||
//console.log(node.id) |
|||
getProcessBom(node.id) |
|||
getConfigProcessWorkstation(node.id) |
|||
getConfigProcessWorker(node.id) |
|||
getConfigProcessEquipment(node.id) |
|||
processCode.value = node.id |
|||
currentNode.value.id=node.id |
|||
//console.log(node) |
|||
currentNode.value.name=node.attrs.title.text |
|||
} |
|||
|
|||
|
|||
const handleClose=()=>{ |
|||
dialogVisible.value = false, |
|||
emit('close') |
|||
} |
|||
|
|||
|
|||
const handleCurrentChangeM=(value: number)=>{ |
|||
let index=(value-1)*page.value.size |
|||
page.value.current=value |
|||
showMaterialsData.value=materialsData.value.slice(index,index+page.value.size) |
|||
|
|||
} |
|||
const handlePrevClickM=(value: number)=>{ |
|||
page.value.current=value-1 |
|||
if(page.value.current==0) { |
|||
page.value.current=1 |
|||
} |
|||
|
|||
} |
|||
const handleNextClickM=(value: number)=>{ |
|||
page.value.current=value+1 |
|||
if(page.value.current>page.value.total/page.value.size) { |
|||
page.value.current=page.value.total/page.value.size -1 |
|||
} |
|||
} |
|||
defineOptions({ name: 'SechledDetail' }) |
|||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
|||
// 传递给父类 |
|||
const emit = defineEmits([ |
|||
'close' |
|||
]) |
|||
</script> |
|||
<style lang="scss"> |
|||
.el-drawer__body { |
|||
background: #f5f5f5 !important; |
|||
} |
|||
::v-deep(.label-class-name) { |
|||
color: #dedede; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue