Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改 时间组件问题

Browse Source
This commit is contained in:
GGJ
2024-04-01 18:29:32 +08:00
parent 5a5d2b320d
commit 88359e824a
11 changed files with 254 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/form/datePicker/index.vue
View File

@@ -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>

41
src/components/table/column/groupColumn.vue Normal file
View File

@@ -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>

2
src/components/table/defaultAttribute.ts
View File

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

73
src/components/table/header/index.vue
View File

@@ -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;

53
src/components/table/index.vue
View File

@@ -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 -->

39
src/styles/app.scss
View File

@@ -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;
}

42
src/styles/element.scss
View File

@@ -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;
}

1
src/styles/index.scss
View File

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

6
src/styles/map.scss Normal file
View File

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

2
src/styles/vxeTable.scss
View File

@@ -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,

22
src/utils/tableStore.ts
View File

@@ -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) => {
this.table.data = res.data.records || res.data
this.table.total = res.data.total || res.data.length || 0
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.initData)
// console.log(this.table.params)
// console.log(this.initData)
Object.assign(this.table.params, this.initData)
this.index()
this.table.resetCallback && this.table.resetCallback()