flame-plus 0.1.33 → 0.1.35

package/{src/packages → packages}/components/page/flmReportPage/flmReportPage.vue

@@ -10,7 +10,7 @@
           <slot :name="`search-${searchSlot}`" :prop="prop" :formModel="formModel"></slot>
         </template>
       </flmSearch>
-      <flmToolbar class="page-toolbar" :config="reportPageConfig.toolbar" @toolbarClick="toolbarClick" />
+      <flmToolbar v-if="isDialog==false" class="page-toolbar" :config="reportPageConfig.toolbar" @toolbarClick="toolbarClick" />
       <flmTable
         class="page-table"
         :config="reportPageConfig.table"
@@ -31,7 +31,9 @@
       />
     </template>
     <flmDialog :config="reportPageConfig.readDialog" @close="pageDefaultEvent.closeReadDialog">
-      <flmForm class="form-read" :config="reportPageConfig.readForm" @cancel="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>
@@ -39,7 +41,7 @@
     </flmDialog>
     <flmDialog :config="reportPageConfig.addDialog" @close="pageDefaultEvent.closeAddDialog">
       <flmForm
-        class="form-add"
+       class="form-add"
         :config="reportPageConfig.addForm"
         @submit="pageDefaultEvent.pageAdd"
         @cancel="pageDefaultEvent.closeAddDialog"
@@ -51,7 +53,7 @@
     </flmDialog>
     <flmDialog :config="reportPageConfig.editDialog" @close="pageDefaultEvent.closeEditDialog">
       <flmForm
-        class="form-edit"
+       class="form-edit"
         :config="reportPageConfig.editForm"
         @submit="pageDefaultEvent.pageEdit"
         @cancel="pageDefaultEvent.closeEditDialog"
@@ -65,8 +67,8 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, ref, Ref, computed, onMounted } from 'vue'
-// import store from '@/store'
+import { ref, Ref, computed, onMounted, toRaw } from 'vue'
+import { useRoute } from "vue-router";
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
   flmForm,
@@ -81,19 +83,19 @@ import {
   FormConfig,
   TableColumnConfig,
   ReportPageSetting,
-} from 'flame-types'
+} from '../../../model/flmComponentConfig'
 import { isValidKey } from '../../../utils'
-
+import request from '@/plugins/request'
+import { is } from '@babel/types'
 const props = defineProps({
   // 表名
   tableName: {
     type: String,
     required: true
   },
-  // 请求方式
-  request: {
-    type: Object as PropType<any>,
-    required: true
+  isDialog:{
+    type:Boolean,
+    default:false,
   }
 })
 
@@ -150,23 +152,32 @@ const tableHeight = () => {
 
 // 查询页面配置
 const queryPageSetting = () => {
-  props.request.flameprops.request({
+  const route = useRoute();
+  let menu_id = route.query.menu_id;
+  request.flameRequest({
     tableName: 'flametableinfo',
     flameMethod: 'webgetpagesetting',
-    data: { table_name: props.tableName, menu_id: null }
+    data: { table_name: props.tableName, menu_id: menu_id }
   })
     .then(({ items }: any) => {
       const reportPageSetting: ReportPageSetting = items
       reportPageSetting.table['height'] = tableHeight()
       reportPageSetting.table['max-height'] = tableHeight()
-      reportPageSetting.tableAction.buttons.length && reportPageSetting.table.columns?.push({
+      if(props.isDialog==false) {
+        reportPageSetting.tableAction.buttons.length && reportPageSetting.table.columns?.push({
         prop: 'tableAction',
         label: '操作',
         isSlot: true,
+        align: 'center',
+        'header-align':'center',
         fixed: 'right',
-        'min-width': '200px'
+        'min-width': '200px',
+        'width': '200px'
       })
+      }
+      
       reportPageConfig.value = reportPageSetting
+      isLoaded.value =true;
       queryPageData()
     })
 }
@@ -177,7 +188,7 @@ const queryPageData = () => {
     ['current-page']: page_no = 1,
     ['page-size']: page_size = 20,
   }: ReportPageSetting['pagination'] = reportPageConfig.value.pagination
-  props.request.flameApi.pageSearch({
+  request.flameApi.pageSearch({
     tableName: safeTableName.value,
     data: {
       page_no,
@@ -190,7 +201,6 @@ const queryPageData = () => {
     .then(({ items, total }: any) => {
       reportPageConfig.value.table.data = items
       reportPageConfig.value.pagination['total'] = total
-      isLoaded.value = true
     })
 }
 
@@ -210,16 +220,15 @@ const searchSubmit = (event: object) => {
 const toolbarClick = (event: string) => {
   isValidKey(event, pageDefaultEvent)
     ? pageDefaultEvent[event]()
-    : emit('customEvent', event)
+    : emit('customEvent', {event,data:{}})
 }
 
 // 表格操作栏点击
 const tableActionClick = (event: string, scope: any) => {
   isValidKey(event, pageDefaultEvent)
     ? pageDefaultEvent[event](scope)
-    : emit('customEvent', { event, scope })
+    : emit('customEvent', { event,data:  toRaw(scope.row) })
 }
-
 // 表格操作
 const tableEvent: Record<string, (event?: any) => void> = {
   // 表格勾选项变化
@@ -247,9 +256,9 @@ const paginationEvent: Record<string, (event?: any) => void> = {
 const pageDefaultEvent: Record<string, (event?: any) => void> = {
   // 打开详情弹窗
   openReadDialog:(scope: any) => {
-    props.request.flameApi.singleSearch({
+    request.flameApi.singleSearch({
       tableName: safeTableName.value,
-      data: { key: scope.row.flame_id }
+      data: { key: scope.row.flame_id ,ref_level:1}
     })
       .then(({ items }: any) => {
         reportPageConfig.value.readForm['model'] = items
@@ -262,7 +271,7 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
   },
   // 查看详情
   pageRead:(scope: any) => {
-    props.request.flameApi.singleSearch({
+    request.flameApi.singleSearch({
       tableName: safeTableName.value,
       data: { key: scope.row.flame_id }
     })
@@ -281,7 +290,7 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
   },
   // 页面新增
   pageAdd:(formModel: FormConfig['model']) => {
-    props.request.flameApi.singleAdd({
+    request.flameApi.singleAdd({
       tableName: safeTableName.value,
       data: { data: formModel }
     })
@@ -291,6 +300,63 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
         pageDefaultEvent.closeAddDialog()
       })
   },
+  // 页面导入
+  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)
+      request.flameAxios({
+        headers: { 'Content-Type': 'multipart/form-data' },
+        method: 'post',
+        url: `/resource-service/upload_file?source=mongo&token=${request.token}`,
+        data: formData
+      })
+        .then(({ key: code }: any) => {
+          request.flameRequest({
+            tableName: safeTableName.value,
+            flameMethod: 'importfile',
+            data: { code }
+          })
+            .then((res: any) => {
+              if(res.result){
+                ElMessage.success('导入成功！')
+              pageRefresh()
+              }
+              else{
+                ElMessage.error(res.message)
+              }
+            })
+        })
+        .finally(() => document.body.removeChild(inputFile))
+    })
+  },
+  // 页面导出
+  pageExport:() => {
+    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('导出成功')
+      })
+  },
   // 页面删除
   pageDelete:(scope: any) => {
     ElMessageBox.confirm(
@@ -303,7 +369,7 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
       }
     )
       .then(() => {
-        props.request.flameApi.singleDelete({
+        request.flameApi.singleDelete({
           tableName: safeTableName.value,
           data: { key: scope.row.flame_id }
         })
@@ -318,7 +384,7 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
   },
   // 打开编辑弹窗
   openEditDialog:(scope: any) => {
-    props.request.flameApi.singleSearch({
+    request.flameApi.singleSearch({
       tableName: safeTableName.value,
       data: { key: scope.row.flame_id }
     })
@@ -337,7 +403,7 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
   },
   // 页面编辑
   pageEdit:(formModel: FormConfig['model']) => {
-    props.request.flameApi.singleUpdate({
+    request.flameApi.singleUpdate({
       tableName: safeTableName.value,
       data: {
         key: formModel?.flame_id,
@@ -351,57 +417,7 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
       })
   },
   // 页面导入
-  // 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) {
@@ -416,7 +432,7 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
       )
         .then(() => {
           // 此处需要请求删除接口，并完成回显
-            props.request.flameApi.batchDelete({
+            request.flameApi.batchDelete({
             tableName: safeTableName.value,
             data: {
               conditions: {
@@ -471,6 +487,7 @@ const editFormSlots = computed((): Array<string> => getFormSlots(reportPageConfi
 </script>
 
 <style lang="scss" scoped>
+ 
 .report-page {
   display: grid;
   grid-template-columns: repeat(24, 1fr);
@@ -493,4 +510,30 @@ const editFormSlots = computed((): Array<string> => getFormSlots(reportPageConfi
     justify-self: end;
   }
 }
+</style>
+<style lang="scss">
+
+ .el-dialog__header {
+   border-bottom:1px solid #C4C4C4;
+  margin-right:0px;
+  font-weight:bold;
+  }
+  .el-dialog__body .form-buttons {
+     position: absolute;
+     bottom:-15px;
+     left:0px;
+    //  margin-bottom: 50px;
+    //  border-top:1px solid #C4C4C4;
+     width:calc(100% - 10px);
+     padding:10px 0 0px 10px;
+    .el-form-item__content{
+     justify-content: flex-end;
+     margin-right: 20px;
+    //  margin-bottom: 10px;
+    }
+  }
+  .el-dialog__footer{
+     border-top:1px solid #C4C4C4;
+     background-color: red($color: #000000);
+  }
 </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'

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

@@ -0,0 +1,53 @@
+import { ElementSize } from '../../../model/flmComponentConfig'
+
+/** @button 按钮 */
+
+// 按钮类型
+export enum ButtonType {
+  'primary' = 'primary',
+  'success' = 'success',
+  'warning' = 'warning',
+  'danger' = 'danger',
+  'info' = 'info',
+  'text' = 'text',
+}
+
+// 按钮原生type
+export enum ButtonNativeType {
+  'button' = 'button',
+  'submit' = 'submit',
+  'reset' = 'reset',
+}
+
+// 按钮设置（https://element-plus.gitee.io/zh-CN/component/button.html）
+export interface ButtonConfig {
+  // 默认属性
+  'size'?: ElementSize
+  'type'?: ButtonType
+  'plain'?: boolean
+  'text'?: boolean
+  'bg'?: boolean
+  'link'?: boolean
+  'round'?: boolean
+  'circle'?: boolean
+  'loading'?: boolean
+  'loading-icon'?: string
+  'disabled'?: boolean
+  'icon'?: string
+  'autofocus'?: boolean
+  'native-type'?: ButtonNativeType
+  'auto-insert-space'?: boolean
+  // 自定义属性
+  'buttonText'?: string  // 按钮文字
+}
+// 按钮默认设置
+export const buttonDefaultConfig: ButtonConfig = {
+  'plain': false,
+  'round': false,
+  'circle': false,
+  'loading': false,
+  'loading-icon': 'Loading',
+  'disabled': false,
+  'autofocus': false,
+  'native-type': ButtonNativeType['button'],
+}

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

@@ -0,0 +1,77 @@
+import { ElementSize } from '../../../model/flmComponentConfig'
+
+/** @cascader 级联选择器 */
+
+// 标签类型
+export enum CascaderTagType {
+  'success' = 'success',
+  'info' = 'info',
+  'warning' = 'warning',
+  'danger' = 'danger',
+}
+
+// 次级菜单的展开方式
+export enum CascaderPropsExpandTrigger {
+  'click' = 'click',
+  'hover' = 'hover',
+}
+
+// 级联选择器props
+export interface CascaderProps {
+  'expandTrigger'?: CascaderPropsExpandTrigger
+  'multiple'?: boolean
+  'checkStrictly'?: boolean
+  'emitPath'?: boolean
+  'lazy'?: boolean
+  'lazyLoad'?: Function
+  'value'?: string
+  'label'?: string
+  'children'?: string
+  'disabled'?: string
+  'leaf'?: string
+}
+
+// 级联选择器设置（https://element-plus.gitee.io/zh-CN/component/cascader.html）
+export interface CascaderConfig {
+  // 默认属性
+  'model-value'?: any
+  'options'?: Array<any>
+  'props'?: CascaderProps
+  'size'?: ElementSize
+  'placeholder'?: string
+  'disabled'?: boolean
+  'clearable'?: boolean
+  'show-all-levels'?: boolean
+  'collapse-tags'?: boolean
+  'collapse-tags-tooltip'?: boolean
+  'separator'?: string
+  'filterable'?: boolean
+  'filter-method'?: Function
+  'debounce'?: number
+  'before-filter'?: Function
+  'popper-class'?: string
+  'teleported'?: boolean
+  'tag-type'?: CascaderTagType
+}
+// 级联选择器默认事件
+export interface CascaderDefaultEvent {
+  'onChange': (value: CascaderConfig['model-value']) => void,
+  'onExpandChange': (event: any) => void,
+  'onBlur': (event: any) => void,
+  'onFocus': (event: any) => void,
+  'onVisibleChange': (event: boolean) => void,
+  'onRemoveTag': (event: any) => void
+}
+// 级联选择器默认设置
+export const cascaderDefaultConfig: CascaderConfig = {
+  'placeholder': '请选择',
+  'disabled': false,
+  'clearable': false,
+  'show-all-levels': true,
+  'collapse-tags': false,
+  'collapse-tags-tooltip': false,
+  'separator': '/',
+  'debounce': 300,
+  'teleported': true,
+  'tag-type': CascaderTagType['info'],
+}

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

@@ -0,0 +1,51 @@
+import { ElementSize } from '../../../model/flmComponentConfig'
+
+/** @checkboxGroup 多选框 */
+// 多选框设置（https://element-plus.org/zh-CN/component/checkbox.html）
+export interface CheckboxConfig {
+  // 默认属性
+  'model-value'?: string | number | boolean
+  'label'?:	string | number | boolean | object
+  'true-label'?: string | number
+  'false-label'?: string | number
+  'disabled'?: boolean
+  'border'?: boolean
+  'size'?: ElementSize
+  'name'?: string
+  'checked'?: boolean
+  'indeterminate'?: boolean
+}
+//多选框默认事件
+export interface CheckboxDefaultEvent {
+  'onChange': (value: CheckboxConfig['model-value']) => void
+}
+// 多选框默认设置
+export const checkboxDefaultConfig: CheckboxConfig = {
+  'disabled': false,
+  'border': false,
+  'checked': false,
+  'indeterminate': false,
+}
+
+// 多选框组设置
+export interface CheckboxGroupConfig {
+  // 默认属性
+  'model-value'?: Array<CheckboxConfig['model-value']>
+  'size'?: ElementSize
+  'disabled'?: boolean
+  'min'?: number
+  'max'?:	number
+  'text-color'?: string
+  'fill'?: string
+  // 自定义属性
+  'hasCheckAll'?: boolean            // 有全选按钮
+  'checkAllConfig'?: CheckboxConfig  // 权限值
+  'items'?: Array<CheckboxConfig>    // 选项组
+}
+// 多选框组默认设置
+export const checkboxGroupDefaultConfig: CheckboxGroupConfig = {
+  'model-value': [],
+  'disabled': false,
+  'text-color': '#FFFFFF',
+  'fill': '#409EFF',
+}

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

@@ -0,0 +1,30 @@
+import { ElementSize } from '../../../model/flmComponentConfig'
+
+/** @colorPicker 颜色选择器 */
+// 颜色格式
+export enum ColorFormat {
+  'hsl' = 'hsl',
+  'hsv' = 'hsv',
+  'hex' = 'hex',
+  'rgb' = 'rgb',
+}
+// 颜色选择器设置（https://element-plus.gitee.io/zh-CN/component/color-picker.html）
+export interface ColorPickerConfig {
+  // 默认属性
+  'model-value'?: string
+  'disabled'?: boolean
+  'size'?: ElementSize
+  'show-alpha'?: boolean
+  'color-format'?: ColorFormat
+  'popper-class'?: string
+  'predefine'?: Array<string>
+}
+// 颜色选择器默认事件
+export interface ColorPickerDefaultEvent {
+  onChange: (value: ColorPickerConfig['model-value']) => void
+}
+// 颜色选择器默认设置
+export const colorPickerDefaultConfig: ColorPickerConfig = {
+  'disabled': false,
+  'show-alpha': false,
+}

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

@@ -0,0 +1,73 @@
+import { ElementSize, ElementIcons } from '../../../model/flmComponentConfig'
+
+/** @datePicker 日期选择器 */
+
+// 显示类型
+export enum DateType {
+  'year' = 'year',
+  'month' = 'month',
+  'date' = 'date',
+  'dates' = 'dates',
+  'datetime' = 'datetime',
+  'week' = 'week',
+  'datetimerange' = 'datetimerange',
+  'daterange' = 'daterange',
+  'monthrange' = 'monthrange',
+}
+
+// 日期选择器设置（https://element-plus.gitee.io/zh-CN/component/date-picker.html）
+export interface DatePickerConfig {
+  // 默认属性
+  'model-value'?: Date | Array<Date>
+  'readonly'?: boolean
+  'disabled'?: boolean
+  'size'?: ElementSize
+  'editable'?: boolean
+  'clearable'?: boolean
+  'placeholder'?: string
+  'start-placeholder'?: string
+  'end-placeholder'?: string
+  'type'?: DateType
+  'format'?: string
+  'popper-class'?: string
+  'range-separator'?: string
+  'default-value'?: Date
+  'default-time'?: Array<Date>
+  'value-format'?: string
+  'id'?: string | Array<string>
+  'name'?: string
+  'unlink-panels'?: boolean
+  'prefix-icon'?: string
+  'clear-icon'?: ElementIcons
+  'validate-event'?: boolean
+  'disabled-date'?: Function
+  'shortcuts'?:	Array<{ text: string, value: Date | Function }>
+  'cell-class-name'?:	Function
+  'teleported'?: boolean
+}
+// 日期选择器默认事件
+export interface DatePickerDefaultEvent {
+  'onUpdate:modelValue': (value: DatePickerConfig['model-value']) => void,  // v-model 不用改不了值
+  // onChange: (value: DatePickerConfig['model-value']) => {},
+  'onBlur': (event: any) => void,
+  'onFocus': (event: any) => void,
+  'onCalendarChange': (event: Array<Date>) => void,
+  'onPanelChange': (date: any, mode: any, view: any) => void,
+  'onVisibleChange': (event: boolean) => void,
+}
+// 日期选择器默认设置
+export const datePickerDefaultConfig: DatePickerConfig = {
+  'readonly': false,
+  'disabled': false,
+  'size': ElementSize['default'],
+  'editable': true,
+  'clearable': true,
+  'type': DateType['date'],
+  'format': 'YYYY-MM-DD',
+  'range-separator': '-',
+  'unlink-panels': false,
+  'prefix-icon': 'Date',
+  'clear-icon': ElementIcons['CircleClose'],
+  'validate-event': true,
+  'teleported': true,
+}