|
|
@@ -1,25 +1,96 @@
|
|
|
<template>
|
|
|
<div class="englishBox">
|
|
|
<div class="themeTitle">
|
|
|
- <div>作文题目<span style="color: red;">*</span></div>
|
|
|
+ <div>作文题目<span style="color: red">*</span></div>
|
|
|
<div>
|
|
|
<el-input
|
|
|
v-model="engList.engTitle"
|
|
|
placeholder="请填写作文题目"
|
|
|
- @change="setEngList"
|
|
|
></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="themeText">
|
|
|
- <div>作文要求<span style="color: red;">*</span></div>
|
|
|
+ <div>作文要求<span style="color: red">*</span></div>
|
|
|
<div>
|
|
|
<editor-bar
|
|
|
placeholder="请填写作文要求"
|
|
|
v-model="engList.englishText"
|
|
|
- @change="setEngList"
|
|
|
></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>
|
|
|
+ <div class="addeEva" @click="setEvaTitle">
|
|
|
+ <img src="../../../../assets/icon/addEva.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
|
|
|
@@ -29,62 +100,251 @@ export default {
|
|
|
components: {
|
|
|
EditorBar,
|
|
|
},
|
|
|
- props: ["englishList"],
|
|
|
+ props: ["englishList", "oid"],
|
|
|
data() {
|
|
|
return {
|
|
|
engList: {
|
|
|
engTitle: "",
|
|
|
englishText: "",
|
|
|
+ textJson: {
|
|
|
+ score: 5,
|
|
|
+ startJson: [],
|
|
|
+ },
|
|
|
},
|
|
|
+ englistEva: [],
|
|
|
+ engEvaId: "",
|
|
|
+ englishTitle: "",
|
|
|
+ time: null,
|
|
|
+ engEvadialogVisible: false,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- setEngList() {
|
|
|
- this.$emit("setEnglish", this.engList);
|
|
|
+ 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]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .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 = this.englishList;
|
|
|
+ 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;
|
|
|
}
|
|
|
-.themeTitle {
|
|
|
+.englishBox > div:not(:first-child) {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.themeTitle,
|
|
|
+.themeText,
|
|
|
+.themeEva {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: nowrap;
|
|
|
align-items: center;
|
|
|
}
|
|
|
-.themeTitle > div:first-child {
|
|
|
+.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;
|
|
|
}
|
|
|
-.themeTitle > div:last-child {
|
|
|
+.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;
|
|
|
}
|
|
|
-.themeText {
|
|
|
+.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: row;
|
|
|
+ flex-direction: column;
|
|
|
flex-wrap: nowrap;
|
|
|
align-items: flex-start;
|
|
|
- margin-top: 20px;
|
|
|
}
|
|
|
-.themeText > div:first-child {
|
|
|
- min-width: 65px;
|
|
|
- margin-top: 10px;
|
|
|
- font-weight: bold;
|
|
|
+.firstJson > div {
|
|
|
+ margin-bottom: 5px;
|
|
|
}
|
|
|
-.themeText > div:last-child {
|
|
|
- width: calc(100% - 75px);
|
|
|
- margin-left: 10px;
|
|
|
+.delteBox {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
-.themeText > div:last-child >>> .text {
|
|
|
- min-height: 400px !important;
|
|
|
+.delteBox > img {
|
|
|
+ position: absolute;
|
|
|
+ top: 4px;
|
|
|
+ right: 10px;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
</style>
|
zengyicheng