|
@@ -0,0 +1,975 @@
|
|
|
+<template>
|
|
|
+ <div class="score-container">
|
|
|
+ <div class="left">
|
|
|
+ <div class="row absolute">
|
|
|
+ <div class="tableNameClass">{{ tableInfo.tableName }}</div>
|
|
|
+ <div class="card" @click="changeItem(0)" :class="{ active: getProjectDatasClick(0) }">
|
|
|
+ <div>{{ getProjectName(0) }}</div>
|
|
|
+ <div style="margin-right: 20px">{{ getPercentage(0) }}%</div>
|
|
|
+ </div>
|
|
|
+ <div class="card" @click="changeItem(1)" :class="{ active: getProjectDatasClick(1) }">
|
|
|
+ <div>{{ getProjectName(1) }}</div>
|
|
|
+ <div style="margin-right: 20px">{{ getPercentage(1) }}%</div>
|
|
|
+ </div>
|
|
|
+ <div class="card" @click="changeItem(2)" :class="{ active: getProjectDatasClick(2) }">
|
|
|
+ <div>{{ getProjectName(2) }}</div>
|
|
|
+ <div style="margin-right: 20px">{{ getPercentage(2) }}%</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="projectDatas.length > 3" style="display: flex; justify-content: center; align-items: center">
|
|
|
+ <Icon type="md-add" :size="20" />
|
|
|
+ </div>
|
|
|
+ <div class="card" v-for="(projectData, index) in projectDatas.slice(3)" :class="{
|
|
|
+ active: projectDatas[index + 3].click ? projectDatas[index + 3].click : false,
|
|
|
+ }" draggable="true" @dragstart="dragStart($event, index + 3)" @click="changeItem(index + 3)"
|
|
|
+ @dragover="allowDrop" @drop="drop($event, index + 3, 'projectDatas')" v-bind:key="index + 3" @dragend="dragEnd">
|
|
|
+ <!--這邊待新增程式判斷-->
|
|
|
+ <div>{{ projectData.projectName }}</div>
|
|
|
+ <div style="display: flex">
|
|
|
+ <div>{{ projectData.percentage }}%</div>
|
|
|
+ <div>
|
|
|
+ <Icon type="ios-trash" size="20" style="cursor: pointer" @click.stop="delProject(index)" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span v-if="projectDatas.length > 4" style="font-size: 6px">
|
|
|
+ {{ $t("scoreCalc.dropSort") }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <div class="icon-card" @click="addProject">
|
|
|
+ <div class="add">
|
|
|
+ <Icon type="md-add-circle" :size="25" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="icon-card2">
|
|
|
+ <Icon type="md-pause" :size="25" color="#2b85e4" />
|
|
|
+ </div>
|
|
|
+ <div class="card0">
|
|
|
+ <div>
|
|
|
+ {{ $t("scoreCalc.totalRate") }}
|
|
|
+ </div>
|
|
|
+ <div v-if="totalNum == 100">{{ totalNum }}%</div>
|
|
|
+ <div v-if="totalNum != 100" style="color: #ed4014">
|
|
|
+ <Icon type="md-alert" />{{ totalNum }}%
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="content">
|
|
|
+ <div class="head">
|
|
|
+ <div class="txtInput-div">
|
|
|
+ <div class="input-container">
|
|
|
+ <div class="label">{{ $t("scoreCalc.itemName") }}</div>
|
|
|
+ <input v-if="thisClassData.index <= 2" type="text" v-model="thisClassData.projectName" maxlength="20"
|
|
|
+ class="content-input none-input" />
|
|
|
+ <input v-if="thisClassData.index > 2" type="text" v-model="thisClassData.projectName" maxlength="20"
|
|
|
+ class="content-input" @input="updateInputprojectName" />
|
|
|
+ </div>
|
|
|
+ <div class="input-container">
|
|
|
+ <div class="label" style="margin-right: 26px">
|
|
|
+ {{ $t("scoreCalc.percentage") }}
|
|
|
+ </div>
|
|
|
+ <div class="input-container" style="margin-right: 10px">
|
|
|
+ <input type="text" v-model="thisClassData.percentage" maxlength="2" class="input2"
|
|
|
+ @input="updateInputpercentage" />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="down">
|
|
|
+ <div v-if="isSave" class="save-info-ok">
|
|
|
+ <Icon type="md-checkmark-circle" />{{ $t("scoreCalc.isSave") }}
|
|
|
+ </div>
|
|
|
+ <div v-if="!isSave" class="save-info-erro">
|
|
|
+ <Icon type="md-alert" />{{ $t("scoreCalc.notSave") }}
|
|
|
+ </div>
|
|
|
+ <div class="button-div">
|
|
|
+ <Button type="text" style="z-index: 500" @click="ProjectGoback('back')">{{
|
|
|
+ $t("scoreCalc.back")
|
|
|
+ }}</Button>
|
|
|
+ <Button type="primary" style="z-index: 500" @click="ProjectGoback('save')">{{ $t("scoreCalc.save")
|
|
|
+ }}</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="body absolute">
|
|
|
+ <span style="font-size: 6px"> {{ $t("scoreCalc.tickIncludedScore") }} {{
|
|
|
+ $t("scoreCalc.dropSort")
|
|
|
+ }}</span>
|
|
|
+ <div>
|
|
|
+ <Row class="title">
|
|
|
+ <Col style="flex: 0 0 40px;">
|
|
|
+ </Col>
|
|
|
+ <Col class="felx1">{{ $t("scoreCalc.itemName") }}</Col>
|
|
|
+ <Col class="felx1">{{ $t("scoreCalc.itemRate") }}</Col>
|
|
|
+ </Row>
|
|
|
+ <div class="content-in absolute">
|
|
|
+ <div v-for="(classData, index) in classDatas" draggable="true" @dragstart="dragStart($event, index)"
|
|
|
+ @dragover="allowDrop" @drop="drop($event, index, 'classDatas')" v-bind:key="index" @dragend="dragEnd">
|
|
|
+ <Row class="card">
|
|
|
+ <Col flex="40px" style="flex: 0 0 40px;" class="center">
|
|
|
+ <Checkbox v-model="classData.single"></Checkbox>
|
|
|
+ </Col>
|
|
|
+ <Col flex="1" class="felx1">
|
|
|
+ <Row>
|
|
|
+ <Col flex="2" class="felx2" style="display: flex; align-items: center;">
|
|
|
+ <div v-if="!classData.custom" class="center">
|
|
|
+ {{ classData.className }}
|
|
|
+ </div>
|
|
|
+ <!-- <Input type="textarea" :value="classData.className" :autosize="{ minRows: 1, maxRows: 2 }" -->
|
|
|
+ <Input type="textarea" v-model="classData.className" :autosize="{ minRows: 1, maxRows: 2 }"
|
|
|
+ v-if="classData.custom" maxlength="60" @input="isInput" />
|
|
|
+ <!-- <input type="text" :value="classData.className" v-if="classData.custom" maxlength="40"
|
|
|
+ @input="isInput" /> -->
|
|
|
+ </Col>
|
|
|
+ <Col flex="1" class="felx1" v-if="!classData.islessonrecord">
|
|
|
+ <div class="average-div center">
|
|
|
+ <span class="average">{{ $t("scoreCalc.average") }}{{ classData.score }}分</span>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Col>
|
|
|
+ <Col flex="1" class="felx1" style="display: flex; align-items: center;">
|
|
|
+ <Row :wrap="false" >
|
|
|
+ <Col flex="50px" style="flex: 0 0 50px;">
|
|
|
+ <input type="text" v-model="classData.proportion" maxlength="1" @input="isInput" />
|
|
|
+ </Col>
|
|
|
+ <Col flex="auto" class="btn-left center felxAuto">
|
|
|
+ <Button type="primary" @click="
|
|
|
+ keyScore(
|
|
|
+ classData.id,
|
|
|
+ classData.islessonrecord,
|
|
|
+ classData.className
|
|
|
+ )
|
|
|
+ ">{{ $t("scoreCalc.logStudentScore") }}</Button>
|
|
|
+ </Col>
|
|
|
+ <Col flex="auto" class="center">
|
|
|
+ <Icon type="ios-trash" size="20" v-if="classData.custom" style="cursor: pointer"
|
|
|
+ @click="delClass(classData.id)" />
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <div class="card add-card" @click="addClass">
|
|
|
+ <Icon type="md-add-circle" :size="25" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <DialogBoxStudentScore :modalVisible="modalVisibleStudentScore" :className="className"
|
|
|
+ @closeModal="modalVisibleStudentScoreFun" :class_type="class_type" :classDataprop="classDataprop"
|
|
|
+ @updateItemScore="updateItemScore">
|
|
|
+ </DialogBoxStudentScore>
|
|
|
+ <Loading :top="100" v-show="dataLoading" type="1"></Loading>
|
|
|
+
|
|
|
+ <!-- <div :top="100" v-show="dataLoading" style="background: red; width: 300px;height: 300px;" ></div> -->
|
|
|
+ <!-- <div :top="100" style="background: red; width: 800px;height: 300px;display: none;" ></div> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import DialogBoxStudentScore from "./DialogBoxStudentScore.vue";
|
|
|
+import Loading from "@/common/Loading.vue";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ DialogBoxStudentScore,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ //projectName: String, //課堂classRecord 作業homeWork 評量evaluate
|
|
|
+ tableInfo: Object, //
|
|
|
+ /*
|
|
|
+ tableInfo.tableName 表單名稱
|
|
|
+ tableInfo.tableId 表單ID
|
|
|
+ tableInfo.listId 表單項目ID
|
|
|
+ */
|
|
|
+ value: {
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isSave: true,
|
|
|
+ tempNum: 0,
|
|
|
+ filterExpire: false,
|
|
|
+ modalVisibleStudentScore: false,
|
|
|
+ class_type: "", //兩種型態:課堂紀錄 非課堂紀錄
|
|
|
+ thisClassData: { index: 0, projectName: "", percentage: 0 }, //當前顯示的資料
|
|
|
+ className: "", //課程名稱
|
|
|
+ projectDatas: [], // 左邊項目欄繫結用的資料
|
|
|
+ classDatas: [], // 右邊子項目欄繫結用的資料
|
|
|
+ calcData: {}, // 原始資料
|
|
|
+ selectIndex: 0, // 選中的項目索引
|
|
|
+ classData: [],
|
|
|
+ classDataprop: [],
|
|
|
+ inputValFromChild: "",
|
|
|
+ selectClassId: "",
|
|
|
+ selectClassIndex: "",
|
|
|
+ dataLoading: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ totalNum() {
|
|
|
+ let sum = 0;
|
|
|
+ this.projectDatas.forEach((element) => {
|
|
|
+ sum += parseInt(element.percentage, 10);
|
|
|
+ });
|
|
|
+ return sum;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //↓根據點進來的按鈕去撈資料庫,並改變顯示的資料。
|
|
|
+ //請改用tableInfo接資料
|
|
|
+ console.log("tableInfo=" + JSON.stringify(this.tableInfo));
|
|
|
+ this.getActList(this.tableInfo.listId);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ProjectGoback(vule) {
|
|
|
+ if (vule == "save") {
|
|
|
+ if (this.totalNum > 100) {
|
|
|
+ this.$Message.warning(this.$t("scoreCalc.warringTotalRate"));
|
|
|
+ } else {
|
|
|
+ //#region 更新項目及子項目資料
|
|
|
+ let items = [];
|
|
|
+ let sort = 1;
|
|
|
+ this.classDatas.forEach((element) => {
|
|
|
+ let item = {
|
|
|
+ id: element.id,
|
|
|
+ name: element.className,
|
|
|
+ rate: element.proportion,
|
|
|
+ use: element.single,
|
|
|
+ sort: sort,
|
|
|
+ };
|
|
|
+ items.push(item);
|
|
|
+ sort = sort + 1;
|
|
|
+ });
|
|
|
+
|
|
|
+ let postData = {
|
|
|
+ scoreCalcActId: this.projectDatas[this.selectIndex].id,
|
|
|
+ teammodelId: this.$store.state.userInfo.TEAMModelId,
|
|
|
+ name: this.projectDatas[this.selectIndex].projectName,
|
|
|
+ rate: this.projectDatas[this.selectIndex].percentage,
|
|
|
+ items: items,
|
|
|
+ };
|
|
|
+ this.$api.learnActivity.updateScoreCalcAct(postData).then(
|
|
|
+ (res) => {
|
|
|
+ if (res) {
|
|
|
+ this.getActList(this.projectDatas[this.selectIndex].id);
|
|
|
+ this.$Message.info(this.$t("scoreCalc.dataIsSave"));
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ this.$Message.error(this.$t("cusMgt.gradeErr"));
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.isSave = true;
|
|
|
+ //#endregion
|
|
|
+ }
|
|
|
+ } else if (vule == "back") {
|
|
|
+ //直接返回
|
|
|
+ this.$emit("tableInfo", this.tableInfo);
|
|
|
+ this.$emit("changePage", "AllScore");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 切換項目動作
|
|
|
+ changeItem(index) {
|
|
|
+ this.dataLoading = true;
|
|
|
+ // 要先判斷是否有修改
|
|
|
+ if (!this.isSave && index !== this.selectIndex) {
|
|
|
+ // 有修改的話要跳提示 會還原
|
|
|
+ this.$Modal.confirm({
|
|
|
+ title: this.$t("scoreCalc.remind"),
|
|
|
+ content: this.$t("scoreCalc.remindMessage1"),
|
|
|
+ onOk: async () => {
|
|
|
+ // 確定要不儲存切換
|
|
|
+ let listId = this.projectDatas[index].id;
|
|
|
+ this.projectDatas = [];
|
|
|
+ this.calcData.scoreCalcAct.forEach((element) => {
|
|
|
+ // 比對是否為選中的活動
|
|
|
+ if (listId === element.id) {
|
|
|
+ this.projectDatas.push({
|
|
|
+ click: true,
|
|
|
+ projectName: element.name,
|
|
|
+ percentage: element.rate,
|
|
|
+ id: element.id,
|
|
|
+ });
|
|
|
+
|
|
|
+ this.reloadProject(index);
|
|
|
+ } else {
|
|
|
+ this.projectDatas.push({
|
|
|
+ click: false,
|
|
|
+ projectName: element.name,
|
|
|
+ percentage: element.rate,
|
|
|
+ id: element.id,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.isSave = true;
|
|
|
+ },
|
|
|
+ onCancel: () => {
|
|
|
+ // 不切換
|
|
|
+ //this.$Message.info('Clicked cancel');
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.reloadProject(index);
|
|
|
+ }
|
|
|
+ this.dataLoading = false;
|
|
|
+ },
|
|
|
+ // 重新整理選中的項目資料
|
|
|
+ reloadProject(index) {
|
|
|
+ this.selectIndex = index;
|
|
|
+ this.classDatas = [];
|
|
|
+ for (let i = 0; i < this.projectDatas.length; i++) {
|
|
|
+ this.projectDatas[i].click = false;
|
|
|
+ if (i === index) {
|
|
|
+ this.projectDatas[i].click = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 設定右邊欄上方資料
|
|
|
+ this.thisClassData.index = index;
|
|
|
+ this.thisClassData.projectName = this.projectDatas[index].projectName;
|
|
|
+ this.thisClassData.percentage = this.projectDatas[index].percentage;
|
|
|
+
|
|
|
+ // 根據選中的項目刷新右邊欄資料
|
|
|
+ this.calcData.scoreCalcAct.forEach((element) => {
|
|
|
+ if (this.projectDatas[index].id === element.id) {
|
|
|
+ this.setSubListData(element);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 增加一個自訂項目
|
|
|
+ addProject() {
|
|
|
+ // 要先判斷是否有修改
|
|
|
+ if (!this.isSave) {
|
|
|
+ // 有修改的話要跳提示 會還原
|
|
|
+ this.$Modal.confirm({
|
|
|
+ title: this.$t("scoreCalc.remind"),
|
|
|
+ content: this.$t("scoreCalc.remindMessage2"),
|
|
|
+ onOk: async () => {
|
|
|
+ // 確定要不儲存
|
|
|
+ this.dataLoading = true;
|
|
|
+ let postData = {
|
|
|
+ scorecalcId: this.tableInfo.tableId,
|
|
|
+ teammodelId: this.$store.state.userInfo.TEAMModelId,
|
|
|
+ };
|
|
|
+ this.$api.learnActivity.addScoreCalcAct(postData).then(
|
|
|
+ (res) => {
|
|
|
+ if (res) {
|
|
|
+ this.calcData.scoreCalcAct.push(res);
|
|
|
+ // 新增完成 清空左邊欄 重新塞資料
|
|
|
+ this.projectDatas = [];
|
|
|
+ this.calcData.scoreCalcAct.forEach((element) => {
|
|
|
+ this.projectDatas.push({
|
|
|
+ click: true,
|
|
|
+ projectName: element.name,
|
|
|
+ percentage: element.rate,
|
|
|
+ id: element.id,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.reloadProject(this.projectDatas.length - 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ this.$Message.error(this.$t("cusMgt.gradeErr"));
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.isSave = true;
|
|
|
+ this.dataLoading = false;
|
|
|
+ },
|
|
|
+ onCancel: () => {
|
|
|
+ // 不切換
|
|
|
+ //this.$Message.info('Clicked cancel');
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.dataLoading = true;
|
|
|
+ let postData = {
|
|
|
+ scorecalcId: this.tableInfo.tableId,
|
|
|
+ teammodelId: this.$store.state.userInfo.TEAMModelId,
|
|
|
+ };
|
|
|
+ this.$api.learnActivity.addScoreCalcAct(postData).then(
|
|
|
+ (res) => {
|
|
|
+ if (res) {
|
|
|
+ this.calcData.scoreCalcAct.push(res);
|
|
|
+ this.projectDatas.push({
|
|
|
+ click: true,
|
|
|
+ projectName: res.name,
|
|
|
+ percentage: res.rate,
|
|
|
+ id: res.id,
|
|
|
+ });
|
|
|
+ this.reloadProject(this.projectDatas.length - 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ this.$Message.error(this.$t("cusMgt.gradeErr"));
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.dataLoading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 刪除一個自訂項目
|
|
|
+ delProject(index) {
|
|
|
+ this.dataLoading = true;
|
|
|
+ this.confirmDeleteAct(index + 3);
|
|
|
+ //this.projectDatas.splice(index + 3, 1);
|
|
|
+ //this.isSave = false;
|
|
|
+ this.dataLoading = false;
|
|
|
+ },
|
|
|
+ //拖曳相關--str---↓↓--
|
|
|
+ allowDrop(e) {
|
|
|
+ //取消默認行為
|
|
|
+ console.log("allowDrop");
|
|
|
+ e.preventDefault();
|
|
|
+ },
|
|
|
+ dragStart(e, index) {
|
|
|
+ console.log("dragStart");
|
|
|
+ let tar = e.target;
|
|
|
+ e.dataTransfer.setData("Text", index);
|
|
|
+ if (tar.tagName.toLowerCase() == "li") {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ drop(e, index, whatData) {
|
|
|
+ //放置
|
|
|
+ console.log("drop");
|
|
|
+
|
|
|
+ this.allowDrop(e);
|
|
|
+ if (whatData == "classDatas") {
|
|
|
+ let arr = this.classDatas.concat([]),
|
|
|
+ dragIndex = e.dataTransfer.getData("Text");
|
|
|
+ let temp = arr.splice(dragIndex, 1);
|
|
|
+
|
|
|
+ arr.splice(index, 0, temp[0]);
|
|
|
+ this.classDatas = arr;
|
|
|
+
|
|
|
+ //#region 更新子項目順序
|
|
|
+ let sortItems = [];
|
|
|
+ for (let i = 0; i < this.classDatas.length; i++) {
|
|
|
+ let id = this.classDatas[i].id;
|
|
|
+ sortItems.push({
|
|
|
+ id: this.classDatas[i].id,
|
|
|
+ sort: i + 1,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ let postData = {
|
|
|
+ scoreCalcActId: this.projectDatas[this.selectIndex].id,
|
|
|
+ teammodelId: this.$store.state.userInfo.TEAMModelId,
|
|
|
+ sortItems: sortItems,
|
|
|
+ };
|
|
|
+ this.dataLoading = true;
|
|
|
+
|
|
|
+ this.$api.learnActivity.updateScoreCalcActItemSort(postData).then(
|
|
|
+ (res) => {
|
|
|
+ if (res) {
|
|
|
+ // 重新排序原始資料
|
|
|
+ this.calcData.scoreCalcAct.forEach((element) => {
|
|
|
+ if (this.projectDatas[this.selectIndex].id === element.id) {
|
|
|
+ // 先找到要排序的子項目資料
|
|
|
+ for (let i = 0; i < element.items.length; i++) {
|
|
|
+ for (let j = 0; j < this.classDatas.length; j++) {
|
|
|
+ if (this.classDatas[j].id === element.items[i].id) {
|
|
|
+ // 重新設定原始資料的排序
|
|
|
+ element.items[i].sort = j + 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ element.items = element.items.sort((a, b) => a.sort - b.sort); // 設定好排序後 進行升冪排序
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ this.$Message.error(this.$t("cusMgt.gradeErr"));
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.dataLoading = false;
|
|
|
+ //#endregion
|
|
|
+ } else if (whatData == "projectDatas") {
|
|
|
+ let arr = this.projectDatas.concat([]),
|
|
|
+ dragIndex = e.dataTransfer.getData("Text");
|
|
|
+ let temp = arr.splice(dragIndex, 1);
|
|
|
+
|
|
|
+ arr.splice(index, 0, temp[0]);
|
|
|
+ this.projectDatas = arr;
|
|
|
+ this.selectIndex = index;
|
|
|
+
|
|
|
+ //#region 更新活動項目順序
|
|
|
+ let sortItems = [];
|
|
|
+ for (let i = 0; i < this.projectDatas.length; i++) {
|
|
|
+ let id = this.projectDatas[i].id;
|
|
|
+ sortItems.push({
|
|
|
+ id: this.projectDatas[i].id,
|
|
|
+ sort: i + 1,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ let postData = {
|
|
|
+ scoreCalcId: this.tableInfo.tableId,
|
|
|
+ teammodelId: this.$store.state.userInfo.TEAMModelId,
|
|
|
+ sortItems: sortItems,
|
|
|
+ };
|
|
|
+ this.dataLoading = true;
|
|
|
+ this.$api.learnActivity.updateScoreCalcActSort(postData).then(
|
|
|
+ (res) => {
|
|
|
+ if (res) {
|
|
|
+ // 重新排序原始資料
|
|
|
+ this.calcData.scoreCalcAct.forEach((element) => {
|
|
|
+ for (let i = 0; i < this.projectDatas.length; i++) {
|
|
|
+ if (this.projectDatas[i].id === element.id) {
|
|
|
+ element.sort = i + 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.calcData.scoreCalcAct = this.calcData.scoreCalcAct.sort(
|
|
|
+ (a, b) => a.sort - b.sort
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ this.$Message.error(this.$t("cusMgt.gradeErr"));
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.dataLoading = false;
|
|
|
+ //#endregion
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dragEnd() {
|
|
|
+ console.log("dragEnd");
|
|
|
+ //this.isSave = false;
|
|
|
+ },
|
|
|
+ //拖曳相關--end---↑↑--
|
|
|
+ // 新增一個子項目
|
|
|
+ addClass() {
|
|
|
+ this.dataLoading = true;
|
|
|
+ let postData = {
|
|
|
+ scoreCalcActId: this.projectDatas[this.selectIndex].id,
|
|
|
+ teammodelId: this.$store.state.userInfo.TEAMModelId,
|
|
|
+ };
|
|
|
+ this.$api.learnActivity.addScoreCalcActItem(postData).then(
|
|
|
+ (res) => {
|
|
|
+ if (res) {
|
|
|
+ this.calcData.scoreCalcAct.forEach((element) => {
|
|
|
+ // 找到目前選中的項目 並更新其子項目資料
|
|
|
+ if (this.projectDatas[this.selectIndex].id === element.id) {
|
|
|
+ element.items.push(res);
|
|
|
+
|
|
|
+ let islessonrecord = false;
|
|
|
+ if (element.type === "lessonrecord") {
|
|
|
+ islessonrecord = true;
|
|
|
+ }
|
|
|
+ this.classDatas.push({
|
|
|
+ id: res.id,
|
|
|
+ single: res.use,
|
|
|
+ custom: true,
|
|
|
+ className: res.name,
|
|
|
+ proportion: res.rate,
|
|
|
+ score: 0,
|
|
|
+ islessonrecord: islessonrecord,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ this.$Message.error(this.$t("cusMgt.gradeErr"));
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.dataLoading = false;
|
|
|
+ },
|
|
|
+ // 刪除一個子項目
|
|
|
+ delClass(id) {
|
|
|
+ this.$Modal.confirm({
|
|
|
+ title: this.$t("scoreCalc.deleteRemind1"),
|
|
|
+ content: this.$t("scoreCalc.remindMessage3"),
|
|
|
+ onOk: async () => {
|
|
|
+ this.dataLoading = true;
|
|
|
+ let postData = {
|
|
|
+ scoreCalcActId: this.projectDatas[this.selectIndex].id,
|
|
|
+ id: id,
|
|
|
+ teammodelId: this.$store.state.userInfo.TEAMModelId,
|
|
|
+ };
|
|
|
+ this.$api.learnActivity.deleteScoreCalcActItem(postData).then(
|
|
|
+ (res) => {
|
|
|
+ if (res) {
|
|
|
+ this.calcData.scoreCalcAct.forEach((element) => {
|
|
|
+ // 找到刪除的項目 並移除其子項目資料
|
|
|
+ if (this.projectDatas[this.selectIndex].id === element.id) {
|
|
|
+ for (let i = 0; i < element.items.length; i++) {
|
|
|
+ if (id === element.items[i].id) {
|
|
|
+ element.items.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 找到刪除的項目 並移除其子項目資料
|
|
|
+ for (let i = 0; i < this.classDatas.length; i++) {
|
|
|
+ if (id === this.classDatas[i].id) {
|
|
|
+ this.classDatas.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ this.$Message.error(this.$t("cusMgt.gradeErr"));
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.dataLoading = false;
|
|
|
+ },
|
|
|
+ onCancel: () => {
|
|
|
+ //this.$Message.info('Clicked cancel');
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 登錄分數
|
|
|
+ keyScore(id, type, className) {
|
|
|
+ //(類型)
|
|
|
+ this.dataLoading = true;
|
|
|
+ this.classDataprop = [];
|
|
|
+ //debugger;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let dt = new Date();
|
|
|
+
|
|
|
+ this.classData = [];
|
|
|
+ this.selectClassId = id;
|
|
|
+ if (type) this.class_type = "lessonrecord";
|
|
|
+ else this.class_type = "activity";
|
|
|
+ this.className = className;
|
|
|
+ this.modalVisibleStudentScore = true;
|
|
|
+
|
|
|
+ this.calcData.scoreCalcAct.forEach((element) => {
|
|
|
+ if (element.id === this.projectDatas[this.selectIndex].id) {
|
|
|
+ // 先選中項目
|
|
|
+ element.items.forEach((item) => {
|
|
|
+ if (item.id === id) {
|
|
|
+ // 再選中子項目
|
|
|
+ if (element.type === "lessonrecord") {
|
|
|
+ // 如果是課堂紀錄要登記三種分數
|
|
|
+ for (let i = 0; i < item.stuActAttendScores.length; i++) {
|
|
|
+ // for (let i = 0; i < 20; i++) {
|
|
|
+ this.classData.push({
|
|
|
+ name: this.calcData.members[i].name,
|
|
|
+ id: this.calcData.members[i].id,
|
|
|
+ attendance: item.stuActAttendScores[i],
|
|
|
+ score: item.stuActPointScores[i],
|
|
|
+ interactiveScore: item.stuActItactScores[i],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 如果不是課堂紀錄登記一種分數
|
|
|
+ for (let i = 0; i < item.scores.length; i++) {
|
|
|
+ // for (let i = 0; i < 20; i++) {
|
|
|
+ this.classData.push({
|
|
|
+ name: this.calcData.members[i].name,
|
|
|
+ id: this.calcData.members[i].id,
|
|
|
+ attendance: 0,
|
|
|
+ score: item.scores[i],
|
|
|
+ interactiveScore: 0,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.classDataprop = this.classData;
|
|
|
+ });
|
|
|
+ }, 1);
|
|
|
+ let that = this;
|
|
|
+ setTimeout(() => {
|
|
|
+ that.dataLoading = false;
|
|
|
+ }, 1000);
|
|
|
+ //this.dataLoading = false;
|
|
|
+ },
|
|
|
+ modalVisibleStudentScoreFun(value) {
|
|
|
+ this.modalVisibleStudentScore = value;
|
|
|
+ this.classDataprop = [];
|
|
|
+ },
|
|
|
+ updateInputprojectName(event) {
|
|
|
+ //debugger;
|
|
|
+ this.isSave = false;
|
|
|
+ const newProjectName = event.target.value;
|
|
|
+ this.projectDatas[this.thisClassData.index].projectName = newProjectName;
|
|
|
+ },
|
|
|
+ updateInputpercentage(event) {
|
|
|
+ this.isSave = false;
|
|
|
+ const newPercentage = event.target.value;
|
|
|
+ this.projectDatas[this.thisClassData.index].percentage = newPercentage;
|
|
|
+ },
|
|
|
+ isInput() {
|
|
|
+ this.isSave = false;
|
|
|
+ },
|
|
|
+ getProjectDatasClick(index) {
|
|
|
+ // 檢查選中項目click防呆
|
|
|
+ if (this.projectDatas[index] !== undefined) {
|
|
|
+ return this.projectDatas[index].click ? this.projectDatas[index].click : false;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getProjectName(index) {
|
|
|
+ // 檢查選中項目ProjectName防呆
|
|
|
+ if (this.projectDatas[index] !== undefined) {
|
|
|
+ // 轉換多語系
|
|
|
+ switch (this.projectDatas[index].projectName) {
|
|
|
+ case "課堂紀錄":
|
|
|
+ return this.$t("scoreCalc.lessonRecordTitle");
|
|
|
+ case "作業活動":
|
|
|
+ return this.$t("scoreCalc.homeworkTitle");
|
|
|
+ case "評量活動":
|
|
|
+ return this.$t("scoreCalc.examTitle");
|
|
|
+ default:
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getPercentage(index) {
|
|
|
+ // 檢查選中項目Percentage防呆
|
|
|
+ if (this.projectDatas[index] !== undefined) {
|
|
|
+ return this.projectDatas[index].percentage
|
|
|
+ ? this.projectDatas[index].percentage
|
|
|
+ : "";
|
|
|
+ } else {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getActList(listId) {
|
|
|
+ //取項目資料
|
|
|
+ this.projectDatas = [];
|
|
|
+ let acts;
|
|
|
+ let postData = { id: this.tableInfo.tableId };
|
|
|
+ this.dataLoading = true;
|
|
|
+ this.$api.learnActivity.getScoreCalcAll(postData).then(
|
|
|
+ (res) => {
|
|
|
+ if (res) {
|
|
|
+ this.calcData = res;
|
|
|
+ if (res.scoreCalcAct) acts = res.scoreCalcAct.sort((a, b) => a.sort - b.sort); //title根據sort進行降冪排序
|
|
|
+
|
|
|
+ acts.forEach((element) => {
|
|
|
+ // 比對是否為選中的活動
|
|
|
+ if (listId === element.id) {
|
|
|
+ this.projectDatas.push({
|
|
|
+ click: true,
|
|
|
+ projectName: element.name,
|
|
|
+ percentage: element.rate,
|
|
|
+ id: element.id,
|
|
|
+ });
|
|
|
+
|
|
|
+ this.reloadProject(this.projectDatas.length - 1);
|
|
|
+ } else {
|
|
|
+ this.projectDatas.push({
|
|
|
+ click: false,
|
|
|
+ projectName: element.name,
|
|
|
+ percentage: element.rate,
|
|
|
+ id: element.id,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ this.$Message.error(this.$t("cusMgt.gradeErr"));
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.dataLoading = false;
|
|
|
+ },
|
|
|
+ setSubListData(element) {
|
|
|
+ // 子項目資料填入
|
|
|
+ element.items.forEach((subelement) => {
|
|
|
+ if (element.type !== "lessonrecord") {
|
|
|
+ let sum = 0;
|
|
|
+ subelement.scores.forEach((scoreselement) => {
|
|
|
+ sum = sum + scoreselement;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.classDatas.push({
|
|
|
+ id: subelement.id,
|
|
|
+ single: subelement.use,
|
|
|
+ custom: subelement.custom,
|
|
|
+ className: subelement.name,
|
|
|
+ proportion: subelement.rate,
|
|
|
+ score: Math.round((sum / subelement.scores.length) * 10) / 10,
|
|
|
+ islessonrecord: false,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.classDatas.push({
|
|
|
+ id: subelement.id,
|
|
|
+ single: subelement.use,
|
|
|
+ custom: subelement.custom,
|
|
|
+ className: subelement.name,
|
|
|
+ proportion: subelement.rate,
|
|
|
+ score: 0,
|
|
|
+ islessonrecord: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ confirmDeleteAct(index) {
|
|
|
+ // 刪除項目
|
|
|
+ this.$Modal.confirm({
|
|
|
+ title: this.$t("scoreCalc.deleteRemind2"),
|
|
|
+ content: this.$t("scoreCalc.remindMessage3"),
|
|
|
+ onOk: async () => {
|
|
|
+ if (index === this.selectIndex) {
|
|
|
+ // 如果要刪除的跟目前選中的活動向相同 焦點回到第一個項目
|
|
|
+ this.reloadProject(0);
|
|
|
+ }
|
|
|
+ let postData = {
|
|
|
+ id: this.projectDatas[index].id,
|
|
|
+ teammodelId: this.$store.state.userInfo.TEAMModelId,
|
|
|
+ scorecalcId: this.tableInfo.tableId,
|
|
|
+ };
|
|
|
+ this.dataLoading = true;
|
|
|
+ await this.$api.learnActivity.deleteScoreCalcAct(postData).then(
|
|
|
+ (res) => {
|
|
|
+ if (res) {
|
|
|
+ for (let i = 0; i < this.calcData.scoreCalcAct.length; i++) {
|
|
|
+ // 移除已刪除項目
|
|
|
+ // 比對是否為選中的活動
|
|
|
+ if (this.projectDatas[index].id === this.calcData.scoreCalcAct[i].id) {
|
|
|
+ this.calcData.scoreCalcAct.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.projectDatas.splice(index, 1); // 移除已刪除項目
|
|
|
+
|
|
|
+ if (this.projectDatas.length === 3) {
|
|
|
+ this.reloadProject(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$Message.info(this.$t("scoreCalc.remindMessage4"));
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ this.$Message.error(this.$t("cusMgt.gradeErr"));
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.dataLoading = false;
|
|
|
+ },
|
|
|
+ onCancel: () => {
|
|
|
+ //this.$Message.info('Clicked cancel');
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ updateItemScore(val) {
|
|
|
+ // 接取子項目傳的值
|
|
|
+ this.inputValFromChild = val;
|
|
|
+
|
|
|
+ if (val) {
|
|
|
+ let postData = {};
|
|
|
+ let stuActAttendScores = [];
|
|
|
+ let stuActPointScores = [];
|
|
|
+ let stuActItactScores = [];
|
|
|
+ let scores = [];
|
|
|
+ // 根據目前選中的類別設定欄位更新分數
|
|
|
+ if (this.class_type === "lessonrecord") {
|
|
|
+ for (let i = 0; i < val.length; i++) {
|
|
|
+ stuActAttendScores.push(val[i].attendance);
|
|
|
+ stuActPointScores.push(val[i].score);
|
|
|
+ stuActItactScores.push(val[i].interactiveScore);
|
|
|
+ }
|
|
|
+
|
|
|
+ postData = {
|
|
|
+ scoreCalcActId: this.projectDatas[this.selectIndex].id,
|
|
|
+ teammodelId: this.$store.state.userInfo.TEAMModelId,
|
|
|
+ id: this.selectClassId,
|
|
|
+ stuActAttendScores: stuActAttendScores,
|
|
|
+ stuActPointScores: stuActPointScores,
|
|
|
+ stuActItactScores: stuActItactScores,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ for (let i = 0; i < val.length; i++) {
|
|
|
+ scores.push(val[i].score);
|
|
|
+ }
|
|
|
+ postData = {
|
|
|
+ scoreCalcActId: this.projectDatas[this.selectIndex].id,
|
|
|
+ teammodelId: this.$store.state.userInfo.TEAMModelId,
|
|
|
+ id: this.selectClassId,
|
|
|
+ scores: scores,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ this.dataLoading = true;
|
|
|
+ this.$api.learnActivity.updateItemScore(postData).then(
|
|
|
+ (res) => {
|
|
|
+ // 更新原始資料的那一個子項目的成績
|
|
|
+ this.calcData.scoreCalcAct.forEach((element) => {
|
|
|
+ if (element.id === this.projectDatas[this.selectIndex].id) {
|
|
|
+ // 先選中項目
|
|
|
+ element.items.forEach((item) => {
|
|
|
+ if (item.id === this.selectClassId) {
|
|
|
+ // 再選中子項目
|
|
|
+ if (element.type === "lessonrecord") {
|
|
|
+ // 如果是課堂紀錄要登記三種分數
|
|
|
+ item.stuActAttendScores = stuActAttendScores;
|
|
|
+ item.stuActPointScores = stuActPointScores;
|
|
|
+ item.stuActItactScores = stuActItactScores;
|
|
|
+ } else {
|
|
|
+ // 如果不是課堂紀錄登記一種分數
|
|
|
+ item.scores = scores;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 登錄分數後平均分數要重算 先取得要修改的子項目索引
|
|
|
+ for (let i = 0; i < this.classDatas.length; i++) {
|
|
|
+ if (this.classDatas[i].id === this.selectClassId) {
|
|
|
+ this.selectClassIndex = i;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.calcData.scoreCalcAct.forEach((element) => {
|
|
|
+ if (this.projectDatas[this.selectIndex].id === element.id) {
|
|
|
+ // 子項目資料填入
|
|
|
+ element.items.forEach((subelement) => {
|
|
|
+ if (subelement.id === this.selectClassId) {
|
|
|
+ if (element.type !== "lessonrecord") {
|
|
|
+ let sum = 0;
|
|
|
+ subelement.scores.forEach((scoreselement) => {
|
|
|
+ sum = sum + scoreselement;
|
|
|
+ });
|
|
|
+ this.classDatas[this.selectClassIndex].score =
|
|
|
+ Math.round((sum / subelement.scores.length) * 10) / 10;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.$Message.info(this.$t("scoreCalc.remindMessage5"));
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ this.$Message.error(this.$t("cusMgt.gradeErr"));
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.dataLoading = false;
|
|
|
+ }
|
|
|
+ this.classDataprop = [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+@import "./AddProject.less";
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+//.ivu-table.ivu-table-stripe .ivu-table-cell.demo-table-info-column
|
|
|
+.score-container {
|
|
|
+ .right {
|
|
|
+ .content {
|
|
|
+ .body {
|
|
|
+ .card {
|
|
|
+ .ivu-input {
|
|
|
+ color: #2d8cf0;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ resize: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|