diantou/src/workbench/sd-create-process.vue

<template>
  <div :class="$style.process">
    <a-row :class="[$style.header, { [$style.flexHeader]: quickEnterList.length >= 6 }]">
      <a-col
        v-for="(item, i) in quickEnterList"
        :key="i"
        :span="4"
        :title="item.text"
        @click="openDraft(item)"
      >
        <div :class="$style.processEnter">
          <span :class="$style.circle">{{
            item.props.appName && item.props.appName.substr(0, 2)
          }}</span>
          <span :class="$style.text">{{ item.text }}</span>
        </div>
      </a-col>
    </a-row>
    <div :class="$style.bottomCate">
      <sd-process-all
        :category-list="items"
        :first-category="firstCategory"
        :active-tab="activeTab"
        :loading="loading"
        @searchVal="getSearchVal"
        @changeTabActive="changeTabActive"
      ></sd-process-all>
    </div>
  </div>
</template>

<script>
import flowService from '@/webflow/flow-service'
import eventBus from '@/common/services/event-bus'
import navMenuService from '../frame/nav-menu-service'
import components from './_import-components/sd-create-process-import'
export default {
  name: 'SdCreateProcess',
  metaInfo: {
    title: '新建流程',
  },
  components,
  data() {
    return {
      loading: true,
      search: '',
      activeTab: 0,
      quickEnterList: [],
      categoryList: [],
      firstCategory: [],
    }
  },
  computed: {
    // 筛选指定字段
    items: function() {
      const depositArr = []
      if (this.search) {
        // 筛选数据
        this.categoryList.forEach((itemfs) => {
          const filterArr = itemfs.children.filter((item, index) => {
            return (
              item.text.toLowerCase().indexOf(this.search.toLowerCase()) !== -1 // 转小写再搜索一遍
            )

            // 在数据中 找到返回搜索文字的item项 成新的数组 arr1
          })
          if (filterArr.length > 0) {
            const copyitemfs = { ...itemfs }
            copyitemfs.children = filterArr
            depositArr.push(copyitemfs)
          }
        })
      } else {
        return this.categoryList
      }
      return depositArr
    },
  },
  created() {
    this.getQuickEnterList()
    this.getFirstCategoryBusinessType()
  },
  methods: {
    // 子组件获取的搜索值
    getSearchVal(val) {
      this.search = val
    },
    changeTab(i) {
      this.activeTab = Number(i)
    },
    changeTabActive(data) {
      this.openDraft(data)
    },
    getQuickEnterList() {
      navMenuService.getQuickEnterList().then((res) => {
        this.quickEnterList = res.data.slice(0, 6)
      })
    },
    getFirstCategoryBusinessType() {
      navMenuService.getFirstCategoryBusinessType().then((res) => {
        this.categoryList = res.data
        this.loading = false
        res.data.forEach((item) => {
          this.firstCategory.push({ id: item.id, text: item.text })
        })
      })
    },
    openDraft(item) {
      return eventBus.emit('sdNewProcessItemClick', item).then((evt) => {
        if (evt.defaultPrevented) return
        flowService.startProcessByBusinessTypeId(
          item.id,
          {},
          {
            srcTrustId: item.props.srcTrustId,
          }
        )
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

$bg-color-a: #76a0ed;
$bg-color-b: #72bb64;
$bg-color-c: #5b8df0;
$bg-color-d: #779fc7;
$bg-color-e: #eaa32c;
$bg-color-f: #7674f7;
$font-size-xs: 14px;
.process {
  height: 100%;
  .header {
    &.flex-header {
      display: flex;
      justify-content: space-between;
    }

    padding-bottom: $padding-lg;
    :global(.ant-col) {
      display: flex;
      flex: 1;
      align-items: center;
      height: 80px;
      margin-right: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      .process-enter {
        display: flex;
        flex: auto;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 0 20px;
        transition: 0.3s;
        &:hover {
          background: rgba(0, 0, 0, 0.2);
        }
      }
      &:last-child {
        margin-right: 0;
      }
      &:first-child {
        background: $bg-color-a;

        .circle {
          border: 1px solid $white;
        }
      }
      &:nth-child(2) {
        background: $bg-color-b;
        .circle {
          border: 1px solid $white;
        }
      }
      &:nth-child(3) {
        background: $bg-color-c;
        .circle {
          border: 1px solid $white;
        }
      }
      &:nth-child(4) {
        background: $bg-color-d;
        .circle {
          border: 1px solid $white;
        }
      }
      &:nth-child(5) {
        background: $bg-color-e;
        .circle {
          border: 1px solid $white;
        }
      }
      &:nth-child(6) {
        background: $bg-color-f;
        .circle {
          border: 1px solid $white;
        }
      }
      .circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        margin-right: 10px;
        overflow: hidden;
        font-size: $font-size-xs;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 50%;
      }
      span {
        color: $white;
      }
      .text {
        width: calc(100% - 62px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .bottom-cate {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: calc(100% - 100px);
  }
}
</style>