feat: 加上查询表单组件

src/components/meSearchForm.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-form ref="elFormRef" class="me-search-form" :inline="inline">
+    <slot></slot>
+    <div v-if="$slots.more" v-show="showAll" class="me-search-form-more">
+      <slot name="more"></slot>
+    </div>
+    <el-form-item>
+      <slot name="button"></slot>
+      <el-button v-if="searchText !== undefined" type="primary" @click="$emit('search')">
+        {{ searchText ? searchText : $t('查询') }}
+      </el-button>
+      <el-button
+        v-if="resetText !== undefined"
+        @click="_.vnode.props.onReset ? $emit('reset') : elFormRef!.resetFields()"
+      >
+        {{ resetText ? resetText : $t('重置') }}
+      </el-button>
+      <el-button v-if="$slots.more" text @click="showAll = !showAll">
+        {{ $t(showAll ? '展开' : '收起') }}
+        <mel-icon-arrow-up class="more-icon" :class="{ reversal: showAll }"></mel-icon-arrow-up>
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts">
+import { ElForm } from 'element-plus';
+import { ComponentOptionsMixin, ExtractPropTypes, Ref } from 'vue';
+import type { FormInstance } from 'element-plus';
+const props = {
+  inline: {
+    type: Boolean,
+    default: true,
+  },
+  defaultAll: {
+    type: Boolean,
+    default: false,
+  },
+  searchText: {
+    type: String,
+    default: '',
+  },
+  resetText: {
+    type: String,
+    default: '',
+  },
+};
+const emits = ['search', 'reset'] as unknown as {
+  search: () => void;
+  reset: () => void;
+};
+export default defineComponent<
+  ComponentProps<typeof ElForm> & Partial<ExtractPropTypes<typeof props>>,
+  {
+    elFormRef: Ref<FormInstance | undefined>;
+  },
+  Record<string, any>,
+  Record<string, any>,
+  Record<string, any>,
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  typeof emits
+>({
+  name: 'MeDialog',
+  props: props as any,
+  emits,
+  setup(props, { expose }) {
+    const elFormRef = ref<FormInstance>();
+    const showAll = ref(props.defaultAll);
+    expose({ elFormRef });
+    return {
+      showAll,
+      elFormRef,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.me-search-form {
+  .me-search-form-more {
+    display: inline-block;
+  }
+  .more-icon {
+    transition: transform 0.35s;
+    margin-left: 5px;
+  }
+  .reversal {
+    transform: rotateZ(180deg);
+  }
+}
+</style>

src/locales/lang/en/menu.json

@@ -17,5 +17,7 @@
   "自定义表单": "Custom Form",
   "数字动画": "Digital Animation",
   "角色权限": "Role Permission",
-  "图片预览": "Image Viewer"
+  "图片预览": "Image Viewer",
+  "弹窗": "Dialog",
+  "筛选表单": "Search form"
 }

src/router/routes/components/6-searchForm.ts

@@ -0,0 +1,8 @@
+import { RouteRecordRaw } from 'vue-router';
+export const routes: RouteRecordRaw[] = [
+  {
+    path: 'searchForm',
+    component: () => import('@/views/components/searchForm/searchForm.vue'),
+    meta: { title: '筛选表单' },
+  },
+];

src/views/components/searchForm/lang/en.json

@@ -0,0 +1,6 @@
+{
+  "筛选": "Screen",
+  "姓名": "Name",
+  "类型": "Type",
+  "创建时间": "Create Date"
+}

src/views/components/searchForm/searchForm.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-card class="search-form">
+    <me-search-form ref="formRef" :model="params" :search-text="t('筛选')" label-width="95px" @search="search()">
+      <el-form-item :label="t('姓名')" prop="name">
+        <el-input v-model="params.name"></el-input>
+      </el-form-item>
+      <template #more>
+        <el-form-item :label="t('类型')" prop="type">
+          <el-select v-model="params.type">
+            <el-option v-for="(item, key) in typeObj" :key="key" :value="key" :label="item" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="t('创建时间')" prop="createTimes">
+          <el-date-picker v-model="params.createTimes" type="daterange" value-format="YYYY-MM-DD" />
+        </el-form-item>
+      </template>
+    </me-search-form>
+  </el-card>
+</template>
+
+<script setup lang="ts" name="SearchForm">
+import MeSearchForm from '@/components/meSearchForm.vue';
+import { useLocalesI18n } from '@/locales/i18n';
+let { t } = useLocalesI18n({}, [(locale: string) => import(`./lang/${locale}.json`), 'searchForm']);
+const typeObj = {
+  '1': '书籍',
+  '2': '电脑',
+  '3': '手机',
+};
+const params = reactive({
+  name: '',
+  type: '',
+  createTimes: ['', ''] as [string, string],
+});
+const formRef = ref<InstanceType<typeof MeSearchForm>>();
+const search = () => {
+  ElMessageBox.alert(JSON.stringify(params));
+};
+</script>
+<style lang="scss" scoped>
+.search-form {
+  ::v-deep(.el-input) {
+    width: 215px;
+  }
+}
+</style>