super-page-runtime 1.0.15 → 1.0.16

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

@@ -0,0 +1,179 @@
+<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="编码" class="amb-design-attr-item">
+                <el-text>{{configure.code}}</el-text>
+              </el-form-item>
+              <el-form-item label="名称" class="amb-design-attr-item">
+                <el-input v-model="configure.name"></el-input>
+              </el-form-item>
+              <el-form-item label="类型" class="amb-design-attr-item" style="margin-top:10px;">
+                  <el-radio-group v-model="configure.props.type">
+                    <el-radio-button value="structure">结构</el-radio-button>
+                    <el-radio-button value="page">菜单</el-radio-button>
+                  </el-radio-group>
+              </el-form-item>
+              <el-form-item v-if="configure.props.type=='page'" label="是否引用" class="amb-design-attr-item">
+                <el-switch v-model="configure.props.isLinkPage"/>
+              </el-form-item>
+              <el-form-item v-if="configure.props.isLinkPage" label="选择页面" class="amb-design-attr-item">
+                <el-input v-model="configure.props.linkPage" readonly="true">
+                    <template #append>
+                      <el-button :icon="Search" @click="selectPage"/>
+                    </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item v-if="configure.props.isLinkPage" label="扩展参数" style="margin-bottom:-10px">
+                <el-input v-model="configure.props.appendParams"></el-input>
+              </el-form-item>
+              <el-form-item v-if="configure.props.type=='page'&&!configure.props.isLinkPage" label="Flex布局"
+                style="margin-bottom:-14px">
+                <el-switch v-model="configure.props.isFlex"/>
+              </el-form-item>
+              <el-form-item 
+                  v-if="configure.props.type=='page'&&!configure.props.isLinkPage&&configure.props.isFlex"
+                  label="水平对齐" class="amb-design-attr-item" style="margin-top:17px;">
+                  <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.type=='page'&&!configure.props.isLinkPage&&configure.props.isFlex"
+                  label="分栏间隔" style="margin-bottom:-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
+              v-if="configure.props.type=='page'&&!configure.props.isLinkPage"
+              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
+              v-if="configure.props.type=='page'&&!configure.props.isLinkPage"
+              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.props.tableName" readonly="true">
+                    <template #append>
+                      <el-button :icon="Search" @click="selectTable"/>
+                    </template>
+                </el-input>
+              </el-form-item>
+              <el-form
+                label-position="top">
+                <el-form-item label="&nbsp;&nbsp;自定义变量(待定)" 
+                    label-position="top"
+                    class="amb-design-attr-item">
+                    <el-input
+                      v-model="configure.props.customParams"
+                      :rows="5"
+                      type="textarea"
+                      placeholder=""
+                    />
+                </el-form-item>
+              </el-form>
+              <!--<el-table
+                :data="configure.paramDefines"
+                style="width: 100%; margin-bottom: 20px"
+                row-key="id"
+                border
+                default-expand-all
+                row-class-name="amb-design-page-param-row"
+                row-style='{"height":"34px"}'
+                :cell-style='paramCellStyle'
+              >
+                <el-table-column prop="code" label="Code"/>
+                <el-table-column prop="type" label="类型"/>
+                <el-table-column prop="alias" label="别名"/>
+                <el-table-column prop="default" label="默认"/>
+                <el-table-column label=""/>
+              </el-table>-->
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+  </el-form>
+</template>
+<script lang='ts' setup>
+    import { ref,computed, defineEmits} from 'vue';
+    import {Search} from '@element-plus/icons';
+    import type { PageDesign } from '../../../../../src/utils/helper/page-helper-util';
+
+    interface MyProps{
+      configure:PageDesign
+    }
+    const props = defineProps<MyProps>();
+    
+    if(!props.configure.props){
+      props.configure.props = {
+        type:'structure',
+        code:'XXXXX'
+      };
+    }
+
+    //分栏可选项
+    const gutters = ref([2,4,6,8,10,12,14,16,18,20,24]);
+
+    const openCollapseItems = ref(['1','2','3']);
+
+    /**
+     * 选择引用的页面
+     */
+    function selectPage(){
+        alert('select page')
+    }
+
+    /**
+     * 选择引用的页面
+     */
+    function selectWorkflow(){
+      alert("select workflow")
+    }
+
+    /**
+     * 选择表名
+     */
+     function selectTable(){
+      alert("select table")
+    }
+</script>

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

@@ -0,0 +1,259 @@
+<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 '../../../../../src/utils/interfaces/page-design-types'
+// import { queryTableFields } from '../../../../../src/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/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/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/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>