foton-laws-system-front/src/pages/regulatoryRepository/standardTranslationAcquisitionRequest/components/detailModal.vue

<template>
  <el-drawer
    title="查看标准/译文获取申请"
    :visible.sync="visible"
    :direction="direction"
    :append-to-body="true"
    :wrapper-closable="false"
    :before-close="handleClose"
    size="40%"
  >
    <loading :loading="showLoading">加载中...</loading>
    <el-form ref="addFormRef" style="padding-bottom: 80px" :model="StandardApplyForEO" class="label-input-form detail-modal-form">
      <el-row class="formLine">
        <el-col :span="12">
          <el-form-item label="申请单位" label-width="100px" class="add-form-item">
            <div class="content">{{ StandardApplyForEO.applyForUnitName ? StandardApplyForEO.applyForUnitName : '--' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请人" label-width="100px" class="add-form-item">
            <div class="content">{{ StandardApplyForEO.applyForUserName ? StandardApplyForEO.applyForUserName : '--' }}</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="formLine">
        <el-col :span="12">
          <el-form-item label="类型" label-width="100px" class="add-form-item">
            <div class="content">{{ StandardApplyForEO.typeShow ? StandardApplyForEO.typeShow : '--' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标准类型" label-width="100px" class="add-form-item">
            <div class="content">{{ StandardApplyForEO.standTypeShow ? StandardApplyForEO.standTypeShow : '--' }}</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="formLine">
          <el-col :span="12">
            <el-form-item label="标准类别" label-width="100px" class="add-form-item">
              <div class="content">{{ StandardApplyForEO.standLbShow ? StandardApplyForEO.standLbShow : '--' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标准编号" label-width="100px" class="add-form-item">
              <div class="content">{{ StandardApplyForEO.standNumShow ? StandardApplyForEO.standNumShow : '--' }}</div>
            </el-form-item>
          </el-col>
      </el-row>

      <el-row class="formLine">
        <el-col :span="12">
          <el-form-item label="标准年份" label-width="100px" class="add-form-item">
            <div class="content">{{ StandardApplyForEO.standYear ? StandardApplyForEO.standYear : '--' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="需求时间" label-width="100px" class="add-form-item">
            <div class="content">{{ StandardApplyForEO.requiredTime ? StandardApplyForEO.requiredTime : '--' }}</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="formLine">
        <el-col :span="24">
          <el-form-item label="标准名称" label-width="100px" class="add-form-item">
            <div class="content">{{ StandardApplyForEO.standName ? StandardApplyForEO.standName : '--' }}</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="formLine">
        <el-col :span="12">
          <el-form-item label="原语言" label-width="100px" class="add-form-item">
            <div class="content">{{ StandardApplyForEO.sourceLanguage ? StandardApplyForEO.sourceLanguage : '--' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目标语言" label-width="100px" class="add-form-item">
            <div class="content">{{ StandardApplyForEO.targetLanguage ? StandardApplyForEO.targetLanguage : '--' }}</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="formLine">
        <el-col :span="24">
          <el-form-item label="理由" label-width="100px" class="add-form-item reasonContent">
            <div class="content">{{ StandardApplyForEO.reason ? StandardApplyForEO.reason : '--' }}</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col v-show="StandardApplyForEO.status !== 'pendingApproval' && StandardApplyForEO.status !== 'Staging'" :span="12" class="formLine">
          <el-form-item label="审批人" label-width="100px" class="add-form-item">
            <div class="content">{{ StandardApplyForEO.approveUserName ? StandardApplyForEO.approveUserName : '--' }}</div>
          </el-form-item>
        </el-col>
        <el-col v-show="StandardApplyForEO.status !== 'pendingApproval' && StandardApplyForEO.status !== 'Staging'" :span="12" class="formLine">
          <el-form-item label="审批时间" label-width="100px" class="add-form-item">
            <div class="content">{{ StandardApplyForEO.approveTime ? StandardApplyForEO.approveTime : '--' }}</div>
          </el-form-item>
        </el-col>
        <el-col v-show="StandardApplyForEO.status !== 'pendingApproval' && StandardApplyForEO.status !== 'Staging' && StandardApplyForEO.status !== 'pass'" :span="24" class="formLine">
          <el-form-item label="驳回原因" label-width="100px" class="add-form-item">
            <div class="content">{{ StandardApplyForEO.refuseCause ? StandardApplyForEO.refuseCause : '--' }}</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <div class="drawer-footer">
        <el-button class="common-button-default" @click="visible=false">关闭</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'AddModal',
  data () {
    return {
      visible: false,
      showLoading: false,
      direction: 'rtl',
      StandardApplyForEO: [],
    }
  },
  methods: {
    handleClose () {
      this.visible = false
    },
    showModal (item) {
      this.visible = true
      this.$nextTick(() => {
        this.StandardApplyForEO = []
        this.StandardApplyForEO = item
      })
    },
  }
}
</script>

<style scoped lang="less">
.label-input-form{
  padding: 0 19px;
}
.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0 20px;
  height: 70px;
  line-height: 69px;
  border-top: 1px solid #e8e8e8;
  text-align: right;
  background: #fff;
  z-index: 999;
}
.content{
  display: flex;
  align-items: center;
  min-height: 50px;
  overflow: auto;
}
.add-form-item{
  border-bottom: none;
}
.formLine{
  border-bottom: 1px dashed #e5e5e5
}
</style>