first
This commit is contained in:
仲么了
42
src/components/form/area/index.vue
Normal file
42
src/components/form/area/index.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<el-cascader ref="cascader" v-bind="$attrs" :options="options" :props="cascaderProps" @change="change" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent, ref, watch } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'Area'
|
||||
})
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
|
||||
const cascaderProps = {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
}
|
||||
const cascader = ref()
|
||||
const dictData = useDictData()
|
||||
const options = dictData.state.area
|
||||
const areaName = ref(dictData.state.area[0].name)
|
||||
const change = (e: any) => {
|
||||
if (cascader.value.getCheckedNodes()[0].pathLabels.length == 1) {
|
||||
areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[0]
|
||||
} else if (cascader.value.getCheckedNodes()[0].pathLabels.length >= 2) {
|
||||
areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[1]
|
||||
}
|
||||
}
|
||||
// watch(
|
||||
// () => $attrs,
|
||||
// (newVal, oldVal) => {
|
||||
// console.log(123)
|
||||
|
||||
// // GetEchar('中国')
|
||||
// }
|
||||
// )
|
||||
|
||||
defineExpose({ areaName, change })
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
478
src/components/form/datePicker/index.vue
Normal file
478
src/components/form/datePicker/index.vue
Normal file
@@ -0,0 +1,478 @@
|
||||
<template>
|
||||
<el-select v-model="interval" style="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
|
||||
v-model="timeValue"
|
||||
type="daterange"
|
||||
:disabled="disabledPicker"
|
||||
style="width: 230px; margin-right: 10px"
|
||||
unlink-panels
|
||||
:clearable="false"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
:shortcuts="shortcuts"
|
||||
/>
|
||||
<el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button>
|
||||
<el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button>
|
||||
<el-button :disabled="preDisabled" type="primary" :icon="DArrowRight" @click="next"></el-button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { DArrowLeft, VideoPause, DArrowRight } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const interval = ref(3)
|
||||
const timeFlag = ref(1)
|
||||
const count = ref(0)
|
||||
const disabledPicker = ref(true)
|
||||
const timeValue = ref()
|
||||
const backDisabled = ref(false)
|
||||
const preDisabled = ref(false)
|
||||
const timeOptions = [
|
||||
{ label: '年份', value: 1 },
|
||||
{ label: '季度', value: 2 },
|
||||
{ label: '月份', value: 3 },
|
||||
{ label: '周', value: 4 },
|
||||
{ label: '自定义', value: 5 }
|
||||
]
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '最近一周',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
return [start, end]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近一个月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
return [start, end]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近3个月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
return [start, end]
|
||||
}
|
||||
}
|
||||
]
|
||||
onMounted(() => {
|
||||
timeChange(3)
|
||||
})
|
||||
// 选择时间范围
|
||||
const timeChange = (e: number) => {
|
||||
backDisabled.value = false
|
||||
preDisabled.value = false
|
||||
count.value = 0
|
||||
if (e == 1) {
|
||||
disabledPicker.value = true
|
||||
|
||||
timeValue.value = [setTime(1), setTime()]
|
||||
} else if (e == 2) {
|
||||
disabledPicker.value = true
|
||||
timeValue.value = [setTime(2), setTime()]
|
||||
} else if (e == 3) {
|
||||
disabledPicker.value = true
|
||||
timeValue.value = [setTime(3), setTime()]
|
||||
} else if (e == 4) {
|
||||
disabledPicker.value = true
|
||||
timeValue.value = [setTime(0, 7), setTime()]
|
||||
} else if (e == 5) {
|
||||
disabledPicker.value = false
|
||||
backDisabled.value = true
|
||||
preDisabled.value = true
|
||||
timeValue.value = [setTime(), setTime()]
|
||||
}
|
||||
if (e == 1 || e == 2) {
|
||||
timeFlag.value = 0
|
||||
} else {
|
||||
timeFlag.value = 1
|
||||
}
|
||||
}
|
||||
|
||||
// 当前
|
||||
const nowTime = () => {
|
||||
timeChange(interval.value)
|
||||
}
|
||||
// 上一个
|
||||
const preClick = () => {
|
||||
let startTime = timeValue.value[0]
|
||||
let endTime = timeValue.value[1]
|
||||
let year = parseInt(startTime.substring(0, 4))
|
||||
let month = parseInt(startTime.substring(5, 7))
|
||||
let date = parseInt(startTime.substring(8, 10))
|
||||
//按月
|
||||
if (interval.value == 3) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1
|
||||
startTime = year + '-12-01'
|
||||
endTime = year + '-12-31'
|
||||
} else if (month <= 10) {
|
||||
month = month - 1
|
||||
startTime = year + '-0' + month + '-01'
|
||||
let day = getDays(year, month)
|
||||
endTime = year + '-0' + month + '-' + day
|
||||
} else {
|
||||
month = month - 1
|
||||
startTime = year + '-' + month + '-01'
|
||||
let day = getDays(year, month)
|
||||
endTime = year + '-' + month + '-' + day
|
||||
}
|
||||
//按周
|
||||
} else if (interval.value == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year, month - 1, date)
|
||||
start.setDate(start.getDate() - 7)
|
||||
startTime = formatTime(start)
|
||||
var end = new Date(start)
|
||||
end.setDate(start.getDate() + 6)
|
||||
endTime = formatTime(end)
|
||||
//按季度
|
||||
} else if (interval.value == 2) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1
|
||||
startTime = year + '-10-01'
|
||||
endTime = year + '-12-31'
|
||||
} else {
|
||||
// 还是本年
|
||||
month = month - 3
|
||||
startTime = year + '-0' + month + '-01'
|
||||
month = month + 2
|
||||
var day = getDays(year, month)
|
||||
endTime = year + '-0' + month + '-' + day
|
||||
}
|
||||
//自定义
|
||||
} else if (interval.value == 1) {
|
||||
year = year - 1
|
||||
startTime = year + '-01-01'
|
||||
endTime = year + '-12-31'
|
||||
}
|
||||
timeValue.value = [startTime, endTime]
|
||||
|
||||
// 判断向后键的状态
|
||||
// var temp = NowgetEndTime()
|
||||
// timeStatus(temp, endTime)
|
||||
}
|
||||
//下一个
|
||||
const next = () => {
|
||||
//向后
|
||||
|
||||
let startTime = timeValue.value[0]
|
||||
let endTime = timeValue.value[1]
|
||||
let year = parseInt(startTime.substring(0, 4))
|
||||
let month = parseInt(startTime.substring(5, 7))
|
||||
let date = parseInt(startTime.substring(8, 10))
|
||||
var now = new Date()
|
||||
// 获取当前年份
|
||||
var presentY = now.getFullYear()
|
||||
// 获取当前月份
|
||||
var presentM = now.getMonth() + 1
|
||||
// 获取当前日期
|
||||
var presentD = now.getDate()
|
||||
if (interval.value == 3) {
|
||||
if (month == 12) {
|
||||
year = year + 1
|
||||
// 年份进位后，大于当前的年份，是不科学的
|
||||
if (presentY < year) {
|
||||
startTime = presentY + '-12-01'
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + '-12' + '-0' + presentD
|
||||
} else {
|
||||
endTime = presentY + '-12' + '-' + presentD
|
||||
}
|
||||
// 年份进位后，等于当前的年份
|
||||
} else if (presentY == year) {
|
||||
startTime = year + '-01-01'
|
||||
if (presentM > 1) {
|
||||
endTime = year + '-01-31'
|
||||
} else {
|
||||
if (presentD < 10) {
|
||||
endTime = year + '-01' + '-0' + presentD
|
||||
} else {
|
||||
endTime = year + '-01' + '-' + presentD
|
||||
}
|
||||
}
|
||||
// 年份进位后，依旧小于当前的年份
|
||||
} else {
|
||||
startTime = year + '-01-01'
|
||||
endTime = year + '-01-31'
|
||||
}
|
||||
} else {
|
||||
month = month + 1
|
||||
// 年份等于当前年份
|
||||
if (presentY == year) {
|
||||
// 月份超过当前月份，是不科学的
|
||||
if (month >= presentM) {
|
||||
if (presentM < 10) {
|
||||
startTime = year + '-0' + presentM + '-01'
|
||||
if (presentD < 10) {
|
||||
endTime = year + '-0' + presentM + '-0' + presentD
|
||||
} else {
|
||||
endTime = year + '-0' + presentM + '-' + presentD
|
||||
}
|
||||
} else {
|
||||
startTime = year + '-' + presentM + '-01'
|
||||
if (presentD < 10) {
|
||||
endTime = year + '-' + presentM + '-0' + presentD
|
||||
} else {
|
||||
endTime = year + '-' + presentM + '-' + presentD
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + '-0' + month + '-01'
|
||||
var day = getDays(year, month)
|
||||
endTime = year + '-0' + month + '-' + day
|
||||
} else {
|
||||
startTime = year + '-' + month + '-01'
|
||||
var day = getDays(year, month)
|
||||
endTime = year + '-' + month + '-' + day
|
||||
}
|
||||
}
|
||||
// 年份小于当前的年份
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + '-0' + month + '-01'
|
||||
var day = getDays(year, month)
|
||||
endTime = year + '-0' + month + '-' + day
|
||||
} else {
|
||||
startTime = year + '-' + month + '-01'
|
||||
var day = getDays(year, month)
|
||||
endTime = year + '-' + month + '-' + day
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval.value == 2) {
|
||||
// 前进需要年份进位
|
||||
if (month == 10) {
|
||||
year = year + 1
|
||||
// 年份进位后大于当前年份是不科学的
|
||||
if (year > presentY) {
|
||||
startTime = presentY + '-10-01'
|
||||
if (presentD < 10) {
|
||||
endTime = year + '-' + presentM + '-0' + presentD
|
||||
} else {
|
||||
endTime = year + '-' + presentM + '-' + presentD
|
||||
}
|
||||
} else if (year == presentY) {
|
||||
startTime = year + '-01-01'
|
||||
// 当前月份大约3月份
|
||||
if (presentM > 3) {
|
||||
endTime = year + '-03-31'
|
||||
} else {
|
||||
// 当前月份也在第一季度里
|
||||
if (presentD < 10) {
|
||||
endTime = year + '-0' + presentM + '-0' + presentD
|
||||
} else {
|
||||
endTime = year + '-0' + presentM + '-' + presentD
|
||||
}
|
||||
}
|
||||
} else {
|
||||
startTime = year + '-01-01'
|
||||
endTime = year + '-03-31'
|
||||
}
|
||||
} else {
|
||||
month = month + 3
|
||||
// 季度进位后，超过当前月份是不科学的
|
||||
if (year == presentY) {
|
||||
if (month >= presentM) {
|
||||
// 当季度进位后大于当前月，以当前月的时间显示季度
|
||||
if (presentM > 0 && presentM < 4) {
|
||||
// 第一季度
|
||||
startTime = year + '-01-01'
|
||||
if (presentD < 10) {
|
||||
endTime = year + '-0' + presentM + '-0' + presentD
|
||||
} else {
|
||||
endTime = year + '-0' + presentM + '-' + presentD
|
||||
}
|
||||
} else if (presentM > 3 && presentM < 7) {
|
||||
// 第二季度
|
||||
startTime = year + '-04-01'
|
||||
if (presentD < 10) {
|
||||
endTime = year + '-0' + presentM + '-0' + presentD
|
||||
} else {
|
||||
endTime = year + '-0' + presentM + '-' + presentD
|
||||
}
|
||||
} else if (presentM > 6 && presentM < 10) {
|
||||
// 第三季度
|
||||
startTime = year + '-07-01'
|
||||
if (presentD < 10) {
|
||||
endTime = year + '-0' + presentM + '-0' + presentD
|
||||
} else {
|
||||
endTime = year + '-0' + presentM + '-' + presentD
|
||||
}
|
||||
} else {
|
||||
// 第四季度
|
||||
startTime = year + '-10-01'
|
||||
if (presentD < 10) {
|
||||
endTime = year + '-' + presentM + '-0' + presentD
|
||||
} else {
|
||||
endTime = year + '-' + presentM + '-' + presentD
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + '-' + month + '-01'
|
||||
} else {
|
||||
startTime = year + '-0' + month + '-01'
|
||||
}
|
||||
month = month + 2
|
||||
if (month >= presentM) {
|
||||
endTime = NowgetEndTime()
|
||||
} else {
|
||||
var day = getDays(year, month)
|
||||
endTime = year + '-' + month + '-' + day
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + '-' + month + '-01'
|
||||
month = month + 2
|
||||
var day = getDays(year, month)
|
||||
endTime = year + '-' + month + '-' + day
|
||||
} else {
|
||||
startTime = year + '-0' + month + '-01'
|
||||
month = month + 2
|
||||
var day = getDays(year, month)
|
||||
endTime = year + '-0' + month + '-' + day
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval.value == 5) {
|
||||
} else if (interval.value == 4) {
|
||||
//根据开始时间推
|
||||
var start = new Date(year, month - 1, date)
|
||||
start.setDate(start.getDate() + 7)
|
||||
startTime = formatTime(start)
|
||||
var end = new Date(start)
|
||||
end.setDate(start.getDate() + 6)
|
||||
endTime = formatTime(end)
|
||||
} else {
|
||||
year = year + 1
|
||||
// 年份进位后大于当前年份，是不科学的
|
||||
if (year >= presentY) {
|
||||
startTime = presentY + '-01-01'
|
||||
if (presentM < 10) {
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + '-0' + presentM + '-0' + presentD
|
||||
} else {
|
||||
endTime = presentY + '-0' + presentM + '-' + presentD
|
||||
}
|
||||
} else {
|
||||
endTime = presentY + '-' + presentM + '-' + presentD
|
||||
}
|
||||
} else {
|
||||
startTime = year + '-01-01'
|
||||
endTime = year + '-12-31'
|
||||
}
|
||||
}
|
||||
|
||||
timeValue.value = [startTime, endTime]
|
||||
}
|
||||
|
||||
const setTime = (flag = 0, e = 0) => {
|
||||
let dd = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'dd')
|
||||
let data = ''
|
||||
if (dd < 4) {
|
||||
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')
|
||||
}
|
||||
|
||||
if (flag == 1) {
|
||||
data = data.slice(0, 5) + '01-01'
|
||||
} else if (flag == 2) {
|
||||
let quarter = parseInt(data.slice(5, 7))
|
||||
if (0 < quarter && quarter <= 3) {
|
||||
data = data.slice(0, 5) + '01-01'
|
||||
} else if (3 < quarter && quarter <= 6) {
|
||||
data = data.slice(0, 5) + '04-01'
|
||||
} else if (6 < quarter && quarter <= 9) {
|
||||
data = data.slice(0, 5) + '07-01'
|
||||
} else {
|
||||
data = data.slice(0, 5) + '10-01'
|
||||
}
|
||||
}
|
||||
if (flag == 3) {
|
||||
data = data.slice(0, 8) + '01'
|
||||
}
|
||||
|
||||
return data
|
||||
}
|
||||
|
||||
// 获取月份的天数
|
||||
const getDays = (year: any, month: any) => {
|
||||
let max = new Date(year, month, 0).getDate()
|
||||
return max
|
||||
}
|
||||
// 时间格式化
|
||||
const formatTime = (time: any) => {
|
||||
return (
|
||||
time.getFullYear() +
|
||||
'-' +
|
||||
(time.getMonth() + 1 < 10 ? '0' : '') +
|
||||
(time.getMonth() + 1) +
|
||||
'-' +
|
||||
(time.getDate() < 10 ? '0' : '') +
|
||||
time.getDate()
|
||||
)
|
||||
}
|
||||
const NowgetEndTime = () => {
|
||||
let now = new Date()
|
||||
let sep = '-'
|
||||
let year = now.getFullYear()
|
||||
let month: any = now.getMonth() + 1
|
||||
if (month < 10) {
|
||||
month = '0' + month
|
||||
}
|
||||
let date: any = now.getDate()
|
||||
if (date < 10) {
|
||||
date = '0' + date
|
||||
}
|
||||
|
||||
// 拼接当前的日期
|
||||
let endTime = year + sep + month + sep + date
|
||||
return endTime
|
||||
}
|
||||
defineExpose({ timeValue, interval, timeFlag })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.demo-date-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.demo-date-picker .block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.demo-date-picker .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user