flame-plus 0.1.25 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flame-plus",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "private": false,
   "description": "基于 element-plus 的组件库",
   "main": "packages/index.ts",

package/packages/components/complex/flmForm/flmForm.vue

@@ -1,303 +1,237 @@
-<script lang="tsx">
-  import {
-    defineComponent,
-    getCurrentInstance,
-    PropType,
-    reactive,
-    computed,
-    watch,
-    h,
-    resolveComponent,
-    onMounted
-  } from 'vue'
-  import {
-    flmButton,
-    flmCascader,
-    flmCheckbox,
-    flmColorPicker,
-    flmDatePicker,
-    flmInput,
-    flmInputNumber,
-    flmRadio,
-    flmRate,
-    flmRead,
-    flmSelect,
-    flmSlider,
-    flmSwitch,
-    flmTimePicker,
-    flmTimeSelect,
-    flmTransfer,
-  } from '../../index'
-  import {
-    ControlTypes,
-    ControlConfig,
-    isInputControl,
-    FormModel,
-    FormConfig,
-    FormItemConfig,
-    FormButtonConfig,
-    formDefaultConfig
-  } from '../../../model/flmComponentConfig'
-  import {
-    filterConfig,
-    isValidKey
-  } from '../../../utils'
-
-  export default defineComponent({
-    components: {
-      flmButton,
-      flmCascader,
-      flmCheckbox,
-      flmColorPicker,
-      flmDatePicker,
-      flmInput,
-      flmInputNumber,
-      flmRadio,
-      flmRate,
-      flmRead,
-      flmSelect,
-      flmSlider,
-      flmSwitch,
-      flmTimePicker,
-      flmTimeSelect,
-      flmTransfer,
-    },
-    emits: ['submit', 'cancel', 'reset', 'customEvent'],
-    props: {
-      // 默认设置
-      config: {
-        type: Object as PropType < FormConfig > ,
-        default: {}
-      },
-    },
-    computed: {
-      columnNumber(): number | boolean {
-        const {
-          inline = false, columnNumber = 0
-        } = this.config
-        return inline && columnNumber > 1 ?
-          columnNumber :
-          false
-      }
-    },
-    setup(props, {
-      slots,
-      emit,
-      expose
-    }) {
-      const instance = getCurrentInstance() // 实例，必须在最外层声明
-      let formModel: FormModel = reactive({}) // 表单数据
-
-      // 监听表单配置的 model，变化后更新组件内部 formModel
-      watch(() => props.config.model, (newModel: FormModel) => updateFormModel(newModel))
-
-      // 监听组件内部 formModel，变化后更新控件 value
-      watch(formModel, (newModel: FormModel) => updateControl(newModel))
-
-      onMounted(() => {
-        if (props.config?.model && Object.keys(props.config?.model).length) {
-          updateControl(props.config.model)
-          updateFormModel(props.config.model)
-        }
-      })
-
-      /**
-       * 更新控件值
-       * @date 2022-05-09
-       * @param {FormModel} model
-       */
-      const updateControl = (model: FormModel) => {
-        props.config.items?.forEach((formItem: FormItemConfig) => {
-          if (!isValidKey('isSlot', formItem) && typeof(formItem.prop) === 'string') {
-            const {
-              controlConfig
-            } = formItem
-            controlConfig && (
-              isInputControl(controlConfig) ?
-              controlConfig['modelValue'] = model[formItem.prop] :
-              controlConfig['model-value'] = model[formItem.prop]
-            )
-          }
-        })
-      }
-
-      /**
-       * 更新表单值
-       * @date 2022-05-09
-       * @param {FormModel} model
-       */
-      const updateFormModel = (model: FormModel) => {
-        Object.entries(model).forEach(([key, value]: Array < any > ) => formModel[key] = value)
-      }
-
-      /**
-       * 表单修改
-       * @date 2022-04-14
-       * @param {any} value 修改值
-       * @param {string} prop 修改键名
-       */
-      const formChange = (value: any, prop: string) => formModel[prop] = value
-
-      /**
-       * 表单方法调用
-       * @date 2022-04-14
-       * @param {'submit' | 'cancel' | 'reset' | string} event 方法名（默认方法直接调用；自定义方法回传方法名及表单数据）
-       */
-      const formEvent = (event: FormButtonConfig['event']) => {
-        const defaultEvent: Record < FormButtonConfig['event'], Function > = {
-          submit,
-          cancel,
-          reset
-        }
-        isValidKey(event, defaultEvent) ?
-          defaultEvent[event]() :
-          emit('customEvent', {
-            event,
-            formModel
-          })
-      }
-
-      // 提交
-      const submit = () => {
-        const formRef: any = instance?.refs['formRef']
-        if (!formRef) return
-        formRef.validate((valid: boolean) => {
-          valid && emit('submit', formModel)
-        })
-      }
-
-      // 取消
-      const cancel = () => {
-        emit('cancel', formModel)
-      }
-
-      // 重置
-      const reset = () => {
-        const formRef: any = instance?.refs['formRef']
-        if (!formRef) return
-        formRef.resetFields()
-        emit('reset', formModel)
-      }
-
-      /**
-       * 表单元素
-       * @date 2022-04-14
-       * @param {Array} items 表单项配置
-       * @returns {any} 表单项dom
-       */
-      const formItemsDom = (items: FormConfig['items'] = []) => {
-        const controlDom = (prop: string, controlType: ControlTypes, controlConfig: ControlConfig) => {
-          const config: FormModel = {
-            ...controlConfig
-          }
-          const event = controlType === ControlTypes['flmInput'] ? 'onInput' : 'onChange'
-          config[event] = (value: any) => formChange(value, prop)
-          return h(resolveComponent(controlType), {
-            config
-          })
-        }
-        return items.map((item: FormItemConfig) => {
-          if (typeof(item.prop) === 'string') {
-            if (isValidKey('isSlot', item)) {
-              const {
-                isSlot,
-                ...itemConfig
-              } = item
-              return ( <
-                el - form - item class = {
-                  `form-${item.prop}`
-                } {
-                  ...itemConfig
-                } > {
-                  (slots[item.prop]?.({
-                    prop: item.prop,
-                    formModel
-                  }))
-                } <
-                /el-form-item>
-              )
-            } else {
-              const {
-                controlType,
-                controlConfig,
-                ...itemConfig
-              } = item
-              if (controlType && controlConfig) {
-                return ( <
-                  el - form - item class = {
-                    `form-${item.prop}`
-                  } {
-                    ...itemConfig
-                  } > {
-                    controlDom(item.prop, controlType, controlConfig)
-                  } <
-                  /el-form-item>
-                )
-              }
-            }
-          }
-        })
-      }
-
-      /**
-       * 表单按钮
-       * @date 2022-04-14
-       * @param {Array} buttons 表单按钮配置
-       * @returns {any} 表单按钮dom
-       */
-      const buttonsDom = (buttons: FormConfig['buttons'] = []) => {
-        if (buttons.length) {
-          return ( <
-            el - form - item class = "form-buttons" > {
-              buttons.map(({
-                  event,
-                  ...config
-                }: FormButtonConfig) =>
-                <
-                flm - button config = {
-                  config
-                }
-                onButtonClick = {
-                  () => formEvent(event)
-                }
-                />
-              )
-            } <
-            /el-form-item>
-          )
-        }
-      }
-
-      expose({
-        formModel,
-        reset
-      })
-
-      // 表单设置
-      const formConfig = computed((): FormConfig => filterConfig(formDefaultConfig, props.config))
-      const formDom = () => {
-        const {
-          items = [], buttons = [], model, ...defaultConfig
-        } = formConfig.value
-        return ( <
-          el - form ref = 'formRef' {
-            ...defaultConfig
-          }
-          model = {
-            formModel
-          } > {
-            formItemsDom(items)
-          } {
-            buttonsDom(buttons)
-          } <
-          /el-form>
-        )
-      }
-      return () => (formDom())
-    },
-  })
-</script>
+<script lang="tsx">
+import {
+  defineComponent,
+  getCurrentInstance,
+  PropType,
+  reactive,
+  computed,
+  watch,
+  h,
+  resolveComponent,
+  onMounted
+} from 'vue'
+import {
+  flmButton,
+  flmCascader,
+  flmCheckbox,
+  flmColorPicker,
+  flmDatePicker,
+  flmInput,
+  flmInputNumber,
+  flmRadio,
+  flmRate,
+  flmRead,
+  flmSelect,
+  flmSlider,
+  flmSwitch,
+  flmTimePicker,
+  flmTimeSelect,
+  flmTransfer,
+} from '../../index'
+import {
+  ControlTypes,
+  ControlConfig,
+  isInputControl,
+  FormModel,
+  FormConfig,
+  FormItemConfig,
+  FormButtonConfig,
+  formDefaultConfig
+} from '../../../model/flmComponentConfig'
+import { filterConfig, isValidKey } from '../../../utils'
+
+export default defineComponent({
+  components: {
+    flmButton,
+    flmCascader,
+    flmCheckbox,
+    flmColorPicker,
+    flmDatePicker,
+    flmInput,
+    flmInputNumber,
+    flmRadio,
+    flmRate,
+    flmRead,
+    flmSelect,
+    flmSlider,
+    flmSwitch,
+    flmTimePicker,
+    flmTimeSelect,
+    flmTransfer,
+  },
+  emits: ['submit', 'cancel', 'reset', 'customEvent'],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<FormConfig>,
+      default: {}
+    },
+  },
+  computed: {
+    columnNumber(): number | boolean {
+      const { inline = false, columnNumber = 0 } = this.config
+      return inline && columnNumber > 1
+        ? columnNumber
+        : false
+    }
+  },
+  setup(props, { slots, emit, expose }) {
+    const instance = getCurrentInstance()    // 实例，必须在最外层声明
+    let formModel: FormModel = reactive({})  // 表单数据
+
+    // 监听表单配置的 model，变化后更新组件内部 formModel
+    watch(() => props.config.model, (newModel: FormModel) => updateFormModel(newModel))
+
+    // 监听组件内部 formModel，变化后更新控件 value
+    watch(formModel, (newModel: FormModel) => updateControl(newModel))
+
+    onMounted(() => {
+      if (props.config?.model && Object.keys(props.config?.model).length) {
+        updateControl(props.config.model)
+        updateFormModel(props.config.model)
+      }
+    })
+
+    /**
+     * 更新控件值
+     * @date 2022-05-09
+     * @param {FormModel} model
+     */
+    const updateControl = (model: FormModel) => {
+      props.config.items?.forEach((formItem: FormItemConfig) => {
+        if (!isValidKey('isSlot', formItem) && typeof(formItem.prop) === 'string') {
+          const { controlConfig } = formItem
+          controlConfig && (
+            isInputControl(controlConfig)
+              ? controlConfig['modelValue'] = model[formItem.prop]
+              : controlConfig['model-value'] = model[formItem.prop]
+          )
+        }
+      })
+    }
+
+    /**
+     * 更新表单值
+     * @date 2022-05-09
+     * @param {FormModel} model
+     */
+    const updateFormModel = (model: FormModel) => {
+      Object.entries(model).forEach(([key, value]: Array<any>) => formModel[key] = value)
+    }
+
+    /**
+     * 表单修改
+     * @date 2022-04-14
+     * @param {any} value 修改值
+     * @param {string} prop 修改键名
+     */
+    const formChange = (value: any, prop: string) => formModel[prop] = value
 
+    /**
+     * 表单方法调用
+     * @date 2022-04-14
+     * @param {'submit' | 'cancel' | 'reset' | string} event 方法名（默认方法直接调用；自定义方法回传方法名及表单数据）
+     */
+    const formEvent = (event: FormButtonConfig['event']) => {
+      const defaultEvent: Record<FormButtonConfig['event'], Function> = { submit, cancel, reset }
+      isValidKey(event, defaultEvent)
+        ? defaultEvent[event]()
+        : emit('customEvent', { event, formModel })
+    }
+
+    // 提交
+    const submit = () => {
+      const formRef: any = instance?.refs['formRef']
+      if (!formRef) return
+      formRef.validate((valid: boolean) => {
+        valid && emit('submit', formModel)
+      })
+    }
+
+    // 取消
+    const cancel = () => {
+      emit('cancel', formModel)
+    }
+
+    // 重置
+    const reset = () => {
+      const formRef: any = instance?.refs['formRef']
+      if (!formRef) return
+      formRef.resetFields()
+      emit('reset', formModel)
+    }
+
+    /**
+     * 表单元素
+     * @date 2022-04-14
+     * @param {Array} items 表单项配置
+     * @returns {any} 表单项dom
+     */
+    const formItemsDom = (items: FormConfig['items'] = []) => {
+      const controlDom = (prop: string, controlType: ControlTypes, controlConfig: ControlConfig) => {
+        const config: FormModel = { ...controlConfig }
+        const event = controlType === ControlTypes['flmInput'] ? 'onInput' : 'onChange'
+        config[event] = (value: any) => formChange(value, prop)
+        return h(resolveComponent(controlType), { config })
+      }
+      return items.map((item: FormItemConfig) => {
+        if (typeof(item.prop) === 'string') {
+          if (isValidKey('isSlot', item)) {
+            const { isSlot, ...itemConfig } = item
+            return (
+              <el-form-item class={`form-${item.prop}`} {...itemConfig}>
+                {(slots[item.prop]?.({ prop: item.prop, formModel }))}
+              </el-form-item>
+            )
+          } else {
+            const { controlType, controlConfig, ...itemConfig } = item
+            if (controlType && controlConfig) {
+              return (
+                <el-form-item class={`form-${item.prop}`} {...itemConfig}>
+                  {controlDom(item.prop, controlType, controlConfig)}
+                </el-form-item>
+              )
+            }
+          }
+        }
+      })
+    }
+
+    /**
+     * 表单按钮
+     * @date 2022-04-14
+     * @param {Array} buttons 表单按钮配置
+     * @returns {any} 表单按钮dom
+     */
+    const buttonsDom = (buttons: FormConfig['buttons'] = []) => {
+      if (buttons.length) {
+        return (
+          <el-form-item class="form-buttons">
+            {buttons.map(({ event, ...config }: FormButtonConfig) =>
+              <flm-button config={config} onButtonClick={() => formEvent(event)} />
+            )}
+          </el-form-item>
+        )
+      }
+    }
+
+    expose({ formModel, reset })
+
+    // 表单设置
+    const formConfig = computed((): FormConfig => filterConfig(formDefaultConfig, props.config))
+    const formDom = () => {
+      const { items = [], buttons = [], model, ...defaultConfig } = formConfig.value
+      return (
+        <el-form ref='formRef' {...defaultConfig} model={formModel}>
+          {formItemsDom(items)}
+          {buttonsDom(buttons)}
+        </el-form>
+      )
+    }
+    return () => (formDom())
+  },
+})
+</script>
 <style lang="scss" scoped>
 $columnNumber: v-bind(columnNumber);
 :deep(.el-form-item) {
@@ -305,4 +239,4 @@ $columnNumber: v-bind(columnNumber);
     width: calc((100% - 32px * $columnNumber) / $columnNumber);
   }
 }
-</style>
+</style>

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

@@ -10,7 +10,7 @@
           <slot :name="`search-${searchSlot}`" :prop="prop" :formModel="formModel"></slot>
         </template>
       </flmSearch>
-      <flmToolbar v-if="isDialog==false" class="page-toolbar" :config="reportPageConfig.toolbar" @toolbarClick="toolbarClick" />
+      <flmToolbar class="page-toolbar" :config="reportPageConfig.toolbar" @toolbarClick="toolbarClick" />
       <flmTable
         class="page-table"
         :config="reportPageConfig.table"
@@ -67,7 +67,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, Ref, computed, onMounted,toRaw } from 'vue'
+import { ref, Ref, computed, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
   flmForm,
@@ -76,26 +76,21 @@ import {
   flmTable,
   flmPagination,
   flmDialog
-} from '../../index'
+} from '@/components'
 import {
   FormItemConfig,
   FormConfig,
   TableColumnConfig,
   ReportPageSetting,
-} from '../../../model/flmComponentConfig'
+} 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
-  },
-  isDialog:{
-    type:Boolean,
-    default:false,
   }
 })
 
@@ -161,21 +156,14 @@ const queryPageSetting = () => {
       const reportPageSetting: ReportPageSetting = items
       reportPageSetting.table['height'] = tableHeight()
       reportPageSetting.table['max-height'] = tableHeight()
-      if(props.isDialog==false) {
-        reportPageSetting.tableAction.buttons.length && reportPageSetting.table.columns?.push({
+      reportPageSetting.tableAction.buttons.length && reportPageSetting.table.columns?.push({
         prop: 'tableAction',
         label: '操作',
         isSlot: true,
-        align: 'center',
-        'header-align':'center',
         fixed: 'right',
-        'min-width': '200px',
-        'width': '200px'
+        'min-width': '200px'
       })
-      }
-      
       reportPageConfig.value = reportPageSetting
-      isLoaded.value =true;
       queryPageData()
     })
 }
@@ -199,6 +187,7 @@ const queryPageData = () => {
     .then(({ items, total }: any) => {
       reportPageConfig.value.table.data = items
       reportPageConfig.value.pagination['total'] = total
+      isLoaded.value = true
     })
 }
 
@@ -218,15 +207,16 @@ const searchSubmit = (event: object) => {
 const toolbarClick = (event: string) => {
   isValidKey(event, pageDefaultEvent)
     ? pageDefaultEvent[event]()
-    : emit('customEvent', {event,data:{}})
+    : emit('customEvent', event)
 }
 
 // 表格操作栏点击
 const tableActionClick = (event: string, scope: any) => {
   isValidKey(event, pageDefaultEvent)
     ? pageDefaultEvent[event](scope)
-    : emit('customEvent', { event,data:  toRaw(scope.row) })
+    : emit('customEvent', { event, scope })
 }
+
 // 表格操作
 const tableEvent: Record<string, (event?: any) => void> = {
   // 表格勾选项变化
@@ -256,7 +246,7 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
   openReadDialog:(scope: any) => {
     request.flameApi.singleSearch({
       tableName: safeTableName.value,
-      data: { key: scope.row.flame_id ,ref_level:1}
+      data: { key: scope.row.flame_id }
     })
       .then(({ items }: any) => {
         reportPageConfig.value.readForm['model'] = items
@@ -298,63 +288,6 @@ 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(

package/packages/model/flmComponentConfig/complex/flmSearch.ts

@@ -1,11 +1,3 @@
-/*
- * @Author: 关羽 xiaobing525@163.com
- * @Date: 2023-01-04 22:32:16
- * @LastEditors: 关羽 xiaobing525@163.com
- * @LastEditTime: 2023-01-05 19:54:43
- * @FilePath: /flame-components/packages/model/flmComponentConfig/complex/flmSearch.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
 import { FormConfig } from '../../../model/flmComponentConfig'
 
 export interface SearchConfig extends FormConfig {