webapp / GreenwayWeb

<template>
	<div>
		<TitleWithCircle title="模版" style="margin-bottom: 20px;" />
		<el-form :model="forminfo" :rules="rulesmb" ref="ruleForm1" label-width="130px" class="demo-ruleForm">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="模版名称" prop="templateName">
						<el-input v-model="forminfo.templateName" placeholder="请输入" maxlength="20"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" style="display: flex;align-items: center;">
					<el-form-item label="word模板" prop="templateAttachment"
						:style="forminfo.templateAttachment?'width: 100%;':''">
						<upfile :accept="'.docx,.doc'" filePath="mb" inputtype="templateAttachment"
							:value="forminfo.templateAttachment" @changimg="e=>changimg(e,'templateAttachment')">
						</upfile>

					</el-form-item>
					<div v-if="!forminfo.templateAttachment" class="greens tableBtn iterem"
						@click.stop="openfile($baseURL+'/zsfwzxt/mb/fa0cc984-e1ac-474e-a579-89ea79cc9b8e-ces合同.docx')">
						模版文件</div>
				</el-col>
			</el-row>
		</el-form>
		<TitleWithCircle title="合同信息" style="margin-bottom: 20px;" />
		<mbadd :list1="list2" :iscopy="true" />
		<TitleWithCircle title="其他信息管理" />
		<div style="margin-left: 65px;margin-top: 20px;margin-bottom: 20px;">
			<el-button @click="mingShow()" style="background-color: #3F9B6A;color: #fff;">添加</el-button>
		</div>
		<mbadd :list1="list1" :iscopy="true" />
		<div style="margin-top: 20px;margin-left: 65px;">
			<div style="padding: 0px 20px 0px 0px">
				<el-table :data="list1"
					:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
					<el-table-column label="字段排序">
						<template slot-scope="scope">
							{{scope.$index + 1}}
						</template>
					</el-table-column>
					<el-table-column prop="notes" label="字段名称">
						<template slot-scope="scope">
							{{scope.row.name?scope.row.name : '-'}}
						</template>
					</el-table-column>
					<el-table-column prop="notes" label="字段key">
						<template slot-scope="scope">
							{{scope.row.key?scope.row.key : '-'}}
						</template>
					</el-table-column>
					<el-table-column prop="notes" label="字段类型">
						<template slot-scope="scope">
							{{scope.row.type?scope.row.type : '-'}}
						</template>
					</el-table-column>
					<el-table-column prop="notes" label="是否必填">
						<template slot-scope="scope">
							{{scope.row.isrequired?scope.row.isrequired : '-'}}
						</template>
					</el-table-column>
					<el-table-column prop="notes" label="字段宽度">
						<template slot-scope="scope">
							{{scope.row.width?scope.row.width : '-'}}
						</template>
					</el-table-column>
					<el-table-column prop="notes" label="限制规则">
						<template slot-scope="scope">
							{{scope.row.length?scope.row.length : '-'}}
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<div @click="MingDelete(scope.$index)" class="tableBtn greens">删除</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div v-if="info.id" style="margin-top: 20px;margin-left: 65px;">
			<el-button @click="close()" class="buttonHover"
				style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">返回</el-button>
		</div>
		<div v-else style="margin-top: 20px;margin-left: 65px;">
			<el-button @click="add()" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
			<el-button @click="close()" class="buttonHover"
				style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>
		</div>
		<el-dialog :visible.sync="addMing" title="添加" style="padding: 0;z-index: 9999999;" width="50%" append-to-body
			center :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<div v-if="addMing">
				<el-form :model="addmbitem" :rules="ruleaddmbitem" ref="addmbitem" label-width="130px"
					class="demo-ruleForm">
					<el-form-item label="字段名称" prop="name">
						<el-input v-model="addmbitem.name" placeholder="请输入" maxlength="20"></el-input>
					</el-form-item>
					<el-form-item label="字段key" prop="key">
						<el-input v-model="addmbitem.key" placeholder="请输入" maxlength="20"></el-input>
					</el-form-item>
					<el-form-item label="字段类型" prop="type">
						<el-select v-model="addmbitem.type" placeholder="请选择" style="width: 100%;">
							<el-option v-for="(item,index) in mobantype" :key="index" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="选择内容" v-if="addmbitem.type == '下拉选择'">
						<el-button @click="additemlist" style="background-color: #3F9B6A;color: #fff;">添加</el-button>
						<el-input v-for="(item,index) in addmbitem.list" :key="index" v-model="item.label"
							placeholder="请输入" maxlength="20" @input="e=>inputvalue(e,index)"></el-input>

					</el-form-item>
					<el-form-item label="是否必填" prop="isrequired">
						<el-select v-model="addmbitem.isrequired" placeholder="请选择" style="width: 100%;">
							<el-option label="是" value="是"></el-option>
							<el-option label="否" value="否"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="字段宽度" prop="width">
						<el-select v-model="addmbitem.width" placeholder="请选择" style="width: 100%;">
							<el-option label="50%（半行）" value="50%（半行）"></el-option>
							<el-option label="100%（一行）" value="100%（一行）"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="限制规则" prop="length">
						<el-input v-model.number="addmbitem.length" placeholder="请输入" maxlength="20"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<div style="display: flex; justify-content: flex-end; align-items: center;">
					<el-button @click="minSev" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
					<el-button @click="mingClose" class="buttonHover"
						style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script>
	import upfile from "@/components/fujianUpload/fujianList"
	import TitleWithCircle from '@/components/top/index';
	import mbadd from '@/components/change/mbadd';
	import {
		cereContractTemplateadd
	} from '@/api/newly.js'
	import {
		Input
	} from "element-ui";
	export default {
		components: {
			TitleWithCircle,
			mbadd,
			upfile
		},
		data() {
			return {
				list1: [],
				list2: [{
						name: '合同类型',
						key: 'contractType',
						type: '下拉选择',
						isrequired: '是',
						width: '50%（半行）',
						length: '20',
						value: '',
						list: [{
								label: '商铺合同',
								value: '商铺合同',
							},
							{
								label: '广告位合同',
								value: '广告位合同',
							},
							{
								label: '场地合同',
								value: '场地合同',
							},
						]
					},
					{
						name: '合同编号',
						key: 'contractNumber',
						type: '单行文本',
						isrequired: '是',
						width: '50%（半行）',
						length: '20',
						value: '',
					},
					{
						name: '标段号',
						key: 'sectionNumber',
						type: '单行文本',
						isrequired: '是',
						width: '50%（半行）',
						length: '20',
						value: '',
					},
					{
						name: '合同名称',
						key: 'contractName',
						type: '单行文本',
						isrequired: '是',
						width: '50%（半行）',
						length: '50',
						value: '',
					},
					{
						name: '合同签订日期',
						key: 'contractSigningDate',
						type: '日期',
						isrequired: '是',
						width: '50%（半行）',
						length: '',
						value: '',
					},
					{
						name: '押金（元）',
						key: 'earnestMoney',
						type: '单行数字文本',
						isrequired: '是',
						width: '50%（半行）',
						length: '20',
						value: '',
					},
					{
						name: '起租日期',
						key: 'leaseStartDate',
						type: '日期',
						isrequired: '是',
						width: '50%（半行）',
						length: '',
						value: '',
					},
					{
						name: '终止日期',
						key: 'contractTerminationDate',
						type: '日期',
						isrequired: '是',
						width: '50%（半行）',
						length: '',
						value: '',
					},
					{
						name: '付款周期',
						key: 'paymentCycle',
						type: '下拉选择',
						isrequired: '是',
						width: '50%（半行）',
						length: '20',
						value: '',
						list: [{
								label: '日',
								value: '日',
							},
							{
								label: '月',
								value: '月',
							},
							{
								label: '季',
								value: '季',
							},
							{
								label: '年',
								value: '年',
							}



						]
					},
					{
						name: '租金（元）',
						key: 'contractAmount',
						type: '单行数字文本',
						isrequired: '是',
						width: '50%（半行）',
						length: '20',
						value: '',
					},
					{
						name: '首次付款日',
						key: 'paymentDay',
						type: '付款日',
						isrequired: '是',
						width: '50%（半行）',
						length: '20',
						value: '',
					},
					{
						name: '承租人银行账号',
						key: 'tenantBankAccount',
						type: '银行账号',
						isrequired: '是',
						width: '50%（半行）',
						length: '',
						value: '',
					},
					{
						name: '绑定商家',
						key: 'relatedMerchants',
						type: '商家',
						isrequired: '是',
						width: '100%（一行）',
						length: '',
						value: '',
					},
					{
						name: '承租人名称',
						key: 'tenantName',
						type: '单行文本',
						isrequired: '是',
						width: '50%（半行）',
						length: '20',
						value: '',
					},
					{
						name: '联系电话',
						key: 'tenantTelephone',
						type: '联系电话',
						isrequired: '是',
						width: '50%（半行）',
						length: '20',
						value: '',
					},
					// {
					//   name: '附件信息',
					//   key: 'appendicesContract',
					//   type: '附件',
					//   isrequired: '是',
					//   width: '100%（一行）',
					//   length: '',
					//   value: '',
					// },
					{
						name: '绑定资源',
						key: 'shopNumber',
						type: '资源',
						isrequired: '是',
						width: '100%（一行）',
						length: '',
						value: '',
						list: []
					},
				],
				rulesmb: {
					templateName: [{
						required: true,
						message: '请填写模版名称',
						trigger: 'change'
					}],
					templateAttachment: [{
						required: true,
						message: '请上传word模板',
						trigger: 'change'
					}],
				},
				ruleAddData: {},
				forminfo: {
					templateName: '', // 模板名称
					templateAttachment: '', // 模板附件路径或名称
					otherInfo: '', // 其他信息
					templateType: '', // 模板类型
					creator: '', // 创建人
					createTime: '', // 创建时间
					remark1: '', // 备注1
					remark2: '' // 备注2
				},
				ruleaddmbitem: {
					name: [{
						required: true,
						message: '请填写字段名称',
						trigger: 'change'
					}],
					key: [{
						required: true,
						message: '请填写字段key',
						trigger: 'change'
					}],
					type: [{
						required: true,
						message: '请选择字段类型',
						trigger: 'change'
					}],
					isrequired: [{
						required: true,
						message: '请选择是否必填',
						trigger: 'change'
					}],
					width: [{
						required: true,
						message: '请选择字段宽度',
						trigger: 'change'
					}],
					// length: [{
					//   required: true,
					//   message: '请填写限制规则',
					//   trigger: 'change'
					// }],
				},
				addmbitem: {
					name: '',
					key: '',
					type: '',
					isrequired: '',
					width: '',
					length: '',
					value: '',
					list: []
				},
				addMing: false,

			}
		},
		computed: {
			mobantype() {
				return this.$store.state.app.mobantype;
			}
		},
		props: {
			info: {
				type: Object,
				default: {}
			}
		},
		async created() {
			if (this.info.id) {
				this.info.otherInfo = JSON.parse(this.info.otherInfo)
				this.list1 = this.info.otherInfo
				this.forminfo = this.info
			}
		},
		methods: {
			inputvalue(e, index) {
				console.error(e)
				this.addmbitem.list[index].value = e
			},
			additemlist() {
				this.addmbitem.list.push({
					label: '',
					value: ''
				})
			},
			async mingShow() {
				this.addMing = true
			},
			minSev() {
				// return
				this.$refs.addmbitem.validate((valid) => {
					console.log(valid)
					if (valid) {
						this.list1.push(this.addmbitem)
						this.addmbitem = {
							name: '',
							key: '',
							type: '',
							isrequired: '',
							width: '',
							length: '',
							value: '',
							list: []
						}
						this.addMing = false
					} else {
						this.$message({
							message: '请填写完整信息',
							type: 'error'
						})
						return false;
					}
				})
			},
			mingClose() {
				this.addMing = false
			},
			openfile(e) {
				if (e) {
					const fullUrl = e;
					try {
						window.open(fullUrl, '_blank'); // 在新标签页中打开文件
					} catch (error) {
						console.error('打开文件失败:', error);
					}
				} else {
					console.error('无文件可查看');
				}
			},
			changimg(e, type) {
				this.forminfo[type] = e
			},
			changimg(e, type) {
				this.forminfo[type] = e
			},
			openfile(e) {
				if (e) {
					const fullUrl = e;
					try {
						window.open(fullUrl, '_blank'); // 在新标签页中打开文件
					} catch (error) {
						console.error('打开文件失败:', error);
					}
				} else {
					console.error('无文件可查看');
				}
			},
			//获取当前时间
			updateCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = (now.getMonth() + 1).toString().padStart(2, '0');
				const day = now.getDate().toString().padStart(2, '0');
				const hours = now.getHours().toString().padStart(2, '0');
				const minutes = now.getMinutes().toString().padStart(2, '0');
				const seconds = now.getSeconds().toString().padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			add() {
				console.error(this.list1)
				this.$refs.ruleForm1.validate((valid) => {
					console.log(valid)
					if (valid) {
						let allist = [...this.list2, ...this.list1]
						let listallcl = allist.map((item) => {
							item.value = ''
							return item;
						});
						this.forminfo.otherInfo = JSON.stringify(listallcl)
						console.log({
							...this.forminfo
						})
						// return
						cereContractTemplateadd({
							...this.forminfo,
							creator: localStorage.getItem('roleName'),
							createTime: this.updateCurrentTime(),
						}).then(res => {
							console.error(res)
							if (res.code == 200) {
								this.$message({
									message: '添加成功',
									type: 'success'
								})
								this.$emit('removeonaction', '1')
							} else {
								this.$message({
									message: res.msg,
									type: 'error'
								})
							}

						})
					} else {
						this.$message({
							message: '请填写完整信息',
							type: 'error'
						})
						return false;
					}
				})
			},
			close() {
				this.$emit('removeonaction', '1')
			},
		}
	}
</script>
<style lang="css">
	.el-upload {
		display: block;
		text-align: left;
	}

	.el-dialog__header {
		background-color: #F2F3F5;
		text-align: left;
	}

	.el-dialog__title {
		line-height: 30px;
		font-size: 15px;
		color: #303133;
	}

	.iterem {
		z-index: 99;
		margin-left: 10px;
		height: 40px;
		line-height: 25px;
	}
</style>