<script lang="ts" setup>
|
import type { MesPdParameterApi } from '#/api/mes/pro/processdesign/parameter';
|
import type { MesProProcessParamApi } from '#/api/mes/pro/processdesign/processparam';
|
|
import { computed, ref } from 'vue';
|
|
import { DICT_TYPE } from '@vben/constants';
|
|
import { useVbenModal } from '@vben/common-ui';
|
|
import { Button, Input, InputNumber, message, Switch } from 'ant-design-vue';
|
|
import {
|
getProcessParamListByProcess,
|
updateProcessParams,
|
} from '#/api/mes/pro/processdesign/processparam';
|
import { $t } from '#/locales';
|
import { DictTag } from '#/components/dict-tag';
|
|
import ParameterSelectDialog from '../../template/modules/parameter-select-dialog.vue';
|
|
const emit = defineEmits(['success']);
|
|
const processId = ref<number>();
|
const processName = ref<string>('');
|
const loading = ref(false);
|
const boundList = ref<MesProProcessParamApi.ProcessParam[]>([]);
|
const parameterSelectDialogRef =
|
ref<InstanceType<typeof ParameterSelectDialog>>();
|
|
const getTitle = computed(() => `工艺参数绑定 - ${processName.value || ''}`);
|
|
/** 加载工序已绑定的参数 */
|
async function loadData() {
|
if (!processId.value) {
|
return;
|
}
|
loading.value = true;
|
try {
|
boundList.value = await getProcessParamListByProcess(processId.value);
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
/** 打开工艺参数选择弹窗 */
|
function handleSelectParameters() {
|
parameterSelectDialogRef.value?.open(
|
boundList.value
|
.map((item) => item.processParamId)
|
.filter((id): id is number => id !== undefined),
|
);
|
}
|
|
/** 接收选中的参数，追加到绑定列表（必填/排序走默认值） */
|
function onParametersSelected(rows: MesPdParameterApi.Parameter[]) {
|
const existingIds = new Set(
|
boundList.value
|
.map((item) => item.processParamId)
|
.filter((id): id is number => id !== undefined),
|
);
|
const newRows = rows
|
.filter((row) => row.id !== undefined && !existingIds.has(row.id!))
|
.map((row, index) => ({
|
processParamId: row.id,
|
paramCode: row.paramCode,
|
paramName: row.paramName,
|
paramType: row.paramType,
|
unitMeasureName: row.unitMeasureName,
|
required: row.required,
|
sort: boundList.value.length + index + 1,
|
remark: row.remark,
|
}));
|
boundList.value = [...boundList.value, ...newRows];
|
}
|
|
/** 移除绑定 */
|
function removeItem(index: number) {
|
boundList.value.splice(index, 1);
|
}
|
|
const [Modal, modalApi] = useVbenModal({
|
async onConfirm() {
|
if (processId.value === undefined) {
|
return;
|
}
|
modalApi.lock();
|
try {
|
await updateProcessParams(
|
processId.value,
|
boundList.value.map((item, index) => ({
|
processParamId: item.processParamId!,
|
required: item.required,
|
sort: item.sort ?? index + 1,
|
remark: item.remark,
|
})),
|
);
|
message.success($t('ui.actionMessage.operationSuccess'));
|
await modalApi.close();
|
emit('success');
|
} finally {
|
modalApi.unlock();
|
}
|
},
|
async onOpenChange(isOpen: boolean) {
|
if (!isOpen) {
|
processId.value = undefined;
|
boundList.value = [];
|
return;
|
}
|
const data = modalApi.getData<{ processId: number; processName?: string }>();
|
processId.value = data.processId;
|
processName.value = data.processName || '';
|
await loadData();
|
},
|
});
|
</script>
|
|
<template>
|
<Modal :title="getTitle" class="w-4/5">
|
<div class="mx-4">
|
<div class="mb-2 flex items-center justify-between">
|
<span class="text-sm font-medium">已绑定工艺参数</span>
|
<Button type="primary" size="small" @click="handleSelectParameters">
|
添加参数
|
</Button>
|
</div>
|
<div v-if="boundList.length > 0" class="rounded border border-gray-200">
|
<div
|
class="grid grid-cols-12 gap-2 border-b border-gray-200 bg-gray-50 p-2 text-xs font-medium"
|
>
|
<div class="col-span-3">参数名称</div>
|
<div class="col-span-2">参数编码</div>
|
<div class="col-span-2">参数类型</div>
|
<div class="col-span-1">单位</div>
|
<div class="col-span-1 text-center">是否必填</div>
|
<div class="col-span-1">排序</div>
|
<div class="col-span-1">备注</div>
|
<div class="col-span-1 text-center">操作</div>
|
</div>
|
<div
|
v-for="(item, index) in boundList"
|
:key="item.processParamId || index"
|
class="grid grid-cols-12 items-center gap-2 border-b border-gray-100 p-2"
|
>
|
<div class="col-span-3 text-sm">{{ item.paramName }}</div>
|
<div class="col-span-2 text-sm text-gray-500">{{ item.paramCode }}</div>
|
<div class="col-span-2">
|
<DictTag
|
v-if="item.paramType !== undefined"
|
:type="DICT_TYPE.MES_PD_PARAM_TYPE"
|
:value="item.paramType"
|
/>
|
</div>
|
<div class="col-span-1 text-sm">{{ item.unitMeasureName }}</div>
|
<div class="col-span-1 flex items-center justify-center">
|
<Switch v-model:checked="item.required" size="small" />
|
</div>
|
<div class="col-span-1">
|
<InputNumber
|
v-model:value="item.sort"
|
:min="1"
|
size="small"
|
class="w-full"
|
/>
|
</div>
|
<div class="col-span-1">
|
<Input
|
v-model:value="item.remark"
|
placeholder="备注"
|
size="small"
|
/>
|
</div>
|
<div class="col-span-1 flex items-center justify-center">
|
<Button type="text" danger size="small" @click="removeItem(index)">
|
删除
|
</Button>
|
</div>
|
</div>
|
</div>
|
<div
|
v-else
|
class="rounded border border-dashed border-gray-300 p-4 text-center text-gray-400"
|
>
|
{{ loading ? '加载中…' : '暂未绑定参数' }}
|
</div>
|
</div>
|
<ParameterSelectDialog
|
ref="parameterSelectDialogRef"
|
@selected="onParametersSelected"
|
/>
|
</Modal>
|
</template>
|
