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