myjadmin/src/components/system/signing/createContract.vue

<template>
	<div>
		<i-page-header :title="pageTitle"></i-page-header>
		<div class="flex">
			<div class="left-wrap">
				<!-- <el-slider v-model="bl" :min="0.1" :max="1" :step="0.1"></el-slider> -->
				<div class="phone">
					<div class="content" style="user-select: none;position: relative;" :style="{width: `calc(750px * ${bl})`,
		height: `calc(1564px * ${bl})`,
		'border-radius': `calc(120px * ${bl})`,}">
						<img v-for="item in menu.images" :src="item" alt="" class="content-img"
							:style="{width: `calc(750px * ${bl}`}" />
						<template v-for="items in menu.jsonAr">
							<div v-drag style="user-select: none;position: absolute;" :style="showStyle(items)"
								:id="'j-' + items.code"
								v-if="items.type == 'text' || items.type == 'address' || items.type == 'date'|| items.type == 'number'"
								@v-drag-end="someFunction">
								{{items.val ? items.val: ('甲方-' + items.name)}}
							</div>
							<div v-drag
								style="user-select: none;position: absolute;display: flex;justify-content: center;align-items: center;"
								:style="showImgStyle(items)" :id="'j-' + items.code" v-if="items.type == 'img'"
								@v-drag-end="someFunction">
								甲方签名
							</div>
							<div v-drag style="user-select: none;position: absolute;" :style="showImgStyle(items)"
								:id="'j-' + items.code" v-if="items.type == 'langtext'" @v-drag-end="someFunction">
								长备注
							</div>
						</template>
						<template v-for="items in menu.jsonBr">
							<div v-drag :style="showStyle(items)" :id="'b-' + items.code"
								v-if="items.type == 'text' || items.type == 'address' || items.type == 'date'|| items.type == 'number'"
								style="user-select: none;position: absolute;" @v-drag-end="someFunctions">
								{{items.val ? items.val: ('乙方-' + items.name)}}
							</div>
							<div v-drag
								style="user-select: none;position: absolute;display: flex;justify-content: center;align-items: center;"
								:style="showImgStyle(items)" :id="'b-' + items.code" v-if="items.type == 'img'"
								@v-drag-end="someFunctions">
								乙方签名
							</div>
							<div v-drag
								style="user-select: none;position: absolute;display: flex;justify-content: center;align-items: flex-start;"
								:style="showImgStyle(items)" :id="'b-' + items.code" v-if="items.type == 'langtext'"
								@v-drag-end="someFunctions">
								长备注
							</div>
						</template>
					</div>
				</div>
			</div>
			<div class="right-wrap">
				<el-form ref="menu" :model="menu" label-width="160px">
					<el-form-item label="合同名称：">
						<div class="fx-r fx-bc">
							<el-input v-model="menu.title" placeholder="请输入合同名称"></el-input>
						</div>
					</el-form-item>

					<el-form-item label="合同底图：">
						<div class="fx-r fx-bc">

							<div class="fx-r fx-bc fx-ac" v-for="item in menu.images"
								style="border: 1px dashed #d9d9d9;width: 82px;height: 82px;margin-right:12px;border-radius: 6px;cursor: pointer;overflow: hidden;">
								<img v-lazy="item" :src="item" v-image-preview style="display: block;height: 100%;" />
							</div>
							<ui-upload :upUrl="upUrl" :fileName="'上传'" :headers="upHeaders" :updata="{isz:0,code:'img'}"
								@onUpload="onUpload">
							</ui-upload>
						</div>
					</el-form-item>
					<el-form-item label="甲方参数：">
						<el-table :data="menu.jsonAr" tooltip-effect="dark" header-cell-class-name="table-header">
							<el-table-column prop="name" label="属性名" width="100">
							</el-table-column>
							<el-table-column prop="code" label="code" width="100">
							</el-table-column>
							<el-table-column prop="type" label="类型" width="100">
								<template slot-scope="scope">
									<div>{{ getJsonName(scope.row.type) }}</div>
								</template>
							</el-table-column>
							<el-table-column prop="verify" label="是否必填" width="100">
								<template slot-scope="scope">
									<div>{{ scope.row.verify == 1 ?'必填': '选填' }}</div>
								</template>
							</el-table-column>
							<el-table-column prop="left" label="x轴坐标" width="100">
								<template slot-scope="scope">
									<el-input type="number" v-model="scope.row.left"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="top" label="y轴坐标" width="100">
								<template slot-scope="scope">
									<el-input type="number" v-model="scope.row.top"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="val" label="演示值" width="180">
								<template slot-scope="scope">
									<el-input type="text" v-model="scope.row.val"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="fontSize" label="字体大小" width="100">
								<template slot-scope="scope">
									<el-input type="text" v-model="scope.row.fontSize"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="width" label="长" width="100">
								<template slot-scope="scope">
									<el-input type="text" v-model="scope.row.width"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="height" label="宽" width="100">
								<template slot-scope="scope">
									<el-input type="text" v-model="scope.row.height"></el-input>
								</template>
							</el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<a @click="tapJsonEdit(scope.$index)">编辑</a>
									<Divider type="vertical" />
									<a @click="tapJsonDel(scope.$index)">删除</a>
								</template>
							</el-table-column>
						</el-table>
						<Button style="margin-top: 10px;" @click="tapAddJson" type="primary" size="small">添加自定义</Button>
						<Button style="margin-top: 10px;margin-left: 10px;" @click="addBase" type="primary"
							size="small">导入基础参数</Button>
					</el-form-item>
					<el-form-item label="乙方参数：">
						<el-table :data="menu.jsonBr" tooltip-effect="dark" header-cell-class-name="table-header">
							<el-table-column prop="name" label="属性名" width="100">
							</el-table-column>
							<el-table-column prop="code" label="code" width="100">
							</el-table-column>
							<el-table-column prop="type" label="类型" width="100">
								<template slot-scope="scope">
									<div>{{ getJsonName(scope.row.type) }}</div>
								</template>
							</el-table-column>
							<el-table-column prop="verify" label="是否必填" width="100">
								<template slot-scope="scope">
									<div>{{ scope.row.verify == 1 ?'必填': '选填' }}</div>
								</template>
							</el-table-column>
							<!-- <el-table-column prop="left" label="x轴坐标" width="100">
								<template slot-scope="scope">
									<el-input type="number" v-model="scope.row.left"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="top" label="y轴坐标" width="100">
								<template slot-scope="scope">
									<el-input type="number" v-model="scope.row.top"></el-input>
								</template>
							</el-table-column> -->
							<el-table-column prop="val" label="演示值" width="180">
								<template slot-scope="scope">
									<el-input type="text" v-model="scope.row.val"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="fontSize" label="字体大小" width="100">
								<template slot-scope="scope">
									<el-input type="text" v-model="scope.row.fontSize"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="width" label="长" width="100">
								<template slot-scope="scope">
									<el-input type="text" v-model="scope.row.width"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="height" label="宽" width="100">
								<template slot-scope="scope">
									<el-input type="text" v-model="scope.row.height"></el-input>
								</template>
							</el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<a @click="tapJsonEdits(scope.$index)">编辑</a>
									<Divider type="vertical" />
									<a @click="tapJsonDels(scope.$index)">删除</a>
								</template>
							</el-table-column>
						</el-table>
						<Button style="margin-top: 10px;" @click="tapAddJsons" type="primary"
							size="small">添加自定义</Button>
						<Button style="margin-top: 10px;margin-left: 10px;" @click="addBases" type="primary"
							size="small">导入基础参数</Button>
					</el-form-item>
					<el-form-item label="是否显示：">
						<div class="fx-r fx-bc" style="padding-top: 10px;">
							<el-radio-group v-model="menu.is_show">
								<el-radio :label="1">显示</el-radio>
								<el-radio :label="0">隐藏</el-radio>
							</el-radio-group>
						</div>
					</el-form-item>
				</el-form>
				<el-button type="primary" style="margin-left: 80px;" @click="saveHt">保存</el-button>
			</div>
		</div>
		<Modal v-model="dialogVisible2" title="甲方参数" :modal="false" @on-cancel="editClose2">
			<el-form ref="json" :model="json" label-width="120px">
				<el-form-item label="属性类型" style="width: 250px;" prop="type"
					:rules="[{ required: true, message: '请选择属性类型'}]">
					<el-select v-model="json.type" placeholder="属性类型">
						<el-option :label="item.name" :value="item.value" :key="item.value"
							v-for="item in adverJsonType"></el-option>
					</el-select>
				</el-form-item>
				<!-- verify -->
				<el-form-item label="是否必填" style="width: 250px;" prop="type">
					<el-select v-model="json.verify" placeholder="是否必填">
						<el-option label="选填" :value="0"></el-option>
						<el-option label="必填" :value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="属性名" prop="name" :rules="[{ required: true, message: '请输入属性名'}]">
					<el-input placeholder="请输入属性名" autocomplete="off" v-model="json.name"></el-input>
				</el-form-item>
				<el-form-item label="code" prop="code" :rules="[{ required: true, message: '请输入属性CODE'}]">
					<el-input placeholder="请输入code(为全英文不可输入汉字和其他符号)" autocomplete="off" v-model="json.code"></el-input>
				</el-form-item>
				<el-form-item label="演示值" prop="val">
					<el-input placeholder="请输入演示值" autocomplete="off" v-model="json.val"></el-input>
				</el-form-item>
				<!-- <el-form-item label="x轴坐标" prop="left" :rules="[{ required: true, message: '请输入x轴坐标'}]">
					<el-input placeholder="请输入x轴坐标(0~750)" autocomplete="off" v-model="json.left"></el-input>
				</el-form-item>
				<el-form-item label="y轴坐标" prop="top" :rules="[{ required: true, message: '请输入x轴坐标'}]">
					<el-input placeholder="请输入y轴坐标" autocomplete="off" v-model="json.top"></el-input>
				</el-form-item> -->
				<el-form-item label="字体大小" prop="fontSize" v-if="json.type == 'text'"
					:rules="[{ required: true, message: '请输入字体大小'}]">
					<el-input placeholder="请输入字体大小" autocomplete="off" v-model="json.fontSize"></el-input>
				</el-form-item>
				<el-form-item label="长度" v-if="json.type == 'img' || json.type == 'longtext'" prop="width"
					:rules="[{ required: true, message: '请输入长度'}]">
					<el-input placeholder="请输入长度" autocomplete="off" v-model="json.width"></el-input>
				</el-form-item>
				<el-form-item label="高度" v-if="json.type == 'img'|| json.type == 'longtext'" prop="height"
					:rules="[{ required: true, message: '请输入高度'}]">
					<el-input placeholder="请输入高度" autocomplete="off" v-model="json.height"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="subJson">确 定</el-button>
			</span>
		</Modal>
		<Modal v-model="dialogVisible3" title="乙方参数" :modal="false" @on-cancel="editClose2s">
			<el-form ref="jsons" :model="json" label-width="120px">
				<el-form-item label="属性类型" style="width: 250px;" prop="type"
					:rules="[{ required: true, message: '请选择属性类型'}]">
					<el-select v-model="json.type" placeholder="属性类型">
						<el-option :label="item.name" :value="item.value" :key="item.value"
							v-for="item in adverJsonType"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否必填" style="width: 250px;" prop="type">
					<el-select v-model="json.verify" placeholder="是否必填">
						<el-option label="选填" :value="0"></el-option>
						<el-option label="必填" :value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="属性名" prop="name" :rules="[{ required: true, message: '请输入属性名'}]">
					<el-input placeholder="请输入属性名" autocomplete="off" v-model="json.name"></el-input>
				</el-form-item>
				<el-form-item label="code" prop="code" :rules="[{ required: true, message: '请输入属性CODE'}]">
					<el-input placeholder="请输入属性CODE" autocomplete="off" v-model="json.code"></el-input>
				</el-form-item>

				<el-form-item label="演示值" prop="val">
					<el-input placeholder="请输入演示值" autocomplete="off" v-model="json.val"></el-input>
				</el-form-item>
				<!-- <el-form-item label="x轴坐标" prop="left" :rules="[{ required: true, message: '请输入x轴坐标'}]">
					<el-input placeholder="请输入x轴坐标(0~750)" autocomplete="off" v-model="json.left"></el-input>
				</el-form-item>
				<el-form-item label="y轴坐标" prop="top" :rules="[{ required: true, message: '请输入x轴坐标'}]">
					<el-input placeholder="请输入y轴坐标" autocomplete="off" v-model="json.top"></el-input>
				</el-form-item> -->
				<el-form-item label="字体大小" prop="fontSize" v-if="json.type == 'text'"
					:rules="[{ required: true, message: '请输入字体大小'}]">
					<el-input placeholder="请输入字体大小" autocomplete="off" v-model="json.fontSize"></el-input>
				</el-form-item>
				<el-form-item label="长度" v-if="json.type == 'img'|| json.type == 'longtext'" prop="width"
					:rules="[{ required: true, message: '请输入长度'}]">
					<el-input placeholder="请输入长度" autocomplete="off" v-model="json.width"></el-input>
				</el-form-item>
				<el-form-item label="高度" v-if="json.type == 'img'|| json.type == 'longtext'" prop="width"
					:rules="[{ required: true, message: '请输入高度'}]">
					<el-input placeholder="请输入高度" autocomplete="off" v-model="json.height"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible3 = false">取 消</el-button>
				<el-button type="primary" @click="subJsons">确 定</el-button>
			</span>
		</Modal>
	</div>
</template>

<script>
	import IPageHeader from "../../../layouts/system/page-header/index";
	import UiUpload from "../../../ui/upload/index";

	import Setting from "../../../setting";
	import util from "../../../libs/util";

	import {
		createHt,
		getDetail
	} from '../../../api/system/signing.js'

	export default {
		components: {
			IPageHeader,
			UiUpload
		},
		data() {
			return {
				menuJsonIndex: 0,
				menuJsonIndexs: 0,
				bl: 0.5,
				json: {},
				dialogVisible2: false,
				dialogVisible1: false,
				dialogVisible3: false,
				adverJsonType: [{
						"name": "文本类型",
						"value": "text"
					},
					{
						"name": "数字类型",
						"value": "number"
					},
					{
						"name": "日期类型",
						"value": "date"
					},

					{
						"name": "签名",
						"value": "img"
					},
					{
						"name": "长备注",
						"value": "langtext"
					},
					{
						"name": "地址",
						"value": "address"
					},
				],
				upHeaders: {},
				upUrl: "",
				pageTitle: '创建合同模板',
				menu: {
					title: '',
					images: [],
					jsonAr: [],
					jsonBr: [],
					is_show: 1
				},
				checkItem: {},
				startX: 0,
				startY: 0,
				moveX: 0,
				moveY: 0,
				loading: false,
				jsonAr: [{
						name: '姓名',
						code: 'name',
						type: 'text',
						left: 200,
						top: 20,
						fontSize: 20,
						val: '',
						width: 0,
						height: 0,
						verify: 1
					}, {
						name: '联系电话',
						code: 'phone',
						type: 'text',
						left: 200,
						top: 60,
						fontSize: 20,
						val: '',
						width: 0,
						height: 0,
						verify: 1
					},
					{
						name: '身份证号',
						code: 'card',
						type: 'text',
						left: 200,
						top: 100,
						fontSize: 20,
						val: '',
						width: 0,
						height: 0,
						verify: 1
					},
					{
						name: '地址',
						code: 'address',
						type: 'address',
						left: 200,
						top: 140,
						fontSize: 20,
						val: '',
						width: 0,
						height: 0,
						verify: 1
					},
					{
						name: '服务费',
						code: 'price',
						type: 'text',
						left: 200,
						top: 180,
						fontSize: 20,
						val: '',
						width: 0,
						height: 0,
						verify: 1
					},
					{
						name: '定金',
						code: 'deposit',
						type: 'number',
						left: 200,
						top: 220,
						fontSize: 20,
						val: '',
						width: 0,
						height: 0,
						verify: 1
					},
					{
						name: '尾款',
						code: 'balance',
						type: 'number',
						left: 200,
						top: 260,
						fontSize: 20,
						val: '',
						width: 0,
						height: 0,
						verify: 1
					},
					{
						name: '周期',
						code: 'period',
						type: 'number',
						left: 200,
						top: 300,
						fontSize: 20,
						val: '',
						width: 0,
						height: 0,
						verify: 1
					},
					{
						name: '开始时间',
						code: 'start_time',
						type: 'date',
						left: 200,
						top: 340,
						fontSize: 20,
						val: '',
						width: 0,
						height: 0,
						verify: 1
					},
					{
						name: '结束时间',
						code: 'end_time',
						type: 'date',
						left: 200,
						top: 380,
						fontSize: 20,
						val: '',
						width: 0,
						height: 0,
						verify: 1
					},
					{
						name: '签名',
						code: 'uid_img',
						type: 'img',
						left: 200,
						top: 420,
						fontSize: 20,
						val: '',
						width: 100,
						height: 50,
						verify: 1
					},
					{
						name: '签约时间',
						code: 'check_time',
						type: 'date',
						left: 200,
						top: 480,
						fontSize: 20,
						val: '',
						width: 100,
						height: 50,
						verify: 1
					},
					{
						name: '附加条款',
						code: 'mark',
						type: 'langtext',
						left: 200,
						top: 580,
						fontSize: 20,
						val: '',
						width: 500,
						height: 400,
						verify: 0
					},
				],
				jsonBr: [{
						name: '姓名',
						code: 'name',
						type: 'text',
						left: 200,
						top: 20,
						fontSize: 20,
						val: '',
						width: 0,
						height: 0,
						verify: 1
					}, {
						name: '联系电话',
						code: 'phone',
						type: 'text',
						left: 200,
						top: 60,
						fontSize: 20,
						val: '',
						width: 0,
						height: 0,
						verify: 1
					},
					{
						name: '身份证号',
						code: 'card',
						type: 'text',
						left: 200,
						top: 100,
						fontSize: 20,
						val: '',
						width: 0,
						height: 0,
						verify: 1
					},
					{
						name: '地址',
						code: 'address',
						type: 'text',
						left: 200,
						top: 140,
						fontSize: 20,
						val: '',
						width: 0,
						height: 0,
						verify: 1
					},
					{
						name: '签名',
						code: 'to_uid_img',
						type: 'img',
						left: 200,
						top: 420,
						fontSize: 20,
						val: '',
						width: 100,
						height: 50,
						verify: 1
					},
					{
						name: '签约时间',
						code: 'to_check_time',
						type: 'date',
						left: 200,
						top: 420,
						fontSize: 20,
						val: '',
						width: 100,
						height: 50,
						verify: 1
					},
				]
			}
		},
		methods: {
			addBase() {
				this.menu.jsonAr = this.menu.jsonAr.concat(this.jsonAr)
			},
			addBases() {
				this.menu.jsonBr = this.menu.jsonBr.concat(this.jsonBr)
			},
			hasDuplicateCode(arr, name) {
				const codes = arr.map(item => item[name]);
				const uniqueCodes = new Set(codes);
				return codes.length !== uniqueCodes.size;
			},
			saveHt() {
				let that = this
				if (that.loading) return;

				if (!that.menu.title) {
					return this.$alert('请输入合同名称');
				}
				if (that.menu.images.length == 0) {
					return this.$alert('请上传合同底图');
				}
				if (that.jsonAr.length == 0) {
					return this.$alert('请添加甲方数据');
				}
				if (this.hasDuplicateCode(that.jsonAr, 'code')) {
					return this.$alert('甲方数据code重复，请修改');
				}
				if (this.hasDuplicateCode(that.jsonAr, 'name')) {
					return this.$alert('甲方数据属性名重复，请修改');
				}
				if (that.jsonBr.length == 0) {
					return this.$alert('请添加乙方数据');
				}
				if (this.hasDuplicateCode(that.jsonBr, 'code')) {
					return this.$alert('乙方数据code重复，请修改');
				}
				if (this.hasDuplicateCode(that.jsonBr, 'name')) {
					return this.$alert('乙方数据属性名重复，请修改');
				}
				let data = {
					title: that.menu.title,
					imgs: that.menu.images,
					is_show: that.menu.is_show,
					content: {
						jsonAr: that.menu.jsonAr,
						jsonBr: that.menu.jsonBr
					},
				}
				if(that.menu.id) {
					data.id = that.menu.id
				}
				that.loading = true
				createHt(data).then(res => {
					this.$Message.success("操作成功");
					that.loading = false
				}).catch(err => {
					that.loading = false
					localStorage.removeItem('menu')
				})
			},
			someFunction(e) {
				console.log(e);
				let div = e.target
				this.menu.jsonAr = this.menu.jsonAr.map(item => {
					// && (div.offsetTop !== 0 && div.offsetLeft !=0)
					if (div.id == `j-${item.code}`) {
						console.log(div.offsetTop, div.offsetLeft);
						item.top = (div.offsetTop / this.bl).toFixed(2)
						item.left = (div.offsetLeft / this.bl).toFixed(2)
					}
					return item
				})
				localStorage.setItem('menu', JSON.stringify(this.menu));
			},
			someFunctions(e) {
				let div = e.target
				this.menu.jsonBr = this.menu.jsonBr.map(item => {
					if (div.id == `b-${item.code}`) {
						console.log(div.offsetTop, div.offsetLeft);
						item.top = (div.offsetTop / this.bl).toFixed(2)
						item.left = (div.offsetLeft / this.bl).toFixed(2)
					}
					return item
				})
				localStorage.setItem('menu', JSON.stringify(this.menu));
			},
			textClick(item) {
				this.checkItem = item
				this.checkItem.isCheck = true
			},
			textMouseDown(event) {
				if (!this.checkItem) return;
				var drag = document.getElementById('j-' + this.checkItem.code);
				console.log(drag.offsetLeft, drag.offsetTop, 'dddddddddd', 'j-' + this.checkItem.code);
				this.checkItem.isDragging = true
				// this.startX = e.screenX;
				// // this.startY = e.screenY
				// this.startX = event.clientX - drag.offsetLeft;
				// this.startY = event.clientY - drag.offsetTop;
				this.startX = event.clientX;
				this.startY = event.clientY;
				console.log(this.startX, this.startY);
			},
			showStyle(item) {
				return {
					position: 'absolute',
					top: `calc(${this.bl} * ${item.top + 'px'})`,
					left: `calc(${this.bl} * ${item.left + 'px'})`,
					fontSize: `calc(${this.bl} * ${item.fontSize + 'px'})`
				}
			},
			showImgStyle(item) {
				return {
					position: 'absolute',
					border: '1px dashed #000',
					top: `calc(${this.bl} * ${item.top + 'px'})`,
					left: `calc(${this.bl} * ${item.left + 'px'})`,
					fontSize: `calc(${this.bl} * ${item.fontSize + 'px'})`,
					width: `calc(${this.bl} * ${item.width + 'px'})`,
					height: `calc(${this.bl} * ${item.height + 'px'})`,
				}
			},
			onUpload(res) {
				console.log(res);
				if (res.code == -1) {
					Notice.error({
						title: "系统提示",
						content: res.msg
					});
				} else {
					this.menu.images.push(res.data.img)
				}
			},
			getJsonName: function(type) {
				for (var i in this.adverJsonType) {
					if (type == this.adverJsonType[i].value) {
						return this.adverJsonType[i].name;
					}
				}
			},
			/**
			 * 删除自定义分类
			 */
			tapJsonDel: function(index) {
				this.menu.jsonAr.splice(index, 1);
			},
			tapJsonDels: function(index) {
				this.menu.jsonBr.splice(index, 1);
			},
			/**
			 * 修改自定义分类
			 */
			tapJsonEdit: function(index) {
				this.menuJsonIndex = index;
				this.json = this.menu.jsonAr[index];
				this.dialogVisible2 = true;
			},
			tapJsonEdits: function(index) {
				this.menuJsonIndexs = index;
				this.json = this.menu.jsonBr[index];
				this.dialogVisible3 = true;
			},
			/**
			 * 添加自定义分类
			 */
			tapAddJson: function() {
				this.dialogVisible2 = true;
				this.menuJsonIndex = 'add';
				this.json = {
					left: 375,
					top: 20,
					name: '',
					code: '',
					fontSize: 20,
					width: 100,
					height: 50
				}

			},
			tapAddJsons: function() {
				this.dialogVisible3 = true;
				this.menuJsonIndexs = 'add';
				this.json = {
					left: 375,
					top: 20,
					name: '',
					code: '',
					fontSize: 20,
					width: 100,
					height: 50
				}
			},
			/**
			 * 关闭弹出层
			 */
			editClose2: function() {
				this.dialogVisible2 = false;
			},
			editClose2s: function() {
				this.dialogVisible3 = false;
			},
			/**
			 * 自定义分类
			 */
			subJson: function() {

				this.$refs['json'].validate((valid) => {
					if (valid) {
						console.log(this.json, 'this.json', this.menuJsonIndex);
						if (this.menuJsonIndex == 'add') {
							this.menu.jsonAr.push(JSON.parse(JSON.stringify(this.json)));
						} else {
							this.menu.jsonAr[this.menuJsonIndex] = JSON.parse(JSON.stringify(this.json));
						}
						console.log(this.menu.jsonAr);
						this.dialogVisible2 = false;
						// 缓存合同信息
						localStorage.setItem('menu', JSON.stringify(this.menu));
					}
				});

			},
			subJsons: function() {

				this.$refs['jsons'].validate((valid) => {
					if (valid) {
						try {
							if (this.menuJsonIndexs >= 0) {
								this.menu.jsonBr[this.menuJsonIndexs] = JSON.parse(JSON.stringify(this.json));
							} else {
								this.menu.jsonBr.push(JSON.parse(JSON.stringify(this.json)));
							}
						} catch (error) {
							console.log(error, 'error');
							//TODO handle the exception
						}

						console.log(this.menu.jsonBr, 'this.menu.jsonBr');
						this.dialogVisible3 = false;
						// 缓存合同信息
						localStorage.setItem('menu', JSON.stringify(this.menu));
					}
				});
			},
			getDetail() {
				getDetail({
					id: this.menu.id
				}).then(res => {
					console.log(res);
					let menu = res.data
					this.menu.jsonAr = menu.content.jsonAr
					this.$set(this.menu,'jsonAr',menu.content.jsonAr)
					this.$set(this.menu,'jsonBr',menu.content.jsonBr)
					this.$set(this.menu,'images',menu.imgs)
					this.$set(this.menu,'title',menu.title)
				})
			}
		},
		created() {
			var upHeaders = {};
			//上传路径
			this.upUrl = Setting.apiBaseURL + "/systemv1/upload/index";
			//上传header数据
			const token = util.cookies.get('system_token');
			if (token) {
				upHeaders['SYSTEM-ACC-TOKEN'] = token;
			}
			this.upHeaders = upHeaders;
			
			document.addEventListener('contextmenu', function(event) {
				// 阻止默认的上下文菜单
				event.preventDefault();

				// 自定义的右击事件处理
				console.log('自定义右击事件');
				// 例如，可以创建一个自定义的菜单
				// alert('自定义右击事件触发了！');
				console.log(event, 'event');
			});
			
			if(this.$route.query && this.$route.query.id) {
				console.log('zhe');
				this.$set(this.menu,'id',this.$route.query.id)
				this.getDetail()
			}else {
				// let data = JSON.parse(localStorage.getItem('menu'))
				// if (data.title || data.images.length > 0) {
				// 	this.menu = data
				// }
			}
			
		}
	}
</script>

<style scoped>
	:root {
		--bl: 1;
	}

	.flex {
		display: flex;
		background-color: #fff;
		width: 100%;
		padding: 40px;

	}

	.phone {
		background-image: url('/src/assets/img/iphone.png');
		background-size: 100% 100%;
		padding: 15px 18px;
	}

	.content {
		/* width: 375px;
		height: 782px; */
		/* height: 1564px; */

		background-color: #fff;
		overflow-y: auto;
		scrollbar-width: none;
		/* Firefox */
		-ms-overflow-style: none;
		/* Internet Explorer 10+ */
		position: relative;
	}

	.content-img {

		height: auto;
		vertical-align: top;
	}

	.right-wrap {
		width: 100%;
		padding: 20px;
	}

	.content-check {
		background-color: lightblue;
		border: 1px dashed #000;
		cursor: grab;
	}

	.content-drage {
		cursor: grabbing;
	}
</style>