test-er.vue

<template>
	<view class="main-box">
		<uni-popup ref="popupDelete" type="dialog">
			<uni-popup-dialog title="删除确认" message="成功消息" :duration="2000" :before-close="true" @close="deleteCancel" @confirm="deleteConfirm"></uni-popup-dialog>
		</uni-popup>
		<movable-area ref="contentArea" class="content-window">
			<thirdlucky-uml-entity
				v-for="(table, index) in tables"
				:ref="table.key"
				:x="table.x"
				:y="table.y"
				:key="table.key"
				:entityName="table.name"
				:title="table.title"
				:columns="table.columns"
				:style="{ order: index }"
				@start="onStart"
				@end="onEnd"
			/>
		</movable-area>
		<movable-area ref="toolBar" class="tool-bar">
			<thirdlucky-uml-entity ref="entityTool" :x="offsetX" :y="offsetY" entityName="entity" title="实体" @start="onStartTool" @end="onEndTool" />
		</movable-area>
		<view ref="propertyBar" class="property-bar">
			<view style="margin: 20rpx 15rpx 0rpx 10rpx">
				<uni-forms-item class="form-item" label="名称"><uni-easyinput v-model="_entityName" placeholder="请输入表名" /></uni-forms-item>
				<uni-forms-item class="form-item" label="标题"><uni-easyinput v-model="_entityTitle" placeholder="请输入标题" /></uni-forms-item>
				<uni-forms-item class="form-item" label="描述"><uni-easyinput v-model="_entityInfo" placeholder="请输入描述" /></uni-forms-item>
			</view>
			<scroll-view class="property-table" scroll-y="true">
				<thirdlucky-data-table ref="tableView" actions="+-" border stripe :datas="datas" :columns="schemas" @selected="onSelected"></thirdlucky-data-table>
			</scroll-view>
			<view class="property-info"><thirdlucky-data-form ref="propertyView" :formData="formData" :columns="columns" @confirm="onConfirm"></thirdlucky-data-form></view>
		</view>
	</view>
</template>

<script>
let defaultX = 20;
let defaultY = 20;

export default {
	data() {
		return {
			x: 0,
			y: 0,
			offsetX: defaultX,
			offsetY: defaultY,
			tables: [
				{
					x: 0,
					y: 0,
					name: 'test',
					title: 'test',
					info: '说明',
					columns: [
						{
							name: 'name',
							info: '列名',
							tips: '',
							type: 'text'
						}
					]
				},
				{
					x: 100,
					y: 100,
					name: 'test1',
					title: 'test1',
					info: '说明2',
					columns: [
						{
							name: 'id',
							info: '主键',
							tips: '',
							type: 'number'
						},
						{
							name: 'name',
							info: '列名',
							tips: '',
							type: 'text'
						}
					]
				}
			],
			columns: [
				{
					name: 'name',
					info: '列名',
					tips: '',
					type: 'text'
				},
				{
					name: 'type',
					info: '类型',
					tips: '',
					type: 'text'
				},
				{
					name: 'info',
					info: '描述',
					tips: '',
					type: 'text'
				}
			],
			schemas: [
				{
					name: 'name',
					info: '列名',
					tips: '',
					type: 'text'
				}
			],
			table: {},
			datas: [],
			formData: {}
		};
	},
	computed: {
		tableDats() {
			return datas.map(function(data) {
				data.name;
			});
		},
		_entityName: {
			get() {
				return this.table.name;
			},
			set(val) {
				this.table.name = val;
			}
		},
		_entityTitle: {
			get() {
				return this.table.title;
			},
			set(val) {
				this.table.title = val;
			}
		},
		_entityInfo: {
			get() {
				return this.table.info;
			},
			set(val) {
				this.table.info = val;
			}
		}
	},
	methods: {
		deleteConfirm() {
			console.log("confirm!!!");
			this.$refs.popupDelete.close();
		},
		deleteCancel() {
			console.log("cancel!!!");
			this.$refs.popupDelete.close();
		},
		deleteColumn(data) {
			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			this.$refs.popupDelete.open('center');
		},
		onSelected(rindex, action, data) {
			this.formData = data;
			switch (action) {
				case 'edit':
					break;
				case 'delete':
					this.deleteColumn(data);
					break;
				case 'select':
					break;
			}
		},
		onConfirm(action, data) {},
		resetTool() {
			if (this.offsetX == defaultX) {
				this.offsetX += 0.0000001;
			} else {
				this.offsetX = defaultX;
			}
		},
		onStart(key, event, x, y, table) {
			console.log(key + ':' + event + ':' + x + ':' + y);
		},
		onEnd(key, event, x, y, table) {
			this.showEntity(key);
		},
		onStartTool(key, event, x, y, table) {
			console.log(key + ':' + event + ':' + x + ':' + y);
		},
		onEndTool(key, event, x, y, table) {
			console.log(key + ':' + event + ':' + x + ':' + y);
			this.addEntity(x, y);
		},
		addEntity(x, y) {
			let count = this.tables.length;
			let tool = this.$refs.toolBar;
			let w = tool.width;
			this.resetTool();

			let _x = x - w + defaultX;
			let _y = y + defaultY;

			if (_x >= 0) {
				let title = '实体' + count;
				let name = 'entity' + count;

				let table = { x: _x, y: _y, title: title, name: name, info: '', columns: [] };
				this.tables.push(table);
				this.showEntity(name);
			}
		},
		showEntity(key) {
			let table = this.tables.find(t => t.name == key);
			this.datas = table.columns;
			this.table = table;
		}
	}
};
</script>

<style lang="scss">
$window-height: 93vh;
$border-width: 5rpx;
$control-width: 200rpx;
$control-height: 200rpx;

.main-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.tool-bar {
	order: 1;
	flex: 1;
	height: $window-height;
	background-color: white;
	border-style: solid;
	border-width: $border-width;
}
.content-window {
	order: 2;
	flex: 7;
	margin-left: -$border-width;
	height: $window-height;

	border-style: solid;
	border-width: $border-width;
	background-color: gray;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.property-bar {
	display: flex;
	flex-direction: column;
	justify-content: end;
	order: 3;
	flex: 2;
	margin-left: -$border-width;
	border-style: solid;
	border-width: $border-width;
	height: $window-height;
	background-color: white;
}
.property-table {
	order: 1;
	height: 60%;
}
.property-info {
	order: 2;
	flex: 1;
	position: absolute;
	bottom: -39rpx;
}
.table-info {
	display: flex;
	flex-direction: row;
}
.table-info-label {
	font-size: 0.95em;
	bottom: 0;
}
</style>