feat: 新增菜单图标, 搜索组件

2023-11-10 14:31:25 +08:00
parent 2eeaf31cf4
commit ff24a5cec9
52 changed files with 11561 additions and 34 deletions
--- a/src/components/Fvsearchform.tsx
+++ b/src/components/Fvsearchform.tsx
@@ -0,0 +1,143 @@
+import { Fragment, useState } from "react";
+import {Button, DatePicker, Form, Input, Select} from 'antd'
+import { useForm } from "antd/es/form/Form";
+import { formatDate } from "@/utils/tool";
+
+const { RangePicker } = DatePicker
+
+interface IItemConfig {
+  name: string,
+  type: string,
+  key: string,
+  options?: Array<any>,
+  placeholder?: string,
+  picker?: any,
+  showTime?: boolean,
+  showHour?: boolean,
+  showMinute?: boolean,
+  showSecond?: boolean,
+  showNow?: boolean
+}
+ 
+export interface ISearchformConfig {
+  config: {
+    name: string,
+    formItem: Array<IItemConfig>
+  },
+  submit: (val: object)=>void
+}
+
+interface ISubmitVal {
+  [x: string]: any
+}
+
+export default function Fvsearchform(props: ISearchformConfig) {
+  const [val, setVal] = useState<object>()
+  const [form] = useForm()
+  const {config, submit} = props
+  const handleSubmit = (value: ISubmitVal) => {
+    if(Object.keys(value).length) {
+      config.formItem.forEach(item => {
+        for (const key in value) {
+          if ( item.type == 'date' && item.key == key ) {
+            value[key] && (value[key] = formatDate(value[key].$d))
+          }
+          if(item.type == 'rangedate' && item.key == key) {
+            value[key] && (value[key] = value[key]?.map((date: any)=>date = formatDate(date.$d)))
+          }
+        }
+      })
+    }
+    setVal({...val, ...value})
+    submit(value)
+  }
+  const handleReset = () => {
+    form.resetFields()
+  }
+  return(
+    <Fragment>
+      <Form
+      name={config?.name}
+      form={form}
+      onFinish={handleSubmit}
+      layout="inline"
+      >
+        {
+          config?.formItem.map((item:IItemConfig) => {
+            if(item) {
+              if(item.type === 'input') {
+                return(
+                  <Form.Item
+                  key={item.key}
+                  label={item.name}
+                  name={item.key}
+                  >
+                    <Input placeholder={item?.placeholder || '请输入'} allowClear></Input>
+                  </Form.Item>
+                )
+              }
+              if(item.type === 'select') {
+                return(
+                  <Form.Item
+                  key={item.key}
+                  label={item.name}
+                  name={item.key}
+                  >
+                    <Select
+                    options={item?.options}
+                    placeholder={item?.placeholder || '请选择'}
+                    allowClear
+                    />
+                  </Form.Item>
+                )
+              }
+              if(item.type === 'date') {
+                return(
+                  <Form.Item
+                  key={item.key}
+                  label={item.name}
+                  name={item.key}
+                  >
+                    <DatePicker 
+                    picker={item.picker}
+                    showTime={item?.showTime}
+                    showNow={item?.showNow}
+                    format="YYYY-MM-DD HH:mm:ss"
+                    allowClear
+                    />
+                  </Form.Item>
+                )
+              }
+              if(item.type === 'rangedate') {
+                return(
+                  <Form.Item
+                  key={item.key}
+                  label={item.name}
+                  name={item.key}
+                  >
+                    <RangePicker
+                    showTime={item?.showTime}
+                    showHour={item?.showHour}
+                    showMinute={item?.showMinute}
+                    showSecond={item?.showSecond}
+                    showNow={item?.showNow}
+                    picker={item.picker}
+                    format="YYYY-MM-DD HH:mm:ss"
+                    allowClear
+                    />
+                  </Form.Item>
+                )
+              }
+            }
+          })
+        }
+        <Form.Item>
+          <Button htmlType="submit" type="primary" >搜索</Button>
+        </Form.Item>
+        <Form.Item>
+          <Button onClick={handleReset} htmlType="submit">重置</Button>
+        </Form.Item>
+      </Form>
+    </Fragment>
+  )
+}