From fa3ac93010bea3805438ee3ab0a182bfbf7423da Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期一, 27 五月 2024 16:19:31 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/demo/form/index.vue | 621 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 621 insertions(+), 0 deletions(-)
diff --git a/src/views/demo/form/index.vue b/src/views/demo/form/index.vue
new file mode 100644
index 0000000..22719f0
--- /dev/null
+++ b/src/views/demo/form/index.vue
@@ -0,0 +1,621 @@
+<template>
+ <PageWrapper title="琛ㄥ崟鍩虹绀轰緥" contentFullHeight>
+ <CollapseContainer title="鍩虹绀轰緥">
+ <BasicForm
+ autoFocusFirstItem
+ :labelWidth="200"
+ :schemas="schemas"
+ :actionColOptions="{ span: 24 }"
+ :labelCol="{ span: 8 }"
+ @submit="handleSubmit"
+ @reset="handleReset"
+ >
+ <template #jAreaLinkage="{ model, field }">
+ <JAreaLinkage v-model:value="model[field]" :showArea="true" :showAll="false" />
+ </template>
+ <template #localSearch="{ model, field }">
+ <ApiSelect
+ :api="optionsListApi"
+ showSearch
+ v-model:value="model[field]"
+ optionFilterProp="label"
+ resultField="list"
+ labelField="name"
+ valueField="id"
+ />
+ </template>
+ <template #selectA="{ model, field }">
+ <a-select :options="optionsA" mode="multiple" v-model:value="model[field]" @change="valueSelectA = model[field]" allowClear />
+ </template>
+ <template #selectB="{ model, field }">
+ <a-select :options="optionsB" mode="multiple" v-model:value="model[field]" @change="valueSelectB = model[field]" allowClear />
+ </template>
+ <template #remoteSearch="{ model, field }">
+ <ApiSelect
+ :api="optionsListApi"
+ showSearch
+ v-model:value="model[field]"
+ :filterOption="false"
+ resultField="list"
+ labelField="name"
+ valueField="id"
+ @search="onSearch"
+ />
+ </template>
+ </BasicForm>
+ </CollapseContainer>
+ </PageWrapper>
+</template>
+<script lang="ts">
+ import { computed, defineComponent, unref, ref } from 'vue'
+ import { BasicForm, FormSchema, ApiSelect, JAreaLinkage } from '/@/components/Form/index'
+ import { CollapseContainer } from '/@/components/Container'
+ import { useMessage } from '/@/hooks/web/useMessage'
+ import { PageWrapper } from '/@/components/Page'
+
+ import { optionsListApi } from '/@/api/demo/select'
+ import { useDebounceFn } from '@vueuse/core'
+ import { treeOptionsListApi } from '/@/api/demo/tree'
+ import { Select } from 'ant-design-vue'
+ import { cloneDeep } from 'lodash-es'
+
+ const valueSelectA = ref<string[]>([])
+ const valueSelectB = ref<string[]>([])
+ const options = ref<Recordable[]>([])
+ for (let i = 1; i < 10; i++) options.value.push({ label: '閫夐」' + i, value: `${i}` })
+
+ const optionsA = computed(() => {
+ return cloneDeep(unref(options)).map((op) => {
+ op.disabled = unref(valueSelectB).indexOf(op.value) !== -1
+ return op
+ })
+ })
+ const optionsB = computed(() => {
+ return cloneDeep(unref(options)).map((op) => {
+ op.disabled = unref(valueSelectA).indexOf(op.value) !== -1
+ return op
+ })
+ })
+ const provincesOptions = [
+ {
+ id: 'guangdong',
+ label: '骞夸笢鐪�',
+ value: '1',
+ key: '1',
+ },
+ {
+ id: 'jiangsu',
+ label: '姹熻嫃鐪�',
+ value: '2',
+ key: '2',
+ },
+ ]
+ const citiesOptionsData = {
+ guangdong: [
+ {
+ label: '鐝犳捣甯�',
+ value: '1',
+ key: '1',
+ },
+ {
+ label: '娣卞湷甯�',
+ value: '2',
+ key: '2',
+ },
+ {
+ label: '骞垮窞甯�',
+ value: '3',
+ key: '3',
+ },
+ ],
+ jiangsu: [
+ {
+ label: '鍗椾含甯�',
+ value: '1',
+ key: '1',
+ },
+ {
+ label: '鏃犻敗甯�',
+ value: '2',
+ key: '2',
+ },
+ {
+ label: '鑻忓窞甯�',
+ value: '3',
+ key: '3',
+ },
+ ],
+ }
+
+ const schemas: FormSchema[] = [
+ {
+ field: 'divider-basic',
+ component: 'Divider',
+ label: '鍩虹瀛楁',
+ },
+ {
+ field: 'field1',
+ component: 'Input',
+ label: '瀛楁1',
+
+ colProps: {
+ span: 8,
+ },
+ // componentProps:{},
+ // can func
+ componentProps: ({ schema, formModel }) => {
+ console.log('form:', schema)
+ console.log('formModel:', formModel)
+ return {
+ placeholder: '鑷畾涔塸laceholder',
+ onChange: (e: any) => {
+ console.log(e)
+ },
+ }
+ },
+ renderComponentContent: () => {
+ return {
+ prefix: () => 'pSlot',
+ suffix: () => 'sSlot',
+ }
+ },
+ },
+ {
+ field: 'field2',
+ component: 'Input',
+ label: '瀛楁2',
+ defaultValue: '111',
+ colProps: {
+ span: 8,
+ },
+ componentProps: {
+ onChange: (e: any) => {
+ console.log(e)
+ },
+ },
+ suffix: '澶�',
+ },
+ {
+ field: 'field3',
+ component: 'DatePicker',
+ label: '瀛楁3',
+ colProps: {
+ span: 8,
+ },
+ },
+ {
+ field: 'field4',
+ component: 'Select',
+ label: '瀛楁4',
+ colProps: {
+ span: 8,
+ },
+ componentProps: {
+ options: [
+ {
+ label: '閫夐」1',
+ value: '1',
+ key: '1',
+ },
+ {
+ label: '閫夐」2',
+ value: '2',
+ key: '2',
+ },
+ ],
+ },
+ },
+ {
+ field: 'field5',
+ component: 'CheckboxGroup',
+ label: '瀛楁5',
+ colProps: {
+ span: 8,
+ },
+ componentProps: {
+ options: [
+ {
+ label: '閫夐」1',
+ value: '1',
+ },
+ {
+ label: '閫夐」2',
+ value: '2',
+ },
+ ],
+ },
+ },
+ {
+ field: 'field7',
+ component: 'RadioGroup',
+ label: '瀛楁7',
+ colProps: {
+ span: 8,
+ },
+ componentProps: {
+ options: [
+ {
+ label: '閫夐」1',
+ value: '1',
+ },
+ {
+ label: '閫夐」2',
+ value: '2',
+ },
+ ],
+ },
+ },
+ {
+ field: 'field8',
+ component: 'Checkbox',
+ label: '瀛楁8',
+ colProps: {
+ span: 8,
+ },
+ renderComponentContent: 'Check',
+ },
+ {
+ field: 'field9',
+ component: 'Switch',
+ label: '瀛楁9',
+ colProps: {
+ span: 8,
+ },
+ },
+ {
+ field: 'field10',
+ component: 'RadioButtonGroup',
+ label: '瀛楁10',
+ colProps: {
+ span: 8,
+ },
+ componentProps: {
+ options: [
+ {
+ label: '閫夐」1',
+ value: '1',
+ },
+ {
+ label: '閫夐」2',
+ value: '2',
+ },
+ ],
+ },
+ },
+ {
+ field: 'field11',
+ component: 'Cascader',
+ label: '瀛楁11',
+ colProps: {
+ span: 8,
+ },
+ componentProps: {
+ options: [
+ {
+ value: 'zhejiang',
+ label: 'Zhejiang',
+ children: [
+ {
+ value: 'hangzhou',
+ label: 'Hangzhou',
+ children: [
+ {
+ value: 'xihu',
+ label: 'West Lake',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: 'jiangsu',
+ label: 'Jiangsu',
+ children: [
+ {
+ value: 'nanjing',
+ label: 'Nanjing',
+ children: [
+ {
+ value: 'zhonghuamen',
+ label: 'Zhong Hua Men',
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ field: 'divider-api-select',
+ component: 'Divider',
+ label: '杩滅▼涓嬫媺婕旂ず',
+ },
+ {
+ field: 'field30',
+ component: 'ApiSelect',
+ label: '鎳掑姞杞借繙绋嬩笅鎷�',
+ required: true,
+ componentProps: {
+ // more details see /src/components/Form/src/components/ApiSelect.vue
+ api: optionsListApi,
+ params: {
+ id: 1,
+ },
+ resultField: 'list',
+ // use name as label
+ labelField: 'name',
+ // use id as value
+ valueField: 'id',
+ // not request untill to select
+ immediate: false,
+ onChange: (e) => {
+ console.log('selected:', e)
+ },
+ // atfer request callback
+ onOptionsChange: (options) => {
+ console.log('get options', options.length, options)
+ },
+ },
+ colProps: {
+ span: 8,
+ },
+ defaultValue: '0',
+ },
+ {
+ field: 'field311',
+ component: 'JAreaLinkage',
+ label: '鐪佸競鍖洪�夋嫨',
+ helpMessage: ['JAreaLinkage缁勪欢', '鐪佸競鍖洪�夋嫨'],
+ required: true,
+ slot: 'jAreaLinkage',
+ colProps: {
+ span: 8,
+ },
+ defaultValue: ['130000', '130200'],
+ },
+ {
+ field: 'field31',
+ component: 'Input',
+ label: '涓嬫媺鏈湴鎼滅储',
+ helpMessage: ['ApiSelect缁勪欢', '杩滅▼鏁版嵁婧愭湰鍦版悳绱�', '鍙彂璧蜂竴娆¤姹傝幏鍙栨墍鏈夐�夐」'],
+ required: true,
+ slot: 'localSearch',
+ colProps: {
+ span: 8,
+ },
+ defaultValue: '0',
+ },
+ {
+ field: 'field32',
+ component: 'Input',
+ label: '涓嬫媺杩滅▼鎼滅储',
+ helpMessage: ['ApiSelect缁勪欢', '灏嗗叧閿瘝鍙戦�佸埌鎺ュ彛杩涜杩滅▼鎼滅储'],
+ required: true,
+ slot: 'remoteSearch',
+ colProps: {
+ span: 8,
+ },
+ defaultValue: '0',
+ },
+ {
+ field: 'field33',
+ component: 'ApiTreeSelect',
+ label: '杩滅▼涓嬫媺鏍�',
+ helpMessage: ['ApiTreeSelect缁勪欢', '浣跨敤鎺ュ彛鎻愪緵鐨勬暟鎹敓鎴愰�夐」'],
+ required: true,
+ componentProps: {
+ api: treeOptionsListApi,
+ resultField: 'list',
+ },
+ colProps: {
+ span: 8,
+ },
+ },
+ {
+ field: 'field34',
+ component: 'ApiRadioGroup',
+ label: '杩滅▼Radio',
+ helpMessage: ['ApiRadioGroup缁勪欢', '浣跨敤鎺ュ彛鎻愪緵鐨勬暟鎹敓鎴愰�夐」'],
+ required: true,
+ componentProps: {
+ api: optionsListApi,
+ params: {
+ count: 2,
+ },
+ resultField: 'list',
+ // use name as label
+ labelField: 'name',
+ // use id as value
+ valueField: 'id',
+ },
+ defaultValue: '1',
+ colProps: {
+ span: 8,
+ },
+ },
+ {
+ field: 'field35',
+ component: 'ApiRadioGroup',
+ label: '杩滅▼Radio',
+ helpMessage: ['ApiRadioGroup缁勪欢', '浣跨敤鎺ュ彛鎻愪緵鐨勬暟鎹敓鎴愰�夐」'],
+ required: true,
+ componentProps: {
+ api: optionsListApi,
+ params: {
+ count: 2,
+ },
+ resultField: 'list',
+ // use name as label
+ labelField: 'name',
+ // use id as value
+ valueField: 'id',
+ isBtn: true,
+ },
+ colProps: {
+ span: 8,
+ },
+ },
+ {
+ field: 'divider-linked',
+ component: 'Divider',
+ label: '瀛楁鑱斿姩',
+ },
+ {
+ field: 'province',
+ component: 'Select',
+ label: '鐪佷唤',
+ colProps: {
+ span: 8,
+ },
+ componentProps: ({ formModel, formActionType }) => {
+ return {
+ options: provincesOptions,
+ placeholder: '鐪佷唤涓庡煄甯傝仈鍔�',
+ onChange: (e: any) => {
+ // console.log(e)
+ let citiesOptions = e == 1 ? citiesOptionsData[provincesOptions[0].id] : citiesOptionsData[provincesOptions[1].id]
+ // console.log(citiesOptions)
+ if (e === undefined) {
+ citiesOptions = []
+ }
+ formModel.city = undefined // reset city value
+ const { updateSchema } = formActionType
+ updateSchema({
+ field: 'city',
+ componentProps: {
+ options: citiesOptions,
+ },
+ })
+ },
+ }
+ },
+ },
+ {
+ field: 'city',
+ component: 'Select',
+ label: '鍩庡競',
+ colProps: {
+ span: 8,
+ },
+ componentProps: {
+ options: [], // defalut []
+ placeholder: '鐪佷唤涓庡煄甯傝仈鍔�',
+ },
+ },
+ {
+ field: 'divider-selects',
+ component: 'Divider',
+ label: '浜掓枼澶氶��',
+ helpMessage: ['涓や釜Select鍏辩敤鏁版嵁婧�', '浣嗕笉鍙�夋嫨瀵规柟宸查�変腑鐨勯」鐩�'],
+ },
+ {
+ field: 'selectA',
+ component: 'Select',
+ label: '浜掓枼SelectA',
+ slot: 'selectA',
+ defaultValue: [],
+ colProps: {
+ span: 8,
+ },
+ },
+ {
+ field: 'selectB',
+ component: 'Select',
+ label: '浜掓枼SelectB',
+ slot: 'selectB',
+ defaultValue: [],
+ colProps: {
+ span: 8,
+ },
+ },
+ {
+ field: 'divider-others',
+ component: 'Divider',
+ label: '鍏跺畠',
+ },
+ {
+ field: 'field20',
+ component: 'InputNumber',
+ label: '瀛楁20',
+ required: true,
+ colProps: {
+ span: 8,
+ },
+ },
+ {
+ field: 'field21',
+ component: 'Slider',
+ label: '瀛楁21',
+ componentProps: {
+ min: 0,
+ max: 100,
+ range: true,
+ marks: {
+ 20: '20掳C',
+ 60: '60掳C',
+ },
+ },
+ colProps: {
+ span: 8,
+ },
+ },
+ {
+ field: 'field22',
+ component: 'Rate',
+ label: '瀛楁22',
+ defaultValue: 3,
+ colProps: {
+ span: 8,
+ },
+ componentProps: {
+ disabled: false,
+ allowHalf: true,
+ },
+ },
+ ]
+
+ export default defineComponent({
+ components: {
+ BasicForm,
+ CollapseContainer,
+ PageWrapper,
+ ApiSelect,
+ JAreaLinkage,
+ ASelect: Select,
+ },
+ setup() {
+ const check = ref(null)
+ const { createMessage } = useMessage()
+ const keyword = ref<string>('')
+ const searchParams = computed<Recordable>(() => {
+ return { keyword: unref(keyword) }
+ })
+
+ function onSearch(value: string) {
+ keyword.value = value
+ }
+ function areaChange(value) {
+ alert(value)
+ }
+
+ return {
+ schemas,
+ optionsListApi,
+ optionsA,
+ optionsB,
+ valueSelectA,
+ valueSelectB,
+ onSearch: useDebounceFn(onSearch, 300),
+ searchParams,
+ handleReset: () => {
+ keyword.value = ''
+ },
+ handleSubmit: (values: any) => {
+ createMessage.success('click search,values:' + JSON.stringify(values))
+ },
+ check,
+ }
+ },
+ })
+</script>
--
Gitblit v1.9.3