1

src/components/pages/evaluation.vue

@@ -23,7 +23,7 @@
           <span>目标管理设置</span>
           <div class="student_button">
             <el-button type="primary" class="bgColor" @click="addED"
-              >添加目标管理</el-button
+              >添加目标</el-button
             >
           </div>
         </div>
@@ -37,29 +37,66 @@
         </div>
       </div>
       <div class="pb_content_body" style="height: 100%">
-        <div class="e_box">
-          <div class="e_card" v-for="(item, index) in dataArray" :key="index">
-            <div class="e_card_picture">
-              <img src="../../assets/e_picture.png" />
-            </div>
-            <div class="e_card_name">
-              <span>{{ item.title }}</span>
-            </div>
-            <div class="e_card_time">
-              <span>{{ item.time }}</span>
-            </div>
-            <div class="e_card_btn">
-              <span @click="checkE(item)">查看</span>
-              <span @click="deleteE(item.id)">删除</span>
-            </div>
-          </div>
-          <div
-            v-if="dataArray.length === 0"
-            style="margin: 0 auto; color: #6e6e6e"
+        <el-table
+          ref="table"
+          :data="dataArray"
+          border
+          :height="tableHeight"
+          :fit="true"
+          v-loading="isLoading"
+          style="width: 100%"
+          :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
+          :row-class-name="tableRowClassName"
+        >
+          <el-table-column
+            label="目标名称"
+            min-width="15"
+            align="center"
+            prop="title"
           >
-            暂无数据
-          </div>
-        </div>
+          </el-table-column>
+          <el-table-column
+            prop="username"
+            label="负责人"
+            min-width="15"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="time"
+            label="创建时间"
+            min-width="15"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column label="操作" width="250px">
+            <template slot-scope="scope">
+              <div class="btnBox">
+                <el-button
+                  class="de_button"
+                  type="primary"
+                  size="small"
+                  @click="checkE(scope.row)"
+                  >查看</el-button
+                >
+                <el-button
+                  class="de_button"
+                  type="primary"
+                  size="small"
+                  @click="copyEva(scope.row.id)"
+                  >复制</el-button
+                >
+                <el-button
+                  class="de_button"
+                  type="primary"
+                  size="small"
+                  @click="deleteE(scope.row.id, scope.row.userid)"
+                  >删除</el-button
+                >
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
         <div class="student_page">
           <el-pagination
             v-if="dataArray.length"
@@ -91,10 +128,17 @@
               @change="setMindData"
             ></el-input>
           </div>
-          <el-button @click="addEJson" type="primary" v-if="!update"
-            >保存</el-button
-          >
-          <el-button @click="updateEJson" type="primary" v-else>保存</el-button>
+          <div>
+            <el-button @click="addEJson" type="primary" v-if="!update"
+              >保存</el-button
+            >
+            <el-button @click="updateEJson" type="primary" v-else
+              >保存</el-button
+            >
+            <el-button @click="dialogVisible = fasle" type="primary"
+              >不保存</el-button
+            >
+          </div>
         </div>
         <div class="e_add_content">
           <div class="e_add_list">
@@ -361,6 +405,8 @@ export default {
   data() {
     return {
       data: {
+        tableHeight: "500px",
+        isLoading: false,
         meta: {
           name: "example",
           author: "dd@163.com",
@@ -396,10 +442,12 @@ export default {
       userid: this.$route.query.userid,
       oid: this.$route.query.oid,
       eTitle: "",
+      eTitle1: "",
       eName: "",
       eName1: "",
       mid: "",
       eJson: {},
+      eJson1: {},
       fid: "", //一级
       sid: "", //二级
       tid: "", //二级
@@ -413,6 +461,13 @@ export default {
     };
   },
   methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
     guid() {
       var _num,
         i,
@@ -435,20 +490,27 @@ export default {
       done();
     },
     handleClose1(done) {
-      this.$confirm("是否保存该目标？", "提示", {
-        confirmButtonText: "保存并关闭",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          if (!this.update) {
-            this.addEJson();
-          } else {
-            this.updateEJson();
-          }
-          done();
+      if (
+        JSON.stringify(this.eJson) === JSON.stringify(this.eJson1) &&
+        this.eTitle === this.eTitle1
+      ) {
+        done();
+      } else {
+        this.$confirm("是否保存该目标？", "提示", {
+          confirmButtonText: "保存并关闭",
+          cancelButtonText: "取消",
+          type: "warning",
         })
-        .catch(() => {});
+          .then(() => {
+            if (!this.update) {
+              this.addEJson();
+            } else {
+              this.updateEJson();
+            }
+            done();
+          })
+          .catch(() => {});
+      }
     },
     addE(type) {
       this.type = type;
@@ -564,22 +626,38 @@ export default {
         this.$message.error("请把所有子集删完才可以删除");
         return;
       }
-      if (this.sid == id) {
-        this.sid = "";
-      }
-      delete this.eJson[this.fid].child[id];
-      this.eJSONNum++;
-      this.$forceUpdate();
-      this.setMindData();
+      this.$confirm("是否删除该子级？", "提示", {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          if (this.sid == id) {
+            this.sid = "";
+          }
+          delete this.eJson[this.fid].child[id];
+          this.eJSONNum++;
+          this.$forceUpdate();
+          this.setMindData();
+        })
+        .catch(() => {});
     },
     deleteT(id) {
-      if (this.tid == id) {
-        this.tid = "";
-      }
-      delete this.eJson[this.fid].child[this.sid].child[id];
-      this.eJSONNum++;
-      this.$forceUpdate();
-      this.setMindData();
+      this.$confirm("是否删除该子级？", "提示", {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          if (this.tid == id) {
+            this.tid = "";
+          }
+          delete this.eJson[this.fid].child[this.sid].child[id];
+          this.eJSONNum++;
+          this.$forceUpdate();
+          this.setMindData();
+        })
+        .catch(() => {});
     },
     addEJson() {
       if (this.eTitle == "") {
@@ -636,6 +714,7 @@ export default {
       this.getData();
     },
     getData() {
+      this.isLoading = true;
       let params = {
         oid: this.oid,
         n: this.sn,
@@ -644,47 +723,80 @@ export default {
       this.ajax
         .get(this.$store.state.api + "getEvaluation", params)
         .then((res) => {
+          this.isLoading = false;
           this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
           this.dataArray = res.data[0];
         })
         .catch((err) => {
+          this.isLoading = false;
           console.error(err);
         });
     },
-    deleteE(id) {
-      this.$confirm("确定删除吗?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          let params = [
-            {
-              id: id,
-            },
-          ];
-          this.ajax
-            .post(this.$store.state.api + "deleteEvaluation", params)
-            .then((res) => {
-              this.$message.success("删除成功");
-              if (this.page != 1 && this.tableData.length == 1) {
-                this.page--;
-              }
-              this.getData();
+    deleteEva(id) {
+      let params = [
+        {
+          id: id,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "deleteEvaluation", params)
+        .then((res) => {
+          this.$message.success("删除成功");
+          if (this.page != 1 && this.tableData.length == 1) {
+            this.page--;
+          }
+          this.getData();
+        })
+        .catch((err) => {
+          this.$message.success("删除失败");
+          console.error(err);
+        });
+    },
+    deleteE(id, uid) {
+      if (this.$route.query.userid != uid) {
+        this.$message.error("不可以删除他人创建的目标!");
+        return;
+      }
+      let params = {
+        eid: id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectCourseEva", params)
+        .then((res) => {
+          if (res.data[0].length == 0) {
+            this.$confirm("确定删除吗?", "提示", {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              type: "warning",
             })
-            .catch((err) => {
-              this.$message.success("添加失败");
-              console.error(err);
-            });
+              .then(() => {
+                this.deleteEva(id);
+              })
+              .catch(() => {});
+          } else {
+            this.$confirm("此目标已被引用，是否继续删除操作?", "提示", {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              type: "warning",
+            })
+              .then(() => {
+                this.deleteEva(id);
+              })
+              .catch(() => {});
+          }
         })
-        .catch(() => {});
+        .catch((err) => {
+          console.error(err);
+        });
     },
     init() {
       this.eJson = {};
+      this.eJson1 = {};
       this.fid = "";
       this.sid = "";
       this.tid = "";
       this.eTitle = "";
+      this.eTitle1 = "";
     },
     addED() {
       this.update = false;
@@ -696,6 +808,8 @@ export default {
     checkE(res) {
       this.init();
       this.eJson = JSON.parse(res.content);
+      this.eJson1 = JSON.parse(res.content);
+      this.eTitle1 = res.title;
       this.eTitle = res.title;
       this.eid = res.id;
       this.update = true;
@@ -741,6 +855,42 @@ export default {
       }
       this.$forceUpdate();
     },
+    copyEva(eid) {
+      let params = [
+        {
+          eid: eid,
+          uid: this.userid,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "copyEva", params)
+        .then((res) => {
+          this.page = 1;
+          this.$message.success("复制成功");
+          this.getData();
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+  },
+  mounted() {
+    this.$nextTick(function () {
+      this.tableHeight =
+        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
+      if (this.tableHeight <= 530) {
+        this.tableHeight = 530;
+      }
+      // 监听窗口大小变化
+      let self = this;
+      window.onresize = function () {
+        self.tableHeight =
+          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
+        if (self.tableHeight <= 530) {
+          self.tableHeight = 530;
+        }
+      };
+    });
   },
   created() {
     this.getData();
@@ -828,55 +978,6 @@ export default {
   background: #466b99;
   border: none;
 }
-.e_box {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  min-height: 502px;
-}
-.e_card {
-  background: #fff;
-  margin-right: 20px;
-  width: 270px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border-radius: 5px;
-  margin-top: 10px;
-  text-align: center;
-}
-.e_card_picture {
-  margin: 20px 0;
-}
-.e_card_name {
-  width: 100%;
-  padding: 0 10px;
-  box-sizing: border-box;
-  margin-bottom: 5px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.e_card_time {
-  width: 100%;
-  padding: 0 10px;
-  box-sizing: border-box;
-  font-size: 15px;
-  color: #c3c3c3;
-  margin-bottom: 10px;
-}
-.e_card_btn {
-  height: 40px;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  background: rgb(244, 244, 244);
-}
-.e_card_btn span {
-  flex: 1 1 auto;
-  text-align: center;
-  cursor: pointer;
-}
 .student_page {
   margin-top: 10px;
 }
@@ -989,6 +1090,7 @@ export default {
 }
 .e_add_list_child .active {
   color: #409eff;
+  font-weight: bold;
 }
 .e_add_list_btn {
   position: absolute;
@@ -1069,4 +1171,8 @@ export default {
   width: 100%;
   background: #fff;
 }
+
+.el-table >>> .even_row {
+  background-color: #f1f1f1 !important;
+}
 </style>