增加formComp组件

src/components.d.ts

@@ -42,6 +42,7 @@ declare module '@vue/runtime-core' {
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     Exception: typeof import('./components/Exception.vue')['default']
+    FormComp: typeof import('./components/form/FormComp.vue')['default']
     FormItem: typeof import('./components/form/FormItem.vue')['default']
     GlobalFooter: typeof import('./components/GlobalFooter.vue')['default']
     GlobalHeader: typeof import('./components/GlobalHeader.vue')['default']

src/components/ProTable.vue

@@ -3,7 +3,6 @@ import { ElMessage, ElMessageBox, type FormProps } from 'element-plus'
 import type { PropType } from 'vue'
 import type { AdvancedForm, BasicForm, BasicFormItem } from '@/types/form'
 import router from '@/router'
-import type { RouteLocationNormalized } from 'vue-router'
 
 interface CRUD {
   create: Function
@@ -33,15 +32,21 @@ const props = defineProps({
 
 // ============== 查询部分开始 ===============
 const query = ref<any>({})
-// const searchList = computed(() =>
-//   props.form.formItems.filter((item: any) => {
-//     if (item.group) {
-//     } else {
-//       item.search
-//     }
-//   })
-// )
 const searchList = ref<any>([])
+watch(
+  () => props.form.formItems,
+  val => {
+    val.forEach((item: any) => {
+      if (item.group) {
+        searchList.value = searchList.value.concat(item.group.filter((item: any) => item.search))
+      } else {
+        item.search && searchList.value.push(item)
+      }
+    })
+    console.log(searchList.value)
+  },
+  { immediate: true }
+)
 
 const handleQuery = () => {
   curPage.value = 1
@@ -140,15 +145,7 @@ const dialogVisible = ref(false)
     <el-card class="mb-4" shadow="never">
       <el-form :inline="true">
         <el-form-item :label="item.label" v-for="item in searchList">
-          <component
-            :is="'el-' + item.type"
-            v-model="query[item.name]"
-            :placeholder="item.placeholder || placeholder(item)"
-          >
-            <template v-if="item.type === 'radio-group'">
-              <el-radio :label="option.label" v-for="option in item.options">{{ option.value }}</el-radio>
-            </template>
-          </component>
+          <form-comp :item="item" :formData="query"></form-comp>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handleQuery">查询</el-button>

src/components/form/AdvancedForm.vue

@@ -25,7 +25,9 @@ const props = defineProps({
   <el-card v-for="item in form.formItems" :title="item.label">
     <el-row :gutter="20">
       <el-col :span="sub.span || form.span || 12" v-for="sub in item.group">
-        <form-item :item="sub" :formData="formData"></form-item>
+        <el-form-item :label="sub.label" :rules="sub.rules" :prop="sub.name">
+          <form-comp :item="sub" :formData="formData"></form-comp>
+        </el-form-item>
       </el-col>
     </el-row>
   </el-card>

src/components/form/BasicForm.vue

@@ -22,7 +22,9 @@ const props = defineProps({
 <template>
   <el-row :gutter="20">
     <el-col :span="item.span || form.span || 12" v-for="item in form.formItems">
-      <form-item :item="item" :formData="formData"></form-item>
+      <el-form-item :label="item.label" :rules="item.rules" :prop="item.name">
+        <form-comp :item="item" :formData="formData"></form-comp>
+      </el-form-item>
     </el-col>
   </el-row>
 </template>

src/components/form/FormComp.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { BasicForm, BasicFormItem, AdvancedForm, AdvancedFormItem } from '@/types/form'
+
+const props = defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<BasicFormItem>
+  },
+  formData: {
+    required: true,
+    type: Object
+  }
+})
+
+const placeholder = (item: BasicFormItem) => {
+  if (['select'].includes(item.type)) {
+    return '请选择' + item.label
+  } else {
+    return '请输入' + item.label
+  }
+}
+</script>
+
+<template>
+  <component
+    :is="'el-' + item.type"
+    v-model="formData[item.name]"
+    v-bind="item.props"
+    :placeholder="item.placeholder || placeholder(item)"
+  >
+    <template v-if="item.type === 'radio-group'">
+      <el-radio :label="option.label" v-for="option in item.options" v-bind="option.props">
+        {{ option.value }}
+      </el-radio>
+    </template>
+    <template v-if="item.type === 'checkbox-group'">
+      <el-checkbox :label="option.label" v-for="option in item.options" v-bind="option.props">
+        {{ option.value }}
+      </el-checkbox>
+    </template>
+    <template v-else-if="item.type === 'select'">
+      <el-option
+        :label="option.label"
+        :value="option.value"
+        v-for="option in item.options"
+        v-bind="option.props"
+      ></el-option>
+    </template>
+  </component>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-select) {
+  width: 100%;
+}
+</style>

src/components/form/FormItem.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import type { BasicForm, BasicFormItem, AdvancedForm, AdvancedFormItem } from '@/types/form'
-
-const props = defineProps({
-  item: {
-    required: true,
-    type: Object as PropType<BasicFormItem>
-  },
-  formData: {
-    required: true,
-    type: Object
-  }
-})
-
-const placeholder = (item: BasicFormItem) => {
-  if (['select'].includes(item.type)) {
-    return '请选择' + item.label
-  } else {
-    return '请输入' + item.label
-  }
-}
-</script>
-
-<template>
-  <el-form-item :label="item.label" :rules="item.rules" :prop="item.name">
-    <component
-      :is="'el-' + item.type"
-      v-model="formData[item.name]"
-      v-bind="item.props"
-      :placeholder="item.placeholder || placeholder(item)"
-    >
-      <template v-if="item.type === 'radio-group'">
-        <el-radio :label="option.label" v-for="option in item.options" v-bind="option.props">
-          {{ option.value }}
-        </el-radio>
-      </template>
-      <template v-if="item.type === 'checkbox-group'">
-        <el-checkbox :label="option.label" v-for="option in item.options" v-bind="option.props">
-          {{ option.value }}
-        </el-checkbox>
-      </template>
-      <template v-else-if="item.type === 'select'">
-        <el-option
-          :label="option.label"
-          :value="option.value"
-          v-for="option in item.options"
-          v-bind="option.props"
-        ></el-option>
-      </template>
-    </component>
-  </el-form-item>
-</template>
-
-<style lang="scss" scoped>
-:deep(.el-select) {
-  width: 100%;
-}
-</style>

src/stores/user.ts

@@ -24,6 +24,7 @@ export const useUserStore = defineStore({
     logout() {
       localStorage.removeItem('token')
       this.$reset()
+      console.log(router.currentRoute)
       router.push({ path: '/login', query: { redirect: router.currentRoute.value.fullPath } })
     }
   }