npm - flame-plus - Versions diffs - 0.1.26 → 0.1.28 - Mend

flame-plus 0.1.26 → 0.1.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/.vscode/extensions.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

package/README.md CHANGED Viewed

@@ -1 +1,7 @@
-### flame-plus
+# Vue 3 + Vite
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## Recommended IDE Setup
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>flame-plus</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,58 +1,33 @@
 {
   "name": "flame-plus",
-  "version": "0.1.26",
-  "private": false,
+  "type": "module",
+  "version": "0.1.28",
   "description": "基于 element-plus 的组件库",
-  "main": "packages/index.ts",
-  "types": [
-    "lib/flame-plus.umd.min.d.ts"
-  ],
+  "main": "./dist/flame-plus.umd.js",
+  "module": "./dist/flame-plus.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/flame-plus.es.js",
+      "require": "./dist/flame-plus.umd.js"
+    }
+  },
+  "private": false,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "lib": "vue-cli-service build --target lib --name flame-plus --dest lib packages/index.ts"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^1.1.4",
-    "@vue/babel-plugin-jsx": "^1.1.1",
-    "codemirror": "^5.65.1",
-    "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",
-    "monaco-editor-nls": "^2.0.0",
-    "monaco-editor-webpack-plugin": "6.*.*",
-    "node-sass": "6.0.1",
-    "sass": "^1.49.9",
-    "sass-loader": "10.2.0",
-    "ts-xor": "^1.0.8",
-    "vue": "^3.0.0",
-    "vue-class-component": "^8.0.0-0",
-    "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0"
+    "@element-plus/icons-vue": "^2.1.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "element-plus": "2.2.17",
+    "flame-types": "^1.0.0",
+    "sass": "^1.62.1",
+    "sass-loader": "^13.2.2",
+    "vue": "^3.2.16"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.0.0",
-    "prettier": "^2.2.1",
-    "typescript": "~4.1.5",
-    "unplugin-auto-import": "^0.5.3",
-    "unplugin-vue-components": "^0.17.6"
+    "@vitejs/plugin-vue": "^1.9.3",
+    "vite": "^3.2.6"
   }
 }

package/public/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.vue ADDED Viewed

@@ -0,0 +1,12 @@
+<template>
+  <myButton />
+  <el-button>ele-button</el-button>
+  <HelloWorld />
+</template>
+<script lang="ts" setup>
+import { myButton } from './packages/index'
+import HelloWorld from './components/HelloWorld.vue';
+</script>
+<style lang="scss"></style>

package/src/assets/vue.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/HelloWorld.vue ADDED Viewed

@@ -0,0 +1,33 @@
+<script lang="tsx">
+import { ElButton } from 'element-plus'
+import { defineComponent, PropType, computed } from 'vue'
+import { ButtonConfig, buttonDefaultConfig } from 'flame-types'
+import { filterConfig } from '../packages/utils'
+export default defineComponent({
+  emits: ['buttonClick'],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<ButtonConfig>,
+      default: {}
+    },
+  },
+  setup(props, ctx) {
+    // 按钮设置
+    const buttonConfig = computed((): ButtonConfig => {
+      return filterConfig(buttonDefaultConfig, props.config)
+    })
+    return () => (
+      <ElButton>点我</ElButton>
+    )
+    // return () => (
+    //   <el-button
+    //     {...buttonConfig.value}
+    //     onClick={() => ctx.emit('buttonClick')}
+    //   >{buttonConfig.value.buttonText || '点击'}</el-button>
+    // )
+  },
+})
+</script>

package/src/main.ts ADDED Viewed

@@ -0,0 +1,16 @@
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import 'element-plus/dist/index.css'
+// import * as icons from '@element-plus/icons-vue'
+const app = createApp(App)
+  .use(ElementPlus, { locale: zhCn })
+// Object.keys(icons).forEach((key) => {
+//   // isValidKey(key, icons) && app.component(key, icons[key])
+//   app.component(key, icons[key])
+// })
+app.mount("#app")

package/{packages → src/packages}/components/base/flmButton/flmButton.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, computed } from 'vue'
-import { ButtonConfig, buttonDefaultConfig } from '../../../model/flmComponentConfig'
+import { ButtonConfig, buttonDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmCascader/flmCascader.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, computed, reactive } from 'vue'
-import { CascaderConfig, CascaderDefaultEvent, cascaderDefaultConfig } from '../../../model/flmComponentConfig'
+import { CascaderConfig, CascaderDefaultEvent, cascaderDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmCheckbox/flmCheckbox.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, reactive, computed } from 'vue'
-import { CheckboxConfig, CheckboxDefaultEvent, checkboxDefaultConfig } from '../../../model/flmComponentConfig'
+import { CheckboxConfig, CheckboxDefaultEvent, checkboxDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmCheckbox/flmCheckboxGroup.vue RENAMED Viewed

@@ -5,7 +5,7 @@ import {
   CheckboxConfig,
   CheckboxGroupConfig,
   checkboxGroupDefaultConfig
-} from '../../../model/flmComponentConfig'
+} from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmColorPicker/flmColorPicker.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, reactive, computed } from 'vue'
-import { ColorPickerConfig, ColorPickerDefaultEvent, colorPickerDefaultConfig } from '../../../model/flmComponentConfig'
+import { ColorPickerConfig, ColorPickerDefaultEvent, colorPickerDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmDatePicker/flmDatePicker.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, computed, reactive } from 'vue'
-import { DatePickerConfig, DatePickerDefaultEvent, datePickerDefaultConfig } from '../../../model/flmComponentConfig'
+import { DatePickerConfig, DatePickerDefaultEvent, datePickerDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmDialog/flmDialog.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, reactive, computed } from 'vue'
-import { DialogConfig, DialogDefaultEvent, dialogDefaultConfig } from '../../../model/flmComponentConfig'
+import { DialogConfig, DialogDefaultEvent, dialogDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmInput/flmInput.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, reactive, computed } from 'vue'
-import { InputConfig, InputDefaultEvent, inputDefaultConfig } from '../../../model/flmComponentConfig'
+import { InputConfig, InputDefaultEvent, inputDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmInputNumber/flmInputNumber.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, computed, reactive } from 'vue'
-import { InputNumberConfig, InputNumberDefaultEvent, inputNumberDefaultConfig } from '../../../model/flmComponentConfig'
+import { InputNumberConfig, InputNumberDefaultEvent, inputNumberDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmPagination/flmPagination.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, reactive, computed } from 'vue'
-import { PaginationConfig, PaginationDefaultEvent, paginationDefaultConfig } from '../../../model/flmComponentConfig'
+import { PaginationConfig, PaginationDefaultEvent, paginationDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmRadio/flmRadio.vue RENAMED Viewed

@@ -6,7 +6,7 @@ import {
   RadioGroupDefaultEvent,
   radioDefaultConfig,
   radioGroupDefaultConfig
-} from '../../../model/flmComponentConfig'
+} from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmRate/flmRate.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, computed, reactive } from 'vue'
-import { RateConfig, RateDefaultEvent, rateDefaultConfig } from '../../../model/flmComponentConfig'
+import { RateConfig, RateDefaultEvent, rateDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmRead/flmRead.vue RENAMED Viewed

@@ -5,8 +5,8 @@
 </template>
 <script lang="ts" setup>
-import { defineProps, PropType } from 'vue'
-import { ReadConfig } from '../../../model/flmComponentConfig'
+import { PropType } from 'vue'
+import { ReadConfig } from 'flame-types'
 const props = defineProps({
   // 默认设置

package/{packages → src/packages}/components/base/flmSelect/flmSelect.vue RENAMED Viewed

@@ -6,7 +6,7 @@ import {
   OptionGroupConfig,
   OptionConfig,
   selectDefaultConfig
-} from '../../../model/flmComponentConfig'
+} from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmSlider/flmSlider.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, computed, reactive } from 'vue'
-import { SliderConfig, SliderDefaultEvent, sliderDefaultConfig } from '../../../model/flmComponentConfig'
+import { SliderConfig, SliderDefaultEvent, sliderDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmSwitch/flmSwitch.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, computed } from 'vue'
-import { SwitchConfig, switchDefaultConfig } from '../../../model/flmComponentConfig'
+import { SwitchConfig, switchDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmTimePicker/flmTimePicker.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, computed, reactive } from 'vue'
-import { TimePickerConfig, TimePickerDefaultEvent, timePickerDefaultConfig } from '../../../model/flmComponentConfig'
+import { TimePickerConfig, TimePickerDefaultEvent, timePickerDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmTimeSelect/flmTimeSelect.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, computed, reactive } from 'vue'
-import { TimeSelectConfig, timeSelectDefaultConfig } from '../../../model/flmComponentConfig'
+import { TimeSelectConfig, timeSelectDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/base/flmTransfer/flmTransfer.vue RENAMED Viewed

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { defineComponent, PropType, computed, reactive } from 'vue'
-import { TransferConfig, TransferDefaultEvent, transferDefaultConfig } from '../../../model/flmComponentConfig'
+import { TransferConfig, TransferDefaultEvent, transferDefaultConfig } from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/complex/flmForm/flmForm.vue RENAMED Viewed

@@ -37,7 +37,7 @@ import {
   FormItemConfig,
   FormButtonConfig,
   formDefaultConfig
-} from '../../../model/flmComponentConfig'
+} from 'flame-types'
 import { filterConfig, isValidKey } from '../../../utils'
 export default defineComponent({
@@ -232,6 +232,7 @@ export default defineComponent({
   },
 })
 </script>
 <style lang="scss" scoped>
 $columnNumber: v-bind(columnNumber);
 :deep(.el-form-item) {

package/{packages → src/packages}/components/complex/flmSearch/flmSearch.vue RENAMED Viewed

@@ -39,7 +39,7 @@
 <script lang="ts" setup>
 import { PropType, ref, Ref, computed, ComputedRef } from 'vue'
 import { flmForm } from '../../index'
-import { SearchConfig, FormItemConfig ,ButtonType} from '../../../model/flmComponentConfig'
+import { ButtonType, FormItemConfig, SearchConfig } from 'flame-types'
 import { isValidKey } from '../../../utils'
 const emit = defineEmits(['searchSubmit', 'searchReset', 'searchCustomEvent'])

package/{packages → src/packages}/components/complex/flmTable/flmTable.vue RENAMED Viewed

@@ -6,7 +6,7 @@ import {
   TableDefaultEvent,
   tableDefaultConfig,
   tableColumnDefaultConfig
-} from '../../../model/flmComponentConfig'
+} from 'flame-types'
 import { filterConfig } from '../../../utils'
 export default defineComponent({

package/{packages → src/packages}/components/complex/flmToolbar/flmToolbar.vue RENAMED Viewed

@@ -28,9 +28,9 @@
 </template>
 <script lang="ts" setup>
-import { defineEmits, defineProps, PropType, computed, ComputedRef } from 'vue'
+import { PropType, computed, ComputedRef } from 'vue'
 import { flmButton } from '../../index'
-import { ToolbarConfig, ToolbarButtonConfig } from '../../../model/flmComponentConfig'
+import { ToolbarConfig, ToolbarButtonConfig } from 'flame-types'
 const emit = defineEmits(['toolbarClick'])
 const props = defineProps({

package/{packages → src/packages}/components/index.ts RENAMED Viewed

@@ -26,4 +26,5 @@ 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'      // 报表页面
+export { default as flmReportPage } from './page/flmReportPage/flmReportPage.vue'      // 报表页面
+export { default as flmExportPage } from './page/flmExportPage/flmExportPage.vue'      // 导出页面

package/src/packages/components/page/flmExportPage/flmExportPage.vue ADDED Viewed

@@ -0,0 +1,219 @@
+<template>
+  <div class="export-page" ref="exportPageRef">
+    <template v-if="isLoaded">
+      <div class="page-search">
+        <slot></slot>
+      </div>
+      <flmToolbar class="page-toolbar" :config="toolbarConfig" @toolbarClick="toolbarClick" />
+      <flmTable class="page-table" :config="exportPageConfig.table">
+        <template v-for="tableSlot in getTableSlots" #[tableSlot]="{ index, row, column }">
+          <slot :name="`table-${tableSlot}`" :index="index" :row="row" :column="column"></slot>
+        </template>
+      </flmTable>
+      <flmPagination
+        class="page-pagination"
+        :config="exportPageConfig.pagination"
+        @size-change="paginationEvent.sizeChange"
+        @current-change="paginationEvent.currentChange"
+      />
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+import { PropType, ref, Ref, reactive, computed, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { flmToolbar, flmTable, flmPagination } from '../../index'
+import {
+  ButtonType,
+  ToolbarConfig,
+  FormConfig,
+  TableColumnConfig,
+  ExportPageSetting
+} from 'flame-types'
+import { isValidKey } from '../../../utils'
+const props = defineProps({
+  // 表名
+  tableName: {
+    type: String,
+    required: true
+  },
+  // 请求方式
+  request: {
+    type: Object as PropType<any>,
+    required: true
+  }
+})
+const emit = defineEmits(['customEvent'])
+const exportPageRef = ref()
+const safeTableName = computed(() => props.tableName.replace(/_/g, ''))
+let isLoaded: Ref<boolean> = ref(false)
+let exportPageConfig: Ref<ExportPageSetting> = ref({
+  table: {},
+  pagination: {},
+})
+const searchParams: FormConfig['model'] = ref({})  // 搜索条件
+onMounted(() => {
+  queryPageSetting()
+})
+// 表格高度
+const tableHeight = () => {
+  const homeHeight = '100vh',
+    headerHight = '50px',  // 页眉高度
+    mainSpacing = '30px',  // 主体内容边距
+    pageSearch = '50px',   // 搜索栏高度
+    pageFooter = '50px',   // 分页高度
+    pageSpacing = '40px'   // 页面边距
+  return `calc(${homeHeight} - ${headerHight} - ${mainSpacing} - ${pageSearch} - ${pageFooter} - ${pageSpacing})`
+}
+// 查询页面配置
+const queryPageSetting = () => {
+  props.request.flameprops.request({
+    tableName: 'flametableinfo',
+    flameMethod: 'webgetpagesetting',
+    data: { table_name: props.tableName, menu_id: null }
+  })
+    .then(({ items }: any) => {
+      const exportPageSetting: ExportPageSetting = items
+      exportPageSetting.table['height'] = tableHeight()
+      exportPageSetting.table['max-height'] = tableHeight()
+      exportPageConfig.value = exportPageSetting
+      queryPageData()
+    })
+}
+// 查询页面数据
+const queryPageData = () => {
+  const {
+    ['current-page']: page_no = 1,
+    ['page-size']: page_size = 20,
+  }: ExportPageSetting['pagination'] = exportPageConfig.value.pagination
+  props.request.flameApi.pageSearch({
+    tableName: safeTableName.value,
+    data: {
+      page_no,
+      page_size,
+      conditions: searchParams.value,
+      ref_level: 1,
+      order_by: "flame_id DESC"
+    }
+  })
+    .then(({ items, total }: any) => {
+      exportPageConfig.value.table.data = items
+      exportPageConfig.value.pagination['total'] = total
+      isLoaded.value = true
+    })
+}
+// 页面刷新
+const pageRefresh = () => {
+  exportPageConfig.value.pagination['current-page'] = 1
+  queryPageData()
+}
+// 搜索栏提交
+const searchSubmit = (event: object) => {
+  searchParams.value = event
+  pageRefresh()
+}
+// 工具栏配置
+const toolbarConfig: ToolbarConfig = reactive({
+  buttons: [{
+    type: ButtonType['success'],
+    plain: true,
+    buttonText: '导出',
+    event: 'pageExport'
+  }],
+  maxButton: 3,
+  publicConfig: {}
+})
+// 工具栏点击
+const toolbarClick = (event: string) => {
+  isValidKey(event, pageDefaultEvent)
+    ? pageDefaultEvent[event]()
+    : emit('customEvent', event)
+}
+// 分页器操作
+const paginationEvent: Record<string, (event?: any) => void> = {
+  // 每页数量变化
+  sizeChange:(pageSize: number) => {
+    exportPageConfig.value.pagination['current-page'] = 1
+    exportPageConfig.value.pagination['page-size'] = pageSize
+    queryPageData()
+  },
+  // 当前页变化
+  currentChange:(current: number) => {
+    exportPageConfig.value.pagination['current-page'] = current
+    queryPageData()
+  },
+}
+// 页面默认操作
+const pageDefaultEvent: Record<string, (event?: any) => void> = {
+  // 页面导出
+  pageExport:() => {
+    props.request.flameApi.exportFile({
+      tableName: safeTableName.value,
+      data: {
+        conditions: searchParams.value,
+        ref_level: 1,
+        order_by: 'flame_id DESC'
+      }
+    })
+      .then(({ items }: any) => {
+        window.open(items.download_url)
+        ElMessage.success('导出成功')
+      })
+  },
+}
+defineExpose({ searchSubmit, pageRefresh })
+// 表格插槽
+const getTableSlots = computed((): Array<string> => {
+  const columns: Array<TableColumnConfig> = exportPageConfig.value.table.columns || []
+  const slotColumns: Array<string> = []
+  const slotFilter = (columns: Array<TableColumnConfig>) => {
+    columns.forEach(({ prop, isSlot, columns }: TableColumnConfig) => {
+      (isSlot && prop && prop !== 'tableAction') && slotColumns.push(prop)
+      columns?.length && slotFilter(columns)
+    })
+  }
+  slotFilter(columns)
+  return slotColumns
+})
+</script>
+<style lang="scss" scoped>
+.export-page {
+  display: grid;
+  grid-template-columns: repeat(24, 1fr);
+  grid-template-rows: 50px 1fr 50px;
+  padding: 20px;
+  border-radius: 2px;
+  background: #FFF;
+  .page-search {
+    grid-column: span 18;
+  }
+  .page-toolbar {
+    grid-column: span 6;
+    justify-self: end;
+  }
+  .page-table, .page-pagination {
+    grid-column: span 24;
+  }
+  .page-pagination {
+    align-self: end;
+    justify-self: end;
+  }
+}
+</style>