update
init
This commit is contained in:
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div class="tab8-content">
|
||||
<div class="top">
|
||||
<div class="top-left">
|
||||
<a-tabs v-model:activeKey="activeKey" @change="changeTabs">
|
||||
<a-tab-pane key="1" tab="全部"></a-tab-pane>
|
||||
<a-tab-pane key="2" tab="选时"></a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日"></a-tab-pane>
|
||||
<a-tab-pane key="4" tab="周"></a-tab-pane>
|
||||
<a-tab-pane key="5" tab="月"></a-tab-pane>
|
||||
<a-tab-pane key="6" tab="季"></a-tab-pane>
|
||||
<a-tab-pane key="7" tab="年"></a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
<div class="top-right">
|
||||
<a-radio-group v-model:value="sportType" button-style="solid" @change="handleChange">
|
||||
<a-radio-button value="0">步数</a-radio-button>
|
||||
<a-radio-button value="1">锻炼</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center" v-if="showPicker">
|
||||
<a-date-picker v-model:value="dateValue" :picker="pickerType" v-if="!showRangePicker" @change="changeDate" />
|
||||
|
||||
<a-range-picker v-model:value="rangeValue" v-if="showRangePicker" @change="changeRange" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<BasicTable @register="registerTable" table-type="0">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<div v-if="column.dataIndex == 'source'">穿戴设备</div>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { BasicTable } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { tab8Column } from '/@/views/archivesManage/employee/fileMaintenance/maintenance.data';
|
||||
import { tab8SdsApi, tab8WorkApi } from '/@/views/archivesManage/employee/fileMaintenance/maintenance.api';
|
||||
import dayjs from 'dayjs';
|
||||
import weekday from 'dayjs/plugin/weekday';
|
||||
import quarterOfYear from 'dayjs/plugin/quarterOfYear';
|
||||
dayjs.extend(weekday);
|
||||
dayjs.extend(quarterOfYear);
|
||||
const props = defineProps({
|
||||
userInfo: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
editType: {
|
||||
type: String,
|
||||
default: () => '0',
|
||||
},
|
||||
});
|
||||
const sportType = ref('0');
|
||||
const { tableContext } = useListPage({
|
||||
tableProps: {
|
||||
api: tab8SdsApi,
|
||||
columns: tab8Column(sportType.value),
|
||||
useSearchForm: false,
|
||||
showActionColumn: false,
|
||||
beforeFetch: (params) => {
|
||||
params.userId = props.userInfo?.id;
|
||||
return params;
|
||||
},
|
||||
},
|
||||
});
|
||||
const [registerTable, { reload, setProps }] = tableContext;
|
||||
const activeKey = ref('1');
|
||||
const pickerType = ref('');
|
||||
const showRangePicker = ref(false);
|
||||
const dateValue = ref(dayjs(new Date()));
|
||||
const rangeValue = ref([dayjs(new Date().setDate(new Date().getDate() - 7)), dayjs(new Date())]);
|
||||
const showPicker = ref(false);
|
||||
function changeTabs() {
|
||||
showRangePicker.value = false;
|
||||
showPicker.value = true;
|
||||
switch (activeKey.value) {
|
||||
case '1':
|
||||
showPicker.value = false;
|
||||
break;
|
||||
case '2':
|
||||
showRangePicker.value = true;
|
||||
break;
|
||||
case '3':
|
||||
pickerType.value = '';
|
||||
break;
|
||||
case '4':
|
||||
pickerType.value = 'week';
|
||||
break;
|
||||
case '5':
|
||||
pickerType.value = 'month';
|
||||
break;
|
||||
case '6':
|
||||
pickerType.value = 'quarter';
|
||||
break;
|
||||
case '7':
|
||||
pickerType.value = 'year';
|
||||
break;
|
||||
}
|
||||
updataTable();
|
||||
}
|
||||
function handleChange() {
|
||||
console.log(sportType.value);
|
||||
setProps({
|
||||
columns: tab8Column(sportType.value),
|
||||
api: sportType.value == '0' ? tab8SdsApi : tab8WorkApi,
|
||||
});
|
||||
reload();
|
||||
}
|
||||
function changeDate() {
|
||||
updataTable();
|
||||
}
|
||||
function changeRange() {
|
||||
updataTable();
|
||||
}
|
||||
function updataTable() {
|
||||
let startOfWeek;
|
||||
let endOfWeek;
|
||||
if (activeKey.value == '1') {
|
||||
startOfWeek = '';
|
||||
endOfWeek = '';
|
||||
} else if (activeKey.value == '2') {
|
||||
startOfWeek = rangeValue.value ? rangeValue.value[0].format('YYYY-MM-DD') : '';
|
||||
endOfWeek = rangeValue.value ? rangeValue.value[1].format('YYYY-MM-DD') : '';
|
||||
} else {
|
||||
switch (activeKey.value) {
|
||||
case '3':
|
||||
startOfWeek = dayjs(dateValue.value).startOf('day').format('YYYY-MM-DD');
|
||||
endOfWeek = dayjs(dateValue.value).endOf('day').format('YYYY-MM-DD');
|
||||
break;
|
||||
case '4':
|
||||
startOfWeek = dayjs(dateValue.value).startOf('week').format('YYYY-MM-DD');
|
||||
endOfWeek = dayjs(dateValue.value).endOf('week').format('YYYY-MM-DD');
|
||||
break;
|
||||
case '5':
|
||||
startOfWeek = dayjs(dateValue.value).startOf('month').format('YYYY-MM-DD');
|
||||
endOfWeek = dayjs(dateValue.value).endOf('month').format('YYYY-MM-DD');
|
||||
break;
|
||||
case '6':
|
||||
const quarter = dayjs(dateValue.value).quarter();
|
||||
if (quarter === 1) {
|
||||
startOfWeek = dayjs(`${dayjs(dateValue.value).year()}-01-01`).format('YYYY-MM-DD');
|
||||
endOfWeek = dayjs(`${dayjs(dateValue.value).year()}-03-31`).format('YYYY-MM-DD');
|
||||
} else if (quarter === 2) {
|
||||
startOfWeek = dayjs(`${dayjs(dateValue.value).year()}-04-01`).format('YYYY-MM-DD');
|
||||
endOfWeek = dayjs(`${dayjs(dateValue.value).year()}-06-30`).format('YYYY-MM-DD');
|
||||
} else if (quarter === 3) {
|
||||
startOfWeek = dayjs(`${dayjs(dateValue.value).year()}-07-01`).format('YYYY-MM-DD');
|
||||
endOfWeek = dayjs(`${dayjs(dateValue.value).year()}-09-30`).format('YYYY-MM-DD');
|
||||
} else if (quarter === 4) {
|
||||
startOfWeek = dayjs(`${dayjs(dateValue.value).year()}-10-01`).format('YYYY-MM-DD');
|
||||
endOfWeek = dayjs(`${dayjs(dateValue.value).year()}-12-31`).format('YYYY-MM-DD');
|
||||
}
|
||||
// startOfWeek = dayjs(dateValue.value).startOf('quarter').format('YYYY-MM-DD');
|
||||
// endOfWeek = dayjs(dateValue.value).endOf('quarter').format('YYYY-MM-DD');
|
||||
break;
|
||||
case '7':
|
||||
startOfWeek = dayjs(dateValue.value).startOf('year').format('YYYY-MM-DD');
|
||||
endOfWeek = dayjs(dateValue.value).endOf('year').format('YYYY-MM-DD');
|
||||
break;
|
||||
}
|
||||
}
|
||||
setProps({
|
||||
beforeFetch: (parmas) => {
|
||||
parmas.userId = props.userInfo?.id;
|
||||
parmas.startTime = startOfWeek;
|
||||
parmas.endTime = endOfWeek;
|
||||
return parmas;
|
||||
},
|
||||
});
|
||||
reload({ page: 1 });
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tab8-content {
|
||||
.top {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.top-left {
|
||||
:deep(.ant-tabs-nav) {
|
||||
width: 100% !important;
|
||||
}
|
||||
:deep(.ant-tabs-tab-active) {
|
||||
background: #fff !important;
|
||||
}
|
||||
}
|
||||
.top-right {
|
||||
:deep(.ant-radio-button-wrapper) {
|
||||
width: 100px !important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user