pbl-teacher-table/src/components/pages/askList.vue

<template>
  <div class="pb_content">
    <div class="pb_head">
      <span>问卷调查</span>
    </div>
    <div class="pb_content_body">
      <div class="cd_bread">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/ask?userid='+ userid }"
            >问卷调查</el-breadcrumb-item
          >
          <el-breadcrumb-item>查看已经提交的问卷</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="student_table">
        <el-table
          ref="table"
          :data="tableData"
          border
          stripe
          :height="tableHeight"
          :fit="true"
          v-loading="isLoading"
          style="width: 100%; height: 60%"
          :header-cell-style="{ background: '#f1f1f1' }"
        >
          <el-table-column
            prop="title"
            label="问卷调查标题"
            min-width="25"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="提交者"
            min-width="25"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="time"
            label="提交时间"
            min-width="25"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" min-width="25">
            <template slot-scope="scope">
              <el-button @click="getAskList(scope.row)" type="text" size="small"
                >查看</el-button
              >
              <el-button
                @click="deleteAsk(scope.row.id)"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="student_page">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="total"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="查看"
      :visible.sync="dialogVisible1"
      :append-to-body="true"
      width="750px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div class="a_add_title">
          <!-- <el-input
            v-model="askTitle"
            placeholder="请输入问卷标题"
            style="width: 400px"
          ></el-input> -->
          <h1>{{ askTitle }}</h1>
        </div>
        <div class="a_addBox">
          <div
            class="a_add_box"
            v-for="(item, index) in itemCount"
            :key="index"
          >
            <div class="a_add_head">
              <div>
                <!-- {{ index + 1 + "、" }}
                <el-input
                  class="a_add_head_input"
                  v-model="askJson[index].askstitle"
                  placeholder="请输入问卷题目..."
                ></el-input> -->
                <span>{{ index + 1 + "、" + askJson[index].askstitle }}</span>
              </div>
            </div>
            <div class="a_add_body">
              <div class="a_add_input">
                <el-radio-group v-model="radio[index]">
                  <el-radio
                    :label="checkIndex + 1 + ''"
                    v-for="(item, checkIndex) in askJson[index].askItem"
                    style="width: 150px; margin: 10px 10px 0 0"
                    :key="checkIndex"
                    disabled
                    >{{ askJson[index].checkList[checkIndex] }}</el-radio
                  >
                </el-radio-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableHeight: 500,
      isLoading: false,
      page: 1,
      total: 0,
      dialogVisible1: false,
      itemCount: 1,
      askTitle: "",
      askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
      radio: [],
      userid: this.$route.query.userid,
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    goTo(path) {
      this.$router.push(path);
    },
    deleteAsk(id) {
      let params = [{ id: id }];
      this.$confirm("确定删除此学生的问卷吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.ajax
            .post(this.$store.state.api + "deleteAskList", params)
            .then((res) => {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              if (this.page != 1 && this.tableData.length == 1) {
                this.page--;
              }
              this.getAsk();
            })
            .catch((err) => {
              this.$message.error("删除失败");
              console.error(err);
            });
        })
        .catch(() => {});
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getAsk();
    },
    //获取
    getAsk() {
      this.isLoading = true;
      let params = {
        uid: this.userid,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getAskList", params)
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
        })
        .catch((err) => {
          this.dialogVisible = false;
          console.error(err);
        });
    },
    getAskList(res) {
      this.askTitle = res.title;
      this.askJson = JSON.parse(res.askContent);
      this.radio = res.content.split(",");
      this.itemCount = this.askJson.length;
      this.dialogVisible1 = true;
    },
    changeHeight() {
      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;
        }
      };
      // this.$refs.table.$el.offsetTop：表格距离浏览器的高度 //200表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度
    },
  },
  created() {
    this.$nextTick(function () {
      this.page = 1;
      this.changeHeight();
      this.getAsk();
    });
  },
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !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 {
  max-height: 750px;
  overflow: auto;
}
.dialog_diy >>> .el-dialog {
  background: #fafafa;
}
.cd_bread {
  margin: 20px auto;
}
.student_table {
  margin: 20px 0;
}

.a_add_title {
}
.a_addBox {
  margin: 10px 0;
  background: #fff;
  padding: 15px;
}
.a_add_box {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.a_add_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 18px;
}
.a_add_head .a_add_head_input {
  width: 300px;
}
.a_add_head .a_add_head_div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.a_add_body {
  display: flex;
  align-items: center;
}
.a_add_input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.a_add_body_div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>