web/src/views/workspace/components/CommonUse.vue

<template>
  <WorkspaceCard class="work-common" title="常用功能">
    <span slot="header-right" class="header-right-set" @click="changeDialogState(true)"><i class="icon-set-img"></i> 设置</span>
    <div class="common-lists">
      <div class="list-item" v-for="item in commonList" :key="item.id" @click="openLink(item)">
        <div class="icon-box-container" v-if="item.icon && item.icon.indexOf('icon-') === 0">
          <JyIcon :name="item.icon" classPrefix=""></JyIcon>
        </div>
        <div v-else class="icon-box-container">
          <el-image :src="item.icon" alt="常用功能">
            <img slot="error" src="https://www.jianyu360.cn/common-module/public/image/auto.png" />
          </el-image>
        </div>
        <span v-html="item.name" class="item-name"></span>
      </div>
      <div v-if="commonList && commonList.length < maxCount" class="list-add" @click="changeDialogState(true)">
        <span class="icon-add-img"></span>
        <span class="add-text">添加常用功能</span>
      </div>
    </div>
    <!-- 设置常用功能dialog -->
    <el-dialog
      custom-class="fn-dialog"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :show-close="false"
      v-if="dialogShow"
      center
      width="696px">
      <SelectorCard @onCancel="changeDialogState(false)" @onConfirm="confirmSaveFn" confirmText="确定">
        <div slot="header">常用功能设置</div>
        <div class="transfer-content">
          <Transfer :maxCount="maxCount" submitKey="id" :left="allFunctions" :right="transferCommonList" @onSave="onTransferSave"></Transfer>
        </div>
        <p class="more-tips">最多可选择 <em style="color:#2CB7CA;">{{ maxCount }}</em> 个常用功能</p>
      </SelectorCard>
    </el-dialog>
  </WorkspaceCard>
</template>

<script>
import { JyIcon } from '@jianyu/icon'
import { mapState, mapMutations, mapActions } from 'vuex'
import { Dialog, Image } from 'element-ui'
import WorkspaceCard from '../ui/WorkspaceCard'
import SelectorCard from '@/components/selector/SelectorCard'
import Transfer from '@/components/work-desktop/Transfer'
import { mixinNoPowerMessageTip } from '@/utils/mixins/no-power-message-box'
import { tryCallHooks } from '@jianyu/easy-inject-qiankun'

export default {
  name: 'CommonUse',
  mixins: [mixinNoPowerMessageTip],
  components: {
    [Dialog.name]: Dialog,
    [Image.name]: Image,
    WorkspaceCard,
    SelectorCard,
    JyIcon,
    Transfer
  },
  computed: {
    ...mapState({
      maxCount: state => state.workspace.commonUse.maxCount,
      dialogShow: state => state.workspace.commonUse.dialogShow,
      allFunctions: state => state.workspace.commonUse.allFunctions, // 所有功能
      transferCommonList: state => state.workspace.commonUse.transferCommonList,
      commonList: state => state.workspace.commonUse.commonList // 常用功能
    })
  },
  async created () {
    await this.getCanUseFunctions()
    await this.getAllFunctions({ vm: this })
  },
  methods: {
    ...mapMutations('workspace/commonUse', [
      'changeDialogState',
      'transferSave'
    ]),
    ...mapActions('workspace/commonUse', [
      'getAllFunctions',
      'getCanUseFunctions',
      'confirmSave'
    ]),
    // 穿梭框子组件传来的组件
    onTransferSave (data) {
      this.transferSave(data)
    },
    openLink (item) {
      const { url } = item
      if (item.usable) {
        tryCallHooks({
          fn: () => {
            this.$BRACE.methods.open({
              route: {
                ...item,
                link: url
              }
            })
          },
          spareFn: () => {
            window.open(url)
          }
        })
      } else {
        this.showNoPowerMessageTip()
      }
    },
    confirmSaveFn () {
      try {
        this.confirmSave()
      } catch (error) {
        this.$toast(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$main: #2cb7ca;

::v-deep{
  .fn-dialog{
    .el-dialog__header,.el-dialog__body{
      padding: 0;
    }
  }
  .transfer-content{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .selector-card-header{
    margin: 0 0 28px!important;
  }
  .selector-card.s-card{
    width: 100%;
  }
  .selector-card-content{
    display: block!important;
    padding: 0 30px;
  }
  .more-tips{
    margin-top: 20px;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: #686868;
  }
}
.icon-box-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  ::before{
    content: ''
  }
  ::v-deep {
    .el-image {
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.icon-set-img{
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  background: url('~@/assets/images/icon/icon-set.png') no-repeat center center;
  background-size: contain;
}
.icon-add-img{
  display: inline-block;
  width: 44px;
  height: 44px;
  background: url('~@/assets/images/icon/icon-add.png') no-repeat center center;
  background-size: contain;
}

.header-right-set {
  display: flex;
  align-items: center;
  color: $main;
  font-size: 14px;
  cursor: pointer;
}
.common-lists{
  padding: 0 20px;
  display: flex;
  .list-item,
  .list-add{
    width: 120px;
    padding: 18px 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
  }
  .list-item{
    // flex: 1;
    &:hover{
      span{
        color: $main;
      }
    }
  }
  .item-name,.add-text{
    margin-top: 10px;
    font-size: 14px;
    line-height: 20px;
    color: #1D1D1D;
  }
  .item-img{
    width: 44px;
    height: 44px;
  }
  .add-text{
    white-space: nowrap;
    color: #686868;
  }
}
</style>