@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/components/Apply/ApplyIndex.vue

@@ -0,0 +1,358 @@
+<template>
+  <div ref="container" class="container" :style="style">
+    <!-- 筛选 -->
+    <div v-if="$isMobile" class="m-search">
+      <div class="m-search-item">
+        <el-input class="m-service-search"  v-model="keyword" clearable size="default" :placeholder="$t('please enter keywords')" suffix-icon="el-icon-search" @change="getApplyList"></el-input>
+      </div>
+      <div class="m-search-item">
+         <ul class="m-sort-list" v-if="sortList.length>0">
+          <li  :class="['m-sort__item', {'is-active': activeSort==='all' }]" @click="activeSort='all'">
+            {{$t('all')}}
+          </li>
+          <li :class="['m-sort__item', {'is-active': activeSort===sort.ID }]" v-for="sort in unFoldSortList" :key="sort.ID"  @click="activeSort=sort.ID">
+            <span>{{sort.APPLY_NAME}}</span>
+          </li>
+          <div class="m-sort-fold" ref="foldContainer">
+            <i :class="['el-icon-arrow-down', 'm-sort-fold__btn',  { 'is-open':isSortOpen }]" @click="switchSortFoldFn"></i>
+            <div class="m-sort-fold__overlay" @click.stop :style="{top: foldOverlayTop}" v-show="isSortOpen">
+              <ul class="m-sort-fold__list">
+                <li :class="['m-sort-fold__item', {'is-active': activeSort===sort.ID }]"  v-for="sort in foldSortList" :key="sort.ID" @click="activeSort=sort.ID; isSortOpen=false">{{ sort.APPLY_NAME }}</li>
+              </ul>
+            </div>
+          </div>
+        </ul>
+      </div>
+    </div>
+    <div v-else class="search">
+      <div class="search-item">
+        <span>关键词：</span>
+        <el-input class="service-search"  v-model="keyword" clearable size="default" :placeholder="$t('please enter keywords')" suffix-icon="el-icon-search" @change="getApplyList"></el-input>
+      </div>
+      <div class="search-item">
+        <span>应用分类：</span>
+         <ul class="service-sort-list" v-if="sortList.length>0">
+          <li  :class="['service-sort__item', {active: activeSort==='all' }]" @click="activeSort='all'">
+            {{$t('all')}}
+          </li>
+          <li :class="['service-sort__item', {active: activeSort===sort.ID }]" v-for="sort in sortList" :key="sort.ID"  @click="activeSort=sort.ID">
+            <span>{{sort.APPLY_NAME}}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div v-if="!applyList"></div>
+    <div class="null-data" v-else-if="applyList.length===0">
+      <i class="epx-icon-color-kong"></i>
+      <p>暂无审批流程</p>
+    </div>
+    <ul v-else :class="{'apply-list': true, 'm-apply-list': $isMobile }">
+      <li class="apply-item" v-for="item in applyList" :key="item.ID" @click="openApplyPage(item)">
+        <i :style="{color: item.ICON_COLOR}" :class="['apply-icon', item.ICON || 'epx-icon-apply']"></i>
+        <p class="apply-title__container">
+          <span  class="apply-title">{{item.NAME}}</span>
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { component } from '@epxing/core/src/mixins'
+export default {
+  name: 'epx-apply-index',
+  mixins: [component],
+  computed: {
+    style () {
+      if (this.$isMobile) {
+        return { margin: 0, ...this.$component.style }
+      }
+      return this.$component.style
+    },
+    foldIndex () {
+      const maxWidth = this.$refs.container.offsetWidth
+      let width = 28 + 24
+      let foldIndex = -1
+      for (let i = 0; i < this.sortList.length; i++) {
+        const item = this.sortList[i]
+        const itemWidth = (item.APPLY_NAME || '').length * 16 + 24
+        if (width + itemWidth > maxWidth) {
+          if (width + 100 <= maxWidth) {
+            foldIndex = i
+          } else {
+            foldIndex = i - 1
+          }
+          break
+        }
+        width += itemWidth
+      }
+      return foldIndex
+    },
+    unFoldSortList () {
+      if (this.foldIndex !== -1) {
+        return this.sortList.slice(0, this.foldIndex)
+      }
+      return this.sortList
+    },
+    foldSortList () {
+      if (this.foldIndex !== -1) {
+        return this.sortList.slice(this.foldIndex)
+      }
+      return []
+    }
+  },
+  data () {
+    return {
+      keyword: '',
+      activeSort: 'all',
+      sortList: [],
+      applyList: null,
+      searchKeyParams: {},
+      isSortOpen: false,
+      foldOverlayTop: 0
+    }
+  },
+  watch: {
+    activeSort () {
+      this.getApplyList()
+    }
+  },
+  methods: {
+    switchSortFoldFn () {
+      this.isSortOpen = !this.isSortOpen
+      if (this.isSortOpen) {
+        this.foldOverlayTop = this.$refs.foldContainer.offsetTop + 48 + 'px'
+      }
+    },
+    getServiceSort () {
+      this.$http.list({
+        entityId: 'FM_SERVICE_SORT',
+        'scope.CLIENT': this.CLIENT
+      })
+        .then(data => {
+          this.sortList = [...data.entitys]
+        })
+    },
+    getApplyList () {
+      const params = {
+        action: 'getUserServices',
+        entityId: 'FM_SERVICE',
+        'scope.HALL_FLAG': '1',
+        'scope.TYPE': 'approval',
+        order_field: 'ORDER_NUM',
+        order_mode: 'asc'
+      }
+      if (this.activeSort !== 'all') {
+        params['search.SORT#in'] = this.activeSort
+      }
+      if (this.keyword) {
+        params['search.NAME#like'] = this.keyword
+      }
+      this.$http.list(params)
+        .then(data => {
+          this.applyList = data.entitys
+        })
+    },
+    openApplyPage (apply) {
+      const rootPath = this.$util.getRootPath()
+      const url = rootPath + `/app/${apply['SYSTEM|CLIENT|CODE']}/${apply['SYSTEM|CODE']}/${apply.CODE}`
+      if (this.$isMobile) {
+        window.location.href = url
+      } else {
+        window.open(url)
+      }
+    },
+    searchFn (v) {
+      this.searchParams = v
+      this.getApplyList()
+    },
+    searchKeywordFn (v) {
+      this.searchKeyParams = v
+      this.getApplyList()
+    }
+  },
+  created () {
+    this.getApplyList()
+    this.getServiceSort()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: 100%;
+  overflow: auto;
+}
+.apply-list {
+  background: var(--epx-bg-card);
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
+  margin-top: calc(var(--margin) * 2);
+  border-radius: var(--border-radius);
+}
+.apply-item {
+  width: calc(16.66% - 20px);
+  box-sizing: border-box;
+  padding: 20px;
+  margin: 10px;
+  border: 1px solid var(--epx-border);
+  border-radius: var(--border-radius);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.apply-icon {
+  margin-bottom: 4px;
+  font-size: 32px;
+  line-height: 1;
+  @include font_color_primary;
+}
+.apply-title__container {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+ .apply-title {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    -webkit-box-align: center;
+
+    text-align: center;
+  }
+.m-apply-list {
+  border-left: 1px solid var(--epx-border);
+  padding: 0;
+  .apply-item {
+    width: 33.33%;
+    margin: 0;
+    padding: 20px 10px;
+    border-radius: 0;
+    border-top: 0;
+    border-left: 0;
+    justify-content: space-between;
+  }
+}
+.search {
+  background: var(--epx-bg-card);
+  margin-bottom: var(--margin);
+  padding: 0 16px;
+  overflow: hidden;
+  border-radius: var(--border-radius);
+}
+.search-item {
+  overflow: hidden;
+  padding: 10px 0;
+  display: flex;
+  align-items: center;
+}
+.service-search {
+  width: 200px;
+  }
+
+.service-sort-list {
+  display: flex;
+  height: 100%;
+}
+.service-sort__item {
+  margin: 0 16px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    @include font_color_primary
+  }
+  &.active {
+    @include font_color_primary;
+    @include border_color_primary;
+    border-bottom:2px solid;
+  }
+}
+.null-data {
+  margin-top: 100px;
+  line-height: 1.1;
+  i {
+    font-size: 140px;
+  }
+  color: var(--epx-text-secondary);
+  text-align: center;
+}
+.m-search {
+  background: var(--epx-bg-card);
+}
+.m-service-search {
+  margin: 8px 16px;
+  width: calc(100% - 32px);
+
+    :deep(.el-input__inner) {
+      border-radius: 18px;
+    }
+
+}
+.m-sort-list {
+  display: flex;
+}
+.m-sort__item {
+  margin: 0 12px;
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text);
+  line-height: 48px;
+  position: relative;
+  white-space: nowrap;
+  &.is-active {
+    @include font_color_primary;
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 2px;
+      width: 100%;
+      height: 2px;
+      @include bg_color_primary;
+    }
+  }
+}
+.m-sort-fold__btn {
+  position: absolute;
+  right: 12px;
+  font-size: var(--epx-font-size-l);
+  line-height: 48px;
+  transition: all .3s;
+  &.is-open {
+    transform: rotate(180deg);
+  }
+}
+.m-sort-fold__overlay {
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 100;
+  top: 136px;
+  left:0;
+  bottom:0;
+  right: 0;
+}
+.m-sort-fold__list {
+  background: var(--epx-bg-card);
+}
+
+.m-sort-fold__item {
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text);
+  line-height: 48px;
+  padding: 0 20px;
+  &.is-active {
+    @include font_color_primary;
+  }
+}
+@media screen and (max-width: 992px) {
+  .apply-list {
+    margin: var(--margin);
+  }
+}
+</style>