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 => {