项目页面切换

src/views/manager/projectinfo/detail.vue

@@ -65,7 +65,16 @@
         </el-tab-pane>
         <el-tab-pane label="分配系统维护人员" name="3">
           <div>
-            
+            <div class="flex jc-al-c">
+              <span class="mg-r-10">项目名称</span>
+              <el-input v-model="projectForm.projectName" disabled style="width:300px;margin-right:30px;"></el-input>
+              <span class="mg-r-10">合同段名称</span>
+              <el-select v-model="cId" placeholder="请选择">
+                <el-option label="全部"  value=""></el-option>
+                <el-option v-for="item in contractList" :key="item.id" :label="item.contractName"  :value="item.id"></el-option>
+              </el-select>
+            </div>
+            <el-divider></el-divider>
           </div>
         </el-tab-pane>
       </el-tabs>
@@ -83,12 +92,18 @@
 
 <script>
   import {submitProject,getProjectDeatil} from "@/api/manager/projectinfo";
+  import {findContractByProjectId} from "@/api/manager/contractinfo";
   import {getDictionary} from "@/api/system/dict";
   import {mapGetters} from "vuex";
   export default {
     data() {
       return {
         activeType:'1',
+        typeChang:{
+          1:false,
+          2:false,
+          3:false,
+        },
 
         id:'',
         highwayGradeList:[],
@@ -103,15 +118,44 @@
             { required: true, message: '请输入项目别名', trigger: 'blur' },
           ],
         },
+
+        contractList:[],
+        cId:'',
       }
     },
     computed: {
       ...mapGetters(["userInfo"]),
     },
+    watch:{
+      projectForm:{
+        handler: function() { // 此处注意，handler函数不能为箭头函数，this会取上下文，而不是组件里的this,此外，深度监听，必须为handler函数名，否则会无效果
+          this.typeChang['1'] = true;
+        },
+        deep: true
+      },
+      activeType: function (newValue) {
+        if(newValue == '3'){
+          if(this.contractList.length < 1){
+            findContractByProjectId(this.projectForm.id).then((res)=>{
+              this.contractList = res.data.data;
+            })
+          }
+        }
+      }
+    },
     created() {
       this.init();
       //console.log(this.userInfo)
     },
+    mounted(){
+      this.$nextTick(()=>{
+        this.typeChang = {
+          1:false,
+          2:false,
+          3:false,
+        }
+      })
+    },
     methods: {
      init(){
        this.getHighwayGradeList();
@@ -120,31 +164,64 @@
          this.getProjectDeatil();
        }
      },
-     beforeLeave(activeName, oldActiveName){
-       console.log(oldActiveName,'oldActiveName');
-       console.log(this.activeType);
+      beforeLeave(activeName, oldActiveName){
+       if(this.typeChang[oldActiveName]){
+         this.$confirm('检测到新编辑内容, 是否保存?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '不用',
+          type: 'warning'
+        }).then(() => {
+          switch (oldActiveName) {
+            case '1':
+              this.saveProject().then((res)=>{
+                this.projectForm.id = res.data.data.id;
+                this.$message({
+                  type: "success",
+                  message: "保存成功!"
+                });
+              });
+              break;
+          }
+        })
+       }
      },
 
      getProjectDeatil(){
         getProjectDeatil(this.id).then((res)=>{
           this.projectForm = res.data.data;
+          this.$nextTick(()=>{
+            this.typeChang['1'] = false;
+          })
         })
       },
 
-     saveQuit(){
-       this.saveProject().then((res)=>{
-         this.projectForm.id = res.data.data.id;
-         this.$message({
-            type: "success",
-            message: "保存成功!"
-          });
-          this.$router.go(-1);
-       }).catch((res)=>{
-         console.log(res)
-       })
+     async saveQuit(){
+       if(this.activeType == '1'){
+          await this.saveProject();
+        }
+       this.$message({
+          type: "success",
+          message: "保存成功!"
+        });
+        this.$router.go(-1);
      },
-     saveNext(){
-
+     async saveNext(){
+        if(this.activeType == '1'){
+          let res = await this.saveProject();
+          this.projectForm.id = res.data.data.id;
+        }
+        this.$message({
+          type: "success",
+          message: "保存成功!"
+        });
+        this.typeChang[this.activeType] = false;
+        let num = Number(this.activeType);
+        if(num >2){
+          this.activeType = '1';
+        }else{
+          num++;
+          this.activeType = num.toString();
+        }
      },
      saveProject(){
        return new Promise((resolve, reject) => {