GCLS_Page_TC/src/views/wordcard/table.vue

<template>
  <div v-loading="loading" class="cred_table">
    <Header v-if="!userID" />
    <div class="main" v-if="showPage">
      <div>
        <div class="title">字词练习卡</div>
        <div class="right" @click="Startcread">开始创建</div>
        <div class="number_cread">
          <span class="left">文件数量：{{ data.total_count }}</span>
          <el-input v-model="searchInput" placeholder="检索" @keyup.enter.native="getdata"
            ><el-button style="padding: 12px" @click="getdata" slot="append" icon="el-icon-search"></el-button
          ></el-input>
        </div>
        <div class="table">
          <div>
            <div class="number"></div>
            <div class="dv dv1" style="font-weight: 500">名称</div>
            <!-- <div class="dv dvs" style="font-weight: 500">卡片类型</div> -->
            <div class="dv" style="font-weight: 500">创建内容</div>
            <div class="dv dv2" style="font-weight: 500">创建日期</div>
          </div>
          <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="editName(item)">
              {{ item.name }}
            </div>
            <!-- <div class="dv dvs">
              {{ item.type == 'WORD' ? '字词卡' : '书写卡' }}
            </div> -->
            <div class="dv">{{ item.text }}</div>
            <div class="dv dv2">{{ item.create_time }}</div>
            <span
              class="edit-btn"
              @click="
                $router.push({
                  path: '/wordcard/cread',
                  query: {
                    id: item.id,
                    cachesType: 'pop',
                    userID: userID,
                  },
                })
              "
              ><i class="el-icon-edit"></i
            ></span>
            <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" style="background-color: #fff; text-align: center; line-height: 200px">
            <!-- <img src="../../assets/teacherdev/nodata.png" style="width: 1200px" /> -->
            暂无数据
          </p>
        </div>
        <div v-if="data.total_count > 0" class="page">
          <el-pagination
            background
            :page-sizes="[10, 20, 30, 40, 50]"
            layout="prev, pager, next,jumper"
            :current-page="page"
            :page-size="pageSize"
            :total="data.total_count"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <el-dialog title="编辑名称" :visible.sync="saveShow" width="30%" :before-close="handleClose" :modal="false">
      <el-input placeholder="请输入" v-model="saveName"> </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》from ‘《组件路径》';
import Header from '@/components/Header';
import { LearnWebSI, getStaticContent } from '@/api/api';
import { getConfigInfor } from '@/utils/index';
import { setToken, getToken } from '@/utils/auth';
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    Header,
  },
  props: {},
  data() {
    // 这里存放数据
    return {
      data: [],
      page: 1,
      pageSize: 10,
      loading: false,
      AccessToken: this.$route.query.AccessToken,
      AppID: this.$route.query.AppID,
      showPage: false,
      userID: this.$route.query.UserID ? this.$route.query.UserID : '',
      saveShow: false,
      saveName: '',
      searchInput: '',
    };
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    const _this = this;
    if (this.AccessToken) {
      const Mname = 'login_control-ParseAccessToken';
      await getStaticContent(Mname, {
        access_token: _this.AccessToken,
      }).then((res) => {
        res.access_token = _this.AccessToken;
        setToken(res);
        sessionStorage.setItem('GCLS_Token_Tc', JSON.stringify(res));
        this.showPage = true;
      });
      await getConfigInfor();
    }
    this.showPage = true;
    this.getdata();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期-挂载之前
  beforeMount() {},
  // 生命周期-更新之后
  updated() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 方法集合
  methods: {
    // 创建
    Startcread() {
      this.$router.push({
        path: '/wordcard/cread',
        query: { cachesType: 'pop', userID: this.userID },
      });
    },
    deleteOne(id, index) {
      this.loading = true;
      let Mname = 'tr_tool-wsc_manager-DeleteMyWordSentenceCard';
      LearnWebSI(Mname, {
        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,
        app_user_id: this.userID,
        search_content: this.searchInput.trim(),
      })
        .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;
        });
    },
    // 编辑名称
    editName(item) {
      this.saveShow = true;
      this.activeItem = item;
      this.saveName = item.name;
    },
    handleClose() {
      this.saveShow = false;
      this.activeItem = null;
    },
    // 保存
    save() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      // 编辑
      let Mname = 'tr_tool-wsc_manager-UpdateMyWordSentenceCard';
      LearnWebSI(Mname, {
        id: this.activeItem.id,
        name: this.saveName,
        update_scope: 1,
      })
        .then((res) => {
          this.loading.close();
          this.loading = false;
          this.saveShow = false;
          this.activeItem = null;
          this.$message.success('保存成功');
          this.getdata();
        })
        .catch((res) => {
          this.loading.close();
          this.loading = false;
        });
    },
  },
  // 生命周期-创建之前
  beforeCreated() {},
  // 生命周期-更新之前
  beforUpdate() {},
  // 生命周期-销毁之前
  beforeDestory() {},
  // 生命周期-销毁完成
  destoryed() {},
};
</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;
    }
    .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;
      margin-left: 1088px;
    }
    .number_cread {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      align-items: center;
      .left {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #000000;
      }
      .el-input {
        width: 220px;
      }
    }
    .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;
          flex-shrink: 0;
        }
        .dv1 {
          cursor: pointer;
        }
        .dv {
          margin-left: 24px;
          width: 550px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          flex-shrink: 0;
        }
        .dv1 {
          width: 250px;
          min-height: 20px;
        }
        .dvs {
          width: 100px;
        }
        .dv2 {
          width: 200px;
        }
        img {
          width: 24px;
          height: 24px;
          cursor: pointer;
          margin-left: 24px;
        }
        .edit-btn {
          width: 24px;
          height: 24px;
          font-size: 24px;
          margin-top: -10px;
          cursor: pointer;
        }
      }
    }
    .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>