aiccs/src/views/forceNotice/inclusion/doc.vue

<template>
  <el-dialog
    title="拟强制注销公告"
    :visible.sync="visible"
    width="1200px"
    top="153px"
  >
    <div v-if="visible">
      <el-tabs ref="docel" type="border-card" :default-active-first="true" @tab-click="handleClick">
        <el-tab-pane label="拟强制注销公告" name="拟强制注销公告" class="doc-preview">
          <div class="title">{{ data.repairMap.areaName }}</div>
          <div class="title">拟强制注销公司登记公告</div>
          <div class="content">
            <div v-for="item in (data.repairMap.content||'').split('\n')" :key="item" contenteditable>
              <span v-html="item" />
            </div>
          </div>
          <div class="footer">
            <div class="a" contenteditable>（{{ data.repairMap.areaName }}公章）</div>
            <div class="date">{{ parseTime(data.repairMap.writTime, 'yyyy年MM月dd日') }}</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="拟强制注销公告审批表" name="拟强制注销公告审批表" class="doc-preview">
          <div class="title">拟强制注销公告审批表</div>
          <table border="1" cellspacing="0">
            <tr>
              <td colspan="1">主体名称</td>
              <td colspan="3">{{ data.entName }}</td>
            </tr>
            <tr>
              <td colspan="1">统一社会信用代码/注册号</td>
              <td colspan="3">{{ data.uniscId }}</td>
            </tr>
            <tr>
              <td colspan="1">事实和理由</td>
              <td colspan="3">
                <div class="td-content">
                  {{ data.lostCreditExplain }}
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="1">初审意见</td>
              <td colspan="3">
                <div
                  v-for="item in (data.opinion || []).filter((item)=>{return item.opinionType === 'handle' || item.opinionType === '经办'})"
                  :key="item.opinionId"
                  class="option"
                >
                  <span class="opinionContent">{{ item.opinionContent }}</span>
                  <span class="handler">{{ item.handler }}</span>
                  <span class="laupTime">{{ parseTime(item.handelDate, 'yyyy年MM月dd日') }}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="1">审核意见</td>
              <td colspan="3">
                <div
                  v-for="item in (data.opinion || []).filter((item)=>{return item.opinionType === 'examine' || item.opinionType === '审核'})"
                  :key="item.opinionId"
                  class="option"
                >
                  <span class="opinionContent">{{ item.opinionContent }}</span>
                  <span class="handler">{{ item.handler }}</span>
                  <span class="laupTime">{{ parseTime(item.handelDate, 'yyyy年MM月dd日') }}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="1">审批意见</td>
              <td colspan="3">
                <div
                  v-for="item in (data.opinion || []).filter((item)=>{return item.opinionType === 'approve' || item.opinionType === '审批'})"
                  :key="item.opinionId"
                  class="option"
                >
                  <span class="opinionContent">{{ item.opinionContent }}</span>
                  <span class="handler">{{ item.handler }}</span>
                  <span class="laupTime">{{ parseTime(item.handelDate, 'yyyy年MM月dd日') }}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="1">备注</td>
              <td colspan="3">
                <div class="td-content">{{ data.remark }}</div>
              </td>
            </tr>
          </table>
        </el-tab-pane>
      </el-tabs>
      <div v-if="name === '拟强制注销公告'" style="font-weight: bold; font-size: 22px; margin-top: 10px">正文内容可编辑</div>
    </div>
    <div slot="footer">
      <el-button type="primary" plain @click="visible = false">取消</el-button>
      <el-button type="primary" @click="downloadDoc">打印</el-button>
    </div>
  </el-dialog>

</template>

<script>
import { printElement, parseTime } from '@/utils'

export default {
  data() {
    return {
      parseTime,
      visible: false,
      data: {},
      name: '拟强制注销公告'
    }
  },
  methods: {
    handleClick(tab, event) {
      this.name = tab.name
    },
    open(data) {
      this.visible = true
      this.data = data
    },
    downloadDoc() {
      this.visible = false
      printElement(this.$refs.docel.$el.children[1], {
        '.doc-preview': {
          height: 'unset!important'
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.doc-preview {
  height: calc(100vh - 400px);
  overflow: auto;
  font-size: 22px;
  line-height: 48px;
  padding: 0 120px;
  cursor: default;

  *[contenteditable] {
    cursor: text;
  }

  .title {
    font-size: 24px;
    text-align: center;
    font-weight: bold;
  }

  .writsNo {
    font-size: 22px;
    text-align: center;
  }

  .content {
    text-indent: 44px;
    margin-bottom: 80px;
  }

  .footer {
    text-align: right;
  }

  .empty-input {
    display: inline-block;
    width: 120px;
    border-bottom: 2px solid #000;
    position: relative;
    bottom: -2px;
    margin-right: 2px;
  }

  table {
    width: 100%;
    table-layout: fixed;
    font-size: 22px;
    line-height: 48px;

    td {
      text-align: center;
      padding: 10px 15px;

      .date {
        text-align: right;

        span {
          margin: 0 15px;
        }
      }

      .option {
        text-align: left;
        display: flex;
        line-height: 24px;

        .opinionContent {
          margin-right: 10px;
        }

        .handler {
          margin-left: auto;
          margin-right: 20px;
          flex-shrink: 0;
        }

        .laupTime {
          flex-shrink: 0;
        }

        & + .option {
          margin-top: 15px;
        }
      }
    }
  }
}
</style>