easybill-ui 0.1.19 → 1.0.1

package/components/ConstantStatus/src/ConstantStatus.vue

@@ -1,7 +1,7 @@
 <template>
   <el-tag v-if="current" class="constant-status" :class="{ 'dot-status': current.dot }" v-bind="currentProps">
     <el-icon v-if="(current.icon || current.iconClass) && !current.dot" :class="current.iconClass" style="margin-right: 5px">
-      <component v-if="current.icon" :is="current.icon" class="icon" :size="14" style="width: 12px; height: 12px" />
+      <component :is="current.icon" v-if="current.icon" class="icon" :size="14" style="width: 12px; height: 12px" />
     </el-icon>
     <span v-if="current.dot" class="dot"></span>
     <span v-if="current.html" class="name" v-html="current.label"></span>
@@ -43,7 +43,7 @@ const current = computed(() => {
   return result && result.find((a) => a.value == props.value)
 })
 const currentProps = computed(() => {
-  const defaults = { type: "", class: [""], style: {} }
+  const defaults = { type: "", label: "", value: "", class: [""], style: {} } as OptionItem
   const result = props.options || []
   const cur = result.find((a) => a.value == props.value)
   if (!cur) return {}
@@ -53,7 +53,7 @@ const currentProps = computed(() => {
     defaults.style = args.color ? { color: args.color, backgroundColor: "transparent" } : {}
   }
   // 判断type在不在里面
-  if (type && ["success", "info", "warning", "danger"].includes(type)) {
+  if (type && ["success", "info", "warning", "danger"].includes(String(type))) {
     defaults.type = type
   } else {
     defaults.class.push("el-tag--" + (type || "default"))

package/components/ConstantStatus/src/types.ts

@@ -1,22 +1,18 @@
-export interface OptionItem {
+export interface OptionItem extends Record<string, any> {
   label: string
   value: string | number | boolean
   disabled?: boolean
-  type?: "default" | "primary" | "success" | "info" | "warning" | "danger" | "blue" | "blue-dark" | "yellow" | "blueness" | "red-purple" | "error"
+  type?: string | "default" | "primary" | "success" | "info" | "warning" | "danger" | "blue" | "blue-dark" | "yellow" | "blueness" | "red-purple" | "error"
   icon?: any
   hit?: boolean
   color?: string
-  size?: "large" | "default" | "small"
-  effect?: "dark" | "light" | "plain"
+  size?: string | "large" | "default" | "small"
+  effect?: string | "dark" | "light" | "plain"
   round?: boolean
   border?: boolean
   className?: string
   iconClass?: string | string[]
   dot?: boolean
-  /**
-   * 供curd-form的单选或多选，选项上的tooltip
-   */
   tooltip?: any
   html?: string
-  [key: string]: any
 }

package/components/CurdForm/src/CurdForm.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, provide, ref, Ref, computed, watch, PropType, getCurrentInstance } from "vue"
+import { defineComponent, reactive, provide, ref, computed, watch, PropType, Ref, getCurrentInstance, onMounted, triggerRef } from "vue"
 import { isFunction, isAsyncFunction } from "./utils/is"
 import { deepClone } from "./utils/common"
 import components from "./components"
@@ -44,6 +44,7 @@ export default defineComponent({
     formSchema: {
       required: true,
       type: Object as PropType<FormSchema>,
+      default: () => ({}),
     },
     // 预置字段默认值
     fields: {
@@ -61,7 +62,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "change"],
   setup(props, { emit, attrs }) {
-    const schemaFormRef: Ref<InstanceType<typeof ElForm> | undefined> = ref()
+    const schemaFormRef = ref<InstanceType<typeof ElForm> | undefined>()
     const sFormSchema: Ref<FormSchema> = ref(props.formSchema)
     let formModel = reactive<Fields>(props.modelValue || {})
     const curdFormContext = reactive<FormContext>({} as FormContext)
@@ -74,14 +75,14 @@ export default defineComponent({
           delete formModel[i]
         }
         Object.assign(formModel, value)
-      }
+      },
     )
     watch(
       () => formModel,
       (val) => {
         emit("update:modelValue", val)
       },
-      { deep: true }
+      { deep: true },
     )
     // 先从schema中读取默认值
     const schemaValues = sFormSchema.value.formItem.reduce<Fields>((previousValue, currentValue) => {
@@ -95,19 +96,6 @@ export default defineComponent({
     props.fields && Object.assign(formModel, props.fields)
     // Object.assign(formModel, props.modelValue)
     // props.modelValue && Object.assign(formModel, props.modelValue)
-    // 异步设置默认数据
-    sFormSchema.value.formItem.forEach(async (item) => {
-      // 异步选项
-      if (item.asyncOptions && (item.autoload || typeof item.autoload == "undefined") && (isFunction(item.asyncOptions) || isAsyncFunction(item.asyncOptions))) {
-        item.loading = true
-        item.options = await item.asyncOptions(formModel, item, curdFormContext).finally(() => (item.loading = false))
-        !instance?.isUnmounted && item.eventObject?.optionLoaded && item.eventObject?.optionLoaded(formModel, item, curdFormContext)
-      } else if (item.prop && item.asyncValue && (isFunction(item.asyncValue) || isAsyncFunction(item.asyncValue))) {
-        // 异步默认值
-        item.loading = true
-        formModel[item.prop] = await item.asyncValue(formModel, item).finally(() => (item.loading = false))
-      }
-    })
 
     const schemaItems = computed(() => {
       return sFormSchema.value.formItem.filter((item) => {
@@ -120,10 +108,21 @@ export default defineComponent({
         return !item.hidden
       })
     })
+    // 异步设置默认数据
+    sFormSchema.value.formItem.forEach(async (item) => {
+      //
+      // 异步选项
+      if (item.asyncOptions && (item.autoload || typeof item.autoload == "undefined") && (isFunction(item.asyncOptions) || isAsyncFunction(item.asyncOptions))) {
+        item.loading = true
+        item.options = await item.asyncOptions(formModel, item, curdFormContext).finally(() => (item.loading = false))
+        !instance?.isUnmounted && item.eventObject?.optionLoaded && item.eventObject?.optionLoaded(formModel, item, curdFormContext)
+      }
+    })
+
     // 生成表单验证规则
     const rules = computed(() => {
-      if (typeof sFormSchema.value.rules == "function") {
-        return sFormSchema.value.rules(formModel, curdFormContext)
+      if (typeof sFormSchema.value.getRules == "function") {
+        return sFormSchema.value.getRules(formModel, curdFormContext)
       }
       return sFormSchema.value.rules
     })
@@ -134,17 +133,19 @@ export default defineComponent({
     }
     // 调用某个表单项的异步数据接口
     const loadOptions = async (prop: string, option?: any) => {
-      const cur = sFormSchema.value.formItem.find((a) => a.prop == prop)
+      const cur: FormItemType | undefined = sFormSchema.value.formItem.find((a) => a.prop == prop)
       if (cur && cur.asyncOptions && !instance?.isUnmounted) {
         cur.loading = true
+        triggerRef(schemaItems)
         cur.options =
           (await cur
             .asyncOptions(formModel, cur, curdFormContext, option)
             .catch((err) => console.error("loadOptionError", err))
             .finally(() => (cur.loading = false))) || []
+        triggerRef(schemaItems)
         !instance?.isUnmounted && cur.eventObject?.optionLoaded && cur.eventObject?.optionLoaded(formModel, cur, curdFormContext, option)
       }
-      return cur
+      return cur?.options || []
     }
     // 给某个item赋值options
     const setOptions = async (prop: string, options: CurdFormOptionItem[], option?: any) => {
@@ -168,7 +169,7 @@ export default defineComponent({
           return formItem.formItemProps(formModel, formItem)
         }
         const { ...attrs } = formItem.formItemProps
-        return attrs
+        return { ...attrs }
       }
       return {}
     }
@@ -181,7 +182,13 @@ export default defineComponent({
       return {}
     }
     const getFormProps = computed(() => {
-      const { formItem, rules, ...args } = props.formSchema
+      const args: any = {}
+      const sm = props.formSchema as any
+      for (const i in sm) {
+        if (!["formItem", "rules", "getRules"].includes(i)) {
+          args[i] = sm[i]
+        }
+      }
       return { ...args }
     })
 
@@ -189,9 +196,12 @@ export default defineComponent({
     curdFormContext.setOptions = setOptions
     curdFormContext.change = onChange
     curdFormContext.formModel = formModel
-    curdFormContext.formRef = schemaFormRef
+
     props.extendContext && Object.assign(curdFormContext, props.extendContext)
     provide("curdFormContext", curdFormContext)
+    onMounted(() => {
+      curdFormContext.formRef = schemaFormRef.value
+    })
     return {
       formModel,
       schemaFormRef,

package/components/CurdForm/src/FormItem.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="form-item">
     <div v-if="props.formItem.prefix && isString(props.formItem.prefix)" class="form-item-prefix" v-html="props.formItem.prefix"></div>
-    <component v-for="(item, i) in prefixList" :key="i" :is="item" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
+    <component :is="item" v-for="(item, i) in prefixList" :key="i" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
     <slot name="prefix"></slot>
     <component :is="comp" v-if="comp" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
     <component :is="props.formItem.type" v-else v-model="modelRef[props.formItem.prop || '']" v-bind="formItemProps" v-on="eventObject" />
     <FormTooltip v-if="props.formItem.tooltip" :tooltip="props.formItem.tooltip" :form-item="props.formItem" :form-model="props.formModel" />
     <slot name="suffix"></slot>
     <div v-if="props.formItem.suffix && isString(props.formItem.suffix)" class="form-item-suffix" v-html="props.formItem.suffix"></div>
-    <component v-for="(item, i) in suffixList" :key="i" :is="item" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
+    <component :is="item" v-for="(item, i) in suffixList" :key="i" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -58,7 +58,7 @@ const eventObject = ref(
     const changeFun = props.formItem.eventObject.change
     result.change = (...args: any) => {
       if (changeFun) {
-        const flag = changeFun && changeFun(props.formModel, props.formItem, formContext, ...args)
+        const flag = changeFun && changeFun.apply(null, [props.formModel, props.formItem, formContext, ...args])
         if (flag) {
           emit("change", props.formModel, props.formItem, formContext, ...args)
         }
@@ -75,9 +75,9 @@ const eventObject = ref(
       }
     }
     return result
-  })()
+  })(),
 )
-const isString = (val) => {
+const isString = (val: any) => {
   return typeof val === "string"
 }
 const prefixList = computed(() => {

package/components/CurdForm/src/FormTooltip.vue

@@ -15,7 +15,7 @@ import { ElButton, ElIcon, ElTooltip, ElTooltipProps } from "element-plus"
 import { FormItem, Fields } from "./types"
 const props = defineProps({
   tooltip: {
-    type: [String, Function],
+    type: [String, Function] as PropType<string | ((formModel: Fields, formItem: FormItem) => Partial<ElTooltipProps> | string) | Partial<ElTooltipProps>>,
     default: null,
   },
   formItem: {
@@ -28,28 +28,28 @@ const props = defineProps({
   },
 })
 
-const is = (val: any, type: string) => {
-  return Object.prototype.toString.call(val) === `[object ${type}]`
-}
 const tooltipModel = computed(() => {
   let tooltip: any = props.tooltip
   if (!tooltip) {
-    return {}
+    return { content: "" }
   }
-  if (is(tooltip, "Function")) {
+  if (typeof tooltip == "function") {
     tooltip = tooltip(props.formModel, props.formItem)
     return getTooltip(tooltip)
   }
   return getTooltip(tooltip)
 })
 // 获取组件tooltip内容
-const getTooltip = (tooltip: ElTooltipProps | String) => {
+const getTooltip = (tooltip: Partial<ElTooltipProps> | string): Partial<ElTooltipProps> => {
   if (!tooltip) {
-    return ""
+    return { content: "" }
   }
-  if (is(tooltip, "String")) {
-    return { content: tooltip }
+  let t: Partial<ElTooltipProps> = {}
+  if (typeof tooltip == "string") {
+    t = { content: tooltip }
+  } else {
+    t = tooltip
   }
-  return tooltip
+  return t
 }
 </script>

package/components/CurdForm/src/components/index.ts

@@ -10,7 +10,7 @@ import SchemaFormColorPicker from "./schema-form-color-picker.vue"
 import SchemaFormValue from "./schema-form-value.vue"
 import SchemaFormCascader from "./schema-form-cascader.vue"
 import SchemaFormAutocomplete from "./schema-form-autocomplete.vue"
-import { isReactive, isRef, createVNode, isVNode } from "vue"
+import { isReactive, isRef, isVNode } from "vue"
 interface PresetMap {
   [key: string]: any
 }

package/components/CurdForm/src/components/schema-form-autocomplete.vue

@@ -8,7 +8,7 @@
 </template>
 <script lang="ts" setup>
 import { computed, PropType } from "vue"
-import { ElCascader, CascaderOption, CascaderValue } from "element-plus"
+import { CascaderValue } from "element-plus"
 import { FormItemProps } from "easybill-ui/components/CurdForm/src/types"
 const props = defineProps({
   ...FormItemProps,

package/components/CurdForm/src/components/schema-form-select.vue

@@ -42,7 +42,7 @@ export default defineComponent({
       },
       {
         deep: true,
-      }
+      },
     )
     // 有的options是从接口里拿的，掉接口需要时间，初始全选的时候全选的按钮没有勾选上，所以监听options
     watch(
@@ -56,7 +56,7 @@ export default defineComponent({
       },
       {
         deep: true,
-      }
+      },
     )
     const selectAll = () => {
       if (checked.value) {

package/components/CurdForm/src/components/schema-form-time-picker.vue

@@ -3,11 +3,11 @@
 </template>
 <script lang="ts">
 import { defineComponent, computed, PropType } from "vue"
-import { ElDatePicker, ModelValueType } from "element-plus"
+import { ElTimePicker, ModelValueType } from "element-plus"
 import { FormItemProps } from "../types"
 export default defineComponent({
-  name: "SchemaFormDatePicker",
-  components: { ElDatePicker },
+  name: "SchemaFormTimePicker",
+  components: { ElTimePicker },
   props: {
     ...FormItemProps,
     modelValue: {

package/components/CurdForm/src/components/schema-form-value.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-html="model" v-bind="props"></div>
+  <div v-bind="props" v-html="model"></div>
 </template>
 <script lang="ts">
 import { defineComponent, computed } from "vue"

package/components/CurdForm/src/hooks/index.ts

@@ -1,6 +1,6 @@
-import { inject } from "vue"
-import { FormContext } from "../types"
-export function useForm() {
-  const formContext = inject<FormContext>("curdFormContext")
-  return { formContext }
-}
+import { inject } from "vue"
+import { FormContext } from "../types"
+export function useForm() {
+  const formContext = inject<FormContext>("curdFormContext") as FormContext
+  return { formContext }
+}

package/components/CurdForm/src/types.ts

@@ -1,12 +1,23 @@
-import { FormRules, FormItemRule, FormProps, ElForm, ElTooltipProps } from "element-plus"
-import { PropType, Ref } from "vue"
+import { FormRules, FormItemRule, ElForm, TooltipTriggerType } from "element-plus"
+import { PropType } from "vue"
 import { OptionItem } from "../../ConstantStatus"
 import { defineComponent } from "vue"
-export interface FormSchema extends Partial<FormProps> {
-  formItem: Array<FormItem>
-  rules?: FormRules | ((formModel: Fields, context: FormContext) => FormRules)
-  labelPosition?: "left" | "right" | "top"
+export interface FormSchema {
+  formItem: FormItem[]
+  rules?: FormRules
+  getRules?: (formModel: Fields, context: FormContext) => FormRules
+  labelPosition?: "left" | "right" | "top" | string
   gutter?: number
+  labelWidth?: number | string
+  inline?: boolean
+  inlineMessage?: boolean
+  statusIcon?: boolean
+  showMessage?: boolean
+  size?: "default" | "small" | "large" | string
+  disabled?: boolean
+  validateOnRuleChange?: boolean
+  hideRequiredAsterisk?: boolean
+  scrollToError?: boolean
 }
 export interface FormItem {
   prop: string
@@ -15,32 +26,49 @@ export interface FormItem {
   value?: any
   eventObject?: EventObject
   options?: Array<CurdFormOptionItem>
-  asyncOptions?: (modelRef: Fields, formItem: FormItem, context: FormContext, config?: Fields) => Promise<Array<CurdFormOptionItem>>
-  asyncValue?: (modelRef: Fields, formItem: FormItem) => Promise<string | number | boolean>
+  asyncOptions?: (modelRef: Fields, formItem: any, context: FormContext, config?: any) => Promise<Array<CurdFormOptionItem>>
   loading?: boolean
   hidden?: boolean | ((model: Fields) => boolean)
-  rules?: FormItemRule[] | ((formModel: Fields, formItem: FormItem, context: FormContext) => FormItemRule[])
-  props?: FormItemPropObject | ((formModel: Fields, formItem: FormItem) => void)
-  formItemProps?: FormItemPropObject | ((formModel: Fields, formItem: FormItem) => void)
-  labelWidth?: string
+  rules?: FormItemRule[]
+  props?: FormItemPropObject | ((formModel: Fields, formItem: any) => FormItemPropObject)
+  formItemProps?: FormItemPropObject | ((formModel: Fields, formItem: any) => void)
+  labelWidth?: string | number
   span?: number
   disabled?: boolean
-  tooltip?: string | ((formModel: Fields, formItem: FormItem) => Partial<ElTooltipProps> | String) | Partial<ElTooltipProps>
+  tooltip?: string | ((formModel: Fields, formItem: any) => Partial<TooltipProps> | string) | Partial<TooltipProps>
   autoload?: boolean
   prefix?: string | any
   suffix?: string | any
+  sortIndex?: number
 }
 export type FormItemTypeEmun = "input" | "select" | "radio" | "checkbox" | "input-number" | "switch" | "file" | "date-picker" | "time-picker" | "color-picker" | "value"
-// type FormItemProps = FormItemPropObject | ((formModel: Fields, formItem: FormItem) => void)
 export interface FormItemPropObject {
   [key: string]: any
 }
+export interface TooltipProps {
+  effect: "dark" | "light"
+  content: string
+  rawContent: boolean
+  placement: import("element-plus/es/components/popper").Placement
+  disabled: boolean
+  offset: number
+  transition: string
+  popperOptions: any
+  showAfter: number
+  showArrow: boolean
+  hideAfter: number
+  autoClose: number
+  popperClass: string
+  enterable: boolean
+  teleported: boolean
+  trigger: TooltipTriggerType
+}
 export interface FormContext {
-  loadOptions: (prop: string) => void
-  setOptions: (prop: string, options: CurdFormOptionItem[]) => void
+  loadOptions: (prop: string, config?: Fields) => void
+  setOptions: (prop: string, options: CurdFormOptionItem[], config?: any) => void
   change: (formModel: Fields, formItem: FormItem) => void
   formModel: Fields
-  formRef: Ref<InstanceType<typeof ElForm> | undefined>
+  formRef: InstanceType<typeof ElForm> | undefined
   setValue: (prop: string, value?: any) => void
 }
 export interface Fields {
@@ -53,9 +81,9 @@ export interface CurdFormOptionItem extends OptionItem {
 //   change?: (formModel: Fields, formItem: FormItem, proxy: any) => void
 // }
 export interface EventObject {
-  change?: (formModel: Fields, formItem: FormItem, context: FormContext) => void
-  optionLoaded?: (formModel: Fields, formItem: FormItem, context: FormContext) => void
-  [key: string]: ((formModel: Fields, formItem: FormItem, context: FormContext) => void) | undefined
+  change?: (formModel: Fields, formItem: FormItem, context: FormContext, ...args: any[]) => void | boolean
+  optionLoaded?: (formModel: Fields, formItem: FormItem, context: FormContext, config?: any) => void
+  [key: string]: ((formModel: Fields, formItem: FormItem, context: FormContext, config?: any) => void) | undefined
 }
 // export interface OptionItem {
 //   label: string

package/components/CurdForm/src/utils/ajax.ts

@@ -57,8 +57,9 @@ export const ajaxUpload: UploadRequestHandler = (option) => {
   const formData = new FormData()
   if (option.data) {
     for (const [key, value] of Object.entries(option.data)) {
-      if (Array.isArray(value)) formData.append(key, ...value)
-      else formData.append(key, value)
+      if (Array.isArray(value)) {
+        formData.append(key, value[0])
+      } else formData.append(key, value)
     }
   }
   formData.append(option.filename, option.file, option.file.name)