spfm-market-front/src/pages/main/achievements/recallJt.vue

<template>
	<div class="container" style="margin: 15px 0 0 0" v-loading="loading">
		<fullscreen :fullscreen.sync="fullscreen" class="container-box"
			style="margin: 0 !important; padding: 0 !important">
			<div class="titbox">
				<h2>集团绩效</h2>
				<div>
					<i class="el-icon-refresh" @click="iconCli(1)"></i>
					<i class="el-icon-full-screen" @click="iconCli(2)"></i>
				</div>
			</div>
			<el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick">
				<el-tab-pane name="0" label="KPI"></el-tab-pane>
<!--				<el-tab-pane name="1" label="GS"></el-tab-pane>-->
			</el-tabs>
			<div style="height: 100%">
				<div style="overflow: none">
					<el-date-picker v-model="monthValue" @change="checkMonth" value-format="yyyy-MM" type="month"
						placeholder="选择月">
					</el-date-picker>
					<div style="float: right">
						<el-button v-if="dataBody.task.sts == '0' && dataBody.rows.length > 0" size="small"
							@click="submit" type="primary">回复</el-button>
						<el-button v-if="dataBody.task.sts == '0' && dataBody.rows.length > 0" size="small"
							@click="save" type="primary">保存</el-button>
						<el-button v-if="dataBody.rows.length > 0" size="small" type="primary" @click="exportExcel">导出
						</el-button>
						<el-button size="small" @click="goBack" type="primary">返回</el-button>
					</div>
				</div>

				<div v-if="dataBody.rows.length > 0" id="tabbox">
					<div style="width: 30%; margin: 15px auto">
						<el-input readonly v-model="dataBody.table.tabName"></el-input>
					</div>
					<table class="dataBody-box" border-collapse="collapse" border="1">
						<tbody>
							<tr v-for="(item, index) in dataBody.rows" :key="index">
								<td @contextmenu="showMenu(index, zindex)" class="cell" v-for="(row, zindex) in item"
									:key="zindex" :rowspan="row.rowSpan" :colspan="row.colSpan"
									v-show="row.displayFlag == '0'">
									<div v-show="false">
										{{ (dataBody.rows[index][zindex].colNum = zindex) }}
										{{ (dataBody.rows[index][zindex].rowNum = index) }}
									</div>
									<el-input :disabled="dataBody.task.sts != '0'" class="table-input"
										v-model="row.cellVal"></el-input>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="center-style" v-else>请选择需要查看的绩效</div>
			</div>
			<vue-context-menu :contextMenuData="contextMenuData" @deleteHang="deleteHang" @addHangUp="addHangUp">
			</vue-context-menu>
		</fullscreen>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				contextMenuData: {
					menuName: "demo",
					//菜单显示的位置
					axis: {
						x: null,
						y: null,
					},
					//菜单选项
					menulists: [{
							fnHandler: "deleteHang", //绑定事件
							btnName: "删除行", //菜单名称
						},
						{
							fnHandler: "addHangUp", //绑定事件
							btnName: "插入行", //菜单名称
						},
					],
				},
				activeName: "0",
				disabled: true,
				options: [],
				value: "",
				monthValue: "",
				isMove: false,
				autoStyle: {},
				xindex: "",
				yindex: "",
				dataBody: {
					rows: [],
					table: {
						opName: "",
						opNo: "",
						opTime: "",
						opTimeFrom: "",
						opTimeTo: "",
						tabCode: "",
						tabCodePks: "",
						tabName: "",
					},
					task: {
						sts: 0,
					},
				},
				hangIndex: "",
				lieIndex: "",
				fullscreen: false,
				loading: false,
				fileList: [],
			};
		},
		methods: {
			showMenu(index, zindex) {
				this.hangIndex = index;
				this.lieIndex = zindex;
				event.preventDefault();
				var x = event.clientX;
				var y = event.clientY;
				// Get the current location
				this.contextMenuData.axis = {
					x,
					y,
				};
			},
			// 向上增加行
			addHangUp() {
				let itemArr = [];
				for (let i = 0; i < this.hangIndex; i++) {
					this.dataBody.rows[i].map((item) => {
						if (
							this.hangIndex <= parseInt(item.rowSpan) + i - 1 &&
							parseInt(item.rowSpan) > 1
						) {
							item.rowSpan = parseInt(item.rowSpan) + 1;
						}
					});
				}
				itemArr = JSON.parse(JSON.stringify(this.dataBody.rows[this.hangIndex]));
				itemArr.map((item) => {
					item.rowSpan = "1";
					item.cellVal = "";
				});
				this.dataBody.rows.splice(this.hangIndex, 0, itemArr);
			},
			// 删除行
			deleteHang() {
				if (
					parseInt(this.dataBody.rows[this.hangIndex][this.lieIndex].rowSpan) > 1
				) {
					this.$message({
						message: "当前行有合并项不能删除",
						type: "wanrning",
					});
					return;
				}
				let num = 0;
				this.dataBody.rows[this.hangIndex].map((item, index) => {
					if (parseInt(item.rowSpan) > 1) {
						this.dataBody.rows[parseInt(this.hangIndex) + 1][index].displayFlag =
							"0";
						this.dataBody.rows[parseInt(this.hangIndex) + 1][index].rowSpan =
							parseInt(item.rowSpan) - 1;
					} else if (item.displayFlag == "1") {
						for (let i = this.hangIndex; i >= 0; i--) {
							num = 0;
							this.dataBody.rows[i].map((item, zindex) => {
								if (item.displayFlag == "0") {
									num++;
								}
								if (
									parseInt(item.rowSpan) > 1 &&
									zindex == index &&
									this.hangIndex <= parseInt(item.rowSpan) + i - 1
								) {
									item.rowSpan = parseInt(item.rowSpan) - 1;
								}
							});
							if (num == this.dataBody.rows[i].length) {
								return;
							}
						}
					}
				});
				this.dataBody.rows.splice(this.hangIndex, 1);
			},
			handleClick(val) {
				this.getInitData();
			},
			// 回复
			submit() {
				this.loading = true;
				this.$http({
					url: "/market/kpidepts/saveInfo",
					method: "post",
					headers: {
						"Content-Type": "application/json",
					},
					data: this.dataBody,
				}).then((res) => {
					if (res.data.result == 0) {
						this.$message({
							message: "回复成功",
							type: "success",
						});
						this.getInitData();
					}
					this.loading = false;
				});
			},
			exportExcel() {
				this.$http({
					url: "/market/kpidepts/downloadKpi",
					method: "get",
					headers: {
						"Content-Type": "application/json",
					},
					responseType: "blob",
					params: {
						tabInstId: this.dataBody.tabInstId
					},
				}).then((response) => {
					if (window.navigator && window.navigator.msSaveOrOpenBlob) {
						let blob = new Blob([response.data], {
							type: "application/vnd.ms-excel",
						});
						window.navigator.msSaveOrOpenBlob(
							blob,
							this.dataBody.table.tabName + ".xlsx"
						);
					} else {
						/* 火狐谷歌的文件下载方式 */
						var blob = new Blob([response.data]);
						var downloadElement = document.createElement("a");
						var href = window.URL.createObjectURL(blob);
						downloadElement.href = href;
						downloadElement.download = this.dataBody.table.tabName + ".xlsx";
						document.body.appendChild(downloadElement);
						downloadElement.click();
						document.body.removeChild(downloadElement);
						window.URL.revokeObjectURL(href);
					}
				});
			},
			checkMonth(val) {
				this.getInitData();
			},
			goBack() {
				this.$router.push("/leader");
			},
			//功能栏
			iconCli(v) {
				if (v === 1) {
					this.getList(this.params, this.pageSize);
				}
				if (v === 2) {
					this.fullscreen = !this.fullscreen;
				}
			},
			// 保存
			save() {
				this.loading = true;
				this.$http({
					url: "/market/kpidepts/save",
					method: "post",
					headers: {
						"Content-Type": "application/json",
					},
					data: this.dataBody,
				}).then((res) => {
					if (res.data.result == 0) {
						this.loading = false;
						this.$message({
							message: "操作成功",
							type: "success",
						});
					}
				});
			},
			getInitData(val) {
				this.loading = true;
				this.$http({
					url: "/market/kpidepts/load",
					method: "post",
					headers: {
						"Content-Type": "application/json",
					},
					data: {
						kpiMonth: this.monthValue,
						tempType: "3",
						subType: this.activeName,
						kpiYear: "",
						receiveDeptCode: "",
					},
				}).then((res) => {
					if (res.data.result == 0) {
						this.dataBody = res.data.body;
					} else {
						this.$message({
							message: "无绩效数据",
							type: "success",
						});
						this.dataBody.rows = [];
					}
					this.loading = false;
				});
			},
		},
		mounted() {
			this.getInitData();
		},
	};
</script>
<style>
	#tabbox .el-input.is-disabled .el-input__inner {
		color: black;
		background-color: white;
	}

	.btn-wrapper-simple {
		height: auto !important;
	}
</style>
<style lang="scss" scoped>
	#tabbox {
		height: 65%;
		overflow-y: auto;
	}

	.dataBody-box {
		border-collapse: collapse;
		margin-top: 20px;

		.cell {
			position: relative;
		}
	}

	.fcous {
		border-color: red;
	}

	.center-style {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.auto-dom {
		width: 3px;
		opacity: 0;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1000;
		cursor: pointer;
		height: 100%;
	}
</style>>
<style scoped lang="scss">
	.btn-default {
		display: inline;
		margin-left: 10px;
	}

	.titbox {
		margin-bottom: 20px;

		div {
			float: right;

			i {
				font-size: 22px;
				margin-left: 20px;
				cursor: pointer;
			}
		}
	}

	.tabbox {
		margin-top: 15px;
	}

	.pageBox {
		text-align: right;
		margin-top: 10px;
	}
</style>