pbl-teacher-table/src/components/pages/task/commpont/englishRight.vue

<template>
  <div class="englishBox">
    <div class="themeTitle">
      <div>作文题目<span style="color: red">*</span></div>
      <div>
        <el-input
          v-model="engList.engTitle"
          placeholder="请填写作文题目"
        ></el-input>
      </div>
    </div>
    <div class="themeText">
      <div>作文要求<span style="color: red">*</span></div>
      <div>
        <editor-bar
          placeholder="请填写作文要求"
          v-model="engList.englishText"
        ></editor-bar>
      </div>
    </div>
    <div class="themeEva" style="align-items: flex-start">
      <div>评价设置</div>
      <div>
        <div
          style="
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
          "
        >
          <el-select
            v-model="engEvaId"
            placeholder="预设"
            @change="setTestJson"
          >
            <el-option
              v-for="(e, eIndex) in englistEva"
              :key="eIndex"
              :label="e.title"
              :value="e.id"
            >
            </el-option>
          </el-select>
          <el-tooltip
            effect="light"
            content="点击将下列内容设置成评价模板"
            placement="top"
            v-if="engList.textJson.startJson.length > 0"
          >
            <div
              class="addeEva"
              @click="setEvaTitle"
            >
              <img src="../../../../assets/icon/addEva.png" alt="" />
            </div>
          </el-tooltip>
        </div>
        <div class="addEva">
          <el-rate
            v-model="engList.textJson.score"
            disabled
            class="engRate"
          ></el-rate>
          <div v-if="engList.textJson.startJson.length > 0">
            <div
              class="firstJson"
              v-for="(item, index) in engList.textJson.startJson"
              :key="index"
            >
              <div class="delteBox">
                <el-input v-model="item.title"></el-input>
                <img
                  v-if="engList.textJson.startJson.length > 0"
                  @click="delteItem(index)"
                  src="../../../../assets/icon/deleteN.png"
                  alt=""
                />
              </div>
              <el-input v-model="item.detile"></el-input>
            </div>
          </div>
          <div class="addeEvaItem" @click="addStartItem">
            <img src="../../../../assets/icon/addEva.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="设置名称"
      :visible.sync="engEvadialogVisible"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <el-input v-model="englishTitle" placeholder="请输入名称"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="engEvadialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertEnglishEva">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EditorBar from "../../../../components/tools/wangEnduit";
export default {
  components: {
    EditorBar,
  },
  props: ["englishList", "oid"],
  data() {
    return {
      engList: {
        engTitle: "",
        englishText: "",
        textJson: {
          score: 5,
          startJson: [],
        },
      },
      englistEva: [],
      engEvaId: "",
      englishTitle: "",
      engEvadialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    selectEnglishEva() {
      this.englistEva = [];
      let params = {
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectEnglishEva", params)
        .then((res) => {
          this.englistEva = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    addStartItem() {
      this.engList.textJson.startJson.push({
        title: "",
        detile: "",
      });
    },
    delteItem(i) {
      this.engList.textJson.startJson.splice(i, 1);
      this.$forceUpdate();
    },
    setEvaTitle() {
      this.englishTitle = "";
      this.engEvadialogVisible = true;
    },
    insertEnglishEva() {
      if (this.englishTitle == "") {
        this.$message.error("请设置名称!");
        return;
      } else if (this.engList.textJson.startJson.length == 0) {
        this.$message.error("请添加至少一条评价!");
        return;
      }
      let params = [
        {
          t: this.englishTitle,
          c: JSON.stringify(this.engList.textJson),
          oid: this.oid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "insertEnglishEva", params)
        .then((res) => {
          this.$message.success("添加成功!");
          this.engEvadialogVisible = false;
          this.selectEnglishEva();
          this.$forceUpdate();
        })
        .catch((err) => {
          this.$message.error("网络不佳");
          console.error(err);
        });
    },
    setTestJson() {
      if (this.engEvaId != "") {
        this.selectTextJsonById();
      }
    },
    selectTextJsonById() {
      let params = {
        id: this.engEvaId,
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectEnglishEvaById", params)
        .then((res) => {
          var tJson = JSON.parse(res.data[0][0].content);
          if (this.engList.textJson.startJson.length == 0) {
            this.engList.textJson = tJson;
          } else {
            this.engList.textJson.score = tJson.score;
            for (var i = 0; i < tJson.startJson.length; i++) {
              this.engList.textJson.startJson.push(tJson.startJson[i]);
            }
          }
          this.engEvaId = "";
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  watch: {
    englishList: {
      handler(newVal) {
        if (newVal) {
          if(Object.keys(this.englishList).length > 0){
            this.engList = this.englishList;
          }else{
            this.engList = this.engList;
          }
          this.$forceUpdate();
        }
      },
      deep: true,
    },
  },
  created() {
    this.engList =
      Object.keys(this.englishList).length > 0
        ? this.englishList
        : this.engList;
    this.selectEnglishEva();
  },
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog__header {
  background: #3c3c3c !important;
  padding: 15px 20px;
}

.dialog_diy >>> .el-dialog__title {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #fafafa;
}
.englishBox {
  width: 50%;
  margin: 50px auto 0;
}
.englishBox > div:not(:first-child) {
  margin-top: 20px;
}
.themeTitle,
.themeText,
.themeEva {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.themeText {
  align-items: flex-start;
}
.themeText > div:last-child >>> .text {
  min-height: 400px !important;
}
.themeTitle > div:first-child,
.themeText > div:first-child,
.themeEva > div:first-child {
  min-width: 65px;
  font-weight: bold;
}
.themeText > div:first-child {
  margin-top: 10px;
}
.themeTitle > div:last-child,
.themeText > div:last-child,
.themeEva > div:last-child {
  width: calc(100% - 75px);
  margin-left: 10px;
}
.addeEva {
  width: 200px;
  height: 40px;
  border: 1px dashed #dbdbdb;
  border-radius: 10px;
  margin-left: 10px;
  cursor: pointer;
}
.addeEvaItem {
  width: 50px;
  height: 30px;
  border: 1px dashed #dbdbdb;
  margin-top: 5px;
  border-radius: 10px;
  float: right;
  cursor: pointer;
}
.addeEva > img,
.addeEvaItem > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.engRate {
  height: 25px;
  margin: 5px 0;
}
.engRate >>> .el-rate__icon {
  font-size: 25px;
}
.addEva {
  width: 100%;
}
.firstJson {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.firstJson > div {
  margin-bottom: 5px;
}
.delteBox {
  position: relative;
  width: 100%;
}
.delteBox > img {
  position: absolute;
  top: 4px;
  right: 10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
</style>