update 标准分解单样式

src/api/api.js

@@ -69,7 +69,7 @@ const getDictTreeList = (params) => getAction('/sys/dictItem/treeList', params)
 export const ajaxGetDictItems = (code, params) => getAction(`/sys/dict/getDictItems/${code}`, params)
 // 从缓存中获取字典配置
 function getDictItemsFromCache (dictCode) {
-  if (Vue.ls.get(UI_CACHE_DB_DICT_DATA) && Vue.ls.get(UI_CACHE_DB_DICT_DATA)[dictCode]) {
+  if (Vue.ls.get(UI_CACHE_DB_DICT_DATA) && Vue.ls.get(UI_CACHE_DB_DICT_DATA)[dictCode] && Vue.ls.get(UI_CACHE_DB_DICT_DATA)[dictCode].length > 0) {
     return Vue.ls.get(UI_CACHE_DB_DICT_DATA)[dictCode]
   }
 }

src/common/lang/standardRegulationLibrary/en-us.js

@@ -7,6 +7,20 @@ module.exports = {
   standardResolutionSheet: 'Standard resolution sheet', // 标准分解单
   updateRecord: 'Update record', // 更新记录
   submitQuestion: 'Submit a question', // 提交问题
+  standardCatalogue: 'Standard catalogue', // 标准目录
+  clauseLabel: 'Clause label', // 条文标签
+  clauseNumber: 'Article number', // 条文号
+  clauseTitle: 'Title of article', // 条文标题
+  regulatoryRequirementsType: 'Types of regulatory requirements', // 法规要求类型
+  functionalClassification: 'Functional classification', // 功能分类
+  functionalSpecialty: 'Functional specialty', // 功能专业
+  blockCoding: 'Block coding', // 分组编码
+  groupName: 'Group name', // 分组名称
+  newCertificationImplementationTime: 'New certification implementation time', // 新认证实施时间
+  certifiedImplementationTime: 'Certified implementation time', // 已认证实施时间
+  newRegistrationImplementationTime: 'New registration implementation time', // 新注册实施时间
+  applicableVehicleType: 'Applicable vehicle type', // 适用车型
+  dynamicType: 'Dynamic type', // 动力类型
   // 国内标准
   domesticStandard: {
     treeSearchPlaceholder: 'Please enter the tree system', // 请输入树状图体系

src/common/lang/standardRegulationLibrary/zh-cn.js

@@ -7,6 +7,20 @@ module.exports = {
   standardResolutionSheet: '标准分解单',
   updateRecord: '更新记录',
   submitQuestion: '提交问题',
+  standardCatalogue: '标准目录',
+  clauseLabel: '条文标签',
+  clauseNumber: '条文号',
+  clauseTitle: '条文标题',
+  regulatoryRequirementsType: '法规要求类型', // 法规要求类型
+  functionalClassification: '功能分类', // 功能分类
+  functionalSpecialty: '功能专业', // 功能专业
+  blockCoding: '分组编码', // 分组编码
+  groupName: '分组名称', // 分组名称
+  newCertificationImplementationTime: '新认证实施时间', // 新认证实施时间
+  certifiedImplementationTime: '已认证实施时间', // 已认证实施时间
+  newRegistrationImplementationTime: '新注册实施时间', // 新注册实施时间
+  applicableVehicleType: '适用车型', // 适用车型
+  dynamicType: '动力类型', // 动力类型
   // 国内标准
   domesticStandard: {
     treeSearchPlaceholder: '请输入树状图体系',

src/components/StandardResolutionSheet.vue

@@ -1,21 +1,163 @@
 <template>
   <div class="sheet-box">
-    <!--    标准目录-->
+    <!--标准目录-->
     <div class="standard-catalogue part-common">
-      <div class="part-title">标准目录</div>
+      <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">
+        </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="showClauseLable ? 'fullscreen' : 'fullscreen-exit'" @click="handleClauseChange(!showClauseLable)">
+          {{ showClauseLable ? $t('open') : $t('putAway') }}
+        </a-button>
+      </div>
+      <!--条文内容-->
+      <div class="standard-content"></div>
+    </div>
+    <!--条文标签-->
+    <div class="clause-label part-ml part-common" v-show="showClauseLable">
+      <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>
+        </div>
+      </div>
+    </div>
+    <!--条文、条文标签切换-->
+    <div class="clause-label-change part-ml part-common">
+      <!--条文-->
+      <div class="clause-label-change-item" :class="{'clause-label-change-item-selected': !showClauseLable}" @click="handleClauseChange(false)">
+        <a-icon type="profile" />
+        <span>条文</span>
+      </div>
+      <!--条文标签-->
+      <div class="clause-label-change-item" :class="{'clause-label-change-item-selected': showClauseLable}" @click="handleClauseChange(true)">
+        <a-icon type="profile" />
+        <span>条文标签</span>
+      </div>
     </div>
-    <!--    标准内容-->
-    <div class="sheet-container part-ml part-common"></div>
-    <!--    条文标签-->
-    <div class="clause-label part-ml part-common"></div>
-    <!--    条文、条文标签切换-->
-    <div class="clause-label-change part-ml part-common"></div>
   </div>
 </template>
 
 <script>
+import '@assets/less/common.less'
+
 export default {
-  name: 'StandardResolutionSheet'
+  name: 'StandardResolutionSheet',
+  data () {
+    return {
+      showClauseLable: 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: ''
+        }
+      ],
+      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' }
+              ]
+            }
+          ]
+        }
+      ],
+      selectedTreeKeys: []
+    }
+  },
+  methods: {
+    handleTreeSelected (selectedKeys) {
+      this.selectedTreeKeys = selectedKeys
+    },
+    handleClauseChange (flag) {
+      this.showClauseLable = flag
+    }
+  }
 }
 </script>
 
@@ -39,6 +181,12 @@ export default {
 .standard-catalogue {
   height: 100%;
   width: 15%;
+  min-width: 280px;
+
+  /deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
+    background-color: transparent !important;
+    color: @primary-color;
+  }
 }
 
 .sheet-container {
@@ -49,18 +197,62 @@ export default {
 
 .clause-label {
   width: 25%;
+  min-width: 400px;
   height: 100%;
+
+  .clause-item {
+    display: flex;
+    margin-bottom: 20px;
+
+    label {
+      width: 12rem;
+      font-size: 14px;
+      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
+      color: #86909C;
+      margin-right: 20px;
+    }
+
+    span {
+      white-space: pre-wrap;
+      word-break: break-all;
+      font-size: 14px;
+      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
+      color: #1D2129;
+    }
+  }
 }
 
 .clause-label-change {
   width: 6%;
+  min-width: 130px;
   height: 100%;
+  padding-top: 56px;
+
+  &-item {
+    height: 56px;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    font-size: 16px;
+    font-family: PingFang SC-Semibold, PingFang SC, sans-serif;
+    font-weight: 600;
+    color: #1D2129;
+    cursor: pointer;
+
+    span {
+      margin-left: 8px;
+    }
+  }
+
+  &-item-selected {
+    background: #FAE6E5;
+  }
 }
 
 .part-title {
   height: 56px;
   background: rgba(213, 44, 38, 0.12);
-  border-radius: 8px 8px 0px 0px;
+  border-radius: 8px 8px 0 0;
   line-height: 56px;
   padding: 0 24px;
   font-size: 16px;
@@ -68,4 +260,42 @@ export default {
   font-weight: 600;
   color: #1D2129;
 }
+
+.has-title-part-content {
+  height: calc(100% - 56px);
+  overflow: auto;
+  padding: 24px;
+}
+
+.standard-name {
+  height: 56px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  margin-bottom: 16px;
+}
+
+.standard-name > span {
+  font-size: 16px;
+  font-family: PingFang SC-Semibold, PingFang SC, sans-serif;
+  font-weight: 600;
+  color: #1D2129;
+  flex: 1;
+  width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.standard-content {
+  height: calc(100% - 72px);
+  background: #FFFFFF;
+  border-radius: 8px;
+  overflow: auto;
+  padding: 24px;
+}
 </style>

src/views/standardRegulationLibrary/commonPage/StandardDetailPage.vue

@@ -85,38 +85,19 @@ export default {
       loading: false,
       partList: [], // 页面模块列表
       form: {}, // 页面字段
+      // 页面数据
       detailData: {
-        modification_list: [
-          {
-            id: 1,
-            fileName: '国内文字占位符段落标题标准.pdf'
-          },
-          {
-            id: 2,
-            fileName: '国内标准国内文字占位符段落标题标准.pdf'
-          },
-          {
-            id: 3,
-            fileName: '国内标准国内标准.pdf'
-          }
-        ],
-        draft_for_review: [{
-          id: 11,
-          fileName: '国内文字占位符段落标题标准.pdf'
-        }],
-        draft_for_approval: [{
-          id: 21,
-          fileName: '国内标准国内文字占位符段落标题标准.pdf'
-        }],
-        draft_for_comment: [{
-          id: 31,
-          fileName: '国内标准国内标准.pdf'
-        }],
-        draft: [{
-          id: 311,
-          fileName: '国内标准国内标准.pdf'
-        }]
-      } // 页面数据
+        // 修改单
+        modification_list: [],
+        // 报批稿
+        draft_for_review: [],
+        // 送审稿
+        draft_for_approval: [],
+        // 征求意见稿
+        draft_for_comment: [],
+        // 草案
+        draft: []
+      }
     }
   },
   computed: {
@@ -128,6 +109,9 @@ export default {
     this.initForm()
   },
   methods: {
+    /**
+     * 获取页面字段
+     */
     initForm () {
       getDomesticStandardFormModal().then(res => {
         if (res.success) {

src/views/standardRegulationLibrary/domesticStandard/DomesticStandardList.vue

@@ -5,7 +5,7 @@
       <!--      $t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')-->
       <a-input-search v-model="treeInput" :placeholder="$t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')"
                       @search="handleTreeSearch" />
-      <a-tree :show-line="true" :show-icon="true" :tree-data=treeData :selected-keys="selectedTreeKeys">
+      <a-tree :show-line="true" :show-icon="true" :tree-data="treeData" :selected-keys="selectedTreeKeys">
         <a-icon type="folder" slot="folder" class="tree-icon" />
 
         <template #custom="record">

src/views/standardRegulationLibrary/domesticStandard/modules/DomesticStandardModal.vue

@@ -7,22 +7,22 @@
     @close="handleCancel"
     :visible="visible"
     :maskClosable="false"
-    style="height: 100%;overflow: auto;"
+    class="custom-drawer-style"
   >
-    <a-spin :spinning="confirmLoading" style="width: 100%;height:100%">
-      <div class="drawer-container">
+    <div class="custom-drawer-style-scroll">
+      <a-spin :spinning="confirmLoading" style="width: 100%;height:100%">
         <add-form ref="addForm"
                   :get-form-func="getFormFunc"
                   :get-document-info-func="getDocumentInfoFunc"
                   @submitFormData="submitFormData" />
-      </div>
-      <div class="drawer-footer">
-        <a-button @click="handleOk" type="primary" style="margin-bottom: 0;">
-          {{ $t('preservation') }}
-        </a-button>
-        <a-button @click="handleCancel" style="margin-bottom: 0;">{{ $t('close') }}</a-button>
-      </div>
-    </a-spin>
+      </a-spin>
+    </div>
+    <div class="custom-drawer-style-bottom-btn">
+      <a-button @click="handleOk" type="primary" style="margin-bottom: 0;" :loading="confirmLoading">
+        {{ $t('preservation') }}
+      </a-button>
+      <a-button @click="handleCancel" style="margin-bottom: 0;" :loading="confirmLoading">{{ $t('close') }}</a-button>
+    </div>
   </a-drawer>
 </template>
 

src/views/system/tags/modules/StandardDrawer.vue

@@ -175,8 +175,8 @@
       </a-spin>
     </div>
     <div class="custom-drawer-style-bottom-btn">
-      <a-button @click="handleCancel" style="margin-bottom: 0;">{{ $t('close') }}</a-button>
-      <a-button @click="handleOk" type="primary" style="margin-bottom: 0;">
+      <a-button @click="handleCancel" style="margin-bottom: 0;" :loading="confirmLoading">{{ $t('close') }}</a-button>
+      <a-button @click="handleOk" type="primary" style="margin-bottom: 0;" :loading="confirmLoading">
         {{ $t('preservation') }}
       </a-button>
     </div>