feat: 去除 slotName 使用input upload
parent
ba18eb37da
commit
7b886b315b
|
@ -1,5 +1,8 @@
|
||||||
import type { VbenFormSchema } from '#/adapter/form';
|
import type { VbenFormSchema } from '#/adapter/form';
|
||||||
|
|
||||||
|
import { h } from 'vue';
|
||||||
|
|
||||||
|
import { InputUpload } from '#/components/upload';
|
||||||
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
|
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
|
||||||
|
|
||||||
export function channelSchema(formType: string): VbenFormSchema[] {
|
export function channelSchema(formType: string): VbenFormSchema[] {
|
||||||
|
@ -147,13 +150,14 @@ export function channelSchema(formType: string): VbenFormSchema[] {
|
||||||
{
|
{
|
||||||
label: '商户公钥应用证书',
|
label: '商户公钥应用证书',
|
||||||
fieldName: 'config.appCertContent',
|
fieldName: 'config.appCertContent',
|
||||||
slotName: 'appCertContent',
|
component: h(InputUpload, {
|
||||||
component: 'Textarea',
|
inputType: 'textarea',
|
||||||
|
textareaProps: { rows: 8, placeholder: '请上传商户公钥应用证书' },
|
||||||
|
fileUploadProps: {
|
||||||
|
accept: ['crt'],
|
||||||
|
},
|
||||||
|
}),
|
||||||
rules: 'required',
|
rules: 'required',
|
||||||
componentProps: {
|
|
||||||
placeholder: '请上传商户公钥应用证书',
|
|
||||||
rows: 8,
|
|
||||||
},
|
|
||||||
dependencies: {
|
dependencies: {
|
||||||
show(values) {
|
show(values) {
|
||||||
return values?.config?.mode === 1;
|
return values?.config?.mode === 1;
|
||||||
|
@ -164,13 +168,14 @@ export function channelSchema(formType: string): VbenFormSchema[] {
|
||||||
{
|
{
|
||||||
label: '支付宝公钥证书',
|
label: '支付宝公钥证书',
|
||||||
fieldName: 'config.alipayPublicCertContent',
|
fieldName: 'config.alipayPublicCertContent',
|
||||||
slotName: 'alipayPublicCertContent',
|
component: h(InputUpload, {
|
||||||
component: 'Textarea',
|
inputType: 'textarea',
|
||||||
|
textareaProps: { rows: 8, placeholder: '请上传支付宝公钥证书' },
|
||||||
|
fileUploadProps: {
|
||||||
|
accept: ['crt'],
|
||||||
|
},
|
||||||
|
}),
|
||||||
rules: 'required',
|
rules: 'required',
|
||||||
componentProps: {
|
|
||||||
placeholder: '请上传支付宝公钥证书',
|
|
||||||
rows: 8,
|
|
||||||
},
|
|
||||||
dependencies: {
|
dependencies: {
|
||||||
show(values) {
|
show(values) {
|
||||||
return values?.config?.mode === 1;
|
return values?.config?.mode === 1;
|
||||||
|
@ -181,13 +186,14 @@ export function channelSchema(formType: string): VbenFormSchema[] {
|
||||||
{
|
{
|
||||||
label: '根证书',
|
label: '根证书',
|
||||||
fieldName: 'config.rootCertContent',
|
fieldName: 'config.rootCertContent',
|
||||||
slotName: 'rootCertContent',
|
component: h(InputUpload, {
|
||||||
component: 'Textarea',
|
inputType: 'textarea',
|
||||||
|
textareaProps: { rows: 8, placeholder: '请上传根证书' },
|
||||||
|
fileUploadProps: {
|
||||||
|
accept: ['crt'],
|
||||||
|
},
|
||||||
|
}),
|
||||||
rules: 'required',
|
rules: 'required',
|
||||||
componentProps: {
|
|
||||||
placeholder: '请上传根证书',
|
|
||||||
rows: 8,
|
|
||||||
},
|
|
||||||
dependencies: {
|
dependencies: {
|
||||||
show(values) {
|
show(values) {
|
||||||
return values?.config?.mode === 1;
|
return values?.config?.mode === 1;
|
||||||
|
@ -453,12 +459,17 @@ export function channelSchema(formType: string): VbenFormSchema[] {
|
||||||
{
|
{
|
||||||
label: 'apiclient_cert.p12 证书',
|
label: 'apiclient_cert.p12 证书',
|
||||||
fieldName: 'config.keyContent',
|
fieldName: 'config.keyContent',
|
||||||
slotName: 'keyContent',
|
component: h(InputUpload, {
|
||||||
component: 'Input',
|
inputType: 'textarea',
|
||||||
|
textareaProps: {
|
||||||
|
rows: 8,
|
||||||
|
placeholder: '请上传 apiclient_cert.p12 证书',
|
||||||
|
},
|
||||||
|
fileUploadProps: {
|
||||||
|
accept: ['p12 '],
|
||||||
|
},
|
||||||
|
}),
|
||||||
rules: 'required',
|
rules: 'required',
|
||||||
componentProps: {
|
|
||||||
placeholder: '请上传 apiclient_cert.p12 证书',
|
|
||||||
},
|
|
||||||
dependencies: {
|
dependencies: {
|
||||||
show(values) {
|
show(values) {
|
||||||
return values?.config?.apiVersion === 'v2';
|
return values?.config?.apiVersion === 'v2';
|
||||||
|
@ -484,12 +495,17 @@ export function channelSchema(formType: string): VbenFormSchema[] {
|
||||||
{
|
{
|
||||||
label: 'apiclient_key.pem 证书',
|
label: 'apiclient_key.pem 证书',
|
||||||
fieldName: 'config.privateKeyContent',
|
fieldName: 'config.privateKeyContent',
|
||||||
slotName: 'privateKeyContent',
|
component: h(InputUpload, {
|
||||||
component: 'Input',
|
inputType: 'textarea',
|
||||||
|
textareaProps: {
|
||||||
|
rows: 8,
|
||||||
|
placeholder: '请上传 apiclient_key.pem 证书',
|
||||||
|
},
|
||||||
|
fileUploadProps: {
|
||||||
|
accept: ['pem'],
|
||||||
|
},
|
||||||
|
}),
|
||||||
rules: 'required',
|
rules: 'required',
|
||||||
componentProps: {
|
|
||||||
placeholder: '请上传 apiclient_key.pem 证书',
|
|
||||||
},
|
|
||||||
dependencies: {
|
dependencies: {
|
||||||
show(values) {
|
show(values) {
|
||||||
return values?.config?.apiVersion === 'v3';
|
return values?.config?.apiVersion === 'v3';
|
||||||
|
|
|
@ -557,16 +557,4 @@ import { z } from '#/adapter/form';
|
||||||
|
|
||||||
除了以上内置插槽之外,`schema`属性中每个字段的`fieldName`都可以作为插槽名称,这些字段插槽的优先级高于`component`定义的组件。也就是说,当提供了与`fieldName`同名的插槽时,这些插槽的内容将会作为这些字段的组件,此时`component`的值将会被忽略。
|
除了以上内置插槽之外,`schema`属性中每个字段的`fieldName`都可以作为插槽名称,这些字段插槽的优先级高于`component`定义的组件。也就是说,当提供了与`fieldName`同名的插槽时,这些插槽的内容将会作为这些字段的组件,此时`component`的值将会被忽略。
|
||||||
|
|
||||||
如果需要使用自定义的插槽名而不是使用`fieldName`,可以在schema中添加`slotName`属性。当提供了`slotName`属性时,将优先使用`slotName`作为插槽名。
|
|
||||||
|
|
||||||
```ts
|
|
||||||
// 使用自定义插槽名的例子
|
|
||||||
{
|
|
||||||
component: 'Textarea',
|
|
||||||
fieldName: 'config.appCertContent',
|
|
||||||
slotName: 'appCertSlot',
|
|
||||||
label: '商户公钥应用证书',
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
|
@ -155,11 +155,7 @@ const computedSchema = computed(
|
||||||
:rules="cSchema.rules"
|
:rules="cSchema.rules"
|
||||||
>
|
>
|
||||||
<template #default="slotProps">
|
<template #default="slotProps">
|
||||||
<slot
|
<slot v-bind="slotProps" :name="cSchema.fieldName"> </slot>
|
||||||
v-bind="slotProps"
|
|
||||||
:name="cSchema.slotName || cSchema.fieldName"
|
|
||||||
>
|
|
||||||
</slot>
|
|
||||||
</template>
|
</template>
|
||||||
</FormField>
|
</FormField>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -263,8 +263,6 @@ export interface FormSchema<
|
||||||
renderComponentContent?: RenderComponentContentType;
|
renderComponentContent?: RenderComponentContentType;
|
||||||
/** 字段规则 */
|
/** 字段规则 */
|
||||||
rules?: FormSchemaRuleType;
|
rules?: FormSchemaRuleType;
|
||||||
/** 自定义插槽名,如果不指定则使用fieldName */
|
|
||||||
slotName?: string;
|
|
||||||
/** 后缀 */
|
/** 后缀 */
|
||||||
suffix?: CustomRenderType;
|
suffix?: CustomRenderType;
|
||||||
}
|
}
|
||||||
|
|
|
@ -124,14 +124,6 @@ export class ModalApi {
|
||||||
return this.setState({ submitting: isLocked });
|
return this.setState({ submitting: isLocked });
|
||||||
}
|
}
|
||||||
|
|
||||||
modalLoading(loading: boolean) {
|
|
||||||
this.store.setState((prev) => ({
|
|
||||||
...prev,
|
|
||||||
confirmLoading: loading,
|
|
||||||
loading,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 取消操作
|
* 取消操作
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in New Issue