7 changed files with 1144 additions and 8 deletions
@ -0,0 +1,97 @@ |
|||||
|
import request from '@/config/axios' |
||||
|
|
||||
|
export interface ProcessrouteVO { |
||||
|
deleteTime: Date |
||||
|
id: number |
||||
|
status: string |
||||
|
concurrencyStamp: number |
||||
|
remark: string |
||||
|
deleter: string |
||||
|
processrouteCode: string |
||||
|
processName: string |
||||
|
productCode: string |
||||
|
routeVersion: number |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
// 查询工艺路线定义列表
|
||||
|
export const getProcessroutePage = async (params) => { |
||||
|
if (params.isSearch) { |
||||
|
delete params.isSearch |
||||
|
const data = {...params} |
||||
|
return await request.post({ url: '/mes/processroute/senior', data }) |
||||
|
} else { |
||||
|
return await request.get({ url: `/mes/processroute/page`, params }) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 查询工艺路线定义详情
|
||||
|
export const getProcessroute = async (id: number) => { |
||||
|
return await request.get({ url: `/mes/processroute/get?id=` + id }) |
||||
|
} |
||||
|
|
||||
|
// 新增工艺路线定义
|
||||
|
export const createProcessroute = async (data: ProcessrouteVO) => { |
||||
|
return await request.post({ url: `/mes/processroute/create`, data }) |
||||
|
} |
||||
|
//提交图形数据
|
||||
|
// 新增工艺路线定义
|
||||
|
export const saveGraphData = async (data: any) => { |
||||
|
return await request.post({ url: `/mes/processroute/updategraph`, data }) |
||||
|
} |
||||
|
// 修改工艺路线定义
|
||||
|
export const updateProcessroute = async (data: ProcessrouteVO) => { |
||||
|
return await request.put({ url: `/mes/processroute/update`, data }) |
||||
|
} |
||||
|
|
||||
|
// 删除工艺路线定义
|
||||
|
export const deleteProcessroute = async (id: number) => { |
||||
|
return await request.delete({ url: `/mes/processroute/delete?id=` + id }) |
||||
|
} |
||||
|
|
||||
|
// 导出工艺路线定义 Excel
|
||||
|
export const exportProcessroute = async (params) => { |
||||
|
return await request.download({ url: `/mes/processroute/export-excel`, params }) |
||||
|
} |
||||
|
|
||||
|
// 下载用户导入模板
|
||||
|
export const importTemplate = () => { |
||||
|
return request.download({ url: '/mes/processroute/get-import-template' }) |
||||
|
} |
||||
|
// 获取工序工序列表-
|
||||
|
export const getProcessList =async (params) => { |
||||
|
return request.get({ url: `/wms/process/page`,params }) |
||||
|
} |
||||
|
// 获取工序工序信息-
|
||||
|
export const getProcesInfo = async(code:String) => { |
||||
|
return request.get({ url: `/wms/process/getByCode?code=`,code }) |
||||
|
} |
||||
|
// 获取产品信息列表-
|
||||
|
export const getProductInfo =async (code:String) => { |
||||
|
return request.get({ url: `/wms/itembasic/getProduct?code=`+code}) |
||||
|
} |
||||
|
|
||||
|
// 获取设备列表-参数为工序编码
|
||||
|
export const getDeviceList =async (code:String) => { |
||||
|
//return request.get({ url: `/wms/itembasic/getProduct?code=`+code})
|
||||
|
return {code:0,data:[{name:"冲压设备1",code:"CY0001"},{name:"冲压设备2",code:"CY0002"}]} |
||||
|
} |
||||
|
// 获取工作人员信息--参数为工序编码
|
||||
|
export const getWorkerList =async (code:String) => { |
||||
|
// return request.get({ url: `/wms/itembasic/getProduct?code=`+code})
|
||||
|
return {code:0,data:[{name:"张三",code:"冲压1班"},{name:"李四",code:"冲压1班"}]} |
||||
|
} |
||||
|
// 获取工位信息
|
||||
|
export const getWorkStation =async (code:String) => { |
||||
|
//return request.get({ url: `/wms/itembasic/getProduct?code=`+code})
|
||||
|
return {code:0,data:{name:"冲压工位",code:"CYW0001"}} |
||||
|
} |
||||
|
// 获取车间信息列表-
|
||||
|
// export const getWorkInfoList = () => {
|
||||
|
// return request.get({ url: '/wms/workshop?code=',code })
|
||||
|
// }
|
||||
|
// 获取产品信息列表-
|
||||
|
// export const getProductInfo = (code:String) => {
|
||||
|
// return request.get({ url: '/wms/itembasic/getProduct?code=',code })
|
||||
|
// }
|
||||
@ -0,0 +1,326 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-drawer |
||||
|
v-model="isShowDrawer" |
||||
|
title="详情" |
||||
|
direction="rtl" |
||||
|
size="80%" |
||||
|
v-loading="detailLoading" |
||||
|
:on-close="handleDrawerClose()" |
||||
|
> |
||||
|
<template #header> |
||||
|
<div class="font-size-18px"> |
||||
|
<el-row :gutter="10"> |
||||
|
<el-col :span="22"> |
||||
|
{{ titleValueRef }} |
||||
|
<el-tag type="info">[{{ titleNameRef }}]</el-tag> |
||||
|
</el-col> |
||||
|
<el-col :span="2"> |
||||
|
<el-button size="primary" @click="saveResult()" style="width: 100%"> |
||||
|
保存修改 |
||||
|
</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<el-row :gutter="10" style="height: calc(100vh - 300px)"> |
||||
|
<el-col :span="6"> |
||||
|
<!-- <el-form> |
||||
|
<el-form-item label="车间选择"> |
||||
|
<el-select |
||||
|
:v-model="processListParmas.workshopCode" |
||||
|
value-key="code" |
||||
|
placeholder="Select" |
||||
|
style="width: 240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in workshopCodeOptions" |
||||
|
:key="item.code" |
||||
|
:label="item.name" |
||||
|
:value="item" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="产线选择"> |
||||
|
<el-select |
||||
|
:v-model="processListParmas.productionLineCode" |
||||
|
value-key="code" |
||||
|
placeholder="Select" |
||||
|
style="width: 240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in productionLineCodeOptions" |
||||
|
:key="item.code" |
||||
|
:label="item.name" |
||||
|
:value="item" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label=""> |
||||
|
<el-button type="primary" @click="getProcessList">搜索</el-button> |
||||
|
</el-form-item> |
||||
|
|
||||
|
</el-form> --> |
||||
|
<el-table :data="processData" ref="tableProcess" style="width: 100%; height: 80%"> |
||||
|
<el-table-column prop="name" label="工序名称"> |
||||
|
<template #default="scope"> |
||||
|
<el-button size="mini" text @click="userAddNode(scope.row)" style="width: 100%" |
||||
|
>{{ scope.row.name }}[{{ scope.row.code }}]</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="code" label="工序编码" width="180" v-if="false" /> |
||||
|
</el-table> |
||||
|
</el-col> |
||||
|
<el-col :span="18"><div ref="graphContainer"></div></el-col> |
||||
|
</el-row> |
||||
|
<el-row style="height: 150px" :gutter="5"> |
||||
|
<el-col :span="6"> |
||||
|
<el-card class="footer-card"> |
||||
|
<template #header> |
||||
|
<div class="card-header"> |
||||
|
<span>产品信息</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
<p>产品名称：{{ productData.name }}</p> |
||||
|
<p>产品编码：{{ productData.code }}</p> |
||||
|
<p>产品描述：{{ productData.desc1 }}</p> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="6" |
||||
|
><el-card class="footer-card"> |
||||
|
<template #header> |
||||
|
<div class="card-header"> |
||||
|
<span>设备信息</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
<p v-for="item in deviceList" :key="item" class="text item">{{ item.name }}</p> |
||||
|
</el-card></el-col |
||||
|
> |
||||
|
<el-col :span="6" |
||||
|
><el-card class="footer-card"> |
||||
|
<template #header> |
||||
|
<div class="card-header"> |
||||
|
<span>人员信息</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
<p v-for="item in workerList" :key="item" class="text item">{{ item.name }}</p> |
||||
|
</el-card></el-col |
||||
|
> |
||||
|
<el-col :span="6" |
||||
|
><el-card class="footer-card"> |
||||
|
<template #header> |
||||
|
<div class="card-header"> |
||||
|
<span>工位信息</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
<p>工位编码：{{ workStationData.name }}</p> |
||||
|
<p>工位名称：{{ workStationData.code }}</p> |
||||
|
</el-card></el-col |
||||
|
> |
||||
|
</el-row> |
||||
|
</el-drawer> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { start_node, end_node, createGraph, registerNodes, getNewNode } from './graphbase.data' |
||||
|
import * as ProcessrouteApi from '@/api/mes/processroute' |
||||
|
import { Graph } from '@antv/x6' |
||||
|
import { table } from 'console' |
||||
|
|
||||
|
//import { async } from '@antv/x6/lib/registry/marker/async' |
||||
|
//import { object } from 'vue-types' |
||||
|
const graphContainer = ref<HTMLElement | null>(null) |
||||
|
defineOptions({ name: 'ProcessRouteConfig' }) |
||||
|
const isShowDrawer = ref(false) |
||||
|
const detailLoading = ref(false) |
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
//const { t } = useI18n() // 国际化 |
||||
|
const route = useRoute() // 路由信息 |
||||
|
const routeName = ref() |
||||
|
routeName.value = route.name |
||||
|
routeName.value = routeName.value.substring(0, routeName.value.length - 4) + 'ProcessRouteConfig' |
||||
|
//const updateKey = ref(0) |
||||
|
const titleNameRef = ref() |
||||
|
const titleValueRef = ref() |
||||
|
const processRouteId = ref() |
||||
|
const processData = ref([]) //工序数据 |
||||
|
const tableProcess = ref() |
||||
|
// const workshopCodeOptions = ref([{ code: '', name: '车间1' }]) |
||||
|
// const productionLineCodeOptions = ref([{ code: '', name: '产线' }]) |
||||
|
const productData = ref({ name: '', code: '', desc1: '--' }) //产品数据 |
||||
|
const deviceList = ref([ |
||||
|
{ name: '设备', code: '0000' }, |
||||
|
{ name: '设备', code: '0000' } |
||||
|
]) //设备数据 |
||||
|
const workerList = ref([{ name: '--' }, { name: '--' }]) //人员数据 |
||||
|
const workStationData = ref({ name: '工位', code: '' }) //工位数据 |
||||
|
//初始化图形组件 |
||||
|
const graph = ref<Graph>() |
||||
|
const openDetail = async (rowData: any) => { |
||||
|
rowData.value = rowData |
||||
|
titleNameRef.value = rowData.value.processrouteCode |
||||
|
titleValueRef.value = rowData.value.processName |
||||
|
processRouteId.value = rowData.value.id |
||||
|
let graphJson = JSON.parse(rowData.value.graphJson) |
||||
|
isShowDrawer.value = true |
||||
|
nextTick(() => { |
||||
|
graph.value = createGraph(graphContainer.value as HTMLElement) |
||||
|
graph.value.on('node:click', ({ e, x, y, node, view }) => { |
||||
|
nodeClick(e, x, y, node, view) |
||||
|
}) |
||||
|
graph.value.fromJSON(graphJson.cells) |
||||
|
}) |
||||
|
getItembasicInfo(rowData.value.productCode) |
||||
|
} |
||||
|
//关闭后销毁图形组件 |
||||
|
const handleDrawerClose = () => { |
||||
|
//console.log('close') |
||||
|
if (graph && graph.value != undefined) { |
||||
|
//console.log(graph.value.toJSON()) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
//**获取 工序信息 */ |
||||
|
const getProcessInfo = async (id: number) => { |
||||
|
const res = await ProcessrouteApi.getProcesInfo(id) |
||||
|
return res |
||||
|
} |
||||
|
|
||||
|
/** 获取产品信息 */ |
||||
|
const getItembasicInfo = async (code: String) => { |
||||
|
const res = await ProcessrouteApi.getProductInfo(code) |
||||
|
productData.value = res |
||||
|
//console.log(productData.value) |
||||
|
} |
||||
|
/** 获取设备列表 */ |
||||
|
const getDeviceList = async (code: String) => { |
||||
|
const res = await ProcessrouteApi.getDeviceList(code) |
||||
|
deviceList.value = res.data |
||||
|
//console.log(productData.value) |
||||
|
} |
||||
|
/** 获取工位信息 */ |
||||
|
const getWorkStation = async (code: String) => { |
||||
|
const res = await ProcessrouteApi.getWorkStation(code) |
||||
|
workStationData.value = res.data |
||||
|
//console.log(productData.value) |
||||
|
} |
||||
|
/** 获取人员信息列表 */ |
||||
|
const getWorkerList = async (code: String) => { |
||||
|
const res = await ProcessrouteApi.getWorkerList(code) |
||||
|
workerList.value = res.data |
||||
|
//console.log(productData.value) |
||||
|
} |
||||
|
const processListParmas = ref({ |
||||
|
workshopCode: '', |
||||
|
productionLineCode: '', |
||||
|
pageNum: 1, |
||||
|
pageSize: 50 |
||||
|
}) |
||||
|
/**获取工序列表 */ |
||||
|
const getProcessList = async () => { |
||||
|
const res = await ProcessrouteApi.getProcessList(processListParmas.value) |
||||
|
|
||||
|
processData.value = res.list |
||||
|
|
||||
|
//return res |
||||
|
} |
||||
|
const nodeClick = (e, x, y, node, view) => { |
||||
|
//console.log('nodeClick', e, x, y, node, view) |
||||
|
let data = getProcessInfo(node.id) |
||||
|
getDeviceList(node.id) |
||||
|
getWorkerList(node.id) |
||||
|
getWorkStation(node.id) |
||||
|
message.info(data.toString()) |
||||
|
} |
||||
|
|
||||
|
//添加节点 |
||||
|
const userAddNode = (row) => { |
||||
|
if (graph && graph.value != undefined) { |
||||
|
let node_template = getNewNode(row.code, row.name, row.code) |
||||
|
node_template.x = end_node.value.x - 100 |
||||
|
node_template.y = end_node.value.y + 100 |
||||
|
let noden = graph.value.addNode(node_template) |
||||
|
if (graph.value.getNodes().length == 1) { |
||||
|
let start = graph.value.addNode(start_node.value) |
||||
|
let end = graph.value.addNode(end_node.value) |
||||
|
graph.value.addEdge({ |
||||
|
id: 'startEdge', |
||||
|
source: start.id, // 源节点 ID |
||||
|
target: noden.id |
||||
|
// tools: [ |
||||
|
// { |
||||
|
// name: 'button-remove', |
||||
|
// args: { distance: -40 }, |
||||
|
// }, |
||||
|
// ] |
||||
|
}) |
||||
|
graph.value.addEdge({ |
||||
|
id: 'endEdge', |
||||
|
source: noden.id, // 源节点 ID |
||||
|
target: end.id |
||||
|
// tools: [ |
||||
|
// { |
||||
|
// name: 'button-remove', |
||||
|
// args: { distance: -40 }, |
||||
|
// }, |
||||
|
// ] |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
//------- |
||||
|
defineExpose({ openDetail, createGraph }) // 提供 open 方法，用于打开弹窗 |
||||
|
onMounted(() => { |
||||
|
registerNodes() |
||||
|
|
||||
|
getProcessList() |
||||
|
}) |
||||
|
//保存图形 |
||||
|
const saveResult = async () => { |
||||
|
if (graph.value == undefined) { |
||||
|
message.info('未设置任何的流程图信息，不能保存！') |
||||
|
return |
||||
|
} |
||||
|
if (graph.value.getNodes().length < 3) { |
||||
|
message.info('除了开始结束节点外至少需要设置一个节点！') |
||||
|
return |
||||
|
} |
||||
|
let gdata = { |
||||
|
processrouteCode: titleNameRef.value, |
||||
|
graphJson: graph.value.toJSON(), |
||||
|
processrouteId: processRouteId.value |
||||
|
} |
||||
|
|
||||
|
let res = ProcessrouteApi.saveGraphData(gdata) |
||||
|
if (res) { |
||||
|
message.success('保存成功！') |
||||
|
} else { |
||||
|
message.error('保存失败！') |
||||
|
} |
||||
|
isShowDrawer.value = false |
||||
|
handleDrawerClose() |
||||
|
emit('close') |
||||
|
//return res |
||||
|
} |
||||
|
// 验证图形 |
||||
|
onUnmounted(() => {}) |
||||
|
const emit = defineEmits([ |
||||
|
'close', |
||||
|
]) |
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
.el-drawer__body { |
||||
|
background: #f5f5f5 !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep(.label-class-name) { |
||||
|
color: #dedede; |
||||
|
} |
||||
|
.footer-card { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
|
<style scoped lang="scss"></style> |
||||
@ -0,0 +1,290 @@ |
|||||
|
import { Graph, Node, Path, Cell } from '@antv/x6' |
||||
|
//工艺节点的定义
|
||||
|
export const process_node = ref({ |
||||
|
width: 120, |
||||
|
height: 40, |
||||
|
attrs: { |
||||
|
body: { |
||||
|
stroke: '#5F95FF', |
||||
|
strokeWidth: 1, |
||||
|
fill: 'rgba(255,255,255,0.8)', |
||||
|
refWidth: 1, |
||||
|
refHeight: 1 |
||||
|
}, |
||||
|
// image: {
|
||||
|
// 'xlink:href':
|
||||
|
// 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
|
||||
|
// width: 16,
|
||||
|
// height: 16,
|
||||
|
// x: 12,
|
||||
|
// y: 12,
|
||||
|
// },
|
||||
|
title: { |
||||
|
text: 'Node', |
||||
|
refX: 5, |
||||
|
refY: 5, |
||||
|
fill: 'rgba(0,0,0,0.85)', |
||||
|
fontSize: 12, |
||||
|
'text-anchor': 'start' |
||||
|
}, |
||||
|
text: { |
||||
|
text: 'this is content text', |
||||
|
refX: 5, |
||||
|
refY: 25, |
||||
|
fontSize: 12, |
||||
|
fill: 'rgba(0,0,0,0.6)', |
||||
|
'text-anchor': 'start' |
||||
|
} |
||||
|
}, |
||||
|
ports: { |
||||
|
groups: { |
||||
|
in: { |
||||
|
position: 'left', |
||||
|
attrs: { |
||||
|
circle: { |
||||
|
magnet: true, |
||||
|
stroke: '#8f8f8f', |
||||
|
r: 5 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
out: { |
||||
|
position: 'right', |
||||
|
attrs: { |
||||
|
circle: { |
||||
|
magnet: true, |
||||
|
stroke: '#8f8f8f', |
||||
|
r: 5 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
tools: [ |
||||
|
{ |
||||
|
name: 'button-remove', |
||||
|
args: { |
||||
|
x: '100%', |
||||
|
y: 0, |
||||
|
offset: { x: -10, y: 10 } |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
markup: [ |
||||
|
{ |
||||
|
tagName: 'rect', |
||||
|
selector: 'body' |
||||
|
}, |
||||
|
// {
|
||||
|
// tagName: 'image',
|
||||
|
// selector: 'image',
|
||||
|
// },
|
||||
|
{ |
||||
|
tagName: 'text', |
||||
|
selector: 'title' |
||||
|
}, |
||||
|
{ |
||||
|
tagName: 'text', |
||||
|
selector: 'text' |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
//--------开始结束节点的定义---------------------
|
||||
|
|
||||
|
export const base_node = ref({ |
||||
|
width: 66, |
||||
|
height: 36, |
||||
|
inherit: 'rect', // 继承于 rect 节点
|
||||
|
attrs: { |
||||
|
body: { |
||||
|
stroke: '#5F95FF', |
||||
|
strokeWidth: 1, |
||||
|
fill: '#EFF4FF', |
||||
|
refWidth: 2, |
||||
|
refHeight: 2 |
||||
|
}, |
||||
|
text: { |
||||
|
fontSize: 12, |
||||
|
fill: '#262626' |
||||
|
} |
||||
|
}, |
||||
|
ports: { |
||||
|
groups: { |
||||
|
in: { |
||||
|
position: 'left', |
||||
|
attrs: { |
||||
|
circle: { |
||||
|
magnet: true, |
||||
|
stroke: '#8f8f8f', |
||||
|
r: 5 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
out: { |
||||
|
position: 'right', |
||||
|
attrs: { |
||||
|
circle: { |
||||
|
magnet: true, |
||||
|
stroke: '#8f8f8f', |
||||
|
r: 5 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
export const start_node = ref({ |
||||
|
id: 'startNode', |
||||
|
label: '开始', |
||||
|
x: 50, |
||||
|
y: 200, |
||||
|
attrs: { |
||||
|
body: { |
||||
|
rx: 20, |
||||
|
ry: 26 |
||||
|
} |
||||
|
}, |
||||
|
shape: 'base-node', |
||||
|
ports: [{ id: 'out', group: 'out' }] |
||||
|
}) |
||||
|
//结束节点的定义
|
||||
|
export const end_node = ref({ |
||||
|
id: 'endNode', |
||||
|
x: 200, |
||||
|
y: 200, |
||||
|
label: '结束', |
||||
|
attrs: { |
||||
|
body: { |
||||
|
rx: 20, |
||||
|
ry: 26 |
||||
|
} |
||||
|
}, |
||||
|
shape: 'base-node', |
||||
|
ports: [{ id: 'in', group: 'in' }] |
||||
|
}) |
||||
|
export const createGraph = (graphContainer: any) => { |
||||
|
const ret = ref<Graph>() |
||||
|
ret.value= new Graph({ |
||||
|
container: graphContainer, |
||||
|
autoResize: true, |
||||
|
background: { color: '#F2F7FA' }, // 创建画布时初始化背景相关配置对象
|
||||
|
grid: { size: 10, visible: true, type: 'mesh' }, //创建画布时，通过配置对象来设置背景网格
|
||||
|
mousewheel: { |
||||
|
enabled: true, |
||||
|
modifiers: 'ctrl', |
||||
|
factor: 1.1, |
||||
|
maxScale: 1.5, |
||||
|
minScale: 0.5 |
||||
|
}, |
||||
|
connecting: { |
||||
|
snap: true, |
||||
|
allowBlank: false, |
||||
|
allowLoop: false, |
||||
|
allowNode: false, |
||||
|
highlight: true, |
||||
|
|
||||
|
createEdge() { |
||||
|
return this.createEdge({ |
||||
|
attrs: { |
||||
|
line: { |
||||
|
stroke: '#8f8f8f', |
||||
|
strokeWidth: 1 |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
validateMagnet({ magnet }) { |
||||
|
return magnet.getAttribute('port-group') !== 'in' |
||||
|
}, |
||||
|
validateConnection({ sourceMagnet, targetMagnet }) { |
||||
|
// 只能从输出链接桩创建连接
|
||||
|
if (!sourceMagnet || sourceMagnet.getAttribute('port-group') === 'in') { |
||||
|
return false |
||||
|
} |
||||
|
// 只能连接到输入链接桩
|
||||
|
if (!targetMagnet || targetMagnet.getAttribute('port-group') !== 'in') { |
||||
|
return false |
||||
|
} |
||||
|
return true |
||||
|
} |
||||
|
}, |
||||
|
panning: { |
||||
|
enabled: true |
||||
|
}, |
||||
|
highlighting: { |
||||
|
// 连接桩可以被连接时在连接桩外围围渲染一个包围框
|
||||
|
magnetAvailable: { |
||||
|
name: 'stroke', |
||||
|
args: { |
||||
|
attrs: { |
||||
|
fill: '#fff', |
||||
|
stroke: '#A4DEB1', |
||||
|
strokeWidth: 4 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
//selecting:{enabled: true, multiple: true,rubberEdge: true,rubberNode: true,modifiers: 'shift',rubberband: true}
|
||||
|
}) |
||||
|
// ret.value.on('node:click', ({ e, x, y, node, view }) => {
|
||||
|
// //nodeClick(e, x, y, node, view)
|
||||
|
// nodeClick(e, x, y, node, view)
|
||||
|
// })
|
||||
|
// ret.value.on('node:removed', ({ node, index, options }) => {
|
||||
|
// nodeRemoved(node, index, options)
|
||||
|
// })
|
||||
|
ret.value.on('edge:mouseenter', ({ cell }) => { |
||||
|
cell.addTools([ |
||||
|
{ |
||||
|
name: 'vertices', |
||||
|
args: { |
||||
|
d: 'M 10 -8 -10 0 10 8 Z', |
||||
|
fill: '#333', |
||||
|
stroke: '#fff', |
||||
|
'stroke-width': 2, |
||||
|
cursor: 'move' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
name: 'button-remove', |
||||
|
args: { distance: 20 } |
||||
|
} |
||||
|
]) |
||||
|
}) |
||||
|
ret.value.on('edge:mouseleave', ({ cell }) => { |
||||
|
cell.removeTools() |
||||
|
}) |
||||
|
return ret.value |
||||
|
} |
||||
|
//注册节点
|
||||
|
export const registerNodes = () => { |
||||
|
//-----图形定制化节点-------------------
|
||||
|
Graph.registerNode('process-node', process_node.value, true) |
||||
|
Graph.registerNode('base-node', base_node.value, true) |
||||
|
} |
||||
|
//获取新的节点
|
||||
|
export const getNewNode = (id: string, title: string, contentText: string) => { |
||||
|
return { |
||||
|
id: id, |
||||
|
width: 120, |
||||
|
height: 40, |
||||
|
x: 100, |
||||
|
y: 100, |
||||
|
attrs: { |
||||
|
title: { |
||||
|
text: title |
||||
|
}, |
||||
|
text: { |
||||
|
text: contentText |
||||
|
} |
||||
|
}, |
||||
|
shape: 'process-node', |
||||
|
ports: [ |
||||
|
{ id: 'in', group: 'in' }, |
||||
|
{ id: 'out', group: 'out' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
@ -0,0 +1,258 @@ |
|||||
|
<template> |
||||
|
<ContentWrap> |
||||
|
<!-- 搜索工作栏 --> |
||||
|
<Search :schema="Processroute.allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" /> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 列表头部 --> |
||||
|
<TableHead |
||||
|
:HeadButttondata="HeadButttondata" |
||||
|
@button-base-click="buttonBaseClick" |
||||
|
:routeName="routeName" |
||||
|
@updataTableColumns="updataTableColumns" |
||||
|
@searchFormClick="searchFormClick" |
||||
|
:allSchemas="Processroute.allSchemas" |
||||
|
/> |
||||
|
|
||||
|
<!-- 列表 --> |
||||
|
<ContentWrap> |
||||
|
<Table |
||||
|
:columns="tableColumns" |
||||
|
:data="tableObject.tableList" |
||||
|
:loading="tableObject.loading" |
||||
|
:pagination="{ |
||||
|
total: tableObject.total |
||||
|
}" |
||||
|
v-model:pageSize="tableObject.pageSize" |
||||
|
v-model:currentPage="tableObject.currentPage" |
||||
|
v-model:sort="tableObject.sort" |
||||
|
> |
||||
|
<template #code="{row}"> |
||||
|
<el-button type="primary" link @click="openDetail(row)"> |
||||
|
<span>{{ row.processroute_code }}</span> |
||||
|
</el-button> |
||||
|
</template> |
||||
|
<template #action="{ row }"> |
||||
|
<ButtonBase :Butttondata="butttondata" @button-base-click="buttonTableClick($event,row)" /> |
||||
|
</template> |
||||
|
</Table> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 表单弹窗：添加/修改 --> |
||||
|
<BasicForm |
||||
|
ref="basicFormRef" |
||||
|
@success="formsSuccess" |
||||
|
:rules="ProcessrouteRules" |
||||
|
:formAllSchemas="Processroute.allSchemas" |
||||
|
:apiUpdate="ProcessrouteApi.updateProcessroute" |
||||
|
:apiCreate="ProcessrouteApi.createProcessroute" |
||||
|
@searchTableSuccess="searchTableSuccess" |
||||
|
:isBusiness="false" |
||||
|
/> |
||||
|
|
||||
|
<!-- 详情 --> |
||||
|
<ProcessRouteConfig ref="configDialogRef" @close="getList" /> |
||||
|
|
||||
|
<!-- 导入 --> |
||||
|
<ImportForm ref="importFormRef" url="/mes/processroute/import" :importTemplateData="importTemplateData" @success="importSuccess" /> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import download from '@/utils/download' |
||||
|
import { Processroute,ProcessrouteRules } from './processroute.data' |
||||
|
import * as ProcessrouteApi from '@/api/mes/processroute' |
||||
|
import * as defaultButtons from '@/utils/disposition/defaultButtons' |
||||
|
import TableHead from '@/components/TableHead/src/TableHead.vue' |
||||
|
import ImportForm from '@/components/ImportForm/src/ImportForm.vue' |
||||
|
// import Detail from '@/components/Detail/src/Detail.vue' |
||||
|
import ProcessRouteConfig from './components/configDialog.vue' |
||||
|
import { async } from '@antv/x6/lib/registry/marker/async' |
||||
|
|
||||
|
defineOptions({ name: 'Processroute' }) |
||||
|
|
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const { t } = useI18n() // 国际化 |
||||
|
|
||||
|
const route = useRoute() // 路由信息 |
||||
|
const routeName = ref() |
||||
|
routeName.value = route.name |
||||
|
const tableColumns = ref(Processroute.allSchemas.tableColumns) |
||||
|
|
||||
|
// 查询页面返回 |
||||
|
const searchTableSuccess = (formField, searchField, val, formRef) => { |
||||
|
nextTick(() => { |
||||
|
const setV = {} |
||||
|
setV[formField] = val[0][searchField] |
||||
|
formRef.setValues(setV) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 字段设置 更新主列表字段 |
||||
|
const updataTableColumns = (val) => { |
||||
|
tableColumns.value = val |
||||
|
} |
||||
|
|
||||
|
const { tableObject, tableMethods } = useTable({ |
||||
|
getListApi: ProcessrouteApi.getProcessroutePage // 分页接口 |
||||
|
}) |
||||
|
|
||||
|
// 获得表格的各种操作 |
||||
|
const { getList, setSearchParams } = tableMethods |
||||
|
|
||||
|
// 列表头部按钮 |
||||
|
const HeadButttondata = [ |
||||
|
defaultButtons.defaultAddBtn({hasPermi:'mes:processroute:create'}), // 新增 |
||||
|
defaultButtons.defaultImportBtn({hasPermi:'mes:processroute:import'}), // 导入 |
||||
|
defaultButtons.defaultExportBtn({hasPermi:'mes:processroute:export'}), // 导出 |
||||
|
defaultButtons.defaultFreshBtn(null), // 刷新 |
||||
|
defaultButtons.defaultFilterBtn(null), // 筛选 |
||||
|
defaultButtons.defaultSetBtn(null), // 设置 |
||||
|
// { |
||||
|
// label: '自定义扩展按钮', |
||||
|
// name: 'zdy', |
||||
|
// hide: false, |
||||
|
// type: 'primary', |
||||
|
// icon: 'Select', |
||||
|
// color: '' |
||||
|
// }, |
||||
|
] |
||||
|
|
||||
|
// 头部按钮事件 |
||||
|
const buttonBaseClick = (val, item) => { |
||||
|
if (val == 'add') { // 新增 |
||||
|
openForm('create') |
||||
|
} else if (val == 'import') { // 导入 |
||||
|
handleImport() |
||||
|
} else if (val == 'export') { // 导出 |
||||
|
handleExport() |
||||
|
} else if (val == 'refresh') { // 刷新 |
||||
|
getList() |
||||
|
} else if (val == 'filtrate') { // 筛选 |
||||
|
} else { // 其他按钮 |
||||
|
console.log('其他按钮', item) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 列表-操作按钮 |
||||
|
const butttondata = [ |
||||
|
defaultButtons.mainListEditBtn({hasPermi:'mes:processroute:update'}), // 编辑 |
||||
|
defaultButtons.mainListDeleteBtn({hasPermi:'mes:processroute:delete'}), // 删除 |
||||
|
defaultButtons.mainListHandleBtn({label: '配置', |
||||
|
name: 'config', |
||||
|
hide: false, |
||||
|
type: 'warning', |
||||
|
icon: '', |
||||
|
color: '', |
||||
|
hasPermi: ''}), // 路由设置 |
||||
|
] |
||||
|
|
||||
|
// 列表-操作按钮事件 |
||||
|
const buttonTableClick = async (val, row) => { |
||||
|
|
||||
|
if (val == 'edit') { // 编辑 |
||||
|
openForm('update', row) |
||||
|
} else if (val == 'delete') { // 删除 |
||||
|
handleDelete(row.id) |
||||
|
} else if (val == 'config') { // |
||||
|
openDetail(row) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 添加/修改操作 */ |
||||
|
const basicFormRef = ref() |
||||
|
const openForm = (type: string, row?: any) => { |
||||
|
basicFormRef.value.open(type, row) |
||||
|
} |
||||
|
|
||||
|
// form表单提交 |
||||
|
const formsSuccess = async (formType,data) => { |
||||
|
// var isHave =Processroute.allSchemas.formSchema.some(function (item) { |
||||
|
// return item.field === 'activeTime' || item.field === 'expireTime'; |
||||
|
// }); |
||||
|
// if(isHave){ |
||||
|
// if(data.activeTime && data.expireTime && data.activeTime >=data.expireTime){ |
||||
|
// message.error('失效时间要大于生效时间') |
||||
|
// return; |
||||
|
// } |
||||
|
// } |
||||
|
// if(data.activeTime==0)data.activeTime = null; |
||||
|
// if(data.expireTime==0)data.expireTime = null; |
||||
|
if (formType === 'create') { |
||||
|
await ProcessrouteApi.createProcessroute(data) |
||||
|
message.success(t('common.createSuccess')) |
||||
|
} else { |
||||
|
await ProcessrouteApi.updateProcessroute(data) |
||||
|
message.success(t('common.updateSuccess')) |
||||
|
} |
||||
|
basicFormRef.value.dialogVisible = false |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
/** 详情操作 */ |
||||
|
const configDialogRef = ref() |
||||
|
const openDetail =(row) => { |
||||
|
|
||||
|
configDialogRef.value.openDetail(row) |
||||
|
} |
||||
|
|
||||
|
/** 删除按钮操作 */ |
||||
|
const handleDelete = async (id: number) => { |
||||
|
try { |
||||
|
// 删除的二次确认 |
||||
|
await message.delConfirm() |
||||
|
// 发起删除 |
||||
|
await ProcessrouteApi.deleteProcessroute(id) |
||||
|
message.success(t('common.delSuccess')) |
||||
|
// 刷新列表 |
||||
|
await getList() |
||||
|
} catch {} |
||||
|
} |
||||
|
|
||||
|
/** 导出按钮操作 */ |
||||
|
const exportLoading = ref(false) // 导出的加载中 |
||||
|
const handleExport = async () => { |
||||
|
try { |
||||
|
// 导出的二次确认 |
||||
|
await message.exportConfirm() |
||||
|
// 发起导出 |
||||
|
exportLoading.value = true |
||||
|
const data = await ProcessrouteApi.exportProcessroute(tableObject.params) |
||||
|
download.excel(data, '工艺路线定义.xlsx') |
||||
|
} catch { |
||||
|
} finally { |
||||
|
exportLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
/** 路线配置操作 */ |
||||
|
|
||||
|
/** 导入 */ |
||||
|
const importFormRef = ref() |
||||
|
const handleImport = () => { |
||||
|
importFormRef.value.open() |
||||
|
} |
||||
|
// 导入附件弹窗所需的参数 |
||||
|
const importTemplateData = reactive({ |
||||
|
templateUrl: '', |
||||
|
templateTitle: '工艺路线定义导入模版.xlsx' |
||||
|
}) |
||||
|
// 导入成功之后 |
||||
|
const importSuccess = () => { |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
// 筛选提交 |
||||
|
const searchFormClick = (searchData) => { |
||||
|
tableObject.params = { |
||||
|
isSearch: true, |
||||
|
filters: searchData.filters |
||||
|
} |
||||
|
getList() // 刷新当前列表 |
||||
|
} |
||||
|
|
||||
|
/** 初始化 **/ |
||||
|
onMounted(async () => { |
||||
|
getList() |
||||
|
importTemplateData.templateUrl = await ProcessrouteApi.importTemplate() |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
@ -0,0 +1,148 @@ |
|||||
|
import type { CrudSchema } from '@/hooks/web/useCrudSchemas' |
||||
|
import { dateFormatter } from '@/utils/formatTime' |
||||
|
import * as ItembasicApi from '@/api/wms/itembasic' |
||||
|
import { Itembasic } from '@/views/wms/basicDataManage/itemManage/itembasic/itembasic.data' |
||||
|
// 表单校验
|
||||
|
export const ProcessrouteRules = reactive({ |
||||
|
}) |
||||
|
|
||||
|
export const Processroute = useCrudSchemas(reactive<CrudSchema[]>([ |
||||
|
{ |
||||
|
label: '删除时间', |
||||
|
field: 'deleteTime', |
||||
|
sort: 'custom', |
||||
|
isTable: false, |
||||
|
isForm: false, |
||||
|
form: { |
||||
|
component: 'DatePicker', |
||||
|
componentProps: { |
||||
|
type: 'datetime', |
||||
|
valueFormat: 'x' |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '主键', |
||||
|
field: 'id', |
||||
|
sort: 'custom', |
||||
|
isForm: false, |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
label: '并发乐观锁', |
||||
|
field: 'concurrencyStamp', |
||||
|
sort: 'custom', |
||||
|
isTable: false, |
||||
|
isForm: false, |
||||
|
form: { |
||||
|
component: 'InputNumber', |
||||
|
value: 0 |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
{ |
||||
|
label: '删除用户名', |
||||
|
field: 'deleter', |
||||
|
sort: 'custom', |
||||
|
isTable: false, |
||||
|
isForm: false, |
||||
|
}, |
||||
|
{ |
||||
|
label: '工艺路线编码', |
||||
|
field: 'processrouteCode', |
||||
|
sort: 'custom', |
||||
|
isSearch: true, |
||||
|
// form: {
|
||||
|
// component: 'Input',
|
||||
|
|
||||
|
// componentProps: {
|
||||
|
// slots:{
|
||||
|
// default:}
|
||||
|
// disabled: true
|
||||
|
// }
|
||||
|
// }
|
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
label: '工艺路线名称', |
||||
|
field: 'processName', |
||||
|
sort: 'custom', |
||||
|
isSearch: true, |
||||
|
}, |
||||
|
{ |
||||
|
label: '产品编码', |
||||
|
field: 'productCode', |
||||
|
sort: 'custom', |
||||
|
isSearch: true, |
||||
|
width: 150, |
||||
|
form: { |
||||
|
// labelMessage: '信息提示说明！！！',
|
||||
|
componentProps: { |
||||
|
isSearchList: true, // 开启查询弹窗
|
||||
|
searchListPlaceholder: '请选择物料代码', // 输入框占位文本
|
||||
|
searchField: 'code', // 查询弹窗赋值字段
|
||||
|
searchTitle: '产品信息', // 查询弹窗标题
|
||||
|
searchAllSchemas: Itembasic.allSchemas, // 查询弹窗所需类
|
||||
|
searchPage: ItembasicApi.getItembasicPage, // 查询弹窗所需分页方法
|
||||
|
searchCondition: [{ |
||||
|
key: 'available', |
||||
|
value: 'TRUE', |
||||
|
isMainValue: false |
||||
|
}] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
label: '版本号', |
||||
|
field: 'routeVersion', |
||||
|
sort: 'custom', |
||||
|
isSearch: true, |
||||
|
}, |
||||
|
{ |
||||
|
label: '创建时间', |
||||
|
field: 'createTime', |
||||
|
sort: 'custom', |
||||
|
formatter: dateFormatter, |
||||
|
isForm: false, |
||||
|
isTable: false, |
||||
|
}, |
||||
|
{ |
||||
|
label: '状态', |
||||
|
field: 'status', |
||||
|
sort: 'custom', |
||||
|
isSearch: false, |
||||
|
dictType: DICT_TYPE.ITEM_STATUS, |
||||
|
dictClass: 'string', |
||||
|
form: { |
||||
|
component: 'Switch', |
||||
|
value: 'ENABLE', |
||||
|
componentProps: { |
||||
|
inactiveValue: 'DISABLE', |
||||
|
activeValue: 'ENABLE' |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '备注', |
||||
|
field: 'remark', |
||||
|
sort: 'custom', |
||||
|
}, |
||||
|
{ |
||||
|
label: '图形数据', |
||||
|
field: 'graphJson', |
||||
|
sort: 'custom', |
||||
|
isForm: false, |
||||
|
isTable: false, |
||||
|
isSearch:false |
||||
|
}, |
||||
|
{ |
||||
|
label: '操作', |
||||
|
field: 'action', |
||||
|
isForm: false, |
||||
|
table: { |
||||
|
width: 150, |
||||
|
fixed: 'right' |
||||
|
} |
||||
|
} |
||||
|
])) |
||||
Loading…
Reference in new issue