flame-plus 0.1.13 → 0.1.14

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

@@ -1,4 +1,4 @@
-import { ElementSize } from '../../../model/flmComponentConfig'
+import { ElementSize } from '@/model/flmComponentConfig'
 
 /** @button 按钮 */
 
@@ -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/flmCascader.ts

@@ -1,4 +1,4 @@
-import { ElementSize } from '../../../model/flmComponentConfig'
+import { ElementSize } from '@/model/flmComponentConfig'
 
 /** @cascader 级联选择器 */
 

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

@@ -1,4 +1,4 @@
-import { ElementSize } from '../../../model/flmComponentConfig'
+import { ElementSize } from '@/model/flmComponentConfig'
 
 /** @checkboxGroup 多选框 */
 // 多选框设置（https://element-plus.org/zh-CN/component/checkbox.html）

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

@@ -1,4 +1,4 @@
-import { ElementSize } from '../../../model/flmComponentConfig'
+import { ElementSize } from '@/model/flmComponentConfig'
 
 /** @colorPicker 颜色选择器 */
 // 颜色格式