eta_front/src/views/approve_manage/components/EdbChartApproveWrapper.vue

<template>
  <!-- 指标和图标审批页面 -->
  <div class="approve-detail detail-wrapper">
    <div class="top">
      <div class="left">
        <div class="item">
          <label class="el-form-item__label">待审批{{titleLabel}}数量：{{approvelistOption.length}}</label>
          <el-select
            v-model="checkId"
            style="width: 240px"
          >
            <el-option
              v-for="item in approvelistOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="item">
          <label class="el-form-item__label">公开目录</label>
          {{selectItem.classifyName}}
        </div>
      </div>
    </div>

    <div class="container">
      <div class="preview-wrapper">
          <div class="edb-detail" v-if="mainType==='edb'">
            <!-- 指标渲染 -->
            <chart-trend-render
              :edbid="selectItem.value"
              :isShowChartBasis="true"
              :isAllowSwitchSeason="false"
              :isAllowEditLimit="false"
              ref="createChart"
            />
          </div>

          <div class="chart-detail" v-if="LINK_CHART_URL&&mainType==='chart'">
            <!-- 图表渲染 -->
						<iframe :src='`${LINK_CHART_URL}?code=${selectItem.code}`' width='100%' height='450' style='border-width:0px; min-height:450px;'></iframe>
          </div>
      </div>
      <div class="right">
        <div>
          <label>公开理由</label>
          <p class="reason">{{info.Approve.ApproveRemark}} </p>
        </div>

        <div class="tool-btn">
            <el-button type="danger" @click="$parent.changeApprove('reject')"
                v-if="formType==='approve'&&approveInfo.isCurrentApprover&&permissionBtn.isShowBtn('approvePermission','reportApprove_reject')">驳回</el-button>
            <el-button type="primary" @click="$parent.changeApprove('pass')"
                v-if="formType==='approve'&&approveInfo.isCurrentApprover&&permissionBtn.isShowBtn('approvePermission','reportApprove_agree')">同意</el-button>

            <el-button type="primary" @click="$parent.changeApprove('return')"
              v-if="formType==='myself'&&![2,4].includes(approveInfo.state)&&permissionBtn.isShowBtn('approvePermission','reportApprove_repeal')">撤销</el-button>
            <el-button type="primary" plain @click="$router.replace(`/approveList?formType=${formType}&mainType=${mainType}`)">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import chartDetailDia from '@/views/mychart_manage/components/chartDetailDia.vue'
import chartTrendRender from '@/views/dataEntry_manage/databaseComponents/chartTrendRender.vue';
export default {
  components: { chartTrendRender,chartDetailDia },
  computed: {
      LINK_CHART_URL() {
        let url = localStorage.getItem('dynamicOutLinks') ? JSON.parse(localStorage.getItem('dynamicOutLinks')).ChartViewUrl+'/chartshow' : '';
        return url
      },

      titleLabel() {
        return this.mainType==='edb'?'指标':'图表';
      },

      //要公开的指标图表列表
      approvelistOption() {
        let arr = this.info.DataList.map(_ => ({
          label: _.DataName,
          value: _.DataId,
          code: _.DataCode,
          classifyName: _.DataClassifyName
        }))
        return arr
      },

      selectItem() {
        return this.approvelistOption.find(_=>_.value===this.checkId) || {}
      }
  },
  props: {
    formType: {
      type: String
    },
    mainType: {
      type: String,
    },
    info: {
      type: Object
    },
    approveInfo: {
      type: Object
    }
    
  },
  data() {
    return {
      checkId:'',
    }
  },
  mounted() {
    this.checkId = this.approvelistOption[0].value;
  },
  methods:{
  },
}
</script>
<style scoped lang='scss'>
.detail-wrapper {
  padding: 20px;
  display: flex;
  flex-direction: column;
  .top {
    display: flex;
    justify-content: space-between;
    .left,.item {
      display: flex;
      align-items: center;
    }
    .left {
      gap: 50px;
    }
  }

  .container {
    display: flex;
    margin-top: 20px;
    flex: 1;
    .preview-wrapper {
      flex: 1;
      border: 1px solid #E9E9EB;
      padding: 30px 20px;
      border-radius: 4px;
    }
    .right {
      margin-left: 20px;
      width: 350px;
      border: 1px solid #E9E9EB;
      padding: 30px 20px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .tool-btn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 40px;
      }

      .reason {
        height: 200px;
        overflow-y: auto;
        margin-top: 20px;
        padding: 10px 20px;
        border: 1px solid #DCDFE6;
        border-radius: 8px;
      }
    }
  }
}
</style>