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

<template>
	<div id="select-dom" 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>
			<div style="overflow: hidden">
				<el-select placeholder="选择接模板类型" v-model="tempType" filterable clearable
					style="float: left; margin-top: 20px" @change="selectType">
					<el-option value="0" label="科室绩效"> </el-option>
					<el-option value="1" label="部门绩效"> </el-option>
					<el-option value="2" label="副总GS"> </el-option>
					<el-option value="3" label="集团绩效"> </el-option>
				</el-select>
				<el-select v-if="tempType == '1'" placeholder="选择接模板种类" v-model="subType" filterable clearable
					style="float: left; margin-top: 20px">
					<el-option value="0" label="KPI"> </el-option>
					<el-option value="1" label="GS"> </el-option>
				</el-select>
				<el-select v-if="tempType == '2'" placeholder="选择接模板种类" v-model="subType" filterable clearable
					style="float: left; margin-top: 20px">
					<el-option value="0" label="考核目标"> </el-option>
					<el-option value="1" label="考核项目"> </el-option>
					<el-option value="2" label="营销活动落地目标"> </el-option>
					<el-option value="3" label="渠道销售能力目标"> </el-option>
					<el-option value="4" label="家庭营销能力目标"> </el-option>
					<el-option value="5" label="业务管理提升目标"> </el-option>
					<el-option value="6" label="绩效完成情况"> </el-option>
				</el-select>
				<el-select v-if="groupFlag" placeholder="选择接部门" v-model="groupId" filterable clearable
					style="float: left; margin-top: 20px" @change="selectHandel">
					<el-option v-for="items in options" :key="items.value" :label="items.groupName"
						:value="items.groupId">
					</el-option>
				</el-select>
				<div class="search" style="float: right; margin-right: 20px">
					<el-button size="small" @click="goBack" type="primary">返回</el-button>
				</div>
				<el-upload style="float: right; margin-top: 20px" class="upload-demo"
					action="http://192.168.2.143:9600/spfm/market/kpitemps/addTemp" :before-upload="beforeUploadForm"
					:http-request="fileChange" :show-file-list="false" :file-list="fileList" :disabled="disabled">
					<el-button size="small" @click="isDisabled" type="primary">点击上传</el-button>
				</el-upload>
			</div>
			<div v-if="dataBody.rows.length > 0" id="tabbox" cellspacing="0" cellpadding="0">
				<div style="width: 50%; margin: 0px auto">
					<el-input v-model="dataBody.table.tabName"></el-input>
				</div>
				<table class="dataBody-box" ref="tableBox" border-collapse="collapse" border="1">
					<tbody>
						<tr v-for="(item, index) in formList" :key="index">
							<td class="cell" v-for="(row, zindex) in formList[index]" :key="zindex"
								:rowspan="row.rowSpan" :colspan="row.colSpan">
								<div v-show="false">
									{{ (row.rowNum = index) }}
									{{ (row.colNum = zindex) }}
								</div>
								<!-- <el-tooltip :content="row.cellVal" placement="bottom" effect="light"> -->
								<el-input autosize class="table-input" v-model="row.cellVal"></el-input>
								<!-- </el-tooltip> -->
								<div class="auto-dom" v-if="index == 0"></div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="center-style" v-else>等待上传模板</div>
		</fullscreen>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				groupFlag: true,
				user: "",
				loading: false,
				dataBody: {
					rows: [],
					table: {
						opName: "",
						opNo: "",
						opTime: "",
						opTimeFrom: "",
						opTimeTo: "",
						tabCode: "",
						tabCodePks: "",
						tabName: "",
					},
				},
				fullscreen: false,
				fileList: [],
				closeMenu: false,
				options: [],
				groupId: "",
				groupName: "",
				tempTypeDesc: "科室绩效",
				tempType: "",
				disabled: true,
				subType: "",
			};
		},
		computed: {
			formList: function() {
				return this.dataBody.rows.map((item) => {
					return item.filter((row) => {
						if (row.displayFlag == "0") {
							return row;
						}
					});
				});
			},
		},
		methods: {
			selectType(val) {
				if (!val) {
					this.disabled = true;
				}
				if (val == "0") {
					this.groupFlag = true;
				} else {
					this.groupFlag = false;
				}
				this.subType = "";
			},
			isDisabled() {
				if (this.tempType == "") {
					this.$message({
						message: "请先选择模板类型",
						type: "error",
					});
					return;
				} else {
					if (this.tempType == "0" && this.groupId == "") {
						this.$message({
							message: "请先选择部门",
							type: "error",
						});
						return;
					} else if (
						(this.tempType == "1" || this.tempType == "2") &&
						this.subType == ""
					) {
						this.$message({
							message: "请先选择模板种类",
							type: "error",
						});
						return;
					} else {
						this.disabled = false;
					}
				}
			},
			selectHandel(val) {
				this.options.map((item) => {
					if (item.groupId == val) {
						this.groupName = item.groupName;
					}
				});
				if (this.groupId == "") {
					this.disabled = true;
				}
			},
			beforeUploadForm(file) {
				// 验证文件类型
				var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
				const extension = testmsg === "xlsx";
				if (!extension) {
					this.$message({
						message: "上传文件只能是excel格式!",
						duration: 1000,
						showClose: true,
						type: "warning",
					});
					return false;
				}
			},
			// 提交文件
			fileChange(param, type) {
				let formData = new FormData();
				formData.append("file", param.file);
				formData.append("tabCode", "");
				formData.append("tempType", this.tempType);
				formData.append("subType", this.subType);
				formData.append(
					"subTypeDesc",
					this.tempType == "1" && this.subType == "0" ?
					"KPI" :
					this.tempType == "1" && this.subType == "1" ?
					"GS" :
					this.tempType == "2" && this.subType == "0" ?
					"考核目标" :
					this.tempType == "2" && this.subType == "1" ?
					"营销活动落地目标" :
					this.tempType == "2" && this.subType == "2" ?
					"渠道销售能力目标" :
					this.tempType == "2" && this.subType == "3" ?
					"家庭营销能力目标" :
					this.tempType == "2" && this.subType == "4" ?
					"业务管理提升目标" :
					this.tempType == "2" && this.subType == "5" ?
					"绩效完成情况" :
					this.tempType == "3" ?
					"绩效完成情况" :
					""
				);
				formData.append(
					"tempTypeDesc",
					this.tempType == "0" ?
					"科室绩效" :
					this.tempType == "1" ?
					"部门绩效" :
					this.tempType == "3" ?
					"集团绩效" :
					"副总GS"
				);
				formData.append("groupId", this.groupId);
				formData.append("groupName", this.groupName);
				this.loading = true;
				this.$http({
						url: "/market/kpitemps/addTemp",
						method: "post",
						headers: {
							"Content-Type": "application/json",
						},
						data: formData,
					})
					.then((res) => {
						if (res.data.result == 0) {
							this.$message({
								message: "上传成功",
								type: "success",
							});
							this.dataBody = res.data.body;
							this.$forceUpdate();
						}
						this.loading = false;
					})
					.catch((err) => {
						this.loading = false;
					});
			},
			goBack() {
				this.$router.push("/kpiMuban");
			},
			//功能栏
			iconCli(v) {
				if (v === 1) {
					this.getList(this.params, this.pageSize);
				}
				if (v === 2) {
					this.fullscreen = !this.fullscreen;
				}
			},
			getOpations() {
				this.$http({
					url: "/sysmgr/sys/mk/offices/queryList",
					method: "post",
					headers: {
						"Content-Type": "application/json",
					},
					data: {},
				}).then((res) => {
					this.options = res.data.body;
				});
			},
		},
		mounted() {
			this.getOpations();
		},
	};
</script>
<style lang="scss" scoped>
	#tabbox {
		height: 75%;
		overflow-y: auto;
	}

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

		.cell {
			position: relative;
		}
	}

	.center-style {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 300px;
	}

	.btn-wrapper-simple {
		height: auto !important;
	}

	.fcous {
		border-color: red;
	}

	.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 {
		div {
			float: right;

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

	.tabbox {
		margin-top: 15px;
	}

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