flame-plus 0.1.33 → 0.1.36

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

@@ -1,496 +0,0 @@
-<template>
-  <div class="report-page" ref="reportPageRef">
-    <template v-if="isLoaded">
-      <flmSearch
-        class="page-search"
-        :config="reportPageConfig.search"
-        @searchSubmit="searchSubmit"
-      >
-        <template v-for="searchSlot in searchSlots" #[searchSlot]="{ prop, formModel }">
-          <slot :name="`search-${searchSlot}`" :prop="prop" :formModel="formModel"></slot>
-        </template>
-      </flmSearch>
-      <flmToolbar class="page-toolbar" :config="reportPageConfig.toolbar" @toolbarClick="toolbarClick" />
-      <flmTable
-        class="page-table"
-        :config="reportPageConfig.table"
-        @selectionChange="tableEvent.selectionChange"
-      >
-        <template v-for="tableSlot in getTableSlots" #[tableSlot]="{ index, row, column }">
-          <slot :name="`table-${tableSlot}`" :index="index" :row="row" :column="column"></slot>
-        </template>
-        <template v-if="reportPageConfig.tableAction.buttons.length" #tableAction="scope">
-          <flmToolbar :config="reportPageConfig.tableAction" @toolbarClick="tableActionClick($event, scope)" />
-        </template>
-      </flmTable>
-      <flmPagination
-        class="page-pagination"
-        :config="reportPageConfig.pagination"
-        @size-change="paginationEvent.sizeChange"
-        @current-change="paginationEvent.currentChange"
-      />
-    </template>
-    <flmDialog :config="reportPageConfig.readDialog" @close="pageDefaultEvent.closeReadDialog">
-      <flmForm class="form-read" :config="reportPageConfig.readForm" @cancel="pageDefaultEvent.closeReadDialog">
-        <template v-for="readFormSlot in readFormSlots" #[readFormSlot]="{ prop, formModel }">
-          <slot :name="`read-${readFormSlot}`" :prop="prop" :formModel="formModel"></slot>
-        </template>
-      </flmForm>
-    </flmDialog>
-    <flmDialog :config="reportPageConfig.addDialog" @close="pageDefaultEvent.closeAddDialog">
-      <flmForm
-        class="form-add"
-        :config="reportPageConfig.addForm"
-        @submit="pageDefaultEvent.pageAdd"
-        @cancel="pageDefaultEvent.closeAddDialog"
-      >
-        <template v-for="addFormSlot in addFormSlots" #[addFormSlot]="{ prop, formModel }">
-          <slot :name="`add-${addFormSlot}`" :prop="prop" :formModel="formModel"></slot>
-        </template>
-      </flmForm>
-    </flmDialog>
-    <flmDialog :config="reportPageConfig.editDialog" @close="pageDefaultEvent.closeEditDialog">
-      <flmForm
-        class="form-edit"
-        :config="reportPageConfig.editForm"
-        @submit="pageDefaultEvent.pageEdit"
-        @cancel="pageDefaultEvent.closeEditDialog"
-      >
-        <template v-for="editFormSlot in editFormSlots" #[editFormSlot]="{ prop, formModel }">
-          <slot :name="`edit-${editFormSlot}`" :prop="prop" :formModel="formModel"></slot>
-        </template>
-      </flmForm>
-    </flmDialog>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType, ref, Ref, computed, onMounted } from 'vue'
-// import store from '@/store'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import {
-  flmForm,
-  flmSearch,
-  flmToolbar,
-  flmTable,
-  flmPagination,
-  flmDialog
-} from '../../index'
-import {
-  FormItemConfig,
-  FormConfig,
-  TableColumnConfig,
-  ReportPageSetting,
-} 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 reportPageRef = ref()
-
-const safeTableName = computed(() => props.tableName.replace(/_/g, ''))
-
-let isLoaded: Ref<boolean> = ref(false)
-let reportPageConfig: Ref<ReportPageSetting> = ref({
-  search: {},
-  toolbar: {
-    publicConfig: {},
-    maxButton: 3,
-    buttons: []
-  },
-  table: {},
-  tableAction: {
-    publicConfig: {},
-    maxButton: 3,
-    buttons: []
-  },
-  pagination: {},
-  readDialog: {
-    'model-value': false
-  },
-  readForm: {},
-  addDialog: {
-    'model-value': false
-  },
-  addForm: {},
-  editDialog: {
-    'model-value': false
-  },
-  editForm: {}
-})
-const searchParams: FormConfig['model'] = ref({})  // 搜索条件
-let tableSelection: Ref<Array<any>> = 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 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()
-    })
-}
-
-// 查询页面数据
-const queryPageData = () => {
-  const {
-    ['current-page']: page_no = 1,
-    ['page-size']: page_size = 20,
-  }: ReportPageSetting['pagination'] = reportPageConfig.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) => {
-      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) => {
-  searchParams.value = event
-  pageRefresh()
-}
-
-// 工具栏点击
-const toolbarClick = (event: string) => {
-  isValidKey(event, pageDefaultEvent)
-    ? pageDefaultEvent[event]()
-    : emit('customEvent', event)
-}
-
-// 表格操作栏点击
-const tableActionClick = (event: string, scope: any) => {
-  isValidKey(event, pageDefaultEvent)
-    ? pageDefaultEvent[event](scope)
-    : emit('customEvent', { event, scope })
-}
-
-// 表格操作
-const tableEvent: Record<string, (event?: any) => void> = {
-  // 表格勾选项变化
-  selectionChange: ({ row }: any) => {
-    tableSelection.value = row
-  }
-}
-
-// 分页器操作
-const paginationEvent: Record<string, (event?: any) => void> = {
-  // 每页数量变化
-  sizeChange:(pageSize: number) => {
-    reportPageConfig.value.pagination['current-page'] = 1
-    reportPageConfig.value.pagination['page-size'] = pageSize
-    queryPageData()
-  },
-  // 当前页变化
-  currentChange:(current: number) => {
-    reportPageConfig.value.pagination['current-page'] = current
-    queryPageData()
-  },
-}
-
-// 页面默认操作
-const pageDefaultEvent: Record<string, (event?: any) => void> = {
-  // 打开详情弹窗
-  openReadDialog:(scope: any) => {
-    props.request.flameApi.singleSearch({
-      tableName: safeTableName.value,
-      data: { key: scope.row.flame_id }
-    })
-      .then(({ items }: any) => {
-        reportPageConfig.value.readForm['model'] = items
-        reportPageConfig.value.readDialog['model-value'] = true
-      })
-  },
-  // 关闭详情弹窗
-  closeReadDialog:() => {
-    reportPageConfig.value.readDialog['model-value'] = false
-  },
-  // 查看详情
-  pageRead:(scope: any) => {
-    props.request.flameApi.singleSearch({
-      tableName: safeTableName.value,
-      data: { key: scope.row.flame_id }
-    })
-      .then(({ items }: any) => {
-        reportPageConfig.value.readForm['model'] = items
-        reportPageConfig.value.readDialog['model-value'] = true
-      })
-  },
-  // 打开新增弹窗
-  openAddDialog:() => {
-    reportPageConfig.value.addDialog['model-value'] = true
-  },
-  // 关闭新增弹窗
-  closeAddDialog:() => {
-    reportPageConfig.value.addDialog['model-value'] = false
-  },
-  // 页面新增
-  pageAdd:(formModel: FormConfig['model']) => {
-    props.request.flameApi.singleAdd({
-      tableName: safeTableName.value,
-      data: { data: formModel }
-    })
-      .then(() => {
-        pageRefresh()
-        ElMessage.success('新增成功')
-        pageDefaultEvent.closeAddDialog()
-      })
-  },
-  // 页面删除
-  pageDelete:(scope: any) => {
-    ElMessageBox.confirm(
-      '确认要删除本条数据吗？此操作不可逆',
-      '提示',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-    )
-      .then(() => {
-        props.request.flameApi.singleDelete({
-          tableName: safeTableName.value,
-          data: { key: scope.row.flame_id }
-        })
-          .then(() => {
-            pageRefresh()
-            ElMessage.success('删除成功')
-          })
-      })
-      .catch(() => {
-        ElMessage.info('取消删除')
-      })
-  },
-  // 打开编辑弹窗
-  openEditDialog:(scope: any) => {
-    props.request.flameApi.singleSearch({
-      tableName: safeTableName.value,
-      data: { key: scope.row.flame_id }
-    })
-      .then(({ result, message, items }: any) => {
-        if (result) {
-          reportPageConfig.value.editForm['model'] = items
-          reportPageConfig.value.editDialog['model-value'] = true
-        } else {
-          ElMessage.warning(message)
-        }
-      })
-  },
-  // 关闭详情弹窗
-  closeEditDialog:() => {
-    reportPageConfig.value.editDialog['model-value'] = false
-  },
-  // 页面编辑
-  pageEdit:(formModel: FormConfig['model']) => {
-    props.request.flameApi.singleUpdate({
-      tableName: safeTableName.value,
-      data: {
-        key: formModel?.flame_id,
-        data: formModel
-      }
-    })
-      .then(() => {
-        pageRefresh()
-        ElMessage.success('修改成功')
-        pageDefaultEvent.closeEditDialog()
-      })
-  },
-  // 页面导入
-  // pageImport:() => {
-  //   const inputFile: any = document.createElement('input')
-  //   inputFile.type = 'file'
-  //   inputFile.style.display = 'none'
-  //   document.body.appendChild(inputFile)
-  //   inputFile.click()
-  //   inputFile.addEventListener('change', () => {
-  //     const file = inputFile.files[0]
-  //     var fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
-  //     if (!['xls', 'xlsx', 'et'].includes(fileType)) {
-  //       ElMessage.warning('请上传 xls、xlsx、et 格式的文件！')
-  //       document.body.removeChild(inputFile)
-  //       return false
-  //     }
-  //     const formData = new FormData()
-  //     formData.append("file", file)
-  //     props.request.flameAxios({
-  //       headers: { 'Content-Type': 'multipart/form-data' },
-  //       method: 'post',
-  //       url: `/resource-service/upload_file?source=mongo&token=${store.state.token}`,
-  //       data: formData
-  //     })
-  //       .then(({ key: code }: any) => {
-  //         props.request.flameprops.request({
-  //           tableName: safeTableName.value,
-  //           flameMethod: 'importfile',
-  //           data: { code }
-  //         })
-  //           .then((res: any) => {
-  //             ElMessage.success('上传成功！')
-  //             pageRefresh()
-  //           })
-  //       })
-  //       .finally(() => document.body.removeChild(inputFile))
-  //   })
-  // },
-  // 页面导出
-  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('导出成功')
-      })
-  },
-  // 页面批量删除
-  pageBatchDelete:() => {
-    if (tableSelection.value.length) {
-      ElMessageBox.confirm(
-        '确认要删除勾选数据吗？此操作不可逆',
-        '提示',
-        {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-        }
-      )
-        .then(() => {
-          // 此处需要请求删除接口，并完成回显
-            props.request.flameApi.batchDelete({
-            tableName: safeTableName.value,
-            data: {
-              conditions: {
-                flame_id: tableSelection.value.map(({ flame_id }) => flame_id)
-              }
-            }
-          })
-            .then(() => {
-              pageRefresh()
-              ElMessage.success('删除成功')
-            })
-        })
-        .catch(() => {
-          ElMessage.info('取消删除')
-        })
-    } else {
-      ElMessage.warning('未勾选删除项！')
-    }
-  },
-}
-
-defineExpose({ tableSelection, pageRefresh })
-
-// 表格插槽
-const getTableSlots = computed((): Array<string> => {
-  const columns: Array<TableColumnConfig> = reportPageConfig.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
-})
-
-const getFormSlots = (items: FormConfig['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 searchSlots = computed((): Array<string> => getFormSlots(reportPageConfig.value.search.items))
-const readFormSlots = computed((): Array<string> => getFormSlots(reportPageConfig.value.readForm.items))
-const addFormSlots = computed((): Array<string> => getFormSlots(reportPageConfig.value.addForm.items))
-const editFormSlots = computed((): Array<string> => getFormSlots(reportPageConfig.value.editForm.items))
-</script>
-
-<style lang="scss" scoped>
-.report-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>

package/src/packages/index.ts

@@ -1,96 +0,0 @@
-import 'element-plus/dist/index.css'
-// 基础组件
-import flmButton from './components/base/flmButton/flmButton.vue'  	               // 按钮
-import flmCascader from './components/base/flmCascader/flmCascader.vue'  	         // 级联选择器
-import flmCheckbox from './components/base/flmCheckbox/flmCheckbox.vue'  	         // 多选框
-import flmCheckboxGroup from './components/base/flmCheckbox/flmCheckboxGroup.vue'  // 多选框组
-import flmColorPicker from './components/base/flmColorPicker/flmColorPicker.vue'   // 取色器
-import flmDatePicker from './components/base/flmDatePicker/flmDatePicker.vue'      // 日期选择器
-import flmInput from './components/base/flmInput/flmInput.vue'  	                 // 输入框
-import flmInputNumber from './components/base/flmInputNumber/flmInputNumber.vue'   // 数字输入框
-import flmPagination from './components/base/flmPagination/flmPagination.vue'      // 分页器
-import flmRadio from './components/base/flmRadio/flmRadio.vue'                     // 单选框
-import flmRate from './components/base/flmRate/flmRate.vue'                        // 评分
-import flmRead from './components/base/flmRead/flmRead.vue'  	                     // 查看
-import flmSelect from './components/base/flmSelect/flmSelect.vue'  	               // 选择器
-import flmSlider from './components/base/flmSlider/flmSlider.vue'  	               // 滑块
-import flmSwitch from './components/base/flmSwitch/flmSwitch.vue'  	               // 开关
-import flmTimePicker from './components/base/flmTimePicker/flmTimePicker.vue'  	   // 时间选择器
-import flmTimeSelect from './components/base/flmTimeSelect/flmTimeSelect.vue'  	   // 时间选择
-import flmTransfer from './components/base/flmTransfer/flmTransfer.vue'  	         // 穿梭框
-import flmDialog from './components/base/flmDialog/flmDialog.vue'  	               // 弹窗
-// 复合组件
-import flmForm from './components/complex/flmForm/flmForm.vue'  	                 // 表单
-import flmTable from './components/complex/flmTable/flmTable.vue'  	               // 表格
-import flmToolbar from './components/complex/flmToolbar/flmToolbar.vue'            // 操作栏
-import flmSearch from './components/complex/flmSearch/flmSearch.vue'  	           // 搜索
-// 页面组件
-import flmReportPage from './components/page/flmReportPage/flmReportPage.vue'      // 报表页面
-import flmExportPage from './components/page/flmExportPage/flmExportPage.vue'      // 导出页面
-
-import type { App } from "vue";
-
-const components: any = {
-  flmButton,
-  flmCascader,
-  flmCheckbox,
-  flmCheckboxGroup,
-  flmColorPicker,
-  flmDatePicker,
-  flmInput,
-  flmInputNumber,
-  flmPagination,
-  flmRadio,
-  flmRate,
-  flmRead,
-  flmSelect,
-  flmSlider,
-  flmSwitch,
-  flmTimePicker,
-  flmTimeSelect,
-  flmTransfer,
-  flmDialog,
-  flmForm,
-  flmTable,
-  flmToolbar,
-  flmSearch,
-  flmReportPage,
-  flmExportPage
-}
-
-const install = (app: App) => {
-  Object.entries(components).forEach(([name, component]: any) => app.component(name, component))
-}
-
-export {
-  flmButton,
-  flmCascader,
-  flmCheckbox,
-  flmCheckboxGroup,
-  flmColorPicker,
-  flmDatePicker,
-  flmInput,
-  flmInputNumber,
-  flmPagination,
-  flmRadio,
-  flmRate,
-  flmRead,
-  flmSelect,
-  flmSlider,
-  flmSwitch,
-  flmTimePicker,
-  flmTimeSelect,
-  flmTransfer,
-  flmDialog,
-  flmForm,
-  flmTable,
-  flmToolbar,
-  flmSearch,
-  flmReportPage,
-  flmExportPage
-}
-
-export default {
-  install,
-  ...components
-}

package/src/packages/utils/filterConfig.ts

@@ -1,39 +0,0 @@
-/**
- * 过滤设置
- * @date 2022-04-11
- * @param {any} defaultConfig - 默认设置
- * @param {any} config - 当前设置
- * @returns {Object} - 过滤后的设置
- */
-const filterConfig = (defaultConfig: any, config: any) => {
-  let currentConfig: any = {}
-  Object
-    .keys({...defaultConfig, ...config})
-    .forEach((configKey: string) => {
-      const inConfig: boolean = configKey in config
-      const valueDifferent: boolean = isValueDifferent(defaultConfig[configKey], config[configKey])
-      if (valueDifferent && inConfig)
-        currentConfig[configKey] = config[configKey]
-    })
-  return currentConfig
-}
-
-/**
- * 判断两个值是否不同
- * @date 2022-05-30
- * @param {any} baseValue - 默认值
- * @param {any} value - 当前值
- * @returns {boolean} - 对比结果
- */
-const isValueDifferent = (baseValue: any, value: any) => {
-  const valueType = typeof(value)
-  if (['boolean', 'number', 'string'].includes(valueType)) {
-    return value !== baseValue
-  } else if (['function'].includes(valueType)) {
-    return true
-  } else {
-    return JSON.stringify(value) !== JSON.stringify(baseValue)
-  }
-}
-
-export default filterConfig

package/src/packages/utils/index.ts

@@ -1,2 +0,0 @@
-export { default as filterConfig } from './filterConfig'  // 组件过滤设置
-export { default as isValidKey } from './isValidKey'      // 判断key是否有效

package/src/packages/utils/isValidKey.ts

@@ -1,13 +0,0 @@
-/**
- * 判断key是否有效
- * @date 2022-04-11
- * @param {string | number | symbol} key
- * @param {object} object
- * @returns {boolean}
- */
-export default function isValidKey(
-  key: string | number | symbol,
-  object: object
-): key is keyof typeof object {
-  return key in object
-}

package/src/shims-vue.d.ts

@@ -1,9 +0,0 @@
-/* eslint-disable */
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
-
-declare module '*.json'
-declare module 'json-editor-vue3'

package/tsconfig.json

@@ -1,39 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "types": ["webpack-env", "element-plus/global"],
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx",
-    "typings"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}