feat(@vben/web-antd): 新增工单中心取消表单组件

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web-antd/src/views/ops/work-order/modules/cancel-form.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Alert, message } from 'ant-design-vue';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { cancelOrder } from '#/api/ops/order-center';
+
+defineOptions({ name: 'CancelOrderForm' });
+
+const emit = defineEmits<{ success: [] }>();
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange: (isOpen) => {
+    if (isOpen) {
+      const data = modalApi.getData<{
+        orderCode: string;
+        orderId: number;
+        title: string;
+      }>();
+      if (data) {
+        orderId.value = data.orderId;
+        orderCode.value = data.orderCode;
+        orderTitle.value = data.title;
+      }
+    }
+  },
+  onConfirm: handleSubmit,
+});
+
+const orderId = ref<number>();
+const orderCode = ref<string>('');
+const orderTitle = ref<string>('');
+const loading = ref(false);
+
+const [Form, formApi] = useVbenForm({
+  schema: [
+    {
+      fieldName: 'reason',
+      label: '取消原因',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入取消工单的原因',
+        rows: 4,
+        maxLength: 200,
+        showCount: true,
+      },
+      rules: z
+        .string()
+        .min(2, '原因至少2个字符')
+        .max(200, '原因不能超过200字符'),
+    },
+  ],
+  showDefaultActions: false,
+});
+
+/** 提交表单 */
+async function handleSubmit() {
+  const { valid, values } = await formApi.validate();
+  if (!valid) return;
+
+  loading.value = true;
+  try {
+    await cancelOrder({
+      id: orderId.value!,
+      reason: values.reason,
+    });
+    message.success('工单已取消');
+    modalApi.close();
+    emit('success');
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <Modal title="取消工单" class="w-[480px]">
+    <div class="cancel-form">
+      <!-- 警告提示 -->
+      <Alert
+        type="error"
+        show-icon
+        class="mb-4"
+        message="取消后工单将无法恢复，请确认操作"
+      >
+        <template #icon>
+          <IconifyIcon icon="lucide:alert-circle" class="text-red-500" />
+        </template>
+      </Alert>
+
+      <!-- 工单信息 -->
+      <div class="mb-4 rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
+        <div class="mb-2 text-sm text-gray-500">
+          工单编号：<span
+            class="font-medium text-gray-700 dark:text-gray-300"
+            >{{ orderCode }}</span
+          >
+        </div>
+        <div class="text-sm text-gray-500">
+          工单标题：<span
+            class="font-medium text-gray-700 dark:text-gray-300"
+            >{{ orderTitle }}</span
+          >
+        </div>
+      </div>
+
+      <!-- 表单 -->
+      <Form />
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+.cancel-form {
+  :deep(.ant-form-item) {
+    margin-bottom: 0;
+  }
+}
+</style>