epx-frame 3.5.0-shpgy.1

package/src/frame/components/hall/AppCollect.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="collect" :style="$component.style">
+    <el-card class="collect-card" shadow="never">
+      <div  class="card-header" slot="header">
+        <span>
+          <i class="card-header__icon el-icon-star-on"></i>
+          <span class="card-header__title">我的收藏</span>
+        </span>
+      </div>
+      <div>
+        <!--  暂无数据 -->
+        <div v-if="collectList.length===0" class="no-data">
+          <i class="no-data__icon epx-icon-kong"></i>
+          <p class="no-data__text">暂无数据</p>
+        </div>
+        <ul :class="{'collect-list': true, 'is-fold': fold}" >
+          <li class="collect-item" @click="openApp(collect)" v-for="collect in collectList" :key="collect.ID">
+            <p class="collect-item__title">
+              <img :src="collect['SERVICE|IMAGE']? $util.getFileUrl(collect['SERVICE|IMAGE']) : require('@/assets/images/app.png')" alt="" />
+              <span class="collect-item__name">{{collect['SERVICE|NAME']}}</span>
+            </p>
+            <a class="collect-item__cancel" @click.stop="cancelCollect(collect)">取消</a>
+          </li>
+        </ul>
+        <div v-if="collectList.length > 5" :class="{'card-header__more': true, 'is-fold': fold }" @click="fold=!fold">
+          <span>{{fold? '展开全部': '收起'}}</span>
+          <i class="fold-icon el-icon-arrow-up"></i>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import component from '@/utils/mixins/component'
+
+export default {
+  name: 'epx-hr-hall-app-collect',
+  mixins: [component],
+  data () {
+    return {
+      collectList: [],
+      fold: true
+    }
+  },
+  methods: {
+    getCollectList () {
+      this.$http.list({
+        action: 'getServiceConllection',
+        entityId: 'FM_SERVICE_COLLECTION',
+        link: 'service,service#client,service#system'
+      })
+        .then(data => {
+          this.collectList = [...data.entitys]
+        })
+    },
+    openApp (item) {
+      const url = `#/app/${item['SERVICE|CLIENT|CODE']}/${item['SERVICE|SYSTEM|CODE']}/${item['SERVICE|CODE']}`
+      window.open(url)
+    },
+    cancelCollect (item) {
+      this.$http.$post({
+        action: 'serviceCancelConllection',
+        entityId: 'FM_SERVICE_COLLECTION',
+        serviceId: item['SERVICE|ID']
+      })
+        .then(() => {
+          this.getCollectList()
+        })
+    }
+  },
+  created () {
+    this.getCollectList()
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.collect-card {
+  border: 0;
+  &::v-deep {
+    .el-card__header {
+      padding: 0 20px;
+    }
+    .el-card__body {
+      padding: 10px;
+    }
+  }
+}
+.card-header {
+  width: 100%;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 20px;
+  >span {
+    display: flex;
+    align-items: center;
+  }
+}
+.card-header__icon {
+  font-size: 20px;
+  @include font_color_primary;
+  margin-right: 4px;
+  line-height: 20px;
+}
+.card-header__title {
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 600;
+}
+.card-header__more {
+  color: #666;
+  cursor: pointer;
+  text-align: center;
+  line-height: 1;
+  padding: 10px 0;
+  i {
+    margin-left: 4px;
+  }
+}
+.no-data {
+  padding: 10px 0 20px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #999;
+}
+.no-data__icon {
+  font-size: 60px;
+  color: #999;
+}
+.collect-list.is-fold {
+  max-height: 300px;
+  overflow: hidden;
+}
+.collect-item {
+  height: 60px;
+  padding: 12px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background: #F8F8F8;
+    .collect-item__cancel {
+      display: inline;
+    }
+  }
+}
+.collect-item__title{
+  font-size: 16px;
+  color: #121212;
+   >img {
+    width: 32px;
+    height: 32px;
+    margin-right: 12px;
+  }
+}
+
+.collect-item__time {
+  color: #666;
+  font-size: 12px;
+}
+
+.collect-item__cancel {
+  display: none;
+  cursor: pointer;
+  color: #999;
+  &:hover {
+    @include font_color_primary;
+  }
+}
+
+.fold-icon {
+  transition: all .5s;
+}
+
+.is-fold {
+  .fold-icon {
+    transform: rotate(180deg);
+  }
+}
+
+</style>

package/src/frame/components/hall/AppList.vue

@@ -0,0 +1,407 @@
+<template>
+  <div :style="$component.style" class="app-list">
+    <el-card :class="['app-card', {'m-app-card': $isMobile}]" shadow="never" v-if="showManageApp">
+      <div class="app-card-header" slot="header">
+        <span class="fl">
+          <i class="app-card-header__icon epx-icon-kind"></i>
+        <span class="app-card-header__title">管理服务</span>
+        </span>
+        <ul class="service-sort-list" v-if="!$isMobile && sortList.length>0">
+          <li  :class="['service-sort__item', {active: activeManageSort==='all' }]" @click="activeManageSort='all'">
+            {{$t('all')}}
+          </li>
+          <li :class="['service-sort__item', {active: activeManageSort===sort.ID }]" v-for="sort in sortList" :key="sort.ID"  @click="activeManageSort=sort.ID">
+            <span>{{sort.APPLY_NAME}}</span>
+          </li>
+        </ul>
+        <el-input class="fr service-search" v-model="manageKeyword" :size="$isMobile? 'mini': 'medium'" clearable :placeholder="$t('please enter keywords')" suffix-icon="el-icon-search" @change="getServiceList"></el-input>
+      </div>
+      <div>
+        <div class="null-data" v-if="appList.length===0">
+          <i class="epx-icon-color-kong"></i>
+        </div>
+        <ul class="app-card__list" v-else>
+          <li class="app-card__item" v-for="app in appList" :key="app.ID" @click="openApp(app)">
+            <span class="app-card__prefix">
+              <img :src="app.IMAGE? $util.getFileUrl(app.IMAGE): require('@/assets/images/app.png')" />
+            </span>
+            <span class="app-card__name">{{app.NAME}}</span>
+            <span class="app-card__suffix">
+              <i class="el-icon-star-on app-card__suffix--select" v-if="isCollect(app)" @click.stop="serviceCancelConllection(app)"></i>
+              <i class="el-icon-star-off" v-else  @click.stop="serviceConllection(app)"></i>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </el-card>
+    <el-card :class="['app-card', {'m-app-card': $isMobile}]" shadow="never" >
+      <div class="app-card-header" slot="header">
+        <span class="fl">
+          <i class="app-card-header__icon epx-icon-aixin"></i>
+        <span class="app-card-header__title">自助服务</span>
+        </span>
+        <ul class="service-sort-list" v-if="!$isMobile && sortList.length>0">
+          <li  :class="['service-sort__item', {active: activeSelfSort==='all' }]" @click="activeSelfSort='all'">
+            {{$t('all')}}
+          </li>
+          <li :class="['service-sort__item', {active: activeSelfSort===sort.ID }]" v-for="sort in sortList" :key="sort.ID"  @click="activeSelfSort=sort.ID">
+            <span>{{sort.APPLY_NAME}}</span>
+          </li>
+        </ul>
+        <el-input class="fr service-search" v-model="selfKeyword" :size="$isMobile? 'mini': 'medium'" clearable :placeholder="$t('please enter keywords')" suffix-icon="el-icon-search" @change="getSelfServiceList"></el-input>
+      </div>
+      <div>
+        <div class="null-data" v-if="selfAppList.length===0">
+          <i class="epx-icon-color-kong"></i>
+        </div>
+        <ul class="app-card__list" v-else>
+          <li class="app-card__item" v-for="app in selfAppList" :key="app.ID" @click="openApp(app)">
+            <span class="app-card__prefix">
+              <img :src="app.IMAGE? $util.getFileUrl(app.IMAGE): require('@/assets/images/app.png')" />
+            </span>
+            <span class="app-card__name">{{app.NAME}}</span>
+            <span class="app-card__suffix">
+              <i class="el-icon-star-on app-card__suffix--select" v-if="isCollect(app)" @click.stop="serviceCancelConllection(app)"></i>
+              <i class="el-icon-star-off" v-else  @click.stop="serviceConllection(app)"></i>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import component from '@/utils/mixins/component'
+
+export default {
+  name: 'epx-hr-hall-app-list',
+  mixins: [component],
+  data () {
+    return {
+      activeSort: 'all',
+      sortList: [],
+      appList: [],
+      selfAppList: [],
+      collectList: [],
+      showSelfApp: null,
+      showManageApp: null,
+      manageKeyword: '',
+      selfKeyword: '',
+      activeManageSort: '',
+      activeSelfSort: ''
+    }
+  },
+  computed: {
+    isCollect () {
+      return app => this.collectList.some(item => item['SERVICE|ID'] === app.ID)
+    }
+  },
+  watch: {
+    activeManageSort () {
+      this.getServiceList()
+    },
+    activeSelfSort () {
+      this.getSelfServiceList()
+    }
+  },
+  methods: {
+    getServiceSort () {
+      this.$http.list({
+        entityId: 'FM_SERVICE_SORT',
+        'scope.CLIENT': this.CLIENT
+      })
+        .then(data => {
+          this.sortList = [...data.entitys]
+        })
+    },
+    getServiceList () {
+      const params = {
+        action: 'getUserServices',
+        entityId: 'FM_SERVICE',
+        'search.HALL_FLAG#not_in': '0',
+        'search.LEVEL': '1',
+        scopeParams: JSON.stringify([{
+          lb: '(',
+          field: 'TERMINAL',
+          mode: 'in',
+          values: this.$isMobile ? 'move' : 'pc',
+          link: 'or'
+        }, {
+          field: 'TERMINAL',
+          mode: 'is_null',
+          rb: ')'
+        }])
+      }
+      if (this.activeManageSort !== 'all') {
+        params['search.SORT#in'] = this.activeManageSort
+      }
+      if (this.manageKeyword) {
+        params['search.NAME#like'] = this.manageKeyword
+      }
+      this.$http.$post(params)
+        .then(data => {
+          if (this.showManageApp === null) {
+            if (data.entitys.length > 0) {
+              this.showManageApp = true
+            } else {
+              this.showManageApp = false
+            }
+          }
+          this.appList = [...data.entitys]
+        })
+    },
+    getSelfServiceList () {
+      const params = {
+        action: 'getUserServices',
+        entityId: 'FM_SERVICE',
+        'search.HALL_FLAG#not_in': '0',
+        'search.LEVEL': '2',
+        scopeParams: JSON.stringify([{
+          lb: '(',
+          field: 'TERMINAL',
+          mode: 'in',
+          values: this.$isMobile ? 'move' : 'pc',
+          link: 'or'
+        }, {
+          field: 'TERMINAL',
+          mode: 'is_null',
+          rb: ')'
+        }])
+      }
+      if (this.activeSelfSort !== 'all') {
+        params['search.SORT#in'] = this.activeSelfSort
+      }
+      if (this.selfKeyword) {
+        params['search.NAME#like'] = this.selfKeyword
+      }
+      this.$http.$post(params)
+        .then(data => {
+          if (this.showSelfApp === null) {
+            if (data.entitys.length > 0) {
+              this.showSelfApp = true
+            } else {
+              this.showSelfApp = false
+            }
+          }
+          this.selfAppList = [...data.entitys]
+        })
+    },
+    openApp (item) {
+      const url = `#/app/${item['SYSTEM|CLIENT|CODE']}/${item['SYSTEM|CODE']}/${item.CODE}`
+      if (this.$isMobile) {
+        window.location.href = url
+      } else {
+        window.open(url)
+      }
+    },
+    getCollectList () {
+      this.$http.list({
+        action: 'getServiceConllection',
+        entityId: 'FM_SERVICE_COLLECTION',
+        link: 'service'
+      })
+        .then(data => {
+          this.collectList = [...data.entitys]
+        })
+    },
+    serviceConllection (item) {
+      this.$http.$post({
+        action: 'serviceConllection',
+        entityId: 'FM_SERVICE_COLLECTION',
+        serviceId: item.ID
+      })
+        .then(() => {
+          this.getCollectList()
+        })
+    },
+    serviceCancelConllection (item) {
+      this.$http.$post({
+        action: 'serviceCancelConllection',
+        entityId: 'FM_SERVICE_COLLECTION',
+        serviceId: item.ID
+      })
+        .then(() => {
+          this.getCollectList()
+        })
+    }
+  },
+  created () {
+    this.getServiceSort()
+    this.getServiceList()
+    this.getSelfServiceList()
+    this.getCollectList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-card {
+  border:0;
+  margin-bottom: 20px;
+  &::v-deep {
+    .el-card__header,.el-card__body {
+      padding: 0;
+    }
+  }
+}
+.app-card-header {
+  height: 56px;
+  padding: 0 24px;
+   >span {
+    display: flex;
+    align-items: center;
+  }
+}
+.app-card-header__icon {
+  font-size: 20px;
+  @include font_color_primary;
+  margin-right: 4px;
+}
+.app-card-header__title {
+  font-size: 16px;
+  line-height: 56px;
+  font-weight: 600;
+}
+.service-sort-list {
+  float: left;
+  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;
+  }
+}
+.app-card__list {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 12px;
+}
+.app-card__item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 16.66%;
+  height: 146px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  padding: 20px 20px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  &:hover {
+    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
+    background: #f8f8f8;
+    .app-card__suffix {
+      display: block;
+    }
+  }
+}
+.app-card__prefix {
+  width: 56px;
+  height: 56px;
+  flex-shrink: 0;
+  text-align: center;
+  >img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.app-card__name {
+  display: block;
+  width: 100%;
+  line-height: 34px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.app-card__icon {
+  display: inline;
+  font-size: 24px;
+  color: #fff;
+  line-height: 56px;
+}
+.app-card__suffix {
+  display: none;
+  >i {
+    font-size: 16px;
+    color: #999
+  }
+  .app-card__suffix--select {
+    font-size: 20px;
+    color: #F2970E;
+  }
+}
+
+.service-search {
+  width: 200px;
+  margin-top: 10px;
+}
+.null-data {
+  font-size: 100px;
+  text-align: center;
+}
+.m-app-card {
+  .app-card-header {
+    height: auto;
+    overflow: hidden;
+    padding: 0 12px
+  }
+  .app-card-header__title {
+    line-height: 44px;
+  }
+  .service-sort-list {
+    width: 100%;
+    overflow: auto;
+    white-space: nowrap;
+  }
+  .app-card__item {
+    height: 90px;
+    padding: 10px;
+    margin: 10px;
+    width: calc(33.333% - 20px);
+    flex-direction: column;
+    padding: 0;
+    background: none;
+     .app-card__suffix {
+      display: none;
+    }
+  }
+  .app-card__prefix {
+    width: 50px;
+    height: 50px;
+  }
+  .app-card__icon {
+    font-size: 14px;
+    line-height: 34px;
+  }
+  .app-card__name {
+    display: block;
+    width: 100%;
+    line-height: 34px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+  }
+  .service-search {
+    margin-top: 8px;
+  }
+
+}
+
+</style>