增加车间监控界面

baoshiwei

2023-05-24 beca65f4d01ca07c358102a35b949c2a4f277afe

 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: '自定义placeholder',
          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: '自定义placeholder',
               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>