项目管理中 添加负责人可修改项目名称的功能

src/views/main_web/project/index.vue

@@ -31,7 +31,15 @@
             <div class="proj-desc-wrap">
               <div class="item">
                 <div class="item-title">项目名称</div>
-                <div class="item-value">{{nowProject.ProjName}}</div>
+                <div v-if="!projectNameEditFlag" class="item-value">
+                  <span style="flex: 1">{{nowProject.ProjName}}</span>
+                  <el-button v-if="isProjManager" size="mini" class="float-button" @click.stop="projectNameEditFlag = true">编辑</el-button>
+                </div>
+                <div v-else class="item-value edit">
+                  <el-input size="mini" class="field-input" :autofocus="true" v-model="editingProjectName" />
+                  <el-button size="mini" @click.stop="renameProjectName">确认</el-button>
+                  <el-button size="mini" @click.stop="projectNameEditFlag = false">取消</el-button>
+                </div>
               </div>
               <div class="item">
                 <div class="item-title">项目负责</div>
@@ -312,8 +320,18 @@
 
         // 
         selectedMemberKeys: [],
+
+        // 编辑项目名称
+        projectNameEditFlag: false,
+        editingProjectName: '',
       }
     },
+    // computed: {
+    //   isProjectManager() {
+    //     console.log(this.listManagerUser, this.currUser);
+    //     return this.listManagerUser.some(user => user.id === this.currUser.id);
+    //   }
+    // },
     components: {
       AppHeader,
       TopHeader,
@@ -344,6 +362,18 @@
       }
 
     },
+    watch: {
+      isEnterEdit(v) {
+        if(v) {
+          this.projectNameEditFlag = false;
+        }
+      },
+      projectNameEditFlag(v) {
+        if(v) {
+          this.editingProjectName = this.nowProject.ProjName;
+        }
+      }
+    },
     mounted() {
       // 从新建项目过来的 一开始直接显示工作指派界面
       this.isShowDistWorkPage = this.$route.query.isShowDistworkPage ? this.$route.query.isShowDistworkPage : this.isShowDistworkPage;
@@ -501,12 +531,31 @@
         this.originPropListCopy = cloneDeep(this.listProjProp);
         this.coverSrc = projectInfoRes.Data.ShowImgUrl;
       },
+      async renameProjectName() {
+        const newName = this.editingProjectName;
+        const updateData = {
+          ProjId:sessionStorage.projId,
+          ProjName:newName,
+          ImgUrl:this.coverSrc,
+        }
+        const res = await EditProject(updateData);
+        if(res.Code == -1){
+          this.$notify({
+            message:'修改失败',
+            type:'success'
+          });
+          return;
+        }
+        this.projectNameEditFlag = false;
+        this.nowProject.ProjName = newName;
+      },
       async coverUploadSuccess(file) {
         const filePath = wrapOssProtocol(file.ossUrl);
         this.coverSrc = filePath;
         var updateData = {
           ProjId:sessionStorage.projId,
           ImgUrl:this.coverSrc,
+          ProjName: this.nowProject.ProjName,
         }
         const res = await EditProject(updateData);
         if(res.Code == -1){
@@ -1267,8 +1316,9 @@ function mergeFolderList(plainFolderList, userHash) {
     .item {
       display: flex;
       width: 100%;
-      margin: 14px 0;
+      margin: 12px 0;
       font-size: 14px;
+      line-height: 24px;
       font-family: PingFangSC-Regular;
       color: #32323C;
       .item-title {
@@ -1277,11 +1327,31 @@ function mergeFolderList(plainFolderList, userHash) {
         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;
+      }
     }
   }