@xuekl/cli-components 1.6.1 → 1.9.145

package/XklTable.vue

@@ -1,41 +1,76 @@
 <template>
-    <el-table ref="XklTable" :data="table.list" style="width: 100%"
-        :header-cell-style="table.headerCellStyle || recieveConf.headerCellStyle"
-        :header-cell-class-name="table.headerCellClassName" :cell-class-name="table.cellClassName" v-bind="table.element">
+    <el-table ref="XklTableRef" class="xkl-table" :data="table.virtual ? table.virtualList : table.list"
+        style="width: 100%" :header-cell-style="table.headerCellStyle || recieveConf.headerCellStyle"
+        :header-cell-class-name="table.headerCellClassName" :cell-class-name="table.cellClassName"
+        v-bind="{ ...table.element, ...$attrs }" v-on="table.events || {}">
         <el-table-column v-if="table.expand" v-bind="table.expandConfig" type="expand" align="center">
             <template v-slot="{ row }">
                 <slot name="expand" :row="row"></slot>
             </template>
         </el-table-column>
-        <el-table-column v-if="table.selection" v-bind="table.selectionConfig" type="selection"
-            align="center"></el-table-column>
+        <el-table-column v-if="!!table.virtual" align="center" :show-overflow-tooltip="false"
+            class-name="el-table-column--selection" fixed="left" width="50px">
+            <template #header>
+                <el-checkbox @change="virtualSelectAll()" v-model="virtualAllSelected"
+                    :indeterminate="virtualIsIndeterminate"></el-checkbox>
+            </template>
+            <template #default="{ row }">
+                <el-checkbox @change="virtualSelect(row)" v-model="row.selected" @click.stop></el-checkbox>
+            </template>
+        </el-table-column>
+        <template v-else>
+            <el-table-column v-if="table.disabledSelectionPlaceholder" class-name="el-table-column--selection"
+                fixed="left" align="center" width="50px">
+                <template #header>
+                    <el-checkbox :disabled="true" :checked="true"></el-checkbox>
+                </template>
+                <el-checkbox :disabled="true" :checked="true"></el-checkbox>
+            </el-table-column>
+            <el-table-column v-if="!table.disabledSelectionPlaceholder && table.selection"
+                v-bind="table.selectionConfig" :show-overflow-tooltip="false" type="selection"
+                align="center"></el-table-column>
+        </template>
         <el-table-column v-if="table.index" type="index" align="center" v-bind="table.indexConfig"></el-table-column>
-        <el-table-column v-for="  item   in   table.columns  " :key="item.prop" :prop="item.prop" :label="item.label"
-            :width="item.width" :align="item.align || 'center'" :sortable="item.sortable" v-bind="item.element">
+        <el-table-column v-if="table.customColumn" align="center" v-bind="table.customColumnConfig">
+            <template #default="{ row, $index }">
+                <slot name="customColumn" :row="row" :index="$index"></slot>
+            </template>
+        </el-table-column>
+        <el-table-column v-for="item in table.columns" :key="item.prop" :prop="item.prop" :label="item.label"
+            :width="item.width" :align="item.align || recieveConf.defaultAlignment || 'center'"
+            :sortable="item.sortable" v-bind="item.element">
             <template v-if="item.reflect" v-slot="{ row }">
                 {{ row[item.reflect] }}
             </template>
             <template v-if="item.dict" v-slot="{ row }">
-                <el-tag v-if="item.tags"
+                <el-tag v-if="item.tags && dictLabel(item, row)" :key="row[item.prop]"
                     :style="{ backgroundColor: tagColor(item, row) + '22', borderColor: tagColor(item, row) + '22', color: tagColor(item, row) }">
                     {{ dictLabel(item, row) }}
                 </el-tag>
                 <span v-else>{{ dictLabel(item, row) }}</span>
             </template>
             <template v-else-if="item.tags" v-slot="{ row }">
-                <el-tag
+                <el-tag v-if="row[item.prop]" :key="row[item.prop]"
                     :style="{ backgroundColor: tagColor(item, row) + '22', borderColor: tagColor(item, row) + '22', color: tagColor(item, row) }">
                     {{ row[item.prop] }}
                 </el-tag>
             </template>
-            <template v-else-if="item.slot" v-slot="{ row, $index }">
+            <template v-else-if="slots[item.prop]" v-slot="{ row, $index }">
                 <slot :name="item.prop" :row="row" :index="$index"></slot>
             </template>
+            <!-- <template v-else-if="item.slot" v-slot="{ row, $index }">
+                <slot :name="item.prop" :row="row" :index="$index"></slot>
+            </template> -->
             <template v-else-if="item.format" v-slot="{ row }">
-                {{moment(row[item.prop]).format(item.format)}}
+                {{ moment(row[item.prop]).format(item.format) }}
             </template>
         </el-table-column>
-        <el-table-column v-if="table.operation.operation !== false" align="center" v-bind="table.operation">
+        <el-table-column v-for="item in table.endColumns" :key="item.prop" :prop="item.prop" :label="item.label"
+            :width="item.width" :align="item.align || recieveConf.defaultAlignment || 'center'"
+            :sortable="item.sortable" v-bind="item.element">
+        </el-table-column>
+        <el-table-column v-if="table.operation.operation !== false" align="center" :resizable="false"
+            v-bind="table.operation">
             <template #default="{ row, $index }">
                 <slot name="_operation" :row="row" :index="$index"></slot>
             </template>
@@ -44,6 +79,8 @@
             <el-empty description="暂无数据"></el-empty>
         </template>
     </el-table>
+
+    <!-- <xkl-table-v2 v-else ref="XklTable" :table="table"></xkl-table-v2> -->
 </template>
 <script lang="ts">
 export default {
@@ -51,15 +88,18 @@ export default {
 }
 </script>
 <script setup lang="ts">
-import http from "@/utils/httpRequest"
-import { computed, ref } from "vue";
+import { computed, onBeforeMount, onBeforeUnmount, onMounted, ref, useSlots } from "vue";
+import useApp from "@/store/app";
+import { tableConf } from './index'
+import DictStore from "@/utils/DictStore";
 import moment from 'dayjs'
-import { baseConf, tableConf } from './index'
 const props = defineProps(['table'])
+const emit = defineEmits(['virtual-select', 'virtual-select-all'])
+const slots = useSlots()
 const { table } = props
 const dictTypes = table.columns.map(res => res.dict).filter(res => !!res)
 const dictStore = ref({})
-const XklTable = ref(null)
+const XklTableRef = ref(null)
 table.element = table.element || {}
 
 const recieveConf = tableConf || {}
@@ -67,16 +107,30 @@ if (tableConf) {
     table.element = { ...tableConf.element, ...table.element }
 }
 
-dictTypes.forEach((dict: string) => {
-    http({
-        url: http.adornUrl(`${baseConf.dict_api_url}${dict}`),
-        method: 'get',
-        params: http.adornParams({})
-    }).then(({ data }) => {
-        dictStore.value[dict] = data.data
-    })
+
+const ratio = computed(() => {
+    const docEl = document.documentElement
+    const width = docEl.getBoundingClientRect().width;
+    return width / 1920
+})
+
+if (tableConf && tableConf.element) {
+    if (tableConf.element.maxHeight) {
+        table.element.maxHeight = tableConf.element.maxHeight * ratio.value
+    }
+    if (tableConf.element.height) {
+        table.element.height = tableConf.element.height * ratio.value
+    }
+}
+
+onBeforeMount(async () => {
+    for (let dict of dictTypes) {
+        dictStore.value[dict] = await DictStore.getDict(dict)
+    }
 })
 
+
+
 const dictLabel = computed(() => {
     return function (col: any, row: any) {
         if (dictStore.value[col.dict]) {
@@ -87,6 +141,7 @@ const dictLabel = computed(() => {
     }
 })
 
+
 const tagColor = computed(() => {
     return function (col, row) {
         if (col.tags) {
@@ -101,15 +156,35 @@ const tagColor = computed(() => {
     }
 })
 
-const getRef = () => {
-    return XklTable.value
+table.getRef = () => XklTableRef.value
+
+const virtualAllSelected = ref(false)
+const virtualIsIndeterminate = ref(false)
+
+const setCheckboxState = (isAllSelected, isIndeterminate) => {
+    virtualAllSelected.value = isAllSelected
+    virtualIsIndeterminate.value = isIndeterminate
+}
+
+const virtualSelectAll = () => {
+    emit('virtual-select-all', virtualAllSelected.value, setCheckboxState)
 }
 
-table.getRef = () => XklTable.value
+const virtualSelect = (row) => {
+    emit('virtual-select', row)
+}
 
-defineExpose({
-    getRef
+onMounted(() => {
+})
+
+
+onBeforeUnmount(() => {
+    table.getRef = null
 })
 
 
+defineExpose({
+    getRef: table.getRef,
+    setCheckboxState
+})
 </script>

package/XklTableV2.vue

@@ -0,0 +1,54 @@
+<template>
+    <div style="height: 400px">
+        <el-auto-resizer>
+            <template #default="{ height, width }">
+                <el-table-v2 v-model:sort-state="sortState" :header-class="table.headerClass || recieveConf.headerClass"
+                    :columns="table.vColumns" :data="table.list" :width="width" :height="height" fixed
+                    @column-sort="onSort" />
+            </template>
+        </el-auto-resizer>
+    </div>
+</template>
+<script lang="ts">
+export default {
+    name: 'XklTableV2'
+}
+</script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { baseConf, tableConf } from './index'
+import { SortState, TableV2SortOrder } from 'element-plus';
+const props = defineProps(['table'])
+const { table } = props
+const recieveConf = tableConf || {}
+const sortState = ref<SortState>({})
+table.vColumns = table.columns.map(col => {
+    let sortable = false
+    if (col.extra) {
+        sortable = col.extra.sortable
+    } else {
+        sortable = col.element.sortable
+    }
+    if (sortable) {
+        sortState.value[col.prop] = TableV2SortOrder.ASC
+    }
+    return {
+        key: col.prop,
+        dataKey: col.prop,
+        title: col.label,
+        width: 150,
+        sortable
+    }
+})
+
+
+
+const onSort = ({ key, order }) => {
+    sortState.value[key] = order
+    table.events.sortChange({ prop: key, order: order + 'ending' })
+}
+
+const clearSelection = () => { }
+
+defineExpose({ clearSelection })
+</script>

package/XklUpload.vue

@@ -26,7 +26,8 @@ const { config, modelValue } = props
 config.params = config.params || (() => { })
 
 const headers = {
-    [config.authorization || 'Authorization']: getToken()
+    [config.authorization || 'Authorization']: getToken(),
+    ...config.headers
 }
 const actionUrl = http.adornUrl(config.url || '/common/upload')
 

package/XklVirtualScroll.vue

@@ -0,0 +1,332 @@
+<template>
+    <div ref="XklVirtualScrollRef">
+        <slot></slot>
+    </div>
+</template>
+<script lang="ts">
+export default {
+    name: 'XklVirtualScroll'
+}
+</script>
+<script setup lang="ts">
+import { debounce } from '@xuekl/cli-utils'
+import { computed, nextTick, onMounted, reactive, ref, watch, onBeforeUnmount, onActivated } from 'vue';
+const props = defineProps({
+    data: {
+        type: Array,
+        required: true
+    },
+    height: {
+        type: Number,
+        default: 60
+    },
+    buffer: {
+        type: Number,
+        default: 200
+    },
+    keyProp: {
+        type: String,
+        default: 'id'
+    },
+    throttleTime: {
+        type: Number,
+        default: 100
+    },
+    target: {
+        type: String
+    },
+    itemTarget: {
+        type: String
+    }
+})
+
+const emit = defineEmits(['change'])
+
+const XklVirtualScrollRef = ref()
+let ThisEl
+
+const sizes: any = ref({})
+const itemSize = ref(40)
+
+const offsetMap = computed(() => {
+    const { keyProp, height, data }: any = props
+    const res = {}
+    let total = 0
+    for (let i = 0; i < data.length; i++) {
+        const key = data[i][keyProp]
+        res[key] = total
+
+        // const curSize = sizes.value[key]
+        const curSize = itemSize.value
+        const size = typeof curSize === 'number' ? curSize : height
+        total += size
+    }
+    return res
+})
+
+const rootForm = reactive<{
+    renderData: any[],
+    top: number,
+    bottom: number,
+    start: number,
+    end: number,
+    height: number,
+    timer?: NodeJS.Timeout,
+    onScroll?: any
+}>({
+    renderData: [],
+    top: 0,
+    bottom: 0,
+    start: 0,
+    end: 0,
+    height: 360
+})
+
+
+const scroller = ref()
+
+const updateSizes = () => {
+    const row = ThisEl.querySelector(props.itemTarget)
+    if (row) {
+        itemSize.value = row.offsetHeight
+    }
+    // const rows = ThisEl.querySelectorAll(props.itemTarget)
+
+    // Array.from(rows).forEach((row: any, index) => {
+    //     const item = rootForm.renderData[index]
+    //     if (!item) return
+
+    //     const key = item[props.keyProp]
+    //     const offsetHeight = row.offsetHeight
+
+    //     if (sizes.value[key] !== offsetHeight) {
+    //         sizes.value[key] = offsetHeight
+    //     }
+    // })
+}
+
+const getOffsetTop = (index) => {
+    // const item = props.data[index]
+    // if (item) {
+    //     return offsetMap.value[item[props.keyProp]] || 0
+    // }
+    // return 0
+    return index * itemSize.value
+}
+
+// 获取某条数据的尺寸
+const getSize = (index) => {
+    return itemSize.value || props.height
+    // const item = props.data[index]
+    // if (item) {
+    //     const key = item[props.keyProp]
+    //     return sizes.value[key] || rootForm.height
+    // }
+    // return rootForm.height
+}
+
+let beforeScrollTop = 0
+
+// 计算只在视图上渲染的数据
+const calcRenderData = () => {
+    let startTime = Date.now()
+    const { data, buffer } = props
+    // 计算可视范围顶部、底部
+    const top = scroller.value.scrollTop - buffer
+    const bottom = scroller.value.scrollTop + scroller.value.offsetHeight + buffer
+    beforeScrollTop = scroller.value.scrollTop
+
+    // 二分法计算可视范围内的开始的第一个内容
+    let l = 0
+    let r = data.length - 1
+    let mid = 0
+    while (l <= r) {
+        mid = Math.floor((l + r) / 2)
+        const midVal = getOffsetTop(mid)
+        if (midVal < top) {
+            const midNextVal = getOffsetTop(mid + 1)
+            if (midNextVal > top) break
+            l = mid + 1
+        } else {
+            r = mid - 1
+        }
+    }
+
+    // 计算渲染内容的开始、结束索引
+    let start = mid
+    let end = data.length - 1
+    for (let i = start + 1; i < data.length; i++) {
+        const offsetTop = getOffsetTop(i)
+        if (offsetTop >= bottom) {
+            end = i
+            break
+        }
+    }
+
+    // 开始索引始终保持偶数，如果为奇数，则加1使其保持偶数【确保表格行的偶数数一致，不会导致斑马纹乱序显示】
+    if (start % 2) {
+        start = start - 1
+    }
+    // //console.log(start, end, 'start end')
+
+    rootForm.top = top
+    rootForm.bottom = bottom
+    rootForm.start = start
+    rootForm.end = end
+    rootForm.renderData = data.slice(start, end + 1)
+    //console.log("calcRenderData。。。", start, end, bottom, top, scroller.value.offsetHeight)
+}
+
+// 计算位置
+const calcPosition = () => {
+    // const last = props.data.length - 1
+    const length = props.data.length
+    // 计算内容总高度
+    // const wrapHeight = last < 0 ? rootForm.height : getOffsetTop(last) + getSize(last)
+
+    const wrapHeight = (length * itemSize.value) || rootForm.height
+    // 计算当前滚动位置需要撑起的高度
+    const offsetTop = getOffsetTop(rootForm.start)
+
+
+    // 设置dom位置
+    // const classNames = [props.target]
+    // classNames.forEach(className => {
+
+
+    // })
+    const el = scroller.value
+    if (!el) return
+
+    // 创建wrapEl、innerEl
+    if (!el.wrapEl) {
+        const wrapEl = document.createElement('div')
+        const innerEl = document.createElement('div')
+        wrapEl.appendChild(innerEl)
+        innerEl.appendChild(el.children[0])
+        el.insertBefore(wrapEl, el.firstChild)
+        el.wrapEl = wrapEl
+        el.innerEl = innerEl
+    }
+
+    if (el.wrapEl) {
+        // 设置高度
+        el.wrapEl.style.height = wrapHeight + 'px'
+        // 设置transform撑起高度
+        // el.innerEl.style.transform = `translateY(${offsetTop}px)`
+        el.innerEl.style.setProperty('transform', `translateY(${offsetTop}px)`);
+
+        // 设置paddingTop撑起高度
+        // el.innerEl.style.paddingTop = `${offsetTop}px`
+        //console.log("calcPosition。。。")
+    }
+}
+
+// 空闲时更新位置
+const updatePosition = () => {
+    //console.log('我就一直走')
+    rootForm.timer && clearTimeout(rootForm.timer)
+    rootForm.timer = setTimeout(() => {
+        rootForm.timer && clearTimeout(rootForm.timer)
+        // 传入false，避免一直循环调用
+        handleScroll()
+    }, props.throttleTime + 10)
+}
+
+// 【外部调用】更新
+const update = () => {
+    //console.log('update');
+
+    updateAll()
+}
+
+// 【外部调用】滚动到第几行
+const scrollTo = (index, stop = false) => {
+    const item = props.data[index]
+    if (item && scroller.value) {
+        updateSizes()
+        calcRenderData()
+
+        nextTick(() => {
+            const offsetTop = getOffsetTop(index)
+            scroller.value.scrollTop = offsetTop
+
+            // 调用两次scrollTo，第一次滚动时，如果表格行初次渲染高度发生变化时，会导致滚动位置有偏差，此时需要第二次执行滚动，确保滚动位置无误
+            if (!stop) {
+                setTimeout(() => {
+                    scrollTo(index, true)
+                }, 50)
+            }
+        })
+    }
+}
+
+// 【外部调用】重置
+const reset = () => {
+    sizes.value = {}
+    scrollTo(0, false)
+}
+
+const updateAll = () => {
+    updateSizes()
+    calcRenderData()
+    calcPosition()
+    emit('change', rootForm.renderData, rootForm.start, rootForm.end)
+    //console.log('data change', rootForm.renderData);
+}
+
+let renderData = debounce(updateAll, 100, false)
+
+const handleScroll = () => {
+
+    // 更新当前尺寸（高度）
+    // updateSizes()
+    // 计算renderData
+    // calcRenderData()
+    renderData()
+    // 计算位置
+    // calcPosition()
+    // shouldUpdate && updatePosition()
+    // 触发事件
+
+}
+
+const initData = () => {
+
+    // 初次执行
+    // setTimeout(() => {
+    //     handleScroll()
+    // }, 100)
+
+    // 监听事件
+    // rootForm.onScroll = throttle(handleScroll, props.throttleTime)
+    scroller.value.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', handleScroll);
+}
+
+watch(() => props.data, () => {
+    update()
+})
+
+onMounted(() => {
+    ThisEl = XklVirtualScrollRef.value
+    scroller.value = ThisEl.querySelector(props.target)
+
+    initData()
+})
+
+onActivated(() => {
+    scroller.value.scrollTop = beforeScrollTop
+    update()
+
+})
+
+onBeforeUnmount(() => {
+    if (scroller.value) {
+        scroller.value.removeEventListener('scroll', handleScroll)
+        window.removeEventListener('resize', handleScroll)
+    }
+})
+</script>
+
+<style lang='less' scoped></style>