update

src/components/icon-triangle-circle/index.vue

@@ -1,6 +1,6 @@
 
 <template>
-  <div :style="{ width: `${size}px`, height: `${size}px` }">
+  <div class="icon-triangle-circle" :style="{ width: `${size}px`, height: `${size}px` }">
     <svg width="100%" height="100%" viewBox="0 0 100 100">
       <circle
         cx="50"
@@ -52,33 +52,34 @@ export default {
 .icon-triangle-circle {
   position: relative;
   display: inline-block;
-  vertical-align: top;
-  width: 1em;
-  height: 1em;
-  box-sizing: border-box;
-  .circle {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    box-sizing: border-box;
-    top: 12%;
-    width: 90%;
-    height: 90%;
-    border-radius: 50%;
-    border: 2px solid transparent;
-  }
-  > i {
-    position: absolute;
-    width: 32%;
-    height: 32%;
-    border-radius: 50%;
-    box-sizing: border-box;
-    &:nth-child(2) { top: 0; left: 0; right: 0; margin: 0 auto; }
-    &:nth-child(3) { bottom: 0; left: 0; }
-    &:nth-child(4) { bottom: 0; right: 0; }
-  }
+  // display: inline-block;
+  // vertical-align: top;
+  // width: 1em;
+  // height: 1em;
+  // box-sizing: border-box;
+  // .circle {
+  //   position: absolute;
+  //   top: 0;
+  //   bottom: 0;
+  //   left: 0;
+  //   right: 0;
+  //   margin: auto;
+  //   box-sizing: border-box;
+  //   top: 12%;
+  //   width: 90%;
+  //   height: 90%;
+  //   border-radius: 50%;
+  //   border: 2px solid transparent;
+  // }
+  // > i {
+  //   position: absolute;
+  //   width: 32%;
+  //   height: 32%;
+  //   border-radius: 50%;
+  //   box-sizing: border-box;
+  //   &:nth-child(2) { top: 0; left: 0; right: 0; margin: 0 auto; }
+  //   &:nth-child(3) { bottom: 0; left: 0; }
+  //   &:nth-child(4) { bottom: 0; right: 0; }
+  // }
 }
 </style>

src/views/main_web/project/index.vue

@@ -378,7 +378,7 @@
           <div class="item-title">封面</div>
           <div
             class="item-value cover-img-wrap use-relative"
-            :style="showBackground(coverSrc)"
+            :style="showBackground(nestProjectInfo.showImgUrl)"
           />
         </div>
         <div class="item">
@@ -1768,10 +1768,14 @@ function generateTreeNode(plainFolderList) {
 
 .nest-project-modal {
   ::v-deep {
+    .el-dialog {
+      overflow: hidden;
+    }
     .el-dialog__header {
       text-align: left;
       background-color: #f8f8f8;
       padding: 15px 24px;
+      
     }
   }
   &-title {

src/views/main_web/workspace/components/work-flow.vue

@@ -7,7 +7,7 @@
           v-for="(myfolder, index) in folderList"
           :key="myfolder.id"
         >
-          <!-- 移入按钮 -->
+          <!-- 输入列表 -->
           <div class="upList">
             <div class="enterPoint">
               <div
@@ -30,6 +30,7 @@
               <i class="el-icon-caret-bottom bottomenter"></i>
             </div>
           </div>
+
           <div class="conterpoint">
             <button
               type="button"
@@ -47,7 +48,8 @@
               v-if="index < folderList.length - 1"
             ></i>
           </div>
-          <!-- 移出按钮 -->
+
+          <!-- 输出列表 -->
           <div
             class="bottomlist"
             v-if="myfolder.listsShareFrom[0].length > 0"
@@ -66,6 +68,18 @@
                   :title="share"
                 >{{share.nodeName}}</span>
               </div>
+              <div
+                class="linkBtn2 leftlinebox nest-project-node"
+                v-if="myfolder.nestProjectId && myfolder.nestProjectId !== '0'"
+                @click="checkNestProject(myfolder)"
+              >
+                <i class="leftline"></i>
+                <icon-triangle-circle :size="12" color="#3C7DFF" />
+                <span
+                  class="worllistt2"
+                  :title="myfolder.nestProjectName"
+                >{{myfolder.nestProjectName}}</span>
+              </div>
               <div class="outLine">
                 <i class="el-icon-caret-bottom bottomenter"></i>
               </div>
@@ -74,30 +88,141 @@
         </div>
       </div>
     </div>
+    <el-dialog
+      :visible.sync="nestProjectModalVisible"
+      v-if="nestNodeFolder"
+      center
+      top="48px"
+      width="660px"
+      class="nest-project-modal"
+    >
+      <template #title>
+        <div class="nest-project-modal-title">
+          <span>{{nestNodeFolder.folderName}}的互链项目</span>
+          <el-button @click.stop="nestProjectModalVisible = false">关闭</el-button>
+        </div>
+      </template>
+      <div
+        class="proj-desc-wrap dialog-detail"
+        v-if="nestProjectInfo"
+      >
+        <div class="item">
+          <div class="item-title">项目名称</div>
+          <div class="item-value">
+            <span style="flex: 1">{{nestProjectInfo.projName}}</span>
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-title">项目负责</div>
+          <div class="item-value">{{nestProjectInfo.projCreateUserName}}</div>
+        </div>
+        <div class="item cover-container">
+          <div class="item-title">封面</div>
+          <div
+            class="item-value cover-img-wrap use-relative"
+            :style="showBackground(nestProjectInfo.showImgUrl)"
+          />
+        </div>
+        <div class="item">
+          <div class="item-title proj-main-template">项目主要模板</div>
+          <div class="item-value">{{nestProjectInfo.tempName}}</div>
+        </div>
+        <div class="item">
+          <div class="item-title">模板负责</div>
+          <div class="item-value">{{nestProjectInfo.tempCreateUserName}}</div>
+        </div>
+        <div class="item">
+          <div class="item-title">创建时间</div>
+          <div class="item-value">{{nestProjectInfo.projCreateTime}}</div>
+        </div>
+        <div
+          class="item"
+          v-for="prop in (nestProjectInfo.customProps || [])"
+          :key="prop.TempPropId"
+        >
+          <div class="item-title">{{prop.PropertyName ? prop.PropertyName : '自定义字段'}}</div>
+          <div class="item-value">{{prop.PropValue}}</div>
+        </div>
+      </div>
+      <div>
+        <!-- <el-button
+          class="remove-button"
+          type="danger"
+          plain
+        >切换项目</el-button> -->
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 
 <script>
 import { queryFileExchange, queryNestTemplateByProjectId } from '@/services/template';
+import IconTriangleCircle from '@/components/icon-triangle-circle';
+import * as prjService from "@/services/project";
+import { wrapErrorHint } from '@/utils/request';
+import dayjs from 'dayjs';
+import { firstCharToLowerCase } from '@/utils/tool';
+
 export default {
+  components: {
+    IconTriangleCircle
+  },
   props: {
     projectId: String,
     currentNodeFolder: Object,
     folderList: Array,
   },
+  data() {
+    return {
+      nestNodeFolder: {}, //嵌套点的folder信息
+      nestProjectInfo: {},
+      nestProjectModalVisible: false,
+    }
+  },
   mounted() {
     this.fetchFileExchange();
   },
   watch: {
     folderList() {
       this.fetchFileExchange();
-    }
+    },
+    nestProjectModalVisible(flag) {
+      if (!flag) {
+        this.nestProjectInfo = {};
+      }
+    },
   },
   methods: {
+    // 处理图片路径
+    showBackground(imgUrl) {
+      let resolveImg = this.$options.filters["resolveImg"];
+      const src = resolveImg(imgUrl);
+      return {
+        background: `center/cover no-repeat url(${src})`,
+      };
+    },
     selectFolder(folder) {
       this.$emit('select', folder);
     },
+    async checkNestProject(folder) {
+      const { nestProjectId } = folder;
+      this.nestNodeFolder = folder;
+      this.nestProjectModalVisible = true;
+      const projectInfoRes = await prjService.QueryProjectInfoByProjId(
+        nestProjectId
+      );
+      wrapErrorHint(projectInfoRes);
+      if (projectInfoRes.Code !== 0) {
+        return;
+      }
+      const nestProjectInfo = firstCharToLowerCase(projectInfoRes.Data || {});
+      nestProjectInfo.projCreateTime = dayjs(
+        nestProjectInfo.projCreateTime
+      ).format("YYYY/MM/DD");
+      this.nestProjectInfo = nestProjectInfo;
+      console.log(nestProjectInfo);
+    },
     async fetchFileExchange() {
       if(!this.folderList || !this.folderList.length) { return; }
       const mainTemplateId = this.folderList[0]?.templateId;
@@ -192,5 +317,128 @@ export default {
       align-items: center;
     }
   }
+  .nest-project-node {
+    background-color: #fff;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    .worllistt2 {
+      margin-left: 4px;
+      display: inline;
+      
+    }
+  }
+}
+
+.nest-project-modal {
+  ::v-deep {
+    .el-dialog {
+      overflow: hidden;
+    }
+    .el-dialog__header {
+      text-align: left;
+      background-color: #f8f8f8;
+      padding: 15px 24px;
+    }
+  }
+  &-title {
+    display: flex;
+    font-size: 20px;
+    line-height: 30px;
+    justify-content: space-between;
+  }
+  .remove-button {
+    width: 100%;
+  }
+}
+
+.dialog-detail {
+  padding: 0 24px;
+  background: #fff;
+
+  .cover-container {
+    height: 226px;
+    margin: 0 0 32px 0 !important;
+    border-radius: 8px;
+
+    .cover-img-wrap {
+      position: relative;
+      width: 293px;
+      height: 226px;
+      overflow: hidden;
+      border-radius: 8px;
+      box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, 0.2);
+
+      .cover-img {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        height: 100%;
+        border-radius: 8px;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .edit-cover-btn {
+      position: absolute;
+      left: 12px;
+      bottom: 12px;
+      width: 64px;
+      height: 28px;
+      line-height: 28px;
+      border-radius: 4px;
+      background-color: rgba(255, 255, 255, 1);
+      border: 0.5px solid rgba(151, 151, 151, 1);
+      color: rgba(50, 50, 60, 100);
+      font-size: 14px;
+      text-align: center;
+      font-family: PingFangSC-Regular;
+    }
+  }
+  .item {
+    display: flex;
+    width: 100%;
+    margin: 12px 0;
+    font-size: 14px;
+    line-height: 24px;
+    font-family: PingFangSC-Regular;
+    color: #32323c;
+    .item-title {
+      color: #62492f;
+      width: 24%;
+      text-align: right;
+    }
+    .item-value {
+      position: relative;
+      margin: 0 0 0 12px;
+      &:not(.cover-img-wrap) {
+        flex: 1;
+        display: flex;
+      }
+      &.edit {
+        display: inline-flex;
+      }
+    }
+    .field-input {
+      flex: 1;
+      width: 140px;
+      margin-right: 10px;
+      line-height: 0;
+      ::v-deep .el-input__inner {
+        margin-top: 0;
+        height: 24px;
+        line-height: 24px;
+      }
+    }
+    .float-button {
+      margin-left: 10px;
+    }
+  }
+
+  .proj-main-template + .item-value {
+    position: relative;
+    top: -2.5px;
+    color: rgba(50, 50, 60, 100);
+    font-size: 18px;
+  }
 }
 </style>