webapp / GreenwayWeb

  <template>

  	<div style="background-color:#f7f7f7;padding:10px 10px;">
  		<div class="zhuti" v-if="onaction == '1'">
  			<div style="height:58px;line-height:58px;">
  				<div style="color:#0006"> <span>商铺租赁服务</span> <span style="padding:0 5px;">></span> <span
  						style="color:#000000e6">合同管理</span></div>
  			</div>
  			<!-- 线上 -->
  			<div>
  				<!-- 搜索 -->
  				<div class="formSearch">
  					<el-form :inline="true" :model="pagequery">
  						<el-form-item label="合同名称">
  							<el-input v-model="pagequery.contractName" placeholder="请输入" style="width:168px;" />
  						</el-form-item>
  						<el-form-item label="合同状态" prop="dataStatus">
  							<el-select v-model="pagequery.dataStatus" clearable placeholder="请选择"
  								style="width: 168px;margin-right: 15px">
  								<el-option label="使用中" value="1"></el-option>
  								<el-option label="往期合同" value="2"></el-option>
  								<el-option label="已终止" value="3"></el-option>
  							</el-select>
  						</el-form-item>
  						<el-form-item label="合同类型" prop="contractType">
  							<el-select v-model="pagequery.contractType" clearable placeholder="请选择"
  								style="width: 168px;margin-right: 15px">
  								<el-option label="商铺合同" value="商铺合同"></el-option>
  								<el-option label="广告位合同" value="广告位合同"></el-option>
  								<el-option label="场地合同" value="场地合同"></el-option>
  							</el-select>
  						</el-form-item>
  					</el-form>
  
  					<div>
  						<el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">查询
  						</el-button>
  						<el-button @click="resetting" class="buttonHover"
  							style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
  						</el-button>
  					</div>
  				</div>
  				<div style="margin-bottom: 20px;">
  					<el-button @click="removeonaction('2')"
  						style="background-color: #3F9B6A;color: #fff;padding:8px 15px;"
  						icon="el-icon-circle-plus-outline">新增</el-button>
  					<!-- <el-button @click="" style="background-color: #3F9B6A;color: #fff">批量导入</el-button> -->
  				</div>
  				<!-- 表格 -->
  
  				<el-table :data="tableData"
  					:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
  					<el-table-column label="合同名称">
  						<template slot-scope="scope">
  							{{scope.row.contractName}}
  
  						</template>
  					</el-table-column>
  					<el-table-column label="合同金额">
  						<template slot-scope="scope">
  							{{scope.row.contractAmount}}
  
  						</template>
  					</el-table-column>
  					<el-table-column label="签订日期">
  						<template slot-scope="scope">
  							{{scope.row.contractSigningDate}}
  
  						</template>
  					</el-table-column>
  					<el-table-column label="终止日期">
  						<template slot-scope="scope">
  							{{scope.row.contractTerminationDate}}
  
  						</template>
  					</el-table-column>
  					<el-table-column label="姓名">
  						<template slot-scope="scope">
  							{{scope.row.tenantName}}
  
  						</template>
  					</el-table-column>
  					<el-table-column label="联系电话">
  						<template slot-scope="scope">
  							{{scope.row.tenantTelephone}}
  
  						</template>
  					</el-table-column>
  					<el-table-column label="合同类型">
  						<template slot-scope="scope">
  							{{scope.row.contractType}}
  
  						</template>
  					</el-table-column>
  					<el-table-column prop="dataStatus" label="合同状态">
  						<template slot-scope="scope">
  							<span v-if='scope.row.dataStatus == 1'>使用中</span>
  							<span v-else-if='scope.row.dataStatus == 2'>往期合同</span>
  							<span v-else-if='scope.row.dataStatus == 3'>已终止</span>
  							<span v-else-if='scope.row.dataStatus == 4'>待发起</span>
  							<span v-else-if='scope.row.dataStatus == 5'>待审核</span>
  							<span v-else-if='scope.row.dataStatus == 6'>已拒绝</span>
  							<span v-else>-</span>
  						</template>
  					</el-table-column>
  
  					<el-table-column label="操作" min-width="150" fixed="right">
  						<template slot-scope="scope">
  							<div @click="details(scope.row,'1')" class="tableBtn greens">查看</div>
  							<!--  -->
  							<!-- <div v-if='scope.row.dataStatus == 5 && scope.row.isInterior == 1'  @click="details(scope.row,'2')" class="tableBtn greens">审核</div> -->
  							<div v-if='scope.row.dataStatus == 4' @click="details(scope.row,'2')"
  								class="tableBtn greens">审核</div>
  							<!-- <div v-if='scope.row.dataStatus == 4'  @click="remove(scope.row)" class="tableBtn greens">内部审核</div> -->
  							<div v-if='scope.row.dataStatus == 4' @click="openOAitem(scope.row)"
  								class="tableBtn greens">OA审核</div>
  							<div v-if='scope.row.dataStatus == 1' @click="removeinfo(scope.row,'合同变更')"
  								class="tableBtn greens">合同变更</div>
  							<div v-if='scope.row.dataStatus == 1' @click="removeinfo(scope.row,'合同续约')"
  								class="tableBtn greens">合同续约</div>
  							<div v-if='scope.row.dataStatus == 1' @click="removeinfozz(scope.row,'合同终止')"
  								class="tableBtn greens">合同终止</div>
  							<!-- <div @click="handleDelete(scope.row)" class="tableBtn greens">删除</div> -->
  						</template>
  					</el-table-column>
  				</el-table>
  				<div style="display: flex;justify-content: space-between;" class="bom">
  					<div style="font-size: 14px;">共 <span style="color: #3F9B6A;">{{total}}</span> 项数据</div>
  					<el-pagination :current-page="pagequery.pageNumber+1" :page-sizes="[10, 20, 50, 100]"
  						:page-size="10" background small layout="prev, pager, next" :total="total"
  						@size-change="handleSizeChange" @current-change="handleCurrentChange">
  					</el-pagination>
  				</div>
  
  			</div>
  
  		</div>
  
  
  
  
  
  
  		<div class="zhuti" v-if="onaction == '2'">
  			<div style="height:58px;line-height:58px;">
  				<div style="color:#0006"> <span>合同管理</span> <span style="padding:0 5px;">></span> <span
  						style="color:#000000e6">新增</span></div>
  			</div>
  
  			<div style="padding: 20px 20px 20px 0;">
  				<add :info="formInline" @removeonaction="removeonaction"></add>
  			</div>
  		</div>
  		<div class="zhuti" v-if="onaction == '3'">
  			<div style="height:58px;line-height:58px;">
  				<div style="color:#0006"> <span>合同管理</span> <span style="padding:0 5px;">></span> <span
  						style="color:#000000e6">查看</span></div>
  			</div>
  			<div>
  				<busCha :issp="issp" :info="detailsinfo" @removeonaction="removeonaction"></busCha>
  			</div>
  			<!-- <div>

          <el-button class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;margin-top: 20px;"
            @click="removeonaction('1')">返回</el-button>
        </div> -->

  		</div>
  		<div class="zhuti" v-if="onaction == '4'">
  			<div style="height:58px;line-height:58px;">
  				<div style="color:#0006"> <span>合同管理</span> <span style="padding:0 5px;">></span> <span
  						style="color:#000000e6">{{contractChangeReason}}</span></div>
  			</div>
  
  			<div style="padding: 20px 20px 20px 0;">
  				<!-- <addremove :info="detailsinfo" :contractChangeReason="contractChangeReason" @removeonaction="removeonaction">

          </addremove> -->

  				<add :info="detailsinfo" :contractChangeReason="contractChangeReason" @removeonaction="removeonaction">
  				</add>
  			</div>
  		</div>
  		<el-dialog :visible.sync="openoa" title="OA" width="25%" append-to-body center :close-on-click-modal="false"
  			:close-on-press-escape="false" :show-close="false">
  			<el-form v-if="openoa" style="padding-right: 50px;padding-top: 20px;" :model="ruleForm" :rules="rulesoa"
  				ref="oaForm" label-width="130px" class="demo-ruleForm">
  				<el-form-item label="审核人" prop="reviewers">
  					<el-select v-model="ruleForm.reviewers" placeholder="请选择" style="width: 100%;">
  						<el-option label="陈阳" value="1858710592190291968"></el-option>
  					</el-select>
  				</el-form-item>
  
  			</el-form>
  			<div style="display: flex; justify-content: flex-end; align-items: center;padding: 20px 50px;">
  				<el-button @click="openoa =false" class="buttonHover"
  					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消</el-button>
  				<el-button @click="OA" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
  			</div>
  		</el-dialog>
  	</div>

  
  
  </template>
  
  <script>

  	import {
  		contractGetAllnew,
  		edit,
  		editById,
  	} from '@/api/manage.js'
  	import {
  		examine,
  		startOa
  	} from '@/api/oa.js'
  	import add from '@/components/add/addht.vue'
  	import addremove from '@/components/add/addremoveht.vue'
  	import busCha from '@/components/buscha/busCha'
  	import {
  		cereContractInformation
  	} from '@/api/commodityLease.js'
  	import {
  		modifyResourceStatus,
  		general
  	} from '@/api/newly.js'
  	import axios from 'axios'
  	export default {
  		data() {
  			return {
  				issp: '1',
  				rulesoa: {
  					reviewers: [{
  						required: true,
  						message: '请选择审核人',
  						trigger: 'blur'
  					}, ],
  				},
  				ruleForm: {
  					reviewers: ""
  				},
  				openoa: false,
  				contractChangeReason: '',
  				detailsinfo: {},
  				pagequery: {
  					// dataStatus:'1',
  					pageNumber: 0,
  					pageSize: 10,
  					contractName: '',
  					contractType: ''
  				},
  				tableData: [],
  				total: 0,
  				onaction: '1',
  				formInline: {},
  				oainfo: {}
  			}
  		},
  		components: {
  			add,
  			busCha,
  			addremove
  		},
  	 created() { 
  		// localStorage.setItem('token','Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiIxODEwODE0Mzk0NSIsImp0aSI6Imx4QTlSam9IRmFhVFBoTl9qRTJkeTcybUFHayIsImNsaWVudF9pZCI6ImNiOGYxNDE2M2QxYzExZWM5NmU4MDBlMDRjMzEwMjUzIiwic2NvcGUiOlsiZ2V0X3VzZXJfaW5mbyJdfQ.dXD3dqoUg5ryH_fKk7LuwVwpsZh7SsyUWH8WO1wbuEfQqCPv7YEZShxGFfgr-pHvVqnhQeFrvmV30Ib4T12luqG7VU-CVe2Q6NjgzGgiM_f-ZtNfhPm-BUFRzpQT-pSe31QTm2N8R-rL5y6kt8HACFSTi8W6q6aMzZ9a6zLuL_3W0MqLEA1Xta6v2bGxfqiNaZ3tvSBOGnrX0NSUPdZvnhL-VH9zx9DFQmjK23drHty4baYQrJN9IW333b6pXQi_P6WhzSABE8FDva2RtplNrHS2ci40R0Cc3KaXkzM1Ac9m9ZKJUaGL7svjVEidlYsLuCAU1ccJvOOCFiRuGztxDQ')
  		 const ids = this.$route.query.ids;
  		 if (ids) {
  		 	let obj ={
  		 		pageNumber: 0,
  		 		pageSize: 10,
  		 		id:ids
  		 	}
  		  contractGetAllnew(obj).then(res=>{
  		 	 this.details(res.data.content[0],'2')
  		  })	
  			}
  
  		this.getAll()
  		},
  		methods: {
  			remove(row) {
  				let that = this
  				this.$confirm('是否确定内部审核吗？', '提示', {
  					confirmButtonText: '确定',
  					cancelButtonText: '取消',
  					type: 'warning'
  				}).then(() => {
  					editById({
  						contractNumber: row.contractNumber,
  						isInterior: '1'
  					}).then(res => {
  						console.error(res)
  						if (res.code == 200) {
  							edit({
  								contractNumber: row.contractNumber,
  								dataStatus: '5',
  							}).then(res1 => {
  								this.$message({
  									message: '处理成功',
  									type: 'success'
  								})
  								console.error(res1)
  								this.resetting()
  							})
  
  						} else {
  							this.$message({
  								message: res.msg,
  								type: 'error'
  							})
  						}
  
  					})
  				})
  			},
  			 getTokenAfterSpace(token) {
  			    const spaceIndex = token.indexOf(' ');
  			    if (spaceIndex!== -1) {
  			        return token.slice(spaceIndex + 1);
  			    }
  			    return token;
  			},
  			openOAitem(row) {
  				this.oainfo = row
  				// this.ruleForm.reviewers = ''
  				// this.openoa = true
  					let that = this
  					this.$confirm('确定是否提交OA？', '提示', {
  						confirmButtonText: '确定',
  						cancelButtonText: '取消',
  						type: 'warning'
  					}).then(() => {
  						let row = this.oainfo
  						 let obj = {
  							 businessKey:row.id,
  							 businessName:row.contractName,
  							 type:1,
  						 }
  						 console.log(obj,'obj')
  						 // return
  						startOa(obj).then(res => {
  							// let data = JSON.parse(res.data)
  							if (res.code == '200') {
  								this.$message({
  									type: 'success',
  									message: '发起成功'
  								})
  								this.resetting()
  							} else {
  								this.$message({
  									type: 'error',
  									message: res.message
  								})
  							}
  						})
  						
  					})
  				
  			},
  			downloadBase64File(base64String, fileName, mimeType) {
  				try {
  					// 将 Base64 字符串解码为二进制数据
  					const byteCharacters = atob(base64String);
  					const byteNumbers = new Array(byteCharacters.length);
  					for (let i = 0; i < byteCharacters.length; i++) {
  						byteNumbers[i] = byteCharacters.charCodeAt(i);
  					}
  					const byteArray = new Uint8Array(byteNumbers);
  
  					// 创建 Blob 对象
  					const blob = new Blob([byteArray], {
  						type: mimeType
  					});
  
  					// 生成下载链接并触发下载
  					const url = window.URL.createObjectURL(blob);
  					const link = document.createElement('a');
  					link.href = url;
  					link.setAttribute('download', fileName); // 设置下载文件名
  					document.body.appendChild(link);
  					link.click();
  
  					// 清理生成的 URL 对象
  					window.URL.revokeObjectURL(url);
  					document.body.removeChild(link);
  
  					console.log('文件下载成功:', fileName);
  				} catch (error) {
  					console.error('文件下载失败:', error);
  				}
  			},
  			async OA() {
  				await this.$refs.oaForm.validate((valid) => {
  
  				})
  
  				if (!this.ruleForm.reviewers) {
  					return
  				}
  				const loading = this.$loading({
  					fullscreen: true
  				})
  				this.openoa = false
  				console.log(this.$baseURL + row.appendicesContract)
  				const response = await axios({
  					method: 'get',
  					url: this.$baseURL + row.appendicesContract, // 文件 URL
  					responseType: 'arraybuffer' // 指定响应类型为二进制数据
  				});
  
  				const buffer = Buffer.from(response.data);
  				const base64Data = buffer.toString('base64');
  				console.log(base64Data);
  				const file = new File([response.data], 'filename.txt', {
  					type: 'text/plain'
  				});
  				let userData = JSON.parse(localStorage.getItem('user'));
  				let fd = new FormData();
  				fd.append('files', file); // 假设 formData 包含文件
  				fd.append('reviewers', this.ruleForm.reviewers);
  				fd.append('fileNames', '合同.docx');
  				fd.append('title', `${row.contractName}审批`);
  				fd.append('contractNumber', row.contractNumber);
  				fd.append('sponsor', userData.user.id);
  				general(fd).then(res => {
  					console.log(res);
  					let data = JSON.parse(res.data)
  					if (data.code == '0') {
  						this.$message({
  							type: 'success',
  							message: '发起成功'
  						})
  						loading.close();
  						this.resetting()
  					} else {
  						this.$message({
  							type: 'error',
  							message: data.message
  						})
  					}
  				})
  
  
  			},
  			gettime() {
  				// 获取当前时间
  				let currentTime = new Date();
  
  				// 获取年份
  				let year = currentTime.getFullYear();
  
  				// 获取月份（注意月份是从0开始计数的，所以需要加1）
  				let month = currentTime.getMonth() + 1;
  
  				// 获取日期
  				let day = currentTime.getDate();
  
  				// 获取小时
  				let hours = currentTime.getHours();
  
  				// 获取分钟
  				let minutes = currentTime.getMinutes();
  
  				// 获取秒数
  				let seconds = currentTime.getSeconds();
  
  				// 获取毫秒数
  				let milliseconds = currentTime.getMilliseconds();
  
  				// 格式化时间为 YYYY-MM-DD
  				let formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
  
  				// 格式化时间为 HH:MM:SS
  				let formattedTime =
  					`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  
  				// 格式化时间为 YYYY-MM-DD HH:MM:SS
  				let formattedDateTime = `${formattedDate} ${formattedTime}`;
  				return formattedDateTime
  
  			},
  			removeinfozz(row, e) {
  				let that = this
  				this.$confirm('确定要终止合同吗？', '提示', {
  					confirmButtonText: '确定',
  					cancelButtonText: '取消',
  					type: 'warning'
  				}).then(() => {
  					cereContractInformation({
  						...row,
  						contractChangeReason: e,
  						dataStatus: '3',
  						originalContractCode: row.contractNumber,
  						updateDate: that.gettime(),
  						createDate: that.gettime(),
  						contractChangeTime: that.gettime(),
  						updateUser: localStorage.getItem('roleName')
  					}).then(res => {
  						console.error(res)
  						if (res.code == 200) {
  							this.$message({
  								message: '终止成功',
  								type: 'success'
  							})
  							let c1 = row.shopNumber
  							modifyResourceStatus({
  								resourcesId: c1,
  								status: "0"
  							}).then(res => {
  								console.error(res)
  							})
  							// this.$emit('removeonaction', '1')
  							this.getAll()
  						} else {
  							this.$message({
  								message: res.msg,
  								type: 'error'
  							})
  						}
  
  					})
  				})
  			},
  			details(row, e) {
  				this.issp = e
  				this.detailsinfo = row
  				this.onaction = '3'
  			},
  			removeinfo(row, e) {
  				this.contractChangeReason = e
  				// console.error(this.contractChangeReason)
  				this.detailsinfo = row
  				this.onaction = '4'
  			},
  			async getAll() {
  				const res = await contractGetAllnew(this.pagequery)
  				this.tableData = res.data.content
  				this.total = res.data.totalElements
  			},
  			removeonaction(e) {
  				console.error(e)
  				this.onaction = e
  				this.pagequery.pageNumber = 0
  				this.getAll()
  			},
  			handleCurrentChange(val) {
  				this.pagequery.pageNumber = val - 1
  				this.getAll()
  			},
  			handleSizeChange(val) {
  				this.pagequery.pageSize = val
  			},
  			// 查询按钮
  			async onSubmit() {
  				this.pagequery.pageNumber = 0
  				this.getAll()
  			},
  			//重置按钮
  			resetting() {
  				this.pagequery = {
  						pageNumber: 0,
  						pageSize: 10,
  						dataStatus: '',
  						contractName: '',
  						contractType: ''
  					},
  					this.getAll()
  			},
  		}
  
  	}

  </script>
  
  <style scoped>

  	.el-table {
  		/* height: calc(100vh - 330px); */
  	}

  	.zhuti {
  		padding: 0 20px 20px 20px;
  		min-height: calc(100vh - 50px - 20px);
  		background-color: #Fff;

  	}

  	.chengeXia {
  		border-bottom: 6px solid #3F9B6A;
  		padding-bottom: 4px;
  		color: #3F9B6A;
  	}

  	/* /deep/ .el-form-item__content {

      line-height: 0;

    } */

  	.tableBtn {
  		display: inline-block;
  		margin-right: 10px;
  		color: #ACACAC;
  	}

  	.formSearch {
  		display: flex;
  		width: 100%;
  		font-size: 14px;
  		justify-content: space-between;
  	}

  	.greens {
  		color: #3F9B6A;
  	}

  	/deep/ .el-table__row {
  		font-size: 14px;
  		color: #000000e6;
  		height: 42px;
  	}

  	.fenye {
  		margin-top: 20px;
  		display: flex;
  		justify-content: space-between;
  	}

  	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  		background-color: #3F9B6A;
  	}

  	.el-col {
  		border-radius: 4px;
  	}

  	.bg-purple-dark {
  		background: #99a9bf;
  	}

  	.bg-purple {
  		background: #d3dce6;
  	}

  	.bg-purple-light {
  		background: #e5e9f2;
  	}

  	.grid-content {
  		border-radius: 4px;
  		min-height: 36px;
  	}

  	.row-bg {
  		padding: 10px 0;
  		background-color: #f9fafc;
  	}

  	/deep/ .bg-purple[data-v-0e3fe4ec] {
  		background: #fff;
  		height: 50px;
  	}

  	/deep/ .bg-purple[data-v-3bebae82] {
  		background: #fff;
  		height: 50px;
  	}

  	::v-deep .bg-purple {
  		background: #fff;
  		height: 50px;
  	}

  	/deep/ .el-form--label-top .el-form-item__label {
  		padding: 0;
  	}

  	::v-deep .el-dialog__wrapper {
  		.el-dialog__header {
  			background-color: #fff;
  		}
  	}

  	.dialog-footer {
  		display: flex;
  		justify-content: flex-end;
  		border-top: solid rgba(209, 209, 209, 0.2) 2px;
  		padding-top: 20px;
  	}

  	.el-select-dropdown__item.selected {
  		color: #3F9B6A;
  	}

  	::v-deep .el-dialog__title {
  		color: #000;
  	}

  	::v-deep .el-dialog__wrapper {

  		.dialog_css {
  			margin-right: 12px;
  			margin-top: 61px !important;

  		}

  		.diaslog_zhong {
  			margin-left: 222px;
  			margin-top: 61px !important;
  		}

  	}

  	/deep/ .el-table_1_column_8 .hetong {
  		color: #7DBB9A;
  		text-decoration: underline;
  	}

  	/deep/ .first-column-bg {
  		background-color: #FAFAFA !important;
  	}

  	.el-table tr {
  		height: 56px;
  	}

  	::v-deep .table3 {
  		.el-table__empty-block {
  			display: none;
  		}
  	}

  	::v-deep .textarea {
  		width: 85%;

  		.el-textarea__inner {
  			width: 100%;
  		}
  	}

  	::v-deep .el-button--mini {
  		padding: 7px 10px;
  	}

  	::v-deep .pass_input {
  		width: 100%;

  		.el-input__inner {
  			border: none;
  			padding: 0;
  		}
  	}

  	::v-deep .pass_select {
  		width: 100%;

  		.el-input__inner {
  			border: none;
  			padding: 0;
  		}

  		.el-icon-arrow-up:before {
  			content: ''
  		}

  	}

  	/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  		background-color: #fff;
  	}

  </style>
  <style lang="scss" scoped>

  	::v-deep .el-dialog__body {
  		padding: 0 0 !important;
  	}
  </style>