update 树节点修改，标准分解单样式调整

src/components/StandardResolutionSheet.vue

@@ -1,10 +1,18 @@
 <template>
   <div class="sheet-box">
     <!--标准目录-->
-    <div class="standard-catalogue part-common">
-      <div class="part-title">{{ $t('standardRegulationLibrary.standardCatalogue') }}</div>
-      <div class="has-title-part-content">
-        <a-tree :show-line="false" :show-icon="false" :tree-data="treeData" :selected-keys="selectedTreeKeys" @select="handleTreeSelected">
+    <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>
@@ -18,15 +26,15 @@
           </template>
           <span></span>
         </a-tooltip>
-        <a-button type="link" :icon="showClauseLable ? 'fullscreen' : 'fullscreen-exit'" @click="handleClauseChange(!showClauseLable)">
-          {{ showClauseLable ? $t('open') : $t('putAway') }}
+        <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" v-show="showClauseLable">
+    <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">
@@ -36,17 +44,26 @@
       </div>
     </div>
     <!--条文、条文标签切换-->
-    <div class="clause-label-change part-ml part-common">
+    <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>
       <!--条文-->
-      <div class="clause-label-change-item" :class="{'clause-label-change-item-selected': !showClauseLable}" @click="handleClauseChange(false)">
-        <i class="iconfont icon-ios-list-box" />
-        <span>条文</span>
-      </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>
       <!--条文标签-->
-      <div class="clause-label-change-item" :class="{'clause-label-change-item-selected': showClauseLable}" @click="handleClauseChange(true)">
-        <i class="iconfont icon-biaoqian-mianxing" />
-        <span>条文标签</span>
-      </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>
+      </a-tooltip>
     </div>
   </div>
 </template>
@@ -58,7 +75,8 @@ export default {
   name: 'StandardResolutionSheet',
   data () {
     return {
-      showClauseLable: true, // 是否展示条文标签
+      showClauseLabel: true, // 是否展示条文标签
+      // 条文标签字段
       clauseField: [
         // 条文号
         {
@@ -121,6 +139,7 @@ export default {
           fieldName: ''
         }
       ],
+      // 目录数据
       treeData: [
         {
           title: '0-0',
@@ -147,15 +166,42 @@ export default {
           ]
         }
       ],
-      selectedTreeKeys: []
+      selectedTreeKeys: [],
+      isClauseLabelExpand: true, // 条文/条文标签切换部分是否展开，控制是否只显示图标
+      isCatalogueExpand: true, // 标准目录收起
+      isContainerExpand: false, // 条文是否展开
+      isInitPage: true // 是否初始化页面
     }
   },
+  mounted () {
+    this.$nextTick(() => {
+      this.isInitPage = false
+    })
+  },
   methods: {
     handleTreeSelected (selectedKeys) {
       this.selectedTreeKeys = selectedKeys
     },
+    handleContainerExpand () {
+      this.isContainerExpand = !this.isContainerExpand
+      if (this.isContainerExpand) {
+        this.isCatalogueExpand = false
+      } else {
+        this.isCatalogueExpand = true
+      }
+    },
+    /**
+     *
+     * @param flag
+     */
     handleClauseChange (flag) {
-      this.showClauseLable = flag
+      this.showClauseLabel = flag
+    },
+    expandClauseLabel () {
+      this.isClauseLabelExpand = !this.isClauseLabelExpand
+    },
+    expandCatalogue () {
+      this.isCatalogueExpand = !this.isCatalogueExpand
     }
   }
 }
@@ -180,8 +226,8 @@ export default {
 
 .standard-catalogue {
   height: 100%;
-  width: 15%;
-  min-width: 280px;
+  position: relative;
+  transition: width .2s linear;
 
   /deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
     background-color: transparent !important;
@@ -189,27 +235,59 @@ export default {
   }
 }
 
+.control-standard-catalogue-expand {
+  width: 12px;
+  height: 24px;
+  border-radius: 0 12px 12px 0;
+  background-color: @primary-color;
+  color: white;
+  position: absolute;
+  left: 100%;
+  top: calc(50% - 52px);
+
+  .anticon {
+    position: absolute;
+    top: 50%;
+    left: -2px;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
+}
+
+.expand-catalogue {
+  width: 280px;
+}
+
+.no-expand-catalogue {
+  width: 0;
+}
+
 .sheet-container {
   height: 100%;
   flex: 1;
   width: 0;
+  transition: width .2s linear;
 }
 
 .clause-label {
-  width: 25%;
-  min-width: 400px;
+  width: 400px;
   height: 100%;
+  overflow: hidden;
+  transition: width .2s linear;
 
   .clause-item {
     display: flex;
     margin-bottom: 20px;
 
     label {
-      width: 12rem;
+      width: 7em;
       font-size: 14px;
       font-family: PingFang SC-Regular, PingFang SC, sans-serif;
       color: #86909C;
       margin-right: 20px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     span {
@@ -222,14 +300,20 @@ export default {
   }
 }
 
+.hide-clause-label {
+  width: 0;
+  margin-left: 0;
+}
+
 .clause-label-change {
-  width: 6%;
-  min-width: 130px;
+  width: 130px;
   height: 100%;
-  padding-top: 56px;
+  padding-top: 40px;
+  position: relative;
+  transition: width .2s linear;
 
   &-item {
-    height: 56px;
+    height: 40px;
     display: flex;
     align-items: center;
     padding: 0 16px;
@@ -245,6 +329,8 @@ export default {
 
     span {
       margin-left: 8px;
+      white-space: nowrap;
+      overflow: hidden;
     }
   }
 
@@ -253,33 +339,40 @@ export default {
   }
 }
 
+.no-expand-clause-label {
+  width: 45px;
+  min-width: 45px;
+}
+
 .part-title {
-  height: 56px;
+  height: 40px;
   background: rgba(213, 44, 38, 0.12);
   border-radius: 8px 8px 0 0;
-  line-height: 56px;
+  line-height: 40px;
   padding: 0 24px;
   font-size: 16px;
   font-family: PingFang SC-Semibold, PingFang SC, sans-serif;
   font-weight: 600;
   color: #1D2129;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .has-title-part-content {
-  height: calc(100% - 56px);
+  height: calc(100% - 40px);
   overflow: auto;
   padding: 24px;
 }
 
 .standard-name {
-  height: 56px;
+  height: 40px;
   background: #FFFFFF;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 24px;
-  margin-bottom: 16px;
+  margin-bottom: 5px;
 }
 
 .standard-name > span {
@@ -296,10 +389,32 @@ export default {
 }
 
 .standard-content {
-  height: calc(100% - 72px);
+  height: calc(100% - 45px);
   background: #FFFFFF;
   border-radius: 8px;
   overflow: auto;
   padding: 24px;
 }
+
+.control-clause-label-expand {
+  position: absolute;
+  width: 12px;
+  height: 24px;
+  background-color: @primary-color;
+  border-radius: 12px 0 0 12px;
+  left: -12px;
+  top: calc(50% - 52px);
+  color: white;
+  cursor: pointer;
+
+  .anticon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+/deep/ .ant-tree li span.ant-tree-switcher {
+  float: right;
+}
 </style>