pbl-teacher-table/src/components/pages/kindStudentEva/test/reportDialog/index.vue

<template>
  <el-dialog
    title="已关联证据"
    :visible.sync="dialogVisibleReport"
    :append-to-body="true"
    width="1000px"
    :before-close="handleClose"
    class="dialog_diy"
  >
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      border
      header-align="center"
      :header-cell-style="{
        background: '#E0EAFB',
        color: 'rgba(0, 0, 0, 0.90)'
      }"
    >
      <!-- <el-table-column type="selection" align="center" label="全选" width="55">
      </el-table-column> -->
      <el-table-column
        prop="create_at"
        label="创建时间"
        align="center"
        width="120"
      >
        <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
      </el-table-column>
      <el-table-column
        prop="recordTit"
        label="观察内容"
        align="center"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="place"
        label="观察地点"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="tname"
        label="维度"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="recordContent"
        label="内容"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <!-- <el-table-column label="操作" align="center" width="175px">
        <template slot-scope="scope">
          <div class="evaluate">
            <div
              class="TableBtn"
              style="color: #3681fc"
              @click="updateCred(scope.row, 0)"
            >
              查看
            </div>
            <div
              class="TableBtn"
              style="color: #3681fc"
              @click="updateCred(scope.row, 1)"
            >
              修改
            </div>
            <div
              class="TableBtn"
              style="color: #ee3e3e"
              @click="delRecord(scope.row)"
            >
              删除
            </div>
          </div>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      background
      :page-size="8"
      layout="prev, pager, next"
      :total="total"
      class="pagination"
    >
    </el-pagination>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisibleReport: {
      type: Boolean,
      default: false
    },
    userid: {
      type: String
    },
    fid: {
      type: String
    },
    tid: {
      type: String
    },
    oid: {
      type: String
    },
    year: {
      type: String
    },
    cid: {
      type: String
    }
  },
  data() {
    return {
      // 表格数据
      tableData: [],
      // 总条数
      total: 0,
      // 当前页
      page: 1
    };
  },
  watch: {
    dialogVisibleReport(newVal) {
      if (newVal) {
        this.getData();
      }
    }
  },
  methods: {
    handleClose(done) {
      this.close();
      done();
    },
    close() {
      this.$emit("update:dialogVisibleReport", false);
    },
    // 获取数据
    getData() {
      // 获取筛选框数据
      let params = {
        uid: this.userid,
        cid: this.cid,
        cu: this.fid,
        cn: this.tid,
        cm: this.year,
        page: this.page
      };
      console.log(params);
      this.ajax
        .get(this.$store.state.api + "selectVeidooType", params)
        .then(res => {
          this.isLoading = false;
          this.tableData = res.data[0];
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          // console.log(" 获取筛选数据", res);
        })
        .catch(err => {
          this.isLoading = false;
          console.error(err);
        });
    },
    // 切换页
    handleCurrentChange(val) {
      //当页数发生改变的时候调用获取列表数据请求
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.getData();
    }
  },
  mounted() {
    // this.getData();
  }
};
</script>

<style scoped>
.dialog_diy {
  box-sizing: border-box;
  /* padding: 0 10px 10px 10px; */
}
.dialog_diy >>> .el-dialog {
  /* height: 100%; */
  margin: 10vh auto !important;
}

.dialog_diy >>> .el-dialog__header {
  background: #454545 !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: #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;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}
</style>