eta_front/src/components/chart/chartDetailHandlesWrap.vue

<template>
  <ul class="right-actions">
    <li>{{$t('Table.column_operations')}}</li>
    <li
      class="span-item shareLink"
      @click="copyChartConfirm('url')"
      :data-clipboard-text="linkUrl"
      v-if="!chartInfo.Disabled&&isShowBtn('share')"
    >
      <i class="el-icon-share" />&nbsp;{{$t('Chart.chart_share_btn')}}
    </li>
    <li v-if="isShowBtn('addMyChart')"
        class="span-item" @click="addMychartHandle(chartInfo)">
      <img
        :src="$icons.chart_join_ico"
        alt=""
        style="width: 13px; height: 12px; vertical-align: middle"
      />{{$t('Chart.chart_addmy_btn')}}
    </li>
    <li v-if="isShowBtn('refresh')"
        class="span-item" @click="refreshHandle">
      <span
        ><i class="el-icon-refresh" style="margin-left: 0" />&nbsp;{{$t('Edb.detail_refresh_btn')}}
      </span>
    </li>
    <li class="span-item" v-if="['/commordityChartBase','/crossVarietyChartList'].includes($route.path)">
      <span @click="saveChartHandle">
        <i class="el-icon-collection" />&nbsp;{{$t('Chart.chart_save_btn')}}
      </span>
    </li>
    <li class="span-item" v-if="chartInfo.Button.IsCopy&&isShowBtn('otherSave')">
      <span @click="saveChartOtherHandle">
        <i class="el-icon-document-add" />&nbsp;{{$t('Chart.chart_copy_btn')}}
      </span>
    </li>
    <li class="span-item" v-if="chartInfo.Button.IsEdit&&isShowBtn('edit')" @click="editChartHandle">
      <img
        src="~@/assets/img/set_m/edit.png"
        alt=""
        style="width: 13px; height: 12px"
      />&nbsp;{{$t('Chart.chart_edit_btn')}}
    </li>
    <li
      class="span-item copy"
      @click="copyChartConfirm('office')"
      v-if="!chartInfo.Disabled&&isShowBtn('copyOffice')"
    >
      <i class="el-icon-document-copy" />&nbsp;{{$t('Chart.chart_copyoffice')}}
    </li>
    <li
      class="span-item copy"
      @click="copyChartConfirm('微信')"
      v-if="!chartInfo.Disabled&&isShowBtn('copyWechat')"
    >
      <img
        style="width: 13px; height: 12px; vertical-align: middle"
        src="~@/assets/img/chart_m/WeChat.jpg"
      />&nbsp;{{$t('Chart.chart_copywx')}}
    </li>
    <li v-if="isShowBtn('enNameSetting')"
        class="span-item copy" @click="openLangInfoDia">
      <img
        style="width: 16px; vertical-align: middle"
        :src="$icons.to_en"
      />&nbsp;{{$t('Edb.detail_en_btn')}}
    </li>
    <li
      class="span-item"
      style="color: #ff4040"
      @click="delChartHandle"
      v-if="chartInfo.Button.IsEdit&&isShowBtn('del')"
    >
      <i class="el-icon-delete" style="color: #ff4040" />&nbsp;{{$t('Chart.chart_del_btn')}}
    </li>
  </ul>
</template>
<script>
export default {
  props: ['chartInfo','linkUrl'],
  methods: {
    copyChartConfirm(type) {
      this.$emit('copyChartConfirm',type)
    },
    addMychartHandle(item) {
      this.$emit('addMychartHandle',item)
    },
    refreshHandle() {
      this.$emit('refreshHandle')
    },
    saveChartHandle() {
      this.$emit('saveChartHandle')
    },
    saveChartOtherHandle() {
      this.$emit('saveChartOtherHandle')
    },
    editChartHandle() {
      this.$emit('editChartHandle')
    },
    openLangInfoDia() {
      this.$emit('openLangInfoDia')
    },
    delChartHandle() {
      this.$emit('delChartHandle')
    },
    //在原先按钮显示的逻辑上，加上权限控制
    //由于多个图表共用这个操作栏，通过路由判断
    isShowBtn(btn){
        const {path} = this.$route
        const {statisticPermission,productPricePermission,checkPermissionBtn} = this.permissionBtn
        const chartrelevanceMap = {
            share:checkPermissionBtn(statisticPermission.corrAnalysis_share),
            addMyChart:checkPermissionBtn(statisticPermission.corrAnalysis_addMyChart),
            refresh:checkPermissionBtn(statisticPermission.corrAnalysis_refresh),
            otherSave:checkPermissionBtn(statisticPermission.corrAnalysis_otherSave),
            edit:checkPermissionBtn(statisticPermission.corrAnalysis_edit),
            copyOffice:checkPermissionBtn(statisticPermission.corrAnalysis_copyOffice),
            copyWechat:checkPermissionBtn(statisticPermission.corrAnalysis_copyWechat),
            enNameSetting:checkPermissionBtn(statisticPermission.corrAnalysis_enNameSetting),
            del:checkPermissionBtn(statisticPermission.corrAnalysis_del),
        }
        const fittingEquationMap = {
            share:checkPermissionBtn(statisticPermission.fittingEq_share),
            addMyChart:checkPermissionBtn(statisticPermission.fittingEq_addMyChart),
            refresh:checkPermissionBtn(statisticPermission.fittingEq_refresh),
            otherSave:checkPermissionBtn(statisticPermission.fittingEq_otherSave),
            edit:checkPermissionBtn(statisticPermission.fittingEq_edit),
            copyOffice:checkPermissionBtn(statisticPermission.fittingEq_copyOffice),
            copyWechat:checkPermissionBtn(statisticPermission.fittingEq_copyWechat),
            enNameSetting:checkPermissionBtn(statisticPermission.fittingEq_enNameSetting),
            del:checkPermissionBtn(statisticPermission.fittingEq_del),
        }
        const statisticFeatureMap = {
            share:checkPermissionBtn(statisticPermission.statisticFeature_share),
            addMyChart:checkPermissionBtn(statisticPermission.statisticFeature_addMyChart),
            refresh:checkPermissionBtn(statisticPermission.statisticFeature_refresh),
            otherSave:checkPermissionBtn(statisticPermission.statisticFeature_otherSave),
            edit:checkPermissionBtn(statisticPermission.statisticFeature_edit),
            copyOffice:checkPermissionBtn(statisticPermission.statisticFeature_copyOffice),
            copyWechat:checkPermissionBtn(statisticPermission.statisticFeature_copyWechat),
            enNameSetting:checkPermissionBtn(statisticPermission.statisticFeature_enNameSetting),
            del:checkPermissionBtn(statisticPermission.statisticFeature_del),
        }
        const priceLineMap = {
            share:checkPermissionBtn(productPricePermission.goodsPrice_priceLine_share),
            addMyChart:checkPermissionBtn(productPricePermission.goodsPrice_priceLine_addMyChart),
            refresh:checkPermissionBtn(productPricePermission.goodsPrice_priceLine_refresh),
            otherSave:checkPermissionBtn(productPricePermission.goodsPrice_priceLine_otherSave),
            edit:checkPermissionBtn(productPricePermission.goodsPrice_priceLine_edit),
            copyOffice:checkPermissionBtn(productPricePermission.goodsPrice_priceLine_copyOffice),
            copyWechat:checkPermissionBtn(productPricePermission.goodsPrice_priceLine_copyWechat),
            enNameSetting:checkPermissionBtn(productPricePermission.goodsPrice_priceLine_enNameSetting),
            del:checkPermissionBtn(productPricePermission.goodsPrice_priceLine_del),
        }
        const incomeLine = {
            share:checkPermissionBtn(productPricePermission.goodsPrice_incomeLine_share),
            addMyChart:checkPermissionBtn(productPricePermission.goodsPrice_incomeLine_addMyChart),
            refresh:checkPermissionBtn(productPricePermission.goodsPrice_incomeLine_refresh),
            otherSave:checkPermissionBtn(productPricePermission.goodsPrice_incomeLine_otherSave),
            edit:checkPermissionBtn(productPricePermission.goodsPrice_incomeLine_edit),
            copyOffice:checkPermissionBtn(productPricePermission.goodsPrice_incomeLine_copyOffice),
            copyWechat:checkPermissionBtn(productPricePermission.goodsPrice_incomeLine_copyWechat),
            enNameSetting:checkPermissionBtn(productPricePermission.goodsPrice_incomeLine_enNameSetting),
            del:checkPermissionBtn(productPricePermission.goodsPrice_incomeLine_del),
        }

         const crossVarietyBtnMap = {
            share:checkPermissionBtn(statisticPermission.crossVariety_share),
            addMyChart:checkPermissionBtn(statisticPermission.crossVariety_addMyChart),
            refresh:checkPermissionBtn(statisticPermission.crossVariety_refresh),
            otherSave:checkPermissionBtn(statisticPermission.crossVariety_otherSave),
            edit:checkPermissionBtn(statisticPermission.crossVariety_edit),
            copyOffice:checkPermissionBtn(statisticPermission.crossVariety_copyOffice),
            copyWechat:checkPermissionBtn(statisticPermission.crossVariety_copyWechat),
            enNameSetting:checkPermissionBtn(statisticPermission.crossVariety_enNameSetting),
            del:checkPermissionBtn(statisticPermission.crossVariety_del),
        }
        //相关性分析
        if(path==='/chartrelevance') return chartrelevanceMap[btn]

        //拟合方程曲线
        else if(path==='/fittingEquationList') return fittingEquationMap[btn]
        
        //统计特性
        else if(path==='/statisticFeatureList') return statisticFeatureMap[btn]

        //跨品种分析
        else if(path==='/crossVarietyChartList') return crossVarietyBtnMap[btn]

        //商品价格曲线
        else if(path==='/commordityChartBase'){
            const {Source,ChartType} = this.chartInfo
            if(Source===2&&ChartType===8){//是商品价格曲线
                return priceLineMap[btn]
            }else{//是利润曲线
                return incomeLine[btn]
            }
            
        }

        return false
    }
  },
};
</script>
<style scoped lang="scss">
.right-actions {
  /* max-width: 160px; */
  height: 100%;
  padding: 20px 10px;
  border-left: 1px solid #DCDFE6;
  li {
    margin-bottom: 15px;
  }
  @media screen and (max-width: 1710px) {
    font-size: 12px;
  }
  .span-item {
    color: #409eff;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
    .el-icon-collection,
    .el-icon-document-copy {
      color: #409eff;
    }
  }
}
</style>