diantou/src_product/iam/audit/auditsource/km/knowledge-search/km-apply.vue

<template>
  <div :class="$style.processWrap">
    <div :class="$style.tabs">
      <a-card title="流程类型">
        <a-empty v-if="applyList.length < 1" />
        <a-anchor v-else :affix="false" :get-container="getContainer" @click="handleClick">
          <a-anchor-link v-for="(item, index) in applyList" :key="index" :href="'#' + index">
            <span slot="title"> <a-icon type="sd-list" /> {{ item.topCatName }} </span>
          </a-anchor-link>
        </a-anchor>
      </a-card>
    </div>

    <div ref="allProcess" :class="$style.allProcess">
      <a-empty v-if="applyList.length < 1" />
      <a-card v-for="(item, i) in applyList" v-else :id="i" :key="i" :title="item.topCatName">
        <div v-for="(itm, index) in item.appDatas" :key="index" :class="$style.cate">
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{ itm.buinessTypeName }}</span>
            </template>
            <span :class="[$style.cateName]" @click="check(i, index, itm)">
              {{ itm.buinessTypeName }}
            </span>
          </a-tooltip>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
import openAsTrustId from '@/common/services/open-as-trust-id'
import flowService from '@/webflow/flow-service'
import components from './_import-components/km-apply-import'

export default {
  name: 'KmApply',
  metaInfo: {
    title: 'OaApply',
  },
  components,
  props: {
    applyList: {
      default: () => {},
      type: Array,
    },
  },
  data() {
    return {
      active: 0,
      subActive: 0,
      categoryList: [],
    }
  },
  methods: {
    handleClick(e) {
      e.preventDefault()
    },
    getContainer() {
      return this.$refs.allProcess
    },
    openDraft(item) {
      //  公文类型
      if (item.isDoc === '1') {
        switch (item.categoryCode) {
          // 发文
          case 'PRODUCT_GW_FW': {
            openAsTrustId(
              `/sd-frame/oa-gwguide?code=PRODUCT_GW_FW&typeid=${item.id}`,
              item?.srcTrustId ?? ''
            )
            break
          }
          // 收文
          case 'PRODUCT_GW_SW': {
            openAsTrustId(
              `/sd-frame/oa-swguide?code=PRODUCT_GW_SW&typeid=${item.id}`,
              item?.srcTrustId ?? ''
            )
            break
          }
          //  签报
          case 'PRODUCT_GW_QB': {
            openAsTrustId(
              `/sd-frame/oa-swguide?code=PRODUCT_GW_QB&typeid=${item.id}`,
              item?.srcTrustId ?? ''
            )
            break
          }
        }
      } else {
        flowService.startProcess(
          item.businessFlowId,
          {
            businessTypeId: item.id,
            businessTypeName: item.categoryName,
          },
          {
            srcTrustId: item.srcTrustId,
          }
        )
      }
    },
    check(i, index, itm) {
      this.active = i
      this.subActive = index
      this.openDraft(itm)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$active: #e7f3ff;
$listdef: #f6f8fb;
.process-wrap {
  display: flex;
  flex: 1;
  width: 100%;
  height: calc(100% - 20px);
}
.tabs {
  width: 200px;
  :global(.ant-card) {
    height: 100%;
    background: $listdef;
    :global(.ant-card-body) {
      height: calc(100% - 50px);
      padding-top: 0;
      padding-right: 0;
      padding-left: 0;
      :global(.ant-anchor-wrapper) {
        background-color: transparent;
        :global(.ant-anchor-link) {
          position: relative;
          height: 40px;
          padding: 10px 0 10px 16px;
        }
        :global(.ant-anchor-link-active) {
          background: $active;
          &::after {
            position: absolute;
            top: 0;
            right: 0;
            width: 2px;
            height: 40px;
            content: '';
            background: $primary-color;
            border-radius: 8px;
          }
        }
        :global(.ant-anchor-ink) {
          position: static;
        }
        :global(.ant-anchor) {
          padding-left: 0;
        }
      }
    }
    :global(.ant-card-head) {
      border-bottom: none;
    }
  }
}
.all-process {
  position: relative;
  width: calc(100% - 200px);
  height: 100%;
  overflow: auto;
  :global(.ant-card-body) {
    display: flex;
    flex-wrap: wrap;
    padding: 0 40px;
    > div {
      width: calc(25% - 10px);
      margin-right: 10px;
      margin-bottom: 20px;
      text-align: left;
      &:nth-child(4n) {
        text-align: right;
      }
      &:nth-child(4n + 1) {
        text-align: left;
      }
      span {
        position: relative;
        display: block;
        padding: 16px 20px 16px 30px;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        background: $listdef;
        transition: 0.3s;
      }
      ::before {
        position: absolute;
        top: 20px;
        right: 0;
        bottom: 20px;
        left: 20px;
        width: 3px;
        content: '';
        background: $primary-color;
        border-radius: 8px;
      }
      :hover {
        background: $active;
        transition: all 0.3s;
      }
    }
  }
  :global(.ant-card-head) {
    padding: 0 40px;
    border-bottom: none;
  }
}
.all-process::-webkit-scrollbar {
  /* 滚动条样式 */
  width: 0;
  height: 4px;
}
:global(.ant-empty) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>