diantou/src_product/iam/audit/workbench/case/law-my-case.vue

<template>
  <a-tabs ref="tabs" :class="[$style.myCase, 'sd-has-table']">
    <template>
      <span slot="tabBarExtraContent" :class="$style.morebtn" @click="mored">查看更多 ></span>
    </template>

    <a-tab-pane key="myCase" :class="$style.panel">
      <span slot="tab">
        <div :class="$style.bluePoint"></div> 在办案件<span
          v-show="shownum"
          :class="$style.caseNums"
          >{{ caseNums }}</span
        >
      </span>
      <my-case-list
        data-url="api/framework/v1/page/businessList"
        :search-fields="[]"
        :max-results="6"
        :hide-pagination="true"
        module-id="283805356673781760"
        form-list-id="287674105414115328"
        :order-by="['IMPORTANT', 'CASE_UPDATE_TIME']"
        @setNums="setNums"
      />
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import storeMixin from '@/common/store-mixin'
import MyCaseList from './law-my-case-list.vue'
import components from './_import-components/law-my-case-import'

export default {
  name: 'LawMyCase',
  metaInfo: {
    title: '在办案件',
  },
  components: {
    ...components,
    'my-case-list': MyCaseList,
  },
  mixins: [storeMixin],
  data() {
    return {
      type: 'myCase',
      caseNums: 0,
      shownum: false,
    }
  },
  methods: {
    mored(type) {
      this.$router.push(`/sd-frame/law-all-case-list`)
    },
    setNums(num) {
      this.caseNums = num
      this.shownum = true
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.morebtn {
  font-size: 14px;
  cursor: pointer;
}
.syncbtn {
  margin-right: 10px;
  cursor: pointer;
}
.item {
  .body > div {
    border: 1px solid #eee;
    padding: 0.5rem 0;
  }
}
.my-case {
  background: transparent;
  :global(.ant-tabs-tab-active) {
    color: #000000 !important;
    font-weight: 600 !important;
    span {
      padding-left: 5px;
    }
  }
  :global(.ant-tabs-ink-bar-animated) {
    display: none !important;
  }
  :global(.ant-tabs-bar) {
    border: none !important;
  }
  :global(.ant-tabs-top-bar) {
    margin: 0 0 5px 0;
  }
}
.blue-point {
  background: #2775e2;
  width: 5px;
  height: 20px;
  position: absolute;
  border-radius: 5px;
  left: 0px;
  top: 9px;
}
.case-nums {
  background: #efefef;
  width: 35px;
  display: inline-block;
  border-radius: 15px;
  font-size: 10px;
  text-align: center;
  padding: 0 !important;
  margin-left: 7px;
}
</style>