spfm-market-front/src/pages/main/officialAccount/officialAccountadd.vue

<template>
	<div>
		<div class="container">
			<el-form :model="infolist" ref="infolist" :rules="rules" class="container-box">
				<h2 style="display: block;margin-bottom: 20px;">公众号图文协推资料发起</h2>
				<div style="height: calc(100% - 160px);overflow-y: scroll;">
					<div class="info-line">
						<el-form-item prop="taskName">
							<span>任务名称</span>
							<el-input v-model="infolist.taskName" placeholder="任务名称" :disabled="disableStatus">
							</el-input>
						</el-form-item>

						<el-form-item>
							<span>推送渠道</span>
							<el-input v-model="infolist.channel" placeholder="推送渠道" :disabled="disableStatus">
							</el-input>
						</el-form-item>
						<el-form-item>
							<span>推送时间</span>
							<el-date-picker v-model="infolist.time" type="date" placeholder="推送时间">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<span>推送标题</span>
							<el-input v-model="infolist.tit" placeholder="推送标题" :disabled="disableStatus"></el-input>
						</el-form-item>
						<el-form-item>
							<span>推送摘要</span>
							<el-input v-model="infolist.pushAbstract" placeholder="推送摘要" :disabled="disableStatus">
							</el-input>
						</el-form-item>
						<el-form-item>
							<span>原文链接</span>
							<el-input v-model="infolist.original" placeholder="原文链接" :disabled="disableStatus">
							</el-input>
						</el-form-item>
					</div>

					<el-form-item prop="regionCode" class="info-line online">
						<span>落实单位</span>
						<el-select :popper-append-to-body="false" v-model="infolist.compList" placeholder="落实单位"
							multiple @change="chocomp">
							<el-option v-for="(item,index) in regionOpt" :key="index" :label="item.l"
								:value="item.o">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="info-line online">
						<span>任务说明</span>
						<el-input v-model="infolist.remark" placeholder="任务说明" type="textarea" :rows="3"></el-input>
					</el-form-item>
					<div style="padding-left: 80px">
						<myUpload @uploadBack="uploadBack" :fileInfo="fileInfo" :fileList="fileInfo.fileList">
						</myUpload>
					</div>
				</div>
				<div class="t-footer">
                    <el-button type="primary" @click="temp">保 存</el-button>
					<el-button type="primary" @click="checkexa = true">确 定</el-button>
					<el-button @click="dialogCli(1)">取 消</el-button>
				</div>
			</el-form>
		</div>
		<!-- <el-dialog title="选择审批人" :visible.sync="checkexa" width="50%" :destroy-on-close="true"
			:modal-append-to-body="false" :close-on-click-modal="false">
			<div>

				<el-form :model="infolist" ref="infolist" :rules="rules">
					<el-form-item prop="visiblec" class="info-line online">
						<span>审批人员</span>
						<deptTreeOnly class="tree" @treeCheck="treeCheckonly" :defaultList="defaultList"
							:type="depttype" :closeList="closeList"></deptTreeOnly>
						<div class="tree treeUser">
							<p>{{treeListonly.leaderAuditName}}
								<i v-if="treeListonly.leaderAuditName" @click="deletes()"
									class="el-icon-error"></i>
							</p>
						</div>
					</el-form-item>
				</el-form>

				<div slot="footer" style="text-align: right;">
					<el-button type="primary" @click="dialogCli(2)">确 定</el-button>
					<el-button @click="checkexa = false">取 消</el-button>
				</div>
			</div>
		</el-dialog> -->
		<el-dialog
        title="选择审批人"
        :visible.sync="checkexa"
        width="100%"
        style="height: 100%"
        :fullscreen="true"
        :destroy-on-close="true"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
      >
        <div style="height: 100%">
          <el-form :model="infolist" ref="infolist" style="height: 100%">
            <el-form-item prop="visiblec" style="height: 100%">
              <!-- <span style="width: 80px">审批人员</span> -->
              <deptTreeOnly
                @treeCheck="treeCheckonly"
                :defaultList="defaultList"
                :type="depttype"
                :closeList="closeList"
              ></deptTreeOnly>
              <div style="text-align: center; margin-top: 30px">
                <el-button type="primary" @click="checkProcessUser()"
                  >确 定</el-button
                >
                <el-button @click="checkexa = false">取 消</el-button>
              </div>
              
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
	</div>
</template>
<script>
	import mySearch from "../../../components/search.vue";
	import myUpload from "../../../components/upload.vue";
	// import deptTreeOnly from "../../../components/deptTreeOnly.vue"
	import deptTreeOnly from "../../../components/newTree.vue";
	export default {
		components: {
			mySearch,
			myUpload,
			deptTreeOnly
		},
		data() {
			const taskName = (rule, value, callback) => {
				if (!this.infolist.taskName) {
					callback(new Error('不能为空'))
				} else {
					callback()
				}
			}
			return {
				rules: {
					taskName: [{
						required: true,
						trigger: 'blur',
						validator: taskName
					}],
				},
				fullscreen: false,
				tableData: [{}],
				disableStatus: false,
				infolist: {},
				terminal: '',
				userInfo: {},
				params: {},
				attList: [],
				//
				options: [],
				regionOpt: [],
				fileInfo: {
					limit: 5,
					url: '/market/cmkAttachInfo/mkEmscnpl/upload',
					fileList: []
				},
				company: [],
				checkexa: false,
				treeListonly: {},
				defaultList: [],
				closeList: false,
				depttype: 0,
                tempSave: false,
			}
		},
		methods: {
				checkProcessUser() {
                let _this = this;
                if (_this.treeListonly.length > 1) {
                    _this.$message({
                    message: "只能选择一个人",
                    type: "error",
                    });
                } else {
                    _this.dialogCli(2);
                }
                },
			deletes() {
				this.treeListonly = {};
				this.closeList = !this.closeList;
			},
			treeCheckonly(v) {
				this.treeListonly = v;
				this.treeListonly.leaderAuditName = v[0].label;
				this.treeListonly.leaderAuditNo = v[0].key;
			},
			chocomp(v) {
				this.company = [];
                if(v[v.length-1] == '全选'){
                    this.infolist.compList = [];
                    for (let i = 0; i < this.regionOpt.length; i++) {
                    	if (this.regionOpt[i].o != '全选') {
                    		let x = {};
                    		x.approvalNo = '';
                    		x.approvalName = '';
                    		x.deptNo = this.regionOpt[i].o;
                    		x.compName = this.regionOpt[i].l;
                    		this.company.push(x);
                    	    this.infolist.compList.push(this.regionOpt[i].o)
                    	}
                    }
                }else{
                    for (let i = 0; i < this.regionOpt.length; i++) {
                    	for (let j = 0; j < v.length; j++) {
                    		if (this.regionOpt[i].o == v[j]) {
                    			let x = {};
                    			x.approvalNo = '';
                    			x.approvalName = '';
                    			x.deptNo = this.regionOpt[i].o;
                    			x.compName = this.regionOpt[i].l;
                    			this.company.push(x)
                    		}
                    	}
                    }
                }
			},
			//添加
			dialogCli(v) {
				if (v === 1) {
					this.fileInfo.fileList = [];
					this.infolist = {};
					this.checkexa = false;
					return
				}
				let _this = this;
				let info = {};
				this.infolist.time = this.infolist.time?_this.$formatDate(this.infolist.time, "YYYY-MM-DD"):'';
				this.infolist.opTime = _this.$formatDate(new Date(), "YYYY-MM-DD");
				this.infolist.opNo = this.userInfo.loginNo;
				this.infolist.opName = this.userInfo.loginName;
				this.infolist.compList = this.company;
				this.infolist.directorNo = this.treeListonly.leaderAuditNo;
				this.infolist.directorName = this.treeListonly.leaderAuditName;
				this.infolist.attList = this.attList;
				this.infolist.sts = '1';
				this.infolist.stsDesc = '待审核';
				this.submitInfo("/market/cemscnpl/add");

                this.$http({
                    url: "/market/bpmTemp/del",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        bpmType: "2",
                    },
                }).then((res) => {
                    //console.log(res)
                });
			},
			submitInfo(u, v) {
				let _this = this;
				this.$refs.infolist.validate(valid => {
					if (valid) {
						this.$http({
							url: u,
							method: "post",
							headers: {
								"Content-Type": "application/json",
							},
							data: this.infolist,
						}).then((res) => {
							if (res.data.result === 1) {
								_this.$message({
									message: res.data.desc,
									type: 'error'
								});
							} else {
								_this.$message({
									message: '成功',
									type: 'success'
								});
								_this.dialogCli(1);
							}

						});
					}
				})
			},
			getUser() {
				this.userInfo = JSON.parse(window.sessionStorage.userInfo);
			},
			uploadBack(v) {
				this.attList = v;
			},
			getRegion() {
				this.$http({
					url: "/sysmgr/sysdept/queryList",
					method: "post",
					headers: {
						"Content-Type": "application/json",
					},
					data: {
						 "initials":"市场经营部",
						 "orglevel": "2"
					},
				}).then((res) => {
					this.regionOpt = res.data;
                    this.regionOpt.unshift({
                        l:'全选',
                        o:'全选',
                    })
				});
			},
            temp() {
			    if (JSON.stringify(this.infolist)=='{}') {
			        return;
                }
                let params = {};
                params.infolist = this.infolist
                params.fileList = [];
                params.attList = [];
                this.attList.forEach(item => {
                    let file = {
                        id: item.fileCode,
                        fileCode: item.fileCode,
                        fileName: item.fileName,
                        name: item.fileName
                    };
                    params.fileList.push(file);
                    params.attList.push(file);
                });
                this.$http({
                    url: "/market/bpmTemp/temp",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        bpmType: "2",
                        content: JSON.stringify(params),
                    },
                }).then((res) => {
                    //console.log(res)
                });
            },
		},

        watch:{
            tempSave (value) {
                if (value) {
                    // 监听编辑状态，每20秒请求一次，注意函数不加（）
                    this.timer = window.setInterval(this.temp, 20000)
                } else {
                    // 停止监听
                    clearInterval(this.timer)
                }
            }
        },
		mounted() {
			this.getUser();
			this.getRegion();

            this.$http({
                url: '/market/bpmTemp/query',
                method: "post",
                headers: {"Content-Type": "application/json",},
                data: {bpmType: "2"},
            }).then((res) => {
                if (res.data) {
                    let content = JSON.parse(res.data.content);
                    this.infolist = content.infolist;
                    this.attList = content.attList;
                    this.fileInfo.fileList =  content.fileList;
                }
                this.tempSave = true;
            });
		},
		created() {

		}
	}
</script>
<style scoped lang="scss">
	  ::v-deep .el-dialog .flex-box{
        height: 400px;
    }
	.img-box {
		height: calc(100vh - 240px);
		overflow-y: scroll;

		.boximg {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20px;

			div {
				display: inline-block;
				width: 18%;
				margin-right: 2%;
				margin-bottom: 20px;
				overflow: hidden;
				border: 1px solid #ddd;
				border-radius: 3px;
				background: #fff;
				position: relative;
				height: 100px;

				img {
					width: 100%;
					position: absolute;
					top: 0;
					bottom: 0;
					margin: auto;
					// height: 100%;
				}

			}
		}
	}

	.boximgc {
		display: flex;
		flex-wrap: wrap;
		width: calc(100% - 80px) !important;
		margin-left: 80px;

		div {
			display: inline-block;
			width: 18% !important;
			margin-right: 2%;
			margin-bottom: 20px;
			overflow: hidden;
			border: 1px solid #ddd;
			border-radius: 3px;
			background: #fff;
			position: relative;
			height: 100px;

			img {
				width: 100%;
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;
				// height: 100%;
			}

		}
	}

	.typebox {
		div {
			border: 1px solid #ddd;
			border-top: transparent;

			span {
				display: inline-block;
				width: 20%;
				line-height: 30px;
				padding: 10px;
				vertical-align: top;
			}

			.big {
				width: 35%;
				// background: #f4f4f4;
			}

			.small {
				width: 5%;
				text-align: center;
				// border-right: 1px solid #ddd;
			}

			.gys {
				width: 40%;
			}
		}
	}

	.t-footer {
		text-align: right;
		padding-right: 20px;
		margin-top: 20px;
	}

	.onetab {
		padding: 20px;
		height: calc(100% - 180px);
	}

	.titbox {
		div {
			float: right;

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

	.tabbox {
		margin-top: 15px;
	}

	.pageBox {
		text-align: right;
		margin-top: 10px;
	}

	.info-line {
	    width: 100%;
	    display: block;
	    padding-left: 20px;

	    div {
	        width: 50%;
	        display: inline-block;
	    }

	    span {
	        width: 80px;
	        display: inline-block;
	        text-align: left;

	        i {
	            color: red;
	            display: inline-block;
	            padding-right: 5px;
	        }
	    }

	    .el-select,
	    .el-input {
	        width: calc(100% - 100px);
	    }
	}


	.online {
		width: 100%;

		.el-select {
			width: calc(100% - 100px);
		}

		span {
			vertical-align: top;
		}

		.el-textarea {
			width: calc(100% - 100px);
		}

		.tree {
			width: calc(50% - 60px);
			display: inline-block;
			margin-right: 20px;
			height: 300px;
			overflow-y: scroll;

			.el-icon-error {
				float: right;
				font-size: 20px;
				margin-top: 9px;
				cursor: pointer;
			}
		}

		.treeUser {
			margin: 0;
			border: 1px solid #ddd;

			p {
				background: #f4f4f4;
				padding: 0 20px;
				margin-bottom: 5px;
			}
		}

		.treeUserb {
		    width: calc(100% - 100px);
		    border: 1px solid #ddd;
		    background: #f4f4f4;
		    border-radius: 3px;
		    height: auto;
		    overflow: hidden;

		    p {
		        display: inline-block;
		        padding: 0 20px;
		        margin-bottom: 5px;
		    }
		}
	}
</style>