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(() => {
-  return `el-${props.option.type}`
-})
+const inputType = computed(() => useInputType(props.option))
 
 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(() => {
-  if (props.option.type && props.option.type.startsWith('common-')) {
-    return `${props.option.type}` // 自定义控件
-  }
-  return `el-${props.option.type || 'input'}`
-})
+const inputType = computed(() => useInputType(props.option))
 
 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,47 +126,51 @@ defineExpose({
 </script>
 
 <template>
-  <el-table
-    ref="table"
-    v-bind="$attrs"
+  <el-container
     v-loading="loading"
-    :highlight-current-row="highlightCurrentRow"
-    :stripe="stripe"
-    :data="data"
-    :border="border"
+    class="no_flex"
     :element-loading-text="loadingText"
   >
-    <common-table-column
-      v-for="(column, index) in calcColumns"
-      :key="index"
-      :column="column"
-      :button-size="buttonSize"
+    <el-table
+      ref="table"
+      v-bind="$attrs"
+      :highlight-current-row="highlightCurrentRow"
+      :stripe="stripe"
+      :data="data"
+      :border="border"
     >
-      <!--用于自定义显示属性-->
-      <template
-        #default="scope"
+      <common-table-column
+        v-for="(column, index) in calcColumns"
+        :key="index"
+        :column="column"
+        :button-size="buttonSize"
       >
-        <slot
-          v-if="column.slot"
-          :row="scope.row"
-          :column="scope.column"
-          :item="scope.row"
-          :column-conf="scope.columnConf"
-          :name="column.slot"
-        />
-      </template>
-    </common-table-column>
-  </el-table>
-  <el-pagination
-    v-if="!loading&&page&&page.pageCount&&page.pageCount>1"
-    class="common-pagination"
-    v-bind="pageAttrs"
-    :total="page.totalCount"
-    :page-size="page.pageSize"
-    :current-page="page.pageNumber"
-    @size-change="pageSizeChange($event)"
-    @current-change="currentPageChange($event)"
-  />
+        <!--用于自定义显示属性-->
+        <template
+          #default="scope"
+        >
+          <slot
+            v-if="column.slot"
+            :row="scope.row"
+            :column="scope.column"
+            :item="scope.row"
+            :column-conf="scope.columnConf"
+            :name="column.slot"
+          />
+        </template>
+      </common-table-column>
+    </el-table>
+    <el-pagination
+      v-if="page&&page.pageCount&&page.pageCount>1"
+      class="common-pagination"
+      v-bind="pageAttrs"
+      :total="page.totalCount"
+      :page-size="page.pageSize"
+      :current-page="page.pageNumber"
+      @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()"
     >