ff-ui-plus 2.0.7

package/packages/components/input/src/index.vue

@@ -0,0 +1,225 @@
+<template>
+  <el-tooltip v-if="showTooltip" effect="dark" placement="bottom-start">
+    <template #content>
+      <div>{{ currencyFilter(modelValue) }}</div>
+      <div>{{ digitUppercase(modelValue) }}</div>
+    </template>
+    <el-input v-model="internalValue" v-bind="inputProps" @blur="handleBlur">
+      <template v-for="(_, name) in slots" :key="name" #[name]="data">
+        <slot :name="name" v-bind="data" />
+      </template>
+      <template v-if="showAppend" #append>
+        <span v-if="inputType === 'amount'">{{ appendTitleText }}</span>
+        <slot v-else name="append" />
+      </template>
+    </el-input>
+  </el-tooltip>
+  <el-input v-else v-model="internalValue" v-bind="inputProps" @blur="handleBlur">
+    <template v-for="(_, name) in slots" :key="name" #[name]="data">
+      <slot :name="name" v-bind="data" />
+    </template>
+    <template v-if="showAppend" #append>
+      <span v-if="inputType === 'amount'">{{ appendTitleText }}</span>
+      <slot v-else name="append" />
+    </template>
+  </el-input>
+</template>
+
+<script setup lang="ts">
+import { ElMessage } from "element-plus"
+import { computed, useSlots, useAttrs } from "vue"
+import { useLocale } from "@ff-ui-plus/hooks"
+import type { FFInputSelfProps as FFInputProps } from "./type"
+
+defineOptions({
+  name: "FInput"
+})
+
+const { t } = useLocale()
+const attrs = useAttrs()
+const props = withDefaults(defineProps<FFInputProps>(), {
+  modelValue: "",
+  placeholder: "",
+  decimalLimit: 2,
+  inputType: "text",
+  appendTitle: "",
+  showThousands: false,
+  isTip: false,
+  isShowErrorTip: false,
+  customErrorTip: ""
+})
+
+const emits = defineEmits<{
+  (e: "update:modelValue", value: string | number | null): void
+}>()
+
+const slots = useSlots()
+
+// 常量
+const REGEX = {
+  INTEGER: /^\d+$/,
+  PHONE: /^1[3456789]\d{9}$/,
+  ID_CARD: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
+  NUMBER: /((^[1-9]\d*)|^0)(\.\d+)?$/,
+  NUMBER_DECIMAL: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/
+} as const
+
+const CHINESE = {
+  DIGITS: ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"],
+  FRACTIONS: ["角", "分"],
+  UNITS: [
+    ["元", "万", "亿", "兆"],
+    ["", "拾", "佰", "仟"]
+  ]
+} as const
+
+// 计算属性
+const showTooltip = computed(() => props.isTip && !props.showThousands)
+const showAppend = computed(() => slots.append || props.inputType === "amount")
+const placeholderText = computed(() => props.placeholder || t("plus.input.placeholder"))
+const appendTitleText = computed(() => props.appendTitle || t("plus.input.appendTitle"))
+const inputProps = computed(() => ({
+  placeholder: placeholderText.value,
+  clearable: true,
+  ...attrs
+}))
+
+// 获取当前输入类型的正则表达式
+const getInputRegex = (): RegExp | null => {
+  if (props.inputType instanceof RegExp) {
+    return props.inputType
+  }
+  switch (props.inputType) {
+    case "integer":
+      return REGEX.INTEGER
+    case "phone":
+      return REGEX.PHONE
+    case "idCard":
+      return REGEX.ID_CARD
+    default:
+      return null
+  }
+}
+
+const internalValue = computed({
+  get() {
+    if (props.inputType === "integer" && props.modelValue != null) {
+      return typeof props.modelValue === "number" ? String(props.modelValue) : props.modelValue
+    }
+    return props.modelValue ?? ""
+  },
+  set(val: string | number | null) {
+    if (props.inputType === "integer") {
+      if (!val || val === "") {
+        emits("update:modelValue", null)
+      } else {
+        const str = String(val)
+        const regex = getInputRegex()
+        emits("update:modelValue", regex?.test(str) ? Number(str) : str)
+      }
+    } else {
+      emits("update:modelValue", val ?? "")
+    }
+  }
+})
+
+// 通用验证函数
+const validate = (value: string, pattern: RegExp, errorKey?: string): string | null => {
+  if (pattern.test(value)) return value
+  if (props.isShowErrorTip) {
+    const errorMsg =
+      props.customErrorTip || (errorKey ? t(errorKey) : t("plus.input.validateError"))
+    ElMessage.error(errorMsg)
+  }
+  return null
+}
+
+// 格式化函数
+const formatAmount = (value: number): string => {
+  if (!value) {
+    if (props.isShowErrorTip) {
+      const msg =
+        t("plus.input.format") +
+        (props.inputType === "amount" ? t("plus.input.amount") : t("plus.input.numbers"))
+      ElMessage.error(msg)
+    }
+    return ""
+  }
+  const fixed = value.toFixed(props.decimalLimit)
+  return props.showThousands ? fixed.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : fixed
+}
+
+const currencyFilter = (num: number | string | null, n = 2): string => {
+  if (!REGEX.NUMBER.test(String(num)) || (num == null && num !== 0)) return ""
+  const n2 = n > 0 && n <= 20 ? n : 2
+  const numStr = parseFloat(String(num).replace(/^\d\.-/g, "")).toFixed(n2)
+  const [int, dec] = numStr.split(".")
+  return `￥ ${int.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}.${dec}`
+}
+
+const digitUppercase = (num: number | string | null): string => {
+  if (!REGEX.NUMBER_DECIMAL.test(String(num))) return t("plus.input.digitUppercase")
+  const isNegative = Number(num) < 0
+  const absNum = Math.abs(Number(num))
+  let result = ""
+
+  // 小数部分
+  CHINESE.FRACTIONS.forEach((fraction, index) => {
+    const digit = Math.floor(absNum * 10 * Math.pow(10, index)) % 10
+    result += (CHINESE.DIGITS[digit] + fraction).replace(/零./, "")
+  })
+  result = result || "整"
+
+  // 整数部分
+  let integerPart = Math.floor(absNum)
+  for (let i = 0; i < CHINESE.UNITS[0].length && integerPart > 0; i++) {
+    let section = ""
+    for (let j = 0; j < CHINESE.UNITS[1].length && integerPart > 0; j++) {
+      section = CHINESE.DIGITS[integerPart % 10] + CHINESE.UNITS[1][j] + section
+      integerPart = Math.floor(integerPart / 10)
+    }
+    result = section.replace(/(零.)*零$/, "").replace(/^$/, "零") + CHINESE.UNITS[0][i] + result
+  }
+
+  return (
+    (isNegative ? "欠" : "") +
+    result
+      .replace(/(零.)*零元/, "元")
+      .replace(/(零.)+/g, "零")
+      .replace(/^整$/, "零元整")
+  )
+}
+
+// 失焦处理
+const handleBlur = (): void => {
+  const val = internalValue.value
+  let formatted: string | number | null = val
+
+  // 处理自定义正则
+  if (props.inputType instanceof RegExp) {
+    formatted = validate(String(val || ""), props.inputType) ?? ""
+    internalValue.value = formatted
+    return
+  }
+
+  switch (props.inputType) {
+    case "amount":
+    case "decimal":
+      formatted = formatAmount(Number(val))
+      break
+    case "phone":
+      formatted = validate(String(val || ""), REGEX.PHONE, "plus.input.validatePhone") ?? ""
+      break
+    case "integer": {
+      const result = validate(String(val || ""), REGEX.INTEGER, "plus.input.validateInteger")
+      formatted = result ? Number(result) : null
+      break
+    }
+    case "idCard":
+      formatted = validate(String(val || ""), REGEX.ID_CARD, "plus.input.validateIdCard") ?? ""
+      break
+  }
+
+  internalValue.value = formatted
+}
+</script>

package/packages/components/input/src/type.ts

@@ -0,0 +1,14 @@
+import type { InputProps } from "element-plus"
+import type { Mutable } from "element-plus/es/utils"
+export interface FFInputSelfProps {
+  modelValue: string | number | null
+  placeholder?: string
+  decimalLimit?: number
+  inputType?: "text" | "amount" | "decimal" | "phone" | "integer" | "idCard" | RegExp
+  appendTitle?: string
+  showThousands?: boolean
+  isTip?: boolean
+  isShowErrorTip?: boolean
+  customErrorTip?: string
+}
+export type FFInputProps = FFInputSelfProps & Partial<Mutable<InputProps>>

package/packages/components/input/style/css.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/t-input.css"

package/packages/components/input/style/index.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/src/input.scss"

package/packages/components/layout-page/index.ts

@@ -0,0 +1,4 @@
+import LayoutPage from "./src/index.vue"
+export type { TLayoutPageProps } from "./src/index.vue"
+
+export const TLayoutPage = LayoutPage

package/packages/components/layout-page/src/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    ref="TLayoutPageRef"
+    class="t_layout_page"
+    :class="{ layout_page_no_margin: isNoMargin }"
+    @scroll="(e:any) => scrollTop = e.target.scrollTop"
+  >
+    <slot />
+    <div class="back_to_top" v-if="showGoTopButton">
+      <div v-if="isShowGoTopButton" @click="backToTop">
+        <el-icon v-bind="{ size: 24, ...$attrs }"><CaretTop /></el-icon>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { onActivated, onMounted, ref, watch } from "vue"
+import { CaretTop } from "@element-plus/icons-vue"
+defineOptions({
+  name: "TLayoutPage"
+})
+export interface TLayoutPageProps {
+  keepScrollDisabled?: boolean
+  isNoMargin?: boolean
+  showGoTopButton?: boolean
+  scrollToTop?: number
+}
+
+const props = withDefaults(defineProps<TLayoutPageProps>(), {
+  keepScrollDisabled: false,
+  isNoMargin: false,
+  showGoTopButton: true,
+  scrollToTop: 100
+})
+const isShowGoTopButton = ref(false)
+
+const TLayoutPageRef = ref(null)
+const scrollTop = ref(0)
+watch(
+  () => scrollTop.value,
+  newVal => {
+    if (newVal > props.scrollToTop) {
+      isShowGoTopButton.value = true
+    } else {
+      isShowGoTopButton.value = false
+    }
+  }
+)
+const backToTop = () => {
+  scrollTop.value = 0
+  ;(TLayoutPageRef.value as any).scrollTo({
+    top: 0,
+    behavior: "smooth"
+  })
+}
+onMounted(() => {
+  const pageItems = (TLayoutPageRef.value as any).querySelectorAll(".t_layout_page_item")
+  if (pageItems.length === 2) {
+    pageItems[0].style.marginBottom = "8px"
+  }
+  if (pageItems.length > 2) {
+    pageItems.forEach((item: any) => {
+      item.style.marginBottom = "8px"
+    })
+    pageItems[pageItems.length - 1].style.marginBottom = "0"
+  }
+})
+
+onActivated(() => {
+  if (!props.keepScrollDisabled) {
+    ;(TLayoutPageRef.value as any).scrollTop = scrollTop
+  }
+})
+</script>

package/packages/components/layout-page/style/css.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/t-layout-page.css"

package/packages/components/layout-page/style/index.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/src/layout-page.scss"

package/packages/components/layout-page-item/index.ts

@@ -0,0 +1,3 @@
+import LayoutPageItem from "./src/index.vue"
+
+export const TLayoutPageItem = LayoutPageItem

package/packages/components/layout-page-item/src/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <section class="t_layout_page_item" :class="{ page_item_no_margin: isNoMargin }">
+    <slot />
+  </section>
+</template>
+<script setup lang="ts" name="TLayoutPageItem">
+defineOptions({
+  name: "TLayoutPageItem"
+})
+defineProps({
+  isNoMargin: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>

package/packages/components/layout-page-item/style/css.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/t-layout-page-item.css"

package/packages/components/layout-page-item/style/index.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/src/layout-page-item.scss"

package/packages/components/module-form/index.ts

@@ -0,0 +1,4 @@
+import ModuleForm from "./src/index.vue"
+export * from "./src/type"
+
+export const TModuleForm = ModuleForm

package/packages/components/module-form/src/index.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="t_module_form" :style="{ marginBottom: footer !== null ? '60px' : '' }">
+    <div class="scroll_wrap">
+      <!-- 头部 -->
+      <el-page-header
+        v-if="!isShowHeader && (title || titleSlot)"
+        :title="title"
+        :class="{
+          noContent: !subTitle,
+          isShowBack: isShowBack
+        }"
+        @back="back"
+      >
+        <template v-if="titleSlot" #title>
+          <slot name="title" />
+        </template>
+        <template #content>
+          <div class="sub_title">{{ subTitle }}</div>
+          <div class="extra">
+            <slot name="extra" />
+          </div>
+        </template>
+      </el-page-header>
+      <!-- 表单页面 -->
+      <module-form v-if="handleType === 'edit'" v-bind="$attrs" ref="tForm">
+        <template v-for="(_index, name) in slots" #[name]="data">
+          <slot :name="name" v-bind="data" />
+        </template>
+      </module-form>
+      <!-- 详情页面 -->
+      <module-detail v-else v-bind="$attrs">
+        <template v-for="(_index, name) in slots" #[name]="data">
+          <slot :name="name" v-bind="data" />
+        </template>
+      </module-detail>
+      <!-- tabs -->
+      <div
+        v-if="tabs.length"
+        class="tabs"
+        :style="{ 'margin-top': isTabMargin ? `${tabMarginNum}px` : 0 }"
+      >
+        <el-tabs v-if="tabs && tabs.length > 1" v-model="activeName" @tab-change="tabsChange">
+          <el-tab-pane v-for="tab in tabs" :key="tab.key" :name="tab.key" :label="tab.title">
+            <slot :name="tab.key" />
+          </el-tab-pane>
+        </el-tabs>
+        <slot v-else :name="tabs && tabs[0].key" />
+      </div>
+      <slot name="default" />
+    </div>
+    <!-- 按钮 -->
+    <footer v-if="footer !== null" class="handle_wrap">
+      <slot name="footer" />
+      <div v-if="!slots.footer">
+        <el-button v-bind="cancelAttrs" @click="back">{{ cancelAttrs.btnTxt }}</el-button>
+        <el-button
+          v-if="handleType === 'edit'"
+          v-bind="saveAttrs"
+          :loading="loading"
+          @click="saveHandle"
+          >{{ saveAttrs.btnTxt }}</el-button
+        >
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs, useSlots, computed } from "vue"
+import ModuleDetail from "@ff-ui-plus/components/module-form/src/moduleDetail.vue"
+import ModuleForm from "@ff-ui-plus/components/module-form/src/moduleForm.vue"
+import { useLocale } from "@ff-ui-plus/hooks"
+import type { TModuleFormProps } from "./type"
+defineOptions({
+  name: "TModuleForm"
+})
+
+const props = withDefaults(defineProps<TModuleFormProps>(), {
+  handleType: "edit",
+  isShowHeader: false,
+  titleSlot: false,
+  isShowBack: false,
+  isGoBackEvent: false,
+  btnSaveBind: () => ({}),
+  btnCancelBind: () => ({}),
+  isTabMargin: false,
+  tabMarginNum: 10,
+  title: "",
+  subTitle: "",
+  tabs: () => [],
+  submit: async () => false
+})
+const { t } = useLocale()
+const attrs = useAttrs() as Record<string, any>
+const slots = useSlots()
+const activeName = ref(props.tabs && props.tabs[0]?.key)
+const loading = ref(false)
+// 保存按钮配置
+const saveAttrs = computed(() => {
+  return {
+    type: "primary" as
+      | "primary"
+      | "default"
+      | "success"
+      | "warning"
+      | "danger"
+      | "info"
+      | "text"
+      | "",
+    btnTxt: t("plus.moduleForm.save"),
+    ...props.btnSaveBind
+  }
+})
+// 取消按钮配置
+const cancelAttrs = computed(() => {
+  return { btnTxt: t("plus.moduleForm.back"), ...props.btnCancelBind }
+})
+// 获取ref
+const tForm: any = ref<HTMLElement | null>(null)
+
+// 抛出事件
+const emits = defineEmits(["validateError", "back", "tabsChange"])
+// 点击保存
+const saveHandle = async () => {
+  return new Promise(async (resolve: any, reject: any) => {
+    const form: Record<string, any> = {}
+    const formError: Record<string, any> = {}
+    const formOpts: Record<string, any> = {}
+    let successLength = 0
+    loading.value = true
+    try {
+      // 过滤非插槽表单
+      Object.keys(attrs.formOpts).forEach(key => {
+        if (attrs.formOpts[key].opts) {
+          formOpts[key] = attrs.formOpts[key]
+        }
+      })
+      // 校验表单
+      for (const formIndex of Object.keys(formOpts)) {
+        const { valid } = await tForm.value.getChildRef(formIndex).selfValidate()
+        if (valid) {
+          successLength = successLength + 1
+          form[formIndex] = attrs.formOpts[formIndex].opts.formData
+        }
+      }
+      if (successLength === Object.keys(formOpts).length) {
+        // 所有表单都校验成功
+        const isSuccess = await props.submit(form)
+        resolve({ valid: true, formData: form }) // 返回表单数据
+        if (isSuccess) {
+          // 成功
+          back()
+        }
+      } else {
+        // 校验失败抛出事件
+        Object.keys(formOpts).forEach(key => {
+          if (Object.keys(form).length > 0) {
+            Object.keys(form).map(val => {
+              if (key !== val) {
+                formError[key] = formOpts[key]
+              }
+            })
+          } else {
+            formError[key] = formOpts[key]
+          }
+        })
+        reject({ valid: false, error: formError }) // 返回校验失败信息
+        emits("validateError", formError)
+      }
+    } catch (error) {
+      // 捕获异常并抛出校验失败事件
+      emits("validateError", { error })
+      reject({ valid: false, error })
+    } finally {
+      loading.value = false
+    }
+  })
+}
+// 点击头部返回或者取消
+const back = () => {
+  if (props.isShowBack) {
+    return
+  }
+  emits("back")
+  if (!props.isGoBackEvent) {
+    history.go(-1)
+  }
+}
+// 获取默认选中tab
+const setSelectedTab = (key: any) => {
+  activeName.value = key
+}
+// 切换tab
+const tabsChange = (tab: any) => {
+  emits("tabsChange", tab)
+}
+// 清空表单
+const resetFormFields = () => {
+  const formOpts: Record<string, any> = {}
+  // 过滤非插槽表单
+  Object.keys(attrs.formOpts).forEach(key => {
+    if (attrs.formOpts[key].opts) {
+      formOpts[key] = attrs.formOpts[key]
+    }
+  })
+  Object.keys(formOpts).forEach(formIndex => {
+    tForm.value.getChildRef(formIndex).resetFields()
+  })
+}
+// 清空校验规则
+const clearValidate = () => {
+  const formOpts: Record<string, any> = {}
+  // 过滤非插槽表单
+  Object.keys(attrs.formOpts).forEach(key => {
+    if (attrs.formOpts[key].opts) {
+      formOpts[key] = attrs.formOpts[key]
+    }
+  })
+  Object.keys(formOpts).forEach(formIndex => {
+    tForm.value.getChildRef(formIndex).clearValidate()
+  })
+}
+const updateFormFields = () => {
+  const formOpts: Record<string, any> = {}
+  // 过滤非插槽表单
+  Object.keys(attrs.formOpts).forEach(key => {
+    if (attrs.formOpts[key].opts) {
+      formOpts[key] = attrs.formOpts[key]
+    }
+  })
+  Object.keys(formOpts).forEach(formIndex => {
+    tForm.value.getChildRef(formIndex).updateFields(false)
+  })
+}
+// 暴露方法出去
+defineExpose({
+  clearValidate,
+  resetFormFields,
+  updateFormFields,
+  setSelectedTab,
+  saveHandle
+})
+</script>

package/packages/components/module-form/src/moduleDetail.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="t_detail">
+    <el-collapse v-model="defaultActiveKey">
+      <el-collapse-item
+        v-for="(val, index) in descData"
+        :class="{
+          noTitle: !val.title,
+          disabledStyle: val.disabled,
+          title_bold: titleBold
+        }"
+        :key="index"
+        :name="val.name"
+        :disabled="val.disabled"
+      >
+        <template #title>
+          {{ val.title }}
+          <div class="t_btn" v-if="val.btn">
+            <slot :name="val.btn"></slot>
+          </div>
+        </template>
+        <template v-if="val.slotName">
+          <slot :name="val.slotName"></slot>
+        </template>
+        <t-detail :descData="val.data" v-bind="attrs">
+          <template v-for="(_index, name) in slots" v-slot:[name]="data">
+            <slot :name="name" v-bind="data"></slot>
+          </template>
+        </t-detail>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, useSlots } from "vue"
+defineOptions({
+  name: "ModuleDetail"
+})
+const props: any = defineProps({
+  descData: {
+    type: Object,
+    default: () => ({})
+  },
+  // 是否Title文字加粗
+  titleBold: {
+    type: Boolean,
+    default: false
+  }
+})
+const slots = useSlots()
+const attrs: any = useAttrs()
+const defaultActiveKey = computed({
+  get() {
+    // console.log(333, Object.keys(props.descData))
+    return Object.keys(props.descData)
+  },
+  set(val) {
+    return val
+  }
+})
+</script>