zhaoshangyinziV3_UI/src/views/zhaoshang/Information/index.vue

<template>
  <div>

    <div class="addbox">
      <!-- 步骤条 -->
      <div class="steps">
        <div class="step" :class="{'finish':active>idx+1,'act':active==idx+1}" v-for="(ite,idx) in step" :key="idx" >
          <div class="tit flexc"><span>{{idx+1}}</span>{{ite.tit}}
            <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 @getTreeData='testData' ref="firstInfo" :info="infoqy" :cylbOptions="cylbOptions" :qybjOptions="qybjOptions"></first-info-form>
              </el-tab-pane>
              <el-tab-pane  name="second">
                <div slot="label" class="tab flexc">
                  <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 @getTreeData='testData' ref="secondInfo" :info="infokg"></second-info-form>
              </el-tab-pane>
              <el-tab-pane  name="third">
                <div slot="label" class="tab flexc">
                  <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  @getTreeData='testData' ref="thirdInfo" :info="infojs" :jdqkData="jdqkData"></third-info-form>
                </el-tab-pane>
              <el-tab-pane  name="fourth">
                <div slot="label" class="tab flexc">
                  <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 @getTreeData='testData' ref="fourthInfo" :info="infotc" :jsxmjzData="jsxmjzData"></fourth-info-form>
                </el-tab-pane>
            </el-tabs>


        <!-- </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, getKgxx,getKgxxNum,listKgxx } from "@/api/zhaoshang/kgxx"
  import {addJsxx, updateJsxx, delJsxx, getJsxx,getJsxxNum,listJsxx } from "@/api/zhaoshang/jsxx"
  import {addTcxx, updateTcxx, delTcxx, getTcxx,getTcxxNum,listTcxx } from "@/api/zhaoshang/tcxx"
  import {listMonth} from "@/api/zhaoshang/month"
  import {listJdqk} from "@/api/zhaoshang/jdqk"
  const defaultSettings = require("@/settings.js");
  export default{
    components:{
      firstInfoForm,secondInfoForm,thirdInfoForm,fourthInfoForm
    },
    data() {
      return{
        active:2,
        step:[
          {tit:'立项',desc:[{tit:'新建'},]},
          {tit:'签约',desc:[{tit:'签约双方信息'},{tit:'签约项目信息'},{tit:'附件上传'}]},
          {tit:'开工',desc:[{tit:'开工前相关手续办理'},{tit:'开工信息'},{tit:'附件上传'}]},
          {tit:'建设',desc:[{tit:'建设信息'},{tit:'附件上传'}]},
          {tit:'投产',desc:[{tit:'投产信息'},{tit:'附件上传'}]},
          {tit:'完成',desc:[{tit:'提交'},]},
        ],
        activeName:'first',
        // 表详细信息
        info: {},
    infoqy:{},
		infokg: {},
		infojs: {},
		infotc: {},
		id:null,
		xmbh:null,
    cylbOptions:[],
    qybjOptions:[],
    jsxmjzData:[],
    jdqkData:[],//建工进度情况
	 defaultSettings:defaultSettings,
      }
    },
	created() {
	  this.id = this.$route.query.id
	  this.xmbh = this.$route.query.bh;
    this.getQyxxDetail()
    this.getDicts("industry_type").then(response => {
      this.cylbOptions = response.data;
    });
    this.getDicts("enterprise_background").then(response => {
      this.qybjOptions = response.data;
    });
	},
    methods:{
      getQyxxDetail(){
        getQyxx(this.id).then(res=>{
          if(res.code==200){
            this.infoqy=res.data;
            // this.xmbh=res.data.xmbh;
            // this.isdisabled=false;
            // this.progress=Number(res.data.progress)
          }
        })
      },
      handleClick(){
       console.log(this.activeName)
          if(this.activeName == 'first'){
            // 签约
              getQyxx(this.id).then(response => {
                this.infoqy = response.data||{}
              })
          }else if(this.activeName == 'second'){
            // 开工
            getKgxxNum(this.$route.query.bh).then(response => {
              this.infokg = response.data||{}
            })
          }else if(this.activeName == 'third'){
            // 建设
            getJsxxNum(this.$route.query.bh).then(response => {
              this.infojs = response.data||{}
            })
            this.listJdqk()
          }else if(this.activeName == 'fourth'){
            // 投产
            getTcxxNum(this.$route.query.bh).then(response => {
              this.infotc = response.data||{}
            })
            var params={
              xmbh:this.$route.query.bh
            }
            listMonth(params).then(res=>{
               this.jsxmjzData=res.rows
            })
          }
      },
      listJdqk(){
        var params={
              xmbh:this.$route.query.bh
            }
         listJdqk(params).then(response => {
           this.jdqkData = response.rows;
          this.jdqkData.filter(rou=>{
        			 if(rou.tdcrzje == null || rou.tdcrzje ==''){
        				 rou.tdcrzjes = 0
        			 }else{
        				 rou.tdcrzjes = rou.tdcrzje
        			 }
        			 if(rou.cftrje == null || rou.cftrje ==''){
        			 	rou.cftrjes = 0
        			 }else{
        				 rou.cftrjes = rou.cftrje
        			 }
        			 if(rou.sbqd == null || rou.sbqd ==''){
        			 	rou.sbqds = 0
        			 }else{
        				 rou.sbqds = rou.sbqd
        			 }
        			 if(rou.fpje == null || rou.fpje ==''){
        			 	rou.fpjes = 0
        			 }else{
        				 rou.fpjes = rou.fpje
        			 }
        			 if(rou.htje == null || rou.htje ==''){
        			 	rou.htjes = 0
        			 }else{
        				 rou.htjes = rou.htje
        			 }
        			 rou.shiji = (rou.tdcrzjes - 0) +  (rou.cftrjes - 0) +(rou.sbqds - 0)+(rou.fpjes - 0)+(rou.htjes - 0)
        })
         })
      },
	  testData(url){
	   let type = this.matchType(url)
	  if(process.env.VUE_APP_BASE_API == '/dev-api'){
	  	url = this.defaultSettings.urls + url
	  }else{
	  	url = this.defaultSettings.urls+process.env.VUE_APP_BASE_API + url
	  }
	   if( type == "image"){
	       window.open(url )
	   }
	   if( type == "word"){
	     window.open('https://view.officeapps.live.com/op/view.aspx?src=' + url )
	   }
	   if( type == "pdf" || type == 'other'  ){
	       window.open(url )
	   }
	   if( type == "excel"){
	     window.open('https://view.officeapps.live.com/op/view.aspx?src=' + url )
	   }
	  },
	  matchType(fileName) {
	    // 后缀获取
	    var suffix = '';
	    // 获取类型结果
	    var result = '';
	    try {
	      var flieArr = fileName.split('.');
	      suffix = flieArr[flieArr.length - 1];
	    } catch (err) {
	      suffix = '';
	    }
	    // fileName无后缀返回 false
	    if (!suffix) {
	      result = false;
	      return result;
	    }
	    // 图片格式
	    var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
	    // 进行图片匹配
	    result = imglist.some(function(item) {
	      return item == suffix;
	    });
	    if (result) {
	      result = 'image';
	      return result;
	    };
	    // 匹配txt
	    var txtlist = ['txt'];
	    result = txtlist.some(function(item) {
	      return item == suffix;
	    });
	    if (result) {
	      result = 'txt';
	      return result;
	    };
	    // 匹配 excel
	    var excelist = ['xls', 'xlsx'];
	    result = excelist.some(function(item) {
	      return item == suffix;
	    });
	    if (result) {
	      result = 'excel';
	      return result;
	    };
	    // 匹配 word
	    var wordlist = ['doc', 'docx','word'];
	    result = wordlist.some(function(item) {
	      return item == suffix;
	    });
	    if (result) {
	      result = 'word';
	      return result;
	    };
	    // 匹配 pdf
	    var pdflist = ['pdf'];
	    result = pdflist.some(function(item) {
	      return item == suffix;
	    });
	    if (result) {
	      result = 'pdf';
	      return result;
	    };
	    // 匹配 ppt
	    var pptlist = ['ppt'];
	    result = pptlist.some(function(item) {
	      return item == suffix;
	    });
	    if (result) {
	      result = 'ppt';
	      return result;
	    };
	    // 匹配 视频
	    var videolist = ['mp4', 'm2v', 'mkv'];
	    result = videolist.some(function(item) {
	      return item == suffix;
	    });
	    if (result) {
	      result = 'video';
	      return result;
	    };
	    // 匹配 音频
	    var radiolist = ['mp3', 'wav', 'wmv'];
	    result = radiolist.some(function(item) {
	      return item == suffix;
	    });
	    if (result) {
	      result = 'radio';
	      return result;
	    }
	    // 其他 文件类型
	    result = 'other';
	    return result;
	  },
    }
  }
</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;border-bottom: 2px solid #dfe4ed;box-sizing: border-box;position: absolute;right: 0;top: 0;
  }
}
</style>