修改时间组件问题

2024-04-01 18:29:32 +08:00
parent 5a5d2b320d
commit 88359e824a
11 changed files with 254 additions and 92 deletions
--- a/src/components/table/column/groupColumn.vue
+++ b/src/components/table/column/groupColumn.vue
@@ -0,0 +1,41 @@
+<template>
+    <template v-for="(item, index) in props.column" :key="index + '-column'">
+        <vxe-table-colgroup
+            v-if="item.children"
+            :field="item.field"
+            :title="item.title"
+            :min-width="item.width"
+            show-overflow
+            align="center"
+        >
+            <!-- 递归调用 -->
+            <GroupColumn :column="item.children" />
+        </vxe-table-colgroup>
+        <Column :attr="item" :tree-node="item.treeNode" v-else>
+            <template v-if="item.render" #default="scope">
+                <FieldRender
+                    :field="item"
+                    :row="scope.row"
+                    :column="scope.column"
+                    :index="scope.rowIndex"
+                    :key="
+                        index +
+                        '-' +
+                        item.render +
+                        '-' +
+                        (item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
+                    "
+                />
+            </template>
+        </Column>
+    </template>
+</template>
+
+<script setup lang="ts">
+import FieldRender from '@/components/table/fieldRender/index.vue'
+import Column from '@/components/table/column/index.vue'
+
+const props = defineProps<{
+    column: any[]
+}>()
+</script>
--- a/src/components/table/defaultAttribute.ts
+++ b/src/components/table/defaultAttribute.ts
@@ -7,7 +7,7 @@ export const defaultAttribute: VxeTableProps = {
    stripe: true,
    size: 'small',
    columnConfig: { resizable: true },
-    rowConfig: { isCurrent: true, isHover: true,keyField: 'id' },
+    rowConfig: { isCurrent: true, isHover: true },
    scrollX: { scrollToLeftOnChange: true },
    scrollY: { scrollToTopOnChange: true, enabled: true },
    treeConfig: {
--- a/src/components/table/header/index.vue
+++ b/src/components/table/header/index.vue
@@ -2,8 +2,8 @@
    <div ref="tableHeader" class="cn-table-header">
        <div class="table-header ba-scroll-style">
            <el-form
-                style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px"
-                id="header-form"
+                style="flex: 1; height: 32px; margin-right: 20px"
+                ref="headerForm"
                @submit.prevent=""
                @keyup.enter="onComSearch"
                label-position="left"
@@ -22,27 +22,19 @@
                    <Icon size="14" name="el-icon-ArrowUp" style="color: #fff" v-if="showSelect" />
                    <Icon size="14" name="el-icon-ArrowDown" style="color: #fff" v-else />
                </el-button>
-                <el-button @click="onComSearch" type="primary" :icon="Search">查询</el-button>
-                <el-button @click="onResetForm" :icon="RefreshLeft">重置</el-button>
+                <el-button @click="onComSearch" v-if="showSearch" type="primary" :icon="Search">查询</el-button>
+                <el-button @click="onResetForm" v-if="showSearch" :icon="RefreshLeft">重置</el-button>
            </template>
            <slot name="operation"></slot>
        </div>
        <el-form
            :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
-            id="header-form-second"
+            ref="headerFormSecond"
            @submit.prevent=""
            @keyup.enter="onComSearch"
            label-position="left"
            :inline="true"
-        >
-            <el-form-item label="区域" v-if="area">
-                <Area ref="areaRef" v-model="tableStore.table.params.deptIndex" />
-            </el-form-item>
-            <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
-                <DatePicker ref="datePickerRef"></DatePicker>
-            </el-form-item>
-            <slot name="select"></slot>
-        </el-form>
+        ></el-form>
    </div>
 </template>

@@ -60,15 +52,19 @@ const tableHeader = ref()
 const datePickerRef = ref()
 const dictData = useDictData()
 const areaRef = ref()
+const headerForm = ref()
+const headerFormSecond = ref()

 interface Props {
    datePicker?: boolean
    area?: boolean
+    showSearch?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
    datePicker: false,
-    area: false
+    area: false,
+    showSearch: true
 })
 // 动态计算table高度
 const resizeObserver = new ResizeObserver(entries => {
@@ -114,33 +110,30 @@ const handlerHeight = () => {
    ).height as string
 }
 const computedSearchRow = () => {
-    const headerForm = document.getElementById('header-form') as HTMLElement
-    const headerFormSecond = document.getElementById('header-form-second') as HTMLElement
-    if (!headerForm) return
-    // 判断是否需要折叠
-    if (headerForm.scrollHeight > 50) {
-        showUnfoldButton.value = true
-    } else {
-        showUnfoldButton.value = false
-    }
+    if (!headerForm.value.$el) return

-    // 清空headerFormSecond下的元素
-    while (headerFormSecond.firstChild) {
-        headerFormSecond.removeChild(headerFormSecond.firstChild)
+    // 清空headerFormSecond.value.$el下的元素
+    while (headerFormSecond.value.$el.firstChild) {
+        headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)
    }

    // 获取第一行放了几个表单
-    const elFormItem = document.querySelectorAll('#header-form .el-form-item') as NodeListOf<HTMLElement>
-
-    //  把第一行放不下的复制一份放到headerFormSecond
+    const elFormItem = headerForm.value.$el.querySelectorAll('.el-form-item')
+    //  把第一行放不下的复制一份放到headerFormSecond.value.$el
    let width = 0
    for (let i = 0; i < elFormItem.length; i++) {
        width += elFormItem[i].offsetWidth + 32
-        if (width > headerForm.offsetWidth) {
-            const clonedForm = elFormItem[i].cloneNode(true)
-            headerFormSecond.appendChild(clonedForm)
+        if (width > headerForm.value.$el.offsetWidth) {
+            headerFormSecond.value.$el.appendChild(elFormItem[i])
        }
    }
+
+    // 判断是否需要折叠
+    if (headerFormSecond.value.$el.scrollHeight > 0) {
+        showUnfoldButton.value = true
+    } else {
+        showUnfoldButton.value = false
+    }
 }

 const showSelect = ref(false)
@@ -161,10 +154,20 @@ const onComSearch = async () => {
 const onResetForm = () => {
    tableStore.onTableAction('reset', {})
 }
-defineExpose({ onComSearch, areaRef })
+const setDatePicker = (list: any) => {
+    datePickerRef.value.setTimeOptions(list)
+}
+const setInterval = (val: any) => {
+    datePickerRef.value.setInterval(val)
+}
+
+defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef })
 </script>

 <style scoped lang="scss">
+.cn-table-header {
+    border: 1px solid var(--el-border-color);
+}
 .table-header {
    position: relative;
    overflow-x: auto;
@@ -174,7 +177,7 @@ defineExpose({ onComSearch, areaRef })
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
-    border: 1px solid var(--el-border-color);
+
    border-bottom: none;
    padding: 13px 15px;
    font-size: 14px;
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@@ -11,40 +11,7 @@
        >
            <!-- Column 组件内部是 el-table-column -->
            <template v-if="isGroup">
-                <vxe-table-colgroup
-                    v-if="isGroup"
-                    v-for="(item, index) in tableStore.table.column"
-                    :field="item.field"
-                    :title="item.title"
-                    :key="index"
-                    :min-width="item.width"
-                    show-overflow
-                    align="center"
-                >
-                    <Column
-                        :attr="child"
-                        :key="key + '-column'"
-                        v-for="(child, key) in item.children"
-                        :tree-node="child.treeNode"
-                    >
-                        <!-- tableStore 预设的列 render 方案 -->
-                        <template v-if="child.render" #default="scope">
-                            <FieldRender
-                                :field="child"
-                                :row="scope.row"
-                                :column="scope.column"
-                                :index="scope.rowIndex"
-                                :key="
-                                    key +
-                                    '-' +
-                                    child.render +
-                                    '-' +
-                                    (child.field ? '-' + child.field + '-' + scope.row[child.field] : '')
-                                "
-                            />
-                        </template>
-                    </Column>
-                </vxe-table-colgroup>
+                <GroupColumn :column="tableStore.table.column" />
            </template>
            <template v-else>
                <Column
@@ -96,8 +63,10 @@ import type { ElTable } from 'element-plus'
 import { VxeTableEvents, VxeTableInstance } from 'vxe-table'
 import FieldRender from '@/components/table/fieldRender/index.vue'
 import Column from '@/components/table/column/index.vue'
+import GroupColumn from '@/components/table/column/groupColumn.vue'
 import { useConfig } from '@/stores/config'
 import type TableStoreClass from '@/utils/tableStore'
+
 import { defaultAttribute } from '@/components/table/defaultAttribute'

 const config = useConfig()
@@ -114,7 +83,7 @@ const props = withDefaults(defineProps<Props>(), {
 onMounted(() => {
    tableStore.table.ref = tableRef.value as VxeTableInstance
 })
-console.log(props)
+// console.log(props)
 const onTableSizeChange = (val: number) => {
    tableStore.onTableAction('page-size-change', { size: val })
 }
@@ -137,11 +106,8 @@ const pageSizes = computed(() => {
 * 记录选择的项
 */
 const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
-    const $table = tableRef.value
-    if ($table) {
-        const records = $table.getCheckboxRecords()
-        tableStore.onTableAction('selection-change', records)
-    }
+    const records = (tableRef.value as VxeTableInstance).getCheckboxRecords()
+    tableStore.onTableAction('selection-change', records)
 }

 const getRef = () => {
@@ -176,4 +142,11 @@ defineExpose({
    border-right: 1px solid #e4e7e9;
    border-bottom: 1px solid #e4e7e9;
 }
+
+:deep(.el-pagination__sizes) {
+    .el-select {
+        min-width: 128px;
+    }
+}
 </style>
+<!-- @/components/table/column/GroupColumn.vue@/components/table/column/GroupColumn.vue -->