aiccs/src/views/expelled/objection/除名异议业务详情.vue

<template>
  <div v-loading.fullscreen.lock="loading" class="main-content abnormal">
    <div class="content-body">
      <el-tabs v-model="activeName" type="border-card" class="tabs" style="font-size:unset">
        <el-tab-pane label="除名异议申请信息" name="除名异议申请信息">
          <div class="table-title">
            <img src="../../../assets/images/icon01.png" alt="" style="width:24px;margin-right:10px">
            除名异议申请信息
          </div>
          <el-form ref="form" label-width="190px" label-position="right">
            <div class="form">
              <div class="form-body">
                <table
                  width="100%"
                  class="apply-table"
                  style="border-collapse: collapse;"
                  border="1"
                  cellpadding="0"
                  cellspacing="0"
                >
                  <tr>
                    <th width="20%">拟除名市场主体提出的陈述、申辩意见</th>
                    <td>
                      {{ detailInfo?.objectionInfo?.opinion || '-' }}
                    </td>
                  </tr>
                  <tr>
                    <th>除名异议的理由</th>
                    <td>
                      {{ detailInfo.objectionInfo?.auditOpinion || '-' }}
                    </td>
                  </tr>
                  <tr>
                    <th>批准除名异议时间</th>
                    <td>
                      {{ detailInfo?.objectionInfo?.removeDate || '' }}
                    </td>
                  </tr>
                  <tr>
                    <th>批准除名异议机关</th>
                    <td>
                      {{ detailInfo?.objectionInfo?.removeOrgName || '-' }}
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </el-form>
          <div class="table-title">
            <img src="../../../assets/images/icon01.png" alt="" style="width:24px;margin-right:10px">
            拟除名异议企业信息
          </div>
          <el-form ref="form" label-width="190px" label-position="right">
            <div class="form">
              <div class="form-body">
                <table
                  width="100%"
                  class="apply-table"
                  style="border-collapse: collapse;"
                  border="1"
                  cellpadding="0"
                  cellspacing="0"
                >
                  <tr>
                    <th width="20%">市场主体名称</th>
                    <th width="15%">统一社会信用代码</th>
                    <th width="15%">法定代表人（负责人、经营者）</th>
                    <th width="50%">住所（经营场所）</th>
                  </tr>
                  <tr v-for="(each, index) in detailInfo.entInfos" :key="'entInfos'+index">
                    <th width="20%">{{ each.entName }}</th>
                    <th width="15%">{{ each.uscc }}</th>
                    <th width="15%">{{ each.lerepName }}</th>
                    <th width="50%">{{ each.address }}</th>
                  </tr>
                </table>
              </div>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="除名异议审批信息" name="除名异议审批信息">
          <div class="table-title">
            <img src="../../../assets/images/icon01.png" alt="" style="width:24px;margin-right:10px">
            除名异议审批信息
          </div>
          <div v-if="detailInfo.historyOpinions.length > 0" class="form">
            <div class="form-body">
              <template v-if="detailInfo.historyOpinions && detailInfo.historyOpinions.length > 0">
                <table
                  width="100%"
                  class="apply-table"
                  style="border-collapse: collapse;"
                  border="1"
                  cellpadding="0"
                  cellspacing="0"
                >
                  <tr v-for="(each,index) in detailInfo.historyOpinions" :key="'historyLog'+index">
                    <th style="width: 20%;">{{ each.label }}</th>
                    <td colspan="3">
                      <span style="display: block;text-indent: 1em;min-height:80px">{{ each.opinioncontent }}</span>
                      <el-col :span="8" :offset="16">
                        <label>{{ each.step }}人：</label>
                        <span>{{ each.handler }}</span>
                        <label
                          style="margin-left: 25px"
                        >{{ each.step }}日期：</label>
                        <span style="display: inline-block">{{ each.handledate }}</span>
                      </el-col>
                    </td>
                  </tr>
                </table>
              </template>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="submit-btn-box">
        <el-button type="primary" @click="$router.go(-1)">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { expelledObjectionGetBiz } from '@/api/除名公告'
export default {
  data() {
    return {
      loading: false,
      bizId: '',
      activeName: '除名异议申请信息',
      detailInfo: {
        objectionInfo: {},
        entInfos: [],
        historyOpinions: []
      }
    }
  },
  mounted() {
    this.bizId = this.$route.query.bizId
    this.loadObjectionInfo()
  },
  methods: {
    loadObjectionInfo() {
      this.loading = true
      expelledObjectionGetBiz(this.bizId).then(res => {
        this.loading = false
        if (res.code === 0) {
          // 处理处办记录
          res.data.historyOpinions.forEach(each => {
            switch (each.opiniontype) {
              case '0':
                each.step = '经办'
                each.label = '经办人意见'
                break
              case '1':
                each.step = '审核'
                each.label = '部门负责人意见'
                break
              case '2':
                each.step = '审批'
                each.label = '经办机构负责人意见'
                break
              case '9':
                each.step = '经办'
                each.label = '经办人意见'
                break
            }
          })
          this.detailInfo = res.data
        }
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss">
.tabs {
  .el-tabs__item {
    font-size: initial;
  }
}
.reasonOptions {
  .el-scrollbar .el-select-dropdown__wrap {
    max-height: 300px;
  }
}
</style>
<style lang="scss" scoped>
/deep/.el-table .warning-row {
  background: #eaf4fe!important;
}
.el-upload{
  /deep/ .el-icon-close-tip{
    display: none!important;
  }
}
.table-title{
  width: 100%;
  margin-top: 10px;
  padding: 15px;
  display: flex;
  align-items: center;
  font-weight: 600;
  background: #fff;
  font-size: $table-title-font-size;
  color:#333;
  border-bottom: 1px solid #E5E5E5;
}
.main-content{
  padding: 10pt;
  font-size: $table-content-font-size;
  .back-btn{
    margin-top: 6px;
    position:absolute;
    right:40pt;
  }
  .content-body{
    background: white;
    border:1PX solid #eee;
  }
  .content-header{
    background: white;
    height:50PX;
    border:1PX solid #eee;
    display: flex;
    align-items: center;
    .title{
      font-weight: 600;
      font-size: 1rem;
    }
  }
  .content-body{
    .tab{
      .tab-title{
        label{
          background: $color-primary;
          display:inline-block;
          color:$color-title-color;
          padding:5px;
        }
      }
    }
    .form{
      margin-bottom: 20pt;
    }
  }
  .apply-table{
    padding:15px;
    margin-bottom: 30px;
    border-color: $color-border;
    tr{
      width:100%
    }
    th,td{
      font-size:$table-title-font-size;
      padding:15px
    }
    th{
      color: #666;
      font-weight: normal;
      background: $color-form-label;
      text-align: $text-algin-right;
      font-size:$table-title-font-size;
    }
    td{
      text-align: $text-algin-left;
    }
    .radio{
      .el-radio__label {
        font-size: unset;
      }
    }
  }
}
.el-row {
  border-left: 1px solid $color-border;
}
.bt0 {
  /deep/.el-form-item__label{
    border-top: 0!important;
  }
  /deep/.el-form-item__content{
    border-top: 0!important;
  }
}
.submit-btn-box {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>
<style lang="scss">
.main-content.abnormal{
  .el-form-item{
    margin-bottom:0;
    background: $color-form-label;
    .el-form-item__label{
      padding-left: 10px;
      border-top: 1px solid $color-border;
      font-size: $table-content-font-size;
    }
    .el-form-item__content{
      background: white;
      padding: 10px;
      font-size: $table-content-font-size;
      border-top: 1px solid $color-border;
      border-right: 1px solid $color-border;
      border-left: 1px solid $color-border;
    }
  }
  .el-form-item:last-child{
    border-bottom: 1px solid $color-border;
  }
  .form-body.history{
    padding:15px;
    border:1px solid $color-border;
  }
  .el-form-item.is-error .custom .el-input__inner{
    border-color:$color-border;
  }
  .el-table-column--selection .cell {
    padding-right: 0px;
  }
  .no {
    padding-left: 0px;
  }
  .el-table_9_column_61.is-left.is-leaf{
    .cell{
      padding-left: 0px;
      padding-right: 0px;
    }
  }
  .el-pagination{
    text-align: right;
  }
  .dialog-box{
    text-align: right;
  }
  .el-textarea.is-disabled .el-textarea__inner{
    color: #1c1e23;
  }
  .el-input__inner{
    margin-bottom: 5px;
  }
  .uploadFileList{
    .el-upload-list__item{
      display: inline-block;
      width: auto;
    }
  }
  .radio{
    .el-radio__label {
      font-size: unset;
    }
    .el-radio__input.is-disabled+span.el-radio__label {
      color: unset;
    }
    .el-radio__input.is-disabled.is-checked .el-radio__inner {
      background-color: #1A77FF;
      border-color: #1A77FF;
    }
  }
}
</style>