index.vue

<template>
  <div class="eContainer-taskList">
    <c-tabs :value="tabVal" type="card" @tab-click="tabClick">
      <el-tab-pane label="待经办列表" name="sptsel">
        <!-- <c-table :columnsConfig="tableColumns" :list="tableData"></c-table> -->
        <span slot="label">
          待经办列表
          <el-badge
            v-if="$store.state.Status.taskList.sptsel > 0"
            :value="$store.state.Status.taskList.sptsel"
            :max="99"
          />
        </span>
        <c-content :height="180">
          <t-sptsel />
        </c-content>
      </el-tab-pane>

      <el-tab-pane label="待复核列表" name="trnrel">
        <span slot="label">
          待复核列表
          <el-badge
            v-if="$store.state.Status.taskList.trnrel > 0"
            :value="$store.state.Status.taskList.trnrel"
            :max="99"
          />
        </span>
        <c-content :height="180">
          <t-trnrel />
        </c-content>
      </el-tab-pane>

      <el-tab-pane label="已完成列表" name="trnfnd">
        <c-content :height="180">
          <t-trnfnd />
        </c-content>
      </el-tab-pane>
      <el-tab-pane label="待申报列表" name="bopsel">
        <t-bopsel />
      </el-tab-pane>
      <el-tab-pane label="草稿箱" name="sptbrk">
        <span slot="label">
          草稿箱
          <el-badge
            v-if="$store.state.Status.taskList.sptbrk > 0"
            :value="$store.state.Status.taskList.sptbrk"
            :max="99"
          />
        </span>
        <t-sptbrk />
      </el-tab-pane>
      <el-tab-pane label="到期提示" name="diasel">
        <span slot="label">
          到期提示
          <el-badge
            v-if="$store.state.Status.taskList.diasel > 0"
            :value="$store.state.Status.taskList.diasel"
            :max="99"
          />
        </span>
        <c-content :height="180">
          <t-diasel />
        </c-content>
      </el-tab-pane>
      <!--
        <el-tab-pane label="数据对比" name="compare">
            <span slot="label">
                数据对比
            </span>
            <c-content :height="180">
            <t-compare />
            </c-content>
        </el-tab-pane>
        -->
    </c-tabs>
  </div>
</template>

<script>
import Sptsel from "~/views/Business/Sptsel";
import Sptbrk from "~/views/Business/Sptsel/Sptbrk";
import Trnrel from "~/views/Business/Trnrel";
import Trnfnd from "~/views/Business/Trnrel/Trnfnd";
import Diasel from "~/views/Business/Diasel";
import Bopsel from "~/views/Business/Bopsel";
import Compare from "./compare";

export default {
  data() {
    return {};
  },
  computed: {
    tabVal: {
      get() {
        return this.$store.state.Status.taskListTabVal || "sptsel";
      },
      set(val) {
        this.$store.commit("setTaskListTabVal", val);
      },
    },
  },
  name: "TaskList",
  created() {},
  methods: {
    tabClick(tab) {
      this.$store.commit("setTaskListTabVal", tab.name);
    },
  },
  components: {
    "t-sptsel": Sptsel,
    "t-sptbrk": Sptbrk,
    "t-trnrel": Trnrel,
    "t-trnfnd": Trnfnd,
    "t-diasel": Diasel,
    "t-bopsel": Bopsel,
    "t-compare": Compare,
  },
};
</script>

<style scoped>
.eContainer-taskList {
  /* padding: 3px 15px; */
}
</style>
<style>
.m-table-search-form {
  position: flex;
  flex-direction: row;
}
.m-table-search-form .el-form-item__content {
  width: calc(100% - 110px);
}
</style>