You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

468 lines
17 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class='p-2'>
<transition :enter-active-class='proxy?.animate.searchAnimate.enter'
:leave-active-class='proxy?.animate.searchAnimate.leave'>
<div v-show='showSearch' class='mb-[0px]'>
<el-card shadow='hover'>
<el-form ref='queryFormRef' :model='queryParams' :inline='true' label-width='100px'>
<el-form-item label='工艺路线名称' prop='routeName'>
<el-input v-model='queryParams.routeName' placeholder='请输入工艺路线名称' clearable @keyup.enter='handleQuery' />
</el-form-item>
<el-form-item>
<el-button type='primary' icon='Search' @click='handleQuery'>搜索</el-button>
<el-button icon='Refresh' @click='resetQuery'>重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow='never'>
<template #header>
<el-row :gutter='10' class='mb8'>
<el-col :span='1.5'>
<el-button type='primary' plain icon='Plus' @click='handleAdd' v-hasPermi="['mes:baseRoute:add']">
</el-button>
</el-col>
<el-col :span='1.5'>
<el-button type='success' plain icon='Edit' :disabled='single' @click='handleUpdate()'
v-hasPermi="['mes:baseRoute:edit']">
</el-button>
</el-col>
<el-col :span='1.5'>
<el-button type='danger' plain icon='Delete' :disabled='multiple' @click='handleDelete()'
v-hasPermi="['mes:baseRoute:remove']">
</el-button>
</el-col>
<el-col :span='1.5'>
<el-button type='warning' plain icon='Download' @click='handleExport' v-hasPermi="['mes:baseRoute:export']">
</el-button>
</el-col>
<right-toolbar v-model:showSearch='showSearch' :columns='columns' :search='true'
@queryTable='getList'></right-toolbar>
</el-row>
</template>
<el-table v-loading='loading' :data='baseRouteList' @selection-change='handleSelectionChange'>
<el-table-column type='selection' width='55' align='center' />
<el-table-column label='工艺路线ID' align='center' prop='routeId' v-if='columns[0].visible' />
<el-table-column label='租户编号' align='center' prop='tenantId' v-if='columns[1].visible' />
<el-table-column label='工艺路线名称' align='center' prop='routeName' v-if='columns[2].visible' />
<el-table-column label='工艺路线说明' align='center' prop='routeDesc' v-if='columns[3].visible' />
<el-table-column label='激活标识' align='center' prop='activeFlag' v-if='columns[4].visible'>
<template #default='scope'>
<dict-tag :options='active_flag' :value='scope.row.activeFlag' />
</template>
</el-table-column>
<el-table-column label='备注' align='center' prop='remark' v-if='columns[5].visible' />
<el-table-column label='创建部门' align='center' prop='createDept' v-if='columns[6].visible' />
<el-table-column label='创建人' align='center' prop='createBy' v-if='columns[7].visible' />
<el-table-column label='创建时间' align='center' prop='createTime' width='180' v-if='columns[8].visible'>
<template #default='scope'>
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label='更新人' align='center' prop='updateBy' v-if='columns[9].visible' />
<el-table-column label='更新时间' align='center' prop='updateTime' width='180' v-if='columns[10].visible'>
<template #default='scope'>
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label='操作' align='center' class-name='small-padding fixed-width'>
<template #default='scope'>
<!-- <el-tooltip content='修改' placement='top'>
<el-button link type='primary' icon='Edit' @click='handleUpdate(scope.row)'
v-hasPermi="['mes:baseRoute:edit']"></el-button>
</el-tooltip>
<el-tooltip content='删除' placement='top'>
<el-button link type='primary' icon='Delete' @click='handleDelete(scope.row)'
v-hasPermi="['mes:baseRoute:remove']"></el-button>
</el-tooltip>-->
<el-button
size="small"
type="text"
icon="el-icon-edit"
@click="routeProcessUpdate(scope.row)"
v-hasPermi="['mes:baseRoute:edit']"
>工艺步骤
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show='total > 0' :total='total' v-model:page='queryParams.pageNum'
v-model:limit='queryParams.pageSize' @pagination='getList' />
</el-card>
<!-- 添加或修改工艺路线对话框 -->
<el-dialog :title='dialog.title' v-model='dialog.visible' width='500px' append-to-body>
<el-form ref='baseRouteFormRef' :model='form' :rules='rules' label-width='110px'>
<el-form-item label='工艺路线名称' prop='routeName'>
<el-input v-model='form.routeName' placeholder='请输入工艺路线名称' />
</el-form-item>
<el-form-item label='工艺路线说明' prop='routeDesc'>
<el-input v-model='form.routeDesc' placeholder='请输入工艺路线说明' />
</el-form-item>
<el-form-item label='激活标识' prop='activeFlag'>
<el-radio-group v-model='form.activeFlag'>
<el-radio
v-for='dict in active_flag'
:key='dict.value'
:value='dict.value'
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='备注' prop='remark'>
<el-input v-model='form.remark' placeholder='请输入备注' />
</el-form-item>
</el-form>
<template #footer>
<div class='dialog-footer'>
<el-button :loading='buttonLoading' type='primary' @click='submitForm'>确 定</el-button>
<el-button @click='cancel'>取 消</el-button>
</div>
</template>
</el-dialog>
<!--维护工艺路线步骤对话框-->
<el-dialog :title='dialog.title' v-model='ifOpen' width='500px' append-to-body>
<el-form ref='baseRouteFormRef' :model='form' :rules='rules' label-width='110px'>
<el-form-item label='工艺路线名称' prop='routeName'>
<el-input v-model='form.routeName' placeholder='请输入工艺路线名称' disabled />
</el-form-item>
<el-divider content-position='center'>工艺路线组成信息</el-divider>
<el-row :gutter='10' class='mb8'>
<el-col :span='1.5'>
<el-button type='primary' icon='Plus' size='small' @click='handleAddProdBaseRouteProcess'>添加</el-button>
</el-col>
<el-col :span='1.5'>
<el-button type='danger' icon='Delete' size='small' @click='handleDeleteProdBaseRouteProcess'>删除</el-button>
</el-col>
<!-- <el-col :span='1.5'>
<span v-show='tagShow'>提示:该工艺路线已关联生产工单,无法修改!</span>
</el-col> -->
</el-row>
<!-- <el-table :data='routeProcessBoList' :row-class-name='rowProdBaseRouteProcessIndex'
@selection-change='handleProdBaseRouteProcessSelectionChange' ref='mesBaseRouteProcess'>-->
<el-table
:data="routeProcessBoList"
:row-class-name="rowProdBaseRouteProcessIndex"
@selection-change="handleProdBaseRouteProcessSelectionChange"
ref="mesBaseRouteProcess"
>
<el-table-column type='selection' width='50' align='center' />
<el-table-column label='序号' align='center' prop='index' v-if='false' />
<el-table-column label='工艺路线顺序' prop='processOrder' width='100'>
<template #default='scope'>
<el-input v-model='scope.row.processOrder' />
</template>
</el-table-column>
<el-table-column label='工序' prop='processId'>
<template #default='scope'>
<el-select v-model='scope.row.processId' filterable placeholder='请选择工序' clearable>
<el-option
v-for='item in processList'
:key='item.processId'
:label='item.processName'
:value='item.processId'
:disabled='routeProcessBoList.some(i => i.processId === item.processId)'
/>
</el-select>
</template>
</el-table-column>
</el-table>
</el-form>
<template #footer>
<div class='dialog-footer'>
<el-button type='primary' @click='submitForm' v-show='submitShow'>确 定</el-button>
<el-button @click='cancel'>取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name='BaseRoute' lang='ts'>
import { listBaseRoute, getBaseRoute, delBaseRoute, addBaseRoute, updateBaseRoute } from '@/api/mes/baseRoute';
import { BaseRouteVO, BaseRouteQuery, BaseRouteForm, ProdBaseRouteProcess } from '@/api/mes/baseRoute/types';
import {getProcessInfoList} from "@/api/mes/baseProcessInfo";
/*import type { ProdBaseRouteProcess } from '@/api/mes/baseRoute/types';*/
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));
const baseRouteList = ref<BaseRouteVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const baseRouteFormRef = ref<ElFormInstance>();
// 在data部分添加以下变量
const routeProcessOpen = ref(false);
const submitShow = ref(true);
const tagShow = ref(false);
const routeProcessBoList = ref<any[]>([]);
const checkedProdBaseRouteProcess = ref<any[]>([]);
const processList = ref<any[]>([]);
//控制维护工艺路线步骤对话框的显示与隐藏默认为false隐藏
const ifOpen = ref(false); // 使用 ref 定义响应式变量
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
// 列显隐信息
const columns = ref<FieldOption[]>([
{ key: 0, label: `工艺路线ID`, visible: false },
{ key: 1, label: `租户编号`, visible: false },
{ key: 2, label: `工艺路线名称`, visible: true },
{ key: 3, label: `工艺路线说明`, visible: true },
{ key: 4, label: `激活标识`, visible: true },
{ key: 5, label: `备注`, visible: true },
{ key: 6, label: `创建部门`, visible: false },
{ key: 7, label: `创建人`, visible: false },
{ key: 8, label: `创建时间`, visible: true },
{ key: 9, label: `更新人`, visible: false },
{ key: 10, label: `更新时间`, visible: false }
]);
const initFormData: BaseRouteForm = {
routeId: undefined,
routeName: undefined,
routeDesc: undefined,
activeFlag: '1',
remark: undefined,
routeProcessBoList: []//工艺步骤
};
const data = reactive<PageData<BaseRouteForm, BaseRouteQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
routeId: undefined,
routeName: undefined,
routeDesc: undefined,
activeFlag: undefined,
params: {}
},
rules: {
routeName: [
{ required: true, message: '工艺路线名称不能为空', trigger: 'blur' }
],
activeFlag: [
{ required: true, message: '激活标识不能为空', trigger: 'change' }
]
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询工艺路线列表 */
const getList = async () => {
loading.value = true;
const res = await listBaseRoute(queryParams.value);
baseRouteList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
ifOpen.value = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
baseRouteFormRef.value?.resetFields();
routeProcessBoList.value = [];
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: BaseRouteVO[]) => {
ids.value = selection.map(item => item.routeId);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加工艺路线';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: BaseRouteVO) => {
reset();
const _routeId = row?.routeId || ids.value[0];
const res = await getBaseRoute(_routeId);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改工艺路线';
};
/** 提交按钮 */
const submitForm = () => {
baseRouteFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
// 确保 form 包含最新的 routeProcessBoList 数据
form.value.routeProcessBoList = routeProcessBoList.value;
if (form.value.routeId) {
await updateBaseRoute(form.value).finally(() => buttonLoading.value = false);
} else {
await addBaseRoute(form.value).finally(() => buttonLoading.value = false);
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
// 关闭维护工艺路线步骤对话框,重置数据
ifOpen.value = false;
routeProcessBoList.value = [];
form.value.routeProcessBoList = [];
form.value.routeProcessVoList = [];
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: BaseRouteVO) => {
const _routeIds = row?.routeId || ids.value;
await proxy?.$modal.confirm('是否确认删除工艺路线编号为"' + _routeIds + '"的数据项').finally(() => loading.value = false);
await delBaseRoute(_routeIds);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download('mes/baseRoute/export', {
...queryParams.value
}, `baseRoute_${new Date().getTime()}.xlsx`);
};
// 在methods部分添加以下方法
/** 维护工艺路线步骤 */
const routeProcessUpdate = async (row: BaseRouteVO) => {
reset();
const _routeId = row?.routeId || ids.value[0];
submitShow.value = true;
// 打开维护工艺路线步骤对话框
ifOpen.value = true;
/* tagShow.value = false;*/
/* // 检查是否关联生产工单
const res = await listProductOrder({ dispatchId: _routeId });
if (res.rows.length > 0) {
submitShow.value = false;
tagShow.value = true;
}*/
// 获取数据时
const routeRes = await getBaseRoute(_routeId);
form.value = routeRes.data;
routeProcessBoList.value = routeRes.data.routeProcessVoList || [];
routeProcessOpen.value = true;
dialog.title = '维护工艺路线步骤';
};
// 修改rowProdBaseRouteProcessIndex方法返回类名字符串
const rowProdBaseRouteProcessIndex = ({ row, rowIndex }: {
row: ProdBaseRouteProcess;
rowIndex: number
}): string => {
// 如果当前行的processOrder属性不存在
if (!row.processOrder) {
// 设置当前行的index属性为行索引加1
row.index = rowIndex + 1;
// 设置当前行的processOrder属性为(行索引加1)乘以10
row.processOrder = (rowIndex + 1) * 10;
}
// 返回一个空字符串表示不添加额外类名
return '';
};
/** 工艺路线组成信息添加按钮操作 */
const handleAddProdBaseRouteProcess = () => {
routeProcessBoList.value.push({
processId: '',
processOrder: '',
remark: '',
createBy: '',
createTime: '',
updateBy: '',
updateTime: ''
});
};
/** 工艺路线组成信息删除按钮操作 */
const handleDeleteProdBaseRouteProcess = () => {
// 检查是否有选中的工艺路线组成信息数据,如果没有则显示错误提示
if (checkedProdBaseRouteProcess.value.length === 0) {
proxy?.$modal.msgError('请先选择要删除的工艺路线组成信息数据');
} else {
// 过滤掉已选中的工艺路线组成信息数据
routeProcessBoList.value = routeProcessBoList.value.filter(
item => !checkedProdBaseRouteProcess.value.includes(item.index)
);
}
};
/** 复选框选中数据 */
const handleProdBaseRouteProcessSelectionChange = (selection: any[]) => {
// 将选中的项的索引映射到checkedProdBaseRouteProcess.value数组中
checkedProdBaseRouteProcess.value = selection.map(item => item.index);
};
const getProcessList = async () => {
const processRes = await getProcessInfoList(null);
processList.value = processRes.data;
};
onMounted(() => {
getProcessList();
getList();
});
</script>