feat(components): 添加表单抽屉Pro组件并重构搜索表单

- 新增 CuteFormDrawerPro 组件，支持 Schema 配置的表单抽屉
- 新增 CuteFormDrawerProDemo 演示页面
- 添加 CuteSearchFormDemo 和 CuteSearchFormProDemo 演示页面
- 移除废弃的 CuteOtherDemo 和 CuteSimpleTableDemo 页面
- 重构 CuteSearchForm 和 CuteSearchFormPro，将 submit 事件改为 search 事件
- 重构 CuteSearchForm 和 CuteSearchFormPro，移除 disabled 属性
- 修正 CuteFormDialogPro 组件名称拼写错误
- 更新组件演示页面索引，添加新的搜索和抽屉组件演示
- 在拖拽表格和简单表格演示中添加刷新数据方法和表单模型

cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue

@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <cute-section-title title="高级搜索 CuteSearchForm" />
-    <cute-search-form :model="searchFormModel" @submit="handleSearchFormSubmit">
-      <template v-slot:suffix>
-        <el-form-item label="模糊查询" prop="blurry">
-          <el-input v-model="searchFormModel.blurry" clearable />
-        </el-form-item>
-      </template>
-      <template v-slot:operation>
-        <el-button type="primary">查询后置按钮</el-button>
-      </template>
-    </cute-search-form>
-    <cute-section-title title="高级搜索Pro版 CuteSearchProForm" />
-    <cute-search-pro-form :model="searchFormProValues" :schema="searchFormProSchema" />
-  </div>
-</template>
-
-<script>
-
-import CuteSearchForm from '@/views/components/advanced/CuteSearchForm.vue'
-import CuteSectionTitle from '@/views/components/dev/CuteSectionTitle.vue'
-import CuteSearchFormPro from '@/views/components/advanced/CuteSearchFormPro.vue'
-
-export default {
-  name: 'CuteOtherDemo',
-  components: {
-    CuteSearchProForm: CuteSearchFormPro,
-    CuteSectionTitle,
-    CuteSearchForm
-  },
-  data() {
-    return {
-      searchFormModel: {},
-      searchFormProSchema: [
-        { name: 'name', title: '姓名', type: 'input' },
-        { name: 'sex', title: '性别', type: 'select', dataSource: [{ label: '男', value: 'nn' }, { label: '女', value: 'mm' }] },
-        { name: 'createDate', title: '创建日期', type: 'date' },
-        { name: 'createTime', title: '创建时间', type: 'datetime' }
-      ],
-      searchFormProValues: { name: '小明', sex: 'mm' }
-    }
-  },
-  methods: {
-    handleSearchFormSubmit(data) {
-      console.log('handleSearchFormSubmit', data)
-    },
-    handleSearchFormReset() {
-      console.log('handleSearchFormReset')
-    }
-  }
-}
-</script>
-

cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue

@@ -1,107 +0,0 @@
-<template>
-  <div class="app-container">
-    <cute-form-drawer
-      ref="drawerFrom"
-      :model="createFormModel"
-      :rules="createFormRules"
-      title="演示:表单抽屉"
-      width="45%"
-      @submit="onDrawerFormSubmit"
-    >
-      <el-form-item label="活动名称" prop="name" label-width="100px">
-        <el-input v-model="createFormModel.name" placeholder="请输入" style="width: 100%" />
-      </el-form-item>
-      <el-form-item label="活动区域" prop="region" label-width="100px">
-        <el-select v-model="createFormModel.region" placeholder="请选择" style="width: 100%">
-          <el-option label="区域一" value="shanghai" />
-          <el-option label="区域二" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="活动模式" prop="modeList" label-width="100px">
-        <cute-transfer v-model="createFormModel.modeList" :data-source="modeDataSource">
-          <el-table-column prop="name" label="姓名" />
-          <el-table-column prop="description" label="备注" />
-        </cute-transfer>
-      </el-form-item>
-    </cute-form-drawer>
-  </div>
-</template>
-
-<script>
-import CuteFormDrawer from '@/views/components/advanced/CuteFormDrawer.vue'
-import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
-
-export default {
-  name: 'CuteSimpleTableDemo',
-  components: { CuteTransfer, CuteFormDrawer },
-  data() {
-    return {
-      modeDataSource: [
-        { id: 1, name: '小明', description: '小明牛P' },
-        { id: 4, name: '小绿', description: '小绿牛P' },
-        { id: 5, name: '小黄', description: '小黄牛P' },
-        { id: 6, name: '小紫', description: '小紫牛P' },
-        { id: 17, name: '小郑', description: '小郑牛P' },
-        { id: 18, name: '小王', description: '小王牛P' }
-      ],
-      editTableSchema: [
-        { name: 'name', title: '姓名', type: 'input' },
-        { name: 'sex', title: '性别', type: 'select', dataSource: [{ label: '男', value: 'nn' }, { label: '女', value: 'mm' }] },
-        { name: 'description', title: '描述', type: 'input' }
-      ],
-      editTableDataSource: [
-        { id: 1, name: '小明', sex: 'mm', description: '小明牛P' },
-        { id: 4, name: '小绿', sex: 'nn', description: '小绿牛P' },
-        { id: 5, name: '小黄', sex: 'nn', description: '小黄牛P' },
-        { id: 6, name: '小紫', sex: 'nn', description: '小紫牛P' },
-        { id: 17, name: '小郑', sex: 'mm', description: '小郑牛P' },
-        { id: 18, name: '小王', sex: 'nn', description: '小王牛P' }
-      ],
-      form: {
-        model: {
-          blurry: ''
-        },
-        rules: {}
-      }
-    }
-  },
-  mounted() {
-    this.initData()
-  },
-  methods: {
-    initData() {
-      this.$refs.instance.refresh()
-    },
-    onFormSubmit(formName) {
-      const that = this
-      that.$refs[formName].validate((valid) => {
-        if (valid) {
-          that.$refs.instance.refresh()
-        } else {
-          return false
-        }
-      })
-    },
-    onFormReset(formName) {
-      try {
-        this.$refs[formName].resetFields()
-      } catch (e) {
-        console.error(e)
-      }
-    },
-    onDialogClick() {
-      this.$refs.dialogForm.show()
-    },
-    onDialogProClick() {
-      this.$refs.dialogProForm.show()
-    },
-    onDrawerClick() {
-      this.$refs.drawerFrom.show()
-    },
-    onDrawerFormSubmit(values) {
-      console.log('onDrawerFormSubmit', values)
-    }
-  }
-}
-</script>
-

cutejava-front/src/views/componentsDemo/advanced/CuteDragTableDemo.vue

@@ -69,6 +69,9 @@ export default {
   components: { CuteDragTable, CuteButton },
   data() {
     return {
+      form: {
+        model: ''
+      },
       curd: {
         paramsTransform: (pageProps) => {
           const values = this.form.model
@@ -131,10 +134,13 @@ export default {
     }
   },
   mounted() {
-    this.$refs.instance.refresh()
+    this.refreshData()
   },
   methods: {
     FormatRowDateTimeStr,
+    refreshData() {
+      this.$refs.instance.refresh()
+    },
     onTableEditClick(row) {
       console.log('编辑', row)
     },

cutejava-front/src/views/componentsDemo/advanced/CuteFormDialogDemo.vue

@@ -2,9 +2,8 @@
   <div>
     <h4>何时使用</h4>
     <ul class="description">
-      <li>不离开当前场景完成增删改操作</li>
-      <li>需要确认用户的操作，明确操作会产生的结果，提醒告知用户</li>
-      <li>作为配置型功能及信息的容器</li>
+      <li>用于创建一个实体或收集信息</li>
+      <li>需要对输入的数据类型进行校验时</li>
       <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
     </ul>
     <h4>基础用法</h4>

cutejava-front/src/views/componentsDemo/advanced/CuteFormDialogProDemo.vue

@@ -2,9 +2,8 @@
   <div>
     <h4>何时使用</h4>
     <ul class="description">
-      <li>不离开当前场景完成增删改操作</li>
-      <li>需要确认用户的操作，明确操作会产生的结果，提醒告知用户</li>
-      <li>作为配置型功能及信息的容器</li>
+      <li>用于创建一个实体或收集信息</li>
+      <li>需要对输入的数据类型进行校验时</li>
       <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
     </ul>
     <h4>基础用法</h4>

cutejava-front/src/views/componentsDemo/advanced/CuteFormDrawerDemo.vue

@@ -2,8 +2,8 @@
   <div>
     <h4>何时使用</h4>
     <ul class="description">
-      <li>不离开当前场景完成增删改操作</li>
-      <li>作为配置型功能及信息的容器</li>
+      <li>用于创建一个实体或收集信息</li>
+      <li>需要对输入的数据类型进行校验时</li>
       <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
     </ul>
     <h4>基础用法</h4>

cutejava-front/src/views/componentsDemo/advanced/CuteFormDrawerProDemo.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>用于创建一个实体或收集信息</li>
+      <li>需要对输入的数据类型进行校验时</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-button type="primary" @click="showDrawerForm">显示</cute-button>
+    <cute-form-drawer-pro
+      ref="formDrawerPro"
+      :model="model"
+      :schema="schema"
+      title="表单抽屉Pro"
+      @submit="onSubmit"
+    />
+
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+    <h4>Schema属性</h4>
+    <el-table :data="schemaData">
+      <el-table-column prop="name" label="属性名" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+    <h4>方法</h4>
+    <el-table :data="methodData">
+      <el-table-column prop="name" label="函数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="inputArgs" label="入参" />
+      <el-table-column prop="outArgs" label="出参" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteButton from '@/views/components/dev/CuteButton.vue'
+import CuteFormDrawerPro from '@/views/components/advanced/CuteFormDrawerPro.vue'
+
+export default {
+  name: 'CuteFormDrawerProDemo',
+  components: { CuteFormDrawerPro, CuteButton },
+  data() {
+    return {
+      model: {},
+      schema: [
+        { name: 'name', title: '姓名', type: 'input', required: true },
+        { name: 'sex', title: '性别', type: 'select', required: true, dataSource: [{ label: '男', value: 'nn' }, { label: '女', value: 'mm' }] },
+        { name: 'createDate', title: '创建日期', type: 'date', required: false },
+        { name: 'createTime', title: '创建时间', type: 'datetime', required: false }
+      ],
+      apiData: [
+        { name: 'title', remark: '弹窗的标题', type: 'string', defaultValue: '默认标题', required: '否' },
+        { name: 'width', remark: '弹窗的宽度', type: 'string', defaultValue: '40%', required: '否' },
+        { name: 'model', remark: '绑定的表单对象', type: 'object', defaultValue: '-', required: '是' },
+        { name: 'schema', remark: '表单定义', type: 'object', defaultValue: '-', required: '是' },
+        { name: 'showReset', remark: '是否显示重置按钮', type: 'boolean', defaultValue: 'false', required: '否' },
+        { name: 'submit', remark: '提交按钮被点击回调事件', type: '(values) => {}', defaultValue: '-', required: '否' },
+        { name: 'cancel', remark: '取消按钮被点击回调事件', type: '() => {}', defaultValue: '-', required: '否' },
+        { name: 'reset', remark: '重置按钮被点击回调事件', type: '() => {}', defaultValue: '-', required: '否' }
+      ],
+      schemaData: [
+        { name: 'name', remark: '表单项名称', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'title', remark: '表单项标题', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'type', remark: '表单项类型。input 输入框 | select 单选框 | date 日期选择框 | datetime 日期时间选择框', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'required', remark: '是否必填', type: 'boolean', defaultValue: 'false', required: '否' },
+        { name: 'dataSource', remark: '数据源，当type=select时必填', type: 'array', defaultValue: '[]', required: '否' }
+      ],
+      methodData: [
+        { name: 'show', remark: '显示对话框', inputArgs: '-', outArgs: '-' },
+        { name: 'hidden', remark: '隐藏对话框', inputArgs: '-', outArgs: '-' }
+      ]
+    }
+  },
+  methods: {
+    showDrawerForm() {
+      this.$refs.formDrawerPro.show()
+    },
+    onSubmit(values) {
+      console.log('onSubmit', values)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>

cutejava-front/src/views/componentsDemo/advanced/CuteSearchFormDemo.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>列表上方的标准筛选栏</li>
+      <li>在点击搜索和重置按钮时会触发 onSearch，参数为当前筛选值</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-search-form :model="model" @search="handleSearch">
+      <template v-slot:suffix>
+        <el-form-item label="模糊查询" prop="blurry">
+          <el-input v-model="model.blurry" clearable />
+        </el-form-item>
+      </template>
+      <template v-slot:operation>
+        <el-button type="primary">查询后置按钮</el-button>
+      </template>
+    </cute-search-form>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteSearchForm from '@/views/components/advanced/CuteSearchForm.vue'
+
+export default {
+  name: 'CuteSearchFormDemo',
+  components: { CuteSearchForm },
+  data() {
+    return {
+      model: {
+        blurry: ''
+      },
+      apiData: [
+        { name: 'model', remark: '绑定的表单对象', type: 'object', defaultValue: '-', required: '是' },
+        { name: 'v-slot:suffix', remark: '搜索条件区域', type: 'template', defaultValue: '-', required: '是' },
+        { name: 'v-slot:operation', remark: '后置按钮区域', type: 'template', defaultValue: '-', required: '否' },
+        { name: 'search', remark: '搜索或重置按钮被点击回调事件', type: '(values) => {}', defaultValue: '-', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    handleSearch(values) {
+      console.log('handleSearch', values)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>

cutejava-front/src/views/componentsDemo/advanced/CuteSearchFormProDemo.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>列表上方的标准筛选栏</li>
+      <li>在点击搜索和重置按钮时会触发 onSearch，参数为当前筛选值</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-search-form-pro :model="model" :schema="schema" @search="handleSearch" />
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+    <h4>Schema属性</h4>
+    <el-table :data="schemaData">
+      <el-table-column prop="name" label="属性名" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteSearchFormPro from '@/views/components/advanced/CuteSearchFormPro.vue'
+
+export default {
+  name: 'CuteSearchFormProDemo',
+  components: { CuteSearchFormPro },
+  data() {
+    return {
+      model: {
+        name: '',
+        sex: ''
+      },
+      schema: [
+        { name: 'name', title: '姓名', type: 'input' },
+        { name: 'sex', title: '性别', type: 'select', dataSource: [{ label: '男', value: 'nn' }, { label: '女', value: 'mm' }] },
+        { name: 'createDate', title: '创建日期', type: 'date' },
+        { name: 'createTime', title: '创建时间', type: 'datetime' }
+      ],
+      apiData: [
+        { name: 'model', remark: '绑定的表单对象', type: 'object', defaultValue: '-', required: '是' },
+        { name: 'schema', remark: '表单定义', type: 'object', defaultValue: '-', required: '是' },
+        { name: 'v-slot:operation', remark: '后置按钮区域', type: 'template', defaultValue: '-', required: '否' },
+        { name: 'search', remark: '搜索或重置按钮被点击回调事件', type: '(values) => {}', defaultValue: '-', required: '否' }
+      ],
+      schemaData: [
+        { name: 'name', remark: '表单项名称', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'title', remark: '表单项标题', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'type', remark: '表单项类型。input 输入框 | select 单选框 | date 日期选择框 | datetime 日期时间选择框', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'dataSource', remark: '数据源，当type=select时必填', type: 'array', defaultValue: '[]', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    handleSearch(values) {
+      console.log('handleSearch', values)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>

cutejava-front/src/views/componentsDemo/advanced/CuteSimpleTableDemo.vue

@@ -23,10 +23,10 @@
       show-select
     >
       <template v-slot:batchArea>
-        <cute-button type="primary">批量绑定</cute-button>
+        <cute-button type="primary" @click="refreshData">批量绑定</cute-button>
       </template>
       <template v-slot:toolArea>
-        <cute-button type="primary">导出</cute-button>
+        <cute-button type="primary" @click="refreshData">导出</cute-button>
       </template>
       <el-table-column prop="name" label="名称" />
       <el-table-column prop="description" label="描述" />
@@ -69,6 +69,9 @@ export default {
   components: { CuteSimpleTable, CuteButton },
   data() {
     return {
+      form: {
+        model: ''
+      },
       curd: {
         paramsTransform: (pageProps) => {
           const values = this.form.model
@@ -131,10 +134,13 @@ export default {
     }
   },
   mounted() {
-    this.$refs.instance.refresh()
+    this.refreshData()
   },
   methods: {
     FormatRowDateTimeStr,
+    refreshData() {
+      this.$refs.instance.refresh()
+    },
     onTableEditClick(row) {
       console.log('onTableEditClick', row)
     },

cutejava-front/src/views/componentsDemo/index.vue

@@ -93,6 +93,12 @@
       </el-tab-pane>
       <el-tab-pane label="高级组件" name="advanced">
         <el-collapse accordion>
+          <el-collapse-item title="标准搜索区域 CuteSearchForm" name="CuteSearchForm">
+            <CuteSearchFormDemo />
+          </el-collapse-item>
+          <el-collapse-item title="标准搜索区域(Schema版) CuteSearchFormPro" name="CuteSearchFormPro">
+            <CuteSearchFormProDemo />
+          </el-collapse-item>
           <el-collapse-item title="简单数据表格 CuteSimpleTable" name="CuteSimpleTable">
             <CuteSimpleTableDemo />
           </el-collapse-item>
@@ -111,6 +117,9 @@
           <el-collapse-item title="表单抽屉 CuteFormDrawer" name="CuteFormDrawer">
             <CuteFormDrawerDemo />
           </el-collapse-item>
+          <el-collapse-item title="表单抽屉(Schema版) CuteFormDrawerPro" name="CuteFormDrawerPro">
+            <CuteFormDrawerProDemo />
+          </el-collapse-item>
         </el-collapse>
       </el-tab-pane>
     </el-tabs>
@@ -145,22 +154,28 @@ import CutePreviewDrawerDemo from '@/views/componentsDemo/dev/CutePreviewDrawerD
 import CuteTransferDemo from '@/views/componentsDemo/dev/CuteTransferDemo.vue'
 import CuteFileUploadDemo from '@/views/componentsDemo/business/CuteFileUploadDemo.vue'
 import CuteFileDragUploadDemo from '@/views/componentsDemo/business/CuteFileDragUploadDemo.vue'
-import CuteSimpleTableDemo from '@/views/componentsDemo/CuteSimpleTableDemo.vue'
 import CuteDragTableDemo from '@/views/componentsDemo/advanced/CuteDragTableDemo.vue'
 import CuteEditTableDemo from '@/views/componentsDemo/advanced/CuteEditTableDemo.vue'
 import CuteFormDialogDemo from '@/views/componentsDemo/advanced/CuteFormDialogDemo.vue'
 import CuteFormDialogProDemo from '@/views/componentsDemo/advanced/CuteFormDialogProDemo.vue'
 import CuteFormDrawerDemo from '@/views/componentsDemo/advanced/CuteFormDrawerDemo.vue'
+import CuteFormDrawerProDemo from '@/views/componentsDemo/advanced/CuteFormDrawerProDemo.vue'
+import CuteSearchFormDemo from '@/views/componentsDemo/advanced/CuteSearchFormDemo.vue'
+import CuteSearchFormProDemo from '@/views/componentsDemo/advanced/CuteSearchFormProDemo.vue'
+import CuteSimpleTableDemo from '@/views/componentsDemo/advanced/CuteSimpleTableDemo.vue'
 
 export default {
   name: 'SystemComponents',
   components: {
+    CuteSimpleTableDemo,
+    CuteSearchFormProDemo,
+    CuteSearchFormDemo,
+    CuteFormDrawerProDemo,
     CuteFormDrawerDemo,
     CuteFormDialogProDemo,
     CuteFormDialogDemo,
     CuteEditTableDemo,
     CuteDragTableDemo,
-    CuteSimpleTableDemo,
     CuteFileDragUploadDemo,
     CuteFileUploadDemo,
     CuteTransferDemo,