|
@@ -0,0 +1,745 @@
|
|
|
+<template>
|
|
|
+ <div id="app" class="app-container">
|
|
|
+ <el-button type="primary" class="btn-new" @click="newEvent">{{this.$t("htcommunity.addEvent")}}</el-button>
|
|
|
+ <el-table :data="activities" class="table-main" border v-loading="mainLoading">
|
|
|
+ <el-table-column prop="index" :label="this.$t('htcommunity.serialNumber')" min-width="50"></el-table-column>
|
|
|
+ <el-table-column prop="name" :label="this.$t('htcommunity.activityName')"></el-table-column>
|
|
|
+ <el-table-column prop="time" :label="this.$t('htcommunity.schedule')" min-width="150"></el-table-column>
|
|
|
+ <el-table-column prop="admin" :label="this.$t('htcommunity.administrator')"></el-table-column>
|
|
|
+ <el-table-column :label="this.$t('htcommunity.details')">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="viewDetails(scope.row)">{{$t("htcommunity.view")}}</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="this.$t('htcommunity.eventExam')">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="viewExams(scope.row)">{{$t("htcommunity.view")}}</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 詳細內容彈出視窗 -->
|
|
|
+ <el-dialog :title="this.$t('htcommunity.details')" :visible.sync="showDetailsModal" width="50%">
|
|
|
+ <p>{{this.$t("htcommunity.activityName")}}: {{ selectedActivity.name }}</p>
|
|
|
+ <p>{{this.$t("htcommunity.schedule")}}: {{ selectedActivity.time }}</p>
|
|
|
+ <p>{{this.$t("htcommunity.administrator")}}: {{ selectedActivity.admin }}</p>
|
|
|
+ <p>原始資料: {{ selectedActivity.originalData }}</p>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="showDetailsModal = false">{{this.$t("htcommunity.cancel")}}</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 新增活動彈出視窗 -->
|
|
|
+ <el-dialog :title="this.$t('htcommunity.addEvent')" :visible.sync="showAddModal" width="90%"
|
|
|
+ :close-on-click-modal="false" :close-on-press-escape="false" :close="resetNewActivity" top="6vh">
|
|
|
+ <el-form :model="newActivity" label-width="100px" :rules="rules" ref="newActivity">
|
|
|
+ <div class="form-container">
|
|
|
+ <div class="form-left">
|
|
|
+ <el-form-item :label="this.$t('htcommunity.activityName')" prop="name">
|
|
|
+ <el-input v-model="newActivity.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="this.$t('htcommunity.eventArea')">
|
|
|
+ <el-select v-model="newActivity.region" :placeholder="this.$t('htcommunity.pleaseChoose')">
|
|
|
+ <!-- <el-option v-for="(name,code) in twCityArr" :label="name" :value="code" :key="code"></el-option> -->
|
|
|
+ <el-option v-for="item in twCityArr" :key="item.code" :label="item.name" :value="item.code" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="this.$t('htcommunity.administrator')">
|
|
|
+ <el-input v-model="newActivity.admin"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="this.$t('htcommunity.schedule')" prop="time">
|
|
|
+ <el-date-picker v-model="newActivity.time" type="datetimerange" start-placeholder="Start"
|
|
|
+ end-placeholder="End" style="width: 400px;">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="form-right">
|
|
|
+ <!-- 組別表格 -->
|
|
|
+ <el-form-item :label="this.$t('htcommunity.group')">
|
|
|
+ <!-- <el-tooltip content="指定評審,請檢查確認為正確醍摩豆ID" placement="bottom" effect="light"> -->
|
|
|
+ <el-tooltip placement="bottom" effect="light">
|
|
|
+ <div slot="content" style="color: red;font-size: 1.2em;">指定評審,請輸入醍摩豆用戶編號,檢查確認為正確醍摩豆ID</div>
|
|
|
+ <i class="el-icon-warning-outline" style="font-size: 2em;"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ <!-- <span>指定評審請輸入<span class="point">手機號碼</span>、<span class="point">醍摩豆用戶編號</span>或<span class="point">電子信箱</span>等資訊進行搜尋</span> -->
|
|
|
+ <el-table :data="newActivity.groups" style="width: 100%;" border :cell-style="{ textAlign: 'center' }"
|
|
|
+ :header-cell-style="{ textAlign: 'center' }" v-loading="groupsLoading">
|
|
|
+ <el-table-column prop="groupName" :label="this.$t('htcommunity.groupName')" min-width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.groupName"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="groupJudge" :label="this.$t('htcommunity.designatedReviewer')" min-width="245">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.groupJudge" style="width: 200px;margin-right: 10px"></el-input>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="checkTmdid(scope)"
|
|
|
+ style="margin-top: 5px;">檢查</el-button>
|
|
|
+ <span v-if="scope.row.valid">✔️</span>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="this.$t('htcommunity.operation')" min-width="60">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="removeGroup(scope)">{{$t("htcommunity.delete")}}</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-button type="primary" class="btn-add" icon="el-icon-plus" @click="addGroup"></el-button>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p style="font-size: medium; margin-bottom: 10px;">{{this.$t("htcommunity.importantTimetable")}}:</p>
|
|
|
+ <el-checkbox v-model="newActivity.requireOrderCompletion">{{this.$t("htcommunity.activitiesMustBeCompletedInOrder")}}</el-checkbox>
|
|
|
+ <!-- 計畫內容表格 -->
|
|
|
+ <el-table :data="newActivity.planContent" style="width: 100%;" border :cell-style="{ textAlign: 'center' }"
|
|
|
+ :header-cell-style="{ textAlign: 'center' }" v-loading="scheduleLoading">
|
|
|
+ <el-table-column prop="step" label="step" min-width="30px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.$index + 1 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="schedule" :label="this.$t('htcommunity.schedule')" min-width="235px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-date-picker v-model="scope.row.schedule" type="datetimerange" start-placeholder="Start"
|
|
|
+ end-placeholder="End" style="width: 100%;" :disabled="scheduleDisabled(scope, '')">
|
|
|
+ </el-date-picker>
|
|
|
+ <span style="color:red;font-size: small;" v-show="scope.row.progress==='going'">進行中時程不可編輯</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" :label="this.$t('htcommunity.stage')" min-width="100px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.name" :disabled="scheduleDisabled(scope, '')"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="location" :label="this.$t('htcommunity.activityPlace')" min-width="100px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.location" :disabled="scheduleDisabled(scope, '')"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="description" :label="this.$t('htcommunity.description')" min-width="150px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input type="textarea" autosize v-model="scope.row.description" :disabled="scheduleDisabled(scope, '')"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="blobs" :label="this.$t('htcommunity.fileUrl')" min-width="150px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input type="textarea" autosize v-model="scope.row.blobs" :disabled="scheduleDisabled(scope, '')"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="type" :label="this.$t('htcommunity.signup')" min-width="33px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-checkbox v-model="scope.row.type" :disabled="scheduleDisabled(scope, '')"></el-checkbox>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="examType" :label="this.$t('htcommunity.Eventlayout')" min-width="50px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-checkbox v-model="scope.row.examType" :disabled="scheduleDisabled(scope, 'examType')"></el-checkbox>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="evaluation" :label="this.$t('htcommunity.examCanBeChecked')" min-width="60px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-checkbox v-model="scope.row.evaluation" :disabled="scheduleDisabled(scope, 'evaluation')"></el-checkbox>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="this.$t('htcommunity.operation')" min-width="33px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="removePlanContent(scope)">{{$t("htcommunity.delete")}}</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-button type="primary" class="btn-add" icon="el-icon-plus" @click="addPlanContent"></el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="cancelUpsert">{{this.$t("htcommunity.cancel")}}</el-button>
|
|
|
+ <el-button type="primary" @click="saveNewEvent">{{this.$t("htcommunity.confirm")}}</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//import twTCitys from '@/static/twJsonT.js'
|
|
|
+import option_gl from '@/static/region_gl.json'
|
|
|
+import { forEach } from 'jszip';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 是否為新增模式
|
|
|
+ isInsert:true,
|
|
|
+ mainLoading:false,
|
|
|
+ groupsLoading: false,
|
|
|
+ scheduleLoading: false,
|
|
|
+ //curTwCity: null,
|
|
|
+ twCityArr: [],
|
|
|
+ activities: [
|
|
|
+ // {
|
|
|
+ // index: "1",
|
|
|
+ // name: "活動1",
|
|
|
+ // time: "2024-07-01~2024-07-31",
|
|
|
+ // admin: "管理員A"
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ showDetailsModal: false,
|
|
|
+ showAddModal: false,
|
|
|
+ selectedActivity: {},
|
|
|
+ newActivity: {
|
|
|
+ id:'',
|
|
|
+ name: '',
|
|
|
+ region: '',
|
|
|
+ admin: '',
|
|
|
+ time: [],
|
|
|
+ groups: [
|
|
|
+ {id:'', groupName: '', groupJudge: '', valid:false }
|
|
|
+ ],
|
|
|
+ requireOrderCompletion: false,
|
|
|
+ planContent: [
|
|
|
+ {id:'', step: 1, schedule: [], name: '報名時間', location: '', description: '', blobs: '', type: true, examType: false, evaluation: false }
|
|
|
+ ],
|
|
|
+
|
|
|
+ },
|
|
|
+ // 表單驗證
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '請輸入活動名稱' }
|
|
|
+ ],
|
|
|
+ time: [
|
|
|
+ {
|
|
|
+ required: true, message: '請輸入時程'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 時程編輯的啟用及關閉 以及 動態切換活動布置及評量可重複啟用及關閉
|
|
|
+ scheduleDisabled(scope, column) {
|
|
|
+ if (scope.row.progress === "going") {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ if (column === 'examType' || column === 'evaluation') {
|
|
|
+ if (scope.row.type) {
|
|
|
+ scope.row.examType = false;
|
|
|
+ scope.row.evaluation = false;
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 取得列表資料
|
|
|
+ getList(){
|
|
|
+ //先清除列表
|
|
|
+ this.activities.splice(0, this.activities.length);
|
|
|
+ try {
|
|
|
+ this.mainLoading = true;
|
|
|
+ let param = {};
|
|
|
+ // 取得列表資料API
|
|
|
+ this.$api.htcommunity.jointEventFind(param).then(
|
|
|
+ res => {
|
|
|
+ if (res) {
|
|
|
+ let index = 1;
|
|
|
+
|
|
|
+ res.data.forEach(item=>{
|
|
|
+ let activity = {
|
|
|
+ id: item.id,
|
|
|
+ index: index,
|
|
|
+ name: item.name,
|
|
|
+ time: this.$jsFn.secondTimeFormat(item.startTime) + "~" + this.$jsFn.secondTimeFormat(item.endTime),
|
|
|
+ admin: item.admin[0],
|
|
|
+ originalData:item,
|
|
|
+ }
|
|
|
+ this.activities.push(activity);
|
|
|
+ index++;
|
|
|
+ });
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ err => {console.log("API error : "+err); }
|
|
|
+ )
|
|
|
+ } catch (error) {
|
|
|
+ console.log("API error : "+error);
|
|
|
+ } finally {
|
|
|
+ this.mainLoading = false;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ //確認tmdID
|
|
|
+ checkTmdid(scope){
|
|
|
+ this.groupsLoading = true;
|
|
|
+ console.log(scope);
|
|
|
+ // 先檢查有輸入
|
|
|
+ if (scope.row.groupJudge) {
|
|
|
+ //if (scope.row.groupJudge.indexOf(0) == 0) scope.row.groupJudge = scope.row.groupJudge.substr(1) //開頭有0要去0
|
|
|
+ // 先檢查有沒有重複的tmdID
|
|
|
+ // const judgeCount = {};
|
|
|
+ // this.groups.forEach(group => {
|
|
|
+ // if (group.groupJudge) {
|
|
|
+ // if (!judgeCount[group.groupJudge]) {
|
|
|
+ // judgeCount[group.groupJudge] = 0;
|
|
|
+ // }
|
|
|
+ // judgeCount[group.groupJudge]++;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+
|
|
|
+ // this.groups.forEach(group => {
|
|
|
+ // if (group.groupJudge) {
|
|
|
+ // group.valid = judgeCount[group.groupJudge] > 1;
|
|
|
+ // } else {
|
|
|
+ // group.valid = false;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 向CoreID取得使用者
|
|
|
+ this.$store.dispatch('user/getUserFromCoreId', [scope.row.groupJudge]).then(
|
|
|
+ (res) => {
|
|
|
+ if (res.code == 1 && res.data.length > 0) {
|
|
|
+ scope.row.valid = true;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: '帳號不存在',
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ scope.row.valid = false;
|
|
|
+ }
|
|
|
+ this.groupsLoading = false;
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ //this.$Message.error('user/getUserFromCoreId API error!')
|
|
|
+ }
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: '請輸入帳號',
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ scope.row.valid = false;
|
|
|
+ this.groupsLoading = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 新增活動
|
|
|
+ newEvent(){
|
|
|
+ this.isInsert = true;
|
|
|
+ this.showAddModal = true;
|
|
|
+ this.resetNewActivity();
|
|
|
+ },
|
|
|
+ //取消
|
|
|
+ cancelUpsert(){
|
|
|
+ this.showAddModal = false
|
|
|
+ this.resetNewActivity();
|
|
|
+ },
|
|
|
+ //查看詳細內容
|
|
|
+ viewDetails(activity) {
|
|
|
+ this.isInsert = false;
|
|
|
+ // 設定編輯視窗
|
|
|
+ this.showAddModal = true;
|
|
|
+ this.resetNewActivity();
|
|
|
+ let selectedOption = {};
|
|
|
+ if (activity.originalData.geo.cityId) {
|
|
|
+ //optionsData.find(od => od.code == element.cityId)
|
|
|
+ selectedOption = this.twCityArr.find(od => od.code == activity.originalData.geo.cityId);
|
|
|
+ //selectedOption = this.twCityArr[parseInt(activity.originalData.geo.cityId)];
|
|
|
+ }
|
|
|
+
|
|
|
+ // #region 設定活動
|
|
|
+ this.newActivity = {
|
|
|
+ id: activity.id,
|
|
|
+ name: activity.name,
|
|
|
+ region: selectedOption.code === undefined ? '' : selectedOption.code,
|
|
|
+ admin: activity.admin,
|
|
|
+ time: [this.$jsFn.secondTimeFormat(activity.originalData.startTime), this.$jsFn.secondTimeFormat(activity.originalData.endTime)],
|
|
|
+ groups: [
|
|
|
+ //{ groupName: '', groupJudge: '', valid:false }
|
|
|
+ ],
|
|
|
+ requireOrderCompletion: false,
|
|
|
+ planContent: [
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ // #endregion
|
|
|
+ // #region 設定活動分組
|
|
|
+ activity.originalData.groups.forEach(item => {
|
|
|
+ let group = {
|
|
|
+ id: item.id,
|
|
|
+ groupName: item.name,
|
|
|
+ groupJudge: item.assistants[0],
|
|
|
+ valid: false
|
|
|
+ }
|
|
|
+ this.newActivity.groups.push(group);
|
|
|
+ });
|
|
|
+ // #endregion
|
|
|
+ // #region 設定活動時程
|
|
|
+ activity.originalData.schedule.forEach(item => {
|
|
|
+
|
|
|
+ let schedule = {
|
|
|
+ id: item.id,
|
|
|
+ step: item.orderby,
|
|
|
+ schedule: [this.$jsFn.secondTimeFormat(item.startTime), this.$jsFn.secondTimeFormat(item.endTime)],
|
|
|
+ name: item.name,
|
|
|
+ type: item.type === "join" ? true : false,
|
|
|
+ examType: item.examType === "regular" ? true : false,
|
|
|
+ evaluation: item.examOverwrite,
|
|
|
+ progress: item.progress,
|
|
|
+ description: item.description,
|
|
|
+ location: item.location,
|
|
|
+ blobs: item.blobs === null ? "" : item.blobs[0].blob,
|
|
|
+ }
|
|
|
+ this.newActivity.planContent.push(schedule);
|
|
|
+ });
|
|
|
+
|
|
|
+ // #endregion
|
|
|
+ },
|
|
|
+ //查看活動評量
|
|
|
+ viewExams(activity) {
|
|
|
+ // let params = {
|
|
|
+ // jointEventId: "37db8a66-660c-43a5-b8ce-6686c070973e",
|
|
|
+ // creatorId: "1595321354",
|
|
|
+ // name:"活動",
|
|
|
+ // progress:"going"
|
|
|
+ // }
|
|
|
+ // // 保存试卷到cosmos
|
|
|
+ // this.$api.htcommunity.jointEventFind(params).then(
|
|
|
+ // res => {
|
|
|
+ // if (res.errCode === "") {
|
|
|
+ // console.log("API 資料 : ");
|
|
|
+ // console.log(res.data);
|
|
|
+ // } else {
|
|
|
+
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // err => {console.log("API error : "+err);
|
|
|
+
|
|
|
+ // }
|
|
|
+ // )
|
|
|
+ this.$router.push({
|
|
|
+ name: "htMgtExam",
|
|
|
+ params: {
|
|
|
+ data: activity.originalData
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //儲存新增/更新活動
|
|
|
+ saveNewEvent() {
|
|
|
+ //呼叫API儲存
|
|
|
+ //const promises = ApplicationData.map(async (item) => {
|
|
|
+ //console.log(item);
|
|
|
+ const startTime = new Date(this.newActivity.time[0]);
|
|
|
+ const endTime = new Date(this.newActivity.time[1]);
|
|
|
+ let tmdid = JSON.parse(decodeURIComponent(localStorage.getItem('t_userInfo'), "utf-8")).id;
|
|
|
+ // 先新增/更新活動
|
|
|
+ let dataEvent = {
|
|
|
+ jointEventId: this.newActivity.id,
|
|
|
+ name: this.newActivity.name,
|
|
|
+ startTime: startTime.getTime(),
|
|
|
+ endTime: endTime.getTime(),
|
|
|
+ creatorId: tmdid,
|
|
|
+ geo: {
|
|
|
+ countryId: "TW",
|
|
|
+ cityId: this.newActivity.region.toString()
|
|
|
+ },
|
|
|
+ admin: [tmdid],
|
|
|
+ };
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 新增/更新活動API
|
|
|
+ this.$api.htcommunity.jointEventUpsert(dataEvent).then(
|
|
|
+ async res => {
|
|
|
+ if (res.errCode === "") {
|
|
|
+ if (res.jointEvent.id) {//如果成功新增/更新活動 新增/更新組別
|
|
|
+
|
|
|
+ //#region 新增/更新組別
|
|
|
+ let dataGroup = {
|
|
|
+ jointEventId: res.jointEvent.id,
|
|
|
+ groups: []
|
|
|
+ };
|
|
|
+
|
|
|
+ this.newActivity.groups.forEach(item => {
|
|
|
+ let upItem = {
|
|
|
+ id: item.id,
|
|
|
+ name: item.groupName,
|
|
|
+ assistants: [item.groupJudge]
|
|
|
+ }
|
|
|
+ dataGroup.groups.push(upItem);
|
|
|
+ });
|
|
|
+
|
|
|
+ //新增/更新組別API
|
|
|
+ const apiCall1 = this.$api.htcommunity.jointEventGroupUpsert(dataGroup).then(
|
|
|
+ resGroup => {
|
|
|
+ if (resGroup.error == null) {
|
|
|
+ // this.resetNewActivity();
|
|
|
+ // this.showAddModal = false;
|
|
|
+ //#region 新增/更新時程
|
|
|
+ let dataSchedule = {
|
|
|
+ jointEventId: res.jointEvent.id,
|
|
|
+ schedules: [
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.newActivity.planContent.forEach(item => {
|
|
|
+ let pType = item.type === true ? "join" : "exam";
|
|
|
+ //let pExamType = item.type === true ? "" : (item.examType === true ? "regular" : "custom");
|
|
|
+ let pExamType = item.examType === true ? "regular" : "custom";
|
|
|
+ let pStartTime = new Date(item.schedule[0]);
|
|
|
+ let pEndTime = new Date(item.schedule[1]);
|
|
|
+ let upItem = {
|
|
|
+ id: item.id,
|
|
|
+ type: pType,
|
|
|
+ examType: pExamType,
|
|
|
+ examOverwrite: item.evaluation, //評量可否重複作答 true:可
|
|
|
+ name: item.name, //行程階段
|
|
|
+ startTime: pStartTime.getTime(), //起始時間
|
|
|
+ endTime: pEndTime.getTime(), //結束時間
|
|
|
+ orderby: item.step, //排序
|
|
|
+ location: item.location,//地點
|
|
|
+ description: item.description,//說明
|
|
|
+ blobs: [
|
|
|
+ { name: "fileName", blob: item.blobs }
|
|
|
+ ]//檔案連結
|
|
|
+ }
|
|
|
+ dataSchedule.schedules.push(upItem);
|
|
|
+ });
|
|
|
+
|
|
|
+ //新增/更新時程API
|
|
|
+ const apiCall2 = this.$api.htcommunity.jointScheduleUpsert(dataSchedule).then(
|
|
|
+ resSchedule => {
|
|
|
+ if (resSchedule.error == null) {
|
|
|
+ this.resetNewActivity();
|
|
|
+ this.showAddModal = false;
|
|
|
+ this.getList();
|
|
|
+
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ err => {console.log("API error : "+err);
|
|
|
+ }
|
|
|
+ )
|
|
|
+ // #endregion
|
|
|
+
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ err => {console.log("API error : "+err);
|
|
|
+ }
|
|
|
+ )
|
|
|
+ // #endregion
|
|
|
+
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ err => {console.log("API error : "+err);
|
|
|
+
|
|
|
+ }
|
|
|
+ )
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e);
|
|
|
+ }
|
|
|
+ finally {
|
|
|
+ this.loading = false;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ //重設表單狀態
|
|
|
+ resetNewActivity() {
|
|
|
+ // 重置表單驗證狀態
|
|
|
+ if (this.$refs["newActivity"] !== undefined) {
|
|
|
+ this.$refs["newActivity"].resetFields();
|
|
|
+ }
|
|
|
+
|
|
|
+ this.newActivity = {
|
|
|
+ id:'',
|
|
|
+ name: '',
|
|
|
+ region: '',
|
|
|
+ admin: JSON.parse(decodeURIComponent(localStorage.getItem('t_userInfo'), "utf-8")).id,
|
|
|
+ time: [],
|
|
|
+ groups: [
|
|
|
+ { groupName: '', groupJudge: '', valid:false }
|
|
|
+ ],
|
|
|
+ requireOrderCompletion: false,
|
|
|
+ planContent: [
|
|
|
+ {id:'', step: 1, schedule: [], name: '報名時間', location: '', description: '', blobs: '', type: true, examType: false, evaluation: false }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //增加分組
|
|
|
+ addGroup() {
|
|
|
+ this.newActivity.groups.push({ groupName: '', groupJudge: '', valid:false });
|
|
|
+ },
|
|
|
+ //移除分組
|
|
|
+ removeGroup(scope) {
|
|
|
+ this.$confirm('確定要刪除組別?', '提示', {
|
|
|
+ confirmButtonText: '確定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ try {
|
|
|
+ this.groupsLoading = true;
|
|
|
+ let param = {
|
|
|
+ jointEventId: this.newActivity.id,
|
|
|
+ groupId: scope.row.id
|
|
|
+ };
|
|
|
+ // 刪除統測活動分組API
|
|
|
+ this.$api.htcommunity.jointEventGroupDelete(param).then(
|
|
|
+ res => {
|
|
|
+ if (res.errCode === "") {
|
|
|
+ this.newActivity.groups.splice(scope.$index, 1);
|
|
|
+ this.groupsLoading = false;
|
|
|
+ // 重新取列表資料以防頁面顯示錯誤
|
|
|
+ this.getList();
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ err => { console.log("API error : " + err); }
|
|
|
+ )
|
|
|
+ } catch (error) {
|
|
|
+ console.log("API error : " + error);
|
|
|
+ } finally {
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //增加時程
|
|
|
+ addPlanContent() {
|
|
|
+ this.newActivity.planContent.push({id:'', step: this.newActivity.planContent.length + 1, schedule: [], name: '', location: '', description: '', blobs: '', type: false, examType: false, evaluation: false });
|
|
|
+ },
|
|
|
+ //移除時程
|
|
|
+ removePlanContent(scope) {
|
|
|
+ this.$confirm('確定要刪除時程?', '提示', {
|
|
|
+ confirmButtonText: '確定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ try {
|
|
|
+ this.scheduleLoading = true;
|
|
|
+ let param = {
|
|
|
+ jointEventId: this.newActivity.id,
|
|
|
+ scheduleId: scope.row.id
|
|
|
+ };
|
|
|
+ // 刪除統測活動分組API
|
|
|
+ this.$api.htcommunity.jointScheduleDelete(param).then(
|
|
|
+ res => {
|
|
|
+ if (res.errCode === "") {
|
|
|
+ this.newActivity.planContent.splice(scope.$index, 1);
|
|
|
+ this.scheduleLoading = false;
|
|
|
+ // 重新取列表資料以防頁面顯示錯誤
|
|
|
+ this.getList();
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ err => { console.log("API error : " + err); }
|
|
|
+ )
|
|
|
+ } catch (error) {
|
|
|
+ console.log("API error : " + error);
|
|
|
+ } finally {
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.twCityArr = option_gl[0].children;
|
|
|
+ //this.curTwCity = this.twTCitys[0]
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.getList();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.app-container {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+.form-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.form-left {
|
|
|
+ width: 40%;
|
|
|
+}
|
|
|
+.form-right {
|
|
|
+ width: 60%;
|
|
|
+}
|
|
|
+.dialog-footer {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.table-main{
|
|
|
+ width: 80%; margin-top: 20px; margin-left: 20px; margin-right: 20px;
|
|
|
+}
|
|
|
+.btn-new{
|
|
|
+ margin-top: 20px; margin-left: 20px;
|
|
|
+}
|
|
|
+.btn-add{
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.el-table th, .el-table td {
|
|
|
+ text-align: center;
|
|
|
+ border: 2px solid #000; /* 深色边框 */
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+.el-table--border{
|
|
|
+ border-color: #BEBEBE;
|
|
|
+}
|
|
|
+/*表格字体 标签字体*/
|
|
|
+/* .el-table,
|
|
|
+.el-form-item__label {
|
|
|
+ color: #BEBEBE;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table thead {
|
|
|
+ color: #BEBEBE;
|
|
|
+} */
|
|
|
+
|
|
|
+
|
|
|
+.el-table--border:after,
|
|
|
+.el-table--group:after,
|
|
|
+.el-table:before {
|
|
|
+ background-color: #BEBEBE;
|
|
|
+}
|
|
|
+
|
|
|
+/* // 外边框 */
|
|
|
+.el-table--border,
|
|
|
+.el-table--group {
|
|
|
+ border-color: #BEBEBE;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* // 横线 */
|
|
|
+.el-table td,
|
|
|
+.el-table th.is-leaf,
|
|
|
+.el-table--border,
|
|
|
+.el-table--group {
|
|
|
+ border-bottom: 1px solid #BEBEBE;
|
|
|
+}
|
|
|
+
|
|
|
+/* // 竖线 */
|
|
|
+.el-table--border td,
|
|
|
+.el-table--border th {
|
|
|
+ border-right: 1px solid #BEBEBE;
|
|
|
+}
|
|
|
+.el-table td.el-table__cell{
|
|
|
+ border-bottom: 1px solid #BEBEBE;
|
|
|
+ background-color: red;
|
|
|
+}
|
|
|
+.point{
|
|
|
+ color: #40a8f0;
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 0 3px;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|