index.vue

<template>
  <div class="eContainer">
    <c-page title="任务列表">
      <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>
            <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>
            <t-trnrel />
          </c-content>
        </el-tab-pane>

        <el-tab-pane label="已完成列表" name="trnfnd">
          <c-content>
            <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>
            <t-diasel />
          </c-content>
        </el-tab-pane>
        <!--
          <el-tab-pane label="数据对比" name="compare">
              <span slot="label">
                  数据对比
              </span>
              <c-content>
              <t-compare />
              </c-content>
          </el-tab-pane>
          -->
      </c-tabs>
    </c-page>
  </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>
.m-table-search-form {
  position: flex;
  flex-direction: row;
}
.m-table-search-form .el-form-item__content {
  width: calc(100% - 110px);
}
</style>