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.

645 lines
26 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>
<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-[10px]'>
<el-card shadow='hover'>
<el-form ref='queryFormRef' :model='queryParams' :inline='true'>
<!-- <el-form-item label='工序ID' prop='processId'>-->
<!-- <el-select v-model='queryParams.processId' placeholder='请选择所属工序' clearable @keyup.enter='handleQuery'>-->
<!-- <el-option-->
<!-- v-for='item in processInfoList'-->
<!-- :key='item.processId'-->
<!-- :label='item.processName'-->
<!-- :value='item.processId'-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label='物料名称' prop='materialId'>-->
<!-- <el-input v-model='queryParams.materialId' placeholder='请输入物料名称' clearable @keyup.enter='handleQuery' />-->
<!-- </el-form-item>-->
<!-- <el-form-item label='机台类型' prop='machineType'>-->
<!-- <el-select v-model='queryParams.machineType' placeholder='请选择机台类型' clearable>-->
<!-- <el-option v-for='dict in mes_machine_type' :key='dict.value' :label='dict.label' :value='dict.value' />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label='工艺类型' prop='technologyType'>-->
<!-- <el-select v-model='queryParams.technologyType' placeholder='请选择工艺类型' clearable>-->
<!-- <el-option v-for='dict in mes_technology_type' :key='dict.value' :label='dict.label'-->
<!-- :value='dict.value' />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label='工艺版本' prop='technologyVersion'>
<el-input v-model='queryParams.technologyVersion' placeholder='请输入工艺版本' clearable
@keyup.enter='handleQuery' />
</el-form-item>
<el-form-item label='激活标识' prop='activeFlag'>
<el-select v-model='queryParams.activeFlag' placeholder='请选择激活标识' clearable>
<el-option v-for='dict in active_flag' :key='dict.value' :label='dict.label' :value='dict.value' />
</el-select>
</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:technologyInfo:add']">
</el-button>
</el-col>
<el-col :span='1.5'>
<el-button type='success' plain icon='Edit' :disabled='single' @click='handleUpdate()'
v-hasPermi="['mes:technologyInfo:edit']">
</el-button>
</el-col>
<el-col :span='1.5'>
<el-button type='danger' plain icon='Delete' :disabled='multiple' @click='handleDelete()'
v-hasPermi="['mes:technologyInfo:remove']">
</el-button>
</el-col>
<el-col :span='1.5'>
<el-button type='warning' plain icon='Download' @click='handleExport'
v-hasPermi="['mes:technologyInfo: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='technologyInfoList' @selection-change='handleSelectionChange'>
<el-table-column type='selection' width='55' align='center' />
<el-table-column label='主键标识' align='center' prop='technologyId' v-if='columns[0].visible' />
<el-table-column label='工序名称' align='center' prop='processName' v-if='columns[2].visible' />
<el-table-column label='物料名称' align='center' prop='materialName' v-if='columns[3].visible' width='180' />
<el-table-column label='机台类型' align='center' prop='machineType' v-if='columns[4].visible'>
<template #default='scope'>
<dict-tag :options='mes_machine_type' :value='scope.row.machineType' />
</template>
</el-table-column>
<el-table-column label='工艺类型' align='center' prop='technologyType' v-if='columns[5].visible'>
<template #default='scope'>
<dict-tag :options='mes_technology_type' :value='scope.row.technologyType' />
</template>
</el-table-column>
<el-table-column label='工艺版本' align='center' prop='technologyVersion' v-if='columns[6].visible' />
<el-table-column label='硫化标准时间' align='center' prop='standardTime' v-if='columns[7].visible'>
<template v-slot='scope'>
<span>{{ formatDayHourMinutes(scope.row.standardTime) }}</span>
</template>
</el-table-column>
<el-table-column label='激活标识' align='center' prop='activeFlag' v-if='columns[8].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[9].visible' />
<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' @click='handleStepUpdate(scope.row)'
v-hasPermi="['mes:technologyInfo:edit']">
</el-button>
</el-tooltip>
<el-tooltip content='复制' placement='top'>
<el-button link type='primary' @click='handleCopy(scope.row)'
v-hasPermi="['mes:technologyInfo:add']">
</el-button>
</el-tooltip>
<!-- <el-tooltip content='删除' placement='top'>-->
<!-- <el-button link type='primary' icon='Delete' @click='handleDelete(scope.row)'-->
<!-- v-hasPermi="['mes:technologyInfo:remove']"></el-button>-->
<!-- </el-tooltip>-->
</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='technologyInfoFormRef' :model='form' :rules='rules' label-width='100px'>
<!-- <el-form-item label='工序名称' prop='processId'>-->
<!-- <el-select v-model='form.processId' placeholder='请选择所属工序'>-->
<!-- <el-option-->
<!-- v-for='item in processInfoList'-->
<!-- :key='item.processId'-->
<!-- :label='item.processName'-->
<!-- :value='item.processId'-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label='物料名称' prop='materialId'>
<el-input v-model='form.materialName' placeholder='请点击检索物料' @click='handleMaterialAdd' readonly>
<template #append>
<el-icon class='el-input__icon'>
<search />
</el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label='机台类型' prop='machineType'>
<el-select v-model='form.machineType' placeholder='请选择机台类型'>
<el-option
v-for='dict in mes_machine_type'
:key='dict.value'
:label='dict.label'
:value='dict.value'
></el-option>
</el-select>
</el-form-item>
<el-form-item label='工艺类型' prop='technologyType'>
<el-select v-model='form.technologyType' placeholder='请选择工艺类型'>
<el-option
v-for='dict in mes_technology_type'
:key='dict.value'
:label='dict.label'
:value='dict.value'
></el-option>
</el-select>
</el-form-item>
<el-form-item label='工艺版本' prop='technologyVersion'>
<el-input v-model='form.technologyVersion' placeholder='请输入工艺版本' />
</el-form-item>
<el-form-item label='硫化标准时间' prop='standardTime'>
<el-input-number v-model='form.productionTimeDays' placeholder='请输入天数' :min='0' :max='10000'
:controls='false' :style="{ width: '50px' }" />
<span>&nbsp;天&nbsp;</span>
<el-input-number v-model='form.productionTimeHours' placeholder='请输入小时' :min='0' :max='23'
:controls='false' :style="{ width: '50px' }" />
<span>&nbsp;小时&nbsp;</span>
<el-input-number v-model='form.productionTimeMinutes' placeholder='请输入分钟' :min='0' :max='59'
:controls='false' :style="{ width: '50px' }" />
<span>&nbsp;分钟&nbsp;</span>
</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>
</div>
<!-- 添加物料信息对话框 -->
<el-dialog title='选择物料信息' v-model='materialOpen' width='1200px' append-to-body>
<MaterialSelect @selection='handleSelection' ref='materialSelectRef' v-if='materialOpen'></MaterialSelect>
<div slot='footer' class='dialog-footer'>
<el-button type='primary' @click='submitMaterialForm'>确 定</el-button>
<el-button @click='materialOpen = false'>取 消</el-button>
</div>
</el-dialog>
<!-- 添加或修改硫化工艺信息对话框 -->
<el-dialog :title='dialog.title' v-model='stepOpen' width='1100px' append-to-body>
<el-form ref='technologyInfoFormRef' :model='form' :rules='rules' label-width='100px'>
<el-row :gutter='10' class='mb8'>
<el-col :span='12'>
<el-form-item label='工序' prop='processId'>
<el-select v-model='form.processId' placeholder='请选择所属工序' disabled>
<el-option
v-for='item in processInfoList'
:key='item.processId'
:label='item.processName'
:value='item.processId'
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label='物料名称' prop='materialName'>
<el-input v-model='form.materialName' placeholder='请输入物料名称' disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter='10' class='mb8'>
<el-col :span='12'>
<el-form-item label='机台类型' prop='machineType'>
<el-select v-model='form.machineType' placeholder='请选择机台类型' disabled>
<el-option
v-for='dict in mes_machine_type'
:key='dict.value'
:label='dict.label'
:value='dict.value'
></el-option>
</el-select>
</el-form-item>
<el-form-item label='工艺类型' prop='technologyType'>
<el-select v-model='form.technologyType' placeholder='请选择工艺类型' disabled>
<el-option
v-for='dict in mes_technology_type'
:key='dict.value'
:label='dict.label'
:value='dict.value'
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label='工艺版本' prop='technologyVersion'>
<el-input v-model='form.technologyVersion' placeholder='请输入工艺版本' disabled />
</el-form-item>
</el-col>
</el-row>
<el-divider content-position='center'>工艺步序信息</el-divider>
<el-row :gutter='10' class='mb8'>
<el-col :span='1.5'>
<el-button type='primary' plain icon='Plus' @click='handleAddStep'>添加</el-button>
</el-col>
<el-col :span='1.5'>
<el-button type='danger' icon='Delete' @click='handleDeleteProdLine'>删除</el-button>
</el-col>
</el-row>
<el-table :data='prodTechnologyStepInfoList' :row-class-name='rowProdBaseProcessProdlineIndex'
@selection-change='handleProdLineSelectionChange'>
<el-table-column type='selection' width='50' align='center' />
<el-table-column label='序号' width='50' align='center' prop='index' />
<el-table-column align='center' label='步序编号' prop='stepCode'>
<template #default='scope'>
<!-- <el-input v-model='scope.row.stepCode' :disabled='true' placeholder='请输入步序编号' />-->
<el-input v-model='scope.row.stepCode' placeholder='请输入步序编号' />
</template>
</el-table-column>
<el-table-column align='center' label='步序名称' prop='stepName'>
<template #default='scope'>
<el-input v-model='scope.row.stepName' placeholder='请输入步序名称' />
</template>
</el-table-column>
<el-table-column align='center' label='步序时间' prop='stepTime'>
<template #default='scope'>
<el-input v-model='scope.row.stepTime' placeholder='请输入步序时间' />
</template>
</el-table-column>
<el-table-column align='center' label='步序参数' prop='stepParameter'>
<template #default='scope'>
<el-input v-model='scope.row.stepParameter' placeholder='请输入步序参数' />
</template>
</el-table-column>
<el-table-column align='center' label='阀门状态' prop='valueState'>
<template #default='scope'>
<el-input v-model='scope.row.valueState' placeholder='请输入阀门状态' />
</template>
</el-table-column>
<el-table-column align='center' label='激活标识' prop='activeFlag'>
<template #default='scope'>
<el-select v-model='scope.row.activeFlag' placeholder='请输入激活标识' >
<el-option v-for="dict in active_flag" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</template>
</el-table-column>
</el-table>
</el-form>
<template #footer>
<div class='dialog-footer'>
<el-button :loading='buttonLoading' type='primary' @click='submitForm'>确 定</el-button>
<el-button @click='cancelStep'>取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name='TechnologyInfo' lang='ts'>
import {
listTechnologyInfo,
getTechnologyInfo,
delTechnologyInfo,
addTechnologyInfo,
updateTechnologyInfo, copyTechnologyInfo
} from '@/api/mes/technologyInfo';
import { TechnologyInfoVO, TechnologyInfoQuery, TechnologyInfoForm } from '@/api/mes/technologyInfo/types';
import { getProcessInfoList } from '@/api/mes/baseProcessInfo';
import MaterialSelect from '@/views/mes/baseMaterialInfo/addMaterial.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const {
mes_machine_type,
active_flag,
mes_technology_type
} = toRefs<any>(proxy?.useDict('mes_machine_type', 'active_flag', 'mes_technology_type'));
const technologyInfoList = ref<TechnologyInfoVO[]>([]);
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 technologyInfoFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const processInfoList = ref([]);
const materialOpen = ref(false);
const materialSelectRef = ref();
const stepOpen = ref(false);
// 复制相关
const isCopy = ref(false);
const prodTechnologyStepInfoList = ref([]);
const chekedProdLineList = ref([]);
/** 查询工位下拉树结构 */
const getProcessInfoListSelect = async () => {
let res = await getProcessInfoList(null);
processInfoList.value = res.data;
};
// 列显隐信息
const columns = ref<FieldOption[]>([
{ key: 0, label: `主键标识`, visible: false },
{ key: 1, label: `租户编号`, visible: false },
{ key: 2, label: `工序ID`, visible: true },
{ key: 3, label: `物料名称`, visible: true },
{ key: 4, label: `机台类型`, visible: true },
{ key: 5, label: `工艺类型`, visible: true },
{ key: 6, label: `工艺版本`, visible: true },
{ key: 7, label: `硫化标准时间`, visible: true },
{ key: 8, label: `激活标识`, visible: true },
{ key: 9, label: `备注`, visible: true },
{ key: 10, label: `创建部门`, visible: false },
{ key: 11, label: `创建人`, visible: false },
{ key: 12, label: `创建时间`, visible: false },
{ key: 13, label: `更新人`, visible: false },
{ key: 14, label: `更新时间`, visible: false }
]);
const initFormData: TechnologyInfoForm = {
technologyId: undefined,
processId: 18,
materialId: undefined,
machineType: undefined,
technologyType: undefined,
technologyVersion: undefined,
standardTime: undefined,
productionTimeDays: 0,
productionTimeHours: 0,
productionTimeMinutes: 0,
activeFlag: '1',
remark: undefined,
prodTechnologyStepInfoList: []
};
const data = reactive<PageData<TechnologyInfoForm, TechnologyInfoQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
technologyId: undefined,
processId: 18,
materialId: undefined,
machineType: undefined,
technologyType: undefined,
technologyVersion: undefined,
standardTime: undefined,
activeFlag: undefined,
params: {}
},
rules: {
processId: [
{ required: true, message: '工序ID不能为空', trigger: 'blur' }
],
materialId: [
{ required: true, message: '物料名称不能为空', trigger: 'blur' }
]
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询硫化工艺信息列表 */
const getList = async () => {
loading.value = true;
const res = await listTechnologyInfo(queryParams.value);
technologyInfoList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
isCopy.value = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
technologyInfoFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
const cancelStep = () => {
reset();
stepOpen.value = false;
prodTechnologyStepInfoList.value = [];
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: TechnologyInfoVO[]) => {
ids.value = selection.map(item => item.technologyId);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加硫化工艺信息';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: TechnologyInfoVO) => {
reset();
const _technologyId = row?.technologyId || ids.value[0];
const res = await getTechnologyInfo(_technologyId);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改硫化工艺信息';
};
/** 工艺步序信息维护按钮操作 */
const handleStepUpdate = async (row?: TechnologyInfoVO) => {
reset();
const _technologyId = row?.technologyId || ids.value[0];
const res = await getTechnologyInfo(_technologyId);
Object.assign(form.value, res.data);
prodTechnologyStepInfoList.value = form.value.prodTechnologyStepInfoList.map((item, index) => ({
...item,
index: index + 1 // 初始化 index
}));
stepOpen.value = true;
dialog.title = '工艺步序信息维护';
};
/** 提交按钮 */
const submitForm = () => {
technologyInfoFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
convertToSeconds();
if (isCopy.value) {
form.value.prodTechnologyStepInfoList = prodTechnologyStepInfoList;
await copyTechnologyInfo(form.value).finally(() => buttonLoading.value = false);
} else if (form.value.technologyId) {
form.value.prodTechnologyStepInfoList = prodTechnologyStepInfoList;
await updateTechnologyInfo(form.value).finally(() => buttonLoading.value = false);
} else {
await addTechnologyInfo(form.value).finally(() => buttonLoading.value = false);
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
stepOpen.value = false;
form.value.prodTechnologyStepInfoList = [];
isCopy.value = false;
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: TechnologyInfoVO) => {
const _technologyIds = row?.technologyId || ids.value;
await proxy?.$modal.confirm('是否确认删除硫化工艺信息编号为"' + _technologyIds + '"的数据项').finally(() => loading.value = false);
await delTechnologyInfo(_technologyIds);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download('mes/technologyInfo/export', {
...queryParams.value
}, `technologyInfo_${new Date().getTime()}.xlsx`);
};
/** 新增按钮操作 */
const handleMaterialAdd = () => {
materialOpen.value = true;
};
/** 天小时分钟转换为秒 */
const convertToSeconds = () => {
const daysInSeconds = form.value.productionTimeDays * 24 * 60 * 60;
const hoursInSeconds = form.value.productionTimeHours * 60 * 60;
const minutesInSeconds = form.value.productionTimeMinutes * 60;
form.value.standardTime = daysInSeconds + hoursInSeconds + minutesInSeconds;
};
/** 秒转换为天小时分钟 */
const convertToTime = () => {
const totalSeconds = form.value.standardTime;
const days = Math.floor(totalSeconds / (24 * 60 * 60));
const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
// 更新到表单中
form.value.productionTimeDays = days;
form.value.productionTimeHours = hours;
form.value.productionTimeMinutes = minutes;
};
/** 提交物料BOM信息按钮 */
const submitMaterialForm = () => {
let selectedRow = materialSelectRef.value.tableRef.store.states.currentRow.value;
form.value.materialId = selectedRow.materialId;
form.value.materialName = selectedRow.materialName;
materialOpen.value = false;
};
// 添加关联产线
const handleAddStep = () => {
return prodTechnologyStepInfoList.value.push({
technologyId: form.value.technologyId, // 确保 technologyId 被正确赋值
index: prodTechnologyStepInfoList.value.length + 1,
activeFlag: '1'
});
};
const handleCopy = (row: TechnologyInfoVO) => {
reset();
// 深拷贝当前行数据
Object.assign(form.value, JSON.parse(JSON.stringify(row)));
// form.value.technologyId = undefined;
dialog.visible = true;
dialog.title = '复制成型工艺信息';
isCopy.value = true;
};
const rowProdBaseProcessProdlineIndex = ({ row, rowIndex }: { row: any; rowIndex: number }): string => {
// 根据行数据和行索引返回一个类名字符串
if (row.someCondition) {
return 'custom-class';
}
return '';
};
// 删除关联产线
const handleDeleteProdLine = () => {
if (chekedProdLineList.value.length === 0) {
proxy?.$modal.msgError('请先选择要删除的工序关联产线数据');
} else {
prodTechnologyStepInfoList.value = prodTechnologyStepInfoList.value
.filter(item => !chekedProdLineList.value.includes(item.index))
.map((item, index) => ({
...item,
index: index + 1 // 更新 index
}));
}
};
// 选中关联产线
const handleProdLineSelectionChange = (selection) => {
chekedProdLineList.value = selection.map(item => item.index);
};
onMounted(() => {
getProcessInfoListSelect();
getList();
});
</script>