企业后台 模板update

src/components/nodes-viewer/index.vue

@@ -3,7 +3,7 @@
     ref="mindDom"
     :id="domId"
     class="nodes-viewer"
-    :style="{ width: width, height: height, ...style }"
+    :style="{ width: width, height: height }"
     @mousewheel.stop="onWheel"
   >
   </div>
@@ -26,10 +26,6 @@ export default {
     height: {
       type: String,
       default: '',
-    },
-    style: {
-      type: Object,
-      default: () => ({}),
     }
   },
   data() {

src/views/manage_company/template/detail.vue

@@ -11,46 +11,123 @@
     <app-header
       theme="white"
       :showBackBtn="true"
-      backBtnTitle="模板市场"
+      :backBtnTitle="prevViewName || '返回'"
     >
       <template #center>{{templateName}}</template>
       <template #right>
-        <el-button type="primary">添加模板</el-button>
+        <template v-if="templateIsAdded !== undefined">
+          <el-button type="primary" v-if="!templateIsAdded">添加模板</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 " />
+        </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>
   </div>
 </template>
 
 <script>
 import appHeader from "@/components/app-header/app-header.vue";
 import nodesViewer from "@/components/nodes-viewer";
-import { queryTemplateNodeByTemplateId } from '@/services/template';
+import { queryTemplateById, queryTemplateNodeByTemplateId } from '@/services/template';
+import { firstCharToLowerCase } from '@/utils/tool';
+import { queryAllIndustry } from '@/services/industry';
 
   export default {
     components: { appHeader, nodesViewer },
     data() {
-      const { id: templateId, name: templateName } = this.$route.params;
+      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: '', // 模板状态
       };
     },
     created: function () {
       this.fetchTemplateNodes();
+      this.fetchTemplateInfo();
     },
     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(),
+          this.$fetchApi('template/queryTemplateByCompanyId', { companyId: 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;
+        }
+
+        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;
       }
     }
   };
@@ -60,11 +137,100 @@ import { queryTemplateNodeByTemplateId } from '@/services/template';
 .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 {
+          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>

src/views/manage_company/template/index.vue

@@ -46,7 +46,7 @@
             <span class="addlebel">添加模板</span>
           </div>
         </div>
-        <div class="card" v-for="temp in listTemp" :key="temp.id">
+        <div class="card" v-for="temp in listTemp" :key="temp.id" @click.stop="checkTemplateDetail(temp)">
             <div class="card_inner">
               <h3 class="card_title">{{ temp.tempName }}</h3>
               <div class="card_right">
@@ -90,6 +90,18 @@ import { firstCharToLowerCase } from '@/utils/tool';
       this.loadlistTemp();
     },
     methods: {
+      checkTemplateDetail: function (templateNode) {
+        this.$router.push({
+          name: "company_template_detail",
+          params: {
+            name: templateNode.tempName,
+            id: templateNode.id,
+            prevViewName: '模板与应用',
+            // data: templateNode.data,
+            // title: "ModelItem"
+          }
+        });
+      },
       /**
        * @description: 添加模板
        * @param {type} 
@@ -135,13 +147,13 @@ import { firstCharToLowerCase } from '@/utils/tool';
       box-sizing: border-box;
       transition: transform 0.2s linear;
       transform: scale(1);
+      cursor: pointer;
       &:not(.add):hover {
         transform: scale(1.05);
         border-color: transparent;
       }
       &.add {
         background-color: transparent;
-        cursor: pointer;
       }
       &_inner {
         position: relative;

src/views/manage_company/template/market.vue

@@ -106,6 +106,7 @@ export default {
           params: {
             name: templateNode.label,
             id: templateNode.id,
+            prevViewName: '模板市场',
             // data: templateNode.data,
             // title: "ModelItem"
           }