feat: ma-form 和 ma-search

docs/demos/ma-form/config/index.vue

@@ -1,11 +1,79 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import { ref, reactive } from 'vue'
+import {ElMessage} from "element-plus";
 
-</script>
+const model = ref({
+  name: '萧晨',
+  age: 22,
+  sex: 1,
+  hobby: '4',
 
-<template>
+})
+const formRef = ref()
 
-</template>
+const hobby = reactive([
+  { label: '唱', value: '1' },
+  { label: '跳', value: '2' },
+  { label: 'Rap', value: '3' },
+  { label: '篮球', value: '4' },
+  { label: '足球', value: '5' },
+  { label: '羽毛球', value: '6' },
+])
 
-<style scoped>
+const items = ref([
+  { label: '姓名', prop: 'name', render: 'input',
+    cols: { span: 8 },
+    itemProps: { rules: [{ required: true, message: '请输入姓名' }] }
+  },
+  { label: '年龄', prop: 'age', render: 'inputNumber', cols: { span: 8 } },
+  { label: '性别', prop: 'sex', cols: { span: 8 },
+    render: ({ formData }) => {
+      return (
+        <el-select v-model={formData.sex} placeholder="请选择性别">
+          {[{ label: '男', value: 1 }, { label: '女', value: 2 }].map(item => {
+            return <el-option label={item.label} value={item.value}></el-option>
+          })}
+        </el-select>
+      )
+    }
+  },
+  { label: '爱好', prop: 'hobby', render: ({ formData }) => (
+      <el-radio-group>
+        {hobby.map(item => {
+          return <el-radio label={item.label} value={item.value}></el-radio>
+        })}
+      </el-radio-group>
+    )
+  },
+  {
+    label: '备注', prop: 'remark', render: 'input', renderProps: { type: 'textarea'},
+    itemProps: { rules: [{ required: true, message: '请输入备注' }] }
+  },
+  { label: '日期', prop: 'date', render: 'datePicker', cols: { span: 12 } },
+  { label: '时间', prop: 'time', render: 'timePicker', cols: { span: 12 } },
+])
 
-</style>
+const options = ref({
+  footerSlot: () => (
+    <div class="w-full text-center">
+      <el-button type="primary" onClick=
+      {() => {
+        formRef.value.setLoadingState(true)
+        setTimeout(() => {
+          formRef.value.getElFormRef().validate().then(() => {
+            ElMessage.success('验证通过')
+            formRef.value.setLoadingState(false)
+          }).catch(() => {
+            ElMessage.error('验证失败')
+            formRef.value.setLoadingState(false)
+          })
+        }, 1000)
+      }}>提交</el-button>
+    </div>
+  )
+})
+</script>
+
+<template>
+  <ma-form ref="formRef" v-model="model" :options="options" :items="items" />
+</template>

docs/demos/ma-form/getRef/index.vue

@@ -0,0 +1,45 @@
+<script setup lang="tsx">
+import { ref, reactive } from 'vue'
+import {ElButton, ElMessage} from "element-plus";
+
+const model = ref({
+  name: '萧晨',
+})
+const formRef = ref()
+const buttonRef = ref()
+const inputRef = ref()
+const inputItemRef = ref()
+
+const items = ref([
+  {
+    label: '姓名', prop: 'name', render: 'input',
+    renderProps: {
+      // props 里获取 ref
+      ref: (el: any, itemRef: any) => {
+        inputRef.value = el
+        inputItemRef.value = itemRef
+      },
+    },
+    cols: { span: 8 },
+  },
+  {
+    label: '', prop: 'name',
+    renderProps: {
+      // props 里获取 ref
+      ref: (el: any) => buttonRef.value = el,
+    },
+    render: () => <el-button onClick={() => {
+      ElMessage.success(`
+      buttonRef: ${JSON.stringify(buttonRef.value)}
+      inputRef: ${JSON.stringify(inputRef.value)}
+      inputItemRef: ${JSON.stringify(inputItemRef.value)}
+      `)
+    }}>获取 input 和 button 的 Ref</el-button>,
+    cols: { span: 8 },
+  },
+])
+</script>
+
+<template>
+  <ma-form ref="formRef" v-model="model" :items="items" />
+</template>

docs/demos/ma-form/template/index.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import {ElMessage} from "element-plus";
+
+const model = ref({
+  name: '张三',
+  age: 22,
+  sex: 1,
+  hobby: '4',
+})
+const formRef = ref()
+
+const hobby = reactive([
+  { label: '唱', value: '1' },
+  { label: '跳', value: '2' },
+  { label: 'Rap', value: '3' },
+  { label: '篮球', value: '4' },
+  { label: '足球', value: '5' },
+  { label: '羽毛球', value: '6' },
+])
+
+const submit = async () => {
+  formRef.value.setLoadingState(true)
+  setTimeout(() => {
+    ElMessage.success('提交的数据：' + JSON.stringify(model.value))
+    formRef.value.setLoadingState(false)
+  }, 1000)
+}
+</script>
+
+<template>
+  <ma-form ref="formRef" v-model="model">
+    <el-form-item label="姓名" prop="name">
+      <el-input v-model="model.name" />
+    </el-form-item>
+    <el-form-item label="年龄" prop="age">
+      <el-input-number v-model="model.age" />
+    </el-form-item>
+    <el-form-item label="性别" prop="sex">
+      <el-select v-model="model.sex">
+        <el-option label="男" :value="1" />
+        <el-option label="女" :value="2" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="爱好" prop="hobby">
+      <el-radio-group v-model="model.hobby">
+        <el-radio v-for="item in hobby" :label="item.label" :value="item.label" />
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="备注" prop="remark">
+      <el-input v-model="model.remark" type="textarea" />
+    </el-form-item>
+
+    <template #footer>
+      <div class="w-full text-center">
+        <el-button @click="submit">提交</el-button>
+      </div>
+    </template>
+  </ma-form>
+</template>

docs/demos/ma-search/index.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-
+  待完善演示。。。
 </template>
 
 <style scoped>

docs/zh/front/component/ma-form.md

@@ -10,10 +10,17 @@
 :::
 
 ## 配置方式使用
+<DemoPreview dir="demos/ma-form/config" />
 
 ## 模板方式使用
+<DemoPreview dir="demos/ma-form/template" />
 
 ## 获取`组件`和`el-form-item`的`Ref`
+:::tip 提示
+这个方式用于 **配置形式**，`template` 里可以自己定义 `ref` 
+:::
+
+<DemoPreview dir="demos/ma-form/getRef" />
 
 ## Props
 
@@ -58,7 +65,7 @@
 | `cols` | 在 `options.layout 为 flex` 下生效                                                                                                                                                   | [el-col文档](https://element-plus.org/zh-CN/component/layout.html#col-attributes)                    | -       | 1.0.0 |
 | `itemProps` | `el-form-item` 原生属性                                                                                                                                                             | [表单项属性](https://element-plus.org/zh-CN/component/form.html#formitem-attributes)                    | -       | 1.0.0 |
 | `itemSlots` | `el-form-item` 原生插槽                                                                                                                                                             | [表单项插槽](https://element-plus.org/zh-CN/component/form.html#formitem-slots)                         | -       | 1.0.0 |
-| `render` | 渲染单元格：<el-tooltip content="设置要渲染的组件，可设置 `element plus` 的所有 `form` 组件，例如：`input`, `datePicker`，也可以传入 `tsx`, `jsx` 语法的虚拟dom，也可以传入一个组件，函数式，例如：() => ElInput">`鼠标放上查看`</el-tooltip> | `string, () => any`                                                                                | -       | 1.0.0 |
+| `render` | 渲染单元格：<el-tooltip content="设置要渲染的组件，可设置 `element plus` 的所有 `form` 组件，例如：`input`, `datePicker`，也可以传入 `tsx`, `jsx` 语法的虚拟dom，也可以传入一个组件，函数式，例如：() => ElInput">`鼠标放上查看`</el-tooltip> | `string, (data) => any`                                                                            | -       | 1.0.0 |
 | `renderProps` | 被渲染组件的 `props` 属性                                                                                                                                                               | `Record<string, any>`                                                                              | -       | 1.0.0 |
 | `renderSlots` | 被渲染组件的插槽  | `Record<string, (...args) => {}>`                                                                  | -       | 1.0.0 |
 

docs/zh/front/component/ma-search.md

@@ -1 +1,87 @@
 # MaSearch
+
+`ma-search` 基于 `ma-form` 封装而来，用于快速构建一个搜索表单。
+
+:::tip 提示
+`form` 和 `form-item` 与 `ma-form` 的参数一致。
+:::
+
+## 使用
+<DemoPreview dir="demos/ma-search" />
+
+## Props
+::: tip 参数说明
+- `options` 是搜索组件的配置项
+- `formOptions` 是 `ma-form` 的配置项
+- `searchItems` 是在 [ma-form-item](ma-form#maformitem) 基础上增加了新的属性
+:::
+| 参数       | 说明                          | 类型         | 版本    |
+|----------|-----------------------------|-------------------|--------|
+| `options` | `ma-search` 参数              | `MaFormOptions`   | 1.0.0 |
+| `formOptions`  | [ma-form参数](ma-form#props)  | `MaFormOptions` | 1.0.0 |
+| `searchItems`  | [form-item参数](#searchitems) | `MaSearchItem[]` | 1.0.0 |
+
+### MaFormOptions
+| 参数        | 说明       | 类型                                                  | 默认值     | 版本    |
+|-----------|----------|-----------------------------------------------------|---------|-------|
+| `defaultValue` | 搜索默认值配置  | `Record<string, any>`                               | -       | 1.0.0 |
+| `cols` | 搜索设置列数   | Record<[MediaBreakPoint](#mediabreakpoint), number> | -       | 1.0.0 |
+| `fold` | 是否折叠搜索面板 | `boolean`                                           | `false` | 1.0.0 |
+| `foldRows` | 折叠后显示个数  | `number`                                            | 2       | 1.0.0 |
+| `show` | 是否显示搜索面板 | `boolean`                                           | `true`  | 1.0.0 |
+| `text` | 文案配置     | [文案配置](#文案配置)                                   | -       | 1.0.0 |
+
+#### MediaBreakPoint
+| 参数   | 说明           | 类型       | 默认值 | 版本    |
+|------|--------------|----------|-----|-------|
+| `xs` | <768px 显示列数  | `number` | 1   | 1.0.0 |
+| `sm` | ≥768px 显示列数  | `number` | 2   | 1.0.0 |
+| `md` | ≥992px 显示列数  | `number` | 2   | 1.0.0 |
+| `lg` | ≥1200px 显示列数     | `number` | 3   | 1.0.0 |
+| `xl` | ≥1920px 显示列数     | `number` | 4   | 1.0.0 |
+
+#### 文案配置
+| 参数           | 说明        | 类型         | 默认值 | 版本    |
+|--------------|-----------|------------|----|-------|
+| `searchBtn`  | 搜索按钮文案  | `() => {}` | 搜索 | 1.0.0 |
+| `resetBtn`   | 重置按钮文案  |  `() => {}`   | 重置 | 1.0.0 |
+| `isFoldBtn`  | 展开按钮文案  |  `() => {}`   | 展开 | 1.0.0 |
+| `notFoldBtn` | 折叠按钮文案  |  `() => {}`   | 折叠 | 1.0.0 |
+
+### SearchItems
+
+| 参数       | 说明                     | 类型       | 默认值 | 版本    |
+|----------|------------------------|----------|-----|-------|
+| `span`   | 合并跨列数                  | `number` | 1   | 1.0.0 |
+| `offset` | 间隔大小                   | `number` | 0   | 1.0.0 |
+| ...      | 其余都是 `ma-form-item` 参数 | -        | -   | 1.0.0 |
+
+## Slot
+
+| 名称              | 说明                                   | 参数 |
+|-----------------|--------------------------------------|----|
+| `default`       | 默认插槽，可写原生标签 `<el-form-item>`，配置方式自动失效 | -  |
+| `actions`        | 覆盖掉组件内的 `搜索`，`重置` 按钮插槽               | -  |
+| `beforeActions`        | 在`操作按钮`前面插入内容插槽                      | -  |
+| `afterActions`        | 在`操作按钮`后面追加内容插槽                      | -  |
+
+
+## Expose
+| 名称                | 说明                 | 参数                    | 返回值                   |
+|-------------------|--------------------|-----------------------|-----------------------|
+| `getMaFormRef()`  | 获取 `ma-form` 的Ref  | -                     | MaForm                |
+| `foldToggle()`    | 展开、折叠切换            | -                     | -                     |
+| `getFold()`       | 获取折叠状态             | -                     | `boolean`             |
+| `setSearchForm()` | 设置搜索表单值            | `(form: any) => void` | -                     |
+| `getSearchForm()` | 获取搜索表单值            | -                     | `Record<string, any>` |
+| `setShowState()`  | 设置搜索是否显示           | (boolean) => void     | -                     |
+| `getShowState()`  | 获取搜索显示状态           | -                     | `boolean`             |
+| `setOptions()`    | 设置 `ma-search` 参数  | `(MaSearchOptions)`   | -                     |
+| `getOptions()`    | 获取 `ma-search` 参数  | -                     | `MaSearchOptions`     |
+| `setFormOptions()`      | 设置 `ma-form` 参数    | `(MaFormOptions)`     | -                     |
+| `getFormOptions()`      | 获取 `ma-form` 参数    | -                     | `MaFormOptions`       |
+| `setItems()`      | 设置 `ma-search` 表单项 | `(MaSearchItem[])`    | -                     |
+| `getItems()`      | 获取 `ma-search` 表单项 | -                     | `MaSearchItem`                     |
+| `appendItem()`    | 追加搜索表单项              | `(MaSearchItem)`        | -                     |
+| `removeItem()`    | 移除搜索表单项              | `(prop: string)`      | -                     |
+| `getItemByProp()` | 按`prop`获取搜索表单项     | `(prop: string)`      | `MaSearchItem`          |

package.json

@@ -8,9 +8,9 @@
   "dependencies": {
     "@imengyu/vue3-context-menu": "^1.4.2",
     "@mineadmin/echarts": "^1.0.1",
-    "@mineadmin/form": "^1.0.20",
+    "@mineadmin/form": "^1.0.21",
     "@mineadmin/pro-table": "^1.0.22",
-    "@mineadmin/search": "^1.0.19",
+    "@mineadmin/search": "^1.0.20",
     "@mineadmin/table": "^1.0.25",
     "@vueuse/core": "^11.1.0",
     "@vueuse/integrations": "^11.1.0",