easybill-ui 1.4.1 → 1.4.2

package/components/FormDialog/src/FormDialog.vue

@@ -1,276 +0,0 @@
-<template>
-  <component :is="componentName" v-bind="containerProps">
-    <el-steps v-if="isGroupMode && hasMultipleSteps && !stepComponent" :active="activeStep" align-center style="margin-bottom: 20px; position: sticky; top: 0; z-index: 2000; background: var(--el-bg-color)" v-bind="stepProps">
-      <el-step v-for="(stepItem, i) in stepList" :key="i" :title="stepItem.name" />
-    </el-steps>
-    <component v-if="stepComponent" :is="stepComponent" :step="activeStep" :steps="stepList" />
-    <div v-loading="confirmLoading" class="form-dialog-content">
-      <!-- 单表单模式 -->
-      <curd-form v-if="isFormMode" ref="curdFormRef" v-model="form" :fields="fields" :form-schema="formSchema" :extend-context="extendContexts" />
-      <!-- 分组表单模式 -->
-      <template v-else-if="isGroupMode">
-        <div v-for="(stepItem, i) in stepList" :key="i" class="form-dialog-step" v-show="activeStep === i">
-          <curd-group-form :ref="(el: any) => el && (groupFormRef[i] = el)" v-model="form" :schema="stepItem.schema" :fields="fields" :extend-context="extendContexts" />
-        </div>
-      </template>
-    </div>
-    <template #footer>
-      <component v-if="footerComponent" :is="footerComponent" />
-      <span v-else-if="handleOk" class="dialog-footer">
-        <el-button v-if="cancelBtnTextLabel" :disabled="confirmLoading" type="default" @click="onCancel()">{{ cancelBtnTextLabel }}</el-button>
-        <el-button v-if="isGroupMode && hasMultipleSteps && canPrev" :disabled="confirmLoading" type="primary" plain @click="prev()">{{ t("el.formDialog.preStep") }}</el-button>
-        <el-button v-if="isGroupMode && hasMultipleSteps && canNext" :disabled="confirmLoading" type="primary" plain @click="next()">{{ t("el.formDialog.nextStep") }}</el-button>
-        <el-button v-if="(!isGroupMode || isLastStep) && confirmBtnTextLabel" :disabled="confirmLoading" type="primary" :loading="confirmLoading" @click="onOk">{{ confirmBtnTextLabel }}</el-button>
-      </span>
-    </template>
-  </component>
-</template>
-
-<script lang="ts">
-import { CurdForm, CurdGroupForm, type CurdGroupFormSchema, useLocale } from "easybill-ui"
-import { type Component, computed, defineComponent, type PropType, provide, reactive, ref, type Ref, toRefs, useAttrs } from "vue"
-import { type Fields, type FormSchema } from "../../CurdForm"
-import { useStepList } from "./hooks/useStepList"
-import { useStepNavigation } from "./hooks/useStepNavigation"
-import type { FormDialogHandleOk } from "./types"
-export default defineComponent({
-  name: "FormDialog",
-  components: {
-    CurdForm,
-    CurdGroupForm,
-  },
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    remove: {
-      // 移除模态框
-      type: Function as PropType<() => void>,
-      default: null,
-    },
-    formSchema: {
-      // 表单项
-      type: Object as PropType<FormSchema>,
-      default: () => null,
-    },
-    groupSchema: {
-      // 分组表单项
-      type: Object as PropType<CurdGroupFormSchema>,
-      default: () => null,
-    },
-    fields: {
-      // 默认值，一般编辑时传入
-      type: Object as PropType<Fields>,
-      default: () => ({}),
-    },
-    setForm: {
-      type: Function as PropType<(form: Ref<Fields>) => void>,
-      default: null,
-    },
-    // 点击确定
-    handleOk: {
-      type: Function as PropType<FormDialogHandleOk>,
-      default: null,
-    },
-    // 关闭的回调,通过类型判断是点取消按钮还是右上角关闭按钮
-    handleClose: {
-      type: Function,
-      default: null,
-    },
-    stepProps: {
-      type: Object as PropType<Fields>,
-      default: () => ({}),
-    },
-    extendContext: {
-      type: Object,
-      default: () => ({}),
-    },
-    confirmBtnText: {
-      type: String,
-      default: undefined,
-    },
-    cancelBtnText: {
-      type: String,
-      default: undefined,
-    },
-    mode: {
-      // 容器组件类型: 'dialog' | 'drawer'
-      type: String as PropType<"dialog" | "drawer">,
-      default: "dialog",
-    },
-    stepComponent: {
-      type: Object as PropType<Component>,
-      default: null,
-    },
-    footerComponent: {
-      type: Object as PropType<Component>,
-      default: null,
-    },
-  },
-  setup(props) {
-    const attrs = useAttrs()
-    const curdFormRef = ref()
-    const form = ref<Fields>({})
-    const state = reactive({
-      visible: true,
-      confirmLoading: false,
-    })
-    const { t } = useLocale()
-
-    // 模式判断
-    const isGroupMode = computed(() => !!props.groupSchema)
-    const isFormMode = computed(() => !!props.formSchema && !isGroupMode.value)
-
-    // 步骤列表
-    const { stepList, stepCount, hasMultipleSteps } = useStepList(computed(() => props.groupSchema))
-
-    // 步骤导航
-    const { activeStep, groupFormRef, canPrev, canNext, isLastStep, prev, next, validateCurrentStep } = useStepNavigation(stepCount)
-
-    const onOk = () => {
-      state.confirmLoading = true
-
-      const getValidatePromise = (): Promise<boolean> => {
-        if (isFormMode.value) {
-          return (
-            curdFormRef.value
-              ?.validate()
-              .then(() => true)
-              .catch(() => false) ?? Promise.resolve(true)
-          )
-        }
-
-        return new Promise<boolean>((resolve) => {
-          validateCurrentStep((valid) => resolve(valid))
-        })
-      }
-
-      getValidatePromise()
-        .then(async (valid) => {
-          if (!valid) {
-            state.confirmLoading = false
-            return
-          }
-          const pass = await Promise.resolve(props.handleOk?.(form.value, state)).finally(() => (state.confirmLoading = false))
-          if (typeof pass == "undefined" || pass) {
-            state.visible = false
-            onCancel()
-          }
-        })
-        .catch(() => {
-          state.confirmLoading = false
-        })
-    }
-    const onCancel = () => {
-      state.visible = false
-      if (props.handleClose) props.handleClose("cancel")
-      setTimeout(() => {
-        if (props.remove) props.remove()
-      }, 300)
-    }
-    const onBeforeClose = () => {
-      state.visible = false
-      if (props.handleClose) props.handleClose("close")
-      setTimeout(() => {
-        if (props.remove) props.remove()
-      }, 300)
-    }
-    const loadOptions = (prop: string, config?: unknown) => {
-      if (isFormMode.value) {
-        curdFormRef.value?.loadOptions(prop, config)
-      } else if (isGroupMode.value) {
-        Object.values(groupFormRef.value).forEach((form) => {
-          form?.loadOptions(prop, config)
-        })
-      }
-    }
-    const extendContexts = {
-      loadOptions,
-      ...props.extendContext,
-    }
-    if (props.setForm) {
-      props.setForm(form)
-    }
-    const confirmBtnTextLabel = computed(() => props.confirmBtnText ?? t("el.formDialog.confirm"))
-    const cancelBtnTextLabel = computed(() => props.cancelBtnText ?? t("el.formDialog.cancel"))
-    const componentName = computed(() => (props.mode === "drawer" ? "el-drawer" : "el-dialog"))
-    const containerProps = computed(() => {
-      const baseProps = {
-        modelValue: state.visible,
-        title: props.title,
-        "close-on-click-modal": false,
-        "before-close": onBeforeClose,
-        ...attrs,
-      }
-      if (props.mode === "drawer") {
-        return {
-          ...baseProps,
-          size: attrs.size || attrs.width || "60%",
-          direction: attrs.direction || "rtl",
-        }
-      }
-      return {
-        ...baseProps,
-        width: attrs.width || "60%",
-      }
-    })
-    const formDialogContext = reactive({
-      form,
-      state,
-      stepList,
-      activeStep,
-      loadOptions,
-      prev,
-      next,
-      goTo: (step: number) => {
-        if (step >= 0 && step < stepCount.value) {
-          // 验证当前步骤
-          validateCurrentStep((valid) => {
-            if (valid) {
-              activeStep.value = step
-            }
-          })
-        }
-      },
-      close: onBeforeClose,
-      handleOk: onOk,
-      validateCurrentStep,
-      canPrev,
-      canNext,
-      isLastStep,
-      isGroupMode,
-      isFormMode,
-      confirmBtnTextLabel,
-      cancelBtnTextLabel,
-    })
-    provide("formDialogContext", formDialogContext)
-    return {
-      ...toRefs(state),
-      onOk,
-      onCancel,
-      onBeforeClose,
-      curdFormRef,
-      stepList,
-      form,
-      prev,
-      next,
-      t,
-      extendContexts,
-      confirmBtnTextLabel,
-      cancelBtnTextLabel,
-      componentName,
-      containerProps,
-      isGroupMode,
-      isFormMode,
-      hasMultipleSteps,
-      activeStep,
-      groupFormRef,
-      canPrev,
-      canNext,
-      isLastStep,
-      validateCurrentStep,
-    }
-  },
-})
-</script>

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

@@ -1,2 +0,0 @@
-export { useStepList, type StepItem } from "./useStepList"
-export { useStepNavigation } from "./useStepNavigation"

package/components/FormDialog/src/hooks/useStepList.ts

@@ -1,49 +0,0 @@
-import { computed, type ComputedRef } from "vue"
-import type { CurdGroupFormSchema } from "../../../CurdGroupForm/types"
-
-export interface StepItem {
-  name: string
-  stepIndex?: number
-  schema: {
-    items: CurdGroupFormSchema["items"]
-  }
-}
-
-export function useStepList(groupSchema: ComputedRef<CurdGroupFormSchema | null>) {
-  const stepList = computed<StepItem[]>(() => {
-    if (!groupSchema.value?.items) return []
-
-    const groups = new Map<string, StepItem>()
-
-    groupSchema.value.items.forEach((item) => {
-      const stepName = item.step || "其他"
-
-      if (!groups.has(stepName)) {
-        groups.set(stepName, {
-          name: stepName,
-          stepIndex: item.stepIndex,
-          schema: { items: [] }
-        })
-      }
-
-      groups.get(stepName)!.schema.items.push(item)
-    })
-
-    // 按 stepIndex 排序（undefined 排最后）
-    return Array.from(groups.values()).sort((a, b) => {
-      const indexA = a.stepIndex ?? Infinity
-      const indexB = b.stepIndex ?? Infinity
-      return indexA - indexB
-    })
-  })
-
-  const stepCount = computed(() => stepList.value.length)
-
-  const hasMultipleSteps = computed(() => stepList.value.length > 1)
-
-  return {
-    stepList,
-    stepCount,
-    hasMultipleSteps
-  }
-}

package/components/FormDialog/src/hooks/useStepNavigation.ts

@@ -1,74 +0,0 @@
-import { computed, ref, type Ref } from "vue"
-import type { CurdGroupForm } from "../../../CurdGroupForm"
-
-interface ValidateFunction {
-  validate: (callback: (valid: boolean) => void) => void
-}
-
-export function useStepNavigation(stepCount: Ref<number>, onStepChange?: (step: number) => void) {
-  const activeStep = ref(0)
-  const groupFormRef = ref<Record<number, InstanceType<typeof CurdGroupForm>>>({})
-
-  const canPrev = computed(() => activeStep.value > 0)
-  const canNext = computed(() => activeStep.value < stepCount.value - 1)
-  const isLastStep = computed(() => activeStep.value >= stepCount.value - 1)
-
-  const setStep = (newStep: number) => {
-    if (newStep >= 0 && newStep < stepCount.value) {
-      activeStep.value = newStep
-      onStepChange?.(newStep)
-    }
-  }
-
-  const prev = () => {
-    if (canPrev.value) {
-      setStep(activeStep.value - 1)
-    }
-  }
-
-  const next = (onValidateFail?: () => void) => {
-    if (!canNext.value) return false
-
-    const currentForm = groupFormRef.value[activeStep.value] as unknown as ValidateFunction | undefined
-    if (currentForm?.validate) {
-      currentForm.validate((valid: boolean) => {
-        if (valid) {
-          setStep(activeStep.value + 1)
-        } else if (onValidateFail) {
-          onValidateFail()
-        }
-      })
-    } else {
-      setStep(activeStep.value + 1)
-    }
-    return true
-  }
-
-  const validateCurrentStep = (callback: (valid: boolean) => void) => {
-    const currentForm = groupFormRef.value[activeStep.value] as unknown as ValidateFunction | undefined
-    if (currentForm?.validate) {
-      currentForm.validate(callback)
-    } else {
-      callback(true)
-    }
-  }
-
-  const validateCurrentStepAsync = (): Promise<boolean> => {
-    return new Promise((resolve) => {
-      validateCurrentStep((valid) => resolve(valid))
-    })
-  }
-
-  return {
-    activeStep,
-    groupFormRef,
-    canPrev,
-    canNext,
-    isLastStep,
-    setStep,
-    prev,
-    next,
-    validateCurrentStep,
-    validateCurrentStepAsync,
-  }
-}

package/components/FormDialog/src/index.ts

@@ -1,39 +0,0 @@
-// create-api.ts
-import { type App, createVNode, nextTick, render, type VNode } from "vue"
-import FormModal from "./FormDialog.vue"
-import type { FormDialogOptions } from "./types"
-let _app: App<Element>
-
-/**
- * 创建表单模态框
- */
-const FormDialog = {
-  show: (options: FormDialogOptions) => {
-    // 组件实例
-    let formModal: VNode | null
-    const container = document.createElement("div")
-    // 移除组件
-    const remove = () => {
-      formModal = null
-      render(null, container)
-      container.remove()
-    }
-    formModal = createVNode(FormModal, { ...options, remove })
-    // 使当前模态框继承App实例上下文
-    nextTick(() => {
-      if (_app && formModal) {
-        formModal.appContext = _app._instance?.appContext || _app._context || null
-      }
-      render(formModal, container)
-      document.body.appendChild(container)
-    })
-    return formModal
-  },
-  // 暴露一个插件 API
-  install: (app: App<Element>) => {
-    _app = app
-    app.config.globalProperties["$formDialog"] = FormDialog
-  },
-}
-export { FormDialog }
-export default FormDialog

package/components/FormDialog/src/types.ts

@@ -1,51 +0,0 @@
-import type { DialogProps, StepProps } from "element-plus"
-import type { Component, Ref } from "vue"
-import type { Fields, FormContext, FormSchema } from "../../CurdForm"
-import type { CurdGroupFormSchema } from "../../CurdGroupForm/types"
-import type { StepItem } from "./hooks/useStepList"
-
-export interface FormDialogState {
-  visible: boolean
-  confirmLoading: boolean
-}
-
-export type FormDialogHandleOk = (modelRef: Fields, state: FormDialogState) => void | boolean | Promise<void | boolean>
-
-export interface FormDialogOptions extends Partial<DialogProps> {
-  title?: string
-  width?: string | number
-  fields?: Fields
-  formSchema?: FormSchema
-  groupSchema?: CurdGroupFormSchema
-  handleOk?: FormDialogHandleOk
-  handleClose?: (e: "close" | "cancel") => void
-  setForm?: (form: Ref<Fields>) => void
-  stepProps?: Partial<StepProps & Fields>
-  extendContext?: Partial<FormContext>
-  confirmBtnText?: string
-  cancelBtnText?: string
-  stepComponent?: Component
-  footerComponent?: Component
-  mode?: "dialog" | "drawer"
-}
-
-export interface FormDialogContext {
-  form: Fields
-  state: FormDialogState
-  stepList: StepItem[]
-  activeStep: { value: number }
-  loadOptions: (prop: string, config?: unknown) => void
-  prev: () => void
-  next: () => void
-  goTo: (step: number) => void
-  close: () => void
-  handleOk: () => void
-  validateCurrentStep: (callback: (valid: boolean) => void) => void
-  canPrev: { value: boolean }
-  canNext: { value: boolean }
-  isLastStep: { value: boolean }
-  isGroupMode: { value: boolean }
-  isFormMode: { value: boolean }
-  confirmBtnTextLabel: { value: string }
-  cancelBtnTextLabel: { value: string }
-}

package/components/TableFilter/index.ts

@@ -1,6 +0,0 @@
-import { withInstall, type SFCWithInstall } from "../../utils"
-import Instance from "./src/TableFilter.vue"
-export const TableFilter: SFCWithInstall<typeof Instance> = withInstall("TableFilter", Instance)
-export * from "./types"
-
-export default TableFilter as SFCWithInstall<typeof Instance>

package/components/TableFilter/src/FilterExternal/FilterExternal.vue

@@ -1,121 +0,0 @@
-<template>
-  <CurdForm ref="formRef" v-model="query" inline class="filter-external" :form-schema="formSchema" v-bind="option?.formProps" :extend-context="props.extendContext" @change="onChange">
-    <template #defaultFilter>
-      <slot></slot>
-    </template>
-  </CurdForm>
-</template>
-<script lang="ts" setup>
-import { type PropType, inject, ref, watch } from "vue"
-import type { Fields, FormItem, FormSchema } from "../../../CurdForm"
-import CurdForm from "../../../CurdForm"
-import type { FilterOption, ListQuery, ParamsItem } from "../../types"
-const props = defineProps({
-  selectParams: {
-    type: Array as PropType<Array<ParamsItem>>,
-    default: () => {
-      return []
-    },
-  },
-  listQuery: {
-    type: Object as PropType<ListQuery>,
-    default: () => {
-      return {}
-    },
-  },
-  hasSlot: {
-    type: Boolean,
-    default: false,
-  },
-  extendContext: {
-    type: Object,
-    default: () => ({}),
-  },
-})
-const option = inject<FilterOption>("option")
-const query = ref<ListQuery>({})
-
-const formSchema = ref<FormSchema>({
-  formItem: [],
-})
-const init = () => {
-  // 特殊处理数组
-  const formItemLeft = props.selectParams.filter((a) => a.external === true || a.external === "left").sort((a, b) => parseInt(String(b.sortIndex || 0)) - parseInt(String(a.sortIndex || 0))) as FormItem[]
-  const formItemRight = props.selectParams.filter((a) => a.external === "right") as FormItem[]
-  const as = [...formItemLeft]
-  if (props.hasSlot) {
-    as.push({ prop: "defaultFilter", type: "defaultFilter" })
-  }
-  const formItem: FormItem[] = [...as, ...formItemRight]
-  formSchema.value.formItem = formItem
-  // const query = deepClone(query.value)
-  for (let i in formSchema.value.formItem) {
-    const item = formSchema.value.formItem[i] as ParamsItem
-    if (item.tableKey && props.listQuery[item.tableKey[0]]) {
-      const val1 = props.listQuery[item.tableKey[0]] as string
-      const val2 = props.listQuery[item.tableKey[1]] as string
-      query.value[item.prop] = [val1, val2]
-    }
-  }
-  const l = props.listQuery
-  for (let i in props.listQuery) {
-    const cur = formSchema.value.formItem.find((a) => a.prop == i)
-    if (cur) {
-      query.value[i] = l[i]
-    } else {
-      // const cur1 = formSchema.value.formItem.find((a) => a.tableKey && a.tableKey.includes(i))
-      // if (cur1 && cur1.tableKey) {
-      //   query[i] = [l[cur1.tableKey[0]], l[cur1.tableKey[1]]]
-      // }
-    }
-  }
-  // query.value = query
-}
-init()
-watch(
-  () => props.selectParams,
-  () => {
-    init()
-  },
-)
-
-const emit = defineEmits(["change"])
-watch(
-  () => query.value,
-  (val) => {
-    const l = props.listQuery
-    for (let i in val) {
-      const cur = formSchema.value.formItem.find((a) => a.prop == i) as ParamsItem
-      const valItem = val[i]
-      if (cur && cur.tableKey && Array.isArray(valItem)) {
-        l[cur.tableKey[0]] = valItem[0] || ""
-        l[cur.tableKey[1]] = valItem[1] || ""
-      } else {
-        l[i] = val[i]
-      }
-    }
-    //
-  },
-  { immediate: true, deep: true },
-)
-const onChange = (formModel: Fields, formItem: ParamsItem) => {
-  const l = props.listQuery
-  const val = formModel[formItem.prop]
-  if (formItem.tableKey && Array.isArray(val)) {
-    l[formItem.tableKey[0]] = val[0] || ""
-    l[formItem.tableKey[1]] = val[1] || ""
-  }
-  if (!formItem.tableKey) {
-    l[formItem.prop] = formModel[formItem.prop] as string
-  }
-  setTimeout(() => {
-    emit("change")
-  })
-}
-const formRef = ref()
-const loadOptions = (prop: string, option?: unknown) => {
-  return formRef.value.loadOptions(prop, option)
-}
-
-defineExpose({ loadOptions })
-</script>

package/components/TableFilter/src/FilterSearchBox.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="filter-search-box" :class="{ 'is-focus': state.isFocus }">
-    <FilterToggle v-model:index="currentIndex" :select-params="props.selectParams" />
-    <FilterItem ref="filterItemRef" :params-item="props.selectParams[currentIndex]" v-model="query" @search="confirm"></FilterItem>
-    <div class="filter-action">
-      <div class="search" @click="confirm">
-        <el-icon>
-          <Search />
-        </el-icon>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { Search } from "@element-plus/icons-vue"
-import { inject, type PropType, type Ref, ref, watch } from "vue"
-import * as I from "../types"
-import FilterItem from "./components/FilterItem.vue"
-import FilterToggle from "./components/FilterToggle.vue"
-
-const props = defineProps({
-  selectParams: {
-    type: Array as PropType<Array<I.ParamsItem>>,
-    default: () => {
-      return []
-    },
-  },
-  listQuery: {
-    type: Object as PropType<I.ListQuery>,
-    default: () => {
-      return {}
-    },
-  },
-})
-const emit = defineEmits(["search"])
-const currentIndex = ref(0)
-const filterItemRef = ref()
-const query = ref(props.listQuery)
-watch(
-  () => query.value,
-  () => {
-    const m = props.listQuery
-    for (let i in m) {
-      m[i] = query.value[i]
-    }
-  },
-)
-const confirm = () => {
-  const current = props.selectParams[currentIndex.value]
-  if (typeof current.type == "undefined" || current.type == "input") {
-    filterItemRef.value.setValue(props.selectParams[currentIndex.value].prop)
-  }
-  emit("search", props.selectParams[currentIndex.value])
-}
-
-const state = inject<Ref<I.State>>("state", ref({} as I.State))
-const setIndex = (i: number) => {
-  currentIndex.value = i
-  // filterItemRef.value.focus()
-}
-const loadOptions = (prop: string, config?: unknown) => {
-  return filterItemRef.value.loadOptions(prop, config)
-}
-defineExpose({ currentIndex, setIndex, loadOptions })
-</script>