feat: ✨ pageSearch组件，添加间距样式配置，自适应布局按钮位置配置，添加使用案例

src/views/demo/curd/config/search.ts

@@ -1,14 +1,8 @@
 import DeptAPI from "@/api/system/dept.api";
 import type { ISearchConfig } from "@/components/CURD/types";
 
-const selectOptions = reactive([
-  { label: "启用", value: 1 },
-  { label: "禁用", value: 0 },
-]);
-
 const searchConfig: ISearchConfig = {
   pageName: "sys:user",
-  colon: false,
   formItems: [
     {
       tips: "支持模糊搜索",
@@ -20,13 +14,6 @@ const searchConfig: ISearchConfig = {
         clearable: true,
         style: { width: "200px" },
       },
-      events: {
-        change: (e) => {
-          console.log("输入框的值: ", e);
-          // 级联操作示例，需要使用reactive提前定义数组
-          // selectOptions.push({ label: e, value: e });
-        },
-      },
     },
     {
       type: "tree-select",
@@ -48,7 +35,6 @@ const searchConfig: ISearchConfig = {
       },
     },
     {
-      tips: { effect: "light", placement: "top", content: "自定义文字提示" },
       type: "select",
       label: "状态",
       prop: "status",
@@ -57,17 +43,15 @@ const searchConfig: ISearchConfig = {
         clearable: true,
         style: { width: "200px" },
       },
-      options: selectOptions,
-      events: {
-        change: function (e) {
-          console.log("选中的值: ", e);
-        },
-      },
+      options: [
+        { label: "启用", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
     },
     {
       type: "date-picker",
       label: "创建时间",
-      prop: "createAt",
+      prop: "createTime",
       attrs: {
         type: "daterange",
         "range-separator": "~",
@@ -77,61 +61,6 @@ const searchConfig: ISearchConfig = {
         style: { width: "200px" },
       },
     },
-    {
-      type: "date-picker",
-      label: "日期选择器",
-      prop: "testDataPicker",
-      attrs: {
-        type: "date",
-        placeholder: "选择日期",
-        style: { width: "200px" },
-      },
-    },
-    {
-      type: "input-number",
-      label: "数字输入框",
-      prop: "testInputNumber",
-      attrs: {
-        controls: false,
-        placeholder: "请输入数字",
-        style: { width: "200px" },
-      },
-    },
-    {
-      type: "input-tag",
-      label: "标签选择器",
-      prop: "testInputTags",
-      attrs: {
-        clearable: true,
-        placeholder: "请输入",
-      },
-    },
-    {
-      type: "custom-tag",
-      label: "标签选择器",
-      prop: "testCustomTags",
-      attrs: {
-        buttonAttrs: { btnText: "+ New Tag" },
-        inputAttrs: {},
-        tagAttrs: {},
-      },
-    },
-    {
-      type: "time-picker",
-      label: "时间选择器",
-      prop: "testTimePicker",
-      attrs: {
-        style: { width: "200px" },
-      },
-    },
-    {
-      type: "time-select",
-      label: "时间选择",
-      prop: "testTimeSelect",
-      attrs: {
-        style: { width: "200px" },
-      },
-    },
   ],
 };
 

src/views/demo/curd/config/search2.ts

@@ -0,0 +1,158 @@
+import DeptAPI from "@/api/system/dept.api";
+import type { ISearchConfig } from "@/components/CURD/types";
+
+const selectOptions = reactive([
+  { label: "启用", value: 1 },
+  { label: "禁用", value: 0 },
+]);
+
+const searchConfig: ISearchConfig = {
+  grid: "right",
+  colon: true,
+  showNumber: 3,
+  form: { labelPosition: "right", labelWidth: "90px" },
+  cardAttrs: { shadow: "hover", style: { "margin-bottom": "12px" } },
+  formItems: [
+    {
+      tips: { effect: "light", placement: "top", content: "自定义文字提示" },
+      type: "input",
+      label: "输入框",
+      prop: "testInput",
+      attrs: { placeholder: "请输入", clearable: true },
+      events: {
+        change: (e) => {
+          console.log("输入框的值: ", e);
+          // 级联操作示例，需要使用reactive提前定义数组
+          // selectOptions.push({ label: e, value: e });
+        },
+      },
+    },
+    {
+      type: "input-number",
+      label: "数字输入框",
+      prop: "testInputNumber",
+      attrs: { placeholder: "请输入", controls: false },
+    },
+    {
+      type: "select",
+      label: "下拉选择框",
+      prop: "testSelect",
+      attrs: { placeholder: "全部", clearable: true },
+      options: selectOptions,
+      events: {
+        change: function (e) {
+          console.log("选中的值: ", e);
+        },
+      },
+    },
+    {
+      type: "tree-select",
+      label: "树形选择框",
+      prop: "testTreeSelect",
+      attrs: {
+        placeholder: "请选择",
+        data: [],
+        filterable: true,
+        "check-strictly": true,
+        "render-after-expand": false,
+        clearable: true,
+      },
+      async initFn(formItem) {
+        formItem.attrs.data = await DeptAPI.getOptions();
+        // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
+        // this.attrs!.data = await DeptAPI.getOptions();
+      },
+    },
+    {
+      type: "cascader",
+      label: "级联选择器",
+      prop: "testCascader",
+      attrs: {
+        placeholder: "请选择",
+        clearable: true,
+        props: {
+          expandTrigger: "hover",
+          label: "label",
+          value: "value",
+          children: "children",
+        },
+        options: [
+          {
+            value: "guide",
+            label: "Guide",
+            children: [
+              {
+                value: "disciplines",
+                label: "Disciplines",
+                children: [
+                  {
+                    value: "consistency",
+                    label: "Consistency",
+                  },
+                ],
+              },
+              {
+                value: "navigation",
+                label: "Navigation",
+                children: [
+                  {
+                    value: "side nav",
+                    label: "Side Navigation",
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      type: "date-picker",
+      label: "范围选择器",
+      prop: "createAt",
+      attrs: {
+        type: "daterange",
+        "range-separator": "~",
+        "start-placeholder": "开始时间",
+        "end-placeholder": "截止时间",
+        "value-format": "YYYY-MM-DD",
+      },
+    },
+    {
+      type: "date-picker",
+      label: "日期选择器",
+      prop: "testDataPicker",
+      attrs: { placeholder: "请选择", type: "date" },
+    },
+    {
+      type: "time-picker",
+      label: "时间选择器",
+      prop: "testTimePicker",
+      attrs: { placeholder: "请选择", clearable: true },
+    },
+    {
+      type: "time-select",
+      label: "时间选择",
+      prop: "testTimeSelect",
+      attrs: { placeholder: "请选择", clearable: true },
+    },
+    {
+      type: "input-tag",
+      label: "标签选择器",
+      prop: "testInputTags",
+      attrs: { placeholder: "请选择", clearable: true },
+    },
+    {
+      type: "custom-tag",
+      label: "标签选择器",
+      prop: "testCustomTags",
+      attrs: {
+        buttonAttrs: { btnText: "+ New Tag" },
+        inputAttrs: {},
+        tagAttrs: {},
+      },
+    },
+  ],
+};
+
+export default searchConfig;

src/views/demo/curd/index.vue

@@ -74,6 +74,7 @@
       </page-modal>
     </template>
     <template v-else>
+      <page-search ref="searchRef" :search-config="searchConfig2" @reset-click="handleResetClick" />
       <page-content
         ref="contentRef"
         :content-config="contentConfig2"
@@ -100,6 +101,7 @@ import contentConfig from "./config/content";
 import contentConfig2 from "./config/content2";
 import editModalConfig from "./config/edit";
 import searchConfig from "./config/search";
+import searchConfig2 from "./config/search2";
 
 const {
   searchRef,