yxk-electronic-archives/src/views/collectReorganizi/collectionLibrary/module/archivesInfo/index.vue

<template>
  <el-dialog class="detail-dialog" :title="detailTitle" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="archivesInfoVisible" :before-close="handleClose">
    <!-- <span class="dialog-right-top" />
    <span class="dialog-left-bottom" /> -->
    <div class="setting-dialog">
      <div class="detail-tab tab-content">
        <!-- tab -->
        <ul class="tab-nav">
          <li :class="{'active-tab-nav': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li>
          <li v-if="isHasFile" :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">原文列表</li>
          <li v-if="!isHasFile && isTitleType === 3" :class="{'active-tab-nav': archivesTabIndex == 5}" @click="changeActiveTab(5)">文件列表</li>
          <li v-if="!isHasFile && isTitleType === 2" :class="{'active-tab-nav': archivesTabIndex == 5}" @click="changeActiveTab(5)">案卷列表</li>
          <li :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li>
          <li v-if="isFourTest" :class="{'active-tab-nav': archivesTabIndex == 3}" @click="changeActiveTab(3)">四性检测</li>
          <li v-if="isFourTest && isHasFile" :class="{'active-tab-nav': archivesTabIndex == 4}" @click="changeActiveTab(4)">操作记录</li>
        </ul>
        <!-- 基本信息 -->
        <div v-if="archivesTabIndex==0" class="base-info item-content">
          <el-row>
            <el-col v-for="(item,index) in archivesDetailsData" :key="index" :span="item.isLine ? 24 : 12" class="base-info-item">
              <span>{{ item.fieldCnName }}：</span>
              <p :style="{ width: ( item.editLength ? item.editLength+'px' : '' ), flex: ( !item.editLength ? 1 : '' )}">{{ item.context }}</p>
            </el-col>
          </el-row>
        </div>
        <!-- 附件 -->
        <UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :selected-category="selectedCategory" :arc-id="arcId" />
        <!-- 元数据 -->
        <div v-if="archivesTabIndex==2" class="metadata-cont item-content">
          <pre v-highlightjs="xml_show">
            <code class="highlight_s">
              {[xml_show]}
            </code>
          </pre>
        </div>
        <FourTestInfo v-if="archivesTabIndex===3" />
        <HandleInfo v-if="archivesTabIndex===4" />
        <ArchivesListModule v-show="archivesTabIndex===5" ref="archivesListModuleRef" :selected-category="selectedCategory" :is-title-type="isTitleType" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { form } from '@crud/crud'
import { FetchDetailsById, FetchArchivesMetadata } from '@/api/collect/collect'
import UploadFile from '../uploadFile/index'
import FourTestInfo from '../fourTestInfo/index'
import HandleInfo from '../handleInfo/index'
export default {
  name: 'ArchivesInfo',
  components: { UploadFile, FourTestInfo, HandleInfo },
  mixins: [
    form({})
  ],
  props: {
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    },
    arcId: {
      type: String,
      default: function() {
        return ''
      }
    },
    isTitleType: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      detailTitle: '',
      isHasFile: false, // 卷内/文件才有附件
      isFourTest: false,
      isDetailsInfo: false, // 项目不显示最下面5行基本信息
      archivesInfoVisible: false,
      archivesTabIndex: 0,
      archivesDetailsData: [],
      archivesDetailsMetadata: [],
      xml_show: null
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    getDetial(collectLevel, rowId) {
      const params = {
        'categoryId': this.selectedCategory.id,
        'categoryLevel': collectLevel,
        'id': rowId
      }
      FetchDetailsById(params).then(data => {
        this.archivesDetailsData = data.showFiled
          .filter(field => field.fieldName in data.echo)
          .map(field => ({
            editLength: field.editLength,
            isLine: field.isLine,
            fieldCnName: field.fieldCnName,
            fieldName: field.fieldName,
            context: data.echo[field.fieldName]
          }))
      })
      const metaDataParams = {
        'categoryId': this.selectedCategory.id,
        'categoryLevel': collectLevel,
        'archivesId': rowId
      }
      FetchArchivesMetadata(metaDataParams).then(data => {
        this.archivesDetailsMetadata = data
      })
    },
    setXml() {
      const xmlstr = this.archivesDetailsMetadata
      this.xml_show = this.showXml(xmlstr)
    },
    changeActiveTab(index) {
      this.archivesTabIndex = index
      if (this.archivesTabIndex === 2) {
        this.setXml()
      } else if (this.archivesTabIndex === 5) {
        if (this.isTitleType === 2) {
          this.$refs.archivesListModuleRef.detailLevel = 2
        } else if (this.isTitleType === 3) {
          this.$refs.archivesListModuleRef.detailLevel = 3
        } else {
          this.$refs.archivesListModuleRef.detailLevel = 4
        }
        this.$refs.archivesListModuleRef.parentId = this.arcId
        this.$refs.archivesListModuleRef.isDetail = true
        this.$refs.archivesListModuleRef.getViewTable()
      }
      this.$nextTick(() => {
        if (this.$refs.uploadFile) {
          this.$refs.uploadFile.tableData = []
          this.$refs.uploadFile.getFileList()
        }
      })
    },
    // 删除 - 关闭
    handleClose(done) {
      this.archivesInfoVisible = false
      localStorage.removeItem('collectLevelList')
      done()
    },
    // xml格式化
    showXml(str) {
      var that = this
      var text = str
      // 去掉多余的空格
      text =
        '\n' +
        text
          .replace(/(<\w+)(\s.*?>)/g, function($0, name, props) {
            return name + ' ' + props.replace(/\s+(\w+=)/g, ' $1')
          })
          .replace(/>\s*?</g, '>\n<')
      // 把注释编码
      text = text
        .replace(/\n/g, '\r')
        .replace(/<!--(.+?)-->/g, function($0, text) {
          var ret = '<!--' + escape(text) + '-->'
          return ret
        })
        .replace(/\r/g, '\n')

      // 调整格式
      var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/gm
      var nodeStack = []
      var output = text.replace(rgx, function(
        $0,
        all,
        name,
        isBegin,
        isCloseFull1,
        isCloseFull2,
        isFull1,
        isFull2
      ) {
        var isClosed =
          isCloseFull1 === '/' ||
          isCloseFull2 === '/' ||
          isFull1 === '/' ||
          isFull2 === '/'
        var prefix = ''
        if (isBegin === '!') {
          prefix = that.getPrefix(nodeStack.length)
        } else {
          if (isBegin !== '/') {
            prefix = that.getPrefix(nodeStack.length)
            if (!isClosed) {
              nodeStack.push(name)
            }
          } else {
            nodeStack.pop()
            prefix = that.getPrefix(nodeStack.length)
          }
        }
        var ret = '\n' + prefix + all
        return ret
      })
      var outputText = output.substring(1)
      // 把注释还原并解码，调格式
      outputText = outputText
        .replace(/\n/g, '\r')
        .replace(/(\s*)<!--(.+?)-->/g, function($0, prefix, text) {
          if (prefix.charAt(0) === '\r') prefix = prefix.substring(1)
          text = unescape(text).replace(/\r/g, '\n')
          var ret =
            '\n' + prefix + '<!--' + text.replace(/^\s*/gm, prefix) + '-->'
          return ret
        })
      outputText = outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n')
      return outputText
    },
    getPrefix(prefixIndex) {
      var span = '    '
      var output = []
      for (var i = 0; i < prefixIndex; ++i) {
        output.push(span)
      }
      return output.join('')
    }
  }
}
</script>

<style lang="scss" scoped>
.base-info,
.metadata-cont{
  background-color: #F6F8FC;

}
// 档案详情
.base-info{
  padding: 20px 0;
  overflow: hidden;
  overflow-y: scroll;
  .base-info-item{
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    color: #545B65;
    span{
      display: block;
      width: 120px;
      margin-right: 5px;
      text-align: right;
      color: #0C0E1E;
    }
  }
}

code.hljs {
  font-size: 12px;
  color: #0C0E1E !important;
  height: 530px !important;
}
::v-deep .hljs-name{
  color: #0C0E1E !important;
}
.base-info .base-info-item span.el-tag{
  width: auto;
  color: #fff;
}

.detail-tab .tab-nav{
  margin: 10px 0 18px 0;
}
</style>