pbl-teacher-table/src/components/pages/test/examine/conpoments/shareBox/index.vue

<template>
  <el-dialog
    title="提醒"
    :visible.sync="remDig"
    :append-to-body="true"
    width="560px"
    :before-close="handleClose"
    class="dialog_diy"
  >
    <div class="share_box">
      <div class="info_box" ref="info">
        <!-- <div class="info">
          <span>表单范围：</span>
          <span>{{ reversedMessage }}</span>
        </div> -->
        <div class="info">
          <span>填写范围：</span>
          <el-select
            v-model="teas"
            @change="getData"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in TeaList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <!-- <div class="info" v-if="testJson && testJson.overtime">
          <span>截止时间：</span>
          <span>{{ testJson.overtime }}</span>
        </div> -->
        <div class="info">
          <span>需提交人数：</span>
          <span>{{ remindNum }}</span>
        </div>
        <div class="info">
          <span>未完成人数：</span>
          <span v-html="remindList.length"></span>
        </div>
        <div class="info">
          <span>未完成名单：</span>
          <span>{{
            remindList.length > 20
              ? isSuo
                ? remindList.slice(0, 20).join(",") + "..."
                : remindList.join(",")
              : remindList.join(",")
          }}</span>
          <span
            class="more"
            v-if="remindList.length > 20"
            @click="isSuo = !isSuo"
            >{{ isSuo ? "查看更多" : "收起" }}</span
          >
        </div>
      </div>

      <div class="btn_box">
        <button class="c_pub_button_confirm tag-read2" @click="getExcelTab">
          导出
        </button>
        <button
          class="c_pub_button_confirm tag-read2"
          @click="copy2"
          :data-clipboard-text="copyText2"
        >
          复制信息
        </button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Clipboard from "clipboard";
export default {
  props: {
    remDig: {
      type: Boolean,
      default: false
    },
    pType: {
      type: Number
    },
    TeaList: {
      type: Array
    },
    testJson: {
      type: Object
    },
    TeachingValue: {
      type: String
    },
    TeachName: {
      type: Array
    }
  },
  data() {
    return {
      origin: "",
      copyText: "",
      copyText2: "",
      noCount: 0,
      pname: [],
      isSuo: true,
      excelData: [],
      remindNum: 0,
      remindList: [],
      remindName: [],
      oid: this.$route.query.oid, //学校id
      org: this.$route.query.org, //组织id
      teas: []
    };
  },
  computed: {
    reversedMessage() {
      if (this.TeachingValue == "") {
        return this.testJson.juriP ? this.testJson.juriP : "所有人";
      } else {
        return this.TeachName ? this.TeachName[0].name : "所有人";
      }
    }
  },
  methods: {
    handleClose(done) {
      this.close();
      done();
    },
    close() {
      this.teas = [];
      this.$emit("update:remDig", false);
    },

    copy2() {
      this.copyText2 = `填写范围：${
        this.teas ? this.remindName.join(",") : "所有人"
      }\n${"需提交人数：" +
        this.remindNum +
        "\n"}${"未完成人数：" + this.remindList.length + "\n"}${
        this.remindList.length
          ? "未完成名单：" + this.remindList.join(",") + "\n"
          : ""
      }`;
      var clipboard = new Clipboard(".tag-read2");
      clipboard.on("success", e => {
        this.$message.success("复制成功");
        console.log("复制成功");
        clipboard.destroy(); // 释放内存
      });
      clipboard.on("error", e => {
        console.log("不支持复制,该浏览器不支持自动复制");
        clipboard.destroy(); // 释放内存
      });
    },
    getData() {
      this.remindList = [];
      this.remindName = [];

      this.remindNum = 0;
      let params = {
        oid: this.oid,
        org: this.org,
        tea: this.teas.join(","),
        ptype: this.pType
      };

      this.ajax
        .get(this.$store.state.api + "selectExamineTeaRemind", params)
        .then(res => {
          let data = res.data[0];
          this.excelData = JSON.parse(JSON.stringify(data));
          this.remindNum = data.length > 0 ? data[0].num : 0;
          data.forEach(e => {
            this.remindList.push(e.username);
          });
          //   this.digLoading = false;

          if (this.teas.length > 0) {
            this.teas.forEach(e => {
              this.TeaList.forEach(k => {
                if (e == k.id) {
                  this.remindName.push(k.name);
                }
              });
            });
          }

          console.log("selectExamineTeaRemind", this.remindName);
        })
        .catch(err => {
          console.error(err);
        });

      //     let params = {
      //         id: this.testJson.courseId,
      //         tea: this.TeachingValue
      //     };
      //     this.ajax
      //         .get(this.$store.state.api + "getTestWorkShareCopy", params)
      //         .then((res) => {
      //             console.log('res.datares.datares.datares.datares.datares.data',res.data);
      //             let parray = res.data[0]
      //             let is = res.data[1]
      //             this.noCount = parray.length - is.length
      //             let isA = []
      //             for(var i=0;i<is.length;i++){
      //                 isA.push(is[i].userid)
      //             }
      //             let pname = []
      //             for(var i=0;i<parray.length;i++){
      //                 if(isA.indexOf(parray[i].userid) == -1){
      //                     pname.push(parray[i].username)
      //                 }
      //             }
      //             this.pname = pname
      //         })
      //         .catch((err) => {
      //             console.error(err);
      //         });
    },
    getExcelTab() {
      var res = this.excelData;
      // console.log('导出数据',res);
      //如果value的json字段的key值和想要的headers值不一致时，可做如下更改
      //将和下面的Object.fromEntries结合，将json字段的key值改变为要求的excel的header值
      var array = [];
      for (var i = 0; i < res.length; i++) {
        var _json = {};
        _json["教师姓名"] = res[i].username;
        _json["教师账号"] = res[i].eName;
        _json["所属教研室"] = res[i].tea;
        array.push(_json);
      }

      var XLSX = require("xlsx");
      const workbook = XLSX.utils.book_new(); //创建一个新的工作簿对象
      let ws = XLSX.utils.json_to_sheet(array); //将json对象数组转化成工作表
      ws["!cols"] = [
        //设置每一列的宽度
        { wch: 30 },
        { wch: 30 },
        { wch: 30 }
      ];

      XLSX.utils.book_append_sheet(workbook, ws, "sheet1"); //把sheet添加到workbook里，第三个参数是sheet名
      XLSX.writeFile(workbook, "未完成名单.xlsx");
      // const wopts = { bookType: "xlsx", bookSST: false, type: "array" };//写入的样式bookType:输出的文件类型，type：输出的数据类型，bookSST: 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
      // const wbout = XLSX.write(workbook, wopts);// 浏览器端和node共有的API,实际上node可以直接使用xlsx.writeFile来写入文件,但是浏览器没有该API
      // FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), `${title} demo.xlsx`);//保存文件
      this.$message({
        message: "导出成功",
        type: "success"
      });
    }
  },
  watch: {
    remDig(newValue, oldValue) {
      if (newValue) {
        this.isSuo = true;
        this.getData();
      }
    }
  }
  // mounted(){
  //     console.log(top.origin);
  // },
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog {
  height: 70% !important;
  min-width: 650px !important;
  margin-top: 10% !important;
  /* height: 100%; */
  /* margin: 0 auto !important; */
}

/* .dialog_diy >>> .el-dialog__header {
  background: #454545 !important;
  padding: 25px 20px;
} */
.dialog_diy >>> .el-dialog__header {
  background: #fff !important;
  padding: 15px 20px;
}

.dialog_diy >>> .el-dialog__body {
  height: calc(100% - 124px);
  box-sizing: border-box;
  padding: 0px;
}

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

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

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

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

.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #fff;
}

.share_box {
  width: 100%;
  height: 100%;
  padding: 20px 15px;
  box-sizing: border-box;
}

.info_box {
  margin: 0 0 20px;
}

.info_box > .info {
  line-height: 18px;
}

.info_box > .info > span:nth-child(1) {
  color: #00000099;
}

.info_box > .info > span:nth-child(2) {
  color: #000000;
}

.info_box > .info + .info {
  margin-top: 10px;
}

.url_box {
  margin-bottom: 20px;
}

.qrcode_box {
  margin-bottom: 20px;
}

.url_box > .url {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  height: 35px;
  padding: 0 7px;
  box-sizing: border-box;
}

.url_box > .url > span {
  font-size: 16px;
  color: #000000;
}

.url_box > .url > span:nth-child(1) {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.url_box > .url > span:nth-child(2) {
  margin-left: auto;
  border-left: 1px solid #e7e7e7;
  padding-left: 7px;
  cursor: pointer;
  min-width: fit-content;
}

.url_box > .title,
.qrcode_box > .title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.qrcode_box > .qrcode {
  padding: 7px;
  border: 1px solid #e7e7e7;
  width: fit-content;
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
}

.qrcode_box > .qrcode > span:nth-child(1) {
  width: 100px;
  display: block;
  height: 100px;
}

.qrcode_box > .qrcode > span:nth-child(2) {
  background: #f0f2f5;
  padding: 7px 15px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  color: #000;
  margin-left: 7px;
}

.btn_box {
  display: flex;
  justify-content: flex-end;
}

.more {
  cursor: pointer;
  color: #0061ff;
}
</style>