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

<template>
	<div class="container" style="margin: 15px 0 0 0">
		<fullscreen :fullscreen.sync="fullscreen" class="container-box"
			style="margin: 0 !important; padding: 0 !important">
			<div class="titbox">
				<h2 class="font-ui">绩效模板管理</h2>
				<div>
					<i class="el-icon-refresh" @click="iconCli(1)"></i>
					<i class="el-icon-full-screen" @click="iconCli(2)"></i>
				</div>
			</div>
			<div class="search">
				<mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
				<el-button size="small" @click="addExcel" type="primary" v-if="isManageMuban">新增模板</el-button>
			</div>
			<div class="tabbox">
				<el-table height="calc(100% - 40px)" v-loading="loading" class="com-table" ref="multipleTable"
					:data="tableData" tooltip-effect="dark" size="small" border style="width: 100%">
					<el-table-column align="center" prop="tabName" label="模板名称" show-overflow-tooltip>
					</el-table-column>
					<el-table-column align="center" prop="opTime" show-overflow-tooltip label="配置时间">
					</el-table-column>
					<el-table-column align="center" prop="opNo" show-overflow-tooltip label="配置工号">
					</el-table-column>
					<el-table-column align="center" prop="opName" show-overflow-tooltip label="配置姓名">
					</el-table-column>
					<el-table-column align="center" prop="groupName" show-overflow-tooltip label="使用科室">
					</el-table-column>
					<el-table-column align="center" prop="stsDesc" show-overflow-tooltip label="模板状态">
					</el-table-column>
					<el-table-column align="center" prop="tempTypeDesc" show-overflow-tooltip label="模板类型" width="150">
					</el-table-column>
					<el-table-column align="center" prop="hotline" width="200" label="操作">
						<template slot-scope="scope">
							<el-button :disabled="scope.row.tempStsDesc == '作废'" size="mini" type="primary" plain
								@click="issue(scope.row)" v-if="isManageMuban">下发</el-button>
							<el-button size="mini" type="primary" plain @click="detailes(scope.row)">查看</el-button>
							<!-- <el-button
                size="mini"
                type="primary"
                plain
                @click="updates(scope.row)"
                >修改</el-button
              > -->
							<el-button :disabled="scope.row.tempStsDesc == '作废'" size="mini" type="danger" plain
								@click="deletes(scope.row)" v-if="isManageMuban">作废</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination class="pageBox" @current-change="currchange" layout="prev, pager, next" background
					:total="total">
				</el-pagination>
			</div>
			<myMessage :messTit="messTit" @closeMessage="closeMessage" :centerDialogVisible="centerDialogVisible"
				v-if="centerDialogVisible"></myMessage>
		</fullscreen>
		<el-dialog title="下发绩效" :visible.sync="dialogStatus" width="50%" :close-on-press-escape="false"
			:show-close="false" :destroy-on-close="true" :close-on-click-modal="false" :append-to-body="true">
			<el-form ref="ruleForm" :rules="rules" :model="formData" label-width="80px">
				<el-form-item label="绩效标题" prop="woTitle">
					<el-input placeholder="请输入绩效标题" v-model="formData.woTitle"></el-input>
				</el-form-item>
				<el-form-item v-if="tempType == '0' || tempType == '1'" label="下发月份" prop="sendMonth">
					<el-date-picker style="width: 100% !important" v-model="formData.sendMonth" value-format="yyyy-MM"
						type="month" placeholder="选择月份">
					</el-date-picker>
				</el-form-item>
				<el-form-item v-else label="下发年份" prop="sendYear">
					<el-date-picker style="width: 100% !important" v-model="formData.sendYear" value-format="yyyy"
						type="year" placeholder="选择年份">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="反馈时间" prop="requiredTime">
					<el-date-picker style="width: 100%" v-model="formData.requiredTime" type="datetime"
						placeholder="选择反馈时间" value-format="yyyy-MM-01 HH:mm:ss">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="接收科室" prop="sendNoArr">
					<el-select placeholder="接收科室" v-model="formData.sendNoArr" style="width: 100%"
						:disabled="tempType == '0'" multiple>
						<el-option v-for="items in options" :key="items.value" :label="items.loginName + ' ' + items.groupName"
							:value="items.groupId">
						</el-option>
					</el-select>
				</el-form-item>
                <el-form-item label="需要回复" prop="needReply">
                    <el-select
                        style="width: 100% !important"
                        v-model="formData.needReply"
                        placeholder="请选择是否需要回复">
                        <el-option label="是" value="是"> </el-option>
                        <el-option label="否" value="否"> </el-option>
                    </el-select>
                </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetUser('ruleForm')">取 消</el-button>
				<el-button v-loading="loading" @click="subUser('ruleForm')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import mySearch from "../../../components/search";
	import myMessage from "../../../components/myMessage.vue";
	export default {
		components: {
			mySearch,
			myMessage,
		},
		data() {
			return {
				centerDialogVisible: false,
				messTit: "",
				dataId: "",
				options: [],
				dialogStatus: false,
				formData: {
					woTitle: "",
					requiredTime: "",
					sendNoArr: [],
					sendMonth: "",
					sendYear: "",
                    needReply: "是",
				},
				rules: {
					woTitle: [{
						required: true,
						message: "请输入预算标题",
						trigger: "blur"
					}, ],
					requiredTime: [{
						required: true,
						message: "请选择反馈时间",
						trigger: "change",
					}, ],
					sendNoArr: [{
						required: true,
						message: "请选择接收科室",
						trigger: "change",
					}, ],
					sendMonth: [{
						required: true,
						message: "请选择下发月份",
						trigger: "change",
					}, ],
					sendYear: [{
						required: true,
						message: "请选择下发年份",
						trigger: "change",
					}, ],
				},
				fullscreen: false,
				total: 0,
				pageSize: 1,
				tableData: [],
				searchList: [{
					type: "input",
					tit: "模板名称",
					value: "",
					width: "100%",
					options: [],
				}, ],
				params: {
					tempName: "",
				},
				loading: false,
				tableCell: "",
				tempType: "",
				isManageMuban: false
			};
		},
		methods: {
			// 查看详情
			detailes(val) {
				this.$router.push({
					path: "seekpi",
					query: {
						tabCode: val.tabCode,
						type: "see",
					},
				});
			},
			// 增加表单处理
			async subUser(formName) {
				let sendNoArr = [];
				let valid = await this.$refs[formName].validate().catch((err) => err);
				if (valid) {
					this.options.map((row) => {
						this.formData.sendNoArr.map((item) => {
							if (item == row.groupId) {
								sendNoArr.push({
									receiveNo: row.loginNo,
									receiveName: row.loginName,
									receiveDeptCode: row.groupId,
									receiveDeptName: row.groupName,
								});
							}
						});
					});
					let data = {
						tabName: this.tableCell.tabName,
						tabCode: this.tableCell.tabCode,
						requireTime: this.formData.requiredTime,
						receive: sendNoArr,
						kpiMonth: this.formData.sendMonth,
						tempType: this.tempType,
						subType: this.tableCell.subType || "a",
						kpiYear: this.formData.sendYear,
                        needReply: this.formData.needReply,
					};
					let results = await this.$http({
						url: "/market/kpidepts/checkExists",
						method: "post",
						headers: {
							"Content-Type": "application/json",
						},
						data: data,
					});
					data.kpiTitle = this.formData.woTitle;
					if (results.data.result == 0) {
						this.subTask(data);
					} else {
						let confirm = await this.$confirm(
							"本月已下发过绩效是否覆盖下发",
							"提示", {
								type: "warning"
							}
						).catch(() => {
							this.$message({
								type: "info",
								message: "已取消",
							});
						});
						if (confirm == "confirm") {
							this.subTask(data);
						}
					}
				}
			},
			// 下发任务
			subTask(data) {
				this.$http({
						url: "/market/kpidepts/add",
						method: "post",
						headers: {
							"Content-Type": "application/json",
						},
						data: data,
					})
					.then((res) => {
						if (res.data.result == 0) {
							this.$message({
								type: "success",
								message: "下发成功",
							});
						} else {
							this.$message({
								type: "error",
								message: res.data.desc,
							});
						}
						this.loading = false;
						this.dialogStatus = false;
						this.getList(this.params, this.pageSize);
					})
					.catch((err) => {
						this.loading = false;
					});
			},
			// 取消提交
			resetUser(formName) {
				this.$refs[formName].resetFields();
				this.dialogStatus = false;
			},
			// 下发按钮
			issue(val) {
				this.tableCell = val;
				this.dialogStatus = true;
				this.formData.sendNoArr = [];
				if (val.tempType == "0") {
					this.formData.sendNoArr.push(val.groupId);
				}

				this.tempType = val.tempType;
			},
			// 删除模板
			deletes(val) {
				this.centerDialogVisible = true;
				this.messTit = "即将作废绩效模板, 是否确定?";
				this.dataId = val.id;
				// this.$confirm("即将作废绩效模板, 是否确定?", "提示", {
				//   confirmButtonText: "确定",
				//   cancelButtonText: "取消",
				//   type: "warning",
				// })
				//   .then(() => {
				// this.$http({
				//   url: "/market/kpitemps/delKpiTemp",
				//   method: "post",
				//   headers: {
				//     "Content-Type": "application/json",
				//   },
				//   data: { id: val.id },
				// }).then((res) => {
				//   this.$message({
				//     message: "删除成功",
				//     type: "success",
				//   });
				//   this.getList(this.params, this.pageSize);
				// });
				//   })
				//   .catch(() => {});
			},
			closeMessage(v) {
				this.centerDialogVisible = false;
				if (v === 1) {
					this.$http({
						url: "/market/kpitemps/delKpiTemp",
						method: "post",
						headers: {
							"Content-Type": "application/json",
						},
						data: {
							id: this.dataId
						},
					}).then((res) => {
						if (res.data.result == "0") {
							this.$message({
								message: "删除成功",
								type: "success",
							});
						}
						this.getList(this.params, this.pageSize);
					});
				}
			},
			// 新增模板
			addExcel() {
				this.$router.push("/initKpi?status=add");
			},
			// 修改模板 --废弃
			updates(val) {
				this.$router.push({
					path: "seekpi",
					query: {
						tabCode: val.tabCode,
						type: "update",
					},
				});
			},
			//搜索数据
			searchInfo(v) {
				this.params = {};
				v[0] ? (this.params.tempName = v[0]) : "";
				this.getList(this.params, this.pageSize);
			},
			//获取列表
			getList(v, n) {
				this.loading = true;
				this.pageSize = n;
				this.$http({
					url: "/market/kpitemp/queryPage",
					method: "post",
					headers: {
						"Content-Type": "application/json",
						page: '{"pageNo":"' + n + '","pageSize":"10"}',
					},
					data: v,
				}).then((res) => {
					this.loading = false;
					this.tableData = res.data.data;
					this.total = res.data.totalRecord;
				});
			},
			//功能栏
			iconCli(v) {
				if (v === 1) {
					this.getList(this.params, this.pageSize);
				}
				if (v === 2) {
					this.fullscreen = !this.fullscreen;
				}
			},
			// 分页
			currchange(v) {
				this.pageSize = v;
				this.getList(this.params, this.pageSize);
			},
			//  获取科室信息
			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();
			this.getList(this.params, this.pageSize);

			let menus = JSON.parse(window.sessionStorage.childrenMenus);
			menus.forEach(item=>{
				if(item.systemflag == 1 && item.jspUrl == '/kpiMuban'){
					this.isManageMuban = true
				}
			})
		},
		watch: {
			$route() {
				this.getList(this.params, this.pageSize);
			},
		},
	};
</script>
<style scoped>
	.el-upload-list {
		float: right;
	}

	.el-input__suffix {
		cursor: pointer;
	}

	.container .el-upload {
		width: auto !important;
	}
</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>