修改时间组件问题

2024-04-01 18:29:32 +08:00
parent 5a5d2b320d
commit 88359e824a
11 changed files with 254 additions and 92 deletions
--- a/src/components/form/datePicker/index.vue
+++ b/src/components/form/datePicker/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-select v-model="interval" style="width: 90px; margin-right: 10px" @change="timeChange">
+    <el-select v-model="interval" style="min-width: 90px; width: 90px; margin-right: 10px" @change="timeChange">
        <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-date-picker
@@ -22,7 +22,7 @@

 <script lang="ts" setup>
 import { DArrowLeft, VideoPause, DArrowRight } from '@element-plus/icons-vue'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'

 const interval = ref(3)
 const timeFlag = ref(1)
@@ -31,13 +31,13 @@ const disabledPicker = ref(true)
 const timeValue = ref()
 const backDisabled = ref(false)
 const preDisabled = ref(false)
-const timeOptions = [
+const timeOptions: any = ref([
    { label: '年份', value: 1 },
    { label: '季度', value: 2 },
    { label: '月份', value: 3 },
    { label: '周', value: 4 },
    { label: '自定义', value: 5 }
-]
+])
 const shortcuts = [
    {
        text: '最近一周',
@@ -86,8 +86,15 @@ const timeChange = (e: number) => {
        disabledPicker.value = true
        timeValue.value = [setTime(3), setTime()]
    } else if (e == 4) {
+        let year = parseInt(setTime().substring(0, 4))
+        let month = parseInt(setTime().substring(5, 7))
+        let date = parseInt(setTime().substring(8, 10))
+
+        var start = new Date(year, month - 1, date)
+        var dayOfWeek = start.getDay() == 0 ? 7 : start.getDay() - 1 // 如果为周日，则置为7天
+
        disabledPicker.value = true
-        timeValue.value = [setTime(0, 7), setTime()]
+        timeValue.value = [setTime(0, dayOfWeek), setTime(0, -6 + dayOfWeek)]
    } else if (e == 5) {
        disabledPicker.value = false
        backDisabled.value = true
@@ -133,6 +140,7 @@ const preClick = () => {
        //按周
    } else if (interval.value == 4) {
        //根据开始时间推
+
        let start = new Date(year, month - 1, date)
        start.setDate(start.getDate() - 7)
        startTime = formatTime(start)
@@ -385,8 +393,9 @@ const next = () => {

 const setTime = (flag = 0, e = 0) => {
    let dd = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'dd')
+
    let data = ''
-    if (dd < 4) {
+    if (dd < 4 || dd == 0) {
        data = window.XEUtils.toDateString(new Date().getTime() - (e + dd) * 3600 * 1000 * 24, 'yyyy-MM-dd')
    } else {
        data = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'yyyy-MM-dd')
@@ -447,7 +456,47 @@ const NowgetEndTime = () => {
    let endTime = year + sep + month + sep + date
    return endTime
 }
-defineExpose({ timeValue, interval, timeFlag })
+const setTimeOptions = (list: any) => {
+    timeOptions.value = list
+}
+const setInterval = (value: any) => {
+    interval.value = value
+    timeChange(value)
+}
+
+// 获取时间范围的同比
+function getYearOnYear(startDate: string, endDate: string): [string, string] {
+    const startYearAgo = new Date(startDate)
+    startYearAgo.setFullYear(startYearAgo.getFullYear() - 1)
+
+    const endYearAgo = new Date(endDate)
+    endYearAgo.setFullYear(endYearAgo.getFullYear() - 1)
+
+    return [formatDate(startYearAgo), formatDate(endYearAgo)]
+}
+
+// 获取时间范围的环比
+function getMonthOnMonth(startDate: string, endDate: string): [string, string] {
+    const start = new Date(startDate)
+    const end = new Date(endDate)
+
+    const diffTime = end.getTime() - start.getTime() + 60 * 60 * 24 * 1000 // 计算时间差
+    const startMonthAgo = new Date(start)
+    startMonthAgo.setTime(startMonthAgo.getTime() - diffTime) // 将开始时间向前推移相同的时间差
+
+    const endMonthAgo = new Date(start)
+    endMonthAgo.setDate(start.getDate() - 1) // 结束时间是开始时间的前一天
+
+    return [formatDate(startMonthAgo), formatDate(endMonthAgo)]
+}
+// 格式化日期为 YYYY-MM-DD
+function formatDate(date: Date): string {
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${year}-${month}-${day}`
+}
+defineExpose({ timeValue, interval, timeFlag, setTimeOptions, setInterval, getYearOnYear, getMonthOnMonth })
 </script>

 <style scoped>
--- 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 -->