为做响应式布局的之前

<template>
  <page-layout>
    <div v-loading="pageLoading">
      <div class="reportDetail">

        <div class="tag">
          <a-tag color="#c69b6a" v-if="report.category">{{typesJsonEn[report.category]}}</a-tag>
        </div>

        <div class="reportHeader">
          <!-- <a-row> -->
            <!-- <a-col :span="16"> -->
              <a-row type="flex" style="margin-top: 10px">
                <a-col :span="4" class="title">标题:</a-col>
                <a-col :span="20">
                  <a-input size="large" v-model="report.name" :disabled="!edit"></a-input>
                </a-col>
              </a-row>

              <a-row v-if="newR" type="flex" style="margin-top: 10px">
                <a-col :span="4" class="title">副标题:</a-col>
                <a-col :span="20">
                  <a-input size="large" v-model="report.subName" :disabled="!edit"></a-input>
                </a-col>
              </a-row>

              <a-row v-if="newR" type="flex" style="margin-top: 10px">
                <a-col :span="4" class="title">核心观点:</a-col>
                <a-col :span="20">
                  <a-textarea v-model="report.summary" :autosize="{ minRows: 4, maxRows: 6 }" :disabled="!edit"/>
                </a-col>
              </a-row>

              <a-row v-if="newR" type="flex" style="margin-top: 10px">
                <a-col :span="4" class="title">行业:</a-col>
                <a-col :span="20">
                  <a-cascader
                    size="large"
                    style="width: 58.33333333%"
                    :disabled="!edit"
                    :options="options"
                    @change="onChange"
                    :loadData="loadData"
                    placeholder="请选择行业"
                    changeOnSelect
                    v-model="selected"
                  />
                </a-col>
              </a-row>

              <a-row style="height:40px;line-height:40px;">
                <a-col :span="16">
                 <span style="padding-left: 8px">
                      <a-icon type="user" :style="{ fontSize: '12px', color: 'gray'}"/>
                      <span style="padding-left: 8px;">{{report.creationUser}}</span>
                      </span>
                  <span style="padding-left: 8px;">
                      <a-icon type="clock-circle" :style="{ fontSize: '12px', color: 'gray' }"/>
                      <span style="padding-left: 8px;">{{report.updateTime | formatDate}}</span>
                    </span>
                </a-col>
                <a-col :span="6">
                  <p @click="newR =!newR" style="display:inline;padding-left: 30px;cursor: pointer;color: #4097f7">
                    {{newR===false? '展开':
                    '收起'}}</p>
                </a-col>
              </a-row>

            <!-- </a-col> -->
            <!-- <a-col :span="1"></a-col> -->

            <!-- <a-col :span="6">
              <div v-if="edit" class="buttons" style="padding-top: 4px">
                <a-button>
                  <a-popconfirm
                    title="取消后内容将无法还原，是否确认取消?"
                    @confirm="cancelConfirm"
                    @cancel="cancelDelete"
                    okText="确认"
                    cancelText="取消"
                  >
                    <a href="#">取消</a>
                  </a-popconfirm>
                </a-button>
                <a-button type="primary" style="margin-left: 8px" @click="updateReport">保存</a-button>
              </div>
              <div v-else class="buttons" style="padding-top: 4px">
                <a-row>
                  <a-button type="primary" @click="editControl">编辑</a-button>
                  <a-popconfirm class="delete" style="margin-left: 8px"
                                title="是否确认删除?"
                                @confirm="confirm"
                                @cancel="cancelDelete"
                                okText="确认"
                                cancelText="取消"
                  >
                    <a-button href="#">删除</a-button>
                  </a-popconfirm>
                  <a-dropdown>
                    <a-button style="margin-left: 8px"> 导出
                      <a-icon type="down"/>
                    </a-button>
                    <a-menu slot="overlay" @click="handleMenuClick">
                      <a-sub-menu title="报告" key="1">
                        <a-menu-item>Word</a-menu-item>
                        <a-menu-item>PDF</a-menu-item>
                      </a-sub-menu>
                      <a-menu-item>数据</a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </a-row>
              </div>
            </a-col> -->

          <!-- </a-row> -->
        </div>

        <div class="extra-shuju">
            <div v-if="edit" class="buttons" style="padding-top: 4px">
              <a-button>
                <a-popconfirm
                  title="取消后内容将无法还原，是否确认取消?"
                  @confirm="cancelConfirm"
                  @cancel="cancelDelete"
                  okText="确认"
                  cancelText="取消"
                >
                  <a href="#">取消</a>
                </a-popconfirm>
              </a-button>
              <a-button type="primary" style="margin-left: 8px" @click="updateReport">保存</a-button>
            </div>
            <div v-else class="buttons" style="padding-top: 4px">
              <a-row>
                <a-button type="primary" @click="editControl">编辑</a-button>
                <a-popconfirm class="delete" style="margin-left: 8px"
                              title="是否确认删除?"
                              @confirm="confirm"
                              @cancel="cancelDelete"
                              okText="确认"
                              cancelText="取消"
                >
                  <a-button href="#">删除</a-button>
                </a-popconfirm>
                <a-dropdown>
                  <a-button style="margin-left: 8px"> 导出
                    <a-icon type="down"/>
                  </a-button>
                  <a-menu slot="overlay" @click="handleMenuClick">
                    <a-sub-menu title="报告" key="1">
                      <a-menu-item>Word</a-menu-item>
                      <a-menu-item>PDF</a-menu-item>
                    </a-sub-menu>
                    <a-menu-item>数据</a-menu-item>
                  </a-menu>
                </a-dropdown>
              </a-row>
            </div>
        </div>

        <div class="reportEditor">
          <a-row style="margin-top: 30px">
            <!-- <a-col :span="16"> -->
              <report-editor v-model="content" :disabled="!edit" ref="editor" :newR="newR"
                             @autoSave="onAutoSave"></report-editor>
            <!-- </a-col> -->
            <!-- <a-col :span="1"></a-col> -->
            <!-- <a-col :span="6"> -->
              <!-- <a-col :span="24">
                <a-checkbox>导出文件中插入目录</a-checkbox>
              </a-col>
              <a-col :span="24" style="margin-top: 48px;">
                <div>
                  <a-anchor v-if="showAnchor"
                            :getCurrentAnchor="header0"
                            :affix="false"
                            :bounds="50"
                            :getContainer="()=>scrollContainer">
                    <a-anchor-link v-for="(item, index) in catalog" v-if="item.level ==1" :key="index"
                                   :href="'#'+ item.id" :title="item.title"/>
                    <a-anchor-link v-else :key="index" :href="'#' + item.id" :title="item.title"
                                   style="margin-left: 30px"/>
                  </a-anchor>
                </div>
              </a-col> -->
            <!-- </a-col> -->
          </a-row>

          <a-row>
            <a-col :span="16" v-if="autoSaving">
              <span style="float: right;color: gray;font-size: 12px;margin-top: 5px">自动保存中...</span>
            </a-col>
          </a-row>
        </div>
        <div class="export-dot">
          <a-col :span="24">
            <a-checkbox>导出文件中插入目录</a-checkbox>
          </a-col>
          <a-col :span="24" style="margin-top: 48px;">
            <div>
              <a-anchor v-if="showAnchor"
                        :getCurrentAnchor="header0"
                        :affix="false"
                        :bounds="50"
                        :getContainer="()=>scrollContainer">
                <a-anchor-link v-for="(item, index) in catalog" v-if="item.level ==1" :key="index"
                               :href="'#'+ item.id" :title="item.title"/>
                <a-anchor-link v-else :key="index" :href="'#' + item.id" :title="item.title"
                               style="margin-left: 30px"/>
              </a-anchor>
            </div>
          </a-col>
        </div>

      </div>
    </div>
  </page-layout>
</template>

<script>
  import PageLayout from '../../layouts/PageLayout'
  import ReportEditor from './Editor'
  import config from '../../config'
  //API
  import {getReportDetail, updateReport, reportDelete, exportReportWord, exportReportPdf} from '@/api/report.js'
  import {getIndustrysLevel1, getIndustrysLevel2, getIndustrysLevel3} from '@/api/expert-domain.js'


  import moment from 'moment';
  import ColspanRowspan from "ant-design-vue/es/vc-table/demo/colspan-rowspan";

  const typesJsonEn = {
    'dataProducts': '数据产品',
    'subject': '课题',
    'companyReviews': '公司点评',
    'companyDepth': '公司深度',
    'companyResearch': '公司调研',
    'industryReviews': '行业点评',
    'industryDepth': '行业深度',
    'industryWeekly': '行业周报',
    'industryMonthly': '行业月报'
  };
  export default {
    name: 'reportDetail',
    components: {
      ColspanRowspan,
      PageLayout,
      ReportEditor
    },
    data () {
      return {
        typesJsonEn: typesJsonEn,
        autoSaving: false,
        edit: false,
        newR: true,
        reportId: this.$route.query.id,
        pageLoading: false,
        checked: false,
        disabled: false,
        header0: '',
        report: {},
        content: `<p></p>`,
        options: [],
        level: [],
        level2: [],
        level3: [],
        selected: [],
        selectedData: [],
        showAnchor: false,
        selectedOptions: [],
        catalog: [],
        scrollContainer: null,
        targetOffset: undefined,
      }
    },
    props: {},
    created () {
      console.log(this.$route)
      if (this.$route.query.edit === 'true') {
        this.disabled = false
        this.edit = true
        this.checked = true
      } else {
        this.disabled = true
      }
      if (this.$route.query.newR === 'false') {
        this.newR = false
      }
      getIndustrysLevel1().then((res) => {
        let arr = res.data
        for (let i = 0; i < arr.length; i++) {
          this.options.push({
            value: arr[i].id,
            label: arr[i].name,
            isLeaf: false,
          })
        }
      })
      this.init()
    },
    filters: {
      formatDate (val) {
        if (!val) return ''
        return moment(val).format('YYYY-MM-DD')
      }
    },
    watch: {
      content () {
        this.generateCatalog();
      },
    },
    mounted () {
      this.generateCatalog();
      let obj = document.getElementsByClassName("exception")[0];
      // obj.setAttribute('id', 'editor');
      // obj.setAttribute('style', 'overflow-y:scroll');
      obj.style.minWidth = '770px'
      console.log(obj)
    },
    methods: {
      async onAutoSave (val) {
        let that = this;
        this.report.html = this.content
        await updateReport(this.reportId, this.report);
        this.autoSaving = true;
        setTimeout(function () {
          that.autoSaving = false
        }, 4000)
      },
      cancelConfirm () {
        this.edit = !this.edit
        getReportDetail(this.reportId).then((res) => {
          this.report = res.data
          if (this.report.content) {
            this.content = `${this.report.content}`
          } else {
            this.content = `<p></p>`
          }
          if (this.$refs.editor) {
            this.$refs.editor.quill.pasteHTML(this.content)
          }
        })
        this.selected = this.selectedData
      },
      init () {
        getReportDetail(this.reportId).then((res) => {
          this.report = res.data
          if (this.report.industry1 != null) {
            getIndustrysLevel2(this.report.industry1).then((res) => {
              this.level2 = res.data
              this.options.map(item => {
                if (item.value == this.report.industry1) {
                  let children = []
                  for (let i = 0; i < this.level2.length; i++) {
                    children.push({
                      value: this.level2[i].id,
                      label: this.level2[i].name,
                      isLeaf: false,
                    })
                  }
                  item.children = children
                }
              })
              this.options = [...this.options]
            })
          }
          if (this.report.industry2 != null && this.report.industry2 != '') {
            getIndustrysLevel3(this.report.industry2).then((res) => {
              this.level3 = res.data
              this.options.map(item => {
                if (item.value == this.report.industry1) {
                  item.children.map(i => {
                    if (i.value == this.report.industry2) {
                      let children = []
                      for (let i = 0; i < this.level3.length; i++) {
                        children.push({
                          value: this.level3[i].id,
                          label: this.level3[i].name,
                          isLeaf: false,
                        })
                      }
                      i.children = children
                    }
                  })
                }
              })
              this.options = [...this.options]
            })
          }
          this.selected.push(this.report.industry1, this.report.industry2, this.report.industry3)
          this.selectedData = this.selected
          if (this.report.content) {
            this.content = `${this.report.content}`
          } else {
            this.content = `<p></p>`
          }
          if (this.$refs.editor) {
            this.$refs.editor.quill.pasteHTML(this.content)
          }
          this.showAnchor = true;
          this.scrollContainer = document.querySelector('.ql-editor');
          this.header0 = '#header-0';

        })
      },
      generateCatalog () {
        let content = document.querySelector(".ql-editor");
        const nodes = ["H1", "H2"];
        let titles = [];

        content.childNodes.forEach((e, index) => {
          if (nodes.includes(e.nodeName)) {
            const id = "header-" + index;
            e.setAttribute("id", id);
            titles.push({
              id: id,
              title: e.innerText,
              level: Number(e.nodeName.substring(1, 2)),
              nodeName: e.nodeName
            });
          }
        });
        this.catalog = titles;
        console.log(this.catalog)
      },
      cancelDelete () {
        //this.$message.info('操作已取消！');
      },
      editControl () {
        this.edit = !this.edit
        this.disabled = !this.disabled
      },
      updateReport () {
        this.checked = false
        this.edit = !this.edit
        this.report.html = this.content
        //console.log(this.report)
        this.generateCatalog()
        updateReport(this.reportId, this.report).then(() => {
          this.$message.success('报告已保存！')
          this.startPageLoad()
          getReportDetail(this.reportId).then((res) => {
            this.report = res.data
            //console.log(this.report)
            this.content = `${this.report.content}`
          })
        })
      },
      confirm (e) {
        reportDelete(this.reportId).then(() => {
          //this.$message.success('报告已删除！')
          console.log(this.$route.fullPath)
          window.Vue.$emit('remove', this.$route.fullPath)
          this.$router.push('/report')
        })
      },
      loadData (selectedOptions) {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;
        if (this.level.length == 1) {

          getIndustrysLevel2(targetOption.value).then((res) => {
            targetOption.loading = false;
            let arr = res.data
            let children = []
            for (let i = 0; i < arr.length; i++) {
              children.push({
                value: arr[i].id,
                label: arr[i].name,
                isLeaf: false,
              })
            }
            targetOption.children = children
            this.options = [...this.options];
          })
        } else if (this.level.length == 2) {
          getIndustrysLevel3(targetOption.value).then((res) => {
            targetOption.loading = false;
            let arr = res.data
            let children = []
            for (let i = 0; i < arr.length; i++) {
              children.push({
                value: arr[i].id,
                label: arr[i].name,
                isLeaf: true,
              })
            }
            targetOption.children = children
            this.options = [...this.options];
          })
        } else {
          targetOption.loading = false;
        }
      },
      onChange (value, selectedOptions) {
        this.level = value
        this.selectedOptions = selectedOptions
        if (this.level.length == 1) {
          this.report.industry1 = this.selectedOptions[0].value
          this.report.industry2 = ''
          this.report.industry3 = ''
        }
        if (this.level.length == 2) {
          this.report.industry1 = this.selectedOptions[0].value
          this.report.industry2 = this.selectedOptions[1].value
          this.report.industry3 = ''
        }
        if (this.level.length == 3) {
          this.report.industry1 = this.selectedOptions[0].value
          this.report.industry2 = this.selectedOptions[1].value
          this.report.industry3 = this.selectedOptions[2].value
        }
      },
      saveToWord (title) {
        let link = document.createElement('a');
        link.download = `${title}`;
        link.href = `${config.smartResearchFileUrl}/${title}`;
        link.click();
      },
      handleMenuClick (e) {
        if (e.key == '1-menu-item_0') {
          exportReportWord(this.reportId).then((res) => {
            let data = res.data
            this.saveToWord(data)
          })
        } else if (e.key == '1-menu-item_1') {
          exportReportPdf(this.reportId).then((res) => {
            let data = res.data
            // this.saveToWord(data)
          })
        } else if (e.key == 'item_1') {
          alert("数据")
        }
      },
      startPageLoad () {
        let that = this;
        that.pageLoading = true
        setTimeout(function () {
          that.pageLoading = false
        }, 2000)
      },
      moment
    }
  }
</script>

<style lang="less" scoped>
  .exception {
    min-height: 770px;
  }
  .reportDetail {
    position: relative;
    background: #fff;
	min-width: 446px;
    // min-width: 1300px;
    .tag {
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .reportHeader {
      margin: 0px 0px 0px 40px;
      padding-top: 20px;
      border-bottom: 1px solid #e8e8e8;
      .title {
      //   display: block;
        font-weight: bold;
        line-height: 40px;
      //   padding-left: 10px;
      //   width: 120px;
        height: 40px;
        font-size: 16px;
      }
      .buttons {
        .ant-btn {
          margin-bottom: 8px;
        }
      }
    }
    .reportEditor {
      margin: 30px 0px 0px 40px;
      height: 680px;
      .catalog {
        ul {
          list-style-type: disc;
        }
      }
    }
  }
</style>