8 changed files with 298 additions and 216 deletions
@ -1,191 +0,0 @@ |
|||||
<template> |
|
||||
<view class="column"> |
|
||||
<!-- v-if="tasks && tasks.length" --> |
|
||||
<view> |
|
||||
<view :key="task.id" v-for="(task, taskIndex) in tasks" :id="`a${task.id}`"> |
|
||||
<view v-if="scrollToTaskId === `a${task.id}`">AAA</view> |
|
||||
<!-- 内层 --> |
|
||||
<view v-if="task.array && task.array.length"> |
|
||||
<view class="flex"> |
|
||||
<TimeStatus :task="task.array[0]" /> |
|
||||
<view class="flex items-center justify-between flex-1 ml-2 task-column"> |
|
||||
<view v-if="task.array[0].process !== 4">{{ $moment(+task.array[0].planStart).format(startTimeFormat) }}</view> |
|
||||
<view v-else>{{ $moment(+task.array[0].planStart).format('D日') }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view v-for="(item, itemIndex) in task.array" :key="item.id"> |
|
||||
<view class="border-l-2 border-gray-300 plugin"> |
|
||||
<view class="h-3" v-if="item.process === 4"></view> |
|
||||
<view class="ml-3 overflow-hidden shadow-lg task-box"> |
|
||||
<u-card |
|
||||
:show-foot="false" |
|
||||
:show-head="false" |
|
||||
:style="{ height: setHeight(item.panel) }" |
|
||||
class="h-16" |
|
||||
margin="0" |
|
||||
v-if="showSkeleton" |
|
||||
> |
|
||||
<view slot="body"> |
|
||||
<view> |
|
||||
<skeleton :banner="false" :loading="true" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton> |
|
||||
</view> |
|
||||
</view> |
|
||||
</u-card> |
|
||||
|
|
||||
<u-card |
|
||||
@click="onClickTask(item.planStart - 0, item.id)" |
|
||||
:show-foot="false" |
|
||||
:show-head="false" |
|
||||
:style="{ height: setHeight(item.panel) }" |
|
||||
class="h-16" |
|
||||
margin="0" |
|
||||
v-if="task.array && task.array.length && item.process !== 4 && !showSkeleton" |
|
||||
> |
|
||||
<view slot="body"> |
|
||||
<!-- 脑力测评 --> |
|
||||
<view class="p-0 u-col-between"> |
|
||||
<NotEvaluated :task="item" v-if="item.data.mentalTest.finishStatus === 0" /> |
|
||||
<view v-else> |
|
||||
<EvaluatedNLCP :task="item" :taskIndex="taskIndex" :itemIndex="itemIndex" v-if="item.data.type === 0" /> |
|
||||
<EvaluatedXLJH :task="item" :taskIndex="taskIndex" :itemIndex="itemIndex" v-if="item.data.type === 1" /> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</u-card> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 外层 --> |
|
||||
<view v-else> |
|
||||
<view class="flex"> |
|
||||
<TimeStatus :task="task" /> |
|
||||
<view class="flex items-center justify-between flex-1 ml-2 task-column"> |
|
||||
<view v-if="task.process2 !== 4">{{ $moment(+task.planStart).format(startTimeFormat) }}</view> |
|
||||
<view v-else>{{ $moment(+task.planStart).format('D日') }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<view class="border-l-2 border-gray-300 plugin"> |
|
||||
<view class="h-3" v-if="task.process === 4"></view> |
|
||||
<view class="ml-3 overflow-hidden shadow-lg task-box"> |
|
||||
<u-card |
|
||||
:show-foot="false" |
|
||||
:show-head="false" |
|
||||
:style="{ height: setHeight(task.panel) }" |
|
||||
class="h-16" |
|
||||
margin="0" |
|
||||
v-if="showSkeleton" |
|
||||
> |
|
||||
<view slot="body"> |
|
||||
<view> |
|
||||
<skeleton :banner="false" :loading="true" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton> |
|
||||
</view> |
|
||||
</view> |
|
||||
</u-card> |
|
||||
|
|
||||
<u-card |
|
||||
@click="onClickTask(task.planStart - 0, task.id)" |
|
||||
:show-foot="false" |
|
||||
:show-head="false" |
|
||||
:style="{ height: setHeight(task.panel) }" |
|
||||
class="h-16" |
|
||||
margin="0" |
|
||||
v-if="tasks && tasks.length && task.process !== 4 && !showSkeleton" |
|
||||
> |
|
||||
<view slot="body"> |
|
||||
<view class="p-0 u-col-between"> |
|
||||
<NotEvaluated :task="task" v-if="task.data.mentalTest.finishStatus === 0" /> |
|
||||
<view v-else> |
|
||||
<EvaluatedNLCP :task="task" v-if="task.data.type === 0" /> |
|
||||
<EvaluatedXLJH :task="task" v-if="task.data.type === 1" /> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</u-card> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 局部弹框操作栏 --> |
|
||||
<Tips /> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'; |
|
||||
import Skeleton from '@/components/Skeleton/Skeleton'; |
|
||||
import TimeStatus from './TimeStatus.vue'; |
|
||||
// import TaskTools from './TaskTools.vue'; |
|
||||
import EvaluatedNLCP from 'components/Evaluated/EvaluatedNLCP'; |
|
||||
import EvaluatedXLJH from 'components/Evaluated/EvaluatedXLJH'; |
|
||||
|
|
||||
export default { |
|
||||
name: 'TimeBox', |
|
||||
components: { TimeStatus, Skeleton, EvaluatedNLCP, EvaluatedXLJH }, |
|
||||
|
|
||||
data() { |
|
||||
return { |
|
||||
currentComponent: '', |
|
||||
styleType: 0, |
|
||||
}; |
|
||||
}, |
|
||||
|
|
||||
computed: { |
|
||||
...mapState('role', ['roleId']), |
|
||||
...mapState('task', ['timeUnit', 'tasks', 'taskLoading', 'showSkeleton', 'isEvaluated', 'scrollToTaskId']), |
|
||||
...mapGetters('task', ['startTimeFormat']), |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
...mapActions('task', ['getGlobal']), |
|
||||
...mapMutations('task', ['setTipsContent', 'setTipsContent']), |
|
||||
|
|
||||
// 设置任务面板高度 |
|
||||
setHeight(panel) { |
|
||||
if (panel && panel.height) { |
|
||||
return panel.height + 'px'; |
|
||||
} else { |
|
||||
return 'auto'; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 点击了定期任务的面板 更新可变的日常任务 |
|
||||
* @param {number} planStart 任务计划开始时间 |
|
||||
* @param {string} taskId 任务id |
|
||||
*/ |
|
||||
onClickTask(planStart, taskId) { |
|
||||
const param = { roleId: this.roleId, timeNode: planStart, timeUnit: this.timeUnit }; |
|
||||
this.getGlobal(param); |
|
||||
this.$t.storage.setStorageSync('taskId', taskId); |
|
||||
this.$t.storage.setStorageSync('roleId', this.roleId); |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
.task-box { |
|
||||
border-radius: 24rpx; |
|
||||
} |
|
||||
.column { |
|
||||
padding: 24px 14px; |
|
||||
} |
|
||||
.task-column { |
|
||||
height: 33px; |
|
||||
} |
|
||||
.plugin { |
|
||||
margin-top: 8px; |
|
||||
margin-bottom: 8px; |
|
||||
margin-left: 15px; |
|
||||
} |
|
||||
::v-deep .ml-2 { |
|
||||
margin-left: 16px; |
|
||||
} |
|
||||
|
|
||||
::v-deep .ml-3 { |
|
||||
margin-left: 20px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,138 @@ |
|||||
|
<template> |
||||
|
<!-- 内层 --> |
||||
|
<!-- v-if="task.array && task.array.length" --> |
||||
|
<view> |
||||
|
<view class="flex"> |
||||
|
<TimeStatus :task="task.array[0]" /> |
||||
|
<view class="flex items-center justify-between flex-1 ml-2 task-column"> |
||||
|
<view v-if="task.array[0].process !== 4">{{ $moment(+task.array[0].planStart).format('YYYY年MM月DD日') }}</view> |
||||
|
<view v-else>{{ $moment(+task.array[0].planStart).format('YYYY年MM月DD日') }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view v-for="(item, itemIndex) in task.array" :key="item.id"> |
||||
|
<view class="border-l-2 border-gray-300 plugin"> |
||||
|
<view class="h-3" v-if="item.process === 4"></view> |
||||
|
<view class="ml-3 overflow-hidden shadow-lg task-box"> |
||||
|
<u-card |
||||
|
:show-foot="false" |
||||
|
:show-head="false" |
||||
|
:style="{ height: setHeight(item.panel) }" |
||||
|
class="h-16" |
||||
|
margin="0" |
||||
|
v-if="showSkeleton" |
||||
|
> |
||||
|
<view slot="body"> |
||||
|
<view> |
||||
|
<skeleton :banner="false" :loading="true" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton> |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-card> |
||||
|
|
||||
|
<u-card |
||||
|
@click="onClickTask(item.planStart - 0, item.id)" |
||||
|
:show-foot="false" |
||||
|
:show-head="false" |
||||
|
:style="{ height: setHeight(item.panel) }" |
||||
|
class="h-16" |
||||
|
margin="0" |
||||
|
v-if="task.array && task.array.length && item.process !== 4 && !showSkeleton" |
||||
|
> |
||||
|
<view slot="body"> |
||||
|
<view class="p-0 u-col-between"> |
||||
|
<NotEvaluated :task="item" v-if="item.data.mentalTest.finishStatus === 0" /> |
||||
|
<view v-else> |
||||
|
<EvaluatedNLCP :task="item" :taskIndex="taskIndex" :itemIndex="itemIndex" v-if="item.data.type === 0" /> |
||||
|
<EvaluatedXLJH :task="item" :taskIndex="taskIndex" :itemIndex="itemIndex" v-if="item.data.type === 1" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-card> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 局部弹框操作栏 --> |
||||
|
<Tips /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'; |
||||
|
import Skeleton from '@/components/Skeleton/Skeleton'; |
||||
|
import TimeStatus from './TimeStatus.vue'; |
||||
|
import EvaluatedNLCP from 'components/Evaluated/EvaluatedNLCP'; |
||||
|
import EvaluatedXLJH from 'components/Evaluated/EvaluatedXLJH'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'TimeBox', |
||||
|
components: { TimeStatus, Skeleton, EvaluatedNLCP, EvaluatedXLJH }, |
||||
|
|
||||
|
props: { |
||||
|
task: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
taskIndex: { |
||||
|
type: Number, |
||||
|
default: 0, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
...mapState('role', ['roleId']), |
||||
|
...mapState('task', ['timeUnit', 'showSkeleton']), |
||||
|
...mapGetters('task', ['startTimeFormat']), |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
...mapActions('task', ['getGlobal']), |
||||
|
...mapMutations('task', ['setTipsContent']), |
||||
|
|
||||
|
// 设置任务面板高度 |
||||
|
setHeight(panel) { |
||||
|
if (panel && panel.height) { |
||||
|
return panel.height + 'px'; |
||||
|
} else { |
||||
|
return 'auto'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 点击了定期任务的面板 更新可变的日常任务 |
||||
|
* @param {number} planStart 任务计划开始时间 |
||||
|
* @param {string} taskId 任务id |
||||
|
*/ |
||||
|
onClickTask(planStart, taskId) { |
||||
|
const param = { roleId: this.roleId, timeNode: planStart, timeUnit: this.timeUnit }; |
||||
|
this.getGlobal(param); |
||||
|
this.$t.storage.setStorageSync('taskId', taskId); |
||||
|
this.$t.storage.setStorageSync('roleId', this.roleId); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.task-box { |
||||
|
border-radius: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.task-column { |
||||
|
height: 33px; |
||||
|
} |
||||
|
.plugin { |
||||
|
margin-top: 8px; |
||||
|
margin-bottom: 8px; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
::v-deep .ml-2 { |
||||
|
margin-left: 16px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .ml-3 { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,136 @@ |
|||||
|
<template> |
||||
|
<!-- 外层 --> |
||||
|
<view> |
||||
|
<view class="flex"> |
||||
|
<TimeStatus :task="task" /> |
||||
|
<view class="flex items-center justify-between flex-1 ml-2 task-column"> |
||||
|
<view v-if="task.process2 !== 4">{{ $moment(+task.planStart).format('YYYY年MM月DD日') }}</view> |
||||
|
<view v-else>{{ $moment(+task.planStart).format('YYYY年MM月DD日') }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="border-l-2 border-gray-300 plugin"> |
||||
|
<view class="h-3" v-if="task.process === 4"></view> |
||||
|
<view class="ml-3 overflow-hidden shadow-lg task-box"> |
||||
|
<u-card |
||||
|
:show-foot="false" |
||||
|
:show-head="false" |
||||
|
:style="{ height: setHeight(task.panel) }" |
||||
|
class="h-16" |
||||
|
margin="0" |
||||
|
v-if="showSkeleton" |
||||
|
> |
||||
|
<view slot="body"> |
||||
|
<view> |
||||
|
<skeleton :banner="false" :loading="true" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton> |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-card> |
||||
|
|
||||
|
<u-card |
||||
|
@click="onClickTask(task.planStart - 0, task.id)" |
||||
|
:show-foot="false" |
||||
|
:show-head="false" |
||||
|
:style="{ height: setHeight(task.panel) }" |
||||
|
class="h-16" |
||||
|
margin="0" |
||||
|
v-if="tasks && tasks.length && task.process !== 4 && !showSkeleton" |
||||
|
> |
||||
|
<view slot="body"> |
||||
|
<view class="p-0 u-col-between"> |
||||
|
<NotEvaluated :task="task" v-if="task.data.mentalTest.finishStatus === 0" /> |
||||
|
<view v-else> |
||||
|
<EvaluatedNLCP :task="task" v-if="task.data.type === 0" /> |
||||
|
<EvaluatedXLJH :task="task" v-if="task.data.type === 1" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-card> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 局部弹框操作栏 --> |
||||
|
<Tips /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'; |
||||
|
import Skeleton from '@/components/Skeleton/Skeleton'; |
||||
|
import TimeStatus from './TimeStatus.vue'; |
||||
|
import EvaluatedNLCP from 'components/Evaluated/EvaluatedNLCP'; |
||||
|
import EvaluatedXLJH from 'components/Evaluated/EvaluatedXLJH'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'TimeBox', |
||||
|
components: { TimeStatus, Skeleton, EvaluatedNLCP, EvaluatedXLJH }, |
||||
|
|
||||
|
props: { |
||||
|
task: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
taskIndex: { |
||||
|
type: Number, |
||||
|
default: 0, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
...mapState('role', ['roleId']), |
||||
|
...mapState('task', ['timeUnit', 'showSkeleton', 'tasks']), |
||||
|
...mapGetters('task', ['startTimeFormat']), |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
...mapActions('task', ['getGlobal']), |
||||
|
...mapMutations('task', ['setTipsContent']), |
||||
|
|
||||
|
// 设置任务面板高度 |
||||
|
setHeight(panel) { |
||||
|
if (panel && panel.height) { |
||||
|
return panel.height + 'px'; |
||||
|
} else { |
||||
|
return 'auto'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 点击了定期任务的面板 更新可变的日常任务 |
||||
|
* @param {number} planStart 任务计划开始时间 |
||||
|
* @param {string} taskId 任务id |
||||
|
*/ |
||||
|
onClickTask(planStart, taskId) { |
||||
|
const param = { roleId: this.roleId, timeNode: planStart, timeUnit: this.timeUnit }; |
||||
|
this.getGlobal(param); |
||||
|
this.$t.storage.setStorageSync('taskId', taskId); |
||||
|
this.$t.storage.setStorageSync('roleId', this.roleId); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.task-box { |
||||
|
border-radius: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.task-column { |
||||
|
height: 33px; |
||||
|
} |
||||
|
.plugin { |
||||
|
margin-top: 8px; |
||||
|
margin-bottom: 8px; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
::v-deep .ml-2 { |
||||
|
margin-left: 16px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .ml-3 { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue