修改 时间组件问题

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>

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>

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: {

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"
+                style="flex: 1; height: 32px; margin-right: 20px"
-                id="header-form"
+                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="onComSearch" v-if="showSearch" type="primary" :icon="Search">查询</el-button>
-                <el-button @click="onResetForm" :icon="RefreshLeft">重置</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>
-            <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>
     </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
+    if (!headerForm.value.$el) return
-    const headerFormSecond = document.getElementById('header-form-second') as HTMLElement
-    if (!headerForm) return
-    // 判断是否需要折叠
-    if (headerForm.scrollHeight > 50) {
-        showUnfoldButton.value = true
-    } else {
-        showUnfoldButton.value = false
-    }
 
-    // 清空headerFormSecond下的元素
+    // 清空headerFormSecond.value.$el下的元素
-    while (headerFormSecond.firstChild) {
+    while (headerFormSecond.value.$el.firstChild) {
-        headerFormSecond.removeChild(headerFormSecond.firstChild)
+        headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)
     }
 
     // 获取第一行放了几个表单
-    const elFormItem = document.querySelectorAll('#header-form .el-form-item') as NodeListOf<HTMLElement>
+    const elFormItem = headerForm.value.$el.querySelectorAll('.el-form-item')
-
+    //  把第一行放不下的复制一份放到headerFormSecond.value.$el
-    //  把第一行放不下的复制一份放到headerFormSecond
     let width = 0
     for (let i = 0; i < elFormItem.length; i++) {
         width += elFormItem[i].offsetWidth + 32
-        if (width > headerForm.offsetWidth) {
+        if (width > headerForm.value.$el.offsetWidth) {
-            const clonedForm = elFormItem[i].cloneNode(true)
+            headerFormSecond.value.$el.appendChild(elFormItem[i])
-            headerFormSecond.appendChild(clonedForm)
         }
     }
+
+    // 判断是否需要折叠
+    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;

src/components/table/index.vue

@@ -11,40 +11,7 @@
         >
             <!-- Column 组件内部是 el-table-column -->
             <template v-if="isGroup">
-                <vxe-table-colgroup
+                <GroupColumn :column="tableStore.table.column" />
-                    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>
             </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
+    const records = (tableRef.value as VxeTableInstance).getCheckboxRecords()
-    if ($table) {
-        const records = $table.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 -->

src/styles/app.scss

@@ -69,6 +69,27 @@ body,
     background: #fff;
     margin: var(--ba-main-space) var(--ba-main-space) 0px var(--ba-main-space);
 }
+.form-style {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .el-form-item {
+        display: flex;
+        width: 48%;
+        .el-form-item__content {
+            flex: 1;
+            .el-select {
+                width: 100%;
+            }
+            .el-input__inner {
+                width: 100%;
+            }
+            .el-date-editor {
+                width: 100%;
+            }
+        }
+    }
+}
 
 .zoom-handle {
     position: absolute;
@@ -330,3 +351,21 @@ body,
     background: #fff;
     z-index: 2;
 }
+
+@font-face {
+    font-family: "AlimamaFangYuanTiVF";
+    src: url('../assets/font/ali/AlimamaFangYuanTiVF-Thin.woff') format('woff'),
+    url("../assets/font/ali/AlimamaFangYuanTiVF-Thin.woff2") format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: "AlimamaDongFangDaKai";
+    src: url('../assets/font/ali/AlimamaDongFangDaKai-Regular.woff') format('woff'),
+    url("../assets/font/ali/AlimamaDongFangDaKai-Regular.woff2") format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+

src/styles/element.scss

@@ -130,6 +130,46 @@
     }
 }
 
-.el-select{
+.el-select {
     min-width: 220px;
 }
+
+.el-tabs__content {
+    height: calc(100% - 40px);
+    .el-tab-pane {
+        height: 100%;
+    }
+}
+
+.el-button--primary:focus {
+    color: var(--el-color-white);
+    border-color: var(--el-color-primary);
+    background-color: var(--el-color-primary);
+    outline: 0;
+}
+.el-button--primary:hover {
+    color: var(--el-color-white);
+    border-color: var(--el-color-primary-light-3);
+    background-color: var(--el-color-primary-light-3);
+    outline: 0;
+}
+.el-button.is-plain:focus {
+    color: var(--el-button-text-color);
+    border-color: var(--el-button-border-color);
+}
+.el-button.is-plain:hover {
+    color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
+}
+.el-button.is-link:focus {
+    color: var(--el-button-text-color);
+}
+.el-button.is-link:hover {
+    color: var(--el-button-hover-link-text-color);
+}
+.el-button--primary.is-link:hover,
+.el-button--primary.is-plain:hover,
+.el-button--primary.is-text:hover {
+    color: var(--el-color-primary-light-5);
+    background-color: var(--el-color-primary-light-9) !important;
+}

src/styles/index.scss

@@ -2,3 +2,4 @@
 @use '@/styles/vxeTable';
 @use '@/styles/element';
 @use '@/styles/var';
+@use '@/styles/map';

src/styles/map.scss

@@ -0,0 +1,6 @@
+.BMap_cpyCtrl {
+  display:none;
+}
+.anchorBL{
+  display:none;
+}

src/styles/vxeTable.scss

@@ -44,7 +44,7 @@
 .vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
 .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,
 .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon {
-    color: var(--el-color-primary-light-8);
+    color: var(--el-color-primary-light-3);
 }
 
 .vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,

src/utils/tableStore.ts

@@ -3,6 +3,7 @@ import createAxios from '@/utils/request'
 import { requestPayload } from '@/utils/request'
 import { Method } from 'axios'
 import { mainHeight } from '@/utils/layout'
+
 interface TableStoreParams {
     url: string
     pk?: string
@@ -39,7 +40,7 @@ export default class TableStore {
         loadCallback: null,
         resetCallback: null,
         beforeSearchFun: null,
-        height: mainHeight(20 + (this.showPage ? 58 : 0)).height as string,
+        height: '',
         publicHeight: 0
     })
 
@@ -55,9 +56,11 @@ export default class TableStore {
         this.table.loadCallback = options.loadCallback || null
         this.table.beforeSearchFun = options.beforeSearchFun || null
         Object.assign(this.table.params, options.params)
+        this.table.height = mainHeight(20 + (this.showPage ? 58 : 0) + this.table.publicHeight).height as string
     }
 
     index() {
+        this.table.beforeSearchFun && this.table.beforeSearchFun()
         this.table.data = []
         this.table.loading = true
         // 重置用的数据数据
@@ -73,8 +76,16 @@ export default class TableStore {
                 requestPayload(this.method, this.table.params)
             )
         ).then((res: any) => {
+            if (res.data) {
                 this.table.data = res.data.records || res.data
                 this.table.total = res.data.total || res.data.length || 0
+            } else {
+                this.table.data = []
+                this.table.total = 0
+            }
+            if (Array.isArray(res)) {
+                this.table.data = res
+            }
             if (this.isWebPaging) {
                 this.table.webPagingData = window.XEUtils.chunk(this.table.data, this.table.params.pageSize)
                 this.table.data = this.table.webPagingData[this.table.params.pageNum - 1]
@@ -94,7 +105,6 @@ export default class TableStore {
             [
                 'search',
                 () => {
-                    this.table.beforeSearchFun && this.table.beforeSearchFun()
                     this.table.params.pageNum = 1
                     this.index()
                 }
@@ -103,8 +113,8 @@ export default class TableStore {
                 'reset',
                 () => {
                     delete this.initData.pageSize
-                    console.log(this.table.params)
+                    // console.log(this.table.params)
-                    console.log(this.initData)
+                    // console.log(this.initData)
                     Object.assign(this.table.params, this.initData)
                     this.index()
                     this.table.resetCallback && this.table.resetCallback()