pull

src/ibp/painter.js

@@ -0,0 +1,219 @@
+import * as zrUtil from 'zrender/src/core/util';
+import * as vector from 'zrender/src/core/vector';
+import Group from 'zrender/src/container/Group';
+import deviceType from './constant/deviceType';
+import shapefactory from './shape/factory';
+import TransformHandle from './transformHandle';
+
+class Painter {
+	constructor(ibp) {
+		// 父级实例
+		this.$ibp = ibp;
+		this.$ibpZr = ibp.getZr();
+
+		// 图层数据
+		this.ibpInstanceLevel = {};
+
+		// 初始图层
+		this.initLevels();
+
+		// 视图控制器
+		this.$transformHandle = new TransformHandle(this);
+	}
+
+	/**
+     * 初始绘图实例
+     * @param {*} dom
+     * @param {*} config
+     */
+	initLevels() {
+
+		// 添加父级图层
+		this.parentLevel = new Group({ name: '__parent__' });
+		this.$ibpZr.add(this.parentLevel);
+
+		// 添加子级图层
+		zrUtil.each(Object.values(deviceType), (type) => {
+			const level = new Group({ name: `__${type}__` });
+			this.ibpInstanceLevel[type] = level;
+			this.parentLevel.add(level);
+		});
+	}
+
+	/**
+     * 重绘视图
+     * @param {*} ibpDevice
+     */
+	repaint(ibpDevice) {
+		// 清空视图
+		this.clear();
+
+		// 创建视图
+		Object.values(ibpDevice).forEach(device => {
+			this.add(device);
+		});
+	}
+
+	/**
+     * 添加视图
+     * @param {*} device
+     */
+	add(device, draggable) {
+		device = Object.assign(device, { event: this.$ibp.$mouseController });
+		const instance = shapefactory(device, this.$ibp);
+		if (instance) {
+			device.instance = instance;
+			draggable?instance.setDraggable():'';
+			this.$transformHandle.transformView(instance);
+			this.ibpInstanceLevel[device.model._type].add(instance);
+		}
+	}
+
+	/**
+     * 删除视图
+     * @param {*} device
+     */
+	delete(device) {
+		const instance = device.instance;
+		if (instance) {
+			this.ibpInstanceLevel[device.model._type].remove(instance);
+		}
+	}
+
+	/**
+     * 更新视图
+     * @param {*} device
+     */
+	update(device) {
+		if (device) {
+			if (device.model._dispose) {
+				this.delete(device);
+			} else {
+				const instance = device.instance;
+				if (instance) {
+					instance.setState(device);
+				}
+			}
+		}
+	}
+
+	/**
+     *  绘制ipb时，更改draggable 和注册事件
+     */
+	drawIbp(device) {
+		if (device) {
+			const instance = device.instance;
+			if (instance) {
+				instance.setDraggable();
+			}
+		}
+	}
+
+	/**
+     * 更新transform变化
+     * @param {*} opt
+     */
+	updateTransform(opt, canvasSize) {
+		this.$transformHandle.updateTransform(opt, canvasSize);
+	}
+
+	/**
+	 * 更新zrender尺寸
+	 * @param {*} opt
+	 */
+	updateZrSize(opt) {
+		this.$transformHandle.updateZrSize(opt);
+	}
+
+	/**
+	 * 过去坐标提示位置
+	 * @param {*} opts
+	 */
+	getShapeTipPoint(instance, opts) {
+		if (instance) {
+			var point = instance.getShapeTipPoint(opts);
+			if (point) {
+				// 矩阵变换
+				var transform = this.$transformHandle.transform;
+				var transPoint = vector.applyTransform([], [point.x, point.y], transform);
+				return {
+					x: transPoint[0],
+					y: transPoint[1]
+				};
+			}
+
+		}
+	}
+	/**
+     * 初始化电子时钟时间
+     */
+	initClockTime(device, initTime) {
+		device.instance.setClockTime(initTime);
+	}
+	/**
+    * 电子时钟开始跑秒或暂停
+    */
+	setClockStart(device, started) {
+		device.instance.setClockStart(started);
+	}
+	/**
+     * 设置图层可见
+     * @param {*} code
+     */
+	setLevelVisible(list) {
+		zrUtil.each(Object.values(deviceType), type => {
+			const level = this.ibpInstanceLevel[type];
+			if (list.includes(type)) {
+				level.show();
+			} else {
+				level.hide();
+			}
+		}, this);
+	}
+
+	/**
+     * 刷新图层
+     */
+	refresh() {
+		this.$ibpZr.refresh();
+	}
+
+	/**
+	 * 清除图层
+	 */
+	clearLevel(type) {
+		const level = this.ibpInstanceLevel[type];
+		if (level) {
+			level.removeAll();
+		}
+	}
+
+	/**
+     * 清除canvas
+     */
+	clear() {
+		zrUtil.each(Object.values(this.ibpInstanceLevel), (level) => {
+			level && level.removeAll();
+		}, this);
+
+		this.refresh();
+	}
+
+	/**
+     * 销毁图层
+     */
+	dispose() {
+		this.ibpInstanceLevel = {};
+		this.parentLevel = null;
+	}
+
+	/**
+     * 父级图层
+     */
+	getParentLevel() {
+		return this.parentLevel;
+	}
+
+}
+
+export default Painter;

src/views/components/limits/distribute.vue

@@ -0,0 +1,202 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogVisible" width="35%" :before-close="handleClose" center>
+    <data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleSure">{{ $t('global.confirm') }}</el-button>
+      <el-button @click="close">{{ $t('global.cancel') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getTotalRemains } from '@/api/management/author';
+import { PermissionType } from '@/scripts/ConstDic';
+import { giveLessons } from '@/api/management/distribute';
+
+export default {
+	name: 'GiveLesson',
+	data() {
+		return {
+			dialogVisible: false,
+			maxTotal: 0,
+			formModel: {
+				lessonId: '',
+				lessonName: '',
+				total: 0,
+				startTime: '',
+				endTime: '',
+				date: ''
+			},
+			prdCode: '',
+			mapId: '',
+			TimePicker: { start: '08:30', step: '00:15', end: '18:30' },
+			numberMessage: '',
+			PermissionType: ''
+		};
+	},
+	computed: {
+		form() {
+			const form = {
+				labelWidth: '100px',
+				items: [
+					{ prop: 'lessonName', label: this.$t('global.name'), type: 'text', required: false, readonly: true },
+					{ prop: 'date', label: this.$t('global.selectionTime'), type: 'datetimerange', required: false, viewFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss' },
+					{ prop: 'total', label: this.$t('global.permissionNumber'), type: 'number', required: false, min: 0, max: this.maxTotal, message: this.numberMessage }
+				]
+			};
+			return form;
+		},
+		rules() {
+			const that = this;
+			const crules = {
+				total: [
+					{ required: true, message: this.$t('global.pleaseInputPermissionNumber'), trigger: 'change' },
+					{
+						validator(rule, value, callback) {
+							if (Number.isInteger(Number(value)) && Number(value) > 0) {
+								callback();
+							} else {
+								callback(new Error(that.$t('global.permissionGreaterThen0')));
+							}
+						},
+						trigger: 'blur'
+					}
+				],
+				startTime: [
+					{ required: true, message: this.$t('global.enterStartTime'), trigger: 'change' }
+				],
+				endTime: [
+					{ required: true, message: this.$t('global.enterEndTime'), trigger: 'change' }
+				],
+				date: [
+					{ required: true, message: this.$t('global.enterDate'), trigger: 'blur' }
+				]
+			};
+			return crules;
+		},
+		title() {
+			if (this.PermissionType == PermissionType.LESSON) {
+				return this.$t('global.distributeLessonPermission');
+			} else if (this.PermissionType == PermissionType.EXAM) {
+				return this.$t('global.distributeExamPermission');
+			} else if (this.PermissionType == PermissionType.SIMULATION) {
+				return this.$t('global.distributeSimulationPermission');
+			} else if (this.PermissionType == PermissionType.SCREEN) {
+				return this.$t('global.distributeScreenPermission');
+			}
+			return '';
+		}
+	},
+	watch: {
+		'formModel.date': function (val, old) {
+			this.setTotalMax();
+		}
+	},
+	methods: {
+		setTotalMax() {
+			let endTime;
+			let startTime;
+			if (this.formModel.date) {
+				endTime = this.formModel.date[1];
+				startTime = this.formModel.date[0];
+			}
+			this.maxTotal = 0;
+			if (endTime && startTime) {
+				if (endTime > startTime) {
+					const model = {
+						startTime: startTime,
+						endTime: endTime,
+						permissionType: this.PermissionType
+					};
+					if (this.PermissionType == PermissionType.LESSON || this.PermissionType == PermissionType.EXAM) {
+						model['lessonId'] = this.formModel.lessonId;
+						model['mapId'] = this.mapId;
+						model['prdCode'] = this.prdCode;
+					} else if (this.PermissionType == PermissionType.SIMULATION) {
+						model['mapId'] = this.mapId;
+						model['prdCode'] = this.prdCode;
+					}
+					// 获取用户某课程某段时间内可用的权限数量
+					getTotalRemains(model).then(response => {
+						this.maxTotal = response.data;
+						if (this.maxTotal == 0) {
+							this.numberMessage = '可用权限数量为0';
+						} else {
+							this.numberMessage = `（${this.$t('global.remainPermissionNumber')}：${this.maxTotal}）`;
+						}
+					}).catch(() => {
+						this.$messageBox(this.$t('error.obtainMaxNumberFailed'));
+					});
+				} else {
+					this.numberMessage = '结束时间必须大于开始时间';
+				}
+			} else {
+				this.numberMessage = '';
+			}
+		},
+		doShow(data) {
+			this.dialogVisible = true;
+			if (data) {
+				this.formModel.lessonId = data.id;
+				this.formModel.lessonName = data.name;
+				this.prdCode = data.prdCode;
+				this.mapId = data.mapId;
+				this.PermissionType = data.PermissionType;
+				this.setTotalMax();
+			}
+		},
+		handleSure() {
+			this.$refs.dataform.validateForm(() => {
+				const model = {
+					startTime: this.formModel.date[0],
+					endTime: this.formModel.date[1],
+					permissionType: this.PermissionType,
+					amount: this.formModel.total
+				};
+				if (this.PermissionType == PermissionType.LESSON || this.PermissionType == PermissionType.EXAM) {
+					model['lessonId'] = this.formModel.lessonId;
+					model['mapId'] = this.mapId;
+					model['prdCode'] = this.prdCode;
+				} else if (this.PermissionType == PermissionType.SIMULATION) {
+					model['mapId'] = this.mapId;
+					model['prdCode'] = this.prdCode;
+				}
+				// 权限分发请求
+				giveLessons(model).then(response => {
+					const url = response.data;
+					this.$emit('QrCodeShow', {
+						url: url,
+						title: this.$t('global.distributeQrcode')
+					});
+					this.dialogVisible = false;
+					this.$emit('initLoadPage');
+					this.handleClose();
+				}).catch(() => {
+					this.$messageBox(this.$t('error.getDistributeQrcodeFailed'));
+				});
+			});
+		},
+		close() {
+			this.dialogVisible = false;
+			this.handleClose();
+		},
+		handleClose(done) {
+			this.maxTotal = 0;
+			this.formModel = {
+				lessonId: '',
+				lessonName: '',
+				total: 0,
+				startTime: '',
+				endTime: ''
+			};
+			this.$refs.dataform.resetForm();
+			if (done) {
+				done();
+			} else {
+				this.dialogVisible = false;
+			}
+
+		}
+	}
+};
+</script>

src/views/components/limits/transfer.vue

@@ -0,0 +1,207 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogVisible" width="35%" :before-close="handleClose" center>
+    <data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleSure">{{ $t('global.confirm') }}</el-button>
+      <el-button @click="close">{{ $t('global.cancel') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getTotalRemains } from '@/api/management/author';
+import { permissionTurnAdd } from '@/api/management/distribute';
+import { PermissionType } from '@/scripts/ConstDic';
+
+export default {
+	name: 'GoLsesson',
+	data() {
+		return {
+			dialogVisible: false,
+			maxTotal: 0,
+			formModel: {
+				lessonId: '',
+				lessonName: '',
+				total: 0,
+				startTime: '',
+				endTime: '',
+				date: ''
+			},
+			prdCode: '',
+			mapId: '',
+			DatePicker: {
+				shortcuts: [{
+					text: this.$t('global.today'),
+					onClick(picker) {
+						picker.$emit('pick', new Date());
+					}
+				}]
+			},
+			numberMessage: '',
+			PermissionType: ''
+		};
+	},
+	computed: {
+		form() {
+			const form = {
+				labelWidth: '80px',
+				items: [
+					{ prop: 'lessonName', label: this.$t('global.name'), type: 'text', required: false, readonly: true },
+					{ prop: 'date', label: this.$t('global.selectionTime'), type: 'daterange', required: false, viewFormat: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' },
+					{ prop: 'total', label: this.$t('global.permissionNumber'), type: 'number', required: false, min: 0, max: this.maxTotal, message: this.numberMessage }
+				]
+			};
+			return form;
+		},
+		rules() {
+			const that = this;
+			const crules = {
+				total: [
+					{ required: true, message: this.$t('global.pleaseInputPermissionNumber'), trigger: 'change' },
+					{
+						validator(rule, value, callback) {
+							if (Number.isInteger(Number(value)) && Number(value) > 0) {
+								callback();
+							} else {
+								callback(new Error(that.$t('global.permissionGreaterThen0')));
+							}
+						},
+						trigger: 'blur'
+					}
+				],
+				startTime: [
+					{ required: true, message: this.$t('global.enterStartTime'), trigger: 'change' }
+				],
+				endTime: [
+					{ required: true, message: this.$t('global.enterEndTime'), trigger: 'change' }
+				],
+				date: [
+					{ required: true, message: this.$t('global.enterDate'), trigger: 'blur' }
+				]
+			};
+			return crules;
+		},
+		title() {
+			if (this.PermissionType == PermissionType.LESSON) {
+				return this.$t('global.transferLessonPermission');
+			} else if (this.PermissionType == PermissionType.EXAM) {
+				return this.$t('global.transferExamPermission');
+			} else if (this.PermissionType == PermissionType.SIMULATION) {
+				return this.$t('global.transferSimulationPermission');
+			} else if (this.PermissionType == PermissionType.SCREEN) {
+				return this.$t('global.transferScreenPermission');
+			}
+			return '';
+		}
+	},
+	watch: {
+		'formModel.date': function (val, old) {
+			this.setTotalMax();
+		}
+	},
+	methods: {
+		setTotalMax() {
+			let endTime;
+			let startTime;
+			if (this.formModel.date) {
+				endTime = this.formModel.date[1];
+				startTime = this.formModel.date[0];
+			}
+			this.maxTotal = 0;
+			if (endTime && startTime) {
+				if (endTime > startTime) {
+					const model = {
+						startTime: `${startTime} 00:00:00`,
+						endTime: `${endTime} 23:59:59`,
+						permissionType: this.PermissionType
+					};
+					if (this.PermissionType == PermissionType.LESSON || this.PermissionType == PermissionType.EXAM) {
+						model['lessonId'] = this.formModel.lessonId;
+						model['mapId'] = this.mapId;
+						model['prdCode'] = this.prdCode;
+					} else if (this.PermissionType == PermissionType.SIMULATION) {
+						model['mapId'] = this.mapId;
+						model['prdCode'] = this.prdCode;
+					}
+					getTotalRemains(model).then(response => {
+						this.maxTotal = response.data;
+						if (this.maxTotal == 0) {
+							this.numberMessage = '可用权限数量为0';
+						} else {
+							this.numberMessage = `（${this.$t('global.remainPermissionNumber')}：${this.maxTotal}）`;
+						}
+					}).catch(() => {
+						this.$messageBox(this.$t('error.obtainMaxNumberFailed'));
+					});
+				} else {
+					this.numberMessage = '结束时间必须大于开始时间';
+				}
+			} else {
+				this.numberMessage = '';
+			}
+		},
+		doShow(data) {
+			this.dialogVisible = true;
+			if (data) {
+				this.formModel.lessonId = data.id;
+				this.formModel.lessonName = data.name;
+				this.prdCode = data.prdCode;
+				this.mapId = data.mapId;
+				this.PermissionType = data.PermissionType;
+				this.setTotalMax();
+			}
+		},
+		handleSure() {
+			this.$refs.dataform.validateForm(() => {
+				const model = {
+					startTime: `${this.formModel.date[0]} 00:00:00`,
+					endTime: `${this.formModel.date[1]} 23:59:59`,
+					amount: this.formModel.total,
+					permissionType: this.PermissionType
+				};
+				if (this.PermissionType == PermissionType.LESSON || this.PermissionType == PermissionType.EXAM) {
+					model['lessonId'] = this.formModel.lessonId;
+					model['mapId'] = this.mapId;
+					model['prdCode'] = this.prdCode;
+				} else if (this.PermissionType == PermissionType.SIMULATION) {
+					model['mapId'] = this.mapId;
+					model['prdCode'] = this.prdCode;
+				}
+				// 转增
+				permissionTurnAdd(model).then(response => {
+					const url = response.data;
+					this.$emit('QrCodeShow', {
+						url: url,
+						title: this.$t('global.transferQrcode')
+					});
+					this.dialogVisible = false;
+					this.$emit('initLoadPage');
+					this.handleClose();
+				}).catch(() => {
+					this.$messageBox(this.$t('error.getTransferQrcodeFailed'));
+				});
+			});
+		},
+		close() {
+			this.dialogVisible = false;
+			this.handleClose();
+		},
+		handleClose(done) {
+			this.maxTotal = 0;
+			this.formModel = {
+				lessonId: '',
+				lessonName: '',
+				total: 0,
+				startTime: '',
+				endTime: ''
+			};
+			this.$refs.dataform.resetForm();
+			if (done) {
+				done();
+			} else {
+				this.dialogVisible = false;
+			}
+		}
+	}
+};
+</script>

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpBg.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <el-form ref="form" :rules="rules" :model="form" label-width="120px">
+            <el-form-item label="背景板宽度">
+                <el-input-number v-model="form.bgWidth" controls-position="right" :min="1" ></el-input-number>
+            </el-form-item>
+            <el-form-item label="背景板高度">
+                <el-input-number v-model="form.bgHeight" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit">修改</el-button>
+                <el-button>取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        name: 'BgDraft',
+        components: {
+        },
+        data() {
+            return {
+                form: {
+                    bgWidth: '',
+                    bgHeight: ''
+                },
+                rules: {
+                    bgWidth: [
+                        { required: true, message: '请输入背景板宽度', trigger: 'blur' },
+                    ],
+                    bgHeight: [
+                        { required: true, message: '请输入背景板高度', trigger: 'blur' },
+                    ]
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit() {
+                const bgModel = {
+                    x: 0,
+                    y: 0,
+                    _type: 'Background',
+                    width: this.form .bgWidth,
+                    height: this.form.bgHeight
+                };
+                this.$emit('createBg', bgModel)
+            },
+            initPage(){
+            }
+        }
+    };
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+    .button_box{
+        width: 100%;
+        background: #f0f0f0;
+        overflow: hidden;
+    }
+</style>

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpButton.vue

@@ -0,0 +1,144 @@
+<template>
+    <div>
+        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
+            <el-form-item label="按钮编号" prop="code">
+                <el-input :disabled="true" v-model="form.code" >
+                    <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="按钮颜色" prop="buttonColor">
+                <el-select v-model="form.buttonColor" placeholder="请选择按钮颜色">
+                    <el-option label="红色按钮" value="red"></el-option>
+                    <el-option label="黄色按钮" value="yellow"></el-option>
+                    <el-option label="绿色按钮" value="green"></el-option>
+                    <el-option label="蓝色按钮" value="blue"></el-option>
+                    <el-option label="灰色按钮" value="gray"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="按钮宽度" prop="buttonWidth">
+                <el-input-number v-model="form.buttonWidth" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="X轴坐标">
+                <el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="Y轴坐标">
+                <el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+                <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
+                <el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'ButtonDraft',
+        components: {
+        },
+        data() {
+            return {
+                isUpdate: false,
+                buttonText: '立即创建',
+                showDeleteButton: false,
+                form: {
+                    code: '',
+                    buttonColor: '',
+                    buttonWidth: '',
+                    x: 10,
+                    y: 10
+                },
+                rules: {
+                    code: [
+                        { required: true, message: '请输入按钮编号', trigger: 'blur' },
+                    ],
+                    buttonColor: [
+                        { required: true, message: '请选择按钮颜色', trigger: 'change'}
+                    ],
+                    buttonWidth: [
+                        { required: true, message: '请输入按钮宽度', trigger: 'blur' },
+                    ]
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+            '$store.state.ibp.rightClickCount': function (val) {
+                const model = this.$store.getters['ibp/updateDeviceData'];
+                if (model._type === 'SquareButton' ){
+                    this.buttonText = '修改';
+                    this.showDeleteButton = true;
+                    this.isUpdate = true;
+                    this.form.code = model.code;
+                    this.form.buttonColor = model.color;
+                    this.form.buttonWidth = model.width;
+                    this.form.x = model.point.x;
+                    this.form.y = model.point.y;
+                }
+            }
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit(form) {
+                this.$refs[form].validate((valid) => {
+                    if (valid) {
+                        const buttonModel = {
+                            point: {
+                                x: this.form.x,
+                                y: this.form.y
+                            },
+                            _type: 'SquareButton',
+                            code: this.form.code,
+                            color: this.form.buttonColor,
+                            status: 'off',
+                            width: this.form.buttonWidth,
+                        };
+                        this.$emit('createButton', buttonModel);
+                        this.initPage();
+                    }else {
+                        return false;
+                    }
+                });
+            },
+            deleteDevice() {
+                const buttonModel = {
+                    point: {
+                        x: this.form.x,
+                        y: this.form.y
+                    },
+                    _type: 'SquareButton',
+                    code: this.form.code,
+                    color: this.form.buttonColor,
+                    status: 'off',
+                    width: this.form.buttonWidth,
+                };
+                this.$emit('deleteDataModel',buttonModel );
+                this.initPage();
+            },
+            initPage() {
+                this.isUpdate = false;
+                this.buttonText = '立即创建';
+                this.showDeleteButton = false;
+                this.form = {
+                    code: '',
+                    buttonColor: '',
+                    buttonWidth: '',
+                    x: 10,
+                    y: 10
+                };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "sButton_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
+            }
+        }
+    };
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>