super-page-runtime 1.0.13 → 1.0.14

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

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

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

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

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

@@ -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