From beca65f4d01ca07c358102a35b949c2a4f277afe Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期三, 24 五月 2023 10:36:27 +0800
Subject: [PATCH] 增加车间监控界面
---
src/views/demo/form/index.vue | 1218 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 609 insertions(+), 609 deletions(-)
diff --git a/src/views/demo/form/index.vue b/src/views/demo/form/index.vue
index 1ee30be..22719f0 100644
--- a/src/views/demo/form/index.vue
+++ b/src/views/demo/form/index.vue
@@ -1,621 +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>
+ <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 { 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';
+ 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 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 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',
+ 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,
- },
- },
- ];
+ 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) };
- });
+ 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);
- }
+ 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,
- };
- },
- });
+ 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