flame-plus 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flame-plus",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "private": false,
   "description": "基于 element-plus 的组件库",
   "main": "packages/index.ts",
@@ -20,6 +20,7 @@
     "core-js": "^3.6.5",
     "editor": "1.0.0",
     "element-plus": "^2.1.8",
+    "flame-request": "^1.0.1",
     "html-loader": "^3.1.0",
     "monaco-editor": "0.30.*",
     "monaco-editor-esm-webpack-plugin": "^2.0.2",

package/packages/components/base/flmButton/flmButton.vue

@@ -22,7 +22,7 @@ export default defineComponent({
       <el-button
         {...buttonConfig.value}
         onClick={() => ctx.emit('buttonClick')}
-      >{buttonConfig.value.text || '点击'}</el-button>
+      >{buttonConfig.value.buttonText || '点击'}</el-button>
     )
   },
 })

package/packages/components/complex/flmForm/flmForm.vue

@@ -27,7 +27,7 @@ import {
   flmTimePicker,
   flmTimeSelect,
   flmTransfer,
-} from '../../index'
+} from '@/components'
 import {
   ControlTypes,
   ControlConfig,
@@ -37,8 +37,8 @@ import {
   FormItemConfig,
   FormButtonConfig,
   formDefaultConfig
-} from '../../../model/flmComponentConfig'
-import { filterConfig, isValidKey } from '../../../utils'
+} from '@/model/flmComponentConfig'
+import { filterConfig, isValidKey } from '@/utils'
 
 export default defineComponent({
   components: {
@@ -59,7 +59,7 @@ export default defineComponent({
     flmTimeSelect,
     flmTransfer,
   },
-  emits: ['submit', 'cancel', 'customEvent'],
+  emits: ['submit', 'cancel', 'reset', 'customEvent'],
   props: {
     // 默认设置
     config: {
@@ -72,7 +72,7 @@ export default defineComponent({
     let formModel: FormModel = reactive({})  // 表单数据
 
     // 监听表单配置的 model，变化后更新组件内部 formModel
-    watch(() => props.config.model, (newModel: FormModel) => upadateFormModel(newModel))
+    watch(() => props.config.model, (newModel: FormModel) => updateFormModel(newModel))
 
     // 监听组件内部 formModel，变化后更新控件 value
     watch(formModel, (newModel: FormModel) => updateControl(newModel))
@@ -80,7 +80,7 @@ export default defineComponent({
     onMounted(() => {
       if (props.config?.model && Object.keys(props.config?.model).length) {
         updateControl(props.config.model)
-        upadateFormModel(props.config.model)
+        updateFormModel(props.config.model)
       }
     })
 
@@ -107,7 +107,7 @@ export default defineComponent({
      * @date 2022-05-09
      * @param {FormModel} model
      */
-    const upadateFormModel = (model: FormModel) => {
+    const updateFormModel = (model: FormModel) => {
       Object.entries(model).forEach(([key, value]: Array<any>) => formModel[key] = value)
     }
 
@@ -122,10 +122,10 @@ export default defineComponent({
     /**
      * 表单方法调用
      * @date 2022-04-14
-     * @param {'submit' | 'cancel' | string} event 方法名（默认方法直接调用；自定义方法回传方法名及表单数据）
+     * @param {'submit' | 'cancel' | 'reset' | string} event 方法名（默认方法直接调用；自定义方法回传方法名及表单数据）
      */
     const formEvent = (event: FormButtonConfig['event']) => {
-      const defaultEvent: Record<FormButtonConfig['event'], Function> = { submit, cancel }
+      const defaultEvent: Record<FormButtonConfig['event'], Function> = { submit, cancel, reset }
       isValidKey(event, defaultEvent)
         ? defaultEvent[event]()
         : emit('customEvent', { event, formModel })
@@ -142,7 +142,6 @@ export default defineComponent({
 
     // 取消
     const cancel = () => {
-      reset()
       emit('cancel', formModel)
     }
 
@@ -151,6 +150,7 @@ export default defineComponent({
       const formRef: any = instance?.refs['formRef']
       if (!formRef) return
       formRef.resetFields()
+      emit('reset', formModel)
     }
 
     /**
@@ -171,7 +171,7 @@ export default defineComponent({
           if (isValidKey('isSlot', item)) {
             const { isSlot, ...itemConfig } = item
             return (
-              <el-form-item {...itemConfig}>
+              <el-form-item class={`form-${item.prop}`} {...itemConfig}>
                 {(slots[item.prop]?.({ prop: item.prop, formModel }))}
               </el-form-item>
             )
@@ -179,7 +179,7 @@ export default defineComponent({
             const { controlType, controlConfig, ...itemConfig } = item
             if (controlType && controlConfig) {
               return (
-                <el-form-item {...itemConfig}>
+                <el-form-item class={`form-${item.prop}`} {...itemConfig}>
                   {controlDom(item.prop, controlType, controlConfig)}
                 </el-form-item>
               )
@@ -198,7 +198,7 @@ export default defineComponent({
     const buttonsDom = (buttons: FormConfig['buttons'] = []) => {
       if (buttons.length) {
         return (
-          <el-form-item>
+          <el-form-item class="form-buttons">
             {buttons.map(({ event, ...config }: FormButtonConfig) =>
               <flm-button config={config} onButtonClick={() => formEvent(event)} />
             )}
@@ -211,13 +211,16 @@ export default defineComponent({
 
     // 表单设置
     const formConfig = computed((): FormConfig => filterConfig(formDefaultConfig, props.config))
-    const { items = [], buttons = [], model, ...defaultConfig } = formConfig.value
-    return () => (
-      <el-form ref='formRef' {...defaultConfig} model={formModel}>
-        {formItemsDom(items)}
-        {buttonsDom(buttons)}
-      </el-form>
-    )
+    const formDom = () => {
+      const { items = [], buttons = [], model, ...defaultConfig } = formConfig.value
+      return (
+        <el-form ref='formRef' {...defaultConfig} model={formModel}>
+          {formItemsDom(items)}
+          {buttonsDom(buttons)}
+        </el-form>
+      )
+    }
+    return () => (formDom())
   },
 })
 </script>

package/packages/components/complex/flmSearch/flmSearch.vue

@@ -5,7 +5,7 @@
       ref="searchDefaultRef"
       :config="defaultConfig"
       @submit="searchSubmit"
-      @cancel="searchCancel"
+      @reset="searchReset"
       @customEvent="searchCustomEvent"
     >
       <template v-for="defaultSlot in defaultSlots" #[defaultSlot]="{ prop, formModel }">
@@ -37,15 +37,15 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps, PropType, ref, Ref, computed, ComputedRef } from 'vue'
-import { flmForm } from '../../index'
-import { FormConfig, FormItemConfig } from '../../../model/flmComponentConfig'
-import { isValidKey } from '../../../utils'
+import { PropType, ref, Ref, computed, ComputedRef } from 'vue'
+import { flmForm } from '@/components'
+import { ButtonType, FormItemConfig, SearchConfig } from '@/model/flmComponentConfig'
+import { isValidKey } from '@/utils'
 
-const emit = defineEmits(['searchSubmit', 'searchCancel', 'searchCustomEvent'])
+const emit = defineEmits(['searchSubmit', 'searchReset', 'searchCustomEvent'])
 const props = defineProps({
   config: {
-    type: Object as PropType<FormConfig>,
+    type: Object as PropType<SearchConfig>,
     default() {
       return {}
     }
@@ -57,38 +57,38 @@ const searchExtraRef: Ref<any> = ref()         // 额外搜索栏实例
 
 let showExtra: Ref<boolean> = ref(false)       // 显示额外搜索条件
 let hasExtra: Ref<boolean> = ref(false)        // 有额外搜索条件
-let extraFormModel: Ref<FormConfig> = ref({})  // 额外搜索条件
+let extraFormModel: Ref<SearchConfig> = ref({})  // 额外搜索条件
 
-const maxFormItem = 3  // 默认搜索栏最大条件数
+const maxFormItem = computed(() => props.config.maxFormItem || 3) // 默认搜索栏最大条件数
 
 // 默认搜索栏设置
-const defaultConfig: ComputedRef<FormConfig> = computed(() => {
+const defaultConfig: ComputedRef<SearchConfig> = computed(() => {
   const { items = [], buttons, ...config } = props.config
-  hasExtra.value = items.length > maxFormItem
-  hasExtra.value && buttons?.unshift({ 'text': '更多', 'event': 'openDrawer' })  // 搜索条件大于最大数量，插入更多按钮
+  hasExtra.value = items.length > maxFormItem.value
+  hasExtra.value && buttons?.unshift({ 'buttonText': '更多', 'event': 'openDrawer' })  // 搜索条件大于最大数量，插入更多按钮
   return {
     ...config,
     inline: true,
-    items: items.slice(0, maxFormItem),
+    items: items.slice(0, maxFormItem.value),
     buttons
   }
 })
 // 额外搜索栏设置
-const extraConfig: ComputedRef<FormConfig> = computed(() => {
+const extraConfig: ComputedRef<SearchConfig> = computed(() => {
   const { items, buttons, ...config } = props.config
   return {
     ...config,
     inline: false,
-    items: items?.slice(maxFormItem),
+    items: items?.slice(maxFormItem.value),
     // 插入额外搜索栏按钮
     buttons: [
       {
-        'text': '取消',
+        'buttonText': '取消',
         'event': 'cancel'
       },
       {
-        'type': 'primary',
-        'text': '搜索',
+        'type': ButtonType['primary'],
+        'buttonText': '搜索',
         'event': 'submit'
       }
     ]
@@ -96,30 +96,35 @@ const extraConfig: ComputedRef<FormConfig> = computed(() => {
 })
 
 // 获取表格插槽
-const getFormSlots = (items: FormConfig['items'] = []): Array<string> => {
-  return items
-    .map(({ prop, isSlot }: FormItemConfig) => isSlot && prop)
-    .filter(item => item)
+const getFormSlots = (items: SearchConfig['items'] = []): Array<string> => {
+  let slots: Array<string> = []
+  items.forEach((item: FormItemConfig) => {
+    if (isValidKey('isSlot', item)) {
+      const { prop } = item
+      prop && typeof(prop) === 'string' && slots.push(prop)
+    }
+  })
+  return slots
 }
 // 默认搜索栏插槽
-const defaultSlots = computed((): Array<string> => getFormSlots(props.config.items.slice(0, maxFormItem)))
+const defaultSlots = computed((): Array<string> => getFormSlots(props.config.items?.slice(0, maxFormItem.value)) ?? [])
 // 额外搜索栏插槽
-const extraSlots = computed((): Array<string> => getFormSlots(props.config.items.slice(maxFormItem)))
+const extraSlots = computed((): Array<string> => getFormSlots(props.config.items?.slice(maxFormItem.value)) ?? [])
 
 // 搜索栏提交
-const searchSubmit = (formModel: FormConfig['model']) => {
+const searchSubmit = (formModel: SearchConfig['model']) => {
   emit('searchSubmit', { ...formModel, ...extraFormModel.value })
 }
 
 // 搜索栏取消
-const searchCancel = () => {
+const searchReset = () => {
   searchExtraRef.value?.reset()
-  const extraFormMoadel = searchExtraRef.value?.formModel ?? {}
-  emit('searchCancel', { ...extraFormMoadel, ...searchDefaultRef.value.formModel })
+  const extraFormModel = searchExtraRef.value?.formModel ?? {}
+  emit('searchReset', { ...extraFormModel, ...searchDefaultRef.value.formModel })
 }
 
 // 搜索栏自定义操作
-const searchCustomEvent = ({ event, formModel }: { event: string, formModel: FormConfig['model']}) => {
+const searchCustomEvent = ({ event, formModel }: { event: string, formModel: SearchConfig['model']}) => {
   const customEvent: Record<string, Function> = { openDrawer }
   if (isValidKey(event, customEvent)) {
     customEvent[event](formModel)
@@ -132,11 +137,9 @@ const openDrawer = () => showExtra.value = true    // 打开额外搜索栏弹
 const closeDrawer = () => showExtra.value = false  // 关闭额外搜索栏弹窗
 
 // 额外搜索栏提交
-const drawerSubmit = (formModel: FormConfig['model']) => {
+const drawerSubmit = (formModel: SearchConfig['model']) => {
   formModel && (extraFormModel.value = formModel)
   emit('searchSubmit', { ...searchDefaultRef.value.formModel, ...formModel })
   closeDrawer()
 }
-</script>
-
-<style lang="scss"></style>
+</script>

package/packages/components/complex/flmTable/flmTable.vue

@@ -1,12 +1,13 @@
 <script lang="tsx">
-import { defineComponent, PropType, computed } from 'vue'
+import { defineComponent, PropType, reactive, computed } from 'vue'
 import {
   TableConfig,
   TableColumnConfig,
+  TableDefaultEvent,
   tableDefaultConfig,
   tableColumnDefaultConfig
-} from '../../../model/flmComponentConfig'
-import { filterConfig } from '../../../utils'
+} from '@/model/flmComponentConfig'
+import { filterConfig } from '@/utils'
 
 export default defineComponent({
   emits: [
@@ -37,6 +38,44 @@ export default defineComponent({
     },
   },
   setup(props, { slots, emit }) {
+    // 表格默认事件
+    const tableDefaultEvent: TableDefaultEvent = reactive({
+      onSelect: (selection: any, row: any) => emit('select', { selection, row }),
+      onSelectAll: (selection: any) => emit('select-all', selection),
+      onSelectionChange: (row: any, column: any, cell: any, event: any) => emit('selection-change', { row, column, cell, event }),
+      onCellMouseEnter: (row: any, column: any, cell: any, event: any) => emit('cell-mouse-enter', { row, column, cell, event }),
+      onCellMouseLeave: (row: any, column: any, cell: any, event: any) => emit('cell-mouse-leave', { row, column, cell, event }),
+      onCellClick: (row: any, column: any, cell: any, event: any) => emit('cell-click', { row, column, cell, event }),
+      onCellDblclick: (row: any, column: any, cell: any, event: any) => emit('cell-dblclick', { row, column, cell, event }),
+      onCellContextmenu: (row: any, column: any, cell: any, event: any) => emit('cell-contextmenu', { row, column, cell, event }),
+      onRowClick: (row: any, column: any, event: any) => emit('row-click', { row, column, event }),
+      onRowContextmenu: (row: any, column: any, event: any) => emit('row-contextmenu', { row, column, event }),
+      onRowDblclick: (row: any, column: any, event: any) => emit('row-dblclick', { row, column, event }),
+      onHeaderClick: (column: any, event: any) => emit('header-click', { column, event }),
+      onHeaderContextmenu: (column: any, event: any) => emit('header-contextmenu', { column, event }),
+      onSortChange: ({ column, prop, order }: any) => emit('sort-change', { column, prop, order }),
+      onFilterChange: (filters: any) => emit('filter-change', filters),
+      onCurrentChange: (currentRow: any, oldCurrentRow: any) => emit('current-change', { currentRow, oldCurrentRow }),
+      onHeaderDragend: (newWidth: any, oldWidth: any, column: any, event: any) => emit('header-dragend', { newWidth, oldWidth, column, event }),
+      onExpandChange: (row: any, expanded: any) => emit('expand-change', { row, expanded }),
+    })
+    
+    /**
+     * 表格
+     * @date 2022-09-29
+     * @param {TableConfig} tableConfig 表格配置
+     * @returns {any} 表格dom
+     */
+    const tableDom = (tableConfig: TableConfig) => {
+      const { columns = [], ...defaultConfig } = tableConfig
+      return (
+        <el-table
+          {...defaultConfig}
+          {...tableDefaultEvent}
+        >{tableColumnDom(columns)}</el-table>
+      )
+    }
+
     /**
      * 表格元素
      * @date 2022-04-14
@@ -61,30 +100,7 @@ export default defineComponent({
 
     // 表单设置
     const tableConfig = computed((): TableConfig => filterConfig(tableDefaultConfig, props.config))
-    const { columns = [], ...defaultConfig } = tableConfig.value
-    return () => (
-      <el-table
-        {...defaultConfig}
-        onSelect={(selection: any, row: any) => emit('select', { selection, row })}
-        onSelectAll={(selection: any) => emit('select-all', selection)}
-        onSelectionChange={(row: any, column: any, cell: any, event: any) => emit('selection-change', { row, column, cell, event })}
-        onCellMouseEnter={(row: any, column: any, cell: any, event: any) => emit('cell-mouse-enter', { row, column, cell, event })}
-        onCellMouseLeave={(row: any, column: any, cell: any, event: any) => emit('cell-mouse-leave', { row, column, cell, event })}
-        onCellClick={(row: any, column: any, cell: any, event: any) => emit('cell-click', { row, column, cell, event })}
-        onCellDblclick={(row: any, column: any, cell: any, event: any) => emit('cell-dblclick', { row, column, cell, event })}
-        onCellContextmenu={(row: any, column: any, cell: any, event: any) => emit('cell-contextmenu', { row, column, cell, event })}
-        onRowClick={(row: any, column: any, event: any) => emit('row-click', { row, column, event })}
-        onRowContextmenu={(row: any, column: any, event: any) => emit('row-contextmenu', { row, column, event })}
-        onRowDblclick={(row: any, column: any, event: any) => emit('row-dblclick', { row, column, event })}
-        onHeaderClick={(column: any, event: any) => emit('header-click', { column, event })}
-        onHeaderContextmenu={(column: any, event: any) => emit('header-contextmenu', { column, event })}
-        onSortChange={({ column, prop, order }: any) => emit('sort-change', { column, prop, order })}
-        onFilterChange={(filters: any) => emit('filter-change', filters)}
-        onCurrentChange={(currentRow: any, oldCurrentRow: any) => emit('current-change', { currentRow, oldCurrentRow })}
-        onHeaderDragend={(newWidth: any, oldWidth: any, column: any, event: any) => emit('header-dragend', { newWidth, oldWidth, column, event })}
-        onExpandChange={(row: any, expanded: any) => emit('expand-change', { row, expanded })}
-      >{tableColumnDom(columns)}</el-table>
-    )
+    return () => (tableDom(tableConfig.value))
   },
 })
 </script>

package/packages/components/complex/flmToolbar/flmToolbar.vue

@@ -12,7 +12,7 @@
       trigger="click"
       @command="toolbarClick"
     >
-      <flm-button :config="{ ...config.publicConfig, text: '更多' }" />
+      <flm-button :config="{ ...config.publicConfig, buttonText: '更多' }" />
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item
@@ -20,7 +20,7 @@
             :config="buttonConfig"
             :key="buttonConfig.event"
             :command="buttonConfig.event"
-          >{{ buttonConfig.text }}</el-dropdown-item>
+          >{{ buttonConfig.buttonText }}</el-dropdown-item>
         </el-dropdown-menu>
       </template>
     </el-dropdown>
@@ -29,8 +29,8 @@
 
 <script lang="ts" setup>
 import { defineEmits, defineProps, PropType, computed, ComputedRef } from 'vue'
-import { flmButton } from '../../index'
-import { ToolbarConfig, ToolbarButtonConfig } from '../../../model/flmComponentConfig'
+import { flmButton } from '@/components'
+import { ToolbarConfig, ToolbarButtonConfig } from '@/model/flmComponentConfig'
 
 const emit = defineEmits(['toolbarClick'])
 const props = defineProps({

package/packages/components/index.ts

@@ -5,7 +5,6 @@ export { default as flmCheckbox } from './base/flmCheckbox/flmCheckbox.vue'
 export { default as flmCheckboxGroup } from './base/flmCheckbox/flmCheckboxGroup.vue'  // 多选框组
 export { default as flmColorPicker } from './base/flmColorPicker/flmColorPicker.vue'   // 取色器
 export { default as flmDatePicker } from './base/flmDatePicker/flmDatePicker.vue'      // 日期选择器
-export { default as flmDialog } from './base/flmDialog/flmDialog.vue'  	               // 弹窗
 export { default as flmInput } from './base/flmInput/flmInput.vue'  	                 // 输入框
 export { default as flmInputNumber } from './base/flmInputNumber/flmInputNumber.vue'   // 数字输入框
 export { default as flmPagination } from './base/flmPagination/flmPagination.vue'      // 分页器
@@ -18,12 +17,13 @@ export { default as flmSwitch } from './base/flmSwitch/flmSwitch.vue'
 export { default as flmTimePicker } from './base/flmTimePicker/flmTimePicker.vue'  	   // 时间选择器
 export { default as flmTimeSelect } from './base/flmTimeSelect/flmTimeSelect.vue'  	   // 时间选择
 export { default as flmTransfer } from './base/flmTransfer/flmTransfer.vue'  	         // 穿梭框
+export { default as flmDialog } from './base/flmDialog/flmDialog.vue'  	               // 弹窗
 
 // 复合组件
 export { default as flmForm } from './complex/flmForm/flmForm.vue'  	                 // 表单
-export { default as flmSearch } from './complex/flmSearch/flmSearch.vue'  	           // 搜索
 export { default as flmTable } from './complex/flmTable/flmTable.vue'  	               // 表格
 export { default as flmToolbar } from './complex/flmToolbar/flmToolbar.vue'            // 操作栏
+export { default as flmSearch } from './complex/flmSearch/flmSearch.vue'  	           // 搜索
 
 // 页面组件
 export { default as flmReportPage } from './page/flmReportPage/flmReportPage.vue'      // 报表页面

package/packages/components/page/flmReportPage/flmReportPage.vue

@@ -63,7 +63,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineEmits, defineProps, ref, Ref, reactive, computed, onMounted } from 'vue'
+import { ref, Ref, computed, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
   flmForm,
@@ -72,15 +72,23 @@ import {
   flmTable,
   flmPagination,
   flmDialog
-} from '../../index'
+} from '@/components'
 import {
-  ControlTypes,
   FormItemConfig,
   FormConfig,
   TableColumnConfig,
   ReportPageSetting,
-} from '../../../model/flmComponentConfig'
-import { isValidKey } from '../../../utils'
+} from '@/model/flmComponentConfig'
+import { isValidKey } from '@/utils'
+import request from '@/plugins/request'
+
+const props = defineProps({
+  // 表名
+  tableName: {
+    type: String,
+    required: true
+  }
+})
 
 const emit = defineEmits(['customEvent'])
 const reportPageRef = ref()
@@ -113,7 +121,8 @@ let reportPageConfig: Ref<ReportPageSetting> = ref({
   },
   editForm: {}
 })
-let tableSelection: Array<any> = reactive([])
+const searchParams: FormConfig['model'] = ref({})  // 搜索条件
+let tableSelection: Ref<Array<any>> = ref([])  // 表格勾选项
 
 onMounted(() => {
   queryPageSetting()
@@ -125,389 +134,78 @@ const tableHeight = () => {
     headerHight = '50px',  // 页眉高度
     mainSpacing = '30px',  // 主体内容边距
     pageSearch = '50px',   // 搜索栏高度
-    pagefooter = '50px',   // 分页高度
+    pageFooter = '50px',   // 分页高度
     pageSpacing = '40px'   // 页面边距
-  return `calc(${homeHeight} - ${headerHight} - ${mainSpacing} - ${pageSearch} - ${pagefooter} - ${pageSpacing})`
+  return `calc(${homeHeight} - ${headerHight} - ${mainSpacing} - ${pageSearch} - ${pageFooter} - ${pageSpacing})`
 }
 
 // 查询页面配置
 const queryPageSetting = () => {
-  setTimeout(() => {
-    const reportPageSetting: ReportPageSetting = {
-      search: {
-        'label-suffix': '：',
-        // 自定义属性
-        'items': [
-          {
-            'prop': 'roleType',
-            'label': '角色类型',
-            'isSlot': true
-          },
-          {
-            'prop': 'userName',
-            'label': '用户姓名',
-            'controlType': ControlTypes['flm-input'],
-            'controlConfig': {},
-            'rules': [
-              { 'min': 2, 'max': 10, 'message': '用户名字符在 2 ~ 10 以内', 'trigger': 'blur' },
-            ]
-          },
-          {
-            'prop': 'email',
-            'label': '注册邮箱',
-            'controlType': ControlTypes['flm-input'],
-            'controlConfig': {},
-            'rules': [{
-              'trigger': 'blur',
-              'validator': (rule: any, value: any, callback: any) => {
-                const emailRegExp: RegExp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-                if (!value || emailRegExp.test(value)) {
-                  callback()
-                } else {
-                  callback(new Error('请填写正确的邮箱'))
-                }
-              }
-            }]
-          },
-          {
-            'prop': 'userType',
-            'label': '用户类型',
-            'controlType': ControlTypes['flm-select'],
-            'controlConfig': {
-              'options': [
-                { 'value': 0, 'label': '普通用户' },
-                { 'value': 1, 'label': '企业用户' },
-              ]
-            }
-          },
-          {
-            'prop': 'isAdmin',
-            'label': '超级权限',
-            'controlType': ControlTypes['flm-switch'],
-            'controlConfig': {
-              'active-text': "开启",
-              'inactive-text': "关闭"
-            }
-          },
-          {
-            'prop': 'searchSlotTwo',
-            'label': '搜索插槽2',
-            'isSlot': true
-          },
-        ],
-        'buttons': [
-          {
-            'text': '重置',
-            'event': 'cancel'
-          },
-          {
-            'type': 'primary',
-            'plain': true,
-            'text': '搜索',
-            'event': 'submit'
-          }
-        ]
-      },
-      toolbar: {
-        publicConfig: { 'type':	'primary', 'plain': true },
-        maxButton: 3,
-        buttons: [
-          { 'text':'新增', event: 'openAddDialog' },
-          { 'text': '导入', event: 'pageImport' },
-          { 'text': '导出', event: 'pageExport' },
-          { 'text': '批量删除', event: 'pageBatchDelete' },
-          { 'text': '批量审核', event: 'batchAudit' },
-          { 'text': '批量编辑', event: 'batchEdit' },
-        ]
-      },
-      table: {
-        'border': true,
-        'height': "250",
-        'max-height': "250",
-        'columns': [
-          { prop: 'selection', label: '勾选', type: 'selection', fixed: 'left' },
-          { prop: 'index', label: '序号', type: 'index', width: 60 },
-          { prop: 'userName', label: '用户名' },
-          { prop: 'userType', label: '角色类型', isSlot: true },
-          { prop: 'phone', label: '联系方式' },
-          { prop: 'email', label: '注册邮箱' },
-          {
-            prop: 'address',
-            label: '地址',
-            align: 'center',
-            columns: [
-              { prop: 'province', label: '省' },
-              { prop: 'city', label: '市' },
-              { prop: 'area', label: '区' },
-              { prop: 'house', label: '详细', 'show-overflow-tooltip': true },
-            ]
-          },
-        ]
-      },
-      tableAction: {
-        publicConfig: { 'type':	'text' },
-        maxButton: 3,
-        buttons: [
-          { 'text': '详情', event: 'openReadDialog' },
-          { 'text': '编辑', event: 'openEditDialog' },
-          { 'text': '删除', event: 'pageDelete' },
-          { 'text': '审核', event: 'delete' },
-          { 'text': '忽略', event: 'delete' },
-        ]
-      },
-      pagination: {
-        'page-size': 100,
-        'current-page': 1,
-        'page-sizes': [20, 50, 100, 200],
-        'total': 400,
-        'layout': 'sizes, prev, pager, next, jumper, ->, total',
-      },
-      readDialog: {
-        'model-value': false,
-        title: '用户详情'
-      },
-      readForm: {
-        'rules': {
-          'userName': [
-            { 'min': 2, 'max': 10, 'message': '用户名字符在 2 ~ 10 以内', 'trigger': 'blur' },
-          ],
-          'email': [{
-            'trigger': 'blur',
-            'validator': (rule: any, value: any, callback: any) => {
-              const emailRegExp: RegExp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-              if (!emailRegExp.test(value)) return callback(new Error('请填写正确的邮箱'))
-              callback()
-            }
-          }],
-        },
-        'label-suffix': '：',
-        // 自定义属性
-        'items': [
-          {
-            'prop': 'userName',
-            'label': '用户名称',
-            'controlType': ControlTypes['flm-read'],
-            'controlConfig': {}
-          },
-          {
-            'prop': 'email',
-            'label': '注册邮箱',
-            'controlType': ControlTypes['flm-read'],
-            'controlConfig': {}
-          },
-          {
-            'prop': 'userType',
-            'label': '用户类型',
-            'isSlot': true,
-          },
-        ],
-        'buttons': [
-          {
-            'type': 'primary',
-            'text': '确定',
-            'event': 'cancel'
-          }
-        ]
-      },
-      addDialog: {
-        'model-value': false,
-        title: '新增用户',
-      },
-      addForm: {
-        'label-suffix': '：',
-        // 自定义属性
-        'items': [
-          {
-            'prop': 'userName',
-            'label': '用户名称',
-            'required': true,
-            'controlType': ControlTypes['flm-input'],
-            'controlConfig': {},
-            'rules': [
-              { 'required': true, 'message': '用户名不能为空' },
-              { 'min': 2, 'max': 10, 'message': '用户名字符在 2 ~ 10 以内', 'trigger': 'blur' },
-            ]
-          },
-          {
-            'prop': 'email',
-            'label': '注册邮箱',
-            'required': true,
-            'controlType': ControlTypes['flm-input'],
-            'controlConfig': {},
-            'rules': [
-              { 'required': true, 'message': '注册邮箱不能为空' },
-              {
-                'trigger': 'blur',
-                'validator': (rule: any, value: any, callback: any) => {
-                  const emailRegExp: RegExp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-                  if (!emailRegExp.test(value)) return callback(new Error('请填写正确的邮箱'))
-                  callback()
-                }
-              }
-            ]
-          },
-          {
-            'prop': 'userType',
-            'label': '用户类型',
-            'required': true,
-            'controlType': ControlTypes['flm-select'],
-            'controlConfig': {
-              'options': [
-                { 'value': 0, 'label': '普通用户' },
-                { 'value': 1, 'label': '企业用户' },
-              ]
-            },
-            'rules': [
-              { 'required': true, 'message': '用户类型不能为空' },
-            ]
-          },
-          {
-            'prop': 'isAdmin',
-            'label': '超级权限',
-            'required': true,
-            'controlType': ControlTypes['flm-switch'],
-            'controlConfig': {
-              'active-text': "开启",
-              'inactive-text': "关闭"
-            },
-            'rules': [
-              { 'required': true, 'message': '超级权限不能为空' },
-            ]
-          },
-          {
-            'prop': 'addTips',
-            'isSlot': true,
-          },
-        ],
-        'buttons': [
-          {
-            'text': '取消',
-            'event': 'cancel'
-          },
-          {
-            'type': 'primary',
-            'text': '确定',
-            'event': 'submit'
-          }
-        ]
-      },
-      editDialog: {
-        'model-value': false,
-        title: '编辑用户'
-      },
-      editForm: {
-        'model': {},
-        'rules': {
-          'userName': [
-            { 'min': 2, 'max': 10, 'message': '用户名字符在 2 ~ 10 以内', 'trigger': 'blur' },
-          ],
-          'email': [{
-            'trigger': 'blur',
-            'validator': (rule: any, value: any, callback: any) => {
-              const emailRegExp: RegExp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-              if (!emailRegExp.test(value)) return callback(new Error('请填写正确的邮箱'))
-              callback()
-            }
-          }],
-        },
-        'label-suffix': '：',
-        // 自定义属性
-        'items': [
-          {
-            'prop': 'userName',
-            'label': '用户名称',
-            'controlType': ControlTypes['flm-input'],
-            'controlConfig': {}
-          },
-          {
-            'prop': 'email',
-            'label': '注册邮箱',
-            'controlType': ControlTypes['flm-input'],
-            'controlConfig': {}
-          },
-          {
-            'prop': 'userType',
-            'label': '用户类型',
-            'controlType': ControlTypes['flm-select'],
-            'controlConfig': {
-              'options': [
-                { 'value': 0, 'label': '普通用户' },
-                { 'value': 1, 'label': '企业用户' },
-              ]
-            }
-          },
-        ],
-        'buttons': [
-          {
-            'text': '取消',
-            'event': 'cancel'
-          },
-          {
-            'type': 'primary',
-            'text': '确定',
-            'event': 'submit'
-          }
-        ]
-      },
-    }
-    reportPageSetting.table['height'] = tableHeight()
-    reportPageSetting.table['max-height'] = tableHeight()
-    reportPageSetting.tableAction.buttons.length && reportPageSetting.table.columns?.push({
-      prop: 'tableAction',
-      label: '操作',
-      isSlot: true,
-      fixed: 'right',
-      'min-width': '100px'
+  request.flameRequest({
+    tableName: 'flametableinfo',
+    flameMethod: 'webgetpagesetting',
+    data: { table_name: 'sys_flame_role', menu_id: null }
+  })
+    .then(({ items }: any) => {
+      const reportPageSetting: ReportPageSetting = items
+      reportPageSetting.table['height'] = tableHeight()
+      reportPageSetting.table['max-height'] = tableHeight()
+      reportPageSetting.tableAction.buttons.length && reportPageSetting.table.columns?.push({
+        prop: 'tableAction',
+        label: '操作',
+        isSlot: true,
+        fixed: 'right',
+        'min-width': '200px'
+      })
+      reportPageConfig.value = reportPageSetting
+      queryPageData()
     })
-    reportPageConfig.value = reportPageSetting
-    queryPageData()
-  }, 500)
 }
 
 // 查询页面数据
 const queryPageData = () => {
   const {
-    ['current-page']: index = 1,
-    ['page-size']: size = 20,
+    ['current-page']: page_no = 1,
+    ['page-size']: page_size = 20,
   }: ReportPageSetting['pagination'] = reportPageConfig.value.pagination
-  console.log('数据查询，参数：', { index, size })
-  // 模拟数据查询
-  setTimeout(() => {
-    const data = new Array(20)
-      .fill(null)
-      .map((item, index) => ({
-        id: index,
-        userName: '张三',
-        phone: '18086509520',
-        email: 'test@flame.com',
-        userType: 1,
-        address: '地址',
-        province: '湖北省',
-        city: '武汉市',
-        area: '洪山区',
-        house: '关山大道 355号 K11购物艺术中心 铭丰大厦 T1写字楼 3508'
-      }))
-    reportPageConfig.value.table.data = data
-    isLoaded.value = true
-  }, 500)
+  request.flameApi.pageSearch({
+    tableName: props.tableName,
+    data: {
+      page_no,
+      page_size,
+      conditions: searchParams.value,
+      ref_level: 1,
+      order_by: "flame_id DESC"
+    }
+  })
+    .then(({ items, total }: any) => {
+      reportPageConfig.value.table.data = items
+      reportPageConfig.value.pagination['total'] = total
+      isLoaded.value = true
+    })
+}
+
+// 页面刷新
+const pageRefresh = () => {
+  reportPageConfig.value.pagination['current-page'] = 1
+  queryPageData()
 }
 
 // 搜索栏提交
 const searchSubmit = (event: object) => {
-  console.log(`搜索：`, event)
+  searchParams.value = event
+  pageRefresh()
 }
 
 // 工具栏点击
 const toolbarClick = (event: string) => {
-  console.log(`工具栏调用：${event}`)
   isValidKey(event, pageDefaultEvent)
     ? pageDefaultEvent[event]()
-    : emit('customEvent', { event })
+    : emit('customEvent', event)
 }
 
 // 表格操作栏点击
 const tableActionClick = (event: string, scope: any) => {
-  console.log(`表格操作：${event}， 数据：`, scope)
   isValidKey(event, pageDefaultEvent)
     ? pageDefaultEvent[event](scope)
     : emit('customEvent', { event, scope })
@@ -517,8 +215,7 @@ const tableActionClick = (event: string, scope: any) => {
 const tableEvent: Record<string, (event?: any) => void> = {
   // 表格勾选项变化
   selectionChange: ({ row }: any) => {
-    console.log('表格选项变化，已勾选：', row)
-    tableSelection = row
+    tableSelection.value = row
   }
 }
 
@@ -526,14 +223,12 @@ const tableEvent: Record<string, (event?: any) => void> = {
 const paginationEvent: Record<string, (event?: any) => void> = {
   // 每页数量变化
   sizeChange:(pageSize: number) => {
-    console.log(`每页 ${pageSize} 条`)
     reportPageConfig.value.pagination['current-page'] = 1
     reportPageConfig.value.pagination['page-size'] = pageSize
     queryPageData()
   },
   // 当前页变化
   currentChange:(current: number) => {
-    console.log(`当前为第 ${current} 页`)
     reportPageConfig.value.pagination['current-page'] = current
     queryPageData()
   },
@@ -543,7 +238,6 @@ const paginationEvent: Record<string, (event?: any) => void> = {
 const pageDefaultEvent: Record<string, (event?: any) => void> = {
   // 打开详情弹窗
   openReadDialog:(scope: any) => {
-    console.log('查看详情，数据：', scope.row)
     reportPageConfig.value.readForm['model'] = scope.row
     reportPageConfig.value.readDialog['model-value'] = true
   },
@@ -565,7 +259,6 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
   },
   // 页面新增
   pageAdd:(formModel: FormConfig['model']) => {
-    console.log('页面新增，数据：', formModel)
     pageDefaultEvent.closeAddDialog()
   },
   // 页面删除
@@ -580,9 +273,14 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
       }
     )
       .then(() => {
-        // 此处需要请求删除接口，并完成回显
-        console.log('单条删除，数据：', scope.row)
-        ElMessage.success('删除成功')
+        request.flameApi.singleDelete({
+          tableName: props.tableName,
+          data: { key: scope.row.flame_id }
+        })
+          .then(() => {
+            pageRefresh()
+            ElMessage.success('删除成功')
+          })
       })
       .catch(() => {
         ElMessage.info('取消删除')
@@ -590,7 +288,6 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
   },
   // 打开编辑弹窗
   openEditDialog:(scope: any) => {
-    console.log('单条编辑，数据：', scope.row)
     reportPageConfig.value.editForm['model'] = scope.row
     reportPageConfig.value.editDialog['model-value'] = true
   },
@@ -600,17 +297,24 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
   },
   // 页面编辑
   pageEdit:(formModel: FormConfig['model']) => {
-    console.log('页面编辑，数据：', formModel)
-    pageDefaultEvent.closeEditDialog()
+    request.flameApi.singleUpdate({
+      tableName: props.tableName,
+      data: {
+        key: formModel?.flame_id,
+        data: formModel
+      }
+    })
+      .then(() => {
+        pageRefresh()
+        ElMessage.success('修改成功')
+        pageDefaultEvent.closeEditDialog()
+      })
   },
   // 页面导入
-  pageImport:() => console.log('页面导入'),
   // 页面导出
-  pageExport:() => console.log('页面导出'),
   // 页面批量删除
   pageBatchDelete:() => {
-    console.log('页面批量删除')
-    if (tableSelection.length) {
+    if (tableSelection.value.length) {
       ElMessageBox.confirm(
         '确认要删除勾选数据吗？此操作不可逆',
         '提示',
@@ -622,8 +326,18 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
       )
         .then(() => {
           // 此处需要请求删除接口，并完成回显
-          console.log('批量删除，数据：', tableSelection)
-          ElMessage.success('删除成功')
+            request.flameApi.batchDelete({
+            tableName: props.tableName,
+            data: {
+              conditions: {
+                flame_id: tableSelection.value.map(({ flame_id }) => flame_id)
+              }
+            }
+          })
+            .then(() => {
+              pageRefresh()
+              ElMessage.success('删除成功')
+            })
         })
         .catch(() => {
           ElMessage.info('取消删除')
@@ -634,6 +348,8 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
   },
 }
 
+defineExpose({ tableSelection, pageRefresh })
+
 // 表格插槽
 const getTableSlots = computed((): Array<string> => {
   const columns: Array<TableColumnConfig> = reportPageConfig.value.table.columns || []

package/packages/model/flmComponentConfig/base/flmButton.ts

@@ -25,6 +25,9 @@ export interface ButtonConfig {
   'size'?: ElementSize
   'type'?: ButtonType
   'plain'?: boolean
+  'text'?: boolean
+  'bg'?: boolean
+  'link'?: boolean
   'round'?: boolean
   'circle'?: boolean
   'loading'?: boolean
@@ -35,7 +38,7 @@ export interface ButtonConfig {
   'native-type'?: ButtonNativeType
   'auto-insert-space'?: boolean
   // 自定义属性
-  'text'?: string  // 按钮文字
+  'buttonText'?: string  // 按钮文字
 }
 // 按钮默认设置
 export const buttonDefaultConfig: ButtonConfig = {

package/packages/model/flmComponentConfig/base/flmPagination.ts

@@ -31,7 +31,6 @@ export const paginationDefaultConfig: PaginationConfig = {
   'background': false,
   'page-size': 10,
   'pager-count': 7,
-  'current-page': 1,
   'layout': 'prev, pager, next, jumper, ->, total',
   'page-sizes':	[10, 20, 30, 40, 50, 100],
   'disabled': false,

package/packages/model/flmComponentConfig/complex/flmSearch.ts

@@ -0,0 +1,5 @@
+import { FormConfig } from '@/model/flmComponentConfig'
+
+export interface SearchConfig extends FormConfig {
+  maxFormItem?: number
+}

package/packages/model/flmComponentConfig/complex/flmTable.ts

@@ -79,6 +79,28 @@ export interface TableColumnConfig {
   'columns'?: Array<TableColumnConfig>
 }
 
+// 表格默认事件
+export interface TableDefaultEvent {
+  onSelect: (selection: any, row: any) => void,
+  onSelectAll: (selection: any) => void,
+  onSelectionChange: (row: any, column: any, cell: any, event: any) => void,
+  onCellMouseEnter: (row: any, column: any, cell: any, event: any) => void,
+  onCellMouseLeave: (row: any, column: any, cell: any, event: any) => void,
+  onCellClick: (row: any, column: any, cell: any, event: any) => void,
+  onCellDblclick: (row: any, column: any, cell: any, event: any) => void,
+  onCellContextmenu: (row: any, column: any, cell: any, event: any) => void,
+  onRowClick: (row: any, column: any, event: any) => void,
+  onRowContextmenu: (row: any, column: any, event: any) => void,
+  onRowDblclick: (row: any, column: any, event: any) => void,
+  onHeaderClick: (column: any, event: any) => void,
+  onHeaderContextmenu: (column: any, event: any) => void,
+  onSortChange: ({ column, prop, order }: any) => void,
+  onFilterChange: (filters: any) => void,
+  onCurrentChange: (currentRow: any, oldCurrentRow: any) => void,
+  onHeaderDragend: (newWidth: any, oldWidth: any, column: any, event: any) => void,
+  onExpandChange: (row: any, expanded: any) => void,
+}
+
 // 表格默认设置
 export const tableDefaultConfig: TableConfig = {
   'stripe': false,

package/packages/model/flmComponentConfig/index.ts

@@ -23,6 +23,7 @@ export * from './base/flmDialog'      // 弹窗
 
 /** @复合组件 */
 export * from './complex/flmForm'     // 表单
+export * from './complex/flmSearch'   // 搜索
 export * from './complex/flmTable'    // 表格
 export * from './complex/flmToolbar'  // 工具栏