gy-ui-plus 1.0.9 → 1.0.10

package/packages/table/src/ColumnSet.vue

@@ -1,170 +0,0 @@
-<template>
-  <el-dropdown trigger="click" popper-class="column_set">
-    <el-button v-bind="columnBind">{{ columnBind.btnTxt || "列设置" }}</el-button>
-    <template #dropdown>
-      <div class="title" v-if="columnBind.isShowTitle">{{ columnBind.title || "列设置" }}</div>
-      <el-dropdown-menu>
-        <el-dropdown-item :divided="columnBind.isShowTitle">
-          <el-tree
-            ref="treeRef"
-            class="t_table_column_setting_dropdown"
-            :data="state.columnSet"
-            node-key="prop"
-            :props="{ label: 'label', children: 'children', disabled: 'checkBoxDisabled' }"
-            show-checkbox
-            draggable
-            default-expand-all
-            check-strictly
-            :allow-drag="allowDrag"
-            :allow-drop="allowDrop"
-            :default-checked-keys="defaultCheckedKeys"
-            @check="onTreeCheck"
-            @node-drop="handleDrop"
-          >
-          </el-tree>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
-</template>
-
-<script setup lang="ts">
-import { watch, onMounted, reactive, computed, useAttrs, ref } from "vue"
-defineOptions({
-  name: "ColumnSet"
-})
-export interface Column {
-  label: string
-  prop: string
-  checkBoxDisabled?: boolean
-  hidden?: boolean
-}
-
-export interface ColumnSetProps {
-  columns: Column[]
-  title?: string
-  name?: string
-  columnSetBind?: Record<string, any>
-}
-
-const props = withDefaults(defineProps<ColumnSetProps>(), {
-  columns: () => [],
-  title: "",
-  name: "",
-  columnSetBind: () => ({})
-})
-const treeRef = ref()
-const $attrs: any = useAttrs()
-const columnBind = computed(() => {
-  const columnSetBind = { btnTxt: "列设置", title: "列设置", ...props.columnSetBind }
-  return { size: "default", icon: "Setting", isShowTitle: true, ...$attrs, ...columnSetBind }
-})
-
-const emits = defineEmits(["columnSetting"])
-const state = reactive({
-  columnSet: [] as Column[]
-})
-const defaultCheckedKeys = ref<string[]>([])
-
-const getColumnSetCache = () => {
-  let value =
-    localStorage.getItem(`t-ui-plus:TTable.columnSet-${props.name || props.title}`) || "[]"
-  let columnOption = initColumnSet()
-  let valueArr = (JSON.parse(value) as any[]) || []
-  columnOption.forEach(item => {
-    let findEle = valueArr.find(
-      (ele: { label: any; prop: any }) => ele.label === item.label && ele.prop === item.prop
-    )
-    item.hidden = findEle ? findEle.hidden : false
-  })
-  value = JSON.stringify(valueArr.length ? valueArr : columnOption)
-  return value ? JSON.parse(value) : initColumnSet()
-}
-const initColumnSet = () => {
-  return props.columns.map((col: any) => ({
-    label: col.label,
-    prop: col.prop,
-    checkBoxDisabled: false,
-    hidden: false
-  }))
-}
-
-onMounted(() => {
-  state.columnSet = getColumnSetCache()
-  defaultCheckedKeys.value = state.columnSet.filter(c => !c.hidden).map(c => c.prop)
-  emits("columnSetting", state.columnSet)
-})
-
-watch(
-  () => state.columnSet,
-  val => {
-    emits("columnSetting", val)
-    localStorage.setItem(
-      `t-ui-plus:TTable.columnSet-${props.name || props.title}`,
-      JSON.stringify(val)
-    )
-    defaultCheckedKeys.value = state.columnSet.filter(c => !c.hidden).map(c => c.prop)
-  },
-  { deep: true }
-)
-
-const reSetColumnSet = () => {
-  let value: any = localStorage.getItem(`t-ui-plus:TTable.columnSet-${props.name || props.title}`)
-  state.columnSet = JSON.parse(value)
-  defaultCheckedKeys.value = state.columnSet.filter(c => !c.hidden).map(c => c.prop)
-  emits("columnSetting", state.columnSet)
-}
-
-const onTreeCheck = () => {
-  // 获取最新勾选的key
-  const checkedKeys = treeRef.value?.getCheckedKeys() || []
-  state.columnSet.forEach(col => {
-    col.hidden = !checkedKeys.includes(col.prop)
-  })
-  // 至少保留一个可见列
-  const visibleCols = state.columnSet.filter(col => !col.hidden)
-  if (visibleCols.length < 2) {
-    visibleCols.forEach(col => (col.checkBoxDisabled = true))
-  } else {
-    state.columnSet.forEach(col => (col.checkBoxDisabled = false))
-  }
-}
-// 限制拖拽结点
-const allowDrag = () => {
-  return true
-}
-const allowDrop = (draggingNode: any, dropNode: any, type: any) => {
-  // 只允许同级节点之间的拖拽
-  if (draggingNode.level !== dropNode.level) {
-    return false
-  }
-  // 如果是同级节点，还需要判断是否是前后节点的拖拽
-  if (type !== "prev" && type !== "next") {
-    return false
-  }
-  return true
-}
-// 拖拽排序
-const handleDrop = (draggingNode: any, dropNode: any, dropType: string, ev: Event) => {
-  // 只允许拖拽到同级（禁止拖为子级）
-  if (dropType === "inner") {
-    ev.preventDefault()
-    return
-  }
-  const draggingIndex = state.columnSet.findIndex(col => col.prop === draggingNode.data.prop)
-  const dropIndex = state.columnSet.findIndex(col => col.prop === dropNode.data.prop)
-  if (draggingIndex === -1 || dropIndex === -1) return
-  const item = state.columnSet.splice(draggingIndex, 1)[0]
-  if (dropType === "before") {
-    // 如果拖拽项在目标项后面，直接插入；如果在前面，dropIndex要减1
-    const insertIndex = draggingIndex < dropIndex ? dropIndex - 1 : dropIndex
-    state.columnSet.splice(insertIndex, 0, item)
-  } else if (dropType === "after") {
-    state.columnSet.splice(dropIndex + 1, 0, item)
-  }
-}
-
-defineExpose({
-  reSetColumnSet
-})
-</script>

package/packages/table/src/GyTableColumn.vue

@@ -1,100 +0,0 @@
-<template>
-  <el-table-column
-    v-if="typeof item.isShowCol == 'function' ? item.isShowCol(item) : !item.isShowCol"
-    :prop="item.prop"
-    :label="item.label"
-    :type="item.type"
-    :align="item.align || align"
-    :min-width="item['min-width'] || item.minWidth"
-    :width="item.width"
-    :fixed="item.fixed"
-  >
-    <template #header v-if="item.renderHeader">
-      <render-header :column="item" :render="item.renderHeader" />
-    </template>
-    <template v-for="(val, index) of item.children">
-      <gy-table-column v-if="val.children" :key="index" :item="val" v-bind="$attrs">
-        <template v-for="(_index, name) in slots" v-slot:[name]="data">
-          <slot :name="name" v-bind="data"></slot>
-        </template>
-      </gy-table-column>
-      <el-table-column
-        v-else
-        :key="val.prop"
-        :prop="val.prop"
-        :label="val.label"
-        :min-width="val['min-width'] || val.minWidth"
-        :width="val.width"
-        :sortable="val.sortable || val.sort || sortable"
-        :align="val.align || align"
-        :fixed="val.fixed"
-        :formatter="val.formatter"
-        v-if="typeof val.isShowCol == 'function' ? val.isShowCol(val) : !val.isShowCol"
-        v-bind="{ 'show-overflow-tooltip': true, ...val.bind, ...$attrs }"
-      >
-        <template #header v-if="val.renderHeader">
-          <render-header :column="val" :render="val.renderHeader" />
-        </template>
-        <template #default="scope">
-          <!-- render渲染 -->
-          <template v-if="val.render">
-            <render-col :column="val" :row="scope.row" :render="val.render" :index="scope.$index" />
-          </template>
-          <!-- 自定义插槽 -->
-          <template v-if="val.slotNameMerge">
-            <slot :name="val.slotNameMerge" :scope="scope"></slot>
-          </template>
-          <!-- 单个单元格编辑 -->
-          <template v-if="val.canEdit">
-            <single-edit-cell
-              :isShowRules="false"
-              :configEdit="val.configEdit"
-              v-model="scope.row[val.prop]"
-              :prop="val.prop"
-              :scope="scope"
-              @handleEvent="({ type, val }:any) => emits('handleEvent', type, val, scope.$index)"
-              v-bind="$attrs"
-            >
-              <template v-for="(_index, name) in slots" v-slot:[name]="data">
-                <slot :name="name" v-bind="data"></slot>
-              </template>
-            </single-edit-cell>
-          </template>
-          <div v-if="!val.render && !val.slotNameMerge && !val.canEdit && !val.formatter">
-            {{ scope.row[val.prop] }}
-          </div>
-        </template>
-      </el-table-column>
-    </template>
-  </el-table-column>
-</template>
-
-<script setup lang="tsx">
-import SingleEditCell from './singleEditCell.vue'
-import RenderCol from './renderCol.vue'
-import RenderHeader from './renderHeader.vue'
-import { useSlots } from 'vue'
-defineOptions({
-  name: 'GyTableColumn',
-})
-defineProps({
-  item: {
-    type: Object,
-    default: () => {
-      return {}
-    },
-    required: true,
-  },
-  align: {
-    type: String,
-    default: 'center',
-  },
-  sortable: {
-    type: [Boolean, String],
-  },
-})
-// 抛出事件
-const emits = defineEmits(['handleEvent'])
-// 获取所有插槽
-const slots = useSlots()
-</script>