eta_front/src/views/dataEntry_manage/components/edbHasUsedDia.vue

<template>
  <el-dialog
  :modal-append-to-body='false'
  :title="$t('Edb.MsgPrompt.del_failed')" 
  :visible.sync="show"
  :close-on-click-modal="false"
  @close="cancelHandle"
  custom-class="dateDialog"
  width="650px">
    <div class="dialog-main">
      <div class="main-title">
        <i class="el-icon-error"  style="color: #F56C6C;"></i>
        <span>{{ $t('Edb.MsgPrompt.del_edb_use_table') }}</span>
      </div>
      <div class="main-list">
        <div class="used-item" v-for="(data,index) in dataList" :key="data.id">
          <span>{{ index+1 }}、</span><span @click="navigateTo(data.routeUrl)">{{ data.ExcelName }}</span>
        </div>
      </div>
    </div>
    <div class="dia-bot">
      <el-button @click="cancelHandle" type="primary" style="width: 120px;"><!-- 知道了 -->{{$t('Dialog.known')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name:"",
    props:{
      show:{
        type:Boolean,
        default:false
      },
      dataList:{
        type:Array,
        default:()=>[]
      }
    },
    methods:{
      navigateTo(url){
        console.log(url);
        if(!url) return
        window.open(url, '_blank'); 
      },
      cancelHandle(){
        this.$emit('update:show',false)
      }
    }
  }
</script>

<style lang="scss" scoped>
.main-title{
  display: flex;
  align-items: center;
  font-size: 15px;
  i{
    font-size: 20px;
    margin-right: 10px
  }
}
.main-list{
  margin: 20px 0 0 30px;
  max-height: 420px;
  overflow: auto;
  .used-item{
    span{
      color:#333333 ;
      cursor: pointer;
      &:hover{
        text-decoration: underline
      }
    }
  }

}
.dia-bot{
  display: flex;
  justify-content: flex-end
}
</style>