epx-frame 3.5.0-shpgy.1

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

@@ -0,0 +1,170 @@
+<template>
+  <div class="notice" :style="$component.style">
+    <el-card class="notice-card" shadow="never">
+      <div  class="card-header" slot="header">
+        <span>
+          <i class="card-header__icon epx-icon-time-solid"></i>
+          <span class="card-header__title">最近使用</span>
+        </span>
+      </div>
+      <div>
+        <!--  暂无数据 -->
+        <div v-if="serviceList.length===0" class="no-data">
+          <i class="no-data__icon epx-icon-kong"></i>
+          <p class="no-data__text">暂无数据</p>
+        </div>
+        <ul :class="{'service-list': true, 'is-fold': fold}" v-else>
+          <li class="service-item" v-for="service in serviceList"  @click="openApp(service)" :key="service.ID">
+            <p class="service-item__title">
+              <img :src="service['SERVICE|IMAGE']? $util.getFileUrl(service['SERVICE|IMAGE']) : require('@/assets/images/app.png')" alt="">
+              <span class="service-item__name">{{service['SERVICE|NAME']}}</span>
+            </p>
+            <a class="service-item__time">{{$moment(service.TIME).fromNow()}}</a>
+          </li>
+        </ul>
+         <div :class="{'card-header__more': true, 'is-fold': fold }" v-if="serviceList.length>5" @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-hall-app-visit-record',
+  mixins: [component],
+  data () {
+    return {
+      serviceList: [],
+      fold: true
+    }
+  },
+  methods: {
+    getServiceVisitList () {
+      this.$http.list({
+        entityId: 'FM_USER_SERVICE_VISIT_RECORD',
+        link: 'service,service#client,service#system',
+        'scope.USER': this.user.id,
+        order_fields: 'TIME',
+        order_mode: 'asc',
+        page: 1,
+        limit: 10
+      })
+        .then(data => {
+          this.serviceList = data.entitys
+        })
+    },
+    openApp (item) {
+      const url = `#/app/${item['SERVICE|CLIENT|CODE']}/${item['SERVICE|SYSTEM|CODE']}/${item['SERVICE|CODE']}`
+      window.open(url)
+    }
+  },
+  created () {
+    this.getServiceVisitList()
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.notice-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;
+}
+.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;
+}
+
+.service-list.is-fold {
+  max-height: 300px;
+  overflow: hidden
+}
+.service-item {
+  height: 60px;
+  padding: 12px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background: #F8F8F8;
+  }
+}
+.service-item__title{
+  font-size: 16px;
+  color: #121212;
+   >img {
+    width: 32px;
+    height: 32px;
+    margin-right: 12px;
+  }
+}
+
+.service-item__time {
+  color: #666;
+  font-size: 12px;
+}
+
+.fold-icon {
+  display: inline-block;
+  transition: all .5s;
+}
+
+.is-fold {
+  .fold-icon {
+    transform: rotate(180deg);
+  }
+}
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+  <div :style="$component.style" class="banner">
+    <img v-if="$isMobile" src="@/assets/images/m_hall_banner.png" alt="" />
+    <img v-else src="@/assets/images/hall_banner.png" alt="" />
+  </div>
+</template>
+
+<script>
+import component from '@/utils/mixins/component'
+
+export default {
+  name: 'epx-hr-hall-banner',
+  mixins: [component]
+}
+</script>
+
+<style lang="scss" scoped>
+.banner> img{
+width: 100%;
+}
+</style>

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

@@ -0,0 +1,202 @@
+<template>
+<div class="card">
+  <template v-if="type==='check'">
+    <div class="card-item" @click="toProcess(2)">
+      <div class="card-icon">
+        <i class="epx-icon-todo"></i>
+      </div>
+      <div>
+        <p class="card-text">待我审批</p>
+        <p class="card-num">{{counts.unfinish || 0}}</p>
+      </div>
+    </div>
+    <!-- <div class="card-item" @click="toProcess(2)">
+      <div class="card-stat">
+        <span class="card-stat__name"><i class="el-icon-success"></i>已审批</span>
+        <span class="card-stat__num">{{counts.finish || 0}}</span>
+      </div>
+      <div  class="card-stat">
+        <span class="card-stat__name">
+          <i class="el-icon-s-promotion"></i>抄送我
+        </span>
+        <span class="card-stat__num">{{counts.notify || 0}}</span>
+      </div>
+    </div> -->
+  </template>
+  <template v-if="type==='apply'">
+    <div class="card-item" @click="toProcess(3)">
+      <div class="card-icon">
+        <i class="el-icon-document"></i>
+      </div>
+      <div>
+        <p class="card-text">我的申请</p>
+        <p class="card-num">{{counts.apply || 0}}</p>
+      </div>
+    </div>
+    <div class="card-item apply">
+      <el-button @click="toProcess(1)" class="apply-btn" type="primary" round icon="el-icon-s-promotion">发起申请</el-button>
+    </div>
+  </template>
+</div>
+</template>
+
+<script>
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-hall-service-card',
+  mixins: [component],
+  data () {
+    return {
+      counts: {}
+    }
+  },
+  computed: {
+    type () {
+      const { type } = this.$configs
+      return type
+    }
+  },
+  methods: {
+    toProcess (tabIndex) {
+      const { menuId, pageId } = this.$configs
+      if (menuId) {
+        const params = {
+          menuId: menuId,
+          pageId
+        }
+        if (tabIndex === 1) {
+          delete params.pageId
+        }
+        this.$createPage(params)
+      } else {
+        this.$createPage({
+          pageId,
+          tabIndex: tabIndex
+        })
+      }
+    },
+    getCheckCount () {
+      this.$http.get({
+        action: 'getTaskCountType',
+        entityId: 'ACT_RU_TASK',
+        type: 'taskUnfinishedCount'
+      })
+        .then(data => {
+          this.$set(this.counts, 'unfinish', data || 0)
+        })
+      this.$http.get({
+        action: 'getTaskCountType',
+        entityId: 'ACT_RU_TASK',
+        type: 'taskUnfinishedCount'
+      })
+        .then(data => {
+          this.$set(this.counts, 'finish', data || 0)
+        })
+      this.$http.get({
+        action: 'getTaskCountType',
+        entityId: 'ACT_RU_TASK',
+        type: 'processNotifyCount'
+      })
+        .then(data => {
+          this.$set(this.counts, 'notify', data || 0)
+        })
+    }
+  },
+  created () {
+    this.getCheckCount()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card {
+  background: #fff;
+  display: flex;
+  height: 140px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.card-item {
+  flex: 1;
+  box-sizing: border-box;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  position: relative;
+  &:first-child {
+    cursor: pointer;
+  }
+  // &:last-child {
+  //   &::before {
+  //     content: '';
+  //     width: 1px;
+  //     height: calc(100% - 40px);
+  //     background: #DCDFE6;
+  //     position: absolute;
+  //     left: 0;
+  //     top: 20px;
+  //   }
+  // }
+}
+.card-icon {
+  width: 56px;
+  height: 56px;
+  @include bg_color_primary;
+  margin-right: 24px;
+  border-radius: 50%;
+  text-align: center;
+  >i {
+    line-height: 56px;
+    color: #fff;
+    font-size: 24px;
+  }
+}
+.card-text {
+  font-size: 16px;
+  color: #444;
+  margin-bottom: 8px;
+  line-height: 1;
+}
+.card-num {
+  font-size: 40px;
+  color: #333;
+  line-height: 1;
+}
+.card-stat {
+  cursor: pointer;
+  box-sizing: border-box;
+  width: calc(100% - 20px);
+  height: 44px;
+  background: #F5F7FA;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  margin-bottom: 10px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.card-stat__name {
+  color: #444;
+  i {
+    margin-right: 5px;
+  }
+}
+.card-stat__num {
+  font-size: 24px;
+  @include font_color_primary;
+}
+.apply {
+  background: url('~@/assets/images/apply_bg.png') no-repeat center;
+  background-size: cover;
+}
+.apply-btn {
+  width: 180px;
+  height: 48px;
+  border-radius: 24px;
+}
+</style>

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

@@ -0,0 +1,112 @@
+<template>
+  <div class="user-card" :style="$component.style" @click="openPersonal()">
+    <div :class="['user', `user--${$configs.direction}` ]">
+      <el-avatar :class="['user-head', `user-head--${$configs.direction}` ]" icon="el-icon-user-solid" :src="photo"></el-avatar>
+      <div class="user-info">
+        <p class="user-name">{{user.name}}</p>
+        <p class="user-desc">{{deptName}}</p>
+        <p class="user-desc">{{userInfo.ACCOUNT}}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-hall-user-card',
+  mixins: [component],
+  direction: 'row',
+  data () {
+    return {
+      deptName: ''
+    }
+  },
+  computed: {
+    ...mapState({
+      user: state => state.user.user || {},
+      userInfo: state => state.user.userInfo
+
+    }),
+    photo () {
+      const { PHOTO } = this.userInfo
+      if (PHOTO) {
+        const photo = this.$util.getFileUrl(PHOTO)
+        return photo
+      }
+      return 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
+    }
+  },
+  methods: {
+    getDept () {
+      this.$http.getLabel({
+        entityId: 'FM_DEPT',
+        id: this.user.deptId
+      })
+        .then(data => {
+          this.deptName = data.label
+        })
+    },
+    openPersonal () {
+      this.$createPage({
+        metaId: 'FM_USER',
+        component: 'personal-info'
+      })
+    }
+  },
+  created () {
+    this.getDept()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.user-card {
+  background: #fff;
+  height: 140px;
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  &::v-deep {
+    .el-avatar >img {
+      width: 100%;
+    }
+  }
+}
+.user {
+  width: 100%;
+  box-sizing: border-box;
+  background: url('~@/assets/images/user_bg.png') no-repeat center;
+  background-size: cover;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+}
+.user--column{
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  background: #fff;
+}
+.user-head {
+  width: 68px;
+  height: 68px;
+  border: 1px solid #DCDFE6;
+  margin-right: 20px;
+}
+.user-head--column{
+  margin-right: 0;
+  margin-bottom: 20px;
+}
+.user-name {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+.user-desc {
+  color: #666;
+}
+</style>

package/src/frame/components/mscope/Scope.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="mscope">
+    <div class="mscope-container">
+      <epx-mscope-item v-for="field in fields" :key="field.attriName" :field="field" :scope="getScope(field)"  @update="v=>updateItem(field, v)"></epx-mscope-item>
+    </div>
+    <div class="mscope-operate">
+      <el-button type="primary" size="medium" @click="$emit('change',scopeParams, openPage)">{{$t('confirm')}}</el-button>
+      <el-button size="medium" @click="clear">{{$t('clear')}}</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-mscope',
+  props: {
+    fields: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    openPage: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      scopeParams: []
+    }
+  },
+  computed: {
+    getScope () {
+      return field => {
+        const scope = this.scopeParams.find(scope => scope.field === field.attriName)
+        return scope
+      }
+    }
+  },
+  methods: {
+    updateItem (field, v) {
+      const scopeIndex = this.scopeParams.findIndex(item => item.field === field.attriName)
+      const param = {
+        field: field.attriName,
+        mode: (field.dataType === 'list' || field.dataType === 'radio' || field.dataType === 'obejct') ? 'in' : field.dataType === 'date' ? 'in_scope' : 'like',
+        values: v
+      }
+      if (scopeIndex !== -1) {
+        this.scopeParams.splice(scopeIndex, 1, param)
+      } else {
+        this.scopeParams.push(param)
+      }
+    },
+    clear () {
+      this.scopeParams = []
+      if (!this.openPage) {
+        this.$emit('change', this.scopeParams)
+      }
+    }
+  },
+  created () {
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.mscope {
+  height: 100%;
+  overflow: auto;
+  padding-bottom: 70px;
+}
+.mscope-operate {
+  position: absolute;
+  background: #fff;
+  width: 100%;
+  background: #fff;
+  bottom: 0;
+  padding: 16px 0;
+  display: flex;
+  justify-content: center;
+  border-top: 1px solid #e3e3e3;
+  &::v-deep {
+    .el-button {
+      width: 108px;
+      margin: 0 20px
+    }
+  }
+}
+</style>