wxc
1 year ago
18 changed files with 312 additions and 119 deletions
@ -0,0 +1,38 @@ |
|||||||
|
<template> |
||||||
|
<template v-if="select.includes(name)"> |
||||||
|
<el-select clearable> |
||||||
|
<el-option |
||||||
|
v-for="item in data[name]" |
||||||
|
:key="item.id" |
||||||
|
:label="item.dictLabel" |
||||||
|
:value="item.dictValue" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</template> |
||||||
|
<template v-else-if="selectTree.includes(name)"> |
||||||
|
<el-tree-select :data="data" :props="{value: 'id'}" node-key="id" clearable filterable @current-change="(nodeData, node) => change(nodeData)" /> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
import useCatchStore from '@/stores/modules/catch' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
name: { |
||||||
|
type: String, |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
}); |
||||||
|
const emit = defineEmits(['change']) |
||||||
|
const select = ["businessType", "suspectProblem", "processingStatus"]; |
||||||
|
const selectTree = ["problemSources"]; |
||||||
|
|
||||||
|
const catchStore = useCatchStore(); |
||||||
|
const data = select.includes(props.name) ? catchStore.getDicts([props.name]) : catchStore.getDictProblemSources() |
||||||
|
|
||||||
|
function change(nodeData) { |
||||||
|
emit('change', nodeData) |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
</style> |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<header> |
||||||
|
<el-form :label-width="120"> |
||||||
|
<el-form-item label="年份"></el-form-item> |
||||||
|
</el-form> |
||||||
|
</header> |
||||||
|
<div> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="8" v-for="month in months" :key="month"> |
||||||
|
<div class="calendar-month"> |
||||||
|
<header>{{ year }}年{{ month }}月</header> |
||||||
|
<div class="calendar-week flex wrap"> |
||||||
|
<div class="calendar-cell calendar-cell_week flex center" v-for="week in weeks" :key="week"> |
||||||
|
<div class="cell">{{ week }}</div> |
||||||
|
</div> |
||||||
|
<div class="calendar-cell flex center" v-for="(item, index) in getMonthDays(month)" :key="index"> |
||||||
|
<div class="cell">{{ item.day }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
import moment from 'moment' |
||||||
|
|
||||||
|
const year = ref(2024); |
||||||
|
const holiday = ref([]); |
||||||
|
|
||||||
|
const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; |
||||||
|
const weeks = ["一", "二", "三", "四", "五", "六", "日"]; |
||||||
|
|
||||||
|
function getMonthDays(month) { |
||||||
|
const days = []; |
||||||
|
const beginDay = moment([year.value, month - 1]).startOf('month'); |
||||||
|
const beginDayOfWeek = beginDay.day(); |
||||||
|
const endDay = moment([year.value, month - 1]).endOf('month'); |
||||||
|
// const endDayOfWeek = endDay.day(); |
||||||
|
for (let i = 0; i < beginDayOfWeek ? beginDayOfWeek - 1 : 6; i++) { |
||||||
|
days.push({}) |
||||||
|
} |
||||||
|
for (let i = 1; i <= endDay.date(); i++) { |
||||||
|
days.push({ |
||||||
|
day: i, |
||||||
|
flag: false |
||||||
|
}) |
||||||
|
} |
||||||
|
return days; |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.calendar-month { |
||||||
|
background: #fbfcff; |
||||||
|
box-shadow: inset 0px -1px 0px 0px #e9ebfd; |
||||||
|
border: 1px solid #e9ebfd; |
||||||
|
margin-bottom: 20px; |
||||||
|
padding: 20px; |
||||||
|
header { |
||||||
|
font-size: 18px; |
||||||
|
margin-bottom: 10px; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
} |
||||||
|
.calendar-cell { |
||||||
|
width: 14.26%; |
||||||
|
text-align: center; |
||||||
|
margin-bottom: 16px; |
||||||
|
font-weight: 700; |
||||||
|
.cell { |
||||||
|
width: 36px; |
||||||
|
height: 36px; |
||||||
|
line-height: 36px; |
||||||
|
border-radius: 50%; |
||||||
|
&:hover { |
||||||
|
background-color: #eee; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
&.calendar-cell_week { |
||||||
|
color: #777; |
||||||
|
font-family: SourceHanSansCN, SourceHanSansCN; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue