zhaoshangyinziV3_UI/src/views/project/add.vue

<template>
  <div>

    <div class="addbox">
      <!-- 步骤条 -->
      <div class="steps">
        <div class="step" :class="{'finish':progress>ite.dictValue,'act':progress==ite.dictValue}" v-for="(ite,idx) in step" :key="idx" >
          <div class="tit flexc"><span>{{idx+1}}</span>{{ite.dictLabel}}
            <div class="line"></div>
          </div>
          <div class="list" v-for="(aite,aidx) in ite.desc" :key="aidx">
            <span class="cir"></span>{{aite.tit}}
          </div>
        </div>
      </div>
      <!-- 标签页 -->
      <div class="tabs">
        <!-- <div class="flex1" style="overflow: hidden;"> -->
          <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane name="first">
                <div slot="label" class="tab flexc">
                  <img class="tabimg" v-if="activeName=='first'" src="@/assets/images/project/taba_.png"/>
                  <img class="tabimg" v-else src="@/assets/images/project/taba.png"/>
                  <span>签约环节
                  </span>
                </div>
                <first-info-form v-if="activeName=='first'" ref="firstInfo" :cylbOptions="cylbOptions" :qybjOptions="qybjOptions" :info="qyxxinfo" @getSubmit="getSubmitqxyy" :xmbh="xmbh"></first-info-form>
              </el-tab-pane>
              <el-tab-pane  name="second" :disabled="isdisabled">
                <div slot="label" class="tab flexc" @click="handleClicka">
                  <img class="tabimg" v-if="activeName=='second'" src="@/assets/images/project/tabb_.png"/>
                  <img class="tabimg" v-else src="@/assets/images/project/tabb.png"/>
                  <span>开工环节
                  </span>
                </div>
                <second-info-form v-if="activeName=='second'" ref="secondInfo" :xmbh="xmbh" :info="kghjinfo" @getSubmit="getKgxxDetail"></second-info-form>
              </el-tab-pane>
              <el-tab-pane  name="third" :disabled="isdisabled">
                <div slot="label" class="tab flexc" @click="handleClicka">
                  <img class="tabcimg" v-if="activeName=='third'" src="@/assets/images/project/tabc_.png"/>
                  <img class="tabcimg" v-else src="@/assets/images/project/tabc.png"/>
                  <span>建设环节
                  </span>
                </div>
                <third-info-form v-if="activeName=='third'" ref="thirdInfo" :info="jshjinfo"></third-info-form>
                </el-tab-pane>
              <el-tab-pane  name="fourth" :disabled="isdisabled">
                <div slot="label" class="tab flexc" @click="handleClicka">
                  <img class="tabdimg" v-if="activeName=='fourth'" src="@/assets/images/project/tabd_.png"/>
                  <img class="tabdimg" v-else src="@/assets/images/project/tabd.png"/>
                  <span>投产环节
                  </span>
                </div>
                <fourth-info-form v-if="activeName=='fourth' " ref="fourthInfo" :info="tchjinfo"></fourth-info-form>
                </el-tab-pane>
            </el-tabs>

            <div class="btns flexcc">
              <el-button v-hasPermi="['zhaoshangV3:qyxx:edit']" type="success" size="small" @click="hunpl">完成</el-button>
            </div>
        <!-- </div> -->


      </div>

    </div>
  </div>
</template>

<script>
  import firstInfoForm from "./firstInfoForm"
  import secondInfoForm from "./secondInfoForm"
  import thirdInfoForm from "./thirdInfoForm"
  import fourthInfoForm from "./fourthInfoForm"
  import { getXmbh,addQyxx, updateQyxx, delQyxx, getQyxx,listQyxx } from "@/api/zhaoshang/qyxx"
  import {addKgxx, updateKgxx, delKgxx, getKgxxNum,listKgxx } from "@/api/zhaoshang/kgxx"
  import {addJsxx, updateJsxx, delJsxx, getJsxxNum,listJsxx } from "@/api/zhaoshang/jsxx"
  import {addTcxx, updateTcxx, delTcxx, getTcxxNum,listTcxx } from "@/api/zhaoshang/tcxx"
  export default{
    components:{
      firstInfoForm,secondInfoForm,thirdInfoForm,fourthInfoForm
    },
    data() {
      return{
        step:[
          {tit:'立项',desc:[{tit:'新建'},{tit:'审核'}]},
          {tit:'签约',desc:[{tit:'签约双方信息'},{tit:'签约项目信息'},{tit:'附件上传'}]},
          {tit:'开工',desc:[{tit:'开工前相关手续办理'},{tit:'开工信息'},{tit:'附件上传'}]},
          {tit:'建设',desc:[{tit:'建设信息'},{tit:'附件上传'}]},
          {tit:'投产',desc:[{tit:'投产信息'},{tit:'附件上传'}]},
          {tit:'完成',desc:[{tit:'提交'},{tit:'审核'}]},
        ],
        activeName:'first',
        // 表详细信息
        qyxxinfo: {
          // "qyxxId":"",//签约信息ID
          // "xmId":null,//项目编号
          "xmbh":null,//项目编号
          "xmmc":null,//项目名称
           "tzfkId":null,//投资方资方库id
          "tzf":null,//投资方
           "sdzf":null,//属地政府
           "qyrq":null,//签约日期
           "xmlrr":null,//项目录入人
           "job":null,//录入人职务
           "lrrPhone":null,//录入人联系方式
            "baztze":null,//备案总投资额
           "lxsjTime":null,//立项时间
           "cylb":null,//产业类别
            "jsnr":null,//建设内容
           "tzqybj":null,//投资企业背景
            "zcqymc":null,//在潜注册公司名称
           "zcrq":null,//企业注册日期
           "zczj":null,//注册资金
            "jyfw":null,//经营范围
            "fddbr":null,//法定代表人
           "lxfs":null,//联系方式
           "sjtzze":null,//实际投资总额
             "sjgdzctze":null,//实际固定资产投资额
            "gdmj":null,//供地面积
           "zlcf":null,//租赁厂房
           "lztd":null,//流转土地
            "mjtzqd":null,//亩均投资强度
           "mjsr":null,//亩均收入
           "yjncz":null,//预计年产值
           "yjls":null,//预计利税
           "tzhszq":null,//投资回收周期
           'fjList':null,//附件列表
        },
        // 开工
        kghjinfo: {
          "xmbh":null,//项目编号
        },
        // 建设
        jshjinfo: {
          "xmbh":null,//项目编号
          "timete":null,
        },
        // 投产
        tchjinfo: {
          "xmbh":null,//项目编号
        },

        cylbOptions:[],//产业类型
        qybjOptions:[],//企业背景,
        ptype:'add',//新增还是修改,

        xmId:'',//项目id,
        xmbh:'',//项目编号
        qxtab:[{tit:'签约双方信息'},{tit:'签约项目信息'},{tit:'附件上传'}],
        kgtab:[{tit:'开工前相关手续办理'},{tit:'开工信息'},{tit:'附件上传'}],
        sstab:[{tit:'建设时间'},{tit:'建设进度跟踪'},{tit:'附件上传'}],
        tctab:[{tit:'投产信息'},{tit:'年度统计'},{tit:'附件上传'}],
        wctab:[{tit:'提交'}],
        progress:1,
        isdisabled:true,
      }
    },
    created() {
      this.getDicts("industry_type").then(response => {
        this.cylbOptions = response.data;
      });
      this.getDicts("enterprise_background").then(response => {
        this.qybjOptions = response.data;
      });
      // 项目进度project_schedule
      this.getDicts("project_schedule").then(response => {
        this.step = response.data.map(v => {
          if(v.dictValue==1){
            v.desc=this.qxtab
          }else if(v.dictValue==2){
            v.desc=this.kgtab
          }else if(v.dictValue==3){
            v.desc=this.sstab
          }else if(v.dictValue==4){
            v.desc=this.tctab
          }else if(v.dictValue==5){
            v.desc=this.wctab
          }
        	return {
        		dictLabel: v.dictLabel,
        		dictValue: v.dictValue,
        		desc: v.desc
        	}
        })
        // this.xmjdOptions = response.data;
      });
      if(this.$route.query.id!=-1){
        this.ptype='edit'
        this.xmId=this.$route.query.id;
        this.xmbh=this.$route.query.bh;
        this.getQyxxDetail()
      }else{
        this.ptype='add';
        // this.xmbh='ZS20250714102';
        // this.qyxxinfo.xmbh=this.xmbh
        // this.kghjinfo.xmbh=this.xmbh
        // this.tchjinfo.xmbh=this.xmbh
        // this.jshjinfo.xmbh=this.xmbh

         this.getXmbh()
      }
    },
    mounted() {
      // 获取当前时间
      this.qyxxinfo.qyrq=this.time()
    },
    methods:{
		// 完成
		hunpl(){
			this.qyxxinfo.progress = 5
			updateQyxx(this.qyxxinfo).then(res=>{
			    if(res.code==200){
			      this.$message.success('操作成功');
			    }
			  })
		},
      handleClicka(){
        if(this.isdisabled){
          this.$message.error('请先提交签约信息');
        }
      },
      handleClick(e){
        var name=e.name;
        if(name=='first'){
          this.getQyxxDetail()
        }else if(name=='second'){
          this.getKgxxDetail()
        }else if(name=='third'){
          this.getJsxxDetail()
        }else if(name=='fourth'){
          this.getTcxxDetail()
        }
      },
      getXmbh(){
        getXmbh().then(res=>{
          this.xmbh=res.data;
          this.qyxxinfo.xmbh=res.data;
          this.qyxxinfo.id=-1;
          this.kghjinfo.xmbh=res.data;
          this.jshjinfo.xmbh=res.data;
          this.tchjinfo.xmbh=res.data;
        })
      },
      time() {
				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				var d = date.getDate();
				var h = date.getHours();
				var min = date.getMinutes();
				var s = date.getSeconds();
				var yearStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
				var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
					'0' + s) : s);
        return yearStr
			},
      getSubmitqxyy(params){
        this.xmId=params;
        this.getQyxxDetail()
          // var info=JSON.parse(JSON.stringify(params))
          // if(this.ptype=='add'){
          //   addQyxx(info).then(res=>{
          //     if(res.code==200){
          //        this.$message.success('保存成功');
          //     }
          //   })
          // }else{
          //   updateQyxx(info).then(res=>{
          //     if(res.code==200){
          //       this.$message.success('修改成功');
          //     }
          //   })
          // }
      },
      //签约
      getQyxxDetail(){
        getQyxx(this.xmId).then(res=>{
          if(res.code==200){
            this.qyxxinfo=res.data;
            this.xmbh=res.data.xmbh;
            this.isdisabled=false;
            this.progress=Number(res.data.progress)
          }
        })
      },
      // 开工
      getKgxxDetail(){
        getKgxxNum(this.xmbh).then(res=>{
          if(res.code==200){
            if(res.data){
              this.kghjinfo=res.data
            }else{
              var obj={
                xmbh:this.xmbh,
                id:-1
              }
              this.kghjinfo=JSON.parse(JSON.stringify(obj));
            }
          }
        })
      },
      // 建设
      getJsxxDetail(){
        getJsxxNum(this.xmbh).then(res=>{
          if(res.code==200){
            if(res.data){
              this.jshjinfo=res.data
            }else{
              var obj={
                xmbh:this.xmbh,
                id:-1
              }
              this.jshjinfo=JSON.parse(JSON.stringify(obj));
            }
          }
        })
      },
      // 投产
      getTcxxDetail(){
        getTcxxNum(this.xmbh).then(res=>{
          if(res.code==200){
            if(res.data){
              this.tchjinfo=res.data
            }else{
              var obj={
                xmbh:this.xmbh,
                id:-1
              }
              this.tchjinfo=JSON.parse(JSON.stringify(obj));
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep {
  .el-button{padding: 8px 14px;font-size: 14px;}
  .tabs{width: 100%;
    .el-button--small{background-color: #00A854;}

    .el-tabs__item{padding-right: 0;color: #666666;line-height: 45px;height: 45px;padding-left: 0;}
    .el-tabs__active-bar{background: #2777D0;}
    .is-active{color: #2777D0;font-weight: bold;}
  }

}
.flex{display: flex;}
.flexc{display: flex;align-items: center;}
.flex1{flex: 1;}
.addbox{padding: 14px 12px 25px;
  .steps{background: #FFFFFF;border-radius: 4px;padding: 30px 60px 24px 85px;display: flex;
    .step{flex-basis: 50%;position: relative;
      &.finish,&.act{
        .tit{color: #3D455B;
          span{background: #1890FF;color: #FFFFFF;border: none;}

        }
      }
      &.finish{
         .line{background-color: #1890FF !important;}
         .list{
           .cir{background: #00A854;}
         }
      }
      &:last-child{
        .line{display: none !important;}
      }
      .tit{font-weight: bold;font-size: 16px;color: #666666;margin-bottom: 10px;
        span{width: 24px;height: 24px;background: #FFFFFF;border-radius: 50%;border: 1px solid #DADADA;font-weight: bold;display: flex;align-items: center;justify-content: center;flex: 0 0 auto;
font-size: 14px;color: #AAAAAA;margin-right: 12px;}
        .line{height: 2px;margin-left: 18px;margin-right: 18px;flex: 1;

background: #E6E6E6;}
      }
    }
    .list{font-weight: 500;font-size: 12px;color: #9B9B9B;line-height: 24px;padding-left: 8px;
      .cir{width: 8px;height: 8px;background: #BFBFBF;border-radius: 50%;display: inline-block;margin-right: 8px;}
    }
  }
}
.tabs{position: relative;
  .tab{padding: 0 21px;}
  .tabimg{width: 14px;height: 14px;margin-right: 8px;}
  .tabcimg{width: 13px;height: 13px;margin-right: 9px;}
  .tabdimg{width: 14px;height: 15px;margin-right: 8px;}
  .btns{height: 45px;box-sizing: border-box;position: absolute;right: 0;top: 0;
  }
}
</style>