pbl-teacher-table/src/components/pages/kindStudentEva/test/component/popbox.vue

<template>
  <div>
    <div class="cellBlock">
      <div class="username">姓名</div>
      <div class="cellInp">
        <el-input
          v-model="recordData.studentName"
          disabled
          placeholder="请输入内容"
        ></el-input>
      </div>
    </div>
    <div class="cellBlock">
      <div class="username">班级</div>
      <div>
        <el-tooltip placement="top">
          <div slot="content">{{ recordData.className }}</div>
          <el-input
            v-model="recordData.className"
            disabled
            placeholder="请输入内容"
          ></el-input>
        </el-tooltip>
      </div>
    </div>
    <div class="cellBlock">
      <div class="username">关联</div>
      <div>
        <el-select
          multiple
          collapse-tags
          v-model="recordData.contact"
          placeholder="请选择关联同学"
        >
          <el-option
            v-for="(item, index) in studentList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="cellBlock">
      <div class="username">学期</div>
      <div>
        <el-select v-model="recordData.term" placeholder="请选择">
          <el-option
            v-for="item in termList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <!-- <el-input
          v-model="recordData.semName"
          placeholder="请输入内容"
        ></el-input> -->
      </div>
    </div>
    <div class="cellBlock">
      <div class="username">维度</div>
      <div>
        <el-select
          multiple
          collapse-tags
          v-model="recordData.type"
          placeholder="请选择教研室"
        >
          <el-option
            v-for="(item, index) in weiList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="cellBlock">
      <div class="username">时间</div>
      <div>
        <el-date-picker
          v-model="recordData.recordDate"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm"
          placeholder="选择日期时间"
          style="width: 400px;"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="cellBlock">
      <div class="username">地点</div>
      <div>
        <el-input
          v-model="recordData.place"
          placeholder="请输入内容"
        ></el-input>
      </div>
    </div>
    <div class="cellBlock">
      <div class="username">观察内容</div>
      <div>
        <el-input
          v-model="recordData.recordTit"
          placeholder="请输入内容"
        ></el-input>
      </div>
    </div>
    <div style="margin: 15px 0;width: 70px;font-size: 16px;text-align: right;">
      观察记录
    </div>
    <div style="width: 500px;">
      <el-input
        type="textarea"
        placeholder="请输入内容"
        resize="none"
        rows="6"
        v-model="recordData.recordContent"
      >
      </el-input>
    </div>

    <div style="margin: 15px 0;width: 70px;font-size: 16px;">
      图片
    </div>
    <div class="imgBlock">
      <div
        class="imgCell"
        v-if="judgeNum"
        @click.stop="addImg($event)"
        style="cursor: pointer;"
      >
        +
        <input
          type="file"
          accept="image/*"
          style="display: none"
          @change="beforeUpload($event)"
        />
      </div>
      <div
        class="imgCell"
        v-for="(i, index) in recordData.recordImg"
        :key="index"
        @click.stop="previewImg(i)"
      >
        <img class="imgCellCon" :src="i" alt="" />
        <div v-if="judgeNum" class="imgDelBtn" @click.stop="delImg(i)">
          ×
        </div>
      </div>
    </div>

    <div
      style="width: 500px;display: flex;justify-content: flex-end;"
      v-if="judgeNum"
    >
      <div class="updateCordSty" @click="open">修改</div>
    </div>

    <div v-if="proVisible" class="mask">
      <div class="progressBox">
        <div class="lbox">
          <img src="@/assets/loading.gif" />上传中，请稍后
        </div>
        <div style="margin-bottom: 10px">
          <span>{{ isFinishSize }}M</span>
          /
          <span>{{ isAllSize }}M</span>
        </div>
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="progress ? progress : 0"
          style="width: 80%"
        ></el-progress>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    judgeNum: {
      type: Number,
      default: 0
    },
    recordDataCopy: {
      type: Object,
      default: () => {
        return {};
      }
    },
    termList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    weiList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    studentList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      recordData: {},
      imgList: [],
      uploadProgress: 0,
      // Progress: false,
      proVisible: false,
      progress: 0,
      inputShow: false,
      isFinishSize: 0,
      isAllSize: 0
    };
  },
  methods: {
    previewImg(url) {
      this.$hevueImgPreview(url);
    },
    // 确认修改记录提示?
    open() {
      // console.log(this.recordData);

      if (!this.recordData.type.length) {
        this.$message({
          type: "success",
          message: "请选择纬度",
          type: "warning"
        });
        return;
      }
      // return
      this.$confirm("是否修改?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.updateCord();
          this.$message({
            type: "success",
            message: "已修改"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改"
          });
        });
    },
    // 修改记录
    updateCord() {
      let params = [
        {
          rid: this.recordData.rid,
          tid: this.$route.query.userid,
          contact: this.recordData.contact.join(","),
          type: this.recordData.type.join(","),
          timing: this.recordData.recordDate,
          place: this.recordData.place,
          observeCon: this.recordData.recordTit,
          recordCon: this.recordData.recordContent,
          imgList: this.recordData.recordImg.join(","),
          term: this.recordData.term
        }
      ];

      // return console.log("修改记录", params);

      this.ajax
        .post(this.$store.state.api + "updateRecordData", params)
        .then(res => {
          console.log(res);
          this.$emit("closePop");
          this.$emit("getData");
        });
      // updateRecordData
    },

    // 删除图片
    delImg(e) {
      console.log("删除图片", e);
      const iii = this.recordData.recordImg.indexOf(e);
      this.recordData.recordImg.splice(iii, 1);
      // this.recordData.recordImg = this.recordData.recordImg.
    },
    addImg(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
      e.target.value = "";
    },
    beforeUpload(event, type) {
      // const loading = this.openLoading();
      var file = event.target.files[0];
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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"
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var imgA = [
        "png",
        "jpg",
        "jpeg",
        "bmp",
        "gif",
        "webp",
        "psd",
        "svg",
        "tiff"
      ];
      if (
        imgA.indexOf(file.name.split(".")[file.name.split(".").length - 1]) ==
        -1
      ) {
        this.$message.error("图片格式错误");
        return;
      }
      this.imgLoading = true;
      var _this = this;

      this.inputShow = false;
      this.progress = 0;
      this.proVisible = true;
      this.isFinishSize = 0;
      this.isAllSize = (file.size / 1024 / 1024).toFixed(2);
      _this.$forceUpdate();

      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[file.name.split(".").length - 1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read"
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function(evt) {
            //这里可以写进度条
            _this.progress = parseInt((evt.loaded / evt.total) * 100);
            _this.isFinishSize = (evt.loaded / 1024 / 1024).toFixed(2);
            _this.$forceUpdate();
          })
          .send(function(err, data) {
            _this.imgLoading = false;
            // loading.close();
            _this.progress = 100;
            _this.isFinishSize = _this.isAllSize;
            _this.$forceUpdate();
            setTimeout(() => {
              _this.proVisible = false;
              _this.$forceUpdate();
            }, 1000);
            _this.inputShow = true;

            if (err) {
              _this.$message.error("上传失败");
            } else {
              _this.recordData.recordImg.push(data.Location);
              _this.$forceUpdate();

              console.log(_this.checkJson);
              console.log(data.Location);
            }
          });
      }
    }
  },
  watch: {
    recordDataCopy: {
      handler: function(newVal, oldVal) {
        this.recordData = JSON.parse(JSON.stringify(this.recordDataCopy));
      },
      deep: true
    }
  },
  mounted() {
    this.recordData = JSON.parse(JSON.stringify(this.recordDataCopy));
    // console.log("??????????????????????????????????", this.recordData);
  }
};
</script>

<style scoped>
.popbox {
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px #ccc;
}
.mask {
  background-color: rgb(0 0 0 / 30%);
  /* position: fixed; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progressBox {
  width: 300px;
  height: 150px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 6px 1px #bfbfbf;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  color: #6c6c6c;
}

.progressBox >>> .el-progress-bar__outer {
  background-color: #d1dfff !important;
}

.progressBox .lbox {
  height: 50px;
  font-size: 19px;
  display: flex;
  align-items: center;
  color: #747474;
}

.progressBox .lbox img {
  width: 40px;
  margin-right: 20px;
}

.tit {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}
.cellBlock {
  width: 500px;
  box-sizing: border-box;
  padding: 10px 0;
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.cellBlock > .username {
  width: 70px;
  flex-shrink: 0;
  font-size: 16px;
  text-align: right;
  margin-right: 10px;
  display: flex;
  justify-content: flex-end;
  /* justify-content: space-between; */
}
/deep/ .el-input__inner {
  width: 400px;
}
.imgBlock {
  width: 500px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.imgCell {
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: #ccc 1px solid;
}
.imgCell > .imgDelBtn {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.imgCellCon {
  width: 100%;
  height: 100%;
  display: block;
}
.updateCordSty {
  cursor: pointer;
  padding: 10px 0;
  width: 120px;
  transform: translate(50%, 0%);
  /* float: right; */
  background-color: rgba(17, 61, 221, 0.5);
  border-radius: 5px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
} */
/* ::v-deep .el-input__inner {
  width: 200px;
}

::v-deep .el-select {
  width: 200px !important;
} */
/* .conCant {
  position: relative;
  border: 1px solid #ccc;
  width: 200px;
  min-height: 40px;
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  padding: 0 10px;
} */
/* .conCantTxt {
  display: flex;
  justify-content: flex-start;
  margin-right: 5px;
  flex-wrap: wrap;
  position: relative;
} */
/* .tactList {
  position: absolute;
  left: 0;
  top: 110%;
  width: 200px;
  height: 200px;
  overflow-y: scroll;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 10;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
} */
/* .tactListCell {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: 2px 5px;
  background-color: #ccc;
} */
/* .iSty {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(0, -50%);
} */
</style>