zhaoshangyinziV3_UI/src/views/project/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>
          <!-- <el-button type="primary" plain>保存</el-button> -->
        </div>
        <div class="rowbox">
          <el-row  :gutter="22">
            <el-col :span="6">
              <el-form-item label="项目编号" prop="xmbh">
                <el-input disabled placeholder="内容提交后自动生成" v-model="info.xmbh" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="项目名称" prop="xmmc">
                <el-input placeholder="输入项目名称" v-model="info.xmmc" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="投资方" prop="className">
                <el-input placeholder="输入投资方名称" v-model="info.tzf" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="属地政府" prop="functionAuthor">
                <el-input placeholder="输入属地政府名称" v-model="info.sdzf" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="签约日期" prop="qyrq">
                <el-date-picker
                      v-model="info.qyrq"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="年 / 月 / 日">
                    </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="6">
              <el-form-item label="项目录入人" prop="xmlrr">
                <el-input placeholder="输入项目录入人" v-model="info.xmlrr" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="职务" prop="job">
                <el-input placeholder="输入职务" v-model="info.job" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系方式" prop="lrrPhone">
                <el-input placeholder="输入联系方式" type="number" v-model="info.lrrPhone" clearable/>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="fomebox">
        <div class="ftop flexc mb14">
          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
          <div class="flex1 tit">签约项目信息</div>
          <!-- <el-button type="primary" plain>保存</el-button> -->
        </div>
        <div class="ftab flexc">
          <div class="line"></div>项目信息
        </div>
        <div class="rowbox">
          <el-row :gutter="22">
            <el-col :span="6">
              <el-form-item label="备案总投资额(亿元)" prop="baztze">
                <el-input placeholder="输入总投资额" type="number" v-model="info.baztze" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="立项时间" prop="lxsjTime">
                <el-date-picker
                      v-model="info.lxsjTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="年 / 月 / 日">
                    </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产业类型" prop="cylb">
                <el-select v-model="info.cylb" placeholder="选择产业类型">
                    <el-option
                      v-for="item in cylbOptions"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue">
                    </el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="投资企业背景" prop="tzqybj">
                <el-select v-model="info.tzqybj" placeholder="选择投资企业背景">
                    <el-option
                      v-for="item in qybjOptions"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue">
                    </el-option>
                  </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="24">
              <el-form-item label="建设内容" prop="jsnr">
                <el-input type="textarea" placeholder="输入建设内容…" v-model="info.jsnr" clearable></el-input>
              </el-form-item>
            </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">
              <el-form-item label="在潜注册公司名称" prop="zcqymc">
                <el-input placeholder="输入公司名称" v-model="info.zcqymc" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="注册资金(万元)" prop="zczj">
                <el-input placeholder="输入注册资金" type="number" v-model="info.zczj" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业注册时间" prop="zcrq">
                <el-date-picker
                      v-model="info.zcrq"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="年 / 月 / 日">
                    </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="经营范围" prop="jyfw">
                <el-input placeholder="输入经营范围" v-model="info.jyfw" clearable/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="6">
              <el-form-item label="法定代表人" prop="fddbr">
                <el-input placeholder="输入法定代表人" v-model="info.fddbr" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系方式" prop="lxfs">
                <el-input placeholder="输入联系方式" type="number" v-model="info.lxfs" clearable/>
              </el-form-item>
            </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">
              <el-form-item label="供地面积(亩)" prop="gdmj">
                <el-input placeholder="输入供地面积" type="number" v-model="info.gdmj" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="租赁厂房面积(平)" prop="zlcf">
                <el-input placeholder="输入租赁厂房面积" type="number" v-model="info.zlcf" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="流转土地面积(亩)" prop="lztd">
                <el-input placeholder="输入流转土地面积" type="number" v-model="info.lztd" clearable/>
              </el-form-item>
            </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">
              <el-form-item label="实际投资总额(亿元)" prop="sjtzze">
                <el-input placeholder="输入实际投资总额" type="number" v-model="info.sjtzze" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实际固定资产投资额(亿元)" prop="sjgdzctze">
                <el-input placeholder="输入实际固定资产投资额" type="number" v-model="info.sjgdzctze" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="亩均投资强度(万元/亩)" prop="mjtzqd">
                <el-input placeholder="输入亩均投资强度" type="number" v-model="info.mjtzqd" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="亩均收入(万元/亩)" prop="mjsr">
                <el-input placeholder="输入亩均收入" type="number" v-model="info.mjsr" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预计年产值(亿元)" prop="yjncz">
                <el-input placeholder="输入预计年产值" type="number" v-model="info.yjncz" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预计利税(万元)" prop="yjls">
                <el-input placeholder="输入预计利税" type="number" v-model="info.yjls" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="投资回收周期(年)" prop="tzhszq">
                <el-input placeholder="输入投资回收周期" type="number" v-model="info.tzhszq" clearable/>
              </el-form-item>
            </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>
          <!-- <el-button type="primary" plain>保存</el-button> -->
        </div>
        <div class="rowbox pt24">
            <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="fjlx" label="附件类型"  width="30%"> </el-table-column>
                <el-table-column align="center" label="操作" width="30%">
                  <template slot-scope="scope">
                   <div class="flexcc">
                     <div class="btna flexc coa">
                       <!-- <div class="imgs">
                         <img class="imga" src="@/assets/images/project/upa.png"/>
                       </div>上传 -->
					    <fileUploads  v-model="info.zsyzFjList" :data="scope.row['datas']" />
					    <!-- <fileUploads  v-model="info.zsyzFjList" :xmbh="xmbha" v-if="scope.row['type']==1"  :data="xmkxx" />
					    <fileUploads  v-model="info.zsyzFjList" :xmbh="xmbha" v-if="scope.row['type']==2"  :data="xmxd" />
					    <fileUploads  v-model="info.zsyzFjList" :xmbh="xmbha" v-if="scope.row['type']==3"  :data="yyzz" />
					    <fileUploads  v-model="info.zsyzFjList" :xmbh="xmbha" v-if="scope.row['type']==4"  :data="fgwlx" />
					    <fileUploads  v-model="info.zsyzFjList" :xmbh="xmbha" v-if="scope.row['type']==5"  :data="tzht" /> -->
					   <!-- <file-upload :limit="1" v-model="form.staffImage"/> -->
                     </div>
                     <!-- <div class="btna flexc cob">
                       <div class="imgs">
                         <img class="imgb" src="@/assets/images/project/upb.png"/>
                       </div>预览
                     </div> -->
                     <!-- <div class="btna flexc coc">
                       <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 class="flexcc pt7">
        <!-- <el-button type="primary" plain>暂存</el-button> -->
         <el-button type="primary" v-hasPermi="['zhaoshangV3:qyxx:add']" @click="getSubmit" style="margin-left: 26px;">提交</el-button>
    </div>
  </div>

</template>

<script>
import {addQyxx, updateQyxx, delQyxx, getQyxx } from "@/api/zhaoshang/qyxx"
export default {
  props: {
    info: {
      type: Object,
      default: null
    },
    cylbOptions:{
      type:Array,
      default: []
    },
    qybjOptions:{
      type:Array,
      default: []
    },
  },
  watch: {
    info: {
      handler(newVal, oldVal) {
        this.xmbha=newVal.xmbh
        var newArr=this.tableData;
        newArr.forEach(ite=>{
          ite.datas.xmbh=newVal.xmbh
        })
        this.tableData=JSON.parse(JSON.stringify(newArr))
        // this.xmkxx.xmbh=newVal.xmbh
        // this.xmxd.xmbh=newVal.xmbh
        // this.yyzz.xmbh=newVal.xmbh
        // this.fgwlx.xmbh=newVal.xmbh
        // this.tzht.xmbh=newVal.xmbh;
        // if(newVal.zsyzFjList){

        // }
      },
      deep: true
    },
  },
  data() {
    return {
      tableData: [
        {fjlx: '项目可行性研究报告',type:'1',datas:{xmbh:null,bigType:'a',type:'1',fileName:null}},
        {fjlx: '项目尽调报告',type:'2',datas:{xmbh:null,bigType:'a',type:'2',fileName:null}},
        {fjlx: '营业执照',type:'3',datas:{xmbh:null,bigType:'a',type:'3',fileName:null}},
        {fjlx: '发改委立项',type:'4',datas:{xmbh:null,bigType:'a',type:'4',fileName:null}},
        {fjlx: '投资合同',type:'5',datas:{xmbh:null,bigType:'a',type:'5',fileName:null}},
      ],
    xmkxx:{xmbh:null,bigType:'a',type:1,fileName:null},
    xmxd:{xmbh:null,bigType:'a',type:2,fileName:null},
    yyzz:{xmbh:null,bigType:'a',type:3,fileName:null},
    fgwlx:{xmbh:null,bigType:'a',type:4,fileName:null},
    tzht:{xmbh:null,bigType:'a',type:5,fileName:null},
    xmbha:'',
    rules: {
      zcqymc: [
        { required: true, message: "请输入在潜注册公司名称", trigger: "blur" }
      ],
    }
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart()
    // })
  },
  methods:{
    getSubmit(){
      console.log(this.info)
      this.$refs.basicInfoForm.validate(valid => {
          if(valid){
            var params=JSON.parse(JSON.stringify(this.info))
            let regphone = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
            if(params.lrrPhone && !regphone.test(params.lrrPhone)) {
            	this.$message.error('请输入正确的联系方式');
            	return
            }
            if(params.lxfs && !regphone.test(params.lxfs)) {
            	this.$message.error('请输入正确的联系方式');
            	return
            }
            var id=params.id
            if(id!=-1){
              updateQyxx(params).then(res=>{
                if(res.code==200){
                  this.$message.success('修改成功');
                }
              })
            }else{
              addQyxx(params).then(res=>{
                if(res.code==200){
                  this.$message.success('保存成功');
                  this.$emit("getSubmit",res.data)
                }
              })
            }
          }
      })
    },
  }
}
</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;}
    .el-table .el-table__header-wrapper th{background: #F6FAFD;}
   }
}
.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: 7px 16px 0px;
    .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;}
  }
}
</style>