easybill-ui 1.4.0 → 1.4.2

package/components/CurdTable/src/STableDetail.vue

@@ -1,52 +0,0 @@
-<template>
-  <el-drawer v-model="visible" :title="t('el.table.detail')" size="40%">
-    <DetailInfo :data="list" :title="t('el.table.detail')" label-width="110px" show-type="table" />
-  </el-drawer>
-</template>
-<script lang="ts" setup>
-import { ref, type Ref } from "vue"
-import { useLocale } from "easybill-ui"
-import DetailInfo, { type DetailDataItem } from "../../DetailInfo"
-import type { ColumnItem } from "./types"
-interface OpenOption {
-  columns: Array<ColumnItem>
-  data: Record<string, unknown>
-}
-
-const { t } = useLocale()
-const visible = ref(false)
-const list: Ref<Array<DetailDataItem>> = ref([])
-const getValue = (data: DetailDataItem, column: ColumnItem, index: number) => {
-  if (column.formatter) {
-    return column.formatter(data, column, data[column.prop], index)
-  }
-  return typeof data[column.prop] == "undefined" || data[column.prop] === "" ? "--" : data[column.prop]
-}
-const open = (option: OpenOption) => {
-  list.value = []
-  option.columns.forEach((item, ci) => {
-    if (item.children && item.children.length) {
-      for (let i = 0; i < item.children.length; i++) {
-        const a = item.children[i]
-        if (a.hidden) continue
-        list.value.push({
-          label: a.label,
-          value: getValue(option.data, a, i),
-          span: (a.detail && a.detail.span) || 24,
-          options: a.options,
-        })
-      }
-    } else {
-      if (item.hidden) return
-      list.value.push({
-        label: item.label,
-        value: getValue(option.data, item, ci),
-        span: (item.detail && item.detail.span) || 24,
-        options: item.options,
-      })
-    }
-  })
-  visible.value = true
-}
-defineExpose({ open })
-</script>

package/components/CurdTable/src/STableFilter.vue

@@ -1,50 +0,0 @@
-<template>
-  <div class="s-table-filter">
-    <TableFilter ref="tableFilterRef" :select-params="selectParams" :list-query="props.listQuery" v-bind="option?.filterAttrs" @search="onSearch"></TableFilter>
-  </div>
-</template>
-<script lang="ts" setup>
-import { inject, type PropType, type Ref, ref } from "vue"
-import TableFilter, { type FilterItem, type ListQuery, type ParamsItem } from "../../TableFilter"
-import type { PropOption } from "./types"
-
-const emits = defineEmits(["search"])
-const option = inject<PropOption>("option")
-const selectParams = inject<Ref<Array<ParamsItem>>>("selectParams") || ref([])
-const props = defineProps({
-  listQuery: {
-    type: Object as PropType<ListQuery>,
-    default() {
-      return {}
-    },
-  },
-})
-const onSearch = () => {
-  emits("search", props.listQuery)
-}
-const tableFilterRef = ref()
-const setItem = (prop: string, filterItem?: FilterItem) => {
-  tableFilterRef.value.setItem(prop, filterItem)
-}
-const getSelectList = () => {
-  return tableFilterRef.value.selectList
-}
-const loadOptions = (prop: string, config?: unknown) => {
-  return tableFilterRef.value.loadOptions(prop, config)
-}
-const clear = (prop: string) => {
-  return tableFilterRef.value.clear(prop)
-}
-// 刷新selectParams
-const refreshSelectParams = () => {
-  tableFilterRef.value.refreshSelectParams()
-}
-// 获取当前tableFilter的prop
-const getCurrentTableFilterProp = () => {
-  const currentIndex = tableFilterRef.value.getCurrentIndex()
-  if (currentIndex !== undefined) {
-    return selectParams.value[tableFilterRef.value.getCurrentIndex()].prop
-  }
-}
-defineExpose({ filterRef: tableFilterRef, setItem, getSelectList, loadOptions, clear, refreshSelectParams, getCurrentTableFilterProp })
-</script>

package/components/CurdTable/src/STableItem.vue

@@ -1,119 +0,0 @@
-<template>
-  <el-table-column v-if="!getColumnHidden" :fixed="props.schema.fixed" v-bind="getColumnAttrs">
-    <template #header="scope">
-      <div class="header-td" :class="[props.schema.align]">
-        <slot :name="props.schema.prop + 'Header'" v-bind="scope"></slot>
-        <component v-if="props.schema.headerComponent" :is="props.schema.headerComponent" v-bind="scope" />
-        <STableItemHeader v-else-if="!props.isSlotHeader" :schema-item="props.schema" />
-        <STableItemFilter v-if="props.schema.filter && props.schema.filter.inner" ref="tableItemFilterRef" :filter="filterSchema" @change="onChange" />
-      </div>
-    </template>
-    <template #default="scope">
-      <slot :name="props.schema.prop" v-bind="scope"></slot>
-      <template v-if="props.schema.children?.length">
-        <template v-for="item in props.schema.children" :key="item.label">
-          <STableItem :ref="(el) => (tableItemRefs[item.prop] = el)" :schema="item" :is-slot="!!$slots[item.prop]" :is-slot-header="!!$slots[item.prop + 'Header']" :option="option" @search="onItemChange">
-            <template v-for="(_slot, key) in $slots" :key="key" #[key]="scopeChild">
-              <slot :name="key" v-bind="normalizeSlotScope(scopeChild)"></slot>
-            </template>
-          </STableItem>
-        </template>
-      </template>
-      <template v-if="!props.isSlot">
-        <ConstantStatus v-if="props.schema.options" :value="scope.row[props.schema.prop]" :options="props.schema.options" />
-        <span v-else-if="props.schema.copy">
-          <el-icon class="copy" :title="t('el.table.clickCopy')" @click.stop="copyValue(getValue(scope.row))"><CopyDocument /></el-icon>
-          <span v-if="props.schema.vHtml" v-html="getValue(scope.row)"></span>
-          <template v-else-if="props.schema.formatter"> <STableItemFormatter :row="scope.row" :index="scope.index" :schema="props.schema" /> </template>
-          <template v-else>{{ getValue(scope.row) }}</template>
-        </span>
-        <span v-else>
-          <span v-if="props.schema.vHtml" v-html="getValue(scope.row)"></span>
-          <template v-else-if="props.schema.formatter">
-            <STableItemFormatter :row="scope.row" :index="scope.index" :schema="props.schema" />
-          </template>
-          <template v-else>{{ getValue(scope.row) }}</template>
-        </span>
-      </template>
-    </template>
-  </el-table-column>
-</template>
-<script lang="ts" setup>
-import { CopyDocument } from "@element-plus/icons-vue"
-import { useLocale } from "easybill-ui"
-import { ElMessage } from "element-plus"
-import { computed, inject, type PropType, ref, type Ref } from "vue"
-import ConstantStatus from "../../ConstantStatus"
-import type { Fields } from "../../CurdForm"
-import type { ParamsItem } from "../../TableFilter"
-import { copy } from "../utils/common"
-import STableItemFilter from "./STableItemFilter.vue"
-import STableItemFormatter from "./STableItemFormatter.vue"
-import STableItemHeader from "./STableItemHeader.vue"
-import type { ColumnItem } from "./types"
-const { t } = useLocale()
-
-const props = defineProps({
-  schema: {
-    type: Object as PropType<ColumnItem<Record<string, unknown>>>,
-    default() {
-      return { options: [] }
-    },
-  },
-  isSlot: {
-    type: Boolean,
-    default: false,
-  },
-  isSlotHeader: {
-    type: Boolean,
-    default: false,
-  },
-  option: {
-    type: Object,
-    default: () => ({}),
-  },
-})
-defineSlots<Record<string, (scope: Record<string, unknown>) => unknown>>()
-const selectParams = inject<Ref<Array<ParamsItem>>>("selectParams")
-const filterSchema = computed(() => {
-  let result = selectParams?.value.filter((a) => a.prop == props.schema.filter?.prop || a.prop == props.schema.prop) //getFilterFromColumn(props.schema)
-  if (result && result.length > 1) {
-    result = result?.filter((a) => a.label == props.schema.label)
-  }
-  return (result && result[0]) || {}
-})
-const getColumnAttrs = computed(() => {
-  const { children, ...args } = props.schema
-  return args || children
-})
-const getValue = (row: Record<string, unknown>) => {
-  return typeof row[props.schema.prop] == "undefined" || row[props.schema.prop] === "" ? "--" : row[props.schema.prop]
-}
-
-// 复制值
-const copyValue = async (value: unknown) => {
-  copy(String(value))
-  ElMessage.success(t("el.table.clickCopySuccess"))
-}
-const emits = defineEmits(["search"])
-const search = inject<Fields>("search", {})
-const getColumnHidden = computed(() => {
-  if (props.schema.hidden && props.schema.hidden instanceof Function) {
-    return props.schema.hidden(props.schema, search)
-  }
-  return props.schema.hidden
-})
-const onChange = (prop: string, value: string) => {
-  emits("search", prop, value, filterSchema.value)
-}
-const tableItemFilterRef = ref<InstanceType<typeof STableItemFilter>>()
-const onSearch = (opt: { listQuery: Record<string, unknown> }) => {
-  if (tableItemFilterRef.value) tableItemFilterRef.value.search(opt)
-}
-const tableItemRefs: Ref<Record<string, unknown>> = ref({})
-const normalizeSlotScope = (scope: unknown) => (scope && typeof scope === "object" ? scope : {})
-const onItemChange = (prop: string, value: string) => {
-  emits("search", prop, value, filterSchema.value)
-}
-defineExpose({ search: onSearch })
-</script>

package/components/CurdTable/src/STableItemFilter.vue

@@ -1,53 +0,0 @@
-<template>
-  <el-popover :visible="visible" trigger="click" popper-class="filter-type-popper">
-    <template #reference>
-      <span ref="toggleRef" class="filter-dropdown-toggle" :class="{ active: typeof currentValue !== 'undefined' && currentValue !== '' }" @click.stop="openFilter">
-        <el-icon><Filter /></el-icon>
-      </span>
-    </template>
-    <FilterType ref="typeRef" :list-query="listQuery" @change="confirm" @close="visible = false"></FilterType>
-  </el-popover>
-</template>
-<script lang="ts" setup>
-import { Filter } from "@element-plus/icons-vue"
-import { ElPopover } from "element-plus"
-import { computed, type PropType, ref } from "vue"
-import type { Fields } from "../../CurdForm"
-import FilterType from "../../TableFilter/src/components/FilterType.vue"
-import type { ColumnItemFilter } from "./types"
-
-const props = defineProps({
-  filter: {
-    type: Object as PropType<ColumnItemFilter>,
-    default() {
-      return {}
-    },
-  },
-  modelValue: {
-    type: [String, Number, Boolean],
-    default: "",
-  },
-})
-const emit = defineEmits(["change"])
-let currentValue = ref<unknown>("")
-const visible = ref(false)
-const listQuery = computed(() => {
-  const o: Record<string, unknown> = {}
-  o[props.filter.prop || ""] = props.modelValue || currentValue.value
-  return o
-})
-const typeRef = ref()
-const toggleRef = ref()
-const openFilter = () => {
-  visible.value = true
-  typeRef.value.open(toggleRef.value, props.filter)
-}
-const confirm = (opt: { prop: string; value: unknown }) => {
-  currentValue.value = opt.value
-  emit("change", opt.prop, opt.value)
-}
-const search = (event: { listQuery: Fields }) => {
-  currentValue.value = event.listQuery[props.filter.prop || ""]
-}
-defineExpose({ search })
-</script>

package/components/CurdTable/src/STableItemFormatter.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { computed, isReactive, isRef, isVNode, type PropType, ref, watchEffect } from "vue"
-import type { ColumnItem } from "./types"
-const props = defineProps({
-  schema: {
-    type: Object as PropType<ColumnItem<Record<string, unknown>>>,
-    default() {
-      return { options: [] }
-    },
-  },
-  row: {
-    type: Object,
-    default: () => ({}),
-  },
-  index: {
-    type: Number,
-    default: () => 0,
-  },
-})
-const formatterResult = ref(props.schema.formatter ? props.schema.formatter(props.row, props.row.column, props.row[props.schema.prop], props.index) : props.row[props.schema.prop])
-const comp = computed(() => {
-  const type = formatterResult.value
-  if (type !== null && type !== "" && typeof type === "object" && (isReactive(type) || isRef(type) || isVNode(type) || type.setup)) return type
-  return null
-})
-watchEffect(() => {
-  formatterResult.value = props.schema.formatter ? props.schema.formatter(props.row, props.row.column, props.row[props.schema.prop], props.index) : props.row[props.schema.prop]
-})
-</script>
-
-<template>
-  <component :is="comp" v-if="comp" />
-  <template v-else>{{ formatterResult }}</template>
-</template>
-<style scoped lang="scss"></style>

package/components/CurdTable/src/STableItemHeader.vue

@@ -1,33 +0,0 @@
-<template>
-  <span class="tit">{{ title }}</span>
-  <STableItemHeaderTooltip :tooltip="tooltip" />
-</template>
-<script lang="ts" setup>
-import { type PropType, computed } from "vue"
-import STableItemHeaderTooltip from "./STableItemHeaderTooltip.vue"
-import type { ColumnItem } from "./types"
-const props = defineProps({
-  schemaItem: {
-    type: Object as PropType<ColumnItem<Record<string, unknown>>>,
-    default: () => ({}),
-  },
-})
-const tooltip = computed(() => {
-  if (typeof props.schemaItem.header != "string") {
-    return props.schemaItem.header?.tooltip
-  }
-  return ""
-})
-const title = computed(() => {
-  if (!props.schemaItem.header) {
-    return props.schemaItem.label
-  }
-  if (typeof props.schemaItem.header == "string") {
-    return props.schemaItem.header
-  }
-  if (typeof props.schemaItem.header === "object") {
-    return props.schemaItem.header.title || props.schemaItem.label
-  }
-  return ""
-})
-</script>

package/components/CurdTable/src/STableItemHeaderTooltip.vue

@@ -1,32 +0,0 @@
-<template>
-  <el-tooltip v-if="props.tooltip" v-bind="typeof props.tooltip == 'object' ? props.tooltip : {}">
-    <el-button class="tooltip" type="info" link>
-      <el-icon><Warning /></el-icon>
-    </el-button>
-    <template #content>
-      <div v-html="getTooltipContent()"></div>
-    </template>
-  </el-tooltip>
-</template>
-<script lang="ts" setup>
-import { Warning } from "@element-plus/icons-vue"
-const props = defineProps({
-  tooltip: {
-    type: [String, Object],
-    default: "",
-  },
-})
-const getTooltipContent = () => {
-  const tooltip = props.tooltip
-  if (!tooltip) {
-    return ""
-  }
-  if (typeof tooltip === "string") {
-    return tooltip
-  }
-  if (typeof tooltip === "object") {
-    return tooltip.content
-  }
-  return ""
-}
-</script>

package/components/CurdTable/src/STableMenu.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="table-menu">
-    <el-tooltip v-for="item in controlButtons" :key="item.label" :content="item.label" placement="top">
-      <el-dropdown v-if="item.options" trigger="click" class="table-menu-item" @command="handleSizeCommand">
-        <el-button type="info" link class="table-menu-item">
-          <el-icon><component :is="item.icon"></component></el-icon>
-        </el-button>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item v-for="option in item.options" :key="option.value" :command="option.value">
-              <span :style="{ color: currentSize == option.value ? 'var(--el-color-primary)' : '' }">{{ option.label }}</span>
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <el-button v-else type="info" link class="table-menu-item" @click="onClick(item)">
-        <el-icon><component :is="item.icon"></component></el-icon>
-      </el-button>
-    </el-tooltip>
-    <STableColumnControl v-model:visible="visible" />
-  </div>
-</template>
-<script lang="ts" setup>
-import { Download, Operation, Refresh, ScaleToOriginal, Search } from "@element-plus/icons-vue"
-import { useGlobalConfig, useLocale } from "easybill-ui"
-import { computed, ref } from "vue"
-import STableColumnControl from "./STableColumnControl.vue"
-const emits = defineEmits(["operation"])
-const props = defineProps({
-  filterVisible: {
-    type: Boolean,
-    default: true,
-  },
-})
-const { t } = useLocale()
-const globalConfig = useGlobalConfig()
-// 控制按钮逻辑
-const controlButtons = computed(() => [
-  { label: t("el.table.refresh"), value: "refresh", icon: Refresh },
-  { label: props.filterVisible ? t("el.table.collapseQuery") : t("el.table.expandQuery"), value: "searchToggle", icon: Search },
-  {
-    label: t("el.table.density"),
-    icon: ScaleToOriginal,
-    value: "size",
-    options: [
-      { label: t("el.table.default"), value: "default" },
-      { label: t("el.table.medium"), value: "medium" },
-      { label: t("el.table.small"), value: "small" },
-    ],
-  },
-  { label: t("el.table.exportData"), value: "export", icon: Download },
-  // { label: "打印", value: "print", icon: "Printer" },
-  { label: t("el.table.columnSet"), value: "operation", icon: Operation },
-])
-const visible = ref(false)
-const onClick = (item: ButtonItem) => {
-  emits("operation", item.value)
-  if (item.value == "operation") {
-    visible.value = true
-  }
-}
-const currentSize = ref(globalConfig.value.size || "default")
-const handleSizeCommand = (val: "default" | "small" | "large") => {
-  currentSize.value = val
-  emits("operation", "size", val)
-}
-const openColumnControl = () => {
-  visible.value = true
-}
-defineExpose({ openColumnControl })
-interface ButtonItem {
-  label: string
-  icon: unknown
-  value: string
-  options?: Array<{ label: string; value: string }>
-}
-</script>

package/components/CurdTable/src/hooks/useColumnHook.ts

@@ -1,77 +0,0 @@
-import { provide, type Ref, ref, shallowRef } from "vue"
-import type { ParamsItem } from "../../../TableFilter"
-import { deepClone } from "../../utils/common"
-import type { ColumnItem } from "../types"
-
-export function useColumnHook<T>(): {
-  tableColumns: Ref<Array<ColumnItem<T>>>
-  selectParams: Ref<ParamsItem[]>
-  initColumn: (propsColumns: ColumnItem<T>[]) => Promise<void>
-} {
-  const columns: Ref<Array<ColumnItem<T>>> = shallowRef([])
-
-  provide("columns", columns)
-  const getSchema = (colss: ColumnItem<T>[]) => {
-    const result: Array<ParamsItem> = []
-    const getFilter = (cols: Array<ColumnItem<T>>) => {
-      for (const i in cols) {
-        const a = deepClone(cols[i])
-        if (a.children && a.children.length) {
-          getFilter(a.children)
-          continue
-        }
-        if (a.filter) {
-          result.push(getFilterFromColumn<T>(a))
-        }
-      }
-    }
-    getFilter(colss)
-    return result
-  }
-  const selectParams = ref<ParamsItem[]>([])
-  // selectParams.value = getSchema()
-  provide("selectParams", selectParams)
-  async function initColumn(propsColumns: ColumnItem<T>[]) {
-    const cs = deepClone(propsColumns)
-    columns.value = cs //.filter((a) => !a.hidden)
-    const find = async (cs: ColumnItem<T>[]) => {
-      for (let i = 0; i < cs.length; i++) {
-        const item = cs[i]
-        if (item.children && item.children.length) {
-          find(item.children)
-        } else if (item.asyncOptions) {
-          item.options = await item.asyncOptions()
-        }
-      }
-    }
-    find(columns.value)
-    selectParams.value = getSchema(columns.value).sort((a, b) => (b.sortIndex || 0) - (a.sortIndex || 0))
-  }
-
-  return {
-    tableColumns: columns,
-    selectParams,
-    initColumn,
-  }
-}
-export function getFilterFromColumn<T>(a: ColumnItem<T>) {
-  const options = a.filter?.options || a.options
-  const item: ParamsItem = deepClone(a.filter) as ParamsItem
-  if (!item.prop) {
-    item.prop = a.prop
-  }
-  // label可能传空字符串
-  if (typeof item.label == "undefined") {
-    item.label = a.label
-  }
-  if (!item.options && options) {
-    item.options = options
-  }
-  if (!item.asyncOptions && a.asyncOptions) {
-    item.asyncOptions = a.asyncOptions
-  }
-  if (!item.eventObject && a.eventObject) {
-    item.eventObject = a.eventObject
-  }
-  return item
-}