easybill-ui 1.4.0 → 1.4.2

package/components/CurdGroupForm/src/components/CurdFormGroup.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="curdform-group" :style="props.item.style" :class="props.item.class">
-    <div v-if="props.title || $slots.title" class="curdform-group-head">
-      <div class="left">
-        <span v-if="props.icon" class="icon"><i v-if="typeof props.icon == 'string'" :class="props.icon"></i><component v-else :is="props.icon"></component></span>
-        <div v-if="!$slots.title" class="title">{{ props.title }}</div>
-        <slot name="title"></slot>
-      </div>
-      <div class="right">
-        <slot name="headerRight"></slot>
-      </div>
-    </div>
-    <div v-if="props.item.desc" class="curdform-group-desc">{{ props.item.desc }}</div>
-    <slot name="headerBottom"></slot>
-    <div v-if="$slots.default" class="curdform-group-body">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from "vue"
-import type { CurdGroupFormSchemaItem } from "../../types"
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: "",
-  },
-  icon: {
-    type: String,
-    default: "",
-  },
-  item: {
-    type: Object as PropType<CurdGroupFormSchemaItem>,
-    default: () => ({}),
-  },
-})
-</script>

package/components/CurdGroupForm/src/hooks/useFormHook.ts

@@ -1,55 +0,0 @@
-import { CurdForm } from "easybill-ui"
-import { ref, type Ref } from "vue"
-import type { CurdGroupFormSchema, CurdGroupFormSchemaItem } from "../../types"
-
-export const useFormHook = (): {
-  form: Ref<Record<string, unknown>>
-  formRef: Ref<Record<string, InstanceType<typeof CurdForm>>>
-  submit: () => void
-  schema: Ref<CurdGroupFormSchema | undefined>
-  validate: (callback: (valid: boolean) => void) => void
-  loading: Ref<boolean>
-  schemaItemHidden: (item: CurdGroupFormSchemaItem) => boolean
-} => {
-  const formRef = ref<Record<string, InstanceType<typeof CurdForm>>>({})
-  const form = ref<Record<string, unknown>>({})
-  const schema = ref<CurdGroupFormSchema>()
-  const loading = ref(false)
-  const schemaItemHidden = (item: CurdGroupFormSchemaItem) => {
-    if (item?.hidden && item?.hidden instanceof Function) {
-      return item.hidden(form.value, item)
-    }
-    return !!item?.hidden
-  }
-  const validate = (callback: (valid: boolean) => void) => {
-    const validMap: boolean[] = []
-    for (const i in formRef.value) {
-      const curSchema = schema.value?.items.find((a, index) => (a.step || "") + a.groupName + index == i)
-      // 如果当前item隐藏了，则直接跳过校验
-      if (curSchema && schemaItemHidden(curSchema)) {
-        validMap.push(true)
-        continue
-      }
-      const cur = formRef.value[i]
-      cur.validate((valid: boolean) => {
-        validMap.push(valid)
-        if (validMap.length >= Object.keys(formRef.value).length && callback) callback(validMap.every((a) => a))
-      })
-    }
-  }
-  const submit = () => {
-    validate((valid) => {
-      if (!valid) return
-    })
-  }
-
-  return {
-    form,
-    formRef,
-    submit,
-    schema,
-    validate,
-    loading,
-    schemaItemHidden,
-  }
-}

package/components/CurdGroupForm/types.ts

@@ -1,22 +0,0 @@
-import type { Fields, FormSchema } from "easybill-ui"
-import type { Component, VNode } from "vue"
-export interface CurdGroupFormSchema {
-  items: CurdGroupFormSchemaItem[]
-}
-
-export interface CurdGroupFormSchemaItem {
-  groupName: string
-  schema: FormSchema
-  icon?: string
-  prop?: string // 唯一标识 不可修改
-  desc?: string
-  step?: string
-  stepIndex?: number
-  class?: string
-  style?: string
-  labelPosition?: string | "left" | "right" | "top"
-  hidden?: boolean | ((form: Fields, schemaItem: CurdGroupFormSchemaItem) => boolean)
-  headerRight?: Component | ((props: { schema: CurdGroupFormSchema; schemaItem: CurdGroupFormSchemaItem; formModel: Fields }) => VNode | VNode[])
-  headerBottom?: Component | ((props: { schema: CurdGroupFormSchema; schemaItem: CurdGroupFormSchemaItem; formModel: Fields }) => VNode | VNode[])
-  headerTitle?: Component | ((props: { schema: CurdGroupFormSchema; schemaItem: CurdGroupFormSchemaItem; formModel: Fields }) => VNode | VNode[])
-}

package/components/CurdTable/index.ts

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

package/components/CurdTable/src/CurdTable.vue

@@ -1,470 +0,0 @@
-<template>
-  <div class="table-container">
-    <STableFilter v-if="selectParams.length && filterVisible" ref="sTableFilter" :list-query="search" @search="onSearch" />
-    <div v-if="!option.hideMenu" class="table-control">
-      <div class="btn-control">
-        <el-button v-if="!option.hideMenuAdd && props.fetchCreate" type="primary" :icon="Plus" @click="create()">{{ t("el.table.create") }}</el-button>
-        <slot name="menuLeft"></slot>
-      </div>
-      <div class="min-control">
-        <slot name="menuRight"></slot>
-        <STableMenu v-if="!option.hideMenuRight" ref="tableMenuRef" :filter-visible="filterVisible" @operation="onMenuOption" />
-      </div>
-    </div>
-    <div class="table-wrapper">
-      <el-table ref="tableRef" v-loading="loading" stripe :data="list" scrollbar-always-on v-bind="{ ...$attrs, ...tableAttrs }" @row-click="onRowClick" @selection-change="selectionChange">
-        <slot name="default"></slot>
-        <el-table-column v-if="$attrs.index !== undefined" type="index" />
-        <el-table-column v-if="$attrs.selection !== undefined && $attrs.selection !== false" type="selection" v-bind="option.selectionProps" />
-        <template v-for="item in tableColumns" :key="item.label">
-          <el-table-column v-if="item.type == 'index'" type="index" v-bind="item" />
-          <el-table-column v-else-if="item.type == 'selection'" type="selection" v-bind="item" />
-          <STableItem v-else :ref="getTableItemRef(item.prop)" :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>
-        <el-table-column v-if="!option.hideOperation" :label="t('el.table.operation')" fixed="right" :width="option.operationWidth || '200'" align="left">
-          <template #default="scope">
-            <slot name="operation" v-bind="scope"></slot>
-            <template v-if="!$slots.operationBtn">
-              <el-button v-if="!option.hideOperationEdit && props.fetchEdit" type="primary" link :icon="Edit" @click.stop="create(scope.row)">{{ t("el.table.edit") }}</el-button>
-              <el-button v-if="!option.hideOperationDetail" type="primary" link :icon="Document" @click.stop="detail(scope.row)">{{ t("el.table.detail") }}</el-button>
-              <el-button v-if="!option.hideOperationDelete && props.fetchRemove" type="danger" link :icon="Delete" @click.stop="startremove(scope)">{{ t("el.table.delete") }}</el-button>
-            </template>
-            <template v-else>
-              <el-dropdown trigger="click" popper-class="curd-table-dropdown-menu">
-                <el-button type="primary" link>
-                  {{ option.operationBtnTitle || "更多" }}
-                  <el-icon>
-                    <ArrowDown />
-                  </el-icon>
-                </el-button>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <slot name="operationBtn" v-bind="scope"></slot>
-                    <el-dropdown-item v-if="!option.hideOperationEdit && props.fetchEdit">
-                      <el-button type="primary" link @click.stop="create(scope.row, scope.$index)">编辑</el-button>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="!option.hideOperationDetail">
-                      <el-button type="primary" link @click.stop="detail(scope.row)">详情</el-button>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="!option.hideOperationDelete && props.fetchRemove">
-                      <el-button type="danger" link @click.stop="startremove(scope)">删除 </el-button>
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </template>
-          </template>
-        </el-table-column>
-        <template #empty>
-          <slot name="empty"></slot>
-          <el-empty v-if="!$slots.empty" :image-size="30" />
-        </template>
-      </el-table>
-    </div>
-    <div v-if="$slots.pageLeft || $slots.pageRight || !option.hidePage" class="table-pager">
-      <div class="page-left"><slot name="pageLeft"></slot></div>
-      <el-pagination
-        v-if="!option.hidePage"
-        v-model:current-page="listQuery.pageIndex"
-        v-model:page-size="listQuery.pageSize"
-        class="pagination"
-        background
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        v-bind="option.pageProps"
-        @current-change="fetchData"
-        @size-change="fetchData"
-      ></el-pagination>
-      <slot name="pageRight" :list-query="listQuery" :total="total"></slot>
-    </div>
-
-    <STableDetail ref="STableDetailRef" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ArrowDown, Delete, Document, Edit, Plus } from "@element-plus/icons-vue"
-import { FormDialog, useGlobalConfig, useLocale } from "easybill-ui"
-import { ElLoading, ElMessage, ElMessageBox, ElTable } from "element-plus"
-import { computed, getCurrentInstance, onActivated, onMounted, type PropType, provide, reactive, ref, type Ref, watch } from "vue"
-import type { Fields, FormItem, FormSchema } from "../../CurdForm"
-import type { FilterItem, ListQuery } from "../../TableFilter"
-import { deepClone } from "../utils/common"
-import { exportExcel } from "../utils/tabelToExcel"
-import { useColumnHook } from "./hooks/useColumnHook"
-import STableDetail from "./STableDetail.vue"
-import STableFilter from "./STableFilter.vue"
-import STableItem from "./STableItem.vue"
-import STableMenu from "./STableMenu.vue"
-import type { ColumnItem, FeachDataParam, FetchDataOpt, FormAttrs, MenuEventKey, PropOption } from "./types"
-
-const props = defineProps({
-  // 表格的数据
-  data: {
-    type: Array as PropType<Record<string, unknown>[]>,
-    default() {
-      return []
-    },
-  },
-  // 表格列模型
-  columns: {
-    type: Array as PropType<Array<ColumnItem<Record<string, unknown>>>>,
-    default() {
-      return []
-    },
-  },
-  pageOptions: {
-    type: Object as PropType<{ pageIndex?: number; pageSize?: number; total?: number } & Fields>,
-    default() {
-      return {
-        pageIndex: 1,
-        pageSize: 10,
-      }
-    },
-  },
-  // 调用接口获取数据
-  fetchData: {
-    type: Function as PropType<(opt: FeachDataParam) => Promise<{ total?: number; list?: Record<string, unknown>[] } | void>>,
-    default: null,
-  },
-  // 自定义创建函数
-  fetchCreate: {
-    type: Function as PropType<(formModel: Fields) => void | boolean | Promise<void | boolean>>,
-    default: null,
-  },
-  // 自定义编辑函数
-  fetchEdit: {
-    type: Function as PropType<(formModel: Fields, row: Record<string, unknown>, index?: number) => void | boolean | Promise<void | boolean>>,
-
-    default: null,
-  },
-  // 自定义删除函数
-  fetchRemove: {
-    type: Function as PropType<(row: unknown, index: number) => Promise<void>>,
-    default: null,
-  },
-  // 专门配置一些公共的参数
-  option: {
-    type: Object as PropType<Partial<PropOption>>,
-    default() {
-      return {}
-    },
-  },
-})
-const { t } = useLocale()
-const defaultOption = {
-  operationWidth: 200,
-  operationBtnTitle: t("el.table.more"),
-  hideMenu: false, // 是否隐藏右侧工具菜单
-  hideMenuAdd: false, // 是否隐藏菜单中添加按钮
-  hideMenuRight: false, // 是否隐藏菜单右侧
-  hideOperation: false, // 是否隐藏操作列
-  hideOperationEdit: false, // 是否隐藏操作列中的编辑按钮
-  hideOperationDetail: false, // 是否隐藏操作列中的详情按钮
-  hideOperationDelete: false, // 是否隐藏操作列中的删除按钮
-  hidePage: false, // 是否隐藏分页器
-  excelTitle: "", //导出表格的文件名
-  selectionProps: null,
-  downloadMod: false,
-  pageProps: null,
-  filterVisible: true,
-  autoload: true,
-  customActivatedFetch: false, // 自定义执行onActivated内部的fetch执行，完全交由父组件控制 false 是自动的，true 开发者自己控制
-}
-const emits = defineEmits(["selectionChange", "row-click"])
-const list = ref(props.data)
-watch(
-  () => props.data,
-  (val) => {
-    list.value = val
-  },
-  { deep: true },
-)
-const globalConfig = useGlobalConfig()
-const tableAttrs = ref({ size: globalConfig.value.size || "default" })
-const listQuery = reactive({
-  pageIndex: 1,
-  pageSize: props.pageOptions?.pageSize || 10,
-})
-
-// 调用接口获取数据
-const setPageIndex = (pageIndex: number) => {
-  listQuery.pageIndex = pageIndex
-}
-const search = reactive<ListQuery>(
-  (() => {
-    const { pageIndex, pageSize, total, ...args } = deepClone(props.pageOptions || {})
-    return args
-  })(),
-)
-const option: PropOption = reactive(Object.assign(defaultOption, props.option))
-provide("search", search)
-provide("option", option)
-watch(
-  () => props.option,
-  (val) => {
-    Object.assign(option, val)
-  },
-  { deep: true },
-)
-const filterVisible = ref(typeof option?.filterVisible == "undefined" ? true : option?.filterVisible)
-const loading = ref(false)
-const listTotal = ref(0)
-const setTotal = (num: number) => {
-  listTotal.value = num
-}
-// 总数量由外面决定
-const total = computed(() => listTotal.value || (typeof props.pageOptions.total == "undefined" ? props.data.length || 0 : props.pageOptions.total))
-const fetchData = async (opt?: FetchDataOpt) => {
-  if (props.fetchData) {
-    if (!(opt && opt.showLoading == false)) {
-      loading.value = true
-    }
-    if (opt && opt.resetPageIndex) {
-      listQuery.pageIndex = 1
-    }
-    const optQuery = (opt && opt.query) || {}
-    // 外面指定了筛选条件
-    for (let i in optQuery) {
-      search[i] = optQuery[i]
-      // 更新tableFilter组件
-      sTableFilter.value?.setItem(i)
-      if (tableItemRefs.value[i]) tableItemRefs.value[i].search({ listQuery: search })
-    }
-    const params: Fields & { pageIndex: number; pageSize: number } = { ...listQuery, ...search }
-    const fetchDataRes = await props.fetchData({ listQuery: params }).finally(() => {
-      loading.value = false
-    })
-    if (fetchDataRes && typeof fetchDataRes.total !== "undefined") {
-      listTotal.value = fetchDataRes.total
-    }
-    if (fetchDataRes && typeof fetchDataRes.list !== "undefined") {
-      list.value = fetchDataRes.list
-    }
-  }
-}
-const tableItemRefs: Ref<Record<string, InstanceType<typeof STableItem>>> = ref({})
-const normalizeSlotScope = (scope: unknown) => (scope && typeof scope === "object" ? scope : {})
-const getTableItemRef = (prop: string) => {
-  return (el: unknown) => {
-    if (el) {
-      tableItemRefs.value[prop] = el as InstanceType<typeof STableItem>
-    }
-  }
-}
-// 搜索
-const onSearch = (params?: ListQuery) => {
-  if (params) {
-    for (let i in params) {
-      search[i] = params[i]
-    }
-  }
-  listQuery.pageIndex = 1
-  fetchData()
-  for (let i in tableItemRefs.value) {
-    if (tableItemRefs.value[i]) tableItemRefs.value[i].search({ listQuery: params || {} })
-  }
-}
-const sTableFilter: Ref<InstanceType<typeof STableFilter> | undefined> = ref()
-const onItemChange = (prop: string, value: string, filter: FilterItem) => {
-  sTableFilter.value?.setItem(prop, filter)
-  search[prop] = value
-
-  listQuery.pageIndex = 1
-  fetchData()
-}
-let hasInit = false
-onActivated(() => {
-  // option?.customActivatedFetch为true时，参考/system/partner/account/vendor写法
-  if (!option?.customActivatedFetch && hasInit) {
-    fetchData()
-  } else {
-    hasInit = true
-  }
-})
-// filter内部有一些初始化的操作，比如操作value初始值，需要等子组件初始化后再执行列表数据fetch操作
-onMounted(() => {
-  if (option.autoload) fetchData()
-  provide("tableFilter", sTableFilter.value)
-})
-// 组装columns
-const { tableColumns, selectParams, initColumn } = useColumnHook<Record<string, unknown>>()
-initColumn(props.columns)
-watch(
-  () => props.columns,
-  (val) => {
-    initColumn(val)
-  },
-)
-// 菜单点击事件
-const onMenuOption = (optionKey: MenuEventKey, val: string) => {
-  const f = option.menuEvent && option.menuEvent[optionKey]
-  if (f) {
-    return f()
-  }
-  switch (optionKey) {
-    case "refresh":
-      fetchData()
-      break
-    case "searchToggle":
-      filterVisible.value = !filterVisible.value
-      break
-    case "size": {
-      if (val == "small" || val == "default" || val == "large") {
-        tableAttrs.value.size = val
-      }
-      break
-    }
-    case "export": {
-      const getTableValue = (val: unknown, schema: ColumnItem<Record<string, unknown>>, row: Record<string, unknown>, i: number): string | number => {
-        if (schema.options) {
-          const vals = String(val).split(",")
-          const curs = vals.map((item) => {
-            const cur = schema.options?.find((a) => a.value == item)
-            return (cur && cur.label) || item
-          })
-          return curs.join(",")
-        }
-        if (schema.formatter) {
-          let result = schema.formatter(row, schema, val, i) as string
-          if (/^[0-9\.,+-]+\.[0-9]{2}$/.test(String(result)) && String(result).split(".").length < 3) {
-            const resultNum = +parseFloat(String(result).replace(/,|$|￥/g, ""))
-            return resultNum
-          }
-          return result === "--" ? "" : result
-        }
-        if (/^[0-9\.,+-]+\.[0-9]{2}$/.test(String(val)) && String(val).split(".").length < 3) {
-          val = +parseFloat(String(val).replace(/,|$|￥/g, ""))
-        }
-        return val as string
-      }
-      const data = list.value.map((a) => tableColumns.value.filter((b) => !b.hidden && !b.neverShow).map((b, i) => getTableValue(a[b.prop], b, a, i)))
-      const header = tableColumns.value.filter((b) => !b.hidden && !b.neverShow).map((a) => a.label)
-      const tabledata = [header, ...data]
-      const filename = "data"
-      exportExcel(tabledata, "data", (option.excelTitle || filename) + ".xls")
-      ElMessage.success(t("el.table.exportSuccess"))
-      break
-    }
-  }
-}
-
-// 添加/编辑
-const create = (row?: Record<string, unknown>, index?: number) => {
-  const formAttrs: FormAttrs | undefined = option.formAttrs
-  const formSchema: FormSchema = {
-    formItem: [],
-    rules: {},
-    labelWidth: "110px",
-    ...formAttrs,
-  }
-  const setItem = (a: ColumnItem<Record<string, unknown>>) => {
-    if (!a.form) return
-    let formValue: Partial<FormItem>
-    if (a.form instanceof Function) {
-      const row1 = row || {}
-      formValue = a.form(a, row1, search)
-    } else {
-      formValue = a.form
-    }
-    const { rules, prop, ...formProps } = formValue
-    const item: FormItem = {
-      span: 24,
-      label: a.label,
-      options: a.options,
-      asyncOptions: a.asyncOptions,
-      ...formProps,
-      prop: prop || a.prop,
-    }
-    formSchema.formItem.push(item)
-    if (rules) {
-      if (!formSchema.rules) formSchema.rules = {}
-      if (typeof formSchema.rules !== "function") {
-        formSchema.rules[item.prop] = rules
-      }
-    }
-  }
-  tableColumns.value.map((a) => {
-    if (a.children && a.children.length) {
-      for (let i in a.children) {
-        if (a.children[i].form) setItem(a.children[i])
-      }
-    } else if (a.form) {
-      setItem(a)
-    }
-  })
-  formSchema.formItem.sort((a, b) => (b.sortIndex || 0) - (a.sortIndex || 0))
-  const eoptions = row ? option.editOptions : option.createOptions
-  FormDialog.show({
-    title: row ? t("el.table.edit") : t("el.table.create"),
-    formSchema: formSchema,
-    fields: row as Fields,
-    width: formAttrs?.width || 600,
-    handleOk: async (modelRef: Fields) => {
-      if (row) {
-        return await props.fetchEdit?.(modelRef, row, index)
-      }
-      return await props.fetchCreate?.(modelRef)
-    },
-    ...eoptions,
-  })
-}
-const instance = getCurrentInstance()
-const startremove = (scope: { row: unknown; $index: number }) => {
-  ElMessageBox.confirm(t("el.table.deleteConfirm"), t("el.table.tip"), {
-    type: "warning",
-  }).then(async () => {
-    const loading = ElLoading.service({ fullscreen: true })
-    await (props.fetchRemove && props.fetchRemove(scope.row, scope.$index)).finally(() => {
-      loading.close()
-    })
-    ElMessage({ type: "success", message: t("el.table.deleteSuccess") })
-  })
-}
-
-// 详情
-const STableDetailRef = ref()
-const detail = (row: unknown) => {
-  STableDetailRef.value.open({ data: row, columns: tableColumns.value })
-}
-// 行点击事件
-const onRowClick = (row: unknown, column: ColumnItem, event: Event) => {
-  if (instance && typeof instance.attrs["click-row-to-view"] !== "undefined") {
-    detail(row)
-  }
-  emits("row-click", row, column, event)
-}
-// 多选事件
-const selectionChange = (rows: unknown[]) => {
-  emits("selectionChange", rows)
-}
-const tableRef = ref<InstanceType<typeof ElTable>>() // 表格的实例
-
-const toggleRowSelection = (row: unknown, isChecked?: boolean) => {
-  setTimeout(() => {
-    tableRef.value?.toggleRowSelection(row, !!isChecked)
-  })
-}
-const tableMenuRef = ref()
-defineExpose({
-  fetchData,
-  tableRef,
-  tableFilterRef: sTableFilter,
-  tableMenuRef,
-  toggleRowSelection,
-  setPageIndex,
-  setTotal,
-  search,
-  listQuery,
-  fetchCreate: create,
-  fetchEdit: create,
-  fetchRemove: startremove,
-  getEl() {
-    return instance?.proxy?.$el
-  },
-})
-</script>

package/components/CurdTable/src/STableColumnControl.vue

@@ -1,88 +0,0 @@
-<template>
-  <el-drawer v-model="visible" :title="t('el.table.columnSet')" size="40%" append-to-body>
-    <el-table :data="columnDatas">
-      <el-table-column property="label" :label="t('el.table.columnName')"></el-table-column>
-      <el-table-column property="hidden" :label="t('el.table.show')" width="60">
-        <template #default="scope">
-          <el-switch v-model="scope.row.hidden" :active-value="false" :inactive-value="true" size="small" @change="onChangeHidden()"></el-switch>
-        </template>
-      </el-table-column>
-      <el-table-column property="fixed" :label="t('el.table.fixShow')" width="160" align="center">
-        <template #default="scope">
-          <el-button-group>
-            <el-tooltip v-for="item in fixedMap" :key="item.value" :content="item.label">
-              <el-button :type="(!scope.row.fixed && item.value == '') || scope.row.fixed == item.value ? 'primary' : ''" size="small" @click="selectFixed(scope.row, item.value)">
-                <el-icon><component :is="item.icon" /></el-icon>
-              </el-button>
-            </el-tooltip>
-          </el-button-group>
-        </template>
-      </el-table-column>
-    </el-table>
-  </el-drawer>
-</template>
-<script lang="ts" setup>
-import { CaretLeft, CaretRight, VideoPause } from "@element-plus/icons-vue"
-import { computed, inject, ref, shallowRef, triggerRef, watch, type PropType, type Ref } from "vue"
-import { useLocale } from "easybill-ui"
-import type { ColumnItem } from "./types"
-const props = defineProps({
-  visible: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-})
-const emits = defineEmits(["update:visible", "change"])
-const { t } = useLocale()
-const columns = inject<Ref<Array<ColumnItem>>>("columns") || ref([])
-const visible = computed({
-  get() {
-    return props.visible
-  },
-  set(val) {
-    emits("update:visible", val)
-  },
-})
-watch(
-  () => props.visible,
-  (val) => {
-    visible.value = val
-  },
-)
-const columnDatas = computed(() => {
-  const result = []
-  for (const i in columns.value) {
-    const column = columns.value[i]
-    if (column.children) {
-      for (const j in column.children) {
-        const child = column.children[j]
-        if (!child.neverShow) {
-          result.push(child)
-        }
-      }
-      continue
-    } else if (!column.neverShow) {
-      result.push(column)
-    }
-  }
-  return result
-})
-const fixedMap = shallowRef([
-  { value: "left", label: t("el.table.fixLeft"), icon: CaretLeft },
-  { value: "", label: t("el.table.fixNone"), icon: VideoPause },
-  { value: "right", label: t("el.table.fixRight"), icon: CaretRight },
-])
-const selectFixed = (row: Record<string, unknown>, val: string) => {
-  if (val) {
-    row.fixed = val
-  } else {
-    delete row.fixed
-  }
-  triggerRef(columns)
-  emits("change")
-}
-const onChangeHidden = () => {
-  triggerRef(columns)
-  emits("change")
-}
-</script>