|
|
@@ -0,0 +1,222 @@
|
|
|
+<template>
|
|
|
+ <div class="activity-info-container dark-iview-split">
|
|
|
+ <Split v-model="split1">
|
|
|
+ <div slot="left" class="activity-target-list">
|
|
|
+ <div class="activity-target-header">
|
|
|
+ <span>
|
|
|
+ 学习对象
|
|
|
+ </span>
|
|
|
+ <div class="tools-box">
|
|
|
+ <Icon type="ios-undo" class="action-btn-icon" title="撤回" />
|
|
|
+ <Icon type="ios-send" class="action-btn-icon" title="分享" />
|
|
|
+ <Icon type="md-create" class="action-btn-icon" title="编辑" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div @click="selectActivity(index)" v-for="(item,index) in activityList" :class="index == currentActivityIndex ? 'activity-target-item block-bg block-bg-active':'block-bg activity-target-item'">
|
|
|
+ <p class="target-name">
|
|
|
+ {{item.classroomName}}
|
|
|
+ <span class="activity-status">进行中</span>
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <p style="margin-top:6px;">
|
|
|
+ <span class="info-label"><Icon type="md-flag" style="margin-right:5px;" size="16" />活动类型：</span>
|
|
|
+ <span class="info-value">{{item.type}}</span>
|
|
|
+ </p>
|
|
|
+ <p style="margin-top:6px;" v-if="item.type == '自主学习'">
|
|
|
+ <span class="info-label"><Icon type="md-time" style="margin-right:5px;" size="16" />开始时间：</span>
|
|
|
+ <span class="info-value">{{item.startTime}}</span>
|
|
|
+ </p>
|
|
|
+ <p style="margin-top:6px;" v-else>
|
|
|
+ <span class="info-label"><Icon type="md-time" style="margin-right:5px;" size="16" />结束时间：</span>
|
|
|
+ <span class="info-value">{{item.endTime}}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div slot="right" class="activity-detail-info">
|
|
|
+ <LearnProgress v-if="!showAnswer" @goToAnswer="goToAnswer"></LearnProgress>
|
|
|
+ <!--<AnswerDetail v-else @closeAnswerDetail="closeAnswerDetail"></AnswerDetail>-->
|
|
|
+ <AnswerRecord v-else @closeAnswerDetail="closeAnswerDetail"></AnswerRecord>
|
|
|
+ </div>
|
|
|
+ </Split>
|
|
|
+ <Modal v-model="publishStatus"
|
|
|
+ title="发布自主学习活动"
|
|
|
+ class-name="dark-iview-modal dark-iview-form publish-modal"
|
|
|
+ @on-ok="confirmPublish">
|
|
|
+ <Form ref="activityInfo" :model="activityInfo" label-colon label-position="left" :label-width="90" :rules="ruleValidate">
|
|
|
+ <FormItem label="发布对象" prop="target">
|
|
|
+ <Select v-model="activityInfo.target" multiple>
|
|
|
+ <Option v-for="item in classList" :value="item.classroomCode" :key="item.classroomCode">{{ item.classroomName }}</Option>
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="发布方式" prop="publishType">
|
|
|
+ <RadioGroup v-model="activityInfo.publishType" style="color:white;">
|
|
|
+ <Radio :label="item.value" v-for="item in publishTypeList">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ </Radio>
|
|
|
+ </RadioGroup>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="发布时间" v-if="activityInfo.publishType == 1" prop="startTime">
|
|
|
+ <DatePicker type="datetime" placeholder="设置开始时间" style="width: 100%;" @on-change="setStartTime"></DatePicker>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="活动类型" prop="type">
|
|
|
+ <RadioGroup v-model="activityInfo.type" style="color:white;">
|
|
|
+ <Radio :label="item.value" v-for="item in activityTypeList">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ </Radio>
|
|
|
+ </RadioGroup>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="截止时间" v-if="activityInfo.type == 1" prop="endTime">
|
|
|
+ <DatePicker type="datetime" placeholder="设置截止时间" style="width: 100%;" @on-change="setEndTime"></DatePicker>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="闯关模式" prop="isOrder">
|
|
|
+ <RadioGroup v-model="activityInfo.isOrder" style="color:white;">
|
|
|
+ <Radio label="1" style="width:82px;">
|
|
|
+ <span>是</span>
|
|
|
+ </Radio>
|
|
|
+ <Radio label="0">
|
|
|
+ <span>否</span>
|
|
|
+ </Radio>
|
|
|
+ </RadioGroup>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import LearnProgress from '@/view/selflearning/LearnProgress.vue'
|
|
|
+ import AnswerDetail from './AnswerDetail.vue'
|
|
|
+ import AnswerRecord from './AnswerRecord.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ LearnProgress,AnswerDetail,AnswerRecord
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ publishTypeList: [
|
|
|
+ {
|
|
|
+ value: '0',
|
|
|
+ label:'立即发布'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label:'定时发布'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ activityTypeList: [
|
|
|
+ {
|
|
|
+ value: '0',
|
|
|
+ label:'自主学习'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label:'课前预习'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ruleValidate: {
|
|
|
+ target: [
|
|
|
+ { required: true, type: 'array', message: '请选择发布对象', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ publishType: [
|
|
|
+ { required: true, message: '请选择发布方式', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ type: [
|
|
|
+ { required: true, message: '请选择活动类型', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ isOrder: [
|
|
|
+ { required: true, message: '请选择活动模式', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ startTime: [
|
|
|
+ { required: true, type:'number', message: '请设置发布时间', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ endTime: [
|
|
|
+ { required: true, type:'number',message: '请设置结束时间', trigger: 'change' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ classList: [],
|
|
|
+ activityInfo: {
|
|
|
+ type: '',
|
|
|
+ endTime: undefined,
|
|
|
+ target: [],
|
|
|
+ publishType: '',
|
|
|
+ startTime: undefined,
|
|
|
+ isOrder:1
|
|
|
+ },
|
|
|
+ publishStatus: false,
|
|
|
+ showAnswer: false,
|
|
|
+ currentActivityIndex:0,
|
|
|
+ split1: 0.25,
|
|
|
+ activityList: [
|
|
|
+ {
|
|
|
+ classroomName:'一年级一班',
|
|
|
+ classroomCode: '123',
|
|
|
+ type:'自主学习',
|
|
|
+ startTime: '2019-05-06',
|
|
|
+ endTime:'2020-05-07'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ classroomName:'一年级二班',
|
|
|
+ classroomCode: '123',
|
|
|
+ type:'课前预习',
|
|
|
+ startTime: '2019-05-06',
|
|
|
+ endTime:'2020-05-07'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ confirmPublish() {
|
|
|
+ this.$refs.activityInfo.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ console.log(this.activityInfo)
|
|
|
+ } else {
|
|
|
+ //this.publishStatus = true
|
|
|
+ this.$Message.error('请完善信息再发布!')
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查找教师课程下的教室（班级）
|
|
|
+ * */
|
|
|
+ findClassroom() {
|
|
|
+ if (this.classList.length == 0) {
|
|
|
+ let requestData = this.$store.state.userInfo.TEAMModelId
|
|
|
+ this.$api.learnActivity.FindClassroomByTeacherId(requestData).then(
|
|
|
+ res => {
|
|
|
+ if (res.error == null) {
|
|
|
+ this.classList = res.result.data
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.$Message.error('API ERROR!')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ err => {
|
|
|
+
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectActivity(index) {
|
|
|
+ this.currentActivityIndex = index
|
|
|
+ },
|
|
|
+ goToAnswer() {
|
|
|
+ this.showAnswer = true
|
|
|
+ },
|
|
|
+ closeAnswerDetail() {
|
|
|
+ this.showAnswer = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.findClassroom()
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import "ActivityInfo.less";
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+
|
|
|
+</style>
|
