项目列表页 增加解除互链渠道

src/components/link-project-info-modal/index.vue

@@ -0,0 +1,236 @@
+<template>
+  <el-dialog
+    :visible.sync="innerVisible"
+    center
+    top="48px"
+    width="660px"
+    class="nest-project-modal"
+  >
+    <template #title>
+      <div class="nest-project-modal-title">
+        <span>{{title}}</span>
+        <el-button @click.stop="innerVisible = false">关闭</el-button>
+      </div>
+    </template>
+    <div class="dialog-detail">
+      <div class="item">
+        <div class="item-title">项目名称</div>
+        <div class="item-value">
+          <span style="flex: 1">{{linkProjectInfo.projName}}</span>
+        </div>
+      </div>
+      <div class="item">
+        <div class="item-title">项目负责</div>
+        <div class="item-value">{{linkProjectInfo.projCreateUserName}}</div>
+      </div>
+      <div class="item cover-container">
+        <div class="item-title">封面</div>
+        <div
+          class="item-value cover-img-wrap use-relative"
+          :style="showBackground(linkProjectInfo.showImgUrl)"
+        />
+      </div>
+      <div class="item">
+        <div class="item-title proj-main-template">项目主要模板</div>
+        <div class="item-value">{{linkProjectInfo.tempName}}</div>
+      </div>
+      <div class="item">
+        <div class="item-title">模板负责</div>
+        <div class="item-value">{{linkProjectInfo.tempCreateUserName}}</div>
+      </div>
+      <div class="item">
+        <div class="item-title">创建时间</div>
+        <div class="item-value">{{linkProjectInfo.projCreateTime}}</div>
+      </div>
+      <div
+        class="item"
+        v-for="prop in (linkProjectInfo.customProps || [])"
+        :key="prop.TempPropId"
+      >
+        <div class="item-title">{{prop.PropertyName ? prop.PropertyName : '自定义字段'}}</div>
+        <div class="item-value">{{prop.PropValue}}</div>
+      </div>
+    </div>
+    <div>
+      <slot name="foot">
+      </slot>
+      <!-- <el-button
+        class="remove-button"
+        type="danger"
+        plain
+        @click.stop="severNestProject"
+      >解除项目互链</el-button> -->
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import * as prjService from "@/services/project";
+import { firstCharToLowerCase } from '@/utils/tool';
+import { wrapErrorHint } from '@/utils/request';
+import dayjs from 'dayjs';
+
+export default {
+  props: {
+    title: String,
+    visible: Boolean,
+    projectId: String,
+  },
+  data() {
+    return {
+      linkProjectInfo: {},
+      innerVisible: this.visible,
+    };
+  },
+  watch: {
+    projectId(id) {
+      if(id) {
+        this.checkProject(id);
+      }
+    },
+    innerVisible(v) {
+      this.$emit('update:visible', v)
+    },
+    visible(v) {
+      this.innerVisible = v;
+    },
+  },
+  methods: {
+    showBackground(imgUrl) {
+      let resolveImg = this.$options.filters["resolveImg"];
+      const src = resolveImg(imgUrl);
+      return {
+        background: `center/cover no-repeat url(${src})`,
+      };
+    },
+    async checkProject(id) {
+      const projectInfoRes = await prjService.QueryProjectInfoByProjId(id);
+      wrapErrorHint(projectInfoRes);
+      if (projectInfoRes.Code !== 0) {
+        return;
+      }
+      const projectInfo = firstCharToLowerCase(projectInfoRes.Data || {});
+      projectInfo.projCreateTime = dayjs(
+        projectInfo.projCreateTime
+      ).format("YYYY/MM/DD");
+      this.linkProjectInfo = projectInfo;
+    },
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+.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>

src/views/main_web/index/index.vue

@@ -108,7 +108,7 @@
         @click.stop="createNewProjectClick"
         v-if="isUserPerm"
       >新建项目</button>
-      <template v-if="linkApplyList && linkApplyList.length">
+      <!-- <template v-if="linkApplyList && linkApplyList.length">
         <div class="group-title">待互链的项目</div>
         <div class="linkItem-list">
           <el-row :gutter="64">
@@ -140,8 +140,8 @@
             </el-col>
           </el-row>
         </div>
-      </template>
-      
+      </template> -->
+
       <!-- <el-button @click.stop="linkDialogVisible = true">弹窗测试</el-button> -->
       <div class="group-title">最近的项目</div>
       <!-- 项目列表 -->
@@ -151,10 +151,11 @@
         @watchAllBtnClick="watchAllBtnClick"
         @lookProjDetailClick="lookProjDetailClick"
         @on-remove="onRemoveProject"
+        @check-parent-project="checkParentProject"
         :isUserPerm="isUserPerm"
       >
       </proj-list>
-      <el-dialog
+      <!-- <el-dialog
         class="linkDialog"
         width="460px"
         :visible.sync="linkDialogVisible"
@@ -173,8 +174,23 @@
         >通过新建项目互链</el-button>
         <el-button class="block-button">选择已有项目建立互链</el-button>
         <el-button class="block-button">拒绝互链邀请</el-button>
-      </el-dialog>
+      </el-dialog> -->
     </div>
+    <link-project-info-modal
+      :title="`${pickedProject.ProjName}的上层互链项目`"
+      :visible.sync="linkProjectInfoModalVisible"
+      :projectId="linkProjectId"
+    >
+      <template #foot>
+        <el-button
+          class="remove-button"
+          type="danger"
+          plain
+          @click.stop="severNestProject"
+        >解除互链关系</el-button>
+      </template>
+      
+    </link-project-info-modal>
   </div>
 </template>
 
@@ -188,20 +204,24 @@ import { haveAccess, AccessCode } from "@/utils/access";
 import * as prjService from "@/services/project";
 import Timer from "@/views/main_web/time";
 import ProjList from "@/views/main_web/proj-list";
-import IconTriangleCircle from "@/components/icon-triangle-circle";
+// import IconTriangleCircle from "@/components/icon-triangle-circle";
+import LinkProjectInfoModal from '@/components/link-project-info-modal';
 
 import { debounce } from "lodash";
+import { wrapErrorHint } from '@/utils/request';
+import { notify } from '@/utils/tool';
 export default {
   elNew: "#new", //样式ID,用于动画
   components: {
     SearchBar,
+    LinkProjectInfoModal,
     // DistWork,
     // NewProj,
     // ProjSetting,
     Timer,
     AppHeader,
     ProjList,
-    IconTriangleCircle,
+    // IconTriangleCircle,
   },
   data() {
     const { currentPlatform } = this.$store.state;
@@ -228,8 +248,12 @@ export default {
 
       homeScrollTop: 0,
       contentBodyEl: null, //bigbody dom元素
-      linkDialogVisible: false,
-      linkDialogContextData: null,
+      // linkDialogVisible: false,
+      // linkDialogContextData: null,
+
+      pickedProject: {},
+      linkProjectInfoModalVisible: false,
+      linkProjectId: undefined,
     };
   },
   computed: {
@@ -402,12 +426,32 @@ export default {
     },
 
     /* 互链邀请相关API */
-    // 拒绝互链邀请
-    async refuseLinkApply() {
-      const linkData = this.linkDialogContextData;
-      debugger;
-      // const res = await this.$fetchApi('projectLinkInvite/refuseProjectLinkInvite', {  });
-
+    // 
+    checkParentProject(projectItem) {
+      this.pickedProject = projectItem;
+      this.linkProjectInfoModalVisible = true;
+      this.linkProjectId = projectItem.ParentProjId;
+    },
+    // 解除互链关系
+    severNestProject() {
+      const pickedProject = this.pickedProject;
+      this.$confirm(
+        "解除互链不会影响双方项目的文件数据，解除后将无法进行文件交付，确定解除吗？",
+        {
+          confirmButtonText: "解除互链关系",
+          cancelButtonText: "取消",
+          type: "danger",
+        }
+      )
+      .then(async () => {
+        const res = await this.$fetchApi('project/deleteProjectLink', { folderId: pickedProject.ParentFolderId, nestProjectId: pickedProject.Id })
+        wrapErrorHint(res);
+        if(res.Code !== 0) { return; }
+        notify.success('互链关系已接触');
+        this.linkProjectInfoModalVisible = false;
+        // this.fetchProjectDetail();
+        this.listProjects();
+      });
     },
   },
 };
@@ -511,11 +555,11 @@ export default {
   &-list {
     padding: 0 32px + 30px;
   }
-  >div {
+  > div {
     &:first-child {
       flex: none;
       height: 30px;
-      color: #2896E6;
+      color: #2896e6;
       line-height: 30px;
       > span {
         margin-left: 10px;
@@ -534,4 +578,7 @@ export default {
     }
   }
 }
+.remove-button {
+    width: 100%;
+  }
 </style>

src/views/main_web/proj-item.vue

@@ -24,7 +24,10 @@
         </span>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item class="danger_button">
-            <span @click.stop="removeProject()">删除</span>
+            <span @click.stop="removeProject()">删除项目</span>
+          </el-dropdown-item>
+          <el-dropdown-item v-if="projItem.ParentProjId && projItem.ParentProjId !== '0'">
+            <span @click.stop="checkParentProject()">查看上层互链项目</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -92,6 +95,9 @@ export default {
     manageProj() {
       this.$router.push("/newproject");
     },
+    checkParentProject() {
+      this.$emit('check-parent-project', this.projItem)
+    },
     removeProject() {
       const projectName = this.projItem.ProjName;
       // 删除项目后所有文件将被置入回收站中，但您可在回收站操作拷贝转移，确定删除项目？
@@ -203,6 +209,7 @@ export default {
     border-radius: 50%;
     background-color: #fff;
     color: #000;
+    
   }
 
   &_content {
@@ -251,6 +258,9 @@ export default {
 
   transition: bottom 0.07s ease-in;
 }
+.danger_button {
+  color: #f56c6c;
+}
 .newprj_icon {
   width: 52px;
   height: 20px;

src/views/main_web/proj-list.vue

@@ -31,6 +31,7 @@
                 @lookProjDetailClick="lookProjDetailClick(projItem)"
                 @watchAllBtnClick="watchAllBtnClick(projItem, index)"
                 @on-remove="onRemoveProject"
+                @check-parent-project="checkParentProject"
                 :isUserPerm="isUserPerm"
               />
             </el-col>
@@ -85,6 +86,9 @@ export default {
     onRemoveProject(projItem) {
       this.$emit('on-remove', projItem);
     },
+    checkParentProject(projItem) {
+      this.$emit('check-parent-project', projItem)
+    },
     // 点击了项目管理按钮
     lookProjDetailClick(projItem) {
       this.$emit("lookProjDetailClick", projItem);