easybill-ui 1.4.0 → 1.4.2

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

@@ -1,93 +0,0 @@
-<template>
-  <el-select v-model="model" style="width: 100%" :loading="formItem.loading || loading" :filterable="true" v-bind="selectProps" v-on="eventObject">
-    <el-option v-if="props.all && !props.multiple" value="" :label="t('el.form.all')"></el-option>
-    <el-checkbox v-if="props.all && props.multiple" v-model="checked" :label="t('el.form.allSelect')" class="schema-form-select-check" />
-    <template v-for="option in list" :key="option.value">
-      <el-option :value="option.value" :label="option.label" :disabled="option.disabled">
-        <div v-if="option.html" v-html="option.html"></div>
-        <template v-else>{{ option.label }}</template>
-      </el-option>
-    </template>
-    <template v-for="(item, key) in props?.slots" :key="key" #[key]>
-      <component :is="item" v-model="model" :formItem="formItem" :formModel="formModel" :props="props" :event-object="eventObject" />
-    </template>
-  </el-select>
-</template>
-<script lang="ts">
-import { useLocale } from "easybill-ui"
-import { computed, defineComponent, onMounted, ref, watch } from "vue"
-import type { CurdFormOptionItem } from "../types"
-import { FormItemProps } from "../types"
-export default defineComponent({
-  name: "SchemaFormSelect",
-  components: {},
-  props: {
-    ...FormItemProps,
-    modelValue: {
-      type: [String, Number, Boolean, Array],
-      default: null,
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const model = computed({
-      get: () => props.modelValue,
-      set: (val) => emit("update:modelValue", val),
-    })
-    const { t } = useLocale()
-    const checked = computed({
-      get() {
-        return Array.isArray(model.value) && model.value.length && props.formItem?.options?.every((item) => Array.isArray(model.value) && model.value?.includes(item.value))
-      },
-      set(val) {
-        const options = props.formItem.options || []
-        model.value = val ? options.map((a) => a.value) : []
-        if (props?.eventObject?.change) props.eventObject.change(props.formModel, props.formItem)
-      },
-    })
-    const loading = ref(false)
-    // 有的options是从接口里拿的，掉接口需要时间，初始全选的时候全选的按钮没有勾选上，所以监听options
-    const list = ref(props.formItem.options)
-    watch(
-      () => props.formItem.options,
-      (val) => {
-        list.value = val
-      },
-      {
-        deep: true,
-      },
-    )
-    onMounted(() => {})
-    const { filterMethod, remoteMethod, ...selectProps } = props.props
-    // 前端筛选
-    if (filterMethod) {
-      selectProps.filterMethod = function (val: string) {
-        const remoteMehotd1 = filterMethod as (val: string, optionItem?: CurdFormOptionItem) => Promise<CurdFormOptionItem[]>
-        list.value = props.formItem?.options?.filter((a) => remoteMehotd1(val, a))
-      }
-    }
-    // 远程筛选
-    if (selectProps.remote && remoteMethod) {
-      selectProps.remoteMethod = function (val: string) {
-        loading.value = true
-        const remoteMehotd1 = remoteMethod as (val: string, optionItem?: CurdFormOptionItem) => Promise<CurdFormOptionItem[]>
-        remoteMehotd1(val)
-          .then((res) => {
-            list.value = res
-          })
-          .finally(() => {
-            loading.value = false
-          })
-      }
-    }
-    return {
-      model,
-      checked,
-      selectProps,
-      list,
-      loading,
-      t,
-    }
-  },
-})
-</script>

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

@@ -1,29 +0,0 @@
-<template>
-  <el-switch v-model="model" v-bind="props" v-on="eventObject" />
-</template>
-<script lang="ts">
-import { computed, defineComponent } from "vue"
-import { FormItemProps } from "../types"
-export default defineComponent({
-  name: "SchemaFormSwitch",
-  components: {},
-  props: {
-    ...FormItemProps,
-    modelValue: {
-      type: [String, Number, Boolean],
-      default: null,
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const model = computed({
-      get: () => props.modelValue,
-      set: (val) => emit("update:modelValue", val),
-    })
-
-    return {
-      model,
-    }
-  },
-})
-</script>

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

@@ -1,37 +0,0 @@
-<template>
-  <el-time-picker v-model="model" v-bind="props" v-on="eventObject">
-    <template v-for="(item, key) in props.slots" :key="key" #[key]="slotScope">
-      <component :is="item" v-model="model" v-bind="slotScope" :form-item="formItem" :form-model="formModel" :props="props" :event-object="eventObject" />
-    </template>
-  </el-time-picker>
-</template>
-<script lang="ts">
-import { useLocale } from "easybill-ui"
-import { type ModelValueType } from "element-plus"
-import { computed, defineComponent, type PropType } from "vue"
-import { FormItemProps } from "../types"
-export default defineComponent({
-  name: "SchemaFormTimePicker",
-  components: {},
-  props: {
-    ...FormItemProps,
-    modelValue: {
-      type: [Array, String] as PropType<ModelValueType>,
-      default: "",
-    }, // 表单项值
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const model = computed({
-      get: () => props.modelValue,
-      set: (val) => emit("update:modelValue", val),
-    })
-    const { t } = useLocale()
-
-    return {
-      model,
-      t,
-    }
-  },
-})
-</script>

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

@@ -1,45 +0,0 @@
-<template>
-  <div class="schema-tree-select">
-    <div v-if="formItem.loading" class="loading" style="color: #999; font-size: 12px">
-      <el-icon class="is-loading"><Loading /></el-icon> {{ t("el.form.loading") }}
-    </div>
-    <el-tree-select v-if="!formItem.loading && formItem.options && formItem.options.length" v-model="model" :class="[props?.showType]" style="width: 100%" :data="formItem.options" v-bind="props" v-on="eventObject"> </el-tree-select>
-    <div v-if="!formItem.loading && !formItem.options?.length" class="empty">
-      <component :is="empty" v-if="empty" :form-model="formModel" :form-item="formItem" :props="props" />
-      <template v-else>
-        <el-icon><Warning /></el-icon> <span>{{ props.noDataText || t("el.form.nodata") }}</span>
-      </template>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { Loading, Warning } from "@element-plus/icons-vue"
-import { useLocale } from "easybill-ui"
-import { computed, defineComponent, toRaw } from "vue"
-import { FormItemProps } from "../types"
-export default defineComponent({
-  name: "SchemaFormTreeSelect",
-  components: { Loading, Warning },
-  props: {
-    ...FormItemProps,
-    modelValue: {
-      type: [String, Number, Boolean],
-      default: "",
-    }, // 表单项值
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const model = computed({
-      get: () => props.modelValue,
-      set: (val) => emit("update:modelValue", val),
-    })
-    const { t } = useLocale()
-
-    return {
-      model,
-      empty: toRaw(props.props.empty) || "",
-      t,
-    }
-  },
-})
-</script>

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

@@ -1,25 +0,0 @@
-<template>
-  <div v-bind="props" v-html="model"></div>
-</template>
-<script lang="ts">
-import { computed, defineComponent } from "vue"
-import { FormItemProps } from "../types"
-export default defineComponent({
-  name: "SchemaFormValue",
-  components: {},
-  props: {
-    ...FormItemProps,
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const model = computed({
-      get: () => props.modelValue,
-      set: (val) => emit("update:modelValue", val),
-    })
-
-    return {
-      model,
-    }
-  },
-})
-</script>

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

@@ -1,60 +0,0 @@
-function getInput(el: HTMLElement): HTMLInputElement {
-  let inputEle: HTMLInputElement
-  if (el.tagName !== "INPUT") {
-    inputEle = el.querySelector("input") as HTMLInputElement
-  } else {
-    inputEle = el as HTMLInputElement
-  }
-  return inputEle
-}
-function dispatchEvent(el: HTMLElement, type: string) {
-  const evt = document.createEvent("HTMLEvents")
-  evt.initEvent(type, true, true)
-  el.dispatchEvent(evt)
-}
-
-// 过滤前后空格的指令 v-trim
-const directives = {
-  trim: {
-    mounted(el: El) {
-      const inputEle = getInput(el)
-      // console.log(inputEle, "trimInputEle")
-      const handler = function (event: FocusEvent) {
-        if (!event.target) return
-        const target = event.target as HTMLInputElement
-        const newVal = target.value.trim()
-        if (target.value !== newVal) {
-          target.value = newVal
-          dispatchEvent(inputEle, "input")
-        }
-      }
-      // 回车后过滤空格
-      const keydown = function (event: KeyboardEvent) {
-        if (event.key === "Enter") {
-          const target = event.target as HTMLInputElement
-          const newVal = target.value.trim()
-          if (target.value !== newVal) {
-            target.value = newVal
-            dispatchEvent(inputEle, "input")
-          }
-        }
-      }
-      el.inputEle = inputEle
-      el._blurHandler = handler
-      el._keyHandler = keydown
-      if (inputEle) inputEle.addEventListener("blur", handler)
-      if (inputEle) inputEle.addEventListener("keydown", keydown)
-    },
-    unmounted(el: El) {
-      const { inputEle } = el
-      if (inputEle) inputEle.removeEventListener("blur", el._blurHandler)
-      if (inputEle) inputEle.removeEventListener("keydown", el._keyHandler)
-    },
-  },
-}
-interface El extends HTMLElement {
-  inputEle: HTMLElement
-  _blurHandler: (event: FocusEvent) => void
-  _keyHandler: (event: KeyboardEvent) => void
-}
-export { directives }

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

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

package/components/CurdForm/src/types.ts

@@ -1,146 +0,0 @@
-import { ElForm, type FormItemRule, type FormRules } from "element-plus"
-import type { Arrayable } from "element-plus/es/utils"
-import { defineComponent, type PropType, type VNode } from "vue"
-import type { OptionItem } from "../../ConstantStatus"
-export interface FormSchema {
-  formItem: FormItem[]
-  rules?: FormRules | ((formModel: Fields, context: FormContext) => 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
-  label?: string
-  type?: FormItemTypeEmun | ReturnType<typeof defineComponent>
-  value?: unknown
-  eventObject?: EventObject
-  slots?: Record<string, () => VNode[] | string | null>
-  options?: Array<CurdFormOptionItem>
-  asyncOptions?: (modelRef: Fields, formItem: FormItem, context: FormContext, config?: unknown) => Promise<Array<CurdFormOptionItem>>
-  loading?: boolean
-  hidden?: boolean | ((model: Fields) => boolean)
-  rules?: Arrayable<FormItemRule>
-  props?: FormItemPropObject | ((formModel: Fields, formItem: FormItem) => FormItemPropObject)
-  formItemProps?: FormItemPropObject | ((formModel: Fields, formItem: FormItem) => FormItemPropObject)
-  labelWidth?: string | number
-  labelPosition?: "left" | "right" | "top" | string
-  span?: number
-  disabled?: boolean
-  tooltip?: string | ((formModel: Fields, formItem: FormItem) => Partial<TooltipProps> | string) | Partial<TooltipProps>
-  autoload?: boolean
-  prefix?: string | unknown
-  suffix?: string | unknown
-  empty?: string | unknown
-  sortIndex?: number
-}
-export type FormItemTypeEmun = "input" | "select" | "radio" | "checkbox" | "input-number" | "switch" | "file" | "date-picker" | "time-picker" | "color-picker" | "value" | "tree-select" | "autocomplete" | "choose"
-export interface FormItemPropObject extends Fields {
-  slots?: Record<string, (props?: FormItemPropObject) => VNode | VNode[] | string | null>
-  all?: boolean | OptionItem
-  empty?: string | VNode
-  noDataText?: string
-  style?: Record<string, string> | string
-}
-export interface TooltipProps extends Record<string, unknown> {
-  effect?: "dark" | "light" | string
-  content?: string
-  rawContent?: boolean
-  placement?: string
-  disabled?: boolean
-  offset?: number
-  transition?: string
-  popperOptions?: unknown
-  showAfter?: number
-  showArrow?: boolean
-  hideAfter?: number
-  autoClose?: number
-  popperClass?: string
-  enterable?: boolean
-  teleported?: boolean
-  trigger?: string | string[]
-}
-export interface FormContext {
-  loadOptions: (prop: string, config?: unknown) => void | Promise<CurdFormOptionItem[]> | CurdFormOptionItem[]
-  setOptions: (prop: string, options: CurdFormOptionItem[], config?: unknown) => void | Promise<void>
-  change: (formModel: Fields, formItem: FormItem) => void
-  formModel: Fields
-  formSchema: FormSchema
-  formRef: InstanceType<typeof ElForm> | undefined
-  components: Record<string, unknown>
-  findFormItem?: (prop: string) => FormItemSearchResult | undefined
-  hasFormItem?: (prop: string) => boolean
-  registerFormItems?: (provider: FormItemProvider) => () => void
-  refreshFormItems?: (providerId?: string | symbol) => void
-}
-export interface Fields {
-  [key: string]: unknown
-}
-export interface CurdFormOptionItem extends OptionItem {
-  component?: string | ReturnType<typeof defineComponent>
-  disabled?: boolean
-  type?: string | "radio" | "button"
-  rawContent?: boolean
-  /** 引用的表单项 prop 数组，用于 choose 类型 */
-  props?: string[]
-  /** 内联表单项定义，用于 choose 类型 */
-  items?: FormItem[]
-}
-export interface FormItemProvider {
-  id: string | symbol
-  getItems: () => FormItem[] | undefined | null
-}
-export interface FormItemSearchResult {
-  item: FormItem
-  parent?: FormItem
-  path: string
-  providerId?: string | symbol
-}
-// interface EventObjectDefault {
-//   change?: (formModel: Fields, formItem: FormItem, proxy: any) => void
-// }
-export type EventObjectHandler = (formModel: Fields, formItem: FormItem, context?: FormContext, ...args: unknown[]) => void | boolean
-export interface EventObject {
-  change?: EventObjectHandler
-  optionLoaded?: EventObjectHandler
-  [key: string]: EventObjectHandler | undefined
-}
-// export interface OptionItem {
-//   label: string
-//   value: string | number | boolean
-//   disabled?: boolean
-//   tooltip?: string | ((formModel: Fields, formItem: FormItem) => string)
-//   [key: string]: any
-// }
-export const FormItemProps = {
-  formItem: {
-    type: Object as PropType<FormItem>,
-    default: () => ({}),
-  },
-  formModel: {
-    type: Object as PropType<Fields>,
-    default: () => ({}),
-  },
-  props: {
-    type: Object as PropType<FormItemPropObject>,
-    default: () => ({}),
-  },
-  eventObject: {
-    type: Object as PropType<EventObject>,
-    default: () => ({}),
-  },
-  modelValue: {
-    type: String,
-    default: "",
-  },
-}

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

@@ -1,125 +0,0 @@
-const SCOPE = "ElUpload"
-
-export class UploadAjaxError extends Error {
-  name = "UploadAjaxError"
-  status: number
-  method: string
-  url: string
-
-  constructor(message: string, status: number, method: string, url: string) {
-    super(message)
-    this.status = status
-    this.method = method
-    this.url = url
-  }
-}
-
-function getError(action: string, option: UploadRequestOptions, xhr: XMLHttpRequest) {
-  let msg: string
-  if (xhr.response) {
-    msg = `${xhr.response.error || xhr.response}`
-  } else if (xhr.responseText) {
-    msg = `${xhr.responseText}`
-  } else {
-    msg = `fail to ${option.method} ${action} ${xhr.status}`
-  }
-
-  return new UploadAjaxError(msg, xhr.status, option.method, action)
-}
-
-function getBody(xhr: XMLHttpRequest): XMLHttpRequestResponseType {
-  const text = xhr.responseText || xhr.response
-  if (!text) {
-    return text
-  }
-
-  try {
-    return JSON.parse(text)
-  } catch {
-    return text
-  }
-}
-
-export const ajaxUpload: UploadRequestHandler = (option) => {
-  if (typeof XMLHttpRequest === "undefined") throwError(SCOPE, "XMLHttpRequest is undefined")
-
-  const xhr = new XMLHttpRequest()
-  const action = option.action
-
-  if (xhr.upload) {
-    xhr.upload.addEventListener("progress", (evt) => {
-      const progressEvt = evt as UploadProgressEvent
-      progressEvt.percent = evt.total > 0 ? (evt.loaded / evt.total) * 100 : 0
-      option.onProgress(progressEvt)
-    })
-  }
-
-  const formData = new FormData()
-  if (option.data) {
-    for (const [key, value] of Object.entries(option.data)) {
-      if (Array.isArray(value)) {
-        formData.append(key, value[0])
-      } else formData.append(key, value)
-    }
-  }
-  formData.append(option.filename, option.file, option.file.name)
-
-  xhr.addEventListener("error", () => {
-    option.onError(getError(action, option, xhr))
-  })
-
-  xhr.addEventListener("load", () => {
-    if (xhr.status < 200 || xhr.status >= 300) {
-      return option.onError(getError(action, option, xhr))
-    }
-    option.onSuccess(getBody(xhr))
-  })
-
-  xhr.open(option.method, action, true)
-
-  if (option.withCredentials && "withCredentials" in xhr) {
-    xhr.withCredentials = true
-  }
-
-  const headers = option.headers || {}
-  if (headers instanceof Headers) {
-    headers.forEach((value, key) => xhr.setRequestHeader(key, value))
-  } else {
-    for (const [key, value] of Object.entries(headers)) {
-      if (isNil(value)) continue
-      xhr.setRequestHeader(key, String(value))
-    }
-  }
-
-  xhr.send(formData)
-  return xhr
-}
-class ElementPlusError extends Error {
-  constructor(m: string) {
-    super(m)
-    this.name = "CurdFormError"
-  }
-}
-export function throwError(scope: string, m: string): never {
-  throw new ElementPlusError(`[${scope}] ${m}`)
-}
-function isNil(value: unknown) {
-  return value == null
-}
-
-export interface UploadProgressEvent extends ProgressEvent {
-  percent: number
-}
-export type UploadRequestHandler = (options: UploadRequestOptions) => XMLHttpRequest | Promise<unknown>
-export interface UploadRequestOptions {
-  action: string
-  method: string
-  data: Record<string, string | Blob | [string | Blob, string]>
-  filename: string
-  file: File
-  headers: Headers | Record<string, string | number | null | undefined>
-  onError: (evt: UploadAjaxError) => void
-  onProgress: (evt: UploadProgressEvent) => void
-  onSuccess: (response: XMLHttpRequestResponseType) => void
-  withCredentials: boolean
-}

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

@@ -1,17 +0,0 @@
-export function deepClone<T extends Array<T> | unknown>(sourceData: T): T {
-  if (Array.isArray(sourceData)) {
-    return sourceData.map((item) => deepClone(item)) as T
-  }
-  if (typeof sourceData !== "object" || sourceData === null) {
-    return sourceData
-  }
-  const obj: T = {} as T
-  for (const key in sourceData) {
-    if (typeof sourceData[key] === "object" && sourceData[key] !== null) {
-      obj[key] = deepClone(sourceData[key])
-    } else {
-      obj[key] = sourceData[key]
-    }
-  }
-  return obj
-}

package/components/CurdGroupForm/index.ts

@@ -1,2 +0,0 @@
-export { default as CurdGroupForm } from "./src/CurdGroupForm.vue"
-export * from "./types"

package/components/CurdGroupForm/src/CurdGroupForm.vue

@@ -1,93 +0,0 @@
-<template>
-  <CurdFormGroup v-for="(item, index) in props.schema.items" v-show="!schemaItemHidden(item)" :key="index" :item="item" :title="item.groupName" :icon="item.icon" :label-position="item.labelPosition">
-    <template v-if="item.headerRight" #headerRight>
-      <component :is="item.headerRight" :schema="props.schema" :schemaItem="item" :form-model="form" />
-    </template>
-    <template v-if="item.headerTitle" #title>
-      <component :is="item.headerTitle" :schema="props.schema" :schemaItem="item" :form-model="form" />
-    </template>
-    <template v-if="item.headerBottom" #headerBottom>
-      <component :is="item.headerBottom" :schema="props.schema" :schemaItem="item" :form-model="form" />
-    </template>
-    <div class="curdform-group-content" data-instance-form-wrap>
-      <CurdForm
-        :ref="(el: Element | ComponentPublicInstance | null) => (formRef[(item.step || '') + item.groupName + index] = el as InstanceType<typeof CurdForm>)"
-        v-model="form"
-        :form-schema="item.schema"
-        :extend-context="extendContext"
-        :validateOnRuleChange="false"
-        :scroll-to-error="true"
-        @change="onChange"
-      />
-    </div>
-  </CurdFormGroup>
-</template>
-
-<script lang="ts" setup>
-import { CurdForm } from "easybill-ui"
-import type { ComponentPublicInstance, PropType } from "vue"
-import { watch } from "vue"
-import type { CurdGroupFormSchema } from "../types"
-import CurdFormGroup from "./components/CurdFormGroup.vue"
-import { useFormHook } from "./hooks/useFormHook"
-const props = defineProps({
-  modelValue: {
-    type: Object as PropType<Record<string, unknown>>,
-    default: () => ({}),
-  },
-  schema: {
-    type: Object as PropType<CurdGroupFormSchema>,
-    default: () => ({}),
-  },
-})
-
-const emits = defineEmits(["update:modelValue", "change", "loadOptions"])
-const { form, formRef, schema: formSchema, validate, schemaItemHidden } = useFormHook()
-const init = () => {
-  form.value = props.modelValue || {}
-  formSchema.value = props.schema
-}
-init()
-watch(
-  () => props.schema,
-  () => {
-    formSchema.value = props.schema
-  },
-)
-
-watch(
-  () => props.modelValue,
-  () => {
-    if (form.value != props.modelValue) {
-      form.value = props.modelValue
-      // emits("update:modelValue", form.value)
-    }
-  },
-)
-
-const loadOptions = (prop: string, config?: unknown) => {
-  if (!props.schema) return
-  let has = false
-  for (const index in props.schema.items) {
-    const group = props.schema.items[index]
-    const form = formRef.value[(group.step || "") + group.groupName + index]
-    const hasFormItem = form?.hasFormItem ? form.hasFormItem(prop) : group.schema.formItem.some((item) => item.prop == prop)
-    if (hasFormItem) {
-      has = true
-      form?.loadOptions(prop, config)
-    }
-  }
-  if (!has) {
-    emits("loadOptions", prop)
-  }
-}
-const extendContext = {
-  loadOptions,
-}
-
-const onChange = (v: unknown, l: unknown) => {
-  emits("change", v, l)
-}
-
-defineExpose({ loadOptions, validate })
-</script>