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

<template>
  <div>
    <el-form ref="basicInfoForm" label-position="top" :model="info" :rules="rules" label-width="150px">
      <div class="fomebox">
        <div class="ftop flexc">
          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
          <div class="flex1 tit">签约双方信息</div>
        </div>
        <div class="rowbox">
          <el-row  :gutter="22">
      <el-col :span="24" style="padding-left: 0; margin-bottom: 7px;">
      	<el-col :span="6">
      	  <div class="xiangw">
      	  				  <span>项目编号：</span>
      	  				  <span>{{info.xmbh||'暂无数据'}}</span>
      	  </div>
      	</el-col>
      	<el-col :span="6">
      	  <div class="xiangw">
      	  				  <span>项目名称：</span>
      	  				  <span>{{info.xmmc||'暂无数据'}}</span>
      	  </div>
      	</el-col>
      </el-col>
			<el-col :span="24" style="padding-left: 0; margin-bottom: 7px;">
				<el-col :span="6">
				  <div class="xiangw">
				  				  <span>投资方：</span>
				  				  <span>{{info.tzf||'暂无数据'}}​</span>
				  </div>
				</el-col>
				<el-col :span="6">
				 <div class="xiangw">
				 				  <span>属地政府：</span>
				 				  <span>{{info.sdzf||'暂无数据'}}</span>
				 </div>
				</el-col>
				<el-col :span="6">
				  <div class="xiangw">
				  				  <span>签约日期：</span>
				  				  <span>{{info.qyrq||'暂无数据'}}</span>
				  </div>
				</el-col>
			</el-col>
			<el-col :span="24" style="padding-left: 0; margin-bottom: 15px;">
        <el-col :span="6">
          <div class="xiangw">
          				  <span>项目录入人：</span>
          				  <span>{{info.xmlrr||'暂无数据'}}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="xiangw">
          				  <span>职务：</span>
          				  <span>{{info.job||'暂无数据'}}</span>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="xiangw">
          				  <span>联系方式：</span>
          				  <span>{{info.lrrPhone||'暂无数据'}}</span>
          </div>
        </el-col>

			</el-col>

          </el-row>
        </div>
      </div>
      <div class="fomebox">
        <div class="ftop flexc">
          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
          <div class="flex1 tit">签约项目信息</div>
        </div>
		<div class="rowbox" style="margin-top: 10px;">
		  <el-row :gutter="22" >
        <el-col :span="24" style="padding-left: 0; margin-bottom: 7px;">
            <el-col :span="6">
                <div class="xiangw">
                				  <span>备案总投资额：</span>
                				  <span>{{info.baztze?info.baztze+"亿元":'暂无数据'}}</span>
                </div>
              </el-col>
            <el-col :span="6">
              <div class="xiangw">
              				  <span>立项时间：</span>
              				  <span>{{info.lxsjTime||'暂无数据'}}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="xiangw">
              				  <span>产业类别：</span>
              				  <span>{{info.cylb?kaType(info.cylb,cylbOptions):'暂无数据'}}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="xiangw">
              				  <span>投资企业背景：</span>
              				  <span>{{info.tzqybj?kaType(info.tzqybj,qybjOptions):'暂无数据'}}</span>
              </div>
            </el-col>
        </el-col>

		  </el-row>

		  <el-row :gutter="22">
		    <el-col :span="24">
		      <div class="xiangw">
		      				  <span>建设内容：</span>
		      				  <span>{{info.jsnr||'暂无数据'}}</span>
		      </div>
		    </el-col>
		  </el-row>
		</div>
        <div class="ftab flexc">
          <div class="line"></div>企业注册信息
        </div>
        <div class="rowbox">
          <el-row :gutter="22" >
            <el-col :span="6">
              <div class="xiangw">
              				  <span>在潜注册公司名称：</span>
              				  <span>{{info.zcqymc||'暂无数据'}}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="xiangw">
              				  <span>注册资金：</span>
              				  <span>{{info.zczj?info.zczj+"万元":'暂无数据'}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="22" style="margin-top: 10px; margin-bottom: 10px;">
            <el-col :span="6">
              <div class="xiangw">
              				  <span>注册日期：</span>
              				  <span>{{info.zcrq||'暂无数据'}}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="xiangw">
              				  <span>经营范围：</span>
              				  <span>{{info.jyfw||'暂无数据'}}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="xiangw">
              				  <span>法定代表人：</span>
              				  <span>{{info.fddbr||'暂无数据'}}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="xiangw">
              				  <span>联系方式：</span>
              				  <span>{{info.lxfs||'暂无数据'}}</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="ftab flexc">
          <div class="line"></div>用地情况
        </div>
        <div class="rowbox">
          <el-row :gutter="22" style="margin-top: 10px;" >
            <el-col :span="6">
              <div class="xiangw">
              				  <span>供地面积：</span>
              				  <span>{{info.gdmj?info.gdmj+"亩":'暂无数据'}}</span>
              </div>
            </el-col>
            <el-col :span="6">
             <div class="xiangw">
             				  <span>租赁厂房面积：</span>
             				  <span>{{info.zlcf?info.zlcf+"平":'暂无数据'}}</span>
             </div>
            </el-col>
            <el-col :span="6">
              <div class="xiangw">
              				  <span>流转土地面积：</span>
              				  <span>{{info.lztd?info.lztd+"亩":'暂无数据'}}</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="ftab flexc">
          <div class="line"></div>其他信息
        </div>
        <div class="rowbox">
          <el-row :gutter="22">
            <el-col :span="6">
             <div class="xiangw">
             				  <span>实际投资总额：</span>
             				  <span>{{info.sjtzze?info.sjtzze+"亿元":'暂无数据'}}</span>
             </div>
            </el-col>
            <el-col :span="6">
				<div class="xiangw">
								  <span>实际固定资产投资额：</span>
								  <span>{{info.sjgdzctze?info.sjgdzctze+"亿元":'暂无数据'}}</span>
				</div>
            </el-col>
            <el-col :span="6">
				<div class="xiangw">
								  <span>亩均投资强度：</span>
								  <span>{{info.mjtzqd?info.mjtzqd+"万元/亩":'暂无数据'}}</span>
				</div>
            </el-col>
            <el-col :span="6">
				<div class="xiangw">
								  <span>亩均收入：</span>
								  <span>{{info.mjsr?info.mjsr+"万元/亩":'暂无数据'}}</span>
				</div>
            </el-col>
            <el-col :span="6" class="magnt">
				<div class="xiangw">
								  <span>预计年产值：</span>
								  <span>{{info.yjncz?info.yjncz+"亿元":'暂无数据'}}</span>
				</div>
            </el-col>
            <el-col :span="6" class="magnt">
				<div class="xiangw">
								  <span>预计利税：</span>
								  <span>{{info.yjls?info.yjls+"万元":'暂无数据'}}</span>
				</div>
            </el-col>
			<el-col :span="6" class="magnt">
				<div class="xiangw">
								  <span>投资回收周期：</span>
								  <span>{{info.tzhszq?info.tzhszq+'年':'暂无数据'}}</span>
				</div>
			</el-col>
          </el-row>
        </div>
      </div>
      <div class="fomebox">
        <div class="ftop flexc">
          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
          <div class="flex1 tit">上传附件</div>
        </div>
        <div class="rowbox">
            <el-table  :data="tableData" border style="width: 100%;margin-bottom: 15px;">
                <el-table-column align="center" type="index" label="序号"  width="10%"> </el-table-column>
                <el-table-column align="center" prop="fjName" label="文件名称"  width="40%"> </el-table-column>
                <!-- <el-table-column align="center" prop="dx" label="附件大小"  width="15%"> </el-table-column> -->
                <!-- <el-table-column align="center" prop="time" label="上传时间"  width="15%"> </el-table-column> -->
                <el-table-column align="center" label="操作" width="30%">
                  <template slot-scope="scope">
                   <div class="flexcc">
					   <!-- <div class="btna flexc cob">
					     <div class="imgs">
					       <img class="imgb" src="@/assets/images/project/upb.png"/>
					     </div>上传
					   </div> -->
                     <div class="btna flexc cob" style="cursor: pointer;" @click="getLook(scope.row['fjUrl'])">
                       <div class="imgs">
                         <img class="imgb" src="@/assets/images/project/upb.png"/>
                       </div>预览
                     </div>
                     <div style="cursor: pointer;" class="btna flexc coc" @click="handleDownload(scope.row)">
                       <div class="imgs">
                         <img class="imga" src="@/assets/images/project/upc.png"/>
                       </div>下载
                     </div>
                     <!-- <div class="btna flexc cod">
                       <div class="imgs">
                         <img class="imgc" src="@/assets/images/project/upd.png"/>
                       </div>删除
                     </div> -->
                   </div>
                  </template>
                </el-table-column>
              </el-table>
        </div>
      </div>
    </el-form>
  </div>

</template>

<script>
const defaultSettings = require("@/settings.js");
export default {
  props: {
    info: {
      type: Object,
      default: null
    },
    cylbOptions:{
      type:Array,
      default: []
    },
    qybjOptions:{
      type:Array,
      default: []
    },
  },
  watch: {
    info: {
      handler(newVal, oldVal) {
        if(newVal&&newVal.zsyzFjList){
          this.tableData=JSON.parse(JSON.stringify(newVal.zsyzFjList))
        }
      },
      deep: true
    },
  },
  data() {
    return {
      value:'',
      value1:'',
      options: [{
                value: '选项1',
                label: '黄金糕'
              }, {
                value: '选项2',
                label: '双皮奶'
              }],
      tableData:[
      
      ],
      rules: {
      },
	  defaultSettings:defaultSettings,
    }
  },
  methods:{
    kaType(val, list) {
      return this.selectDictLabela(list, val);
    },
    getLook(url){
		this.$emit('getTreeData',url);
    },
    handleDownload(row){
          var name = row.fjName;
          var url = row.fjUrl;
          this.$download.resource(url,false)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .fomebox{
    .el-button--primary{font-size: 14px;padding: 8px 14px;}
    .el-form-item__label{padding-bottom: 0;line-height: 38px;}
    .el-form-item{margin-bottom: 15px;}
    .el-input__inner{height: 40px;line-height: 40px;}
    .el-date-editor.el-input{width: 100%;}
    .el-select{width: 100%;}
    table{width: 100% !important;}
   }
}
.fomebox{background: #FFFFFF;margin-bottom: 15px;border-radius: 4px;
  .ftop{padding: 10px 17px 10px 16px;border-bottom: 1px solid #E6E6E6;
    .timg{width: 20px;height: 20px;margin-right: 13px;}
    .tit{font-weight: bold;font-size: 16px;color: #222838;}
  }
  .rowbox{padding: 10px 15px 9px;}
  .ftab{font-weight: bold;font-size: 14px;color: #2777D0;padding: 24px 16px 7px;
    .line{width: 6px;margin-right: 9px;height: 20px;background: #2777D0;}
  }
  .btna{font-weight: 500;font-size: 14px;padding: 0 13px;
    .imgs{width: 15px;height: 15px;display: flex;align-items: center;justify-content: center;margin-right: 7px;
      .imga{width: 13px;height: 14px;}
      .imgb{width: 14px;height: 14px;}
      .imgc{width: 15px;height: 15px;}
      .imgd{width: 13px;height: 14px;}
    }
    &.coa{color: #1890FF;}
    &.cob{color: #FE7F0E;}
    &.coc{color: #00A854;}
    &.cod{color: #F25858;}
  }
}
.xiangw{
	// margin-top: 20px;
	span:nth-child(1){
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 14px;
		color: #000000;
	}
	span:nth-child(2){
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #222838;
	}
}
.magnt{
	margin-top: 20px;
}
</style>