update

src/views/manage_company/template/components/template-files.vue

@@ -6,6 +6,7 @@
         v-for="node in nodeList"
         :class="{ item_active: node === selectedNode }"
         :key="node.id"
+        @click.stop="selectedNode = node"
       >
         {{ node.label }}
       </div>
@@ -14,17 +15,45 @@
       <div class="template_files_right_title">
         模板样板文件
       </div>
-      
+      <div class="template_files_right_list">
+        <div class="template_files_right_list_item">
+          <div>文件名</div>
+          <div>文件扩展名</div>
+          <div>文件大小</div>
+          <div />
+        </div>
+      </div>
       <div class="template_files_right_title">
         新增样板文件
-        <el-button class="title_button" type="primary">上传文件</el-button>
+        <file-uploader
+          :on-success="uploadFileSuccess"
+        >
+          <el-button class="title_button" type="primary">上传文件</el-button>
+        </file-uploader>
+      </div>
+      <div class="template_files_right_list">
+        <div class="template_files_right_list_item">
+          <div>文件名</div>
+          <div>文件扩展名</div>
+          <div>文件大小</div>
+          <div>
+            <el-button class="del_button" type="text">删除</el-button>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { firstCharToLowerCase } from '@/utils/tool';
+import FileUploader from '@/components/file-uploader';
+import { wrapOssProtocol } from '@/services/oss';
+
 export default {
+  components: {
+    FileUploader,
+  },
   props: {
     companyId: String,
     templateId: String,
@@ -35,7 +64,6 @@ export default {
       this.selectedNode = list[0];
     },
     selectedNode(node) {
-      debugger;
       if(!node) { return; }
       this.fetchNodeTemplateFiles(node);
     }
@@ -49,10 +77,34 @@ export default {
     this.fetchNodeTemplateFiles(this.selectedNode);
   },
   methods: {
-    fetchNodeTemplateFiles(node) {
+    async fetchNodeTemplateFiles(node) {
       // todo
+      const  res = await this.$fetchApi('template/queryAllTemplateNodeModelFile', { templateNodeId : node.id, companyId: this.companyId });
+      const fileList = (res.Data || []).map(firstCharToLowerCase);
+      console.log(fileList);
+
+    },
+    /**
+     * 上传成功保存文件
+     */
+    async uploadFileSuccess (ossFile) {
+      const currentNode = this.selectedNode;
+      const ossUrl = wrapOssProtocol(ossFile.ossUrl);
+      const fileNameStrs = ossFile.name.split('.');
+      const extension = fileNameStrs.pop();
+      const param = {
+        Extension: extension,
+        FileName: fileNameStrs.join('.'),
+        FileSize: ossFile.size,
+        OssUrl: ossUrl,
+        templateNodeId: currentNode.id,
+      };
       debugger;
-    }
+      // const res = await services.addTemplateNodeModelFile(param);
+      // if(res.Code !== 0) return;
+      // notify.success('文件已上传。');
+      // this.nodeClick(currentNode);
+    },
   },
 }
 </script>
@@ -100,6 +152,46 @@ export default {
         margin: auto 0;
       }
     }
+
+    &_list {
+      &_item {
+        display: flex;
+        flex-direction: row;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 1px solid rgba(#111111, 0.1);
+        >div {
+          position: relative;
+          padding-left: 10px;
+          font-size: 12px;
+          &:first-child {
+            padding-left: 24px;
+            flex: 407;
+          }
+          &:nth-child(2) { flex: 139; }
+          &:nth-child(3) { flex: 140; }
+          &:nth-child(4) { flex: 70; }
+          &:nth-child(2),
+          &:nth-child(3) {
+            &:before {
+              content: '';
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 0;
+              margin: auto 0;
+              width: 1px;
+              height: 32px;
+              background-color: rgba(#111111, 0.1);
+            }
+          }
+        }
+
+        .del_button {
+          color: #d20f00;
+        }
+      }
+    }
   }
   .node_list_item {
     height: 28px;

src/views/manage_company/template/detail.vue

@@ -14,7 +14,7 @@
       :backBtnTitle="prevViewName || '返回'"
     >
       <template #center>{{templateName}}</template>
-      <template #right>
+      <!-- <template #right>
         <template v-if="templateIsAdded !== undefined">
           <el-button
             type="primary"
@@ -26,7 +26,7 @@
             disabled
           >已添加</el-button>
         </template>
-      </template>
+      </template> -->
     </app-header>
     <main class="template_detail_main">
       <div class="template_detail_main_left">
@@ -44,8 +44,8 @@
           >模板信息</div>
           <!-- <div class="nav_list_item">文件交换</div> -->
         </div>
-        <div class="nav_subtitle">个性化</div>
-        <div class="nav_list_group">
+        <div v-if="templateIsAdded" class="nav_subtitle">个性化</div>
+        <div v-if="templateIsAdded" class="nav_list_group">
           <div
             class="nav_list_item"
             :class="{ item_active: viewType === 'files' }"
@@ -53,6 +53,26 @@
           >管理样板文件</div>
           <!-- <div class="nav_list_item">第三方应用管理</div> -->
         </div>
+
+        <div
+          v-if="templateIsAdded !== undefined && !templateIsAdded"
+          class="nav_list_group"
+          :style="{ marginTop: '24px' }"
+        >
+          <div class="nav_list_item" @click.stop="addTemplate">
+            添加模板
+            <i class="item_icon el-icon-plus" />
+          </div>
+        </div>
+        <div
+          v-if="templateIsAdded"
+          class="nav_list_group bottom"
+        >
+          <div
+            class="nav_list_item"
+            @click.stop="removeTemplate"
+          >移除模板<i class="item_icon el-icon-delete-solid" /></div>
+        </div>
       </div>
       <div class="template_detail_main_right">
         <nodes-viewer
@@ -70,7 +90,6 @@
         />
       </div>
     </main>
-    
   </div>
 </template>
 
@@ -82,9 +101,9 @@ import {
   queryTemplateById,
   queryTemplateNodeByTemplateId,
 } from "@/services/template";
-import { firstCharToLowerCase } from "@/utils/tool";
+import { firstCharToLowerCase, notify } from "@/utils/tool";
 import { queryAllIndustry } from "@/services/industry";
-import { addTemplateToCompany } from "./tool";
+import { addTemplateToCompany, removeTemplate } from "./tool";
 import Info from "./components/info";
 import TemplateFiles from './components/template-files';
 
@@ -167,6 +186,12 @@ export default {
       this.$notify({ message: "添加成功", type: "success" });
       this.templateIsAdded = true;
     },
+    async removeTemplate() {
+      const res = await removeTemplate(this.companyId, this.templateId);
+      if(res.Code) { return; }
+      notify.success('移除成功');
+      this.$router.go(-1);
+    },
   },
 };
 
@@ -196,6 +221,7 @@ function flatternTree(treeHeadNode) {
     align-items: stretch;
     padding: 0 40px;
     &_left {
+      position: relative;
       flex: none;
       width: 250px + 16px;
       padding-right: 16px;
@@ -209,6 +235,7 @@ function flatternTree(treeHeadNode) {
         }
         &_list {
           &_item {
+            position: relative;
             height: 44px;
             line-height: 44px;
             background-color: #fff;
@@ -229,6 +256,25 @@ function flatternTree(treeHeadNode) {
               border-bottom-left-radius: 6px;
               border-bottom-right-radius: 6px;
             }
+            .item_icon {
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              margin: auto 0;
+              right: 20px;
+              font-size: 26px;
+              height: 1em;
+              &.el-icon-delete-solid {
+                color: #D6243A;
+              }
+            }
+          }
+          &_group.bottom {
+            position: absolute;
+            bottom: 60px;
+            left: 0;
+            right: 16px;
+            // width: 100%;
           }
         }
       }