From bf5de423b23bbfd42a8eb9f39e37feee0692c9fc Mon Sep 17 00:00:00 2001
From: zhengzhou <zhengzhou@hotmail.com>
Date: Thu, 22 Apr 2021 18:35:57 +0800
Subject: [PATCH] ;update

---
 .../template/components/info.vue              | 148 +++++++
 .../template/components/template-files.vue    | 117 ++++++
 src/views/manage_company/template/detail.vue  | 393 +++++++++---------
 3 files changed, 466 insertions(+), 192 deletions(-)
 create mode 100644 src/views/manage_company/template/components/info.vue
 create mode 100644 src/views/manage_company/template/components/template-files.vue

diff --git a/src/views/manage_company/template/components/info.vue b/src/views/manage_company/template/components/info.vue
new file mode 100644
index 00000000..84e01fd6
--- /dev/null
+++ b/src/views/manage_company/template/components/info.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="template_info_popup">
+    <div class="popup_head">
+      <div class="popup_head_left">
+        <i class="Cicon icon font_family icon-gerenshezhi " />
+      </div>
+      <!-- <div class="popup_head_center">模板信息</div> -->
+      <div class="popup_head_right"></div>
+    </div>
+    <!-- <div class="popup_line" /> -->
+    <div class="popup_block">
+      <div class="popup_block_title">模板介绍</div>
+      <div class="popup_block_text">{{templateInfo.introduce}}</div>
+    </div>
+    <div class="popup_line" />
+    <div
+      class="popup_block"
+      v-if="templateInfo.propertys && templateInfo.propertys.length"
+    >
+      <div class="popup_block_title">模板需填字段</div>
+      <div class="popup_block_tags">
+        <div
+          class="popup_block_tag"
+          v-for="tag in templateInfo.propertys || []"
+          :key="tag.id"
+        >
+          {{tag.propertyName}}
+        </div>
+      </div>
+    </div>
+    <div class="popup_line" />
+    <div class="popup_block">
+      <div class="popup_block_title">模板信息</div>
+      <div class="popup_block_items">
+        <div class="popup_block_item">
+          <div>模板编码</div>
+          <div>{{templateInfo.fullCode}}</div>
+        </div>
+        <div class="popup_block_item">
+          <div>行业分类</div>
+          <div :title="templateInfo.industryCN">{{templateInfo.industryCN}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: {
+    templateInfo: {
+      type: Object,
+      default: () => ({})
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.template_info_popup {
+  display: inline-block;
+  vertical-align: top;
+  width: 660px;
+  width: calc(40% - 20px - 60px);
+  // margin-top: 15px;
+  margin-left: 20px;
+  height: calc(100% - 15px);
+  // background-color: rgba(252, 252, 252, 1);
+  background-color: rgba(248, 248, 248, 1);
+  box-shadow: 0px 3px 11px 1px rgba(0, 0, 0, 0.06);
+  border-radius: 8px 8px 0 0;
+  .popup {
+    &_line {
+      height: 0.5px;
+      background-color: rgba(204, 205, 215, 1);
+    }
+    &_head {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 24px;
+      line-height: 56px;
+      height: 56px;
+      .icon-gerenshezhi {
+        font-size: 36px;
+        color: #7850FF;
+        line-height: inherit;
+      }
+      &_center {
+        color: #32323c;
+        font-size: 20px;
+      }
+    }
+    &_block {
+      padding: 15px 24px;
+      &_title {
+        font-size: 13px;
+        line-height: 18px;
+        color: #7A7B89;
+      }
+      &_text {
+        font-size: 14px;
+        color: #32323c;
+        line-height: 20px;
+        margin-top: 15px;
+      }
+      &_tags {
+        margin-top: 13px;
+      }
+      &_tag {
+        display: inline-block;
+        margin-right: 16px;
+        margin-bottom: 16px;
+        padding: 0 15px;
+        line-height: 32px;
+        font-size: 14px;
+        border: 0.5px solid #A7A8B7;
+        border-radius: 21px;
+      }
+      &_items {
+        margin-top: 13px;
+      }
+      &_item {
+        display: inline-block;
+        vertical-align: top;
+        width: 50%;
+        >div {
+          &:first-child {
+            font-size: 12px;
+            line-height: 16px;
+            color: #666;
+            &:after { content: '：' }
+          }
+          &:last-child {
+            font-size: 14px;
+            line-height: 20px;
+            margin-top: 4px;
+            color: #32323c;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/manage_company/template/components/template-files.vue b/src/views/manage_company/template/components/template-files.vue
new file mode 100644
index 00000000..f30f9b9e
--- /dev/null
+++ b/src/views/manage_company/template/components/template-files.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="template_files">
+    <div class="template_files_left">
+      <div
+        class="node_list_item"
+        v-for="node in nodeList"
+        :class="{ item_active: node === selectedNode }"
+        :key="node.id"
+      >
+        {{ node.label }}
+      </div>
+    </div>
+    <div class="template_files_right">
+      <div class="template_files_right_title">
+        模板样板文件
+      </div>
+      
+      <div class="template_files_right_title">
+        新增样板文件
+        <el-button class="title_button" type="primary">上传文件</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    companyId: String,
+    templateId: String,
+    nodeList: Array,
+  },
+  watch: {
+    nodeList(list) {
+      this.selectedNode = list[0];
+    },
+    selectedNode(node) {
+      debugger;
+      if(!node) { return; }
+      this.fetchNodeTemplateFiles(node);
+    }
+  },
+  data() {
+    return {
+      selectedNode: this.nodeList[0],
+    }
+  },
+  mounted() {
+    this.fetchNodeTemplateFiles(this.selectedNode);
+  },
+  methods: {
+    fetchNodeTemplateFiles(node) {
+      // todo
+      debugger;
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.template_files {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  border-radius: 8px 8px 0 0 ;
+  box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  &_left {
+    flex: none;
+    width: 320px;
+    background-color: rgba(240, 240, 240, 1);
+    border-right: 1px solid rgba(225, 225, 225, 1);
+    padding: 8px;
+    box-sizing: border-box;
+  }
+  &_right {
+    flex: 1;
+    background-color: rgba(252, 252, 252, 1);
+    &_title {
+      position: relative;
+      height: 44px;
+      line-height: 44px;
+      padding-left: 24px;
+
+      color: rgba(12, 13, 16, 100);
+      font-size: 20px;
+      background-color: rgba(248, 248, 248, 1);
+
+      // border-top: 1px solid rgba(0, 0, 0, 0.2);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+      // &:first-child {
+      //   border-top: 0;
+      // }
+      .title_button {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        height: 32px;
+        right: 24px;
+        margin: auto 0;
+      }
+    }
+  }
+  .node_list_item {
+    height: 28px;
+    padding-left: 10px;
+    border-radius: 4px;
+    color: rgba(50, 50, 60, 100);
+    line-height: 28px;
+    font-size: 12px;
+    cursor: pointer;
+    &:hover, &.item_active {
+      background-color: rgba(50, 50, 60, 0.1);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/manage_company/template/detail.vue b/src/views/manage_company/template/detail.vue
index e5c55ea7..80cc7575 100644
--- a/src/views/manage_company/template/detail.vue
+++ b/src/views/manage_company/template/detail.vue
@@ -16,231 +16,240 @@
       <template #center>{{templateName}}</template>
       <template #right>
         <template v-if="templateIsAdded !== undefined">
-          <el-button type="primary" v-if="!templateIsAdded" @click.stop="addTemplate">添加模板</el-button>
-          <el-button v-else disabled>已添加</el-button>
+          <el-button
+            type="primary"
+            v-if="!templateIsAdded"
+            @click.stop="addTemplate"
+          >添加模板</el-button>
+          <el-button
+            v-else
+            disabled
+          >已添加</el-button>
         </template>
       </template>
     </app-header>
-    <nodes-viewer
-      :node="node"
-      class="viewer"
-    />
-    <div class="template_info_popup">
-      <div class="popup_head">
-        <div class="popup_head_left">
-          <i class="Cicon icon font_family icon-gerenshezhi " />
+    <main class="template_detail_main">
+      <div class="template_detail_main_left">
+        <div class="nav_subtitle">模板概况</div>
+        <div class="nav_list_group">
+          <div
+            class="nav_list_item"
+            :class="{ item_active: viewType === 'template' }"
+            @click.stop="viewType = 'template'"
+          >模板结构</div>
+          <div
+            class="nav_list_item"
+            :class="{ item_active: viewType === 'info' }"
+            @click.stop="viewType = 'info'"
+          >模板信息</div>
+          <!-- <div class="nav_list_item">文件交换</div> -->
         </div>
-        <div class="popup_head_center">模板信息</div>
-        <div class="popup_head_right"></div>
-      </div>
-      <div class="popup_line" />
-      <div class="popup_block">
-        <div class="popup_block_title">模板介绍</div>
-        <div class="popup_block_text">{{templateInfo.introduce}}</div>
-      </div>
-      <div class="popup_line" />
-      <div class="popup_block" v-if="templateInfo.propertys && templateInfo.propertys.length">
-        <div class="popup_block_title">模板需填字段</div>
-        <div class="popup_block_tags">
-          <div class="popup_block_tag"
-            v-for="tag in templateInfo.propertys || []"
-            :key="tag.id"
-          >
-            {{tag.propertyName}}
-          </div>
+        <div class="nav_subtitle">个性化</div>
+        <div class="nav_list_group">
+          <div
+            class="nav_list_item"
+            :class="{ item_active: viewType === 'files' }"
+            @click.stop="viewType = 'files'"
+          >管理样板文件</div>
+          <!-- <div class="nav_list_item">第三方应用管理</div> -->
         </div>
       </div>
-      <div class="popup_line" />
-      <div class="popup_block">
-        <div class="popup_block_title">模板信息</div>
-        <div class="popup_block_items">
-          <div class="popup_block_item">
-            <div>模板编码</div>
-            <div>{{templateInfo.fullCode}}</div>
-          </div>
-          <div class="popup_block_item">
-            <div>行业分类</div>
-            <div :title="templateInfo.industryCN">{{templateInfo.industryCN}}</div>
-          </div>
-        </div>
+      <div class="template_detail_main_right">
+        <nodes-viewer
+          :node="node"
+          class="viewer"
+          v-if="viewType === 'template'"
+        />
+        <info class="content_info" v-if="viewType === 'info'" :templateInfo="templateInfo" />
+        <template-files
+          class="content_files"
+          v-if="viewType === 'files'"
+          :nodeList="plainNodeList"
+          :templateId="templateId"
+          :companyId="companyId"
+        />
       </div>
-    </div>
+    </main>
+    
   </div>
 </template>
 
 <script>
 import appHeader from "@/components/app-header/app-header.vue";
 import nodesViewer from "@/components/nodes-viewer";
-import { queryTemplateByCompanyId, queryTemplateById, queryTemplateNodeByTemplateId } from '@/services/template';
-import { firstCharToLowerCase } from '@/utils/tool';
-import { queryAllIndustry } from '@/services/industry';
-import { addTemplateToCompany } from './tool';
+import {
+  queryTemplateByCompanyId,
+  queryTemplateById,
+  queryTemplateNodeByTemplateId,
+} from "@/services/template";
+import { firstCharToLowerCase } from "@/utils/tool";
+import { queryAllIndustry } from "@/services/industry";
+import { addTemplateToCompany } from "./tool";
+import Info from "./components/info";
+import TemplateFiles from './components/template-files';
 
-  export default {
-    components: { appHeader, nodesViewer },
-    data() {
-      const { id: templateId, name: templateName, prevViewName } = this.$route.params;
-      console.log(this, this.$router);
-      return {
-        companyId: sessionStorage.companyId,
-        listTemplateMindTree: [], //思维导图数据
-        mindZoom: 60,
-        templateId,
-        templateName,
-        node: null,
-        templateInfo: {},
-        templateIsAdded: undefined,
-        prevViewName,
-        // template: this.$route.params.data,
-        // status: '', // 模板状态
-      };
+export default {
+  components: { appHeader, nodesViewer, Info, TemplateFiles },
+  data() {
+    const {
+      id: templateId,
+      name: templateName,
+      prevViewName,
+    } = this.$route.params;
+    return {
+      companyId: sessionStorage.companyId,
+      listTemplateMindTree: [], //思维导图数据
+      mindZoom: 60,
+      templateId,
+      templateName,
+      node: null,
+      templateInfo: {},
+      templateIsAdded: undefined,
+      prevViewName,
+      viewType: 'template', // template | info | files
+      plainNodeList: [],
+      // template: this.$route.params.data,
+      // status: '', // 模板状态
+    };
+  },
+  created: function () {
+    this.fetchTemplateNodes();
+    this.fetchTemplateInfo();
+  },
+  methods: {
+    async fetchTemplateNodes() {
+      const res = await queryTemplateNodeByTemplateId(this.templateId);
+      this.node = res.Data;
+      this.plainNodeList = flatternTree(res.Data);
     },
-    created: function () {
-      this.fetchTemplateNodes();
-      this.fetchTemplateInfo();
+    async fetchTemplateInfo() {
+      const [res, indList, addedTemplateRes] = await Promise.all([
+        queryTemplateById(this.templateId),
+        queryAllIndustry(),
+        queryTemplateByCompanyId(this.companyId),
+      ]);
+      const industryHash = indList.reduce((h, ind) => {
+        h[ind.Id] = ind;
+        return h;
+      }, {});
+      if (res.Code || !res.Data) {
+        this.templateInfo = {};
+        return;
+      }
+
+      if (addedTemplateRes.Data) {
+        this.templateIsAdded = addedTemplateRes.Data.some(
+          (obj) => obj.Id === this.templateId,
+          {}
+        );
+      }
+      const { propertys, template } = res.Data;
+      this.templateInfo = Object.assign(firstCharToLowerCase(template), {
+        propertys: propertys
+          .filter((i) => i.PropertyName)
+          .map(firstCharToLowerCase),
+      });
+      const targetInd = industryHash[this.templateInfo.customCode];
+      if (!targetInd) return;
+      const industryCN = targetInd.LevelId.split("-")
+        .map((id) => industryHash[id]?.Name)
+        .join(" / ");
+      this.templateInfo.industryCN = industryCN;
     },
-    methods: {
-      async fetchTemplateNodes() {
-        const res = await queryTemplateNodeByTemplateId(this.templateId);
-        this.node = res.Data;
-      },
-      async fetchTemplateInfo() {
-        const [res, indList, addedTemplateRes] = await Promise.all([
-          queryTemplateById(this.templateId),
-          queryAllIndustry(),
-          queryTemplateByCompanyId(this.companyId),
-        ]);
-        console.log(res, indList, addedTemplateRes);
-        const industryHash = indList.reduce((h, ind) => {
-          h[ind.Id] = ind;
-          return h;
-        }, {});
-        if(res.Code || !res.Data) {
-          this.templateInfo = {};
-          return;
-        }
+    /**
+     * 添加模板
+     */
+    async addTemplate() {
+      const res = await addTemplateToCompany(this.companyId, this.templateId);
+      if (res.Code) {
+        return;
+      }
+      this.$notify({ message: "添加成功", type: "success" });
+      this.templateIsAdded = true;
+    },
+  },
+};
 
-        if(addedTemplateRes.Data) {
-          this.templateIsAdded = addedTemplateRes.Data.some(obj => (obj.Id === this.templateId), {});
-        }
-        const { propertys, template} = res.Data;
-        this.templateInfo = Object.assign(firstCharToLowerCase(template), { propertys: propertys.filter(i => i.PropertyName).map(firstCharToLowerCase) });
-        const targetInd = industryHash[this.templateInfo.customCode];
-        if(!targetInd) return;
-        const industryCN = targetInd.LevelId.split('-').map(id => industryHash[id]?.Name).join(' / ');
-        this.templateInfo.industryCN = industryCN;
-      },
-      /**
-       * 添加模板
-       */
-      async addTemplate () {
-        const res = await addTemplateToCompany(this.companyId, this.templateId);
-        if(res.Code) { return; }
-        this.$notify({ message: '添加成功', type: 'success' });
-        this.templateIsAdded = true;
+function flatternTree(treeHeadNode) {
+  const list = [];
+  const f = treeNodes => {
+    treeNodes.forEach((treeNode) => {
+      const node = { id: treeNode.id, label: treeNode.topic };
+      list.push(node);
+      if(treeNode.children && treeNode.children.length) {
+        f(treeNode.children);
       }
-    }
-  };
+    })
+  }
+  f(treeHeadNode.children || []);
+  return list;
+}
 </script>
 
 <style lang="less" scoped>
 .template_detail {
   height: 100%;
-  .viewer {
-    display: inline-block;
-    vertical-align: top;
-    width: 60%;
-    height: calc(100% - 40px);
-    margin-top: 20px;
-    box-sizing: border-box;
-  }
-
-  .template_info_popup {
-    display: inline-block;
-    vertical-align: top;
-    width: 660px;
-    width: calc(40% - 20px - 60px);
-    margin-top: 15px;
-    margin-left: 20px;
-    height: calc(100% - 15px);
-    background-color: rgba(252, 252, 252, 1);
-    box-shadow: 0px 3px 11px 1px rgba(0, 0, 0, 0.06);
-    border-radius: 8px 8px 0 0;
-    .popup {
-      &_line {
-        height: 0.5px;
-        background-color: rgba(204, 205, 215, 1);
-      }
-      &_head {
-        display: flex;
-        justify-content: space-between;
-        padding: 0 24px;
-        line-height: 56px;
-        height: 56px;
-        .icon-gerenshezhi {
-          font-size: 36px;
-          color: #7850FF;
-          line-height: inherit;
-        }
-        &_center {
-          color: #32323c;
-          font-size: 20px;
-        }
-      }
-      &_block {
-        padding: 15px 24px;
-        &_title {
+  &_main {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    align-items: stretch;
+    padding: 0 40px;
+    &_left {
+      flex: none;
+      width: 250px + 16px;
+      padding-right: 16px;
+      .nav {
+        &_subtitle {
+          color: rgba(0, 0, 0, 0.56);
+          padding-left: 24px;
+          height: 40px;
+          line-height: 40px;
           font-size: 13px;
-          line-height: 18px;
-          color: #7A7B89;
-        }
-        &_text {
-          font-size: 14px;
-          color: #32323c;
-          line-height: 20px;
-          margin-top: 15px;
         }
-        &_tags {
-          margin-top: 13px;
-        }
-        &_tag {
-          display: inline-block;
-          margin-right: 16px;
-          margin-bottom: 16px;
-          padding: 0 15px;
-          line-height: 32px;
-          font-size: 14px;
-          border: 0.5px solid #A7A8B7;
-          border-radius: 21px;
-        }
-        &_items {
-          margin-top: 13px;
-        }
-        &_item {
-          display: inline-block;
-          vertical-align: top;
-          width: 50%;
-          >div {
+        &_list {
+          &_item {
+            height: 44px;
+            line-height: 44px;
+            background-color: #fff;
+            padding-left: 24px;
+            color: rgba(50, 50, 60, 100);
+            cursor: pointer;
+            &:hover, &.item_active {
+              background-color: rgba(50, 50, 60, 0.1);
+            }
+            &:not(:first-child){
+              border-top: 1px solid rgba(0, 0, 0, 0.2);
+            }
             &:first-child {
-              font-size: 12px;
-              line-height: 16px;
-              color: #666;
-              &:after { content: '：' }
+              border-top-left-radius: 6px;
+              border-top-right-radius: 6px;
             }
             &:last-child {
-              font-size: 14px;
-              line-height: 20px;
-              margin-top: 4px;
-              color: #32323c;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              overflow: hidden;
+              border-bottom-left-radius: 6px;
+              border-bottom-right-radius: 6px;
             }
           }
         }
       }
     }
+    &_right {
+      flex: 1;
+    }
+  }
+  .viewer {
+    display: inline-block;
+    vertical-align: top;
+    width: 100%;
+    height: calc(100% - 40px);
+    margin-top: 20px;
+    box-sizing: border-box;
+  }
+  .content_info {
+    margin-left: 90px;
+  }
+  .content_files {
+    margin-right: 60px;
   }
 }
-
 </style>
\ No newline at end of file