200 lines
7.9 KiB
Vue
200 lines
7.9 KiB
Vue
<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>
|