@complex-suite/component-antd 4.10.12

package/format.ts

@@ -0,0 +1,458 @@
+import { reactive } from 'vue'
+import dayjs from 'dayjs'
+import type { Dayjs } from 'dayjs'
+import { isArray } from '@complex-suite/utils'
+import { notice } from '@complex-suite/plugin'
+import { AttrsValue, StatusValue, InputEdit, InputNumberEdit, TextAreaEdit, SwitchEdit, SelectEdit, DateEdit, DateRangeEdit, FileEdit, CustomEdit, FormEdit, SimpleDateEdit, ListEdit } from "@complex-suite/data"
+import type { AttrsValueInitOption, DictionaryEditMod } from "@complex-suite/data"
+import type { AutoItemPayloadType } from './src/dictionary/AutoItem'
+
+const init = function (itemAttrs: AttrsValue, targetProp: PropertyKey, formData: Record<PropertyKey, unknown>, prop: PropertyKey) {
+  itemAttrs.props[targetProp] = formData[prop]
+}
+
+const createInit = function(targetProp: PropertyKey) {
+  return function (itemAttrs: AttrsValue, formData: Record<PropertyKey, unknown>, prop: PropertyKey) {
+    init(itemAttrs, targetProp, formData, prop)
+  }
+}
+
+const modelFuncDict = {
+  valueInit: createInit('value'),
+  checkInit: createInit('checked'),
+  input: function (formdata: Record<PropertyKey, unknown>, prop: PropertyKey, args: unknown[]) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    formdata[prop] = (args[0] as any).target.value
+  },
+  change: function (formdata: Record<PropertyKey, unknown>, prop: PropertyKey, args: unknown[]) {
+    formdata[prop] = args[0]
+  }
+}
+
+type modelFuncDictType = typeof modelFuncDict
+
+interface dictItemType {
+  init: false | modelFuncDictType['checkInit'] | modelFuncDictType['valueInit']
+  on?: Record<string, modelFuncDictType['input'] | modelFuncDictType['change']>
+  format: (edit: DictionaryEditMod, payload: AutoItemPayloadType<'edit'>) => AttrsValue
+}
+
+const bindEvent = function(dictItem: dictItemType, itemAttrs: AttrsValue, edit: DictionaryEditMod, payload: AutoItemPayloadType<'edit'>) {
+  const formData = payload.targetData
+  const onData = dictItem.on
+  if (dictItem.init) {
+    dictItem.init(itemAttrs, formData, edit.$prop)
+  }
+  // 加载双向绑定逻辑
+  for (const funcName in onData) {
+    itemAttrs.pushEvent(funcName, (...args) => {
+      onData[funcName](formData, edit.$prop, args)
+    }, 'before')
+  }
+  // 加载单独设置的事件监控
+  for (const funcName in edit.$on) {
+    itemAttrs.pushEvent(funcName, (...args) => {
+      args.push(payload)
+      edit.$on[funcName](...args)
+    })
+  }
+}
+
+const dict = reactive({
+  $input: {
+    init: modelFuncDict.valueInit,
+    on: {
+      input: modelFuncDict.input
+    },
+    format(edit: InputEdit, payload: AutoItemPayloadType<'edit'>) {
+      const itemAttrs = new AttrsValue({
+        props: {
+          type: edit.$option.type,
+          allowClear: !edit.$option.hideClear,
+          maxLength: edit.$option.size,
+          disabled: payload.disabled,
+          placeholder: edit.placeholder ? edit.placeholder : undefined
+        },
+        on: {
+          pressEnter(_e: Event) {
+            payload.parent.triggerEnter(edit.$prop, payload)
+          }
+        }
+      })
+      bindEvent(this as dictItemType, itemAttrs, edit, payload)
+      return itemAttrs
+    }
+  },
+  $inputNumber: {
+    init: modelFuncDict.valueInit,
+    on: {
+      change: modelFuncDict.change
+    },
+    format(edit: InputNumberEdit, payload: AutoItemPayloadType<'edit'>) {
+      const itemAttrs = new AttrsValue({
+        props: {
+          min: edit.$option.min,
+          max: edit.$option.max,
+          precision: edit.$option.precision,
+          step: edit.$option.step,
+          disabled: payload.disabled,
+          placeholder: edit.placeholder ? edit.placeholder : undefined
+        },
+        on: {
+          pressEnter(_e: Event) {
+            payload.parent.triggerEnter(edit.$prop, payload)
+          }
+        }
+      })
+      bindEvent(this as dictItemType, itemAttrs, edit, payload)
+      return itemAttrs
+    }
+  },
+  $textArea: {
+    init: modelFuncDict.valueInit,
+    on: {
+      input: modelFuncDict.input
+    },
+    format(edit: TextAreaEdit, payload: AutoItemPayloadType<'edit'>) {
+      const itemAttrs = new AttrsValue({
+        props: {
+          maxLength: edit.$option.size,
+          autoSize: edit.$option.autoSize,
+          allowClear: !edit.$option.hideClear,
+          disabled: payload.disabled,
+          placeholder: edit.placeholder ? edit.placeholder : undefined
+        }
+      })
+      bindEvent(this as dictItemType, itemAttrs, edit, payload)
+      return itemAttrs
+    }
+  },
+  $switch: {
+    init: modelFuncDict.checkInit,
+    on: {
+      change: modelFuncDict.change
+    },
+    format(edit: SwitchEdit, payload: AutoItemPayloadType<'edit'>) {
+      const itemAttrs = new AttrsValue({
+        props: {
+          disabled: payload.disabled
+        }
+      })
+      bindEvent(this as dictItemType, itemAttrs, edit, payload)
+      return itemAttrs
+    }
+  },
+  $select: {
+    init: modelFuncDict.valueInit,
+    on: {
+      change: modelFuncDict.change
+    },
+    format(edit: SelectEdit, payload: AutoItemPayloadType<'edit'>) {
+      let isLoading = edit.$load ? edit.getLoad() === StatusValue.ing : false
+      const search = edit.$search
+      const on: AttrsValueInitOption['on'] = {}
+      if (search) {
+        if (isLoading && search.operate) {
+          isLoading = false
+        }
+        on.search = function(value?: string) {
+          edit.loadData(true, value)
+        }
+        // 关闭会自动触发search value = ''事件，因此reload=false不进行实现
+        // if (search.reload) {
+        //   on.dropdownVisibleChange = function(open: boolean) {
+        //     // reload模式下打开自动清空
+        //     if (open) {
+        //       search!.value = undefined
+        //       edit.$clearData()
+        //     }
+        //   }
+        // }
+      }
+      const itemAttrs = new AttrsValue({
+        props: {
+          mode: edit.multiple ? 'multiple' : 'default',
+          options: !edit.$filter ? edit.$select.getList() : edit.$filter(edit.$select, payload.list),
+          open: (edit.$option as { open?: boolean }).open,
+          showSearch: !!search,
+          searchValue: search?.value,
+          showArrow: !edit.$option.hideArrow,
+          notFoundContent: edit.$option.notFoundContent,
+          filterOption: false,
+          allowClear: !edit.$option.hideClear,
+          dropdownMatchSelectWidth: edit.$option.autoWidth,
+          disabled: payload.disabled || isLoading,
+          placeholder: edit.placeholder ? edit.placeholder : undefined
+        },
+        on: on
+      })
+      bindEvent(this as dictItemType, itemAttrs, edit, payload)
+      return itemAttrs
+    }
+  },
+  $cascader: {
+    init: modelFuncDict.valueInit,
+    on: {
+      change: modelFuncDict.change
+    },
+    format(edit: SelectEdit<PropertyKey>, payload: AutoItemPayloadType<'edit'>) {
+      const isLoading = edit.$load ? edit.getLoad() === StatusValue.ing : false
+      const itemAttrs = new AttrsValue({
+        props: {
+          options: !edit.$filter ? edit.$select.getCascaderList() : edit.$filter(edit.$select, payload.list),
+          showArrow: !edit.$option.hideArrow,
+          allowClear: !edit.$option.hideClear,
+          disabled: payload.disabled || isLoading,
+          placeholder: edit.placeholder ? edit.placeholder : undefined
+        }
+      })
+      bindEvent(this as dictItemType, itemAttrs, edit, payload)
+      return itemAttrs
+    }
+  },
+  $date: {
+    init: modelFuncDict.valueInit,
+    on: {
+      change: modelFuncDict.change
+    },
+    format(edit: DateEdit, payload: AutoItemPayloadType<'edit'>) {
+      const showTime = edit.$option.time ? {
+        format: edit.$option.time.showFormat,
+        defaultValue: dayjs(edit.$option.time.defaultValue, edit.$option.time.format)
+      } : false
+      const itemAttrs = new AttrsValue({
+        props: {
+          disabled: payload.disabled,
+          placeholder: edit.placeholder ? edit.placeholder : undefined,
+          format: edit.$option.showFormat,
+          allowClear: !edit.$option.hideClear,
+          showTime: showTime,
+          defaultPickerValue: dayjs('00:00:00', 'HH:mm:ss')
+        }
+      })
+      const complexDisabledDate = edit.$option.complexDisabledDate
+      if (edit.$option.disabledDate) {
+        itemAttrs.props.disabledDate = !complexDisabledDate ? edit.$option.disabledDate : function(value: any) {
+          return edit.$option.disabledDate!(value, payload)
+        }
+      }
+      bindEvent(this as dictItemType, itemAttrs, edit, payload)
+      return itemAttrs
+    }
+  },
+  $dateRange: {
+    init: modelFuncDict.valueInit,
+    on: {
+      change: modelFuncDict.change
+    },
+    format(edit: DateRangeEdit, payload: AutoItemPayloadType<'edit'>) {
+      const showTime = edit.$option.time ? {
+        format: edit.$option.time.showFormat,
+        defaultValue: [dayjs(edit.$option.time!.defaultValue, edit.$option.time.format), dayjs(edit.$option.time!.defaultEndValue, edit.$option.time.format)]
+      } : false
+      const itemAttrs = new AttrsValue({
+        props: {
+          disabled: payload.disabled,
+          placeholder: [edit.placeholder, edit.endPlaceholder],
+          format: edit.$option.showFormat,
+          allowClear: !edit.$option.hideClear,
+          separator: edit.$option.separator,
+          showTime: showTime
+        }
+      })
+      const complexDisabledDate = edit.$option.complexDisabledDate || !!edit.$option.rangeLimit
+      if (edit.$option.disabledDate) {
+        itemAttrs.props.disabledDate = !complexDisabledDate ? edit.$option.disabledDate : function(value: any) {
+          return edit.$option.disabledDate!(value, payload, edit.$option.rangeLimit)
+        }
+      }
+      bindEvent(this as dictItemType, itemAttrs, edit, payload)
+      if (edit.$option.rangeLimit) {
+        itemAttrs.pushEvent('calendarChange', function(value: undefined | [null | Dayjs, null | Dayjs], dateStrings: [string, string], info: { range: 'start' | 'end' }) {
+          if (edit.$option.rangeLimit) {
+            if (value) {
+              if (value[0] && value[1]) {
+                // 限制模式下且存在值时进行值有效判断
+                const offset = Math.abs(SimpleDateEdit.$compareDate(value[0], value[1]))
+                const rangeLimitValue = edit.$option.rangeLimit.value * 1000
+                if (!edit.$option.rangeLimit.eq ? offset >= rangeLimitValue : offset > rangeLimitValue) {
+                  // 当大于限制值时
+                  if (info.range === 'start') {
+                    value[1] = null
+                    dateStrings[1] = ''
+                    if (edit.$option.rangeLimit.message) {
+                      const message = edit.$option.rangeLimit.message(offset, payload)
+                      if (message) {
+                        notice.message(message, 'warn')
+                      }
+                    }
+                  } else if (info.range === 'end') {
+                    value[0] = null
+                    dateStrings[0] = ''
+                    if (edit.$option.rangeLimit.message) {
+                      const message = edit.$option.rangeLimit.message(offset, payload)
+                      if (message) {
+                        notice.message(message, 'warn')
+                      }
+                    }
+                  }
+                }
+              }
+              // 限制模式下缓存值
+              payload.targetData[payload.prop] = value
+            }
+          }
+        }, 'before')
+        itemAttrs.pushEvent('openChange', function(status: boolean) {
+          if (edit.$option.rangeLimit) {
+            if(!status) {
+              // 关闭时
+              const value = payload.targetData[payload.prop] as undefined | [null | Dayjs, null | Dayjs]
+              if (value && isArray(value)) {
+                if (!!value[0] !== !!value[1]) {
+                  // 有且仅有1个存在值
+                  payload.targetData[payload.prop] = undefined
+                }
+              }
+            }
+          }
+        }, 'after')
+      }
+      return itemAttrs
+    }
+  },
+  $file: {
+    init: modelFuncDict.valueInit,
+    on: {
+      change: modelFuncDict.change
+    },
+    format(edit: FileEdit<boolean>, payload: AutoItemPayloadType<'edit'>) {
+      let layout = edit.$option.layout
+      if (layout == 'auto') {
+        if (!payload.parent.gridParse) {
+          layout = 'end'
+        } else {
+          layout = 'bottom'
+        }
+      }
+      const buttonOption = { ...edit.$option.button }
+      if (buttonOption.name == undefined) {
+        buttonOption.name = edit.$name
+      }
+      const itemAttrs = new AttrsValue({
+        props: {
+          accept: edit.$option.accept,
+          maxSize: edit.$option.size,
+          button: buttonOption,
+          multiple: (edit as FileEdit<true>).$option.multiple,
+          isUrl: edit.$option.isUrl,
+          complex: edit.$option.complex,
+          upload: edit.$option.upload,
+          image: edit.$option.image,
+          layout: layout,
+          disabled: payload.disabled
+        }
+      })
+      bindEvent(this as dictItemType, itemAttrs, edit, payload)
+      return itemAttrs
+    }
+  },
+  $custom: {
+    init: false,
+    on: {},
+    format(edit: CustomEdit, payload: AutoItemPayloadType<'edit'>) {
+      const itemAttrs = new AttrsValue({
+        props: {
+          ...edit.$option,
+          disabled: payload.disabled
+        }
+      })
+      const self = {
+        init: false,
+        on: {}
+      } as dictItemType
+      if (edit.$model.init) {
+        self.init = createInit(edit.$model.init)
+      }
+      if (edit.$model.change) {
+        if (edit.$model.handler) {
+          self.on![edit.$model.change] = edit.$model.handler
+        } else if (edit.$model.change === 'input') {
+          self.on!.input = modelFuncDict.input
+        } else {
+          self.on![edit.$model.change] = modelFuncDict.change
+        }
+      }
+      bindEvent(self as dictItemType, itemAttrs, edit, payload)
+      return itemAttrs
+    }
+  },
+  $form: {
+    init: false,
+    on: {},
+    format(edit: FormEdit, payload: AutoItemPayloadType<'edit'>) {
+      const itemAttrs = new AttrsValue({
+        props: {
+          list: edit.$runtime.observeList,
+          form: edit.$runtime.form,
+          type: edit.$runtime.type,
+          gridParse: edit.$option.gridParse === false ? undefined : (edit.$option.gridParse || edit.$runtime.dictionary!.$layout.grid.getValue(payload.type)),
+          menu: edit.$option.menu,
+          disabled: payload.disabled
+        }
+      })
+      bindEvent(this as dictItemType, itemAttrs, edit, payload)
+      return itemAttrs
+    }
+  },
+  $list: {
+    init: modelFuncDict.valueInit,
+    on: {
+      change: modelFuncDict.change
+    },
+    format(edit: ListEdit, payload: AutoItemPayloadType<'edit'>) {
+      const itemAttrs = new AttrsValue({
+        props: {
+          runtime: edit.$runtime,
+          type: edit.$runtime.type,
+          header: edit.$option.header,
+          menu: edit.$option.menu,
+          tableProps: edit.$option.tableProps
+        }
+      })
+      bindEvent(this as dictItemType, itemAttrs, edit, payload)
+      return itemAttrs
+    }
+  }
+})
+
+export const parseEditAttrs = function (edit: DictionaryEditMod, payload: AutoItemPayloadType<'edit'>) {
+  if (edit.type === 'input') {
+    return dict.$input.format(edit, payload)
+  } else if (edit.type === 'inputNumber') {
+    return dict.$inputNumber.format(edit, payload)
+  } else if (edit.type === 'textArea') {
+    return dict.$textArea.format(edit, payload)
+  } else if (edit.type === 'switch') {
+    return dict.$switch.format(edit, payload)
+  } else if (edit.type === 'select') {
+    return dict.$select.format(edit, payload)
+  } else if (edit.type === 'cascader') {
+    return dict.$cascader.format(edit, payload)
+  } else if (edit.type === 'date') {
+    return dict.$date.format(edit, payload)
+  } else if (edit.type === 'dateRange') {
+    return dict.$dateRange.format(edit, payload)
+  } else if (edit.type === 'file') {
+    return dict.$file.format(edit, payload)
+  } else if (edit.type === 'custom') {
+    return dict.$custom.format(edit, payload)
+  } else if (edit.type === 'form') {
+    return dict.$form.format(edit, payload)
+  } else if (edit.type === 'list') {
+    return dict.$list.format(edit, payload)
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    console.error(`[${(edit as any).type}]:FormItem类型匹配失败，请检查代码`)
+  }
+}