gy-ui-plus 1.0.9 → 1.0.10

package/packages/table/src/singleEditCell.vue

@@ -1,301 +0,0 @@
-<template>
-  <component
-    :is="isShowRules ? 'el-form-item' : 'div'"
-    :prop="prop"
-    :rules="configEdit.rules"
-    :class="[
-      configEdit.className,
-      { single_edit_cell_rules: configEdit.rules },
-      'single_edit_cell'
-    ]"
-    v-bind="$attrs"
-  >
-    <!-- 编辑组件自定义插槽 -->
-    <template v-if="configEdit.editSlotName">
-      <div :class="[prop, 'slot_edit_name']" @keyup="keyUpHandle">
-        <slot :name="configEdit.editSlotName" :scope="scope" />
-      </div>
-    </template>
-    <template v-if="configEdit.isSelfCom">
-      <component
-        v-if="configEdit.editComponent === 't-select-table'"
-        :ref="(el:any) => handleRef(el,configEdit)"
-        :is="configEdit.editComponent"
-        :placeholder="configEdit.placeholder || getPlaceholder(configEdit)"
-        v-bind="
-          typeof configEdit.bind == 'function'
-            ? configEdit.bind(scope)
-            : { clearable: true, filterable: true, ...configEdit.bind }
-        "
-        :style="{ width: configEdit.width || '100%' }"
-        v-on="cEvent(configEdit, 't-select-table')"
-      />
-      <component
-        v-else
-        :is="configEdit.editComponent"
-        v-model="childValue"
-        :placeholder="configEdit.placeholder || getPlaceholder(configEdit)"
-        :ref="(el: any) => getRefs(el, configEdit)"
-        v-bind="
-          typeof configEdit.bind == 'function'
-            ? configEdit.bind(scope)
-            : { clearable: true, filterable: true, ...configEdit.bind }
-        "
-        @change="handleEvent(configEdit.event)"
-        :style="{ width: configEdit.width || '100%' }"
-        v-on="cEvent(configEdit)"
-      />
-    </template>
-    <component
-      v-if="!configEdit.editSlotName && !configEdit.isSelfCom"
-      :is="configEdit.editComponent || 'el-input'"
-      v-model="childValue"
-      :type="configEdit.type"
-      :placeholder="configEdit.placeholder || getPlaceholder(configEdit)"
-      :ref="(el: any) => getRefs(el, configEdit)"
-      :class="prop"
-      @change="handleEvent(configEdit.event)"
-      @keyup="keyUpHandle"
-      :style="{ width: configEdit.width || '100%' }"
-      v-on="cEvent(configEdit)"
-      v-bind="
-        typeof configEdit.bind == 'function'
-          ? configEdit.bind(scope)
-          : { clearable: true, filterable: true, ...configEdit.bind }
-      "
-    >
-      <!-- 前置文本 -->
-      <template #prepend v-if="configEdit.prepend">{{ configEdit.prepend }}</template>
-      <!-- 后置文本 -->
-      <template #append v-if="configEdit.append">{{ configEdit.append }}</template>
-      <!-- 子组件自定义插槽 -->
-      <!-- <template v-if="configEdit.childSlotName">
-        <slot />
-      </template>-->
-      <template v-if="!configEdit.editComponent.includes('date')">
-        <component
-          :is="compChildName(configEdit)"
-          v-for="(value, key) in selectListType(configEdit)"
-          :key="key"
-          :disabled="value.disabled"
-          :label="compChildLabel(configEdit, value)"
-          :value="compChildValue(configEdit, value, key)"
-          >{{ compChildShowLabel(configEdit, value) }}</component
-        >
-      </template>
-    </component>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from "vue"
-defineOptions({
-  name: "SingleEditCell"
-})
-const props = defineProps({
-  /** 编辑配置项说明
-   * label: '爱好', // placeholder显示
-   * editComponent: 'el-select', // 组件
-   * type: 'select-arr', // option显示
-   * list: 'hobbyList', // 下拉选择数据源
-   * arrLabel: 'label', // 下拉选择中文显示
-   * arrKey: 'value' // 下拉选择number显示（最终传后台）
-   * bind:{} // 组件衍生属性（即第三方组件属性）
-   */
-  configEdit: {
-    type: Object as any,
-    default: () => ({})
-  },
-  // 下拉选择数据源
-  listTypeInfo: {
-    type: Object,
-    default: () => ({})
-  },
-  scope: {
-    type: Object,
-    default: () => ({})
-  },
-  prop: {
-    type: String,
-    default: "prop"
-  },
-  // 是否走表单验证（表头合并不校验）
-  isShowRules: {
-    type: Boolean,
-    default: true
-  },
-  modelValue: {
-    type: [String, Number, Array, Boolean, Date, Object]
-  },
-  // 列for index
-  indexColumns: [String, Number]
-})
-// 抛出事件
-const emits = defineEmits(["handleEvent", "update:modelValue", "keyupHandle", "getRefs"])
-// vue3 v-model简写
-let childValue: any = computed({
-  get() {
-    return props?.modelValue
-  },
-  set(val) {
-    emits("update:modelValue", val)
-  }
-})
-watch(
-  () => props.modelValue,
-  data => {
-    childValue.value = data
-  }
-)
-// 绑定的相关事件
-const handleEvent = (type: string) => {
-  setTimeout(() => {
-    // console.log("组件", type, childValue.value)
-    emits("handleEvent", { type, val: childValue.value })
-  }, 0)
-}
-// 键盘事件
-const keyUpHandle = ($event: any) => {
-  emits("keyupHandle", $event, props.scope.$index, props.prop)
-}
-// 引用第三方事件
-const cEvent: any = computed(() => {
-  return ({ eventHandle }: any, type = "") => {
-    let event = { ...eventHandle }
-    let changeEvent = {} as any
-    Object.keys(event).forEach(v => {
-      changeEvent[v] = (e: any, ids: any) => {
-        if (type === "t-select-table") {
-          const argument = {
-            row: e,
-            ids: ids,
-            prop: props.prop,
-            scope: props.scope
-          }
-          event[v] && event[v](argument)
-        } else {
-          if ((typeof e === "number" && e === 0) || e) {
-            event[v] && event[v]({ val: e, prop: props.prop, scope: props.scope })
-          } else {
-            event[v] && event[v]({ prop: props.prop, scope: props.scope })
-          }
-        }
-      }
-    })
-    return { ...changeEvent }
-  }
-})
-
-const selectListType = computed(() => {
-  return (item: { list: string | number }) => {
-    if (props.listTypeInfo) {
-      return props.listTypeInfo[item.list]
-    } else {
-      return []
-    }
-  }
-})
-// 子组件名称
-const compChildName = computed(() => {
-  return (configEdit: { type: any }) => {
-    switch (configEdit.type) {
-      case "checkbox":
-        return "el-checkbox"
-      case "radio":
-        return "el-radio"
-      case "select-arr":
-      case "select-obj":
-        return "el-option"
-    }
-  }
-})
-// 子子组件label
-const compChildLabel = computed(() => {
-  return (configEdit: { type: any; arrLabel: any }, value: { [x: string]: any; value: any }) => {
-    switch (configEdit.type) {
-      case "radio":
-      case "checkbox":
-        return value[configEdit.arrLabel || "label"]
-      case "el-select-multiple":
-      case "select-arr":
-        return value[configEdit.arrLabel || "label"]
-      case "select-obj":
-        return value
-    }
-  }
-})
-// 子子组件value
-const compChildValue = computed(() => {
-  return (
-    configEdit: { type: any; arrKey: any },
-    value: { [x: string]: any; value: any },
-    key: any
-  ) => {
-    switch (configEdit.type) {
-      case "radio":
-      case "checkbox":
-        return value[configEdit.arrKey || "key"]
-      case "el-select-multiple":
-      case "select-arr":
-        return value[configEdit.arrKey || "key"]
-      case "select-obj":
-        return key
-    }
-  }
-})
-// 子子组件文字展示
-const compChildShowLabel = computed(() => {
-  return (configEdit: { type: any; arrLabel: any }, value: { [x: string]: any; label: any }) => {
-    switch (configEdit.type) {
-      case "radio":
-      case "checkbox":
-        return value[configEdit.arrLabel || "label"]
-      case "el-select-multiple":
-      case "select-arr":
-        return value[configEdit.arrLabel || "label"]
-      case "select-obj":
-        return value
-    }
-  }
-})
-// 获取所有ref
-const getRefs = (el: any, item: any) => {
-  emits("getRefs", el, item)
-}
-// 下拉选择表格组件 ref
-const tselecttableref: any = ref({})
-// 下拉选择表格组件 动态ref
-const handleRef = (el: any, item: any) => {
-  emits("getRefs", el, item)
-  if (el) {
-    tselecttableref.value[`tselecttableref-${props.indexColumns}`] = el
-  }
-}
-// 重置下拉表格
-const resetTselectTableFields = () => {
-  // 获取所有下拉选择表格组件
-  const refList = Object.keys(tselecttableref.value).filter(item =>
-    item.includes("tselecttableref")
-  )
-  if (refList.length > 0 && tselecttableref.value) {
-    refList.map(val => {
-      tselecttableref.value[val].clear()
-    })
-  }
-}
-// placeholder的显示
-const getPlaceholder = (row: any) => {
-  if (!row.editComponent || typeof row.editComponent !== "string") {
-    return row.label
-  }
-  const componentType = row.editComponent.toLowerCase()
-  if (componentType.includes("input")) {
-    return "请输入" + row.label
-  } else if (componentType.includes("select") || componentType.includes("date")) {
-    return "请选择" + row.label
-  }
-  return row.label
-}
-
-defineExpose({ resetTselectTableFields })
-</script>

package/packages/table/src/tableProps.ts

@@ -1,146 +0,0 @@
-import type { PropType, ExtractPropTypes } from "vue"
-export const tableProps = {
-  // table所需数据
-  table: {
-    type: Object,
-    default: () => {
-      return {}
-    },
-    required: true
-  },
-  // 表头数据
-  columns: {
-    type: Array,
-    default: () => {
-      return []
-    }
-    // required: true
-  },
-  // 按钮权限数据集
-  btnPermissions: {
-    type: Array,
-    default: () => {
-      return []
-    }
-  },
-  // 表格标题
-  title: {
-    type: String
-  },
-  tableTitle: String,
-  // table对齐方式
-  align: {
-    type: String as PropType<"left" | "center" | "right">,
-    default: "center"
-  },
-  // 是否开启Tree-table
-  isTree: {
-    type: Boolean,
-    default: false
-  },
-  // 是否开启行拖拽
-  isRowSort: {
-    type: Boolean,
-    default: false
-  },
-  // 开启行拖拽，第一列是否显示拖拽图标
-  isRowSortIcon: {
-    type: Boolean,
-    default: false
-  },
-  // 显示拖拽列的配置
-  rowSortIconBind: {
-    type: Object,
-    default: () => {
-      return {}
-    }
-  },
-  // 是否复制单元格
-  isCopy: {
-    type: Boolean,
-    default: false
-  },
-  // 是否开启点击整行选中单选框
-  rowClickRadio: {
-    type: Boolean,
-    default: true
-  },
-  // 设置默认选中项（单选）defaultRadioCol值必须大于0！
-  defaultRadioCol: Number,
-  // 序列号显示是否分页累加
-  isPaginationCumulative: {
-    type: Boolean,
-    default: false
-  },
-  // 是否显示分页
-  isShowPagination: {
-    type: Boolean,
-    default: true
-  },
-  // 是否开启编辑保存按钮
-  isShowFooterBtn: {
-    type: Boolean,
-    default: false
-  },
-  // 是否显示设置（隐藏/显示列）
-  columnSetting: {
-    type: Boolean,
-    default: false
-  },
-  // 是否高亮选中行
-  highlightCurrentRow: {
-    type: Boolean,
-    default: false
-  },
-  // 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件
-  sortable: {
-    type: [Boolean, String]
-  },
-  // 单元格编辑是否开启键盘事件
-  isKeyup: {
-    type: Boolean,
-    default: false
-  },
-  // TAdaptivePage组件是否使用了Toolbar插槽
-  isSlotToolbar: Boolean,
-  // TAdaptivePage组件是否使用了title插槽
-  isSlotTitle: Boolean,
-  // 是否开启边框
-  border: {
-    type: Boolean,
-    default: false
-  },
-  // table loading
-  tableLoading: {
-    type: Boolean,
-    default: false
-  },
-  loadingTxt: {
-    type: String,
-    default: "加载中..."
-  },
-  // 是否开启虚拟列表
-  useVirtual: Boolean,
-  // 虚拟列表的渲染行数
-  virtualShowSize: {
-    type: Number,
-    default: 30
-  },
-  footerBtnAlign: {
-    type: String,
-    default: "right"
-  },
-  /**
-   * 空数据时表头是否显示校验红点
-   */
-  isEmptyDataRequired: {
-    type: Boolean,
-    default: false
-  },
-  saveBtnTxt: {
-    type: String,
-    default: "保存"
-  }
-}
-
-export type TTableProps = ExtractPropTypes<typeof tableProps>

package/packages/table/src/useExpose.ts

@@ -1,74 +0,0 @@
-import { ref } from "vue"
-
-export function useExpose() {
-  // 获取el-table ref
-  const GyTable = ref<HTMLElement | any>(null)
-  // 清空复选框
-  const clearSelection = () => {
-    return GyTable.value.clearSelection()
-  }
-  // 返回当前选中的行
-  const getSelectionRows = () => {
-    return GyTable.value.getSelectionRows()
-  }
-  // 取消某一项选中项
-  const toggleRowSelection = (row: any, selected = false) => {
-    return GyTable.value.toggleRowSelection(row, selected)
-  }
-  // 全部选中
-  const toggleAllSelection = () => {
-    return GyTable.value.toggleAllSelection()
-  }
-  // 用于可扩展的表格或树表格，如果某行被扩展，则切换。 使用第二个参数，您可以直接设置该行应该被扩展或折叠。
-  const toggleRowExpansion = (row: any, expanded: any) => {
-    return GyTable.value.toggleRowExpansion(row, expanded)
-  }
-  // 用于单选表格，设定某一行为选中行， 如果调用时不加参数，则会取消目前高亮行的选中状态。
-  const setCurrentRow = (row: any) => {
-    return GyTable.value.setCurrentRow(row)
-  }
-  // 清空排序条件
-  const clearSort = () => {
-    return GyTable.value.clearSort()
-  }
-  // 传入由columnKey 组成的数组以清除指定列的过滤条件。 如果没有参数，清除所有过滤器
-  const clearFilter = (columnKey: any) => {
-    return GyTable.value.clearFilter(columnKey)
-  }
-  //  Table 进行重新布局
-  const doLayout = (columnKey: any) => {
-    return GyTable.value.doLayout(columnKey)
-  }
-  //  手动排序表格。 参数 prop 属性指定排序列，order 指定排序顺序。
-  const sort = (prop: string, order: string) => {
-    return GyTable.value.sort(prop, order)
-  }
-  //  滚动到一组特定坐标。
-  const scrollTo = (options: any, yCoord: any) => {
-    return GyTable.value.scrollTo(options, yCoord)
-  }
-  //  设置垂直滚动位置
-  const setScrollTop = (top: any) => {
-    return GyTable.value.setScrollTop(top)
-  }
-  //  设置水平滚动位置
-  const setScrollLeft = (left: any) => {
-    return GyTable.value.setScrollLeft(left)
-  }
-  return {
-    GyTable,
-    clearSelection,
-    getSelectionRows,
-    toggleRowSelection,
-    toggleAllSelection,
-    toggleRowExpansion,
-    setCurrentRow,
-    clearSort,
-    clearFilter,
-    doLayout,
-    sort,
-    scrollTo,
-    setScrollTop,
-    setScrollLeft
-  }
-}

package/packages/table/src/useVirtualized.ts

@@ -1,70 +0,0 @@
-import { nextTick, ref } from "vue"
-import type { Ref } from "vue"
-export function useVirtualized() {
-  // 渲染实际高度的容器
-  const actualHeightContainerEl = ref<HTMLElement | any>(null)
-  // 用于偏移的元素选择器
-  const translateContainerEl = ref<HTMLElement | any>(null)
-  // 滚动容器的元素选择器
-  const scrollContainerEl = ref<HTMLElement | any>(null)
-  // 所有数据
-  const saveDATA: Ref<any[]> = ref([])
-  // 缓存已渲染元素的高度
-  const RenderedItemsCache: any = {}
-  // 获取dom元素
-  const getDom = () => {
-    actualHeightContainerEl.value = document.querySelector(
-      ".t_table_use_virtual .el-scrollbar__view"
-    )
-    translateContainerEl.value = document.querySelector(".t_table_use_virtual .el-table__body")
-    scrollContainerEl.value = document.querySelector(".t_table_use_virtual .el-scrollbar__wrap")
-  }
-  // 获取缓存高度，无缓存，取配置项的 itemHeight
-  const getItemHeightFromCache = (index: number | string) => {
-    const val = RenderedItemsCache[index]
-    return val === void 0 ? 50 : val
-  }
-  // 更新实际高度
-  const updateActualHeight = () => {
-    let actualHeight = 0
-    saveDATA.value.forEach((_, i) => {
-      actualHeight += getItemHeightFromCache(i)
-    })
-    actualHeightContainerEl.value!.style.height = actualHeight + "px"
-  }
-  // 更新偏移值
-  const updateOffset = (offset: number) => {
-    if (translateContainerEl.value && translateContainerEl.value.style) {
-      translateContainerEl.value!.style.transform = `translateY(${offset}px)`
-    }
-  }
-  // 更新已渲染列表项的缓存高度
-  const updateRenderedItemCache = (index: number) => {
-    // 当所有元素的实际高度更新完毕，就不需要重新计算高度
-    const shouldUpdate = Object.keys(RenderedItemsCache).length < saveDATA.value.length
-    if (!shouldUpdate) return
-    nextTick(() => {
-      // 获取所有列表项元素
-      const Items: HTMLElement[] = Array.from(
-        document.querySelectorAll(".t_table_use_virtual .el-table__row")
-      )
-      // 进行缓存
-      Items.forEach(el => {
-        if (!RenderedItemsCache[index]) {
-          RenderedItemsCache[index] = el.offsetHeight
-        }
-        index++
-      })
-      // 更新实际高度
-      updateActualHeight()
-    })
-  }
-  return {
-    scrollContainerEl,
-    updateRenderedItemCache,
-    updateOffset,
-    getDom,
-    getItemHeightFromCache,
-    saveDATA
-  }
-}

package/packages/table/style/index.ts

@@ -1 +0,0 @@
-import "./table.scss"