From 8d6b574a04d1cba911465aabb042c093ab2f646c Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 10 七月 2026 16:56:42 +0800
Subject: [PATCH] mes基础参数/参数模版接口调用
---
src/views/mes/process-design/template/modules/form.vue | 317 +++++++++++++++++++++++++++++-----------------------
1 files changed, 175 insertions(+), 142 deletions(-)
diff --git a/src/views/mes/process-design/template/modules/form.vue b/src/views/mes/process-design/template/modules/form.vue
index 8d824f3..158d321 100644
--- a/src/views/mes/process-design/template/modules/form.vue
+++ b/src/views/mes/process-design/template/modules/form.vue
@@ -1,173 +1,206 @@
<script lang="ts" setup>
-import type { FormType } from '../data';
+ import type { FormType } from "../data";
-import type { MesPdParameterApi } from '#/api/mes/pro/processdesign/parameter';
-import type { MesPdTemplateApi } from '#/api/mes/pro/processdesign/template';
+ import type { MesPdParameterApi } from "#/api/mes/pro/processdesign/parameter";
+ import type { MesPdTemplateApi } from "#/api/mes/pro/processdesign/template";
-import { computed, ref } from 'vue';
+ import { computed, ref } from "vue";
-import { useVbenModal } from '../../../../../packages/effects/common-ui/src';
+ import { useVbenModal } from "../../../../../packages/effects/common-ui/src";
-import { Button, message, Tag } from 'ant-design-vue';
+ import { Button, message, Switch, Input } from "ant-design-vue";
-import { useVbenForm } from '#/adapter/form';
-import {
- createTemplate,
- getTemplate,
- updateTemplate,
-} from '#/api/mes/pro/processdesign/template';
-import { $t } from '#/locales';
+ import { useVbenForm } from "#/adapter/form";
+ import {
+ createTemplate,
+ getTemplate,
+ updateTemplate,
+ } from "#/api/mes/pro/processdesign/template";
+ import { $t } from "#/locales";
-import { useFormSchema } from '../data';
-import ParameterSelectDialog from './parameter-select-dialog.vue';
+ import { useFormSchema } from "../data";
+ import ParameterSelectDialog from "./parameter-select-dialog.vue";
-const emit = defineEmits(['success']);
-const formType = ref<FormType>('create');
-const formData = ref<MesPdTemplateApi.Template>();
+ const emit = defineEmits(["success"]);
+ const formType = ref<FormType>("create");
+ const formData = ref<MesPdTemplateApi.Template>();
-/** 宸查�夊弬鏁板垪琛紙鐢ㄤ簬椤甸潰灞曠ず锛� */
-const selectedParameters = ref<MesPdParameterApi.Parameter[]>([]);
-const parameterSelectDialogRef = ref<InstanceType<typeof ParameterSelectDialog>>();
+ /** 宸查�夊弬鏁板垪琛紙鐢ㄤ簬椤甸潰灞曠ず锛� */
+ const selectedDetails = ref<MesPdTemplateApi.TemplateDetail[]>([]);
+ const parameterSelectDialogRef =
+ ref<InstanceType<typeof ParameterSelectDialog>>();
-const isDetail = computed(() => formType.value === 'detail');
-const getTitle = computed(() => {
- if (formType.value === 'detail') {
- return $t('ui.actionTitle.detail', ['宸ヨ壓鍙傛暟妯℃澘']);
- }
- return formType.value === 'update'
- ? $t('ui.actionTitle.edit', ['宸ヨ壓鍙傛暟妯℃澘'])
- : $t('ui.actionTitle.create', ['宸ヨ壓鍙傛暟妯℃澘']);
-});
+ const isDetail = computed(() => formType.value === "detail");
+ const getTitle = computed(() => {
+ if (formType.value === "detail") {
+ return $t("ui.actionTitle.detail", ["宸ヨ壓鍙傛暟妯℃澘"]);
+ }
+ return formType.value === "update"
+ ? $t("ui.actionTitle.edit", ["宸ヨ壓鍙傛暟妯℃澘"])
+ : $t("ui.actionTitle.create", ["宸ヨ壓鍙傛暟妯℃澘"]);
+ });
-const [Form, formApi] = useVbenForm({
- commonConfig: {
- componentProps: {
- class: 'w-full',
+ const [Form, formApi] = useVbenForm({
+ commonConfig: {
+ componentProps: {
+ class: "w-full",
+ },
+ formItemClass: "col-span-1",
+ labelWidth: 100,
},
- formItemClass: 'col-span-1',
- labelWidth: 100,
- },
- layout: 'horizontal',
- schema: [],
- showDefaultActions: false,
- wrapperClass: 'grid-cols-2',
-});
+ layout: "horizontal",
+ schema: [],
+ showDefaultActions: false,
+ wrapperClass: "grid-cols-2",
+ });
-/** 鎵撳紑宸ヨ壓鍙傛暟閫夋嫨寮圭獥 */
-function handleSelectParameters() {
- parameterSelectDialogRef.value?.open(
- selectedParameters.value
- .map((p) => p.id)
- .filter((id): id is number => id !== undefined),
- );
-}
+ /** 鎵撳紑宸ヨ壓鍙傛暟閫夋嫨寮圭獥 */
+ function handleSelectParameters() {
+ parameterSelectDialogRef.value?.open(
+ selectedDetails.value
+ .map(d => d.processParamId)
+ .filter((id): id is number => id !== undefined)
+ );
+ }
-/** 鎺ユ敹閫変腑鐨勫弬鏁� */
-function onParametersSelected(rows: MesPdParameterApi.Parameter[]) {
- selectedParameters.value = rows;
-}
+ /** 鎺ユ敹閫変腑鐨勫弬鏁� */
+ function onParametersSelected(rows: MesPdParameterApi.Parameter[]) {
+ selectedDetails.value = rows.map(row => ({
+ processParamId: row.id,
+ paramCode: row.paramCode,
+ paramName: row.paramName,
+ paramType: row.paramType,
+ unitMeasureName: row.unitMeasureName,
+ required: row.required,
+ remark: row.remark,
+ }));
+ }
-/** 绉婚櫎宸查�夊弬鏁� */
-function removeParameter(param: MesPdParameterApi.Parameter) {
- selectedParameters.value = selectedParameters.value.filter(
- (p) => p.id !== param.id,
- );
-}
+ /** 绉婚櫎宸查�夊弬鏁� */
+ function removeParameter(index: number) {
+ selectedDetails.value.splice(index, 1);
+ }
-const [Modal, modalApi] = useVbenModal({
- async onConfirm() {
- if (isDetail.value) {
- await modalApi.close();
- return;
- }
- const { valid } = await formApi.validate();
- if (!valid) {
- return;
- }
- if (selectedParameters.value.length === 0) {
- message.warning('璇疯嚦灏戦�夋嫨涓�涓伐鑹哄弬鏁�');
- return;
- }
- modalApi.lock();
- const data = (await formApi.getValues()) as MesPdTemplateApi.Template;
- data.parameterIds = selectedParameters.value
- .map((p) => p.id)
- .filter((id): id is number => id !== undefined);
- try {
- await (formData.value?.id ? updateTemplate(data) : createTemplate(data));
- await modalApi.close();
- emit('success');
- message.success($t('ui.actionMessage.operationSuccess'));
- } finally {
- modalApi.unlock();
- }
- },
- async onOpenChange(isOpen: boolean) {
- if (!isOpen) {
- formData.value = undefined;
- selectedParameters.value = [];
- return;
- }
- formApi.setState({ schema: useFormSchema() });
- const data = modalApi.getData<{ formType: FormType; id?: number }>();
- formType.value = data.formType;
- formApi.setDisabled(formType.value === 'detail');
- modalApi.setState({ showConfirmButton: formType.value !== 'detail' });
- if (!data?.id) {
- return;
- }
- modalApi.lock();
- try {
- formData.value = await getTemplate(data.id);
- await formApi.setValues(formData.value);
- // 鍥炴樉宸查�夊弬鏁帮紙浠庤鎯呮帴鍙ｈ繑鍥炵殑鍙傛暟鍒楄〃涓幏鍙栵級
- if (formData.value.parameterIds) {
- // parameterIds 宸茬敱鍚庣杩斿洖锛宻electedParameters 鍦ㄨ鎯呮ā寮忎笅灞曠ず
+ const [Modal, modalApi] = useVbenModal({
+ async onConfirm() {
+ if (isDetail.value) {
+ await modalApi.close();
+ return;
}
- } finally {
- modalApi.unlock();
- }
- },
-});
+ const { valid } = await formApi.validate();
+ if (!valid) {
+ return;
+ }
+ if (selectedDetails.value.length === 0) {
+ message.warning("璇疯嚦灏戦�夋嫨涓�涓伐鑹哄弬鏁�");
+ return;
+ }
+ modalApi.lock();
+ const data = (await formApi.getValues()) as MesPdTemplateApi.Template;
+ data.details = selectedDetails.value.map(d => ({
+ ...d,
+ processParamId: d.processParamId,
+ required: d.required,
+ remark: d.remark,
+ }));
+ try {
+ await (formData.value?.id ? updateTemplate(data) : createTemplate(data));
+ await modalApi.close();
+ emit("success");
+ message.success($t("ui.actionMessage.operationSuccess"));
+ } finally {
+ modalApi.unlock();
+ }
+ },
+ async onOpenChange(isOpen: boolean) {
+ if (!isOpen) {
+ formData.value = undefined;
+ selectedDetails.value = [];
+ return;
+ }
+ formApi.setState({ schema: useFormSchema() });
+ const data = modalApi.getData<{ formType: FormType; id?: number }>();
+ formType.value = data.formType;
+ formApi.setDisabled(formType.value === "detail");
+ modalApi.setState({ showConfirmButton: formType.value !== "detail" });
+ if (!data?.id) {
+ return;
+ }
+ modalApi.lock();
+ try {
+ formData.value = await getTemplate(data.id);
+ await formApi.setValues(formData.value);
+ // 鍥炴樉宸查�夊弬鏁帮紙浠庤鎯呮帴鍙ｈ繑鍥炵殑鍙傛暟鍒楄〃涓幏鍙栵級
+ if (formData.value.details) {
+ selectedDetails.value = [...formData.value.details];
+ }
+ } finally {
+ modalApi.unlock();
+ }
+ },
+ });
</script>
<template>
- <Modal :title="getTitle" class="w-4/5">
+ <Modal :title="getTitle"
+ class="w-4/5">
<Form class="mx-4" />
- <!-- 鍏宠仈鍙傛暟閫夋嫨鍖哄煙 -->
+ <!-- 妯℃澘鏄庣粏鍖哄煙 -->
<div class="mx-4 mt-4">
<div class="mb-2 flex items-center justify-between">
- <span class="text-sm font-medium">鍏宠仈宸ヨ壓鍙傛暟</span>
- <Button
- v-if="!isDetail"
- type="primary"
- size="small"
- @click="handleSelectParameters"
- >
- 閫夋嫨鍙傛暟
+ <span class="text-sm font-medium">妯℃澘鏄庣粏</span>
+ <Button v-if="!isDetail"
+ type="primary"
+ size="small"
+ @click="handleSelectParameters">
+ 娣诲姞鍙傛暟
</Button>
</div>
- <div
- v-if="selectedParameters.length > 0"
- class="min-h-10 rounded border border-gray-200 p-2"
- >
- <Tag
- v-for="param in selectedParameters"
- :key="param.id"
- :closable="!isDetail"
- class="mb-1 mr-1"
- @close="removeParameter(param)"
- >
- {{ param.name }}({{ param.code }})
- </Tag>
+ <div v-if="selectedDetails.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-2 text-center">鏄惁蹇呭～</div>
+ <div class="col-span-2">澶囨敞</div>
+ <div v-if="!isDetail"
+ class="col-span-1 text-center">鎿嶄綔</div>
+ </div>
+ <div v-for="(detail, index) in selectedDetails"
+ :key="detail.processParamId || index"
+ class="grid grid-cols-12 gap-2 border-b border-gray-100 p-2">
+ <div class="col-span-3 text-sm">{{ detail.paramName }}</div>
+ <div class="col-span-2 text-sm text-gray-500">{{ detail.paramCode }}</div>
+ <div class="col-span-2 text-sm">{{ detail.unitMeasureName }}</div>
+ <div class="col-span-2 flex items-center justify-center">
+ <Switch v-model:checked="detail.required"
+ :disabled="isDetail"
+ size="small" />
+ </div>
+ <div class="col-span-2">
+ <Input v-model:value="detail.remark"
+ :disabled="isDetail"
+ placeholder="澶囨敞"
+ size="small" />
+ </div>
+ <div v-if="!isDetail"
+ class="col-span-1 flex items-center justify-center">
+ <Button type="text"
+ danger
+ size="small"
+ @click="removeParameter(index)">
+ 鍒犻櫎
+ </Button>
+ </div>
+ </div>
</div>
- <div v-else class="rounded border border-dashed border-gray-300 p-4 text-center text-gray-400">
+ <div v-else
+ class="rounded border border-dashed border-gray-300 p-4 text-center text-gray-400">
鏆傛湭閫夋嫨鍙傛暟
</div>
</div>
- <ParameterSelectDialog
- ref="parameterSelectDialogRef"
- @selected="onParametersSelected"
- />
+ <ParameterSelectDialog ref="parameterSelectDialogRef"
+ @selected="onParametersSelected" />
</Modal>
</template>
--
Gitblit v1.9.3