super-page-runtime 1.0.15 → 1.0.16

package/components/runtime/views/assemblys/data/component/column-config.vue

@@ -0,0 +1,171 @@
+<template>
+	<div>
+		<el-dialog
+				model-value
+				title="Tips"
+				width="800"
+				:before-close="beforeClose"
+		>
+			<el-button type="primary" style="margin:8px 0">确定</el-button>
+			<el-table :data="tableData" style="width: 100%" @row-dblclick="handleCellEnter" @row-click="rowClick" :cell-style="columnbackgroundStyle">
+				<el-table-column type="index" label="序号" align="center" width="60" />
+				<el-table-column label="操作" align="center" width="160">
+					<template #default="scope">
+						<el-button type="primary" plain @click="add">添加</el-button>
+						<el-button type="danger" plain @click="remove(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" align="center">
+					<template #header>
+						列名
+						<span style="color: red;">*</span>
+					</template>
+					<template #default="scope">
+						<el-input v-if="scope.row.isEdit" v-model="scope.row.columnName"/>
+						<span v-else>{{scope.row.columnName}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" label="变量名" align="center">
+					<template #default="scope">
+						<el-input v-if="scope.row.isEdit" v-model="scope.row.variableName"/>
+						<span v-else>{{scope.row.variableName}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" label="显示" align="center">
+					<template #default="scope">
+						<el-switch v-if="scope.row.isEdit" v-model="scope.row.show" />
+						<span v-else>{{scope.row.show}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" label="编辑组件" align="center">
+					<template #default="scope">
+						<el-select v-if="scope.row.isEdit" v-model="scope.row.moduleType" placeholder="请选择">
+							<el-option
+									v-for="item in getFormComponentOptions()"
+									:key="item.name"
+									:label="item.label"
+									:value="item.name"
+							/>
+						</el-select>
+						<span v-else>{{scope.row.moduleType}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" label="导出" align="center">
+					<template #default="scope">
+						<el-switch v-if="scope.row.isEdit" v-model="scope.row.export" />
+						<span v-else>{{scope.row.export}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" label="左右对齐" align="center">
+					<template #default="scope">
+						<el-select v-if="scope.row.isEdit" v-model="scope.row.align" placeholder="请选择">
+							<el-option label="靠左" value="left"/>
+							<el-option label="居中" value="center"/>
+							<el-option label="靠右" value="right"/>
+						</el-select>
+						<span v-else>{{scope.row.align}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" label="冻结" align="center">
+					<template #default="scope">
+						<el-select v-if="scope.row.isEdit" v-model="scope.row.disabled" placeholder="请选择">
+							<el-option label="是" :value="true"/>
+							<el-option label="否" :value="false"/>
+						</el-select>
+						<span v-else>{{scope.row.disabled}}</span>
+					</template>
+				</el-table-column>
+			</el-table>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="$emit('close')">取消</el-button>
+					<el-button type="primary" @click="$emit('close')">确定</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+<script lang='ts' setup>
+import { getFormComponentOptions } from '../../../../utils/assemblys-config.js'
+import { ref,confineProps } from 'vue';
+// const props = defineProps({
+// 	configure:Object
+// });
+
+const emit = defineEmits(['close'])
+
+const tableData = ref([
+	{
+		columnName: 'columnName',
+		variableName: 'variableName',
+		moduleType:'1',
+		show: true,
+		export:false,
+		align:'center',
+		disabled:false
+	},
+])
+const modelDableData = ref([
+	{
+		date: '2016-05-03',
+		name: 'Tom',
+		address: 'No. 189, Grove St, Los Angeles',
+	},
+	{
+		date: '2016-05-02',
+		name: 'Tom',
+		address: 'No. 189, Grove St, Los Angeles',
+	},
+	{
+		date: '2016-05-04',
+		name: 'Tom',
+		address: 'No. 189, Grove St, Los Angeles',
+	}
+])
+
+function rowClick() {
+	tableData.value.forEach(item =>{
+		item['isEdit'] = false
+	})
+}
+
+function handleCellEnter(row:object) {
+	tableData.value.forEach(item =>{
+		item['isEdit'] = false
+	})
+	row.isEdit = true
+}
+
+function handleCellLeave(row:object) {
+	row.isEdit = false
+}
+
+function add() {
+	let obj = {
+		columnName: 'columnName',
+		variableName: '',
+		moduleType:'1',
+		show: true,
+		export:false,
+		align:'center',
+		disabled:false
+	}
+	tableData.value.push(obj)
+}
+
+function remove(row:object) {
+	tableData.value = tableData.value.filter(item => item != row)
+}
+
+function beforeClose() {
+	emit('close')
+}
+
+function columnbackgroundStyle({ row, column, rowIndex, columnIndex }){
+	if (row.isEdit){
+		return {background:'rgb(88, 147, 239,.4)',border:'none'}
+	}
+}
+</script>
+<style scoped>
+</style>

package/components/runtime/views/assemblys/data/component/combinedHeader.vue

@@ -0,0 +1,96 @@
+<template>
+	<el-collapse-item
+			title="导入配置"
+			name="combinedHeader"
+			class="amb-design-attr-group-header">
+		<div style="padding:8px 0px 0px 0px;">
+			<el-button type="primary" @click="dialogVisible = true">添加字段</el-button>
+			<el-tree
+					:data="data"
+					:props="defaultProps"
+					@node-click="handleNodeClick"
+			/>
+			<el-dialog
+					v-model="dialogVisible"
+					title="Tips"
+					width="500"
+			>
+				<el-form ref="formRef" :model="form" label-width="auto" style="max-width: 600px">
+					<el-form-item label="表头字段" required>
+						<el-select
+								v-model="form.label"
+								style="width: 100%"
+						>
+							<el-option label="t_time" value="t_time"/>
+						</el-select>
+					</el-form-item>
+					<el-form-item label="跳过校验">
+						<el-checkbox v-model="form.skipVerification"/>
+					</el-form-item>
+				</el-form>
+				<template #footer>
+					<div class="dialog-footer">
+						<el-button @click="dialogVisible = false">取消</el-button>
+						<el-button type="primary" @click="addTreeData" >
+							确认
+						</el-button>
+					</div>
+				</template>
+			</el-dialog>
+		</div>
+	</el-collapse-item>
+</template>
+
+<script lang="ts" setup>
+import {ref} from "vue";
+
+interface Tree {
+	label: string
+	children?: Tree[]
+}
+
+const dialogVisible = ref(false)
+const form = ref({})
+const formRef = ref(null)
+const handleNodeClick = (data: Tree) => {
+	console.log(data)
+}
+
+const data = ref([
+	{
+		label: 'Level one 1',
+		children: [
+			{
+				label: 'Level two 1-1',
+				children: [
+					{
+						label: 'Level three 1-1-1',
+					},
+				],
+			},
+		],
+	}
+])
+
+const defaultProps = {
+	children: 'children',
+	label: 'label',
+}
+
+function addTreeData() {
+	formRef.value.validate(valid =>{
+		if (valid){
+			if (form.value.id){
+				dialogVisible.value = false
+			}else {
+				data.value.push(form)
+				dialogVisible.value = false
+			}
+		}
+	})
+}
+</script>
+
+<style scoped>
+
+</style>

package/components/runtime/views/assemblys/data/component/composite-header.vue

@@ -0,0 +1,257 @@
+<template>
+	<el-button type="primary" plain @click="showQuery = !showQuery">查询</el-button>
+	<el-button type="primary" @click="dialogVisible = true">添加顶级菜单</el-button>
+<div style="display: flex;margin:8px 0;" v-if="showQuery">
+	<el-input style="width: 100%;margin-right: 10px" />
+	<el-button type="primary" plain>查询</el-button>
+</div>
+	<el-tree
+			style="max-width: 600px"
+			:data="data"
+			draggable
+			:props="defaultProps"
+			@node-click="handleNodeClick"
+			@node-contextmenu="nodeContextmenu"
+	/>
+	<div v-show="menuVisible">
+		<ul v-if="selectNode" id="menu" ref="headerMenu" class="context-menu">
+			<li
+					id="menu-4994-1-0"
+					class="menu__item"
+					tabindex="-1"
+					@click="() => operationalMenuFun('createCombinedHeader')"
+			>
+				<el-icon>
+					<Plus/>
+				</el-icon>
+				创建节点
+			</li>
+			<li
+					id="menu-4994-1-1"
+					class="menu__item"
+					tabindex="-1"
+					@click="() => operationalMenuFun('updateCombinedHeader')"
+			>
+				<el-icon>
+					<EditPen/>
+				</el-icon>
+				修改节点
+			</li>
+			<li
+					id="menu-4994-1-2"
+					class="menu__item"
+					tabindex="-1"
+					@click="() => operationalMenuFun('addListColumn')"
+			>
+				<el-icon>
+					<FolderAdd/>
+				</el-icon>
+				添加字段
+			</li>
+			<li
+					id="menu-4994-1-3"
+					class="menu__item"
+					tabindex="-1"
+					@click="() => operationalMenuFun('moveToRootNode')"
+			>
+				<el-icon>
+					<Document/>
+				</el-icon>
+				移动字段到根节点
+			</li>
+			<li
+					id="menu-4994-1-4"
+					class="menu__item"
+					tabindex="-1"
+					@click="() => operationalMenuFun('childMoveToRootNode')"
+			>
+				<el-icon>
+					<Document/>
+				</el-icon>
+				移出子字段到根节点
+			</li>
+			<li
+					id="menu-4994-1-5"
+					class="menu__item"
+					tabindex="-1"
+					@click="() => operationalMenuFun('deleteNode')"
+			>
+				<el-icon>
+					<Delete/>
+				</el-icon>
+				删除节点
+			</li>
+		</ul>
+	</div>
+	<el-dialog
+			v-model="dialogVisible"
+			title="Tips"
+			width="500"
+	>
+		<el-form ref="formRef" :model="form" label-width="auto" style="max-width: 600px">
+			<el-form-item label="名称" required>
+				<el-input v-model="form.label" />
+			</el-form-item>
+			<el-form-item label="显示顺序">
+				<el-input v-model="form.displayOrder" />
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="dialogVisible = false">取消</el-button>
+				<el-button type="primary" @click="addTreeData" >
+					确认
+				</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue";
+import {Delete,Document,FolderAdd,EditPen,Plus} from '@element-plus/icons-vue'
+const showQuery = ref(false)
+const dialogVisible = ref(false)
+const form = ref({})
+const formRef = ref(null)
+const menuVisible = ref(false)
+const data = ref([
+	{
+		label: 'Level one 1',
+		children: [
+			{
+				label: 'Level two 1-1',
+				children: [
+					{
+						label: 'Level three 1-1-1',
+					},
+				],
+			},
+		],
+	}
+])
+const selectNode = ref({})
+
+const defaultProps = {
+	children: 'children',
+	label: 'label',
+}
+
+function addTreeData() {
+	formRef.value.validate(valid =>{
+		if (valid){
+			if (form.value.id){
+				dialogVisible.value = false
+			}else {
+				data.value.push(form)
+				dialogVisible.value = false
+			}
+		}
+	})
+}
+
+function handleNodeClick(data:any, node:any){
+	menuVisible.value = false
+	selectNode.value = node
+}
+
+function nodeContextmenu(event:Event, data:object) {
+	// if (
+	// 		data.type !== 'ListColumn' &&
+	// 		selectNode.value.data.type !== 'ListColumn'
+	// ) {
+	// 	if (selectNode.value && selectNode.value.data) {
+	// 		if (selectNode.value.data.mainId === data.mainId) {
+				menuVisible.value = true
+				const menu = document.querySelector('#menu')
+				const scrollTop =
+						document.documentElement.scrollTop || document.body.scrollTop
+				menu.style.display = 'block'
+				menu.style.left = event.clientX + 30 + 'px'
+				// 当滑动滚动条时也能准确获取菜单位置
+				menu.style.top = event.clientY + scrollTop - 22 + 'px'
+			// } else {
+			// 	ElMessage({
+			// 		showClose: true,
+			// 		type: 'warning',
+			// 		message: 'pleaseSelectTheCorrespondingNodeFirst',
+			// 	})
+			// }
+		// } else {
+		// 	ElMessage({
+		// 		showClose: true,
+		// 		type: 'warning',
+		// 		message: '请先选中节点',
+		// 	})
+		// }
+	// }
+}
+
+// 触发菜单
+function operationalMenuFun(type) {
+	menuVisible.value = false
+	if (type === 'updateCombinedHeader') {
+		// 修改节点
+		form.value = selectNode.value.data
+		form.value['id'] = 1
+		dialogVisible.value = true
+	}  else if (type === 'createCombinedHeader') {
+		// 创建普通节点
+		form.value = {}
+		dialogVisible.value = true
+	} else if (type === 'addListColumn') {
+		// 添加字段
+		this.openChoiceColumn()
+	} else if (type === 'moveToRootNode') {
+		// 移出字段到根节点
+		this.moveToRootNode()
+	} else if (type === 'childMoveToRootNode') {
+		// 移出子字段到根节点
+		this.childMoveToRootNode()
+	} else if (type === 'deleteNode') {
+		// 删除节点
+		if (this.selectNode && this.selectNode.data) {
+			this.remove(this.selectNode, this.selectNode.data)
+		}
+	}
+}
+</script>
+
+<style scoped>
+li {
+	color: #333;
+}
+
+.context-menu {
+	position: fixed;
+	background: #fff;
+	z-index: 999;
+	padding: 5px;
+	margin: 0;
+	margin-top: 30px;
+}
+
+.context-menu li {
+	min-width: 75px;
+	height: 28px;
+	line-height: 28px;
+	text-align: left;
+	color: #1a1a1a;
+	cursor: pointer;
+}
+
+.context-menu li:hover {
+	background: #5893ef;
+	color: #fff;
+}
+
+.context-menu {
+	border: 1px solid #eee;
+	box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
+	border-radius: 5px;
+}
+
+li {
+	list-style-type: none;
+}
+</style>