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 @click="submitForm">保存</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" value-format="yyyy-MM-dd"
									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" value-format="yyyy-MM-dd"
									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">年度统计<span style="color: red; font-size: 12px;">(请先报存投产信息在填写年度统计)</span></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="createTime" label="上报时间">
						</el-table-column>
						<el-table-column align="center" label="操作" :width="120">
							<template slot-scope="scope">
								<div class="flexcc">
									<div class="btna  coa" style="padding: 0; margin-right: 3px;"
										@click="handleUpdate(scope.row)">
										<div class="imgs">
										</div>修改
									</div>
									<div class="btna  cod" style="padding: 0; margin-left: 3px;"
										@click="handleDelete(scope.row)">
										<div class="imgs">
										</div>删除
									</div>
								</div>
							</template>
						</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">
										<fileUploadt v-model="jylist" :datam="jyzhp" :data="jyzhp"
											v-if="scope.row.index == 0" />
										<fileUploadt v-model="xshtlist" :datam="xsht" :data="xsht"
											v-if="(scope.row.index  == 1 && issfe)" />
										<fileUploadt v-model="xsfqlist" :datam="xsfp" :data="xsfp"
											v-if="(scope.row.index  == 2 && issfe)" />
										<fileUploadt v-model="cwbblist" :datam="cwbb" :data="cwbb"
											v-if="(scope.row.index  == 3 && issfe)" />
										<fileUploadt v-model="tjbblist" :datam="tjbb" :data="tjbb"
											v-if="(scope.row.index  == 4 && issfe)" />
									</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;" @click="submitForm">提交</el-button>
		</div>
	</div>

</template>

<script>
	import {
		listMonth,
		getMonth,
		delMonth,
		addMonth,
		updateMonth
	} from "@/api/zhaoshang/month"
	import {
		listTcxx,
		getTcxx,
		delTcxx,
		addTcxx,
		updateTcxx
	} from "@/api/zhaoshang/tcxx"
	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: 1,
						time: '2025-06-16 16:57',
					},
					{
						fjlx: '销售发票',
						index: 2,
						time: '2025-06-16 16:57',
					},
					{
						fjlx: '公司财务报表',
						index: 3,
						time: '2025-06-16 16:57',
					},
					{
						fjlx: '生产统计报表',
						index: 4,
						time: '2025-06-16 16:57',
					}
				],
				jyzhp: {
					fileName: '项目生产经营照片',
					bigType: 'd',
					type: 19
				},
				xsht: {
					fileName: '销售合同',
					bigType: 'd',
					type: 20
				},
				xsfp: {
					bigType: 'd',
					fileName: '销售发票',
					type: 21
				},
				cwbb: {
					bigType: 'd',
					fileName: '公司财务报表',
					type: 22
				},
				tjbb: {
					fileName: '生产统计报表',
					bigType: 'd',
					type: 23
				},
				tableDataa: [],
				rules: {
					begitcTimenTime: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
				},
				issfe: false,
				jylist:[],
				xshtlist:[],
				xsfqlist:[],
				cwbblist:[],
				tjbblist:[]
			}
		},
		watch: {
			info: {
				handler(newVal, oldVal) {
					// 在这里处理dataMsg变化后的逻辑
					// console.log(this.info)
					this.getshui()

				},
				immediate: true // 立即执行一次
			}
		},
		created() {
			this.getshui()
		},
		mounted() {

		},
		methods: {
			// 回显
			getshui() {
				this.jylist = []
				this.xshtlist = []
				this.xsfqlist = []
				this.cwbblist = []
				this.tjbblist = []
				let that = this
				setTimeout(function() {
					let sngsenhgt = that.info.xmbh
					that.jyzhp.xmbh = sngsenhgt
					that.xsht.xmbh = sngsenhgt
					that.xsfp.xmbh = sngsenhgt
					that.cwbb.xmbh = sngsenhgt
					that.tjbb.xmbh = sngsenhgt
					that.issfe = true
					if (that.info.id == -1) {
						// 新增
						// this.getList()
					} else {
						// 修改
						if (that.info.zsyzFjList.length != 0) {
							that.info.zsyzFjList.filter(rou => {
								if (rou.bigType == 'd') {
									if (rou.type == 19) {
										// 设备清单
										that.jylist.push(rou)
									}
									if (rou.type == 20) {
										// 设备清单
										that.xshtlist.push(rou)
									}
									if (rou.type == 21) {
										// 设备清单
										that.xsfqlist.push(rou)
									}
									if (rou.type == 22) {
										// 设备清单
										that.cwbblist.push(rou)
									}
									if (rou.type == 23) {
										// 设备清单
										that.tjbblist.push(rou)
									}
								}
							})
						}
						that.getList()
					}
				}, 2000)
				// console.log(this.info)
			},
			getList() {
				this.loading = true
				let sgnsegse = {
					xmbh: this.info.xmbh
				}
				listMonth(sgnsegse).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)
				this.form.tcxxId = this.info.tcxxId
				this.form.xmbh = this.info.xmbh
				// this.form.tcxxId =  1
				// return
				if (this.form.tcxxMonthId != undefined) {
					updateMonth(this.form).then(response => {
						this.$modal.msgSuccess("修改成功")
						this.open = false
						this.getList()
					})
				} else {
					addMonth(this.form).then(response => {
						this.$modal.msgSuccess("新增成功")
						this.open = false
						this.getList()
					})
				}

			},
			// 表单重置
			reset() {
				this.form = {
					tcxxYear: null,
					tcxxMonth: null,
					cz: null,
					sjss: null,
					hdl: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
					remark: null
				}
				this.resetForm("form")
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset()
				const tzfkId = row.tcxxMonthId
				getMonth(tzfkId).then(response => {
					this.form = response.data
					this.open = true
					this.title = "修改信息"
				})
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const tzfkIds = row.tcxxMonthId
				delMonth(tzfkIds).then(response => {
					this.$modal.msgSuccess("删除成功")
					this.getList()
				})
			},
			/** 提交按钮 */
			submitForm: function() {
				this.$refs["basicInfoForm"].validate(valid => {
					if (valid) {
						this.info.zsyzFjList = []
						console.log(this.info, 6)
						if (this.jylist.length != 0) {
							this.info.zsyzFjList = this.info.zsyzFjList.concat(this.jylist)
						}
						if (this.xshtlist.length != 0) {
							this.info.zsyzFjList = this.info.zsyzFjList.concat(this.xshtlist)
						}
						if (this.xsfqlist.length != 0) {
							this.info.zsyzFjList = this.info.zsyzFjList.concat(this.xsfqlist)
						}
						if (this.cwbblist.length != 0) {
							this.info.zsyzFjList = this.info.zsyzFjList.concat(this.cwbblist)
						}
						if (this.tjbblist.length != 0) {
							this.info.zsyzFjList = this.info.zsyzFjList.concat(this.tjbblist)
						}

						// return
						if (this.info.id != -1) {
							updateTcxx(this.info).then(response => {
								this.$modal.msgSuccess("修改成功")
								this.open = false
								// this.getList()
							})
						} else {
							addTcxx(this.info).then(response => {
								this.$modal.msgSuccess("新增成功")
								this.form.tcxxId = response.data
								this.info.tcxxId = response.data
								// this.open = false
								// this.$router.go(-1)
								// 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>