update 文档拆分-查看

src/components/StandardResolutionSheet.vue

@@ -1,75 +1,93 @@
 <template>
-  <div class="sheet-box">
-    <!--标准目录-->
-    <div class="standard-catalogue part-common"
-         :class="isCatalogueExpand ? 'expand-catalogue' : 'no-expand-catalogue'">
-      <div class="control-standard-catalogue-expand" @click="expandCatalogue">
-        <a-icon :type="isCatalogueExpand ? 'left' : 'right'" />
-      </div>
-      <div class="part-title" v-show="isCatalogueExpand">{{ $t('standardRegulationLibrary.standardCatalogue') }}</div>
-      <div class="has-title-part-content" v-show="isCatalogueExpand">
-        <a-tree :tree-data="treeData" :selected-keys="selectedTreeKeys" @select="handleTreeSelected">
-          <a-icon slot="switcherIcon" type="down" :style="{ fontSize: '12px', color: '#103770' }" />
-          <template slot="title" slot-scope="{termsNum}">
-            <span :style="termsNum && termsNum.indexOf('.')===-1?'font-weight: 600;':''">{{ termsNum + '' + termsName }}</span>
-          </template>
-        </a-tree>
-      </div>
-    </div>
-    <!--标准内容-->
-    <div class="sheet-container part-ml">
-      <!--标准名称-->
-      <div class="standard-name">
-        <a-tooltip placement="topLeft">
-          <template #title>
-            {{}}
-          </template>
-          <span></span>
-        </a-tooltip>
-        <a-button type="link" :icon="isContainerExpand ? 'fullscreen-exit' : 'fullscreen'" @click="handleContainerExpand">
-          {{ isContainerExpand ? $t('putAway') : $t('open') }}
-        </a-button>
-      </div>
-      <!--条文内容-->
-      <div class="standard-content"></div>
-    </div>
-    <!--条文标签-->
-    <div class="clause-label part-ml part-common" :class="{'hide-clause-label': !showClauseLabel || isContainerExpand}">
-      <div class="part-title">{{ $t('standardRegulationLibrary.clauseLabel') }}</div>
-      <div class="has-title-part-content">
-        <div class="clause-item" v-for="(clause, index) in clauseField" :key="index">
-          <label>{{ clause.title }}</label>
-          <span></span>
+  <a-spin :spinning="loading">
+    <div class="sheet-box">
+      <!--标准目录-->
+      <div class="standard-catalogue part-common"
+           :class="isCatalogueExpand ? 'expand-catalogue' : 'no-expand-catalogue'">
+        <div class="control-standard-catalogue-expand" @click="expandCatalogue">
+          <a-icon :type="isCatalogueExpand ? 'left' : 'right'" />
+        </div>
+        <div class="part-title" v-show="isCatalogueExpand">{{ $t('standardRegulationLibrary.standardCatalogue') }}</div>
+        <div class="has-title-part-content" v-show="isCatalogueExpand">
+          <a-tree :tree-data="treeData"
+                  :selected-keys="selectedTreeKeys"
+                  @select="handleTreeSelected"
+                  :replaceFields="{children: 'children', key: 'id'}">
+            <a-icon slot="switcherIcon" type="down" :style="{ fontSize: '12px', color: '#103770' }" />
+            <template slot="title" slot-scope="{name, itemName}">
+              <span :style="name && name.indexOf('.')===-1?'font-weight: 600;':''">{{ `${name} ${itemName || ''}` }}</span>
+            </template>
+          </a-tree>
         </div>
       </div>
-    </div>
-    <!--条文、条文标签切换-->
-    <div class="clause-label-change part-ml part-common" :class="{'no-expand-clause-label': !isClauseLabelExpand}">
-      <div class="control-clause-label-expand" @click="expandClauseLabel">
-        <a-icon :type="isClauseLabelExpand ? 'right' : 'left'" />
-      </div>
-      <!--条文-->
-      <a-tooltip placement="left">
-        <template #title>{{ $t('docTool.split.article') }}</template>
-        <div class="clause-label-change-item" :class="{'clause-label-change-item-selected': !showClauseLabel}" @click="handleClauseChange(false)">
-          <i class="iconfont icon-ios-list-box" />
-          <span v-show="isClauseLabelExpand">{{ $t('docTool.split.article') }}</span>
+      <!--标准内容-->
+      <div class="sheet-container part-ml">
+        <!--标准名称-->
+        <div class="standard-name">
+          <a-tooltip placement="topLeft">
+            <template #title>
+              {{ spiltInfo.serialNumber }}
+            </template>
+            <span> {{ spiltInfo.serialNumber }}《{{ spiltInfo.fileName }}》</span>
+          </a-tooltip>
+          <a-button type="link" :icon="isContainerExpand ? 'fullscreen-exit' : 'fullscreen'" @click="handleContainerExpand">
+            {{ isContainerExpand ? $t('putAway') : $t('open') }}
+          </a-button>
         </div>
-      </a-tooltip>
+        <!--条文内容-->
+        <div class="standard-content">
+          <div class="clause-content-item" v-for="clause in clauseContentList" :key="clause.id">
+            <div class="clause-content-item-title">{{ clause.item_num }} {{ clause.item_title }}</div>
+            <div class="clause-content-item-content"
+                 :class="{'clause-content-item-content-hight': clause.menu_id === hightMenuId}"
+                 v-html="clause.item_content"></div>
+          </div>
+        </div>
+      </div>
       <!--条文标签-->
-      <a-tooltip placement="left">
-        <template #title>{{ $t('docTool.split.clauseLabel') }}</template>
-        <div class="clause-label-change-item" :class="{'clause-label-change-item-selected': showClauseLabel}" @click="handleClauseChange(true)">
-          <i class="iconfont icon-biaoqian-mianxing" />
-          <span v-show="isClauseLabelExpand">{{ $t('docTool.split.clauseLabel') }}</span>
+      <div class="clause-label part-ml part-common" :class="{'hide-clause-label': !showClauseLabel || isContainerExpand}">
+        <div class="part-title">{{ $t('standardRegulationLibrary.clauseLabel') }}</div>
+        <div class="has-title-part-content">
+          <template v-for="clause in clauseField">
+            <div class="clause-item" v-if="!clauseLabelHideField.includes(clause.dbFieldName)" :key="clause.id">
+              <label>{{ clause.dbFieldTxt }}</label>
+              <div class="clause-item-content" v-html="clauseLabelInfo[clause.dbFieldName]"></div>
+            </div>
+          </template>
         </div>
-      </a-tooltip>
+      </div>
+      <!--条文、条文标签切换-->
+      <div class="clause-label-change part-ml part-common" :class="{'no-expand-clause-label': !isClauseLabelExpand}">
+        <div class="control-clause-label-expand" @click="expandClauseLabel">
+          <a-icon :type="isClauseLabelExpand ? 'right' : 'left'" />
+        </div>
+        <!--条文-->
+        <a-tooltip placement="left">
+          <template #title>{{ $t('docTool.split.article') }}</template>
+          <div class="clause-label-change-item"
+               :class="{'clause-label-change-item-selected': !showClauseLabel}"
+               @click="handleClauseChange(false)">
+            <i class="iconfont icon-ios-list-box" />
+            <span v-show="isClauseLabelExpand">{{ $t('docTool.split.article') }}</span>
+          </div>
+        </a-tooltip>
+        <!--条文标签-->
+        <a-tooltip placement="left">
+          <template #title>{{ $t('docTool.split.clauseLabel') }}</template>
+          <div class="clause-label-change-item"
+               :class="{'clause-label-change-item-selected': showClauseLabel}"
+               @click="handleClauseChange(true)">
+            <i class="iconfont icon-biaoqian-mianxing" />
+            <span v-show="isClauseLabelExpand">{{ $t('docTool.split.clauseLabel') }}</span>
+          </div>
+        </a-tooltip>
+      </div>
     </div>
-  </div>
+  </a-spin>
 </template>
 
 <script>
-import '@assets/less/common.less'
+import { getDocSplitEditForm, previewDocSplit } from '@api/documentToolApi'
 
 export default {
   name: 'StandardResolutionSheet',
@@ -77,111 +95,75 @@ export default {
     return {
       showClauseLabel: true, // 是否展示条文标签
       // 条文标签字段
-      clauseField: [
-        // 条文号
-        {
-          title: this.$t('standardRegulationLibrary.clauseNumber'),
-          fieldName: ''
-        },
-        // 条文标题
-        {
-          title: this.$t('standardRegulationLibrary.clauseTitle'),
-          fieldName: ''
-        },
-        // 法规要求类型
-        {
-          title: this.$t('standardRegulationLibrary.regulatoryRequirementsType'),
-          fieldName: ''
-        },
-        // 功能分类
-        {
-          title: this.$t('standardRegulationLibrary.functionalClassification'),
-          fieldName: ''
-        },
-        // 功能专业
-        {
-          title: this.$t('standardRegulationLibrary.functionalSpecialty'),
-          fieldName: ''
-        },
-        // 分组编码
-        {
-          title: this.$t('standardRegulationLibrary.blockCoding'),
-          fieldName: ''
-        },
-        // 分组名称
-        {
-          title: this.$t('standardRegulationLibrary.groupName'),
-          fieldName: ''
-        },
-        // 新认证实施时间
-        {
-          title: this.$t('standardRegulationLibrary.newCertificationImplementationTime'),
-          fieldName: ''
-        },
-        // 已认证实施时间
-        {
-          title: this.$t('standardRegulationLibrary.certifiedImplementationTime'),
-          fieldName: ''
-        },
-        // 新注册实施时间
-        {
-          title: this.$t('standardRegulationLibrary.newRegistrationImplementationTime'),
-          fieldName: ''
-        },
-        // 适用车型
-        {
-          title: this.$t('standardRegulationLibrary.applicableVehicleType'),
-          fieldName: ''
-        },
-        // 动力类型
-        {
-          title: this.$t('standardRegulationLibrary.dynamicType'),
-          fieldName: ''
-        }
-      ],
+      clauseField: [],
       // 目录数据
-      treeData: [
-        {
-          title: '0-0',
-          key: '0-0',
-          children: [
-            {
-              title: '0-0-0',
-              key: '0-0-0',
-              children: [
-                { title: '0-0-0-0', key: '0-0-0-0' },
-                { title: '0-0-0-1', key: '0-0-0-1' },
-                { title: '0-0-0-2', key: '0-0-0-2' }
-              ]
-            },
-            {
-              title: '0-0-1',
-              key: '0-0-1',
-              children: [
-                { title: '0-0-1-0', key: '0-0-1-0' },
-                { title: '0-0-1-1', key: '0-0-1-1' },
-                { title: '0-0-1-2', key: '0-0-1-2' }
-              ]
-            }
-          ]
-        }
-      ],
+      treeData: [],
       selectedTreeKeys: [],
+      hightMenuId: null, // 高亮的menuId
       isClauseLabelExpand: true, // 条文/条文标签切换部分是否展开，控制是否只显示图标
       isCatalogueExpand: true, // 标准目录收起
       isContainerExpand: false, // 条文是否展开
-      isInitPage: true // 是否初始化页面
+      loading: false,
+      spiltInfo: {}, // 拆分的整体信息
+      clauseContentList: [], // 条文内容的数据
+      clauseLabelInfo: {}, // 条文标签数据
+      clauseLabelHideField: ['item_content']
     }
   },
   mounted () {
-    this.$nextTick(() => {
-      this.isInitPage = false
-    })
+    this.initClauseFieldList()
+    this.initDetailInfo()
   },
   methods: {
+    /**
+     * 获取条文标签字段
+     */
+    initClauseFieldList () {
+      getDocSplitEditForm({ type: 1 }).then(res => {
+        if (res.success) {
+          this.clauseField = res.result || []
+        }
+      })
+    },
+    initDetailInfo () {
+      this.loading = true
+      previewDocSplit({ id: this.$route.query.id }).then(res => {
+        if (res.success) {
+          const data = res.result || {}
+          this.treeData = data.sarFileSplitMenuEO || []
+          this.spiltInfo = data.documentSplitInfo || {}
+          this.clauseContentList = data.documentSplitDetail || []
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    /**
+     * 树节点选中
+     * @param selectedKeys
+     */
     handleTreeSelected (selectedKeys) {
       this.selectedTreeKeys = selectedKeys
+      this.hightMenuId = this.selectedTreeKeys[0]
+      if (this.hightMenuId) {
+        this.handleJump()
+      } else {
+        this.clauseLabelInfo = {}
+      }
     },
+    /**
+     * 内容跳转，处理条文标签数据
+     */
+    handleJump () {
+      const contentItemDomList = document.getElementsByClassName('clause-content-item')
+      const contentDom = document.getElementsByClassName('standard-content')[0]
+      const contentItemIndex = this.clauseContentList.findIndex(tt => tt.menu_id === this.hightMenuId)
+      this.clauseLabelInfo = Object.assign({}, this.clauseContentList[contentItemIndex])
+      contentDom.scrollTop = contentItemDomList[contentItemIndex].offsetTop - 150
+    },
+    /**
+     * 标准内容展开
+     */
     handleContainerExpand () {
       this.isContainerExpand = !this.isContainerExpand
       if (this.isContainerExpand) {
@@ -191,15 +173,21 @@ export default {
       }
     },
     /**
-     *
+     * 条文标签切换
      * @param flag
      */
     handleClauseChange (flag) {
       this.showClauseLabel = flag
     },
+    /**
+     * 展开或收起条文/条文标签面板
+     */
     expandClauseLabel () {
       this.isClauseLabelExpand = !this.isClauseLabelExpand
     },
+    /**
+     * 展开或收起标准目录
+     */
     expandCatalogue () {
       this.isCatalogueExpand = !this.isCatalogueExpand
     }
@@ -208,6 +196,8 @@ export default {
 </script>
 
 <style scoped lang="less">
+@import '~@assets/less/common.less';
+
 .sheet-box {
   width: 100%;
   height: 100%;
@@ -280,7 +270,7 @@ export default {
     margin-bottom: 20px;
 
     label {
-      width: 7em;
+      width: 7.5em;
       font-size: 14px;
       font-family: PingFang SC-Regular, PingFang SC, sans-serif;
       color: #86909C;
@@ -290,7 +280,9 @@ export default {
       text-overflow: ellipsis;
     }
 
-    span {
+    &-content {
+      flex: 1;
+      width: 0;
       white-space: pre-wrap;
       word-break: break-all;
       font-size: 14px;
@@ -396,6 +388,34 @@ export default {
   padding: 24px;
 }
 
+.clause-content-item {
+  margin-bottom: 20px;
+
+  &-title {
+    font-size: 18px;
+    font-family: PingFang SC-Medium, PingFang SC, sans-serif;
+    font-weight: 600;
+    color: #1D2129;
+    margin-bottom: 12px;
+  }
+
+  &-content {
+    font-size: 14px;
+    font-family: PingFang SC-Regular, PingFang SC, sans-serif;
+    font-weight: 500;
+    color: #1D2129;
+    line-height: 24px;
+
+    /deep/ table {
+      width: 100%;
+    }
+  }
+
+  &-content-hight {
+    color: @primary-color;
+  }
+}
+
 .control-clause-label-expand {
   position: absolute;
   width: 12px;
@@ -417,4 +437,12 @@ export default {
 /deep/ .ant-tree li span.ant-tree-switcher {
   float: right;
 }
+
+.ant-spin-nested-loading {
+  height: 100%;
+}
+
+/deep/ .ant-spin-container {
+  height: 100%;
+}
 </style>