15 changed files with 1457 additions and 789 deletions
@ -1,21 +1,41 @@ |
|||
module.exports = { |
|||
"env": { |
|||
"browser": true, |
|||
"es2021": true |
|||
env: { |
|||
browser: true, |
|||
es2021: true, |
|||
}, |
|||
"extends": [ |
|||
"plugin:vue/essential", |
|||
"airbnb-base" |
|||
extends: [ |
|||
'plugin:vue/essential', |
|||
'airbnb-base', |
|||
], |
|||
"parserOptions": { |
|||
"ecmaVersion": 13, |
|||
"parser": "@typescript-eslint/parser", |
|||
"sourceType": "module" |
|||
parserOptions: { |
|||
ecmaVersion: 13, |
|||
parser: '@typescript-eslint/parser', |
|||
sourceType: 'module', |
|||
}, |
|||
"plugins": [ |
|||
"vue", |
|||
"@typescript-eslint" |
|||
plugins: [ |
|||
'vue', |
|||
'@typescript-eslint', |
|||
], |
|||
"rules": { |
|||
} |
|||
rules: { |
|||
'vue/html-self-closing': 'off', |
|||
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', |
|||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', |
|||
'no-param-reassign': 'off', |
|||
'max-len': ['error', { code: 140, tabWidth: 2 }], |
|||
'object-curly-newline': ['error', { multiline: true }], |
|||
'arrow-parens': ['error', 'as-needed'], |
|||
'linebreak-style': 'off', |
|||
'vue/attributes-order': 'off', |
|||
'vue/singleline-html-element-content-newline': 'off', |
|||
'vue/max-attributes-per-line': 'off', |
|||
'vue/multiline-html-element-content-newline': 'off', |
|||
'vue/html-indent': 'off', |
|||
'vue/html-closing-bracket-newline': [ |
|||
'error', |
|||
{ |
|||
singleline: 'never', |
|||
multiline: 'always', |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
@ -0,0 +1,473 @@ |
|||
<template> |
|||
<view class="zzx-calendar"> |
|||
<view class="calendar-heander"> |
|||
{{ timeStr }} |
|||
</view> |
|||
|
|||
<!-- 星期几标题 --> |
|||
<view class="calendar-weeks"> |
|||
<view class="calendar-week" :class="{ 'text-red-500': week === '六' || week === '日' }" v-for="(week, index) in weeks" :key="index"> |
|||
{{ week }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="calendar-content"> |
|||
<swiper |
|||
class="calendar-swiper" |
|||
:style="{ |
|||
width: '100%', |
|||
height: sheight, |
|||
}" |
|||
:indicator-dots="false" |
|||
:autoplay="false" |
|||
:duration="duration" |
|||
:current="current" |
|||
@change="changeSwp" |
|||
:circular="true" |
|||
> |
|||
<swiper-item class="calendar-item" v-for="sitem in swiper" :key="sitem"> |
|||
<view class="calendar-days"> |
|||
<!-- 当前的 --> |
|||
<template v-if="sitem === current"> |
|||
<view |
|||
class="calendar-day" |
|||
v-for="(item, index) in days" |
|||
:key="index" |
|||
:class="{ 'day-hidden': !item.show }" |
|||
@click="clickItem(item)" |
|||
> |
|||
<view class="date" :class="[item.isToday ? todayClass : '', item.fullDate === selectedDate ? checkedClass : '']"> |
|||
{{ item.time.getDate() }} |
|||
</view> |
|||
<view class="dot-show" v-if="item.info === '0'" :style="dotStyle"> </view> |
|||
</view> |
|||
</template> |
|||
<template v-else> |
|||
<!-- 下一个月/周 --> |
|||
<template v-if="current - sitem === 1 || current - sitem === -2"> |
|||
<view |
|||
class="calendar-day" |
|||
v-for="(item, index) in predays" |
|||
:key="index" |
|||
:class="{ |
|||
'day-hidden': !item.show, |
|||
}" |
|||
> |
|||
<view class="date" :class="[item.isToday ? todayClass : '']"> |
|||
{{ item.time.getDate() }} |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<!-- 上一个月/周 --> |
|||
<template v-else> |
|||
<view |
|||
class="calendar-day" |
|||
v-for="(item, index) in nextdays" |
|||
:key="index" |
|||
:class="{ |
|||
'day-hidden': !item.show, |
|||
}" |
|||
> |
|||
<view class="date" :class="[item.isToday ? todayClass : '']"> |
|||
{{ item.time.getDate() }} |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<!-- <view class="mode-change" @click="changeMode"> |
|||
<view :class="weekMode ? 'mode-arrow-bottom' : 'mode-arrow-top'"> </view> |
|||
</view> --> |
|||
</view> |
|||
|
|||
<view class="flex justify-center u-font-18" style="color: #3b82f6" @click="goToday"> 今日 </view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState } from 'vuex'; |
|||
import { gegerateDates, formatDate } from './generateDates.js'; |
|||
|
|||
export default { |
|||
props: { |
|||
duration: { type: Number, default: 500 }, |
|||
// 是否返回今日 |
|||
showBack: { type: Boolean, default: false }, |
|||
// 今日的自定义样式class |
|||
todayClass: { type: String, default: 'is-today' }, |
|||
// 选中日期的样式class |
|||
checkedClass: { type: String, default: 'is-checked' }, |
|||
// 打点日期的自定义样式 |
|||
dotStyle: { |
|||
type: Object, |
|||
default: () => { |
|||
return { background: '#4ade80' }; |
|||
}, |
|||
}, |
|||
}, |
|||
|
|||
watch: { |
|||
dotList: function (newvalue) { |
|||
const days = this.days.slice(0); |
|||
const index = days.findIndex(day => day.show); |
|||
days.forEach((day, i) => { |
|||
newvalue.forEach((item, j) => { |
|||
if (i - index === j) { |
|||
day.info = item; |
|||
} |
|||
}); |
|||
}); |
|||
this.days = days; |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
weeks: ['日', '一', '二', '三', '四', '五', '六'], // 周 |
|||
current: 1, |
|||
currentYear: '', |
|||
currentMonth: '', |
|||
currentDate: '', |
|||
days: [], |
|||
weekMode: false, // false -> 月 true -> 显示周 |
|||
swiper: [0, 1, 2], |
|||
selectedDate: formatDate(new Date(), 'yyyy-MM-dd'), // 当前选中的日期 |
|||
start: '', |
|||
end: '', |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
...mapState('project', ['dotList']), |
|||
sheight() { |
|||
// 根据年月判断有多少行 |
|||
// 判断该月有多少天 |
|||
let h = '35px'; |
|||
if (!this.weekMode) { |
|||
const d = new Date(this.currentYear, this.currentMonth, 0); |
|||
const days = d.getDate(); // 判断本月有多少天 |
|||
let day = new Date(d.setDate(1)).getDay(); |
|||
// if (day === 0) { |
|||
// day = 7; |
|||
// } |
|||
const pre = 8 - day; |
|||
const rows = Math.ceil((days - pre) / 7) + 1; |
|||
h = 35 * rows + 'px'; |
|||
} |
|||
return h; |
|||
}, |
|||
|
|||
// 当前日期 年月 |
|||
timeStr() { |
|||
let str = ''; |
|||
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|||
const y = d.getFullYear(); |
|||
const m = d.getMonth() + 1 <= 9 ? `0${d.getMonth() + 1}` : d.getMonth() + 1; |
|||
str = `${y}年${m}月`; |
|||
return str; |
|||
}, |
|||
|
|||
// 上一周期的days书籍 |
|||
predays() { |
|||
let pres = []; |
|||
if (this.weekMode) { |
|||
// 周模式 |
|||
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|||
d.setDate(d.getDate() - 7); |
|||
pres = gegerateDates(d, 'week'); |
|||
} else { |
|||
// 月模式 |
|||
const d = new Date(this.currentYear, this.currentMonth - 2, 1); |
|||
pres = gegerateDates(d, 'month'); |
|||
} |
|||
return pres; |
|||
}, |
|||
|
|||
// 下一周期的days书籍 |
|||
nextdays() { |
|||
let nexts = []; |
|||
if (this.weekMode) { |
|||
// 周模式 |
|||
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|||
d.setDate(d.getDate() + 7); |
|||
nexts = gegerateDates(d, 'week'); |
|||
} else { |
|||
// 月模式 |
|||
const d = new Date(this.currentYear, this.currentMonth, 1); |
|||
nexts = gegerateDates(d, 'month'); |
|||
} |
|||
return nexts; |
|||
}, |
|||
}, |
|||
|
|||
created() { |
|||
this.initDate(); |
|||
this.start = this.$moment().startOf('month').valueOf(); |
|||
this.end = this.$moment().endOf('month').valueOf(); |
|||
}, |
|||
|
|||
methods: { |
|||
// |
|||
/** |
|||
* 滑动切换上下周期 |
|||
* 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周 |
|||
* current - pre === 1, -2 下一个月/周 |
|||
* current - pre === -1, 2 上一个月或者上一周 |
|||
*/ |
|||
changeSwp(e) { |
|||
const pre = this.current; |
|||
const current = e.target.current; |
|||
this.current = current; |
|||
|
|||
if (current - pre === 1 || current - pre === -2) { |
|||
// 下一个月 或 下一周 |
|||
this.daysNext(); |
|||
const arr = this.days.filter(s => s.show); |
|||
const end = `${arr[arr.length - 1].fullDate} 23:59:59`; |
|||
this.start = this.$moment(arr[0].fullDate).valueOf(); |
|||
this.end = this.$moment(end).valueOf(); |
|||
this.$emit('handleFindPoint', this.start, this.end); |
|||
} else { |
|||
// 上一个月 或 上一周 |
|||
this.daysPre(); |
|||
const arr = this.days.filter(s => s.show); |
|||
const end = `${arr[arr.length - 1].fullDate} 23:59:59`; |
|||
this.start = this.$moment(arr[0].fullDate).valueOf(); |
|||
this.end = this.$moment(end).valueOf(); |
|||
this.$emit('handleFindPoint', this.start, this.end); |
|||
} |
|||
}, |
|||
|
|||
// 初始化日历的方法 |
|||
initDate(cur) { |
|||
let date = ''; |
|||
if (cur) { |
|||
date = new Date(cur); |
|||
} else { |
|||
date = new Date(); |
|||
} |
|||
this.currentDate = date.getDate(); // 今日几号 |
|||
this.currentYear = date.getFullYear(); // 当前年份 |
|||
this.currentMonth = date.getMonth() + 1; // 当前月份 |
|||
this.currentWeek = date.getDay() === 0 ? 7 : date.getDay(); // 1...6,0 星期几 |
|||
// const nowY = new Date().getFullYear(); // 当前年份 |
|||
// const nowM = new Date().getMonth() + 1; |
|||
// const nowD = new Date().getDate(); // 今日日期 几号 |
|||
// const nowW = new Date().getDay(); |
|||
// this.selectedDate = formatDate(new Date(), 'yyyy-MM-dd') |
|||
this.days = []; |
|||
let days = []; |
|||
if (this.weekMode) { |
|||
days = gegerateDates(date, 'week'); |
|||
// this.selectedDate = days[0].fullDate; |
|||
} else { |
|||
days = gegerateDates(date, 'month'); |
|||
// const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/')); |
|||
// const isMonth = sel.getFullYear() === this.currentYear && (sel.getMonth() + 1) === this.currentMonth; |
|||
// if(!isMonth) { |
|||
// this.selectedDate = formatDate(new Date(this.currentYear, this.currentMonth-1,1), 'yyyy-MM-dd') |
|||
// } |
|||
} |
|||
// 设置小红点 |
|||
days.forEach((day, i) => { |
|||
this.dotList.forEach((item, j) => { |
|||
if (i === j) { |
|||
day.info = item; |
|||
} |
|||
}); |
|||
}); |
|||
this.days = days; |
|||
// 派发事件,时间发生改变 |
|||
let obj = { |
|||
start: '', |
|||
end: '', |
|||
}; |
|||
if (this.weekMode) { |
|||
obj.start = this.days[0].time; |
|||
obj.end = this.days[6].time; |
|||
} else { |
|||
const start = new Date(this.currentYear, this.currentMonth - 1, 1); |
|||
const end = new Date(this.currentYear, this.currentMonth, 0); |
|||
obj.start = start; |
|||
obj.end = end; |
|||
} |
|||
this.$emit('days-change', obj); |
|||
}, |
|||
|
|||
// 上一个 |
|||
daysPre() { |
|||
if (this.weekMode) { |
|||
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|||
d.setDate(d.getDate() - 7); |
|||
this.initDate(d); |
|||
} else { |
|||
const d = new Date(this.currentYear, this.currentMonth - 2, 1); |
|||
this.initDate(d); |
|||
} |
|||
}, |
|||
|
|||
// 下一个 |
|||
daysNext() { |
|||
if (this.weekMode) { |
|||
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|||
d.setDate(d.getDate() + 7); |
|||
this.initDate(d); |
|||
} else { |
|||
const d = new Date(this.currentYear, this.currentMonth, 1); |
|||
this.initDate(d); |
|||
} |
|||
}, |
|||
|
|||
// 切换模式 |
|||
changeMode() { |
|||
const premode = this.weekMode; |
|||
let isweek = false; |
|||
if (premode) { |
|||
isweek = !!this.days.find(item => item.fullDate === this.selectedDate); |
|||
} |
|||
this.weekMode = !this.weekMode; |
|||
let d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|||
const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/')); |
|||
const isMonth = sel.getFullYear() === this.currentYear && sel.getMonth() + 1 === this.currentMonth; |
|||
if ((this.selectedDate && isMonth) || isweek) { |
|||
d = new Date(this.selectedDate.replace('-', '/').replace('-', '/')); |
|||
} |
|||
this.initDate(d); |
|||
}, |
|||
|
|||
// 点击日期 |
|||
clickItem(e) { |
|||
this.selectedDate = e.fullDate; |
|||
this.$emit('selected-change', e); |
|||
}, |
|||
|
|||
// 返回 |
|||
goToday() { |
|||
const d = new Date(); |
|||
this.initDate(d); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.zzx-calendar { |
|||
width: 100%; |
|||
height: auto; |
|||
background-color: #fff; |
|||
padding-bottom: 10px; |
|||
|
|||
.calendar-heander { |
|||
text-align: center; |
|||
padding: 16px 0; |
|||
position: relative; |
|||
font-size: 15px; |
|||
} |
|||
|
|||
.calendar-weeks { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
margin-bottom: 10px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 12px; |
|||
color: #9ca3af; |
|||
font-weight: bold; |
|||
|
|||
.calendar-week { |
|||
width: calc(100% / 7); |
|||
height: 100%; |
|||
text-align: center; |
|||
} |
|||
} |
|||
swiper { |
|||
width: 100%; |
|||
height: 60upx; |
|||
} |
|||
.calendar-content { |
|||
min-height: 30px; |
|||
} |
|||
.calendar-swiper { |
|||
min-height: 35px; |
|||
transition: height ease-out 0.3s; |
|||
} |
|||
.calendar-item { |
|||
margin: 0; |
|||
padding: 0; |
|||
height: 100%; |
|||
} |
|||
.calendar-days { |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
font-size: 14px; |
|||
|
|||
.calendar-day { |
|||
width: calc(100% / 7); |
|||
height: 35px; |
|||
text-align: center; |
|||
display: flex; |
|||
flex-flow: column nowrap; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
position: relative; |
|||
} |
|||
} |
|||
.day-hidden { |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.mode-change { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 5px; |
|||
|
|||
.mode-arrow-top { |
|||
width: 0; |
|||
height: 0; |
|||
border-left: 6px solid transparent; |
|||
border-right: 6px solid transparent; |
|||
border-bottom: 5px solid #ff6633; |
|||
} |
|||
.mode-arrow-bottom { |
|||
width: 0; |
|||
height: 0; |
|||
border-left: 6px solid transparent; |
|||
border-right: 6px solid transparent; |
|||
border-top: 5px solid #ff6633; |
|||
} |
|||
} |
|||
.is-today { |
|||
background: #ffffff; |
|||
border: 1upx solid #ff6633; |
|||
border-radius: 50%; |
|||
color: #ff6633; |
|||
} |
|||
.is-checked { |
|||
background: #ff6633; |
|||
color: #ffffff; |
|||
} |
|||
.date { |
|||
width: 25px; |
|||
height: 25px; |
|||
line-height: 25px; |
|||
margin: 0 auto; |
|||
border-radius: 25px; |
|||
} |
|||
.dot-show { |
|||
width: 6px; |
|||
height: 6px; |
|||
// background: red; |
|||
border-radius: 5px; |
|||
position: absolute; |
|||
top: 2px; |
|||
right: 10px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,8 @@ |
|||
<template> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,66 +1,97 @@ |
|||
<template> |
|||
<view :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14"> |
|||
<!-- 标题栏 --> |
|||
<Title /> |
|||
|
|||
<view class="container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100"> |
|||
<!-- 角色栏 --> |
|||
<Roles /> |
|||
<view class="flex flex-col h-full bg-gray-50" @click="openAuth"> |
|||
<view class="relative" @touchmove="onMove"> |
|||
<!-- 日历 --> |
|||
<Calendar @selected-change="onDateChange" :show-back="true" ref="calendar" @handleFindPoint="handleFindPoint" /> |
|||
<!-- 上传 导入wbs --> |
|||
<!-- <Upload @success="onUploadSuccess" @error="onUploadError" /> --> |
|||
</view> |
|||
|
|||
<!-- 日常任务面板 --> |
|||
<Globals /> |
|||
<!-- 项目列表 --> |
|||
<Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" /> |
|||
|
|||
<!-- 定期任务面板 --> |
|||
<TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="timeLine" /> |
|||
</view> |
|||
<!-- 全局提示框 --> |
|||
<u-top-tips ref="uTips"></u-top-tips> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref, onMounted |
|||
} from 'vue'; |
|||
import Navbar from '@/components/Title/Title.vue'; |
|||
import Roles from '@/components/Roles/Roles.vue'; |
|||
import Globals from '@/components/Globals/Globals.vue'; |
|||
import TimeLine from '@/components/TimeLine/TimeLine.vue'; |
|||
import { reactive, ref, onMounted, computed, watch } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import dayjs from 'dayjs'; |
|||
import Calendar from '@/components/Calendar/Calendar.vue'; |
|||
import Upload from '@/components/Upload/Upload.vue'; |
|||
import Projects from '@/components/Projects/Projects.vue'; |
|||
|
|||
let height = ref(null); |
|||
const data = reactive({ |
|||
calendar: null, |
|||
days: [], |
|||
}); |
|||
|
|||
onMounted(() => { |
|||
const system = uni.getSystemInfoSync(); |
|||
height.value = system.windowHeight + 'px'; |
|||
}); |
|||
const height = ref(null); |
|||
const store = useStore(); |
|||
const token = computed(() => store.state.user.token); |
|||
|
|||
function getTasks() { |
|||
// 监听token |
|||
watch( |
|||
() => token.value, |
|||
newValue => { |
|||
console.log('newValue', newValue); |
|||
if (!newValue) return; |
|||
if (newValue) { |
|||
handleFindPoint(); |
|||
} |
|||
}, |
|||
{ immediate: true }, |
|||
); |
|||
|
|||
onMounted(() => { |
|||
const system = uni.getSystemInfoSync(); |
|||
height.value = `${system.windowHeight}px`; |
|||
}); |
|||
|
|||
const handleFindPoint = async (start, end) => { |
|||
try { |
|||
const startTime = start |
|||
|| dayjs() |
|||
.startOf('month') |
|||
.valueOf(); |
|||
const endTime = end |
|||
|| dayjs() |
|||
.endOf('month') |
|||
.valueOf(); |
|||
const res = await uni.$u.api.findRedPoint(startTime, endTime); |
|||
store.commit('project/setDotList', res); |
|||
} catch (error) { |
|||
console.log('error: ', error); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.content { |
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
|
|||
.logo { |
|||
.logo { |
|||
height: 200rpx; |
|||
width: 200rpx; |
|||
margin-top: 200rpx; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
margin-bottom: 50rpx; |
|||
} |
|||
} |
|||
|
|||
.text-area { |
|||
.text-area { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
|
|||
.title { |
|||
.title { |
|||
font-size: 36rpx; |
|||
color: #8f8f94; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,64 @@ |
|||
<template> |
|||
<view :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14"> |
|||
<!-- 标题栏 --> |
|||
<Title /> |
|||
|
|||
<view class="container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100"> |
|||
<!-- 角色栏 --> |
|||
<Roles /> |
|||
|
|||
<!-- 日常任务面板 --> |
|||
<Globals /> |
|||
|
|||
<!-- 定期任务面板 --> |
|||
<TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="timeLine" /> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onMounted } from 'vue'; |
|||
import Navbar from '@/components/Title/Title.vue'; |
|||
import Roles from '@/components/Roles/Roles.vue'; |
|||
import Globals from '@/components/Globals/Globals.vue'; |
|||
import TimeLine from '@/components/TimeLine/TimeLine.vue'; |
|||
|
|||
let height = ref(null); |
|||
|
|||
onMounted(() => { |
|||
const system = uni.getSystemInfoSync(); |
|||
height.value = system.windowHeight + 'px'; |
|||
}); |
|||
|
|||
function getTasks() { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.logo { |
|||
height: 200rpx; |
|||
width: 200rpx; |
|||
margin-top: 200rpx; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
margin-bottom: 50rpx; |
|||
} |
|||
|
|||
.text-area { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 36rpx; |
|||
color: #8f8f94; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,3 @@ |
|||
const actions = {}; |
|||
|
|||
export default actions; |
|||
@ -0,0 +1,11 @@ |
|||
const getters = { |
|||
/** |
|||
* 当前项目的id |
|||
* @param {object} project |
|||
*/ |
|||
projectId({ project }) { |
|||
return project.id; |
|||
}, |
|||
}; |
|||
|
|||
export default getters; |
|||
@ -0,0 +1,12 @@ |
|||
import state from './state'; |
|||
import getters from './getters'; |
|||
import mutations from './mutations'; |
|||
import actions from './actions'; |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
state, |
|||
getters, |
|||
mutations, |
|||
actions, |
|||
}; |
|||
@ -0,0 +1,62 @@ |
|||
const mutations = { |
|||
/** |
|||
* 设置state projects书籍 |
|||
* @param {object} state |
|||
* @param {array} projects 项目列表 |
|||
*/ |
|||
setProjects(state, projects) { |
|||
if (!projects || !projects.length) { |
|||
state.projects = []; |
|||
} else { |
|||
state.projects = [...projects]; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 设置子项目收缩展开 |
|||
* @param { object } state |
|||
* @param { object } options options:{ index,show } |
|||
*/ |
|||
setProjectItemShow(state, options) { |
|||
if (options.show) { |
|||
for (var i = 0; i < state.projects.length; i++) { |
|||
if (i === options.index) { |
|||
state.projects[i].show = true; |
|||
} else { |
|||
state.projects[i].show = false; |
|||
} |
|||
} |
|||
} else { |
|||
state.projects[options.index].show = false; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 设置当前项目信息 |
|||
* @param { object } state |
|||
* @param { object } data |
|||
*/ |
|||
setProject(state, data) { |
|||
state.project = data || { name: '加载中...' }; |
|||
}, |
|||
|
|||
/** |
|||
* 设置当前项目名称 |
|||
* @param { object } state |
|||
* @param { string } data |
|||
*/ |
|||
setProjectName(state, data) { |
|||
state.project.name = data; |
|||
}, |
|||
|
|||
/** |
|||
* 设置小红点 |
|||
* @param { object } state |
|||
* @param { string } data |
|||
*/ |
|||
setDotList(state, data) { |
|||
state.dotList = data; |
|||
}, |
|||
}; |
|||
|
|||
export default mutations; |
|||
@ -0,0 +1,8 @@ |
|||
/* eslint-disable */ |
|||
const state = { |
|||
project: { name: '加载中...' }, // 当前项目信息
|
|||
projects: [], // 项目列表
|
|||
dotList: [], // 小红点
|
|||
}; |
|||
|
|||
export default state; |
|||
Loading…
Reference in new issue