super-page-runtime 1.0.14 → 1.0.15

package/src/components/runtime/views/assemblys/page/page-attr-base.vue

@@ -1,252 +0,0 @@
-<template>
-  <el-form label-width="80px">
-      <el-collapse v-model="openCollapseItems" style="margin-top:6px;">
-        <el-collapse-item
-              title="基本"  
-              name="1"
-              class="amb-design-attr-group-header">
-          <div style="padding:8px 0px 0px 0px;">
-              <el-form-item label="编码">
-                <el-text>{{configure.code}}</el-text>
-              </el-form-item>
-              <el-form-item label="名称" style="margin-top:-10px;">
-                <el-input v-model="configure.name"></el-input>
-              </el-form-item>
-              <el-form-item label="Flex布局"
-                style="margin-top:-10px;margin-bottom:-15px;">
-                <el-switch v-model="configure.props.isFlex"/>
-              </el-form-item>
-              <el-form-item 
-                  v-if="configure.props.isFlex"
-                  label="水平对齐" style="margin-top:18px;margin-bottom:-15px;">
-                  <el-select
-                    v-model="configure.props.flexJustify"
-                    placeholder="默认"
-                    clearable>
-                    <el-option label="start" value="start"/>
-                    <el-option label="center" value="center"/>
-                    <el-option label="space-between" value="space-between"/>
-                    <el-option label="space-around" value="space-around"/>
-                  </el-select>
-              </el-form-item>
-              <el-form-item 
-                  v-if="configure.props.isFlex=='2'"
-                  label="分栏间隔" style="margin-bottom:-15px;margin-top:-10px;">
-                  <el-select
-                    v-model="configure.props.flexGutter"
-                    placeholder="默认"
-                    clearable>
-                    <el-option
-                      v-for="item in gutters"
-                      :label="item" :value="item"/>
-                  </el-select>
-              </el-form-item>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item
-              title="工作流"  
-              name="2"
-              class="amb-design-attr-group-header">
-          <div style="padding:8px 0px 0px 0px;">
-              <el-form-item label="启用" style="margin-bottom:-14px">
-                <el-switch v-model="configure.props.activeWorkflow"/>
-              </el-form-item>
-
-              <el-form-item v-if="configure.props.activeWorkflow" label="是否引用" style="margin-top:14px;margin-bottom:-15px;">
-                <el-switch v-model="configure.props.isLinkWorkflow"/>
-              </el-form-item>
-
-              <el-form-item v-if="configure.props.activeWorkflow&&configure.props.isLinkWorkflow" label="选择引用" style="margin-top:18px;margin-bottom:-12px;">
-                <el-input v-model="configure.props.linkWorkflow" readonly="true">
-                    <template #append>
-                      <el-button :icon="Search" @click="selectWorkflow"/>
-                    </template>
-                </el-input>
-              </el-form-item>
-          </div>
-        </el-collapse-item>
-
-        <el-collapse-item
-              title="页面变量"  
-              name="3"
-              class="amb-design-attr-group-header">
-          <div style="padding:8px 0px 0px 0px;">
-              <el-form-item label="数据模型" class="amb-design-attr-item">
-                <el-input v-model="configure.tableAlias" :title="configure.tableAlias" clearable readonly="true">
-                    <template #append>
-                      <el-button :icon="Search" @click="selectTable" size="small"/>
-                      <el-button :icon="Close" @click="clearTable" title="Clear" size="small"/>
-                    </template>
-                </el-input>
-              </el-form-item>
-              <el-form
-                label-position="top">
-                <el-form-item
-                    label-position="top"
-                    class="amb-design-attr-item">
-                    <template #label>
-                      &nbsp;&nbsp;自定义变量(待定)
-                      <el-button  type="primary" round :icon="Setting" @click="customVariables" size="small"/>
-                    </template>
-                    <el-tree
-                      style="border:1px solid #F5F6F8;padding:10px;width:100%;min-height:100px;"
-                      :data="variableTreeDatas"
-                      :props="variableDefaultProps"
-                      default-expand-all
-                      :expand-on-click-node="false"
-                    />
-                </el-form-item>
-              </el-form>
-          </div>
-        </el-collapse-item>
-      </el-collapse>
-      <commonSelectTableDialog
-        ref="selectTableDialog"
-        @select-table="onSelectTable"
-        :systemCode="configure.systemCode" 
-        :systemVersion="configure.systemVersion"></commonSelectTableDialog>
-
-      <variableDialog 
-        ref="refVariableDialog" :pageDesign="configure" @close="onCloseVariableDialog"></variableDialog>
-  </el-form>
-</template>
-<script lang='ts' setup>
-    import { ref,computed, defineEmits} from 'vue';
-    import {Search,Close,Setting} from '@element-plus/icons';
-    import commonSelectTableDialog from '../common/common-select-table.vue';
-    import variableDialog from './variable-dialog.vue';
-    import type { PageDesign } from '@/components/design/utils/interfaces/page-design-types';
-    import {queryTableFields} from '../../../../design/utils/page-table-util';
-
-    interface MyProps{
-      configure:PageDesign
-    }
-    const props = defineProps<MyProps>();
-
-    /**
-     * 自定义参数树定义
-     */
-     const variableDefaultProps = {
-      children: 'children',
-      label: 'label',
-    }
-
-    /**
-     * 自定义参数的Json树
-     */
-    const variableTreeDatas = ref([]);
-    //转换为自定义参数显示的数据
-    variableTreeDatas.value = getVariablesTreeData(props.configure.variables);
-
-    //分栏可选项
-    const gutters = ref([2,4,6,8,10,12,14,16,18,20,24]);
-
-    const openCollapseItems = ref(['1','2','3']);
-
-    const selectTableDialog:any = ref(null);
-    const refVariableDialog:any = ref(null);
-    /**
-     * 选择引用的页面
-     */
-    function selectPage(){
-        alert('select page')
-    }
-
-    /**
-     * 选择引用的页面
-     */
-    function selectWorkflow(){
-      alert("select workflow")
-    }
-
-    /**
-     * 选择表名
-     */
-     function selectTable(){
-      selectTableDialog.value.openDialog();
-    }
-
-    function clearTable(){
-      props.configure.tableAlias='';
-      props.configure.tableName='';
-      props.configure.modelFields = [];
-    }
-
-    /**
-     * 选择数据表时
-     * @param tableInfo 
-     */
-    function onSelectTable(tableInfo:any){
-      //检查选择的数据表与之前的字段是否一致
-      let hisKey = props.configure.tableSysCode?props.configure.tableSysCode:'';
-          hisKey += '_';
-          hisKey += props.configure.tableSysVersion?props.configure.tableSysVersion:'';
-          hisKey += '_';
-          hisKey += props.configure.tableName?props.configure.tableName:'';
-      let newKey = tableInfo.systemCode?tableInfo.systemCode:'';
-          newKey += '_';
-          newKey += tableInfo.systemVersion?tableInfo.systemVersion:'';
-          newKey += '_';
-          newKey += tableInfo.name?tableInfo.name:'';
-      if(newKey!=hisKey){
-        props.configure.tableSysCode = tableInfo.systemCode;
-        props.configure.tableSysVersion = tableInfo.systemVersion;
-        props.configure.tableName = tableInfo.name;
-        props.configure.tableAlias = tableInfo.alias;
-        
-        const systemCode = tableInfo.systemCode?tableInfo.systemCode:props.configure.systemCode;
-        const systemVersion = tableInfo.systemVersion?tableInfo.systemVersion:props.configure.systemVersion;
-        //查询表字段,设置到页面对象中
-        queryTableFields(systemCode,systemVersion,tableInfo.name)
-          .then((tableFields)=>{
-            props.configure.modelFields = tableFields;
-            console.log("queryTableFields",tableFields)
-          });
-      }
-    }
-
-    /**
-     * 自定义页面变量
-     */
-    function customVariables(){
-      refVariableDialog.value.openDialog();
-    }
-
-    /**
-     * 关闭后的事件
-     */
-    function onCloseVariableDialog(){
-      //重新计算生成一次
-      variableTreeDatas.value = getVariablesTreeData(props.configure.variables);
-    }
-
-    function getVariablesTreeData(variables:any){
-       const treeDatas = convertVariablesToTree(variables);
-       if(!treeDatas){
-        return [{label:'无自定义'}];
-       }else{
-        return treeDatas;
-       }
-    }
-    /**
-     * 转换自定义参数对象为Json对象
-     */
-    function convertVariablesToTree(variables:any):any{
-      if(variables==null||variables.length==0){
-        return null;
-      }else{
-        const items = [];
-        for(let variable of variables){
-          const item:any = {
-            label:variable.name + (variable.alias?("("+variable.alias+")"):'')
-          };
-          const children = convertVariablesToTree(variable.items);
-          if(children){
-            item.children = children;
-          }
-          items.push(item);
-        }
-        return items;
-      }
-    }
-</script>

package/src/components/runtime/views/assemblys/page/page-attr-events.vue

@@ -1,50 +0,0 @@
-<template>
-  <div style="margin-top:5px;">
-    <el-row  v-for="(eventItem,eventIndex) in configure.events"
-      style="border-bottom:2px dashed #F5F6F8;padding-top:5px;padding-bottom:5px;">
-      <el-col  style="overflow: hidden;" :span="20">
-        &nbsp;&nbsp;{{ eventItem.name }}
-        <template v-if="eventItem.label">
-        ({{ eventItem.label }})
-        </template>
-      </el-col>
-      <el-col :span="4" style="text-align:center;font-weight:bold;">
-        <el-icon v-if="eventItem.selLogicCode" style="cursor:pointer;color:#5893EF;margin-right:6px;" title="编辑逻辑" @click='editLogic("{{eventItem.selLogicCode}}")'><Edit /></el-icon>
-        <el-icon style="cursor:pointer;" title="选择逻辑" @click="selectLogic(eventIndex)"><Search /></el-icon>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-<script lang='ts' setup>
-    import { ref,computed, defineEmits} from 'vue';
-    import {Edit,Search} from '@element-plus/icons';
-
-    const props = defineProps({
-        configure:{
-          type:Object,
-          required:true
-        }
-    });
-
-    if(props.configure.events==undefined){
-      props.configure.events = [];
-    }
-
-    setTimeout(() => {
-      if(props.configure.events.length>0){
-        props.configure.events[0].selLogicCode='aa'
-      }
-    },2000);
-    
-    //选择逻辑
-    function selectLogic(eventIndex:any){
-      alert("eventIndex:"+eventIndex)
-    }
-    //编辑逻辑
-    function editLogic(logicName:String){
-      alert("edit logicName:"+logicName)
-    }
-    //拖动定义的方法
-    const $emit = defineEmits([]);
-</script>
-

package/src/components/runtime/views/assemblys/page/page-attr-style.vue

@@ -1,25 +0,0 @@
-<template>
-  <el-form label-width="80px">
-      <el-collapse v-model="openCollapseItems" style="margin-top:6px;">
-        <commonStyleFont :configure="configure"></commonStyleFont>
-        <commonStyleBackground :configure="configure"></commonStyleBackground>
-        <commonStylePadding :configure="configure"></commonStylePadding>
-        <commonStyleCustom :configure="configure"></commonStyleCustom>
-      </el-collapse>
-  </el-form>
-</template>
-<script lang='ts' setup>
-    import { ref} from 'vue';
-    import commonStyleFont from '../common/common-style-font.vue';
-    import commonStylePadding from '../common/common-style-padding.vue';
-    import commonStyleBackground from '../common/common-style-background.vue';
-    import commonStyleCustom from '../common/common-style-custom.vue';
-
-    defineProps({
-        configure:{
-          type:Object,
-          required:true
-        }
-    });
-    const openCollapseItems = ref(['styleFont','styleBackground','stylePadding','styleCustom']);
-</script>

package/src/components/runtime/views/assemblys/page/page-attr.vue

@@ -1,84 +0,0 @@
-<template>
-  <div class="amb-design-attr-content">
-      <div class="amb-design-attr-header">
-          <div class="amb-design-attr-header-type">
-              <label :class="typeBaseClass" @click="changeType('base')">属性</label>
-              <label :class="typeStyleClass" @click="changeType('style')">样式</label>
-              <label :class="typeEventClass" @click="changeType('event')">
-                事件
-                <el-badge v-if="selEventCount>0" :value="selEventCount">
-                </el-badge>
-              </label>
-              <label :class="typeAdviceClass" @click="changeType('advice')">高级</label>
-          </div>
-      </div>
-      <div class="amb-design-attr-list">
-          <pageAttrBase v-show="typeBaseClass" :configure="configure"></pageAttrBase>
-          <pageAttrStyle v-show="typeStyleClass" :configure="configure"></pageAttrStyle>
-          <!-- <pageAttrEvents v-show="typeEventClass" :events="configure.events"></pageAttrEvents> -->
-      </div>
-  </div>
-</template>
-<script lang='ts' setup>
-    import { ref,computed, defineEmits,watch} from 'vue';
-    import pageAttrBase from './page-attr-base.vue';
-    import pageAttrStyle from './page-attr-style.vue';
-    // import pageAttrEvents from './../common-attr-events.vue'
-
-    const props = defineProps({
-        configure:{
-          type:Object,
-          required:true
-        }
-    });
-
-    //点击分组时变化的方法
-    const typeBaseClass = ref("selected");
-    const typeStyleClass = ref("");
-    const typeEventClass = ref("");
-    const typeAdviceClass = ref("");
-    function changeType(typeName:String){
-       if(typeName=='base'){
-        typeBaseClass.value="selected";
-        typeStyleClass.value="";
-        typeEventClass.value="";
-        typeAdviceClass.value="";
-       }else if(typeName=='style'){
-        typeBaseClass.value="";
-        typeStyleClass.value="selected";
-        typeEventClass.value="";
-        typeAdviceClass.value="";
-       }else if(typeName=='event'){
-        typeBaseClass.value="";
-        typeStyleClass.value="";
-        typeEventClass.value="selected";
-        typeAdviceClass.value="";
-       }else{
-        typeBaseClass.value="";
-        typeStyleClass.value="";
-        typeEventClass.value="";
-        typeAdviceClass.value="selected";
-       }
-    }
-    //监控事件数组，有变化时修改选择的数量
-    if(props.configure.events==undefined){
-      props.configure.events = [];
-    }
-    //初始化计算
-    const selEventCount = ref(0);
-    caculateSelEventCount();
-    //计算已选的事件数量
-    function caculateSelEventCount(){
-      const allEvents = props.configure.events;
-      for(let index=0;index<allEvents.length;index++){
-        if(allEvents[index].selLogicCode){
-          selEventCount.value++;
-        }
-      }
-    }
-    watch(props.configure.events,(newValue)=>{
-      caculateSelEventCount();
-    });
-    //拖动定义的方法
-    const $emit = defineEmits([])
-</script>

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

@@ -1,242 +0,0 @@
-<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