From 9dfa701454d6a94690bad39dbb0e38f2a0b31489 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 18 六月 2024 18:08:47 +0800
Subject: [PATCH] build
---
src/views/demo/form/CustomerForm.vue | 230 +++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 196 insertions(+), 34 deletions(-)
diff --git a/src/views/demo/form/CustomerForm.vue b/src/views/demo/form/CustomerForm.vue
index abb384d..5217c85 100644
--- a/src/views/demo/form/CustomerForm.vue
+++ b/src/views/demo/form/CustomerForm.vue
@@ -1,22 +1,43 @@
<template>
<PageWrapper title="鑷畾涔夌粍浠剁ず渚�">
<CollapseContainer title="鑷畾涔夎〃鍗�">
- <BasicForm @register="register" @submit="handleSubmit">
- <template #f3="{ model, field }">
- <a-input v-model:value="model[field]" placeholder="鑷畾涔塻lot" />
+ <BasicForm class="local_form" @register="register" @submit="handleSubmit">
+ <template #f3="{ model, field, disabled }">
+ <a-input v-model:value="model[field]" :disabled="disabled" placeholder="鑷畾涔塻lot" />
+ </template>
+ <template #colSlot_field5="{ model, field, disabled }">
+ <FormItem :name="field" label="鑷畾涔塩olSlot" :rules="[{ required: true }]">
+ <a-input
+ v-model:value="model[field]"
+ :disabled="disabled"
+ placeholder="鑷畾涔塩olSlot"
+ />
+ </FormItem>
</template>
</BasicForm>
</CollapseContainer>
</PageWrapper>
</template>
-<script lang="ts">
- import { defineComponent, h } from 'vue';
- import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
- import { CollapseContainer } from '/@/components/Container/index';
- import { useMessage } from '/@/hooks/web/useMessage';
- import { Input } from 'ant-design-vue';
- import { PageWrapper } from '/@/components/Page';
+<script lang="tsx" setup>
+ import { h } from 'vue';
+ import { BasicForm, FormSchema, useForm } from '@/components/Form';
+ import { CollapseContainer } from '@/components/Container';
+ import { useMessage } from '@/hooks/web/useMessage';
+ import { Input, FormItem, FormItemRest, Select } from 'ant-design-vue';
+ import { PageWrapper } from '@/components/Page';
+ const custom_typeKey2typeValueRules = (model) => {
+ return [
+ {
+ required: true,
+ validator: async () => {
+ if (!model.typeKey) return Promise.reject('璇烽�夋嫨绫诲瀷');
+ if (!model.typeValue) return Promise.reject('璇疯緭鍏ユ暟鎹�');
+ Promise.resolve();
+ },
+ },
+ ];
+ };
const schemas: FormSchema[] = [
{
field: 'field1',
@@ -25,14 +46,18 @@
colProps: {
span: 8,
},
+ dynamicDisabled: ({ values }) => {
+ return !!values.field_disabled;
+ },
rules: [{ required: true }],
- render: ({ model, field }) => {
+ render: ({ model, field }, { disabled }) => {
return h(Input, {
placeholder: '璇疯緭鍏�',
value: model[field],
- onChange: (e: ChangeEvent) => {
+ onChange: (e) => {
model[field] = e.target.value;
},
+ disabled,
});
},
},
@@ -43,43 +68,180 @@
colProps: {
span: 8,
},
+ dynamicDisabled: ({ values }) => {
+ return !!values.field_disabled;
+ },
rules: [{ required: true }],
- renderComponentContent: () => {
+ renderComponentContent: (_, { disabled }) => {
return {
- suffix: () => 'suffix',
+ suffix: () => (disabled ? 'suffix_disabled' : 'suffix_default'),
};
},
},
{
field: 'field3',
- component: 'Input',
label: '鑷畾涔塖lot',
slot: 'f3',
colProps: {
span: 8,
},
+ dynamicDisabled: ({ values }) => {
+ return !!values.field_disabled;
+ },
rules: [{ required: true }],
},
+ {
+ field: 'field4',
+ component: 'Input',
+ // label: 'renderColContent娓叉煋',
+ /**!!!renderColContent 娌℃湁FormItem 鍖呰９, 鑻ユ兂瑕� Form 鎻愪氦闇�瑕佸甫涓婃暟鎹』 <FormItem name={}></FormItem> 鍖呰９锛� 绀轰緥濡備笅*/
+ renderColContent({ model, field }, { disabled }) {
+ return (
+ <FormItem name="field4" label="renderColContent娓叉煋" rules={[{ required: true }]}>
+ <Input placeholder="璇疯緭鍏�" v-model:value={model[field]} disabled={disabled}></Input>
+ </FormItem>
+ );
+ },
+ colProps: {
+ span: 8,
+ },
+ dynamicDisabled: ({ values }) => {
+ return !!values.field_disabled;
+ },
+ },
+ {
+ field: 'field5',
+ component: 'Input',
+ label: '鑷畾涔塩olSlot',
+ /**!!!renderColContent 娌℃湁FormItem 鍖呰９, 鑻ユ兂瑕� Form 鎻愪氦闇�瑕佸甫涓婃暟鎹』 <FormItem name={}></FormItem> 鍖呰９锛� 绀轰緥濡備笅*/
+ colSlot: 'colSlot_field5',
+ colProps: {
+ span: 8,
+ },
+ dynamicDisabled: ({ values }) => {
+ return !!values.field_disabled;
+ },
+ },
+ // 澶嶅悎field 鍦烘櫙 鑷畾涔夎〃鍗曟帶浠� 涓�涓帶浠跺寘鍚涓〃鍗曞綍鍏� 绀轰緥: 閫夋嫨+杈撳叆
+ {
+ required: true,
+ field: 'typeKey2',
+ defaultValue: '娴嬭瘯绫诲瀷',
+ fields: ['typeValue2'],
+ defaultValueObj: { typeValue2: '榛樿娴嬭瘯_鏂囧瓧' },
+ component: 'Input',
+ label: '澶嶅悎field render',
+ render({ model, field }, { disabled }) {
+ return (
+ <Input.Group compact>
+ <Select
+ disabled={disabled}
+ style="width: 120px"
+ allowClear
+ v-model:value={model[field]}
+ >
+ <Select.Option value="娴嬭瘯绫诲瀷">娴嬭瘯绫诲瀷</Select.Option>
+ <Select.Option value="娴嬭瘯鍚嶇О">娴嬭瘯鍚嶇О</Select.Option>
+ </Select>
+ <FormItem name="typeValue2" class="local_typeValue" rules={[{ required: true }]}>
+ <FormItemRest>
+ <Input
+ placeholder="璇疯緭鍏�"
+ v-model:value={model['typeValue2']}
+ disabled={disabled}
+ />
+ </FormItemRest>
+ </FormItem>
+ </Input.Group>
+ );
+ },
+ colProps: {
+ span: 8,
+ },
+ dynamicDisabled: ({ values }) => {
+ return !!values.field_disabled;
+ },
+ },
+ // 澶嶅悎field 鍦烘櫙 鑷畾涔夎〃鍗曟帶浠� 涓�涓帶浠跺寘鍚涓〃鍗曞綍鍏� 绀轰緥: 閫夋嫨+杈撳叆
+ {
+ field: 'typeKey',
+ defaultValue: '鍏徃鍚嶇О',
+ fields: ['typeValue'],
+ defaultValueObj: { typeValue: '榛樿鏂囧瓧' },
+ component: 'Input',
+ // label: 'renderColContent娓叉煋',
+ /**!!!renderColContent 娌℃湁FormItem 鍖呰９, 鑻ユ兂瑕� Form 鎻愪氦闇�瑕佸甫涓婃暟鎹』 <FormItem name={}></FormItem> 鍖呰９锛� 绀轰緥濡備笅*/
+ renderColContent({ model, field }, { disabled }) {
+ return (
+ <FormItem
+ name="typeKey"
+ label="澶嶅悎field renderColContent"
+ rules={custom_typeKey2typeValueRules(model)}
+ >
+ <Input.Group compact>
+ <Select
+ allowClear
+ disabled={disabled}
+ style="width: 120px"
+ v-model:value={model[field]}
+ >
+ <Select.Option value="鍏徃鍚嶇О">鍏徃鍚嶇О</Select.Option>
+ <Select.Option value="浜у搧鍚嶇О">浜у搧鍚嶇О</Select.Option>
+ </Select>
+ <FormItemRest>
+ <Input
+ style="width: calc(100% - 120px); margin-left: -1px;"
+ placeholder="璇疯緭鍏�"
+ v-model:value={model['typeValue']}
+ disabled={disabled}
+ />
+ </FormItemRest>
+ </Input.Group>
+ </FormItem>
+ );
+ },
+ colProps: {
+ span: 16,
+ },
+ dynamicDisabled: ({ values }) => {
+ return !!values.field_disabled;
+ },
+ },
+ {
+ field: 'field_disabled',
+ component: 'Switch',
+ label: '鏄惁绂佺敤 缂栬緫瀛楁',
+ colProps: {
+ span: 8,
+ },
+ labelWidth: 200,
+ },
];
- export default defineComponent({
- components: { BasicForm, CollapseContainer, PageWrapper, [Input.name]: Input },
- setup() {
- const { createMessage } = useMessage();
- const [register, { setProps }] = useForm({
- labelWidth: 120,
- schemas,
- actionColOptions: {
- span: 24,
- },
- });
- return {
- register,
- schemas,
- handleSubmit: (values: any) => {
- createMessage.success('click search,values:' + JSON.stringify(values));
- },
- setProps,
- };
+ const { createMessage } = useMessage();
+
+ const [register] = useForm({
+ labelWidth: 120,
+ schemas,
+ actionColOptions: {
+ span: 24,
},
});
+
+ function handleSubmit(values: any) {
+ console.log('submit values', values);
+ createMessage.success('click search,values:' + JSON.stringify(values));
+ }
</script>
+
+<style lang="less" scoped>
+ :deep(.local_form) .local_typeValue {
+ width: calc(100% - 120px);
+ margin-bottom: 0;
+ margin-left: -1px;
+ border-right: 0;
+
+ .ant-input {
+ border-radius: 0 6px 6px 0;
+ }
+ }
+</style>
--
Gitblit v1.9.3