ff-ui-plus 2.0.7

package/packages/components/date-picker/src/index.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="t-date-picker" ref="DatePicker">
+    <el-date-picker
+      :type="type"
+      v-model="time"
+      :shortcuts="state.dateOptions"
+      @change="dateChange"
+      v-bind="attrsBind"
+    >
+      <template v-for="(_index, name) in slots" v-slot:[name]="data">
+        <slot :name="name" v-bind="data"></slot>
+      </template>
+    </el-date-picker>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, useSlots, watch, reactive, ref } from "vue"
+import type { TDatePickerSelfProps as TDatePickerProps } from "./type"
+import { useLocale } from "@ff-ui-plus/hooks"
+defineOptions({
+  name: "TDatePicker"
+})
+
+const props = withDefaults(defineProps<TDatePickerProps>(), {
+  plusTime: false,
+  type: "date",
+  isPickerOptions: false
+})
+
+const emits = defineEmits<{
+  (e: "update:modelValue", val: any): void
+  (e: "change", val: any): void
+}>()
+const { t } = useLocale()
+const attrs = useAttrs() as Record<string, any>
+const slots = useSlots()
+
+// vue3 v-model简写
+let time = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emits("update:modelValue", val)
+  }
+})
+
+const DatePicker = ref()
+
+const attrsBind = computed(() => {
+  const baseAttrs = {
+    date: { "value-format": "YYYY-MM-DD", placeholder: t("plus.datepicker.date") },
+    dates: { "value-format": "YYYY-MM-DD", placeholder: t("plus.datepicker.dates") },
+    week: { format: "YYYY 第 ww 周", placeholder: t("plus.datepicker.week") },
+    month: {
+      "value-format": "YYYY-MM",
+      format: "YYYY-MM",
+      placeholder: t("plus.datepicker.month")
+    },
+    months: {
+      "value-format": "YYYY-MM",
+      format: "YYYY-MM",
+      placeholder: t("plus.datepicker.months")
+    },
+    year: { "value-format": "YYYY", format: "YYYY", placeholder: t("plus.datepicker.year") },
+    years: { "value-format": "YYYY", format: "YYYY", placeholder: t("plus.datepicker.years") },
+    daterange: {
+      "value-format": "YYYY-MM-DD",
+      "range-separator": "~",
+      "start-placeholder": t("plus.datepicker.startDatePlaceholder"),
+      "end-placeholder": t("plus.datepicker.endDatePlaceholder")
+    },
+    monthrange: {
+      "value-format": "YYYY-MM",
+      "range-separator": "~",
+      "start-placeholder": t("plus.datepicker.startMonthPlaceholder"),
+      "end-placeholder": t("plus.datepicker.endMonthPlaceholder")
+    },
+    datetime: {
+      format: "YYYY-MM-DD HH:mm:ss",
+      "value-format": "YYYY-MM-DD HH:mm:ss",
+      placeholder: t("plus.datepicker.datetime")
+    },
+    datetimerange: {
+      format: "YYYY-MM-DD HH:mm:ss",
+      "value-format": "YYYY-MM-DD HH:mm:ss",
+      "range-separator": "~",
+      "start-placeholder": t("plus.datepicker.startTimePlaceholder"),
+      "end-placeholder": t("plus.datepicker.endTimePlaceholder")
+    }
+  }
+  const typeAttrs = baseAttrs[props.type] || {}
+  return {
+    ...typeAttrs,
+    ...attrs
+  }
+})
+
+const state = reactive({
+  dateOptions: props.shortcuts
+})
+
+// 获取快捷配置
+const getShortcuts = (type: string) => {
+  const shortcuts = {
+    date: [
+      { text: t("plus.datepicker.shortcutsDate.today"), value: new Date() },
+      {
+        text: t("plus.datepicker.shortcutsDate.yesterday"),
+        value: () => subtractDays(new Date(), 1)
+      },
+      {
+        text: t("plus.datepicker.shortcutsDate.lastWeek"),
+        value: () => subtractDays(new Date(), 7)
+      }
+    ],
+    daterange: [
+      {
+        text: t("plus.datepicker.shortcutsDaterange.pastWeek"),
+        value: () => [subtractDays(new Date(), 7), new Date()]
+      },
+      {
+        text: t("plus.datepicker.shortcutsDaterange.pastMonth"),
+        value: () => [subtractDays(new Date(), 30), new Date()]
+      },
+      {
+        text: t("plus.datepicker.shortcutsDaterange.pastThreeMonths"),
+        value: () => [subtractDays(new Date(), 90), new Date()]
+      }
+    ],
+    monthrange: [
+      { text: t("plus.datepicker.shortcutsMonthrange.thisMonth"), value: [new Date(), new Date()] },
+      {
+        text: t("plus.datepicker.shortcutsMonthrange.thisYear"),
+        value: () => [new Date(new Date().getFullYear(), 0), new Date()]
+      },
+      {
+        text: t("plus.datepicker.shortcutsMonthrange.pastSixMonths"),
+        value: () => [subtractMonths(new Date(), 6), new Date()]
+      }
+    ],
+    datetime: [
+      { text: t("plus.datepicker.shortcutsDatetime.today"), value: new Date() },
+      {
+        text: t("plus.datepicker.shortcutsDatetime.yesterday"),
+        value: () => subtractDays(new Date(), 1)
+      },
+      {
+        text: t("plus.datepicker.shortcutsDatetime.lastWeek"),
+        value: () => subtractDays(new Date(), 7)
+      }
+    ],
+    datetimerange: [
+      {
+        text: t("plus.datepicker.shortcutsDatetimerange.pastWeek"),
+        value: () => [subtractDays(new Date(), 7), new Date()]
+      },
+      {
+        text: t("plus.datepicker.shortcutsDatetimerange.pastMonth"),
+        value: () => [subtractDays(new Date(), 30), new Date()]
+      },
+      {
+        text: t("plus.datepicker.shortcutsDatetimerange.pastThreeMonths"),
+        value: () => [subtractDays(new Date(), 90), new Date()]
+      }
+    ]
+  }
+
+  return shortcuts[type] || []
+}
+
+const subtractDays = (date: Date, days: number) => {
+  const newDate = new Date(date)
+  newDate.setDate(newDate.getDate() - days)
+  return newDate
+}
+
+const subtractMonths = (date: Date, months: number) => {
+  const newDate = new Date(date)
+  newDate.setMonth(newDate.getMonth() - months)
+  return newDate
+}
+
+const dateChange = (val: any[]) => {
+  if (props.type === "daterange" && val) {
+    let [startTime, endTime] = val
+    if (props.plusTime) {
+      startTime += " 00:00:00"
+      endTime += " 23:59:59"
+    }
+    time.value = [startTime, endTime]
+    emits("change", [startTime, endTime])
+    DatePicker.value.getElementsByClassName("el-range-input")[0]?.blur()
+    DatePicker.value.getElementsByClassName("el-range-input")[1]?.blur()
+  } else {
+    emits("change", val)
+    if (props.type.includes("range")) {
+      DatePicker.value.getElementsByClassName("el-range-input")[0]?.blur()
+      DatePicker.value.getElementsByClassName("el-range-input")[1]?.blur()
+    } else {
+      DatePicker.value.getElementsByClassName("el-input__inner")[0]?.blur()
+    }
+  }
+}
+
+if (props.isPickerOptions) {
+  state.dateOptions = getShortcuts(props.type)
+}
+
+watch(
+  () => props.shortcuts,
+  val => {
+    if (props.isPickerOptions) {
+      state.dateOptions = getShortcuts(props.type)
+    } else {
+      state.dateOptions = val
+    }
+  },
+  { deep: true }
+)
+// 监听时间变化
+const clear = () => {
+  emits("update:modelValue", null)
+}
+// 暴露方法出去
+defineExpose({ state, clear })
+</script>

package/packages/components/date-picker/src/type.ts

@@ -0,0 +1,22 @@
+import type { DatePickerProps } from "element-plus"
+import type { Mutable } from "element-plus/es/utils"
+export interface TDatePickerSelfProps {
+  modelValue: string | Date | Array<string | Date> | undefined
+  plusTime?: boolean
+  type?:
+    | "date"
+    | "week"
+    | "month"
+    | "year"
+    | "dates"
+    | "months"
+    | "years"
+    | "daterange"
+    | "monthrange"
+    | "datetime"
+    | "datetimerange"
+  shortcuts?: any[]
+  isPickerOptions?: boolean
+}
+
+export type TDatePickerProps = TDatePickerSelfProps & Partial<Mutable<DatePickerProps>>

package/packages/components/date-picker/style/css.ts

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

package/packages/components/date-picker/style/index.ts

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

package/packages/components/detail/index.ts

@@ -0,0 +1,5 @@
+import Detail from "./src/index.vue"
+
+export * from "./src/type"
+
+export const TDetail = Detail

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

@@ -0,0 +1,102 @@
+<template>
+  <el-descriptions class="t_detail" v-bind="$attrs" :column="descColumn">
+    <el-descriptions-item
+      v-for="(item, key) in descData"
+      :key="key"
+      :span="item.span || 1"
+      v-bind="{ ...item.bind, ...$attrs }"
+    >
+      <template #label>
+        <render-label v-if="item.labelRender" :render="item.labelRender" :item="item" />
+        <span v-else :style="{ fontWeight: isLabelBold ? 'bold' : '' }"
+          >{{ item.label }}<span v-if="isColon">：</span></span
+        >
+      </template>
+      <template v-if="item.slotName">
+        <slot :name="item.slotName"></slot>
+      </template>
+      <span class="tip_class" v-else>
+        <el-tooltip v-bind="$attrs" v-if="item.tooltip" :placement="item.placement || 'bottom'">
+          <span>
+            <span v-if="item.filters && item.filters.list">
+              {{
+                constantEscape(
+                  item.fieldName ? dataList[item.fieldName] : undefined,
+                  listTypeInfo[item.filters.list],
+                  item.filters.key || "value",
+                  item.filters.label || "label"
+                )
+              }}
+            </span>
+            <span v-else
+              >{{ item.value }}<span v-if="item.unit && item.value">{{ item.unit }}</span></span
+            >
+            <el-icon
+              :size="item.iconSize"
+              :color="item.iconColor"
+              style="cursor: pointer; margin-left: 2px; top: 1px"
+            >
+              <Warning />
+            </el-icon>
+          </span>
+          <template #content v-if="item.tooltip">
+            <span v-if="typeof item.tooltip === 'string'">{{ item.tooltip }}</span>
+            <template v-else-if="typeof item.tooltip === 'function'">
+              <render-tooltip :render="item.tooltip" :item="item" />
+            </template>
+          </template>
+        </el-tooltip>
+        <span v-else>
+          <span v-if="item.filters && item.filters.list">
+            {{
+              constantEscape(
+                item.fieldName ? dataList[item.fieldName] : undefined,
+                listTypeInfo[item.filters.list],
+                item.filters.key || "value",
+                item.filters.label || "label"
+              )
+            }}
+          </span>
+          <span v-else
+            >{{ item.value }}<span v-if="item.unit && item.value">{{ item.unit }}</span></span
+          >
+        </span>
+      </span>
+    </el-descriptions-item>
+  </el-descriptions>
+</template>
+
+<script setup lang="ts">
+import RenderTooltip from "./renderTooltip.vue"
+import RenderLabel from "./renderLabel.vue"
+import { Warning } from "@element-plus/icons-vue"
+import type { TDetailProps } from "./type"
+defineOptions({
+  name: "TDetail"
+})
+
+withDefaults(defineProps<TDetailProps>(), {
+  descColumn: 4,
+  dataList: () => ({}),
+  listTypeInfo: () => ({}),
+  descData: () => [],
+  isColon: true,
+  isLabelBold: true
+})
+/**
+ * 下拉数据回显中文过滤器
+ * @param [String,Number] value 需要转中文的key值
+ * @param {String} list  数据源
+ * @param [String,Number] key  数据源的key字段（默认：value）
+ * @param {String} label  数据源的label字段（默认：label）
+ */
+const constantEscape = (
+  value: any,
+  list: any[],
+  key: string = "value",
+  label: string = "label"
+): string | undefined => {
+  const res = list.find(item => item[key] === value)
+  return res?.[label]
+}
+</script>

package/packages/components/detail/src/renderLabel.vue

@@ -0,0 +1,15 @@
+<template>
+  <component :is="renderComponent" />
+</template>
+<script lang="ts" setup>
+defineOptions({
+  name: "RenderLabel"
+})
+const props: any = defineProps({
+  render: Function,
+  item: Object
+})
+const renderComponent = () => {
+  return props.render(props?.item)
+}
+</script>

package/packages/components/detail/src/renderTooltip.vue

@@ -0,0 +1,15 @@
+<template>
+  <component :is="renderComponent" />
+</template>
+<script lang="ts" setup>
+defineOptions({
+  name: "RenderTooltip"
+})
+const props: any = defineProps({
+  render: Function,
+  item: Object
+})
+const renderComponent = () => {
+  return props.render(props?.item)
+}
+</script>

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

@@ -0,0 +1,28 @@
+export interface DescItem {
+  span?: number
+  bind?: Record<string, any>
+  label?: string
+  labelRender?: (item: any) => any
+  slotName?: string
+  tooltip?: string | ((item: any) => any)
+  placement?: string
+  filters?: {
+    list: string
+    key?: string
+    label?: string
+  }
+  value?: string | number
+  unit?: string
+  iconSize?: number
+  iconColor?: string
+  fieldName?: string
+}
+
+export interface TDetailProps {
+  descColumn?: number
+  dataList?: Record<string, any>
+  listTypeInfo?: Record<string, any>
+  descData: DescItem[]
+  isColon?: boolean
+  isLabelBold?: boolean
+}

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

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

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

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

package/packages/components/form/index.ts

@@ -0,0 +1,5 @@
+import Form from "./src/index.vue"
+
+export * from "./src/type"
+
+export const TForm = Form