zhaoshangyinziV3_UI/src/views/project/fourthInfoForm.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="begitcTimenTime">
                <el-date-picker
                      v-model="info.begitcTimenTime"
                      type="date"
                      placeholder="年 / 月 / 日">
                    </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="入规时间" prop="rgTime">
                <el-date-picker
                      v-model="info.rgTime"
                      type="date"
                      placeholder="年 / 月 / 日">
                    </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="万元产值能耗" prop="wycznh">
                <el-input  placeholder="请输入万元产值能耗" v-model="info.wycznh" />
              </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 @click="handleAdd">提交</el-button>
        </div>
        <div class="rowbox">
          <el-row  :gutter="22">
            <el-col :span="6">
              <el-form-item label="年度" prop="tcxxYear">
                <el-date-picker
                      v-model="form.tcxxYear"
                      type="year"
					   value-format="yyyy"
                      placeholder="选择年">
                    </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="月份" prop="tcxxMonth">
                <el-date-picker
                      v-model="form.tcxxMonth"
                      type="month"
					  value-format="MM"
                      placeholder="选择月">
                    </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="6">
              <el-form-item label="当月累计产值(万元)" prop="cz">
                <el-input type="number"  placeholder="请输入累计产值" v-model="form.cz" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="当月实缴税收(万元)" prop="sjss">
                <el-input type="number" placeholder="请输入实缴税收" v-model="form.sjss" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="当月累计用电(万千瓦时)" prop="hdl">
                <el-input type="number" placeholder="请输入累计用电" v-model="form.hdl" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="ftab flexc" style="padding-top: 7px;">
            <div class="line"></div>每月项目建设进展情况
        </div>
          <div class="rowbox" style="width: 100%;overflow: hidden;">
              <el-table :max-height="213"show-summary  :data="tableDataa" border style="width: 100%;margin-bottom: 15px;">
                  <el-table-column align="center" type="index" label="序号"  width="150"></el-table-column>
                  <el-table-column align="center" prop="cz" label="当月累计产值(万元)"  > </el-table-column>
                  <el-table-column align="center" prop="sjss" label="当月实缴税收(万元)"  > </el-table-column>
                  <el-table-column align="center" prop="hdl" label="当月累计用电(万千瓦时)"  > </el-table-column>
                  <el-table-column align="center" prop="time" label="上报时间" >
                  </el-table-column>
                </el-table>
          </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">
			<el-table  :data="tableData" border style="width: 100%;margin-bottom: 15px;">
				<el-table-column align="center" prop="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">
					    <fileUploads  v-model="form.reportUrl" :datam="jyzhp"  v-if="index == 0"/>
						 <fileUploads  v-model="form.reportUrl" :datam="xsht" v-if="index == 1" />
						  <fileUploads  v-model="form.reportUrl" :datam="xsfp" v-if="index == 2" />
						   <fileUploads  v-model="form.reportUrl" :datam="cwbb" v-if="index == 3" />
						    <fileUploads  v-model="form.reportUrl" :datam="tjbb" v-if="index == 4" />
			         </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"  style="margin-left: 26px;">提交</el-button>
    </div>
  </div>

</template>

<script>
import { listMonth, getMonth, delMonth, addMonth, updateMonth } from "@/api/zhaoshang/month"
export default {
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      value:'',
      value1:'',
	  loading:false,
	  form:{
		          tcxxYear: null,
		          tcxxMonth: null,
		          cz: null,
		          sjss: null,
		          hdl: null,
		          createBy: null,
		          createTime: null,
		          updateBy: null,
		          updateTime: null,
		          remark: null
	  },
      options: [{
                value: '选项1',
                label: '黄金糕'
              }, {
                value: '选项2',
                label: '双皮奶'
              }],
      tableData: [{
                fjlx: '项目生产经营照片',
                index:0,
                time: '2025-06-16 16:57',
      },
	  {
	            fjlx: '销售合同',
	            index:0,
	            time: '2025-06-16 16:57',
	  },
	  {
	            fjlx: '销售发票',
	            index:0,
	            time: '2025-06-16 16:57',
	  },
	  {
	            fjlx: '公司财务报表',
	            index:0,
	            time: '2025-06-16 16:57',
	  },
	  {
	            fjlx: '生产统计报表',
	            index:0,
	            time: '2025-06-16 16:57',
	  }
	  ],
	  jyzhp:{
		  xmId:null,
		  xmbh:null,
		  xmmc:null,
		  bigType:'d',
		  type:19
	  },
	  xsht:{
	  		  xmId:null,
	  		  xmbh:null,
	  		  xmmc:null,
	  		  bigType:'d',
	  		  type:20
	  },
	  xsfp:{
	  		  xmId:null,
	  		  xmbh:null,
	  		  xmmc:null,
	  		  bigType:'d',
	  		  type:21
	  },
	  cwbb:{
	  		  xmId:null,
	  		  xmbh:null,
	  		  xmmc:null,
	  		  bigType:'d',
	  		  type:22
	  },
	  tjbb:{
	  		  xmId:null,
	  		  xmbh:null,
	  		  xmmc:null,
	  		  bigType:'d',
	  		  type:23
	  },
      tableDataa: [
        ],
      rules: {
      }
    }
  },
  created() {
	  if(this.$route.query.id == -1){
		  // 新增
		this.info = {tcxxId: null,
        xmId: null,
        xmbh: null,
        xmmc: null,
        tcTime: null,
        rgTime: null,
        wycznh: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null}
		this.getList()
	  }else{
		  // 修改
		  this.getList()
		  
	  }
  	
  },
  mounted() {
  	
  },
  methods:{
	  getList() {
	    this.loading = true
	    listQyxx(this.queryParams).then(response => {
	      this.tableDataa = response.rows
	      this.total = response.total
	      this.loading = false
	    })
	  },
 // 每月更新提交
 handleAdd(){
	 if(this.form.tcxxYear == null){
		this.$message.error('请填写年度'); 
		return
	 }
	 if(this.form.tcxxMonth == null){
	 		this.$message.error('请填写月份'); 
			return
	 }
	 console.log(this.form)
	 return
	 addJsxx(this.form).then(response => {
	   this.$modal.msgSuccess("新增成功")
	   this.open = false
	   this.getList()
	 })
 }
  }
}
</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>