super-page-runtime 1.0.15 → 1.0.16

package/components/runtime/views/assemblys/page/variable-dialog.vue

@@ -0,0 +1,242 @@
+<template>
+    <el-dialog v-model="dialogTableVisible" title="自定义参数" width="800">
+        <el-table
+            :data="pageDesign.variables"
+            row-key="code"
+            style="width: 100%;margin-bottom: 20px"
+            size="small"
+            @row-dblclick="rowDblclick"
+            border
+            :tree-props="{ children: 'items' }"
+            default-expand-all
+        >
+            <el-table-column type="index" width="60" label="序号" />
+            <el-table-column prop="name" width="200" label="变量名">
+            <template #default="scope">
+                <span v-if="!scope.row.$editing">{{ scope.row.name }}</span>
+                <el-input v-else style="width:120px;"  :disabled="scope.row.disabled" v-model="scope.row.name" placeholder="" />
+            </template>
+            </el-table-column>
+            <el-table-column prop="alias" width="140" label="别名">
+            <template #default="scope">
+                <span v-if="!scope.row.$editing">{{ scope.row.alias }}</span>
+                <el-input v-else :disabled="scope.row.disabled" v-model="scope.row.alias" placeholder="" />
+            </template>
+            </el-table-column>
+            <el-table-column prop="type" width="130" label="类型">
+            <template #default="scope">
+                <span v-if="!scope.row.$editing">{{ scope.row.type }}</span>
+                <el-select
+                v-else
+                v-model="scope.row.type"
+                @change="typeChange($event, scope.$index, scope.row)"
+                placeholder=""
+                >
+                <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
+                </el-select>
+            </template>
+            </el-table-column>
+            <el-table-column align="right" :width="90">
+            <template #header>
+                <el-tooltip class="box-item" effect="dark" content="添加变量" placement="top">
+                <el-button type="primary" size="small" :icon="Plus" circle @click="addRootRow" />
+                </el-tooltip>
+            </template>
+            <template #default="scope">
+                <span>
+                <el-dropdown size="small" style="margin-right: 10px">
+                    <el-button type="primary" :icon="Plus" size="small" circle />
+                    <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item
+                        v-if="scope.row.type === 'object'"
+                        size="small"
+                        @click="addChildrenItem(scope.$index, scope.row)"
+                        >添加下级节点</el-dropdown-item
+                        >
+                        <el-dropdown-item
+                        v-if="!scope.row.isArrayElement"
+                        size="small"
+                        @click="addAdjacentNode(scope.$index, scope.row)"
+                        >添加相邻节点</el-dropdown-item
+                        >
+                    </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+                <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
+                    <el-button
+                    type="danger"
+                    size="small"
+                    :disabled="scope.row.isArrayElement"
+                    :icon="Minus"
+                    circle
+                    @click="handleDelete(scope.$index, scope.row)"
+                    />
+                </el-tooltip>
+                </span>
+            </template>
+            </el-table-column>
+        </el-table>
+    </el-dialog>
+</template>
+<script lang='ts' setup>
+    import {reactive,ref} from 'vue';
+    import {Search,Plus,Minus} from '@element-plus/icons';
+    import http from 'agilebuilder-ui/src/utils/request';
+    import type { PageDesign,CustomVariable} from '../../../utils/interfaces/page-design-types';
+    import { v4 as uuidv4 } from 'uuid';
+    import { deepCopy } from '../../../utils/common-util';
+
+    interface MyProps{
+        pageDesign:PageDesign
+    }
+    const props = defineProps<MyProps>();
+    //初始化
+    if(props.pageDesign.variables==undefined||props.pageDesign.variables==null){
+        props.pageDesign.variables = [];
+    }
+    //定义事件
+    const emits = defineEmits([""]);
+    //表格高度
+    const tableHeight = ref(300);
+    //弹框是否打开的标识
+    const dialogTableVisible = ref(false);
+    const typeOptions = ['string', 'int', 'boolean', 'array', 'object', 'number'];
+
+    // 必须设置编辑状态--- 不然列表加载时都是编辑状态时，会导致页面加载过慢
+    function rowDblclick(row: any, column: any, event: Event) {
+        row.$editing = true
+    }
+
+    function addRootRow() {
+        if(props.pageDesign.variables){
+            props.pageDesign.variables.push(getNewItem())
+        }
+    }
+
+    function getNewItem():CustomVariable{
+        return {
+            level: 0,
+            code: uuidv4(),
+            name: '',
+            alias: '',
+            type: 'string',
+            defaultValue: '',
+            items: [],
+            $editing: true
+        }
+    }
+
+    function handleDelete(index: number, row:any) {
+        deleteClidNode(props.pageDesign.variables, row)
+    }
+
+    function deleteClidNode(tableData: any, clickRow: any) {
+        for (let index = 0; index < tableData.length; index++) {
+            const row = tableData[index]
+            if (row.items && row.items.length > 0) {
+                deleteClidNode(row.items, clickRow)
+            } else {
+                if (row.code === clickRow.code) {
+                    tableData.splice(index, 1)
+                    return
+                }
+            }
+        }
+    }
+
+    /**
+     * 添加相邻节点
+     * @param index
+     * @param row
+     */
+    function addAdjacentNode(index: number, row: any) {
+        clidNodeAddAdjacentNode(props.pageDesign.variables, row)
+    }
+
+    /**
+     * 子节点添加相邻节点
+     * @param tableData
+     * @param clickRow
+     */
+    function clidNodeAddAdjacentNode(tableData:any, clickRow: any) {
+        tableData.forEach((row: any, index: number) => {
+            if (row.code === clickRow.code) {
+            const item = getNewItem()
+            item.level = row.level
+            tableData.splice(index + 1, 0, item)
+            } else {
+            if (row.items && row.items.length > 0) {
+                clidNodeAddAdjacentNode(row.items, clickRow)
+            }
+            }
+        })
+    }
+
+    /**
+     * 添加下级节点
+     * @param index
+     * @param row
+     */
+    function addChildrenItem(index: number, row: any) {
+        if (!row.items) {
+            row.items = []
+        }
+        const item = getNewItem()
+        item.level = row.level + 1
+        row.items.push(item)
+    }
+
+    function typeChange(value: string, index: number, row: any) {
+        if (value === 'array') {
+            row.items = []
+            row.items.push({
+                level: row.level + 1,
+                code: uuidv4(),
+                name: 'items',
+                disabled: true,
+                isArrayElement: true,
+                alias: '',
+                type: 'object',
+                defaultValue: '',
+                items: []
+            })
+        } else if (row.items && row.items.length > 0) {
+            row.items = []
+        }
+    }
+
+    function showJson() {
+        alert(JSON.stringify(props.pageDesign.variables))
+        console.log(JSON.stringify(props.pageDesign.variables))
+    }
+
+    let firstInited = false;
+
+    /**
+     * 打开对象框
+     */
+    function openDialog(){
+        //计算高度
+        let tempHeight = window.innerHeight-140-176;
+        if(tempHeight>500){
+            tempHeight = 500;
+        }else if(tempHeight<100){
+            tempHeight = 100;
+        }
+        tableHeight.value = tempHeight;
+
+        dialogTableVisible.value = true;
+
+        firstInited = true;
+    }
+
+    /**
+     * 定义打开窗口的方法
+     */
+    defineExpose({
+        openDialog
+    });
+</script>
+
+../../../utils/interfaces/page-runtime-types

package/components/runtime/views/assemblys/workflow/component/combination.vue

@@ -0,0 +1,206 @@
+<template>
+	<el-dialog
+			model-value
+			title="组合条件"
+			width="70%"
+			@before-close="$emit('close')"
+	>
+		<el-row style="padding-bottom: 8px">
+			<el-button
+					:icon="CirclePlus"
+					plain
+					type="primary"
+					@click="add"
+			>
+				添加
+			</el-button>
+			<el-button
+					:icon="Delete"
+					plain
+					type="primary"
+					@click="remove"
+			>
+				删除
+			</el-button>
+		</el-row>
+		<el-table highlight-current-row @current-change="handleCurrentChange" :data="list" style="width: 100%">
+			<el-table-column prop="date" label="(">
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.leftBracket"
+							clearable
+							size="default"
+					>
+						<el-option label="" value=""/>
+						<el-option label="(" value="("/>
+						<el-option label="((" value="(("/>
+						<el-option label="(((" value="((("/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="name" label="字段名(*)">
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.propName"
+							clearable
+							size="default"
+					>
+						<el-option
+								v-for="(Ttime,index) in fieldNameList"
+								:key="index"
+								:label="Ttime.alias"
+								:value="Ttime.name"></el-option>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="address" label="操作符">
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.operator"
+							clearable
+							size="default"
+					>
+						<el-option label="操作符1" value="1"/>
+						<el-option label="操作符1" value="2"/>
+						<el-option label="操作符1" value="3"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="address" label="值(*)">
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.propValueType"
+							clearable
+							size="default"
+					>
+						<el-option label="值1" value="1"/>
+						<el-option label="值2" value="2"/>
+						<el-option label="值3" value="3"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="address" label="日期格式">
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.date"
+							clearable
+							size="default"
+					>
+						<el-option label="年份" value="year"/>
+						<el-option label="季度" value="quarter"/>
+						<el-option label="月份" value="month"/>
+						<el-option label="日" value="day"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="address" label=")">
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.rightBracket"
+							clearable
+							size="default"
+					>
+						<el-option label="" value=""/>
+						<el-option label=")" value=")"/>
+						<el-option label="))" value="))"/>
+						<el-option label=")))" value=")))"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="address" label="并且/或者">
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.joinSign"
+							clearable
+							size="default"
+					>
+						<el-option
+								label="或者"
+								value="or"
+						/>
+						<el-option
+								label="并且"
+								value="and"
+						/>
+						<el-option label="并且" value="and"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="address" label="变量为空时">
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.joinSign"
+							clearable
+							size="default"
+					>
+						<el-option
+								label="Null"
+								value="null"
+						/>
+						<el-option
+								label="忽略(1=1)"
+								value="1=1"
+						/>
+						<el-option
+								label="不符合(1<>1)"
+								value="1<>1"
+						/>
+						<el-option label="并且" value="and"/>
+					</el-select>
+				</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>
+</template>
+
+<script setup lang="ts">
+import {CirclePlus,Delete} from '@element-plus/icons-vue'
+import {ref} from "vue";
+const props = defineProps({
+	list:{
+		type:Array,
+		default:() =>{[]}
+	},
+	fieldNameList:{
+		type:Array,
+		default:() =>{[]}
+	}
+});
+const $emit = defineEmits(['remove'])
+const currentRow = ref({})
+
+function remove(){
+	$emit('remove',currentRow.value)
+}
+
+function handleCurrentChange(val){
+	currentRow.value = val
+}
+
+function add(){
+	props.list.push({
+		leftBracket:'',
+		propName:'',
+		operator:'',
+		propValueType:'',
+		rightBracket:'',
+		joinSign:''
+	})
+}
+
+function confirm(){
+
+}
+</script>
+
+<style>
+.el-select__selection{
+	display: flex;
+}
+</style>

package/components/runtime/views/assemblys/workflow/component/condition-dialog.vue

@@ -0,0 +1,99 @@
+<template>
+	<el-dialog
+			model-value
+			title="可执行条件"
+			append-to-body
+			@before-close="$emit('close')"
+	>
+		<el-row style="padding-bottom: 8px">
+			<el-button
+					:icon="CirclePlus"
+					plain
+					type="primary"
+					@click="add"
+			>
+				添加
+			</el-button>
+			<el-button
+					:icon="Delete"
+					plain
+					type="primary"
+					@click="remove"
+			>
+				删除
+			</el-button>
+		</el-row>
+		<el-table highlight-current-row @current-change="handleCurrentChange" :data="list" style="width: 100%">
+			<el-table-column prop="date" label="组合条件" align="center">
+				<template #default="scope">
+					<el-input size="default" @click="opencombinationDialog(scope.row)" />
+				</template>
+			</el-table-column>
+			<el-table-column prop="name" label="提示信息" align="center">
+				<template #default="scope">
+					<el-input size="default" v-model="scope.row.name" />
+				</template>
+			</el-table-column>
+			<el-table-column prop="address" label="国际化key" align="center">
+				<template #default="scope">
+					<el-input size="default" v-model="scope.row.type" />
+				</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>
+		<combinationDialog
+				:list="combinationList"
+				@close="closeCombination"
+				v-if="combinationVisible" />
+	</el-dialog>
+</template>
+
+<script setup lang="ts">
+import {CirclePlus,Delete} from '@element-plus/icons-vue'
+import combinationDialog from './combination.vue'
+import {ref} from "vue";
+
+const props = defineProps({
+	list:Array
+});
+const currentRow = ref({})
+const combinationVisible = ref(false)
+const combinationList = ref({})
+
+function closeCombination(){
+	combinationVisible.value = false
+}
+
+function opencombinationDialog(row:object){
+	combinationList.value = row.combination
+	combinationVisible.value = true
+}
+
+function remove(){
+	props.list = props.list.filter(item => item !== currentRow.value)
+}
+function handleCurrentChange(val){
+	currentRow.value = val
+}
+function add(){
+	props.list.push({
+		leftBracket:'',
+		propName:'',
+		operator:'',
+		propValueType:'',
+		rightBracket:'',
+		joinSign:''
+	})
+}
+</script>
+
+<style scoped>
+
+</style>