flame-plus 0.1.22 → 0.1.24

package/package.json

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

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

@@ -1,226 +1,308 @@
-<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'
+<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>
 
-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: {}
-    },
-  },
-  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) {
+  @if $columnNumber != false {
+    width: calc((100% - 32px * $columnNumber) / $columnNumber);
+  }
+}
+</style>

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

@@ -31,7 +31,9 @@
       />
     </template>
     <flmDialog :config="reportPageConfig.readDialog" @close="pageDefaultEvent.closeReadDialog">
-      <flmForm :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,6 +41,7 @@
     </flmDialog>
     <flmDialog :config="reportPageConfig.addDialog" @close="pageDefaultEvent.closeAddDialog">
       <flmForm
+       class="form-add"
         :config="reportPageConfig.addForm"
         @submit="pageDefaultEvent.pageAdd"
         @cancel="pageDefaultEvent.closeAddDialog"
@@ -50,6 +53,7 @@
     </flmDialog>
     <flmDialog :config="reportPageConfig.editDialog" @close="pageDefaultEvent.closeEditDialog">
       <flmForm
+       class="form-edit"
         :config="reportPageConfig.editForm"
         @submit="pageDefaultEvent.pageEdit"
         @cancel="pageDefaultEvent.closeEditDialog"

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

@@ -79,6 +79,7 @@ export interface FormConfig {
   // 自定义属性
   'items'?: Array<FormItemConfig>      // 表单项
   'buttons'?: Array<FormButtonConfig>  // 表单按钮
+  'columnNumber'?: number              // 每行列数
 }
 
 // 表单项设置