zhxg_pc/src/views/Home/comps/jwc-undo.vue

<template>
  <div>
    <div class="six-action-container">
      <div
        style="padding: 1rem"
        class="six-action-item"
        v-for="(v, i) in taskList"
        :key="i"
      >
        <div
          class="bubble"
          :style="{
            backgroundImage: `url(${require('@/assets/index_bg/' +
              (i + 1) +
              '.png')})`,
          }"
        >
          <div class="act-text">
            <div class="title">{{ v.label }}·待办</div>
            <div class="todo">
              {{ v.value }}
            </div>
          </div>
          <div class="bg-to" @click="toRoute(v.url)">更多☞</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { countJwcUnDo as countUndo } from "@/api/stuCQS/good/apply";
import { isEmpty } from "@/api/helpFunc";
import { checkPermi } from "@/utils/permission";

export default {
  name: "jwc-undo",
  data() {
    return {
      hasPrem: false,
      taskList: [
        {
          label: "学工·评优评先审核",
          name: "good",
          value: 0,
          url: "/stuGood/about-good/jwc",
        },
        {
          label: "学工·静湖之星审核",
          name: "lake",
          value: 0,
          url: "/stuGood/about-lake/jwc",
        },
        {
          label: "学工·优秀毕业生审核",
          name: "biye",
          value: 0,
          url: "/stuGood/good-graduate/jwc",
        },
        {
          label: "学工·困难认定审核",
          name: "kn",
          value: 0,
          url: "/hard/pks/jwc",
        },
        {
          label: "学工·助学金审核",
          name: "zx",
          value: 0,
          url: "/hard/zxj/jwc",
        },
        {
          label: "学工·宿舍管理审核",
          name: "dms",
          value: 0,
          url: "/dormitory/stuDormitoryManage/final",
        },
        {
          label: "学工·任务管理审核",
          name: "rwgl",
          value: 0,
          url: "/task/todo",
        },
        {
          label: "学工·困难资助审核",
          name: "knzz",
          value: 0,
          url: "hard/tufa/xg",
        },
        // 宁博
        {
          label: "学工·国家励志奖学金审核",
          name: "knzzgl",
          value: 0,
          url: "/hard/gl/xg",
        },
        // 陈冠元
        {
          label: "学工·自治区人民政府奖学金审核",
          name: "knzzzzq",
          value: 0,
          url: "/hard/zzq/xg",
        },
        {
          label: "学工·学生证补办审核",
          name: "xszb",
          value: 0,
          url: "/routine/sicr/learningIndustrialProductionAudit",
        },
        {
          label: "学工·在校证明审核",
          name: "zxzm",
          value: 0,
          url: "/routine/school/learning",
        },
        //知无涯 学工·中职升高职补助审核
        {
          label: "学工·中职升高职补助审核",
          name: "zsg",
          value: 0,
          url: "/hard/zsg/xg",
        },
        {
          label: "学工·辅导员综合绩效审核初审",
          name: "jx",
          value: 0,
          url: "teacher/performance/evaluate/learn",
        },
        // 宁博
        {
          label: "学工·辅导员管理-成果绩效审核",
          name: "cg",
          value: 0,
          url: "/teacher/achievement/achievementCheck",
        },
        // 陈冠元
        {
          label: "学工·辅导员管理-业绩考核-科室复审",
          name: "yj",
          value: 0,
          url: "/teacher/teacherKpiFilling/studentAffairsOfficeAudit/KSAuditList",
        },
        {
          label: "学工·辅导员管理-业绩考核-学工处长审核",
          name: "bj",
          value: 0,
          url: "/teacher/teacherKpiFilling/studentAffairsOfficeAudit/XGCZAuditList",
        },
      ],
    };
  },
  created() {
    if (checkPermi(["home:xg:undo1"])) {
      this.countUndo();
      this.hasPrem = true;
    }
  },
  methods: {
    async countUndo() {
      let res = await countUndo();
      if (res.code == 200) {
        let data = [...res.data];
        this.taskList.map((x) => {
          let temp = data.filter((y) => y.startsWith(x.name));
          if (!isEmpty(temp)) {
            let result = temp[0].split("-")[1];
            x.value = result;
          }
        });
      }
    },

    toRoute(url) {
      if (!isEmpty(url)) {
        this.$router.push(url);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.six-action-container {
  display: flex;
  flex-wrap: wrap;
}

.six-action-item {
  flex-basis: 33.33%;
}

.bubble {
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  height: 170px;
  border-radius: 1rem;
  // background-image: linear-gradient(120deg, rgb(134, 233, 98) 0%, rgb(45, 175, 92) 100%);
  position: relative;
  background-size: cover;
  min-width: 250px;
}

.act-text {
  width: 100%;
  z-index: 2;
  margin: 1rem;

  .title {
    text-align: left;
    font-size: 1.25rem;
    color: #fff;
  }

  .todo {
    margin-top: 1rem;
    font-size: 6rem;
    color: #fff;
  }
}

.bg-to {
  cursor: pointer;
  z-index: 3;
  position: absolute;
  bottom: 5%;
  right: 3%;
  margin-top: 10px;
  color: white;
}

.six-action-item:hover,
.fast-act:hover {
  cursor: pointer;

  transform: scale(1.1);
}
</style>