flame-plus 0.1.7 → 0.1.10

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

@@ -0,0 +1,690 @@
+<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 :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
+        :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
+        :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 { defineEmits, defineProps, ref, Ref, reactive, computed, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  flmForm,
+  flmSearch,
+  flmToolbar,
+  flmTable,
+  flmPagination,
+  flmDialog
+} from '@/components'
+import {
+  ControlTypes,
+  FormItemConfig,
+  FormConfig,
+  TableColumnConfig,
+  ReportPageSetting,
+} from '@/model/flmComponentConfig'
+import { isValidKey } from '@/utils'
+
+const emit = defineEmits(['customEvent'])
+const reportPageRef = ref()
+
+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: {}
+})
+let tableSelection: Array<any> = reactive([])
+
+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 = () => {
+  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'
+    })
+    reportPageConfig.value = reportPageSetting
+    queryPageData()
+  }, 500)
+}
+
+// 查询页面数据
+const queryPageData = () => {
+  const {
+    ['current-page']: index = 1,
+    ['page-size']: 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)
+}
+
+// 搜索栏提交
+const searchSubmit = (event: object) => {
+  console.log(`搜索：`, event)
+}
+
+// 工具栏点击
+const toolbarClick = (event: string) => {
+  console.log(`工具栏调用：${event}`)
+  isValidKey(event, pageDefaultEvent)
+    ? pageDefaultEvent[event]()
+    : emit('customEvent', { event })
+}
+
+// 表格操作栏点击
+const tableActionClick = (event: string, scope: any) => {
+  console.log(`表格操作：${event}， 数据：`, scope)
+  isValidKey(event, pageDefaultEvent)
+    ? pageDefaultEvent[event](scope)
+    : emit('customEvent', { event, scope })
+}
+
+// 表格操作
+const tableEvent: Record<string, (event?: any) => void> = {
+  // 表格勾选项变化
+  selectionChange: ({ row }: any) => {
+    console.log('表格选项变化，已勾选：', row)
+    tableSelection = row
+  }
+}
+
+// 分页器操作
+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()
+  },
+}
+
+// 页面默认操作
+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
+  },
+  // 关闭详情弹窗
+  closeReadDialog:() => {
+    reportPageConfig.value.readDialog['model-value'] = false
+  },
+  // 查看详情
+  pageRead:() => {
+    reportPageConfig.value.readDialog['model-value'] = true
+  },
+  // 打开新增弹窗
+  openAddDialog:() => {
+    reportPageConfig.value.addDialog['model-value'] = true
+  },
+  // 关闭新增弹窗
+  closeAddDialog:() => {
+    reportPageConfig.value.addDialog['model-value'] = false
+  },
+  // 页面新增
+  pageAdd:(formModel: FormConfig['model']) => {
+    console.log('页面新增，数据：', formModel)
+    pageDefaultEvent.closeAddDialog()
+  },
+  // 页面删除
+  pageDelete:(scope: any) => {
+    ElMessageBox.confirm(
+      '确认要删除本条数据吗？此操作不可逆',
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+      .then(() => {
+        // 此处需要请求删除接口，并完成回显
+        console.log('单条删除，数据：', scope.row)
+        ElMessage.success('删除成功')
+      })
+      .catch(() => {
+        ElMessage.info('取消删除')
+      })
+  },
+  // 打开编辑弹窗
+  openEditDialog:(scope: any) => {
+    console.log('单条编辑，数据：', scope.row)
+    reportPageConfig.value.editForm['model'] = scope.row
+    reportPageConfig.value.editDialog['model-value'] = true
+  },
+  // 关闭详情弹窗
+  closeEditDialog:() => {
+    reportPageConfig.value.editDialog['model-value'] = false
+  },
+  // 页面编辑
+  pageEdit:(formModel: FormConfig['model']) => {
+    console.log('页面编辑，数据：', formModel)
+    pageDefaultEvent.closeEditDialog()
+  },
+  // 页面导入
+  pageImport:() => console.log('页面导入'),
+  // 页面导出
+  pageExport:() => console.log('页面导出'),
+  // 页面批量删除
+  pageBatchDelete:() => {
+    console.log('页面批量删除')
+    if (tableSelection.length) {
+      ElMessageBox.confirm(
+        '确认要删除勾选数据吗？此操作不可逆',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        }
+      )
+        .then(() => {
+          // 此处需要请求删除接口，并完成回显
+          console.log('批量删除，数据：', tableSelection)
+          ElMessage.success('删除成功')
+        })
+        .catch(() => {
+          ElMessage.info('取消删除')
+        })
+    } else {
+      ElMessage.warning('未勾选删除项！')
+    }
+  },
+}
+
+// 表格插槽
+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/packages/index.ts

@@ -0,0 +1,8 @@
+// 组件
+export * as flmPlus from './components'
+
+// 类型
+export * as flmComponentConfig from './model/flmComponentConfig'
+
+// 方法
+export * as flmUtils from './utils'