flame-plus 0.1.25 → 0.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flame-plus",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "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/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 {