daofu-gov-pc/src/views/resumption/work-index/more-study/index.vue

<template>
  <div class="percentage-content">
    <div class="content">
      <TitleC titleName="学习专栏">
        <template v-slot:option>
          <div class="h-layout option">
            <div class="h-layout h-titlec" @click="getUserStudyPages">
              <svg-icon name="refurbish" class="icon" />
              <span class="span">刷新</span>
            </div>
            <div class="h-layout h-titlec" @click="clone">
              <svg-icon name="close" class="icon" />
              <span class="span">关闭</span>
            </div>
          </div>
        </template>
      </TitleC>
      <div class="h-layout h-center s" style="margin-bottom: 16px;">
        <!-- <div style="flex: 1"></div> -->
        <div class="label-select">
          <el-input v-model="search" @keydown.enter.native="getUserStudyPages" placeholder="请输入搜索内容" class="search-input">
            <template #append>
              <span @click="getUserStudyPages" class="search-bottom">
                <svg-icon name="search" class="icon_class" />
                <span>搜索</span>
              </span>
            </template>
          </el-input>
        </div>
      </div>

      <el-table ref="loading" v-loading="tableDataloading" :data="tableData" header-row-class-name="el-one-header"
        @selection-change="handleSelectionChange" border>
        <el-table-column type="index" align="center" label="序列" width="60"></el-table-column>
        <el-table-column prop="coverimg" :resizable="true" align="center" label="封面" width="150">
          <template #default="scope1">
            <div style="width: 102px;height: 33px;margin: auto;">
              <el-image style="width: 100%; height: 100%;" :src="scope1.row.coverimg" :zoom-rate="1.2"
                :preview-src-list="[scope1.row.coverimg]" fit="cover" :z-index='999' preview-teleported
                :hide-on-click-modal='true' />
            </div>

          </template>
        </el-table-column>
        <el-table-column :resizable="true" align="left" label="学习标题">
          <template #default="scope">
            <span :title=scope.row.studyName
              style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;padding-left: 20px;">{{
                scope.row.studyName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="viewingtimes" :resizable="true" align="center" label="学习次数" width="150">
        </el-table-column>
        <el-table-column :resizable="true" align="center" label="操作" width="300">
          <template #default="scope">
            <span class="operate" @click="studyListClick(scope.row.studyId)">
              <svg-icon name="detail" class="icon-radio" />
              <span class="see-detail">详情</span>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination class="pagination" @size-change="getUserStudyPages" @current-change="getUserStudyPages"
        v-model:current-page.sync="currentPage" :page-sizes="[10, 15, 20, 30]" v-model:page-size.sync="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" background>
      </el-pagination>
    </div>
    <StuDetails :visible="stuDetailsVisible" :data="stuDetailsData" @close="stuDetailsVisible = false" />
  </div>
</template>
<script lang='ts' setup>
import { onMounted, reactive, ref } from "vue";
// import { getUserStudyPage } from "@/api/performDuties"
import useUserStore from "@/store/modules/user";
import { useRouter } from "vue-router";
import StuDetails from "../stuDetails.vue";
const userStore = useUserStore();
const user = ref(JSON.parse(userStore.userInfo));
const userId = ref(user.value.userId);
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const router = useRouter();
const tableDataloading = ref(false);
const search = ref("");
//学习专栏
const getUserStudyPages = () => {
  tableDataloading.value = true;
  let params = {
    limit: 10,
    page: 1,
    userId: userId.value,
    condition: search.value,
  }
  getUserStudyPage(params).then((res: any) => {

    console.log(res, 'res====>');
    tableData.value = res.data.list;
    total.value = res.data.total;
    tableData.value.forEach(item => {
      item.coverimg = import.meta.env.VITE_UPLOAD_IMG_URL + item.coverimg
    });
    console.log(tableData.value, '学习专栏tableData.value======>');
    tableDataloading.value = false;
  });
}
//关闭
const clone = () => {
  router.go(-1);
};
//用户学习专栏详情
const stuDetailsVisible = ref(false);
const stuDetailsData = ref({})
const studyListClick = (id) => {
  stuDetailsVisible.value = true
  stuDetailsData.value = {
    studyId: id,
    userId: userId.value,
  }
}
onMounted(() => {
  getUserStudyPages();

});
</script>
<style lang="scss" scoped>
.content {
    width: 100%;
    // flex: auto;
    background: #fff;
    border-radius: 0.26042vw;
    box-shadow: 0 0 0.41667vw 0 rgb(8 33 85 / 10%);
    height: 100%;
    padding: 0.83333vw;
    overflow-y: auto;
    overflow-x: hidden !important;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -moz-box-sizing: border-box;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-box-sizing: border-box;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -o-box-sizing: border-box;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.dialog-footer button:first-child {
    margin-right: 10px;
}
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
.label-select {
    width: 20%;

    /* margin-bottom: 20px; */
}
</style>