search表单

src/components/common-form-control/control-child.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue'
 import { $i18nBundle } from '@/messages'
+import { useInputType } from '@/components/utils'
 
 /**
  * @type {{option:CommonFormOption}}
@@ -15,9 +16,7 @@ const props = defineProps({
   }
 })
 
-const inputType = computed(() => {
+const inputType = computed(() => useInputType(props.option))
-  return `el-${props.option.type}`
-})
 
 const label = computed(() => {
   const option = props.option
@@ -30,11 +29,11 @@ const label = computed(() => {
  * element-plus的复选框和单选框没有value值，只有label用于存储值，因此特殊处理
  * @type {string[]}
  */
-const labelAsValueKeys = ['checkbox', 'radio', 'checkbox-button', 'radio-button']
+const labelAsValueKeys = ['el-checkbox', 'el-radio', 'el-checkbox-button', 'el-radio-button']
 
 const labelOrValue = computed(() => {
   const option = props.option
-  if (labelAsValueKeys.includes(option.type)) {
+  if (labelAsValueKeys.includes(inputType.value)) {
     return option.value
   }
   return label.value

src/components/common-form-control/index.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import { $i18nBundle } from '@/messages'
 import ControlChild from '@/components/common-form-control/control-child.vue'
+import { useInputType } from '@/components/utils'
 
 /**
  * 定义一些注释属性，方便代码提示
@@ -41,15 +42,10 @@ const props = defineProps({
   }
 })
 
-const inputType = computed(() => {
+const inputType = computed(() => useInputType(props.option))
-  if (props.option.type && props.option.type.startsWith('common-')) {
-    return `${props.option.type}` // 自定义控件
-  }
-  return `el-${props.option.type || 'input'}`
-})
 
 const modelAttrs = computed(() => {
-  if (['input', 'select', 'autocomplete', 'cascader'].includes(props.option.type || 'input')) {
+  if (['el-input', 'el-select', 'common-autocomplete', 'el-autocomplete', 'el-cascader'].includes(inputType.value)) {
     return Object.assign({ clearable: true }, props.option.attrs || {})
   }
   return props.option.attrs

src/components/common-form/index.vue

@@ -132,6 +132,10 @@ defineExpose({
       :model="formModel"
       :option="option"
     />
+    <slot
+      :form="form"
+      name="before-buttons"
+    />
     <el-form-item v-if="showButtons">
       <el-button
         v-if="showSubmit"

src/components/common-table/index.vue

@@ -126,15 +126,18 @@ defineExpose({
 </script>
 
 <template>
+  <el-container
+    v-loading="loading"
+    class="no_flex"
+    :element-loading-text="loadingText"
+  >
     <el-table
       ref="table"
       v-bind="$attrs"
-    v-loading="loading"
       :highlight-current-row="highlightCurrentRow"
       :stripe="stripe"
       :data="data"
       :border="border"
-    :element-loading-text="loadingText"
     >
       <common-table-column
         v-for="(column, index) in calcColumns"
@@ -158,7 +161,7 @@ defineExpose({
       </common-table-column>
     </el-table>
     <el-pagination
-    v-if="!loading&&page&&page.pageCount&&page.pageCount>1"
+      v-if="page&&page.pageCount&&page.pageCount>1"
       class="common-pagination"
       v-bind="pageAttrs"
       :total="page.totalCount"
@@ -167,6 +170,7 @@ defineExpose({
       @size-change="pageSizeChange($event)"
       @current-change="currentPageChange($event)"
     />
+  </el-container>
 </template>
 
 <style scoped>

src/components/utils/index.js

@@ -10,6 +10,14 @@ const calcWithIf = menuItem => {
   })
 }
 
+export const useInputType = (option) => {
+  const inType = option.type || 'input'
+  if (inType.startsWith('common-') || inType.startsWith('el-')) {
+    return inType // 控件全名
+  }
+  return `el-${option.type || 'input'}`
+}
+
 export const MENU_INFO_LIST = ref({})
 
 export const useMenuInfo = item => {

src/views/tools/Tables.vue

@@ -1,17 +1,20 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { loadUsersResult, useUserFormOptions } from '@/services/user/UserService'
 import { useDefaultPage } from '@/config'
 import { useRouter } from 'vue-router'
+import { $i18nMsg } from '@/messages'
 
 const router = useRouter()
 
 const page = ref(useDefaultPage())
 
 const tableData = ref([])
-
+const loading = ref(true)
 const loadUsers = async () => {
+  loading.value = true
   const usersResult = await loadUsersResult({ page: page.value })
+  loading.value = false
   if (usersResult.success && usersResult.resultData) {
     const resultData = usersResult.resultData
     tableData.value = resultData.userList
@@ -72,6 +75,36 @@ const buttons = ref([{
     return !!item.id
   }
 }])
+//* ************搜索框**************//
+const searchParam = ref({})
+const searchFormOptions = computed(() => {
+  return [
+    {
+      label: '用户名',
+      prop: 'nameCn'
+    }, {
+      label: $i18nMsg('性别', 'Gender'),
+      type: 'select',
+      prop: 'gender',
+      children: [{
+        type: 'option',
+        value: '',
+        label: '请选择'
+      }, {
+        type: 'option',
+        value: 'male',
+        label: $i18nMsg('男', 'Male')
+      }, {
+        type: 'option',
+        value: 'female',
+        label: $i18nMsg('女', 'Female')
+      }]
+    }
+  ]
+})
+const doSearch = form => {
+  console.info('=================searchParam', searchParam.value)
+}
 /** *************用户编辑**************/
 const currentUser = ref({})
 const showEdit = ref(false)
@@ -94,7 +127,16 @@ const submitForm = () => {
 </script>
 
 <template>
-  <el-container class="no_flex">
+  <el-container
+    class="no_flex"
+  >
+    <common-form
+      inline
+      :model="searchParam"
+      :options="searchFormOptions"
+      :submit-label="$t('common.label.search')"
+      @submit-form="doSearch"
+    />
     <common-table
       v-model:page="page"
       :data="tableData"
@@ -102,6 +144,7 @@ const submitForm = () => {
       :buttons="buttons"
       buttons-slot="buttons"
       :buttons-column-attrs="{width:'250px'}"
+      :loading="loading"
       @page-size-change="loadUsers()"
       @current-page-change="loadUsers()"
     >