From 07895c65b99fa43f8e54f5054bd8351a71158143 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期四, 17 十月 2024 21:17:28 +0800
Subject: [PATCH] 工艺路线绑定优化
---
src/views/demo/form/AppendForm.vue | 308 +++++++++++++++++++++++++++++++-------------------
1 files changed, 189 insertions(+), 119 deletions(-)
diff --git a/src/views/demo/form/AppendForm.vue b/src/views/demo/form/AppendForm.vue
index d35eaa0..80ba3e0 100644
--- a/src/views/demo/form/AppendForm.vue
+++ b/src/views/demo/form/AppendForm.vue
@@ -1,133 +1,203 @@
<template>
<PageWrapper title="琛ㄥ崟澧炲垹绀轰緥">
- <CollapseContainer title="琛ㄥ崟澧炲垹">
+ <CollapseContainer title="琛ㄥ崟椤瑰鍒�">
<BasicForm @register="register" @submit="handleSubmit">
<template #add="{ field }">
- <Button v-if="Number(field) === 0" @click="add">+</Button>
- <Button class="ml-2" v-if="Number(field) === 0" @click="batchAdd">
+ <a-button v-if="Number(field) === 0" @click="add">+</a-button>
+ <a-button class="ml-2" v-if="Number(field) === 0" @click="batchAdd">
鎵归噺娣诲姞琛ㄥ崟閰嶇疆
- </Button>
- <Button v-if="field > 0" @click="del(field)">-</Button>
+ </a-button>
+ <a-button v-if="Number(field) > 0" @click="() => del(field)">-</a-button>
</template>
</BasicForm>
</CollapseContainer>
+ <CollapseContainer title="琛ㄥ崟缁勫鍒�" class="my-3">
+ <a-button @click="setGroup">璁剧疆鍒濆鍊�</a-button>
+ <a-button class="m-2" @click="addGroup"> 鎵归噺娣诲姞琛ㄥ崟 </a-button>
+ <a-button @click="delGroup">鎵归噺鍑忓皯琛ㄥ崟</a-button>
+ <BasicForm @register="registerGroup" @submit="handleSubmitGroup" />
+ </CollapseContainer>
</PageWrapper>
</template>
-<script lang="ts">
- import { defineComponent, ref } from 'vue';
- import { BasicForm, useForm } from '/@/components/Form/index';
- import { CollapseContainer } from '/@/components/Container';
- import { Input } from 'ant-design-vue';
- import { PageWrapper } from '/@/components/Page';
- import { Button } from '/@/components/Button';
+<script lang="ts" setup>
+ import { ref } from 'vue';
+ import { BasicForm, useForm } from '@/components/Form';
+ import { CollapseContainer } from '@/components/Container';
+ import { PageWrapper } from '@/components/Page';
- export default defineComponent({
- components: { BasicForm, CollapseContainer, PageWrapper, [Input.name]: Input, Button },
- setup() {
- const [register, { appendSchemaByField, removeSchemaByField, validate }] = useForm({
- schemas: [
- {
- field: 'field0a',
- component: 'Input',
- label: '瀛楁0',
- required: true,
- },
- {
- field: 'field0b',
- component: 'Input',
- label: '瀛楁0',
- required: true,
- },
- {
- field: '0',
- component: 'Input',
- label: ' ',
- slot: 'add',
- },
- ],
- labelWidth: 100,
- actionColOptions: { span: 24 },
- baseColProps: { span: 8 },
- });
+ import { useMessage } from '@/hooks/web/useMessage';
- async function handleSubmit() {
- try {
- const data = await validate();
- console.log(data);
- } catch (e) {
- console.log(e);
- }
- }
-
- const n = ref(1);
-
- function add() {
- appendSchemaByField(
- {
- field: `field${n.value}a`,
- component: 'Input',
- label: '瀛楁' + n.value,
- required: true,
- },
- '',
- );
- appendSchemaByField(
- {
- field: `field${n.value}b`,
- component: 'Input',
- label: '瀛楁' + n.value,
- required: true,
- },
- '',
- );
-
- appendSchemaByField(
- {
- field: `${n.value}`,
- component: 'Input',
- label: ' ',
- slot: 'add',
- },
- '',
- );
- n.value++;
- }
- /**
- * @description: 鎵归噺娣诲姞
- */
- function batchAdd() {
- appendSchemaByField(
- [
- {
- field: `field${n.value}a`,
- component: 'Input',
- label: '瀛楁' + n.value,
- required: true,
- },
- {
- field: `field${n.value}b`,
- component: 'Input',
- label: '瀛楁' + n.value,
- required: true,
- },
- {
- field: `${n.value}`,
- component: 'Input',
- label: ' ',
- slot: 'add',
- },
- ],
- '',
- );
- n.value++;
- }
-
- function del(field) {
- removeSchemaByField([`field${field}a`, `field${field}b`, `${field}`]);
- n.value--;
- }
-
- return { register, handleSubmit, add, del, batchAdd };
- },
+ const { createMessage } = useMessage();
+ const count = ref(0);
+ const [register, { appendSchemaByField, removeSchemaByField, validate }] = useForm({
+ schemas: [
+ {
+ field: 'field0a',
+ component: 'Input',
+ label: '瀛楁0',
+ required: true,
+ },
+ {
+ field: 'field0b',
+ component: 'Input',
+ label: '瀛楁0',
+ required: true,
+ },
+ {
+ field: '0',
+ label: ' ',
+ slot: 'add',
+ },
+ ],
+ labelWidth: 100,
+ actionColOptions: { span: 24 },
+ baseColProps: { span: 8 },
});
+
+ async function handleSubmit() {
+ try {
+ const data = await validate();
+ createMessage.success('璇峰墠寰�鎺у埗鍙版煡鐪嬭緭鍑�');
+ console.log(data);
+ } catch (e) {
+ console.log(e);
+ }
+ }
+
+ const n = ref(1);
+
+ function add() {
+ appendSchemaByField(
+ {
+ field: `field${n.value}a`,
+ component: 'Input',
+ label: '瀛楁' + n.value,
+ required: true,
+ },
+ '',
+ );
+ appendSchemaByField(
+ {
+ field: `field${n.value}b`,
+ component: 'Input',
+ label: '瀛楁' + n.value,
+ required: true,
+ },
+ '',
+ );
+
+ appendSchemaByField(
+ {
+ field: `${n.value}`,
+ component: 'Input',
+ label: ' ',
+ slot: 'add',
+ },
+ '',
+ );
+ n.value++;
+ }
+ /**
+ * @description: 鎵归噺娣诲姞
+ */
+ function batchAdd() {
+ appendSchemaByField(
+ [
+ {
+ field: `field${n.value}a`,
+ component: 'Input',
+ label: '瀛楁' + n.value,
+ required: true,
+ },
+ {
+ field: `field${n.value}b`,
+ component: 'Input',
+ label: '瀛楁' + n.value,
+ required: true,
+ },
+ {
+ field: `${n.value}`,
+ component: 'Input',
+ label: ' ',
+ slot: 'add',
+ },
+ ],
+ '',
+ );
+ n.value++;
+ }
+
+ function del(field: string) {
+ removeSchemaByField([`field${field}a`, `field${field}b`, `${field}`]);
+ n.value--;
+ }
+ const [
+ registerGroup,
+ {
+ appendSchemaByField: appendSchemaByFieldGroup,
+ removeSchemaByField: removeSchemaByFieldGroup,
+ getFieldsValue: getFieldsValueGroup,
+ setFieldsValue,
+ },
+ ] = useForm({
+ schemas: [
+ {
+ field: `field[${count.value}].a`,
+ component: 'Input',
+ label: '瀛楁a',
+ colProps: { span: 9 },
+ },
+ {
+ field: `field[${count.value}].b`,
+ colProps: { span: 9 },
+ component: 'Input',
+ label: '瀛楁b',
+ },
+ ],
+ labelWidth: 100,
+ actionColOptions: { span: 24 },
+ baseColProps: { span: 8 },
+ });
+
+ function addGroup() {
+ count.value++;
+ appendSchemaByFieldGroup(
+ [
+ {
+ field: `field[${count.value}].a`,
+ component: 'Input',
+ colProps: { span: 9 },
+ label: '瀛楁a',
+ },
+ {
+ field: `field[${count.value}].b`,
+ component: 'Input',
+ colProps: { span: 9 },
+ label: '瀛楁b',
+ },
+ ],
+ '',
+ );
+ }
+
+ function delGroup() {
+ removeSchemaByFieldGroup([`field[${count.value}].a`, `field[${count.value}].b`]);
+ count.value--;
+ }
+
+ function setGroup() {
+ setFieldsValue({
+ field: [
+ {
+ a: '榛樿a',
+ b: '榛樿b',
+ },
+ ],
+ });
+ }
+
+ function handleSubmitGroup() {
+ createMessage.success('璇峰墠寰�鎺у埗鍙版煡鐪嬭緭鍑�');
+ console.log(getFieldsValueGroup());
+ }
</script>
--
Gitblit v1.9.3