GCLS_Page_TC/src/views/wordcard/table.vue

<template>
  <div class="cred_table" v-loading="loading">
    <Header />
    <div class="main">
      <div>
        <div class="title">字词卡片</div>
        <div class="number_cread">
          <span class="left">文件数量：{{ data.total_count }}</span>
          <div class="right" @click="Startcread">开始创建</div>
        </div>
        <div class="table">
          <div
            v-for="(item, i) in data.word_sentence_card_list"
            :key="i + 'one'"
          >
            <div class="number">{{ item.number }}</div>
            <div
              class="dv dv1"
              @click="
                $router.push({
                  path: '/wordcard/cread',
                  query: {
                    id: item.id,
                    cachesType: 'pop',
                  },
                })
              "
            >
              {{ item.name }}
            </div>
            <div class="dv">
              {{ item.type == "WORD" ? "字卡片" : "句卡片" }}
            </div>
            <div class="dv">{{ item.text }}</div>
            <div class="dv">{{ item.create_time }}</div>
            <el-popconfirm
              title="确定删除这一条记录吗？"
              @confirm="deleteOne(item.id, i)"
            >
              <img
                slot="reference"
                src="../../assets/teacherdev/delete-one.png"
                alt=""
              />
            </el-popconfirm>
          </div>
          <p v-if="data.total_count == 0">
            <img
              src="../../assets/teacherdev/nodata.png"
              style="width: 1200px"
            />
          </p>
        </div>
        <div class="page" v-if="data.total_count > 0">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40, 50]"
            layout="prev, pager, next,jumper"
            :current-page="page"
            :page-size="pageSize"
            :total="data.total_count"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "@/components/Header";
import { LearnWebSI } from "@/api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Header,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      data: [],
      page: 1,
      pageSize: 10,
      loading: false,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 创建
    Startcread() {
      this.$router.push({
        path: "/wordcard/cread",
        query: { cachesType: "pop" },
      });
    },
    deleteOne(id, index) {
      this.loading = true;
      let Mname = "tr_tool-wsc_manager-DeleteMyWordSentenceCard";
      LearnWebSI(Mname, {
        id: id,
      })
        .then((res) => {
          this.getdata();
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getdata();
    },
    getdata() {
      this.loading = true;
      let Mname = "page_query-PageQueryMyWordSentenceCardList";
      LearnWebSI(Mname, {
        cur_page: this.page,
        page_capacity: this.pageSize,
      })
        .then((res) => {
          this.data = res;
          let num = this.page * this.pageSize - this.pageSize + 1;
          this.data.word_sentence_card_list.forEach((item) => {
            item.number = num;
            num++;
          });
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getdata();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.cred_table {
  height: 100%;
  .main {
    min-height: 91%;
    background: #f7f7f7;
    padding-top: 54px;
    > div {
      width: 1200px;
      margin: 0 auto;
    }
    .title {
      font-weight: 700;
      font-size: 30px;
      line-height: 43px;
      text-transform: uppercase;
      color: #2c2c2c;
    }
    .number_cread {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      .left {
        margin-top: 40px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #000000;
      }
      .right {
        width: 112px;
        height: 40px;
        background: #669aff;
        border-radius: 4px;
        font-weight: 500;
        font-size: 16px;
        line-height: 40px;
        text-align: center;
        color: #ffffff;
        cursor: pointer;
      }
    }
    .table {
      margin-top: 16px;
      > div {
        display: flex;
        align-items: center;
        height: 48px;
        background: #ffffff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        font-weight: 400;
        font-size: 16px;
        color: #000000;
        padding: 0 16px;
        .number {
          width: 20px;
          text-align: right;
        }
        .dv1 {
          cursor: pointer;
        }
        .dv {
          margin-left: 24px;
          width: 400px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        img {
          width: 24px;
          height: 24px;
          cursor: pointer;
          margin-left: 24px;
        }
      }
    }
    .page {
      margin-top: 24px;
    }
  }
}
</style>
<style lang="scss">
.cred_table {
  .page {
    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background: none;
    }
    .el-pagination {
      .btn-prev {
        padding: 0 !important;
        border: 1px solid #d9d9d9 !important;
        background: none;
      }
      .btn-next {
        padding: 0 !important;
        border: 1px solid #d9d9d9 !important;
        background: none;
      }
    }
    .el-pager {
      li {
        border: 1px solid #d9d9d9 !important;
        box-sizing: border-box;
        border-radius: 2px;
        margin: 0 7.5px;
        background: none;
      }
      .el-icon,
      .more,
      .btn-quicknext,
      .el-icon-more {
        border: none !important;
      }

      .active {
        color: black !important;
        border: 1px solid black !important;
      }
    }
  }
}
</style>