web/src/components/work-desktop/CommonUse.vue

<template>
  <div class="work-common">
    <div class="common-title">
      <span>常用功能</span>
      <span class="set" @click="setFunctions"><i class="icon-set-img"></i> 设置</span>
    </div>
    <div class="common-lists">
      <div class="list-item" v-for="(item, index) in commonList" :key="index" @click="openRouter(item.url)">
        <img class="item-img" :src="item.img" alt="常用功能">
        <span v-html="item.name" class="item-name"></span>
      </div>
      <div v-if="commonList && commonList.length < 8" class="list-add" @click="setFunctions">
        <span class="icon-add-img"></span>
        <span class="add-text">添加常用功能</span>
      </div>
    </div>
    <!-- 设置常用功能dialog -->
    <el-dialog
      custom-class="fn-dialog"
      :visible.sync="dialogFn"
      :close-on-click-modal="false"
      :show-close="false"
      center
      width="696px"
      v-if="dialogFn"
    >
      <Card @onCancel="dialogFn = false" @onConfirm="confirmSaveFn" confirmText="确定">
        <div slot="header">常用功能设置</div>
        <div class="transfer-content">
          <Transfer :left="allFuncitons" :right="commonList" @onSave="saveFunData"></Transfer>
        </div>
        <p class="more-tips">最多可选择 <em style="color:#2CB7CA;">8</em> 个常用功能</p>
      </Card>
    </el-dialog>
  </div>
</template>

<script>
import { Dialog } from 'element-ui'
import Card from '@/components/selector/SelectorCard'
import Transfer from './Transfer'
import { getAllFunctions, getCanUseFunctions, saveCommonFunctions } from '@/api/modules'
export default {
  name: 'work-common',
  computed: {},
  components: {
    [Dialog.name]: Dialog,
    Card,
    Transfer
  },
  data () {
    return {
      dialogFn: false,
      commonList: [], // 常用功能
      allFuncitons: [], // 所有功能
      saveData: null // 要提交的数据
    }
  },
  created () {
    this.getCanUseFunctions()
    this.getAllFunctions()
  },
  mounted () {},
  methods: {
    // 获取所有功能
    getAllFunctions () {
      // 平台参数 platform 平台：默认PC，微信：WX，app:APP， 可不传
      getAllFunctions().then(res => {
        if (res.error_code === 0 && res.data) {
          this.allFuncitons = res.data
        } else {
          this.allFuncitons = []
        }
      })
    },
    // 获取常用功能
    getCanUseFunctions () {
      getCanUseFunctions().then(res => {
        if (res.error_code === 0 && res.data) {
          res.data.forEach(v => {
            if (v.name.indexOf('/') > -1) {
              v.name = v.name.replace('/', '/<br>')
            }
          })
          this.commonList = res.data
        } else {
          this.commonList = []
        }
      })
    },
    setFunctions () {
      this.dialogFn = true
    },
    // 穿梭框子组件传来的组件
    saveFunData (data) {
      this.saveData = data
    },
    // dialog 卡片组件保存按钮提交事件
    confirmSaveFn () {
      console.log('保存的数据', this.saveData)
      if (this.saveData) {
        saveCommonFunctions({
          platform: 'PC',
          names: this.saveData.toString()
        }).then(res => {
          if (res.error_code === 0 && res.data) {
            this.dialogFn = false
            this.getCanUseFunctions()
          } else {
            this.$toast(res.error_msg)
          }
        })
      } else {
        this.dialogFn = false
      }
    },
    openRouter (url) {
      window.open(url)
    }
  }
}
</script>

<style lang="scss" scoped>
.work-common{
  margin-top: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.02);
  ::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;
    }
  }
  .common-title{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    font-size: 18px;
    color: #1d1d1d;
    line-height: 28px;
    &::after{
      position: absolute;
      content: '';
      width: 3px;
      height: 24px;
      background: #2cb7ca;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    .set{
      display: flex;
      align-items: center;
      color: #2cb7ca;
      font-size: 14px;
      cursor: pointer;
    }
    .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;
    }
  }
  .common-lists{
    padding: 0 20px;
    display: flex;
    .list-item,
    .list-add{
      width: 120px;
      height: 120px;
      padding: 18px 0 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
    }
    .list-item{
      &:hover{
        span{
          color: #2cb7ca;
        }
      }
    }
    .item-name,.add-text{
      margin-top: 10px;
      font-size: 14px;
      line-height: 20px;
      color: #1D1D1D;
    }
    .item-img{
      width: 44px;
      height: 44px;
    }
    .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;
    }
    .add-text{
      color: #686868;
    }
  }
}
</style>