super-page-runtime 1.0.13 → 1.0.14

package/src/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/src/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>

package/src/components/runtime/views/assemblys/data/component/configuration-value.vue

@@ -0,0 +1,206 @@
+<template>
+	<el-dialog
+			model-value
+			title="值设置"
+			width="600"
+			:before-close="beforeClose"
+	>
+		<el-form v-model="formData" label-width="100px">
+			<el-form-item label="分类" class="amb-design-attr-item">
+				<el-select v-model="formData.type" placeholder="请选择">
+					<el-option
+							label="键值对"
+							value="keyValuePair"
+					/>
+					<el-option
+							label="选项组"
+							value="optionGroup"
+					/>
+					<el-option
+							label="枚举类名"
+							value="enumname"
+					/>
+					<el-option
+							label="bean名称"
+							value="beanname"
+					/>
+					<el-option
+							label="动态数据源"
+							value="dynamicDataSource"
+					/>
+				</el-select>
+			</el-form-item>
+			<el-form-item v-if="formData.type === 'keyValuePair'"  label="键值对" class="amb-design-attr-item">
+				<el-input v-model="formData.name" />
+			</el-form-item>
+			<el-form-item v-if="formData.type === 'optionGroup'" label="选项组" class="amb-design-attr-item">
+				<el-select
+						v-model="formData.name"
+						clearable
+						filterable
+						style="width: 100%"
+				>
+					<el-option
+							v-for="item in optionGroupArr"
+							:key="item.code"
+							:label="item.name"
+							:value="item.code"
+					/>
+				</el-select>
+			</el-form-item>
+			<el-form-item v-if="formData.type === 'enumname'"  label="枚举类名" class="amb-design-attr-item">
+				<el-input v-model="formData.name" />
+			</el-form-item>
+			<el-form-item v-if="formData.type === 'beanname'"  label="bean名称" class="amb-design-attr-item">
+				<el-input v-model="formData.name" />
+			</el-form-item>
+			<el-form-item v-if="formData.type === 'beanname'"  label="字段设置" class="amb-design-attr-item">
+				<el-button type="primary" plain @click="addValueSettingBeannameTable">添加</el-button>
+				<el-button type="primary" plain @click="deleteValueSettingBeannameTable">删除</el-button>
+				<el-table
+						:data="formData.valueSetOptions"
+						:row-class-name="tableRowClassNameTwo"
+						height="400px"
+						highlight-current-row
+						style="width: 100%;margin-top: 5px"
+						@current-change="currentChange"
+				>
+					<el-table-column label="来源字段">
+						<template #default="scope">
+							<el-input v-model="scope.row.columnName" />
+						</template>
+					</el-table-column>
+					<el-table-column label="值字段">
+						<template #default="scope">
+							<el-select
+									v-model="scope.row.valueColumn"
+									clearable
+									filterable
+							>
+								<el-option label="1" :value="1"/>
+							</el-select>
+						</template>
+					</el-table-column>
+				</el-table>
+			</el-form-item>
+
+			<el-form-item v-if="formData.type === 'dynamicDataSource'"  label="动态数据源" class="amb-design-attr-item">
+				<el-select
+						v-model="formData.dynamicDataSourceCode"
+						clearable
+						filterable
+						style="width: 100%"
+				>
+					<el-option label="数据源1" value="1"
+					/>
+				</el-select>
+			</el-form-item>
+			<el-form-item v-if="formData.type === 'dynamicDataSource'"  label="字段设置" class="amb-design-attr-item">
+				<el-button type="primary" plain @click="addValueSettingBeannameTable">添加</el-button>
+				<el-button type="primary" plain @click="deleteValueSettingBeannameTable">删除</el-button>
+				<el-table
+						:data="formData.valueSetOptions"
+						:row-class-name="tableRowClassNameTwo"
+						height="400px"
+						highlight-current-row
+						style="width: 100%;margin-top: 5px"
+						@current-change="currentChange"
+				>
+					<el-table-column label="来源字段">
+						<template #default="scope">
+							<el-select
+									v-model="scope.row.columnName"
+									clearable
+									filterable
+							>
+								<el-option label="1" :value="1"/>
+							</el-select>
+						</template>
+					</el-table-column>
+					<el-table-column label="值字段">
+						<template #default="scope">
+							<el-select
+									v-model="scope.row.valueColumn"
+									clearable
+									filterable
+							>
+								<el-option label="1" :value="1"/>
+							</el-select>
+						</template>
+					</el-table-column>
+				</el-table>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="$emit('close')">取消</el-button>
+				<el-button type="primary" @click="addData">确认
+				</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import Suffixmodule from '../../form/common/suffixmodule.vue'
+import IconSetDialog from '../../form/common/icon-set-dialog.vue'
+import {ref} from "vue";
+
+const props = defineProps({
+	configValue:{
+		type:Object,
+		default:{}
+	},
+})
+const emit =defineEmits(['close','add'])
+const formData = ref({
+	type:'',
+	valueSetOptions:[{
+		columnName:'',valueColumn:''
+	}]
+})
+// formData.value = props.configValue
+
+const optionGroupArr = ref([
+	{code:'code01',name:'选项组1'}
+])
+// bean选中当前行的数据
+const valueSettingBeannameTableSelect = ref({})
+
+// bean表格添加字段
+function addValueSettingBeannameTable(){
+	formData.value.valueSetOptions.push({
+		columnName:'',valueColumn:''
+	})
+}
+
+function addData(){
+	emit('add',formData.value)
+	emit('close')
+}
+
+// bean表格删除字段
+function deleteValueSettingBeannameTable(){
+	let arr = []
+	formData.value.valueSetOptions.forEach(item =>{
+		if (item['index'] != valueSettingBeannameTableSelect.value.index){
+			arr.push(item)
+		}
+	})
+	formData.value.valueSetOptions = arr
+}
+
+function currentChange(row:object) {
+	valueSettingBeannameTableSelect.value = row
+}
+
+function tableRowClassNameTwo({ row, rowIndex }) {
+	// 把每一行的索引放进row
+	row.index = rowIndex
+}
+
+function beforeClose(){
+	emit('close')
+}
+
+</script>

package/src/components/runtime/views/assemblys/data/component/data-origin-tree.vue

@@ -0,0 +1,117 @@
+<template>
+	<el-collapse-item
+			title="数据源"
+			name="dataOrigin"
+			class="amb-design-attr-group-header">
+		<div style="padding:8px 0px 0px 0px;">
+			<slot name="top" :row="dataOrigin"></slot>
+			<el-form-item label="数据来源" class="amb-design-attr-item">
+				<el-radio-group v-model="dataOrigin.optionValueSetType">
+					<el-radio value="static">静态数据</el-radio>
+					<el-radio value="dataTable">数据表/视图</el-radio>
+					<el-radio value="service">服务</el-radio>
+				</el-radio-group>
+			</el-form-item>
+			<Codemirror
+					v-if="dataOrigin.optionValueSetType === 'static'"
+					v-model="dataOrigin.staticData"
+					:options="cmOptions"
+					placeholder="请输入"
+			/>
+			<el-form-item v-show="dataOrigin.optionValueSetType === 'dataTable'" label="数据表视图" class="amb-design-attr-item">
+				<dataoriginInputtable v-model:modelValue="dataOrigin.dataTable"></dataoriginInputtable>
+			</el-form-item>
+			<el-form-item v-show="dataOrigin.optionValueSetType === 'dataTable'" label="主键字段" class="amb-design-attr-item">
+				<dataoriginInputtable v-model:modelValue="dataOrigin.primaryKey"></dataoriginInputtable>
+			</el-form-item>
+			<el-form-item v-show="dataOrigin.optionValueSetType === 'dataTable'" label="父级字段" class="amb-design-attr-item">
+				<dataoriginInputtable v-model:modelValue="dataOrigin.parentKey"></dataoriginInputtable>
+			</el-form-item>
+			<el-form-item v-show="dataOrigin.optionValueSetType === 'dataTable'" label="选项值格式化" class="amb-design-attr-item-linefeed-two">
+				<dataoriginInputtable v-model:modelValue="dataOrigin.formattingValue"></dataoriginInputtable>
+			</el-form-item>
+			<el-form-item v-show="dataOrigin.optionValueSetType === 'dataTable'" label="选项名格式化" class="amb-design-attr-item-linefeed-two">
+				<el-input v-model="dataOrigin.formattingName"/>
+			</el-form-item>
+			<el-form-item v-show="dataOrigin.optionValueSetType === 'dataTable'" label="排序1" class="amb-design-attr-item">
+				<div class="amb-design-attr-item-inline">
+					<el-select v-model="dataOrigin.sortOneField" placeholder="请选择">
+						<el-option label="1" value="1"></el-option>
+					</el-select>
+					<el-select v-model="dataOrigin.sortOneWay" style="margin-left: 10px" placeholder="请选择">
+						<el-option label="升序" value="asc"></el-option>
+						<el-option label="降序" value="des"></el-option>
+					</el-select>
+				</div>
+			</el-form-item>
+			<el-form-item v-show="dataOrigin.optionValueSetType === 'dataTable'" label="排序2" class="amb-design-attr-item">
+				<div class="amb-design-attr-item-inline">
+					<el-select v-model="dataOrigin.sortTwoField" placeholder="请选择">
+						<el-option label="1" value="1"></el-option>
+					</el-select>
+					<el-select v-model="dataOrigin.sortTwoWay" style="margin-left: 10px" placeholder="请选择">
+						<el-option label="升序" value="asc"></el-option>
+						<el-option label="降序" value="des"></el-option>
+					</el-select>
+				</div>
+			</el-form-item>
+			<el-form-item v-show="dataOrigin.optionValueSetType === 'dataTable'" label="同级节点数量" class="amb-design-attr-item-linefeed-two">
+				<el-input v-model="dataOrigin.brotherNodeNumber"/>
+			</el-form-item>
+			<el-form-item v-show="dataOrigin.optionValueSetType === 'dataTable'" label="过滤条件" class="amb-design-attr-item">
+				<el-button type="primary" @click="combinationVisible = true">编辑</el-button>
+			</el-form-item>
+			<el-form-item v-show="dataOrigin.optionValueSetType === 'service'" label="服务名" class="amb-design-attr-item">
+				<dataoriginInputtable v-model:modelValue="dataOrigin.serveName"></dataoriginInputtable>
+			</el-form-item>
+		</div>
+		<combinationDialog
+			:list="dataOrigin.querySetList"
+			@close="closeCombination"
+			v-if="combinationVisible" />
+	</el-collapse-item>
+</template>
+
+<script setup lang="ts">
+import dataoriginInputtable from '../../form/common/dataorigin-input-table.vue'
+import condition from '../../form/common/condition.vue'
+import RowUlLi from '../../form/common/row-ul-li.vue'
+import {Codemirror} from 'vue-codemirror'
+import combinationDialog from '../../workflow/component/combination.vue'
+import returnSetTable from './return-set-table.vue'
+
+import {ref} from "vue";
+const props = defineProps({
+	dataOrigin: {
+		type:Object,
+		default:{}
+	},
+	// 是否模糊查询
+	remote:{
+		type:Boolean,
+		default:true
+	},
+});
+
+const cmOptions = {
+	tabSize: 4,
+	lineNumbers: true,
+	mode: 'application/json', // 或者其他模式，例如 'python'、'markdown' 等
+	theme: 'default', // 或者其他主题，例如 'monokai'、'solarized' 等
+	line: true, // 显示行号
+	styleActiveLine: true, // 高亮显示当前行
+	matchBrackets: true, // 括号匹配高亮
+}
+
+const combinationVisible = ref(false)
+
+function closeCombination(){
+	combinationVisible.value = false
+}
+
+</script>
+<style scoped>
+:deep(.el-select__selection){
+	display: inline-block;
+}
+</style>