Elementui table dialog radio样式功能实现

<template>
  <div id="footer">
    <div class="footer_sonbox">
      <!--浏览投标文件-->
      <el-button type="success" round class="look_btn" @click="showTbBtn" v-if="!isTender && !$route.meta.isShow">浏览投标文件</el-button>
      <el-dialog
        title="浏览投标文件"
        :visible.sync="tbDialogVisible"
        width="95%"
        top="auto" class="dialog_box">
        <div style="background: white;">
          <el-row>
            <el-col>
              <div style="margin-left: 25px;">
                <!--<el-checkbox v-model="checkedAll" >企业名称</el-checkbox>-->
                <div style="font-weight: bold;">企业名称<el-button style="float: right;" type="primary" round @click="openFullscreen()" size="medium">全屏</el-button></div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="padding-right: 5px;box-sizing: border-box">
              <div class="pdf_bigbox">
                <div class="pdf_div">
                  <el-table
                    :data="fileListTender"
                    highlight-current-row
                    @row-click="clickTr"
                    :header-cell-style="{ color: '#555' , textAlign: 'center',fontSize: '12px' }"
                    :style="tbTable">
                    <el-table-column align="center" width="50" label="选择" >
                      <template slot-scope="scope" >
                        <el-radio v-model="rowSelection" :label='scope.row.objectId' @change='getCurrentRow' >&nbsp;</el-radio>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="序号"
                      type="index"
                      align="center"
                      width="50">
                    </el-table-column>
                    <el-table-column
                      property="label"
                      label="名称">
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-col>
            <el-col :span="20" style="padding-left: 5px;box-sizing: border-box">
              <div class="pdf_bigbox">
                <div class="pdf_div">
                  <iframe id="pdf_file4" :src="pdfUrl2" frameborder="0" class="pdf_iframe"></iframe>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
      <!--对比采购响应文件-->
      <el-button type="success" round class="look_btn" @click="contrastBtn" v-if="!isTender && !$route.meta.isShow">对比采购响应文件</el-button>
      <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="95%"
        top="auto" class="dialog_box">
        <div style="background: white;">
          <el-row>
            <el-col :span="12" style="padding-right: 5px;box-sizing: border-box">
              <div class="pdf_bigbox">
                <div class="pdf_select_box">
                  <el-tabs v-model="fileValueTender" @tab-click="filePdfSelect(fileValueTender)" style="width: 95%;">
                    <el-tab-pane
                      v-for="item in fileListTender"
                      :key="item.objectId"
                      :name="item.objectId"
                      :label="item.label">
                    </el-tab-pane>
                  </el-tabs>
                </div>
                <div class="pdf_div">
                  <iframe id="pdf_file1" :src="pdfUrl" frameborder="0" class="pdf_iframe"></iframe>
                </div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left: 5px;box-sizing: border-box">
              <div class="pdf_bigbox">
                <div class="pdf_select_box">
                  <el-tabs v-model="fileValueBid" @tab-click="filePdfSelect2(fileValueBid)" style="width: 95%;">
                    <el-tab-pane
                      v-for="item in fileListBid"
                      :key="item.objectId"
                      :name="item.objectId"
                      :label="item.label">
                    </el-tab-pane>
                  </el-tabs>
                </div>
                <div class="pdf_div">
                  <iframe id="pdf_file2" :src="pdfUrl2" frameborder="0" class="pdf_iframe"></iframe>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
      <!--<el-button type="success" round class="look_btn" @click="lookTenderingFile" v-if="isDlShowBtn && !$route.meta.isShow">查看采购文件</el-button>-->
      <!--查看招标文件弹框-->
      <el-dialog title="查看采购文件" :visible.sync="tenderingFileVisible" width="30%">
        <div class="selectbigbox">
          <div class="selecttitle">采购文件：</div>
          <div class="look_download_btn">
            <el-button type="text" size="small" class="look_download" @click="biddingFileBtn" :disabled="!isVisible">查看</el-button>
          </div>
        </div>
      </el-dialog>
      <!--查看招标文件弹框-->
      <!--<el-button type="success" round class="look_btn" @click="lookBrowseFile" v-if="isDlShowBtn && !$route.meta.isShow">查看响应文件</el-button>-->
      <!--浏览投标文件弹框-->
      <el-dialog title="查看响应文件" :visible.sync="browseFileVisible" width="30%">
        <div class="selectbigbox">
          <el-table
            :data="tableDataBrowse"
            border
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center"
              :index='dataIndex'>
            </el-table-column>
            <el-table-column
              prop="label"
              label="公司名称"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="查看"
              width="80"
              align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" class="look_download" @click="tenderFileBtn(scope)">查看</el-button>
              </template>
            </el-table-column>
            <!--<el-table-column-->
              <!--label="下载"-->
              <!--width="120">-->
              <!--<template slot-scope="scope">-->
                <!--<el-button type="text" size="small" class="look_download" @click="downTenderFileBtn(scope)">下载</el-button>-->
              <!--</template>-->
            <!--</el-table-column>-->
          </el-table>
        </div>
      </el-dialog>
      <!--浏览投标文件弹框-->
      <!--浏览工程量清单弹框-->
      <el-button type="success" round class="look_btn" @click="detailedBrowseFile" v-if="isShowEng && isShowBtn && !isTender  && !$route.meta.isShow">下载工程量清单</el-button>
      <el-dialog title="下载工程量清单" :visible.sync="detailedFileVisible" width="30%">
        <!--<div class="selectbigbox" v-if="!isEnquirySys">-->
          <!--<div class="selecttitle"><span class="red">*</span>选择谈判轮数：</div>-->
          <!--<el-select v-model="detailedId" placeholder="请选择" @change="engineeringSelect(detailedId)">-->
            <!--<el-option-->
              <!--v-for="item in selectNegotiation"-->
              <!--:key="item.objectId"-->
              <!--:label="item.label"-->
              <!--:value="item.objectId">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</div>-->
        <div class="selectbigbox">
          <el-table
            :data="tableDataDetailed"
            border
            style="width: 100%;height: 450px;overflow: auto">
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center"
              :index='dataIndex'>
            </el-table-column>
            <el-table-column
              prop="label"
              label="公司名称"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="下载"
              width="80"
              align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" class="look_download" @click="downTenderFileBtn(scope)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
      <!--浏览工程量清单弹框-->
    </div>
    <div class="footer_sonbox">
      <div class="bottom_rightbox"  style="margin-left: 15px;">
        <span>下一阶段：</span>
        <span>{{nextStep}}</span>
      </div>
      <div class="bottom_rightbox">
        <span>上一阶段：</span>
        <span>{{lastStep}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import {review, reviewControl} from '@/api'
import {downloadFile, downloadFileUrl} from '@/assets/js/common'
import { handlePdfDisplay } from '@/utils/common'
export default {
  data () {
    return {
      tenderingFileVisible: false, // 查看招标文件
      browseFileVisible: false, // 浏览投标文件
      detailedFileVisible: false, // 浏览工程量清单
      selectNegotiation: [], // 查看招标文件
      tableDataBrowse: [], // 浏览投标文件
      tableDataDetailed: [], // 浏览工程量清单
      // 自定义序号
      dataIndex: 1,
      selectNegoId: '',
      bidFileId: '',
      detailedId: '',
      bidFileName: '',
      routeList: [],
      lastStep: '',
      nextStep: '',
      winHeight: 0,
      winWidth: 0,
      isEnquirySys: false,
      isVisible: true,
      isShowEng: false,
      isShowBtn: true,
      isDlShowBtn: false,
      isTender: false, // 是否投标人
      tbDialogVisible: false, // 浏览投标文件弹框自定义,
      dialogVisible: false, // 对比采购响应文件弹框自定义,
      rowSelection: '',
      fileValueTender: '',
      pdfUrl: '',
      pdfUrl2: '',
      fileValueBid: '', // 招标
      tbTable: {width: '100%', height: '75vh', overflow: 'auto'}, // 招标
      fileListBid: [], // 招标
      fileListTender: [] // 投标
    }
  },
  methods: {
    openFullscreen () {
      if (this.rowSelection) {
        let url = this.rowSelection.replace(process.env.OLD_LINK, process.env.NEW_LINK) + '&fileName=山西比比网络'
        window.open(url)
      }
    },
    clickTr (row, event, column) {
      // console.log(row["id"]) 跟下面效果一样
      console.log(row.objectId)// 获取各行id的值
      this.getCurrentRow(row.objectId)
    },
    // 查看招标文件
    lookTenderingFile () {
      this.tenderingFileVisible = true
    },
    // 招标文件
    biddingFileBtn () {
      console.log(this.bidFileId)
      let url = this.bidFileId.replace(process.env.OLD_LINK, process.env.NEW_LINK) + '&fileName=山西比比网络'
      window.open(url)
    },
    // 浏览投标文件
    lookBrowseFile () {
      this.browseFileVisible = true
    },
    tenderFileBtn (scope) {
      let url = scope.row.objectId.replace(process.env.OLD_LINK, process.env.NEW_LINK) + '&fileName=山西比比网络'
      window.open(url)
    },
    // 浏览工程量清单
    detailedBrowseFile () {
      this.detailedFileVisible = true
    },
    // 下载工程量清单
    downTenderFileBtn (scope) {
      // let suffix = scope.row.objectId.substring(scope.row.objectId.lastIndexOf('.'))
      // let fileName = scope.row.label.replace(/(^\s*)|(\s*$)/g, '').replace('（', '(').replace('）', ')')
      downloadFileUrl(scope.row.label, scope.row.objectId)
    },
    downBidFileBtn () {
      let index1 = this.bidFileId.lastIndexOf('.')
      let index2 = this.bidFileId.length
      let suffixName = this.bidFileId.substring(index1, index2)
      downloadFile(this.bidFileName + suffixName, this.bidFileId)
    },
    roundsNumberList () {
      this.engineeringSelect(1)
      this.handleSelectBid(1)
      this.handleSelectTender(1)
      let url = ''
      if (this.isShowEng) {
        url = {
          selectType: 'gclqd'
        }
      }
      reviewControl.getBidNumList(url).then((res) => {
        this.selectNegotiation = res.data.ItemList
        if (this.selectNegotiation && this.selectNegotiation.length > 0) {
          this.selectNegoId = this.selectNegotiation[0].objectId
          this.detailedId = this.selectNegotiation[0].objectId
          this.handleSelectBid(this.selectNegoId)
          this.engineeringSelect(this.detailedId)
        }
      })
    },
    handleSelectBid (id) {
      reviewControl.getBidFile(id).then((res) => {
        this.bidFileName = res.data.BuyerFile.label
        this.bidFileId = res.data.BuyerFile.objectId
        if (this.bidFileName || this.bidFileId) {
          this.handleSelectTender(id)
          this.engineeringSelect(id)
        }
      })
    },
    handleSelectTender (id) {
      reviewControl.getTenderFile(id).then((res) => {
        this.tableDataBrowse = res.data.TenderFileList
        this.isVisible = this.tableDataBrowse.length > 0
      })
    },
    handleStep () {
      this.isEnquirySys = this.$route.meta.layout === 'EnquirySystem'
      this.routeList = this.$store.getters.routeList
      let index = Number(this.$store.getters.curIndex)
      index = Number(sessionStorage.getItem('eindex'))
      let length = this.routeList.length - 1
      if (index <= length) {
        this.lastStep = index > 0 ? this.routeList[index - 1] : '暂无' + '  '
        this.nextStep = index < length ? this.routeList[index + 1] : '暂无' + ' '
      } else {
        this.lastStep = '暂无'
        this.nextStep = '暂无'
      }
    },
    getWinWH () {
      let body = document.body
      this.winHeight = (body.clientHeight || body.offsetHeight) - 20
      this.winWidth = body.clientWidth || body.offsetWidth
    },
    // 是否显示工程量清单
    isEngineering () {
      reviewControl.isHideEngineering().then((res) => {
        if (res.data.isShow) {
          this.isShowEng = true
        } else {
          this.isShowEng = false
        }
        this.roundsNumberList()
      })
    },
    // 工程量清单数据
    engineeringSelect (id) {
      reviewControl.engineeringList(id).then((res) => {
        this.tableDataDetailed = res.data.fileList
      })
    },
    gainUserInfo () {
      this.$store.getters.authUser.roleIds.map((its) => {
        if (its === 8) {
          this.isShowBtn = true
          this.isDlShowBtn = true
        }
        if (its === 6) {
          this.isTender = true
        }
      })
    },
    showTbBtn () { // 浏览投标文件
      this.tbDialogVisible = true
      if (this.fileListTender.length > 1) {
        this.getCurrentRow(this.fileListTender[0].objectId)
      }
    },
    contrastBtn () { // 对比采购响应文件
      this.dialogVisible = true
    },
    // 上边pdf列表选择
    filePdfSelect (doc) {
      // this.pdfUrl = this.basePdfUrl + '?doc=' + doc + '&width=' + this.pdfWidth + '&height=' + this.pdfHeight
      this.pdfUrl = doc.replace(process.env.OLD_LINK, process.env.NEW_LINK) + '&fileName=山西比比网络'
    },
    filePdfSelect2 (doc) {
      // this.pdfUrl2 = this.basePdfUrl + '?doc=' + doc + '&width=' + this.pdfWidth + '&height=' + this.pdfHeight
      this.pdfUrl2 = doc.replace(process.env.OLD_LINK, process.env.NEW_LINK) + '&fileName=山西比比网络'
    },
    getCurrentRow (rowObject) {
      this.rowSelection = rowObject // 必须要把唯一值赋给rowSelection,否则会出问题
      this.pdfUrl2 = rowObject.replace(process.env.OLD_LINK, process.env.NEW_LINK) + '&fileName=山西比比网络'
    },
    // pdf文件选择列表
    pdfSelectLists () {
      review.pdfSelectList(this.reviewType).then((res) => {
        this.fileListTender = res.data.FileList
        if (!this.fileListTender) {
          return
        }
        if (this.fileListTender.length > 1) {
          this.fileValueTender = this.fileListTender[1].objectId
        } else {
          this.fileValueTender = this.fileListTender[0].objectId
        }
        this.filePdfSelect(this.fileValueTender)
        this.fileListBid = this.fileListTender
        this.fileValueBid = this.fileListBid[0].objectId
        this.filePdfSelect2(this.fileValueBid)
      })
    }
  },
  watch: {
    '$route': 'handleStep',
    dialogVisible: function (value) {
      this.$store.commit('TENDERINGFILE_STATUS', value)
      handlePdfDisplay(value)
    },
    tbDialogVisible: function (value) {
      this.$store.commit('TENDERINGFILE_STATUS', value)
      handlePdfDisplay(value)
    },
    tenderingFileVisible: function (value) {
      this.$store.commit('TENDERINGFILE_STATUS', value)
      handlePdfDisplay(value)
    },
    browseFileVisible: function (value) {
      this.$store.commit('TENDERINGFILE_STATUS', value)
      handlePdfDisplay(value)
    },
    detailedFileVisible: function (value) {
      this.$store.commit('TENDERINGFILE_STATUS', value)
      handlePdfDisplay(value)
    },
    isEnquirySys: function (value) {
      if (value) {
        this.roundsNumberList()
      }
    },
    '$store.getters.routeList': function () {
      if (this.$store.getters.routeList.length > 0) {
        this.handleStep()
      }
    }
  },
  mounted () {
    this.getWinWH()
    this.roundsNumberList()
    this.handleStep()
    this.isEngineering()
    this.gainUserInfo()
    this.pdfSelectLists()
  }
}
</script>
<style scoped>
  >>> .el-dialog__body{
    padding: 5px 5px;
  }
  >>> .el-radio {
    margin-left: 6px;
  }
  >>> .el-radio .el-radio__label {
    display: none;
  }
</style>

效果图