zhousq
8 months ago
5 changed files with 1119 additions and 0 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