super-page-runtime 1.0.13 → 1.0.14

package/src/components/runtime/views/assemblys/common/common-select-table.vue

@@ -0,0 +1,287 @@
+<template>
+    <el-dialog v-model="dialogTableVisible" title="选择数据模型" width="800">
+        <div style="background-color:rgba(88,147,239,0.06);padding:10px;">
+            <el-select
+                v-model="searchModel.systemCode"
+                placeholder="当前应用"
+                clearable
+                @change="confirmSearch"
+                style="width:120px">
+                <el-option
+                    v-for="item in allSystems"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                />
+                </el-select>
+             <el-select
+                v-model="searchModel.tableType"
+                placeholder="表和视图"
+                clearable
+                @change="confirmSearch"
+                style="width:120px;margin-left:10px;">
+                <el-option value="1" label="表"></el-option>
+                <el-option value="2" label="视图"></el-option>
+            </el-select>
+            <el-input v-model="searchModel.searchValue" style="width:240px;margin-left:10px;" placeholder="请输入名称或别名" />
+            <el-button type="primary" style="margin-left:10px;" :icon="Search" @click="confirmSearch">确定</el-button>
+            <el-button  style="margin-left:10px;" :icon="RefreshLeft" @click="resetSearch">重置</el-button>
+        </div>
+        <el-table :data="tableDatas" stripe 
+            :height="tableHeight"
+            @sort-change="handleSortChange">
+          <!-- 添加序号列 -->
+          <el-table-column type="index" label="序" width="50">
+            <!-- 自定义索引 (可选，如果需要从1开始计数) -->
+            <template #default="scope">
+                {{ scope.$index + 1 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="80">
+            <template #default="scope">
+                <el-button type="primary" size="small" @click="confirmSelectTable(scope)">选择</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column property="dataView" label="类型" width="70">
+            <template #default="scope">
+                <el-text v-if="!scope.dataView" class="mx-1" type="primary">数据表</el-text>
+                <el-text v-if="scope.dataView" class="mx-1" type="success">视图</el-text>
+            </template>
+          </el-table-column>
+          <el-table-column property="name" label="名称" width="200"  sortable="custom"/>
+          <el-table-column property="alias" label="别名"/>
+        </el-table>
+        <el-pagination
+          style="margin-top:10px;justify-content:center;"
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[20, 30, 50, 100]"
+          background
+          layout="sizes,prev,pager,next,jumper,total"
+          :total="pagination.total"
+          @size-change="confirmSearch"
+          @current-change="confirmSearch"
+        />
+    </el-dialog>
+</template>
+<script lang='ts' setup>
+    import {reactive,ref} from 'vue';
+    import {Search,RefreshLeft} from '@element-plus/icons';
+    import http from 'agilebuilder-ui/src/utils/request';
+    import { EnableStates } from '../../../utils/interfaces/page-design-types';
+
+    interface MyProps{
+        systemCode:string,
+        systemVersion:number
+    }
+    const props = defineProps<MyProps>();
+
+    //定义事件
+    const emits = defineEmits(["selectTable"]);
+    //表格高度
+    const tableHeight = ref(300);
+    
+    //弹框是否打开的标识
+    const dialogTableVisible = ref(false);
+    //查询模型
+    const searchModel:any = reactive({
+        systemCode:'',
+        tableType:null,
+        searchValue:''
+    });
+
+    //重置
+    function resetSearch(){
+        searchModel.systemCode = '';
+        searchModel.tableType = null;
+        searchModel.searchValue = '';
+
+        confirmSearch();
+    }
+    //分页对象
+    const pagination = reactive({
+        currentPage: 1,
+        pageSize: 20,
+        showTotal: true,
+        total: 0
+    });
+    //所有数据表数据
+    const tableDatas = ref([]);
+
+    //可选下拉的应用系统
+    const allSystems = ref([{
+        value:'',
+        version:1,
+        label:''
+    }]);
+
+    /**
+     * 确定选择
+     * @param scopeData 行数据
+     */
+    function confirmSelectTable(scopeData:any){
+        const tableInfo:any = {
+            name:scopeData.row.name,
+            alias:scopeData.row.alias
+        };
+        if(searchModel.systemCode&&searchModel.systemCode!=props.systemCode){
+            let systemCode = searchModel.systemCode;
+            let items = allSystems.value.filter((item)=>{
+                return item.value==systemCode;
+            });
+            tableInfo.systemVersion = items.length>0?items[0].version:1;
+            tableInfo.systemCode = systemCode;
+        }
+        //触发事件
+        emits("selectTable",tableInfo);
+        //隐藏
+        dialogTableVisible.value = false;
+    }
+    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;
+        //查询所有业务系统
+        if(!firstInited){
+            firstInited = true;
+            queryAllSystems();
+            setTimeout(() => {
+                //默认查询
+                confirmSearch();
+            },100);
+        }
+    }
+
+    /**
+     * 查询所有的应用系统
+     */
+    function queryAllSystems(){
+        //查询所有的
+        http.post('/component/super-charts/findAllSystem').then((res: any) => {
+           const datas:any[] = res;
+           const systemCodes:string[] = [];
+           const tempMap:any = {};
+           for(let item of datas){
+                //是否删除
+                if(item.deleted){
+                    continue;
+                }
+                //状态
+                if(item.enabledState!=EnableStates.ENABLE){
+                    continue;
+                }
+                const hisData = tempMap[item.code];
+                //高版本时
+                if(hisData!=null&&item.publishVersion>hisData.publishVersion){
+                    tempMap[item.code] = item;
+                }else if(hisData==null){
+                    tempMap[item.code] = item;
+                    systemCodes.push(item.code);
+                }
+           }
+           //组装对象
+           allSystems.value = [];
+           for(let code of systemCodes){
+                const item = tempMap[code];
+                //当前应用时，显示当前的版本
+                const publishVersion:number = code===props.systemCode?props.systemVersion:item.publishVersion;
+                allSystems.value.push({
+                    value:code,
+                    label:item.name+"("+publishVersion+")",
+                    version:publishVersion
+                });
+           }
+        });
+    }
+
+    /**
+     * 排序
+     */
+    let sortColumnInfo:any = null;
+    function handleSortChange({ column}){
+        sortColumnInfo = column;
+        //重新查询
+        confirmSearch();
+    }
+    /**
+     * 确定查询
+     */
+    function confirmSearch(){
+        const param:any = {
+            //code: 'MMS_MODULE_PAGE',
+            pagination: { currentPage:pagination.currentPage, pageSize: pagination.pageSize, showTotal: true },
+            searchForm: [],
+            dynamicColumnInfo: [],
+            sorts:[]
+        }
+        //添加排序字段
+        if(sortColumnInfo!=null){
+            param.sorts.push({
+                prop:sortColumnInfo.property,
+                order:sortColumnInfo.order=='ascending'?'asc':'desc'
+            });
+        }
+        //过滤条件
+        //运算符，值为cn.ambitionq.enumeration.Operator枚举类的属性值
+        if(searchModel.searchValue){
+            param.searchForm.push({
+                propName:'name',
+                propDbName:'name',
+                operator:'like',
+                dataType:'string',
+                propValue:searchModel.searchValue,
+                joinSign:'or'
+            });
+            param.searchForm.push({
+                propName:'alias',
+                propDbName:'alias',
+                operator:'like',
+                dataType:'string',
+                propValue:searchModel.searchValue
+            });
+        }
+        let systemCode = searchModel.systemCode;
+        let publishVersion = -1;
+        if(!systemCode){
+            systemCode = props.systemCode;
+            publishVersion = props.systemVersion;
+        }else{
+            let items = allSystems.value.filter((item)=>{
+                return item.value==systemCode;
+            });
+            publishVersion = items.length>0?items[0].version:-1;
+        }
+        const tableType = searchModel.tableType?searchModel.tableType:0;
+        ///mms/data-tables/list/{systemCode}/{type}/{publishVersion}
+        const url = '/mms/data-tables/list/'+systemCode+"/"+tableType+"/"+publishVersion;
+        console.log("searc",url)
+        //
+        http.post(url, param).then((res: any) => {
+            tableDatas.value = res.data
+            pagination.currentPage = res.page;//当前页码
+            pagination.pageSize = res.size;//每页记录数
+            pagination.total = res.total;//总记录数
+            //res.totalPages;//总页数
+        });
+    }
+
+    /**
+     * 定义打开窗口的方法
+     */
+    defineExpose({
+        openDialog
+    });
+</script>
+
+../../../utils/interfaces/page-runtime-types

package/src/components/runtime/views/assemblys/common/common-style-background.vue

@@ -0,0 +1,46 @@
+<template>
+    <el-collapse-item
+              title="背景"
+              name="styleBackground"
+              class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item label="颜色" style="margin-top:4px;">
+            <el-color-picker v-model="configure.style.backgroundColor" />
+            </el-form-item>
+            <el-form-item label="图片" style="margin-top:-10px;margin-bottom:-15px;">
+            <el-upload
+                class="avatar-uploader"
+                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                :before-upload="beforeAvatarUpload">
+                <img v-if="configure.style.backgroundImage" :src="configure.style.backgroundImage" class="avatar" />
+                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+                </el-upload>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    import {} from 'vue';
+    import { Plus } from '@element-plus/icons-vue'
+    import type { UploadProps } from 'element-plus'
+    const props = defineProps({
+        configure:{
+          type:Object,
+          required:true
+        }
+    });
+
+		function beforeAvatarUpload(){
+
+		}
+
+    //图片上传
+    const handleAvatarSuccess: UploadProps['onSuccess'] = (
+      response,
+      uploadFile
+    ) => {
+      props.configure.style.backgroundImage = URL.createObjectURL(uploadFile.raw!)
+    }
+</script>

package/src/components/runtime/views/assemblys/common/common-style-border.vue

@@ -0,0 +1,37 @@
+<template>
+    <el-collapse-item
+            title="边框"  
+            name="styleBorder"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item label="颜色" class="amb-design-attr-item" style="margin-top:4px;">
+            <el-color-picker v-model="configure.style.borderColor" />
+            </el-form-item>
+            <el-form-item label="线宽" style="margin-top:-10px;">
+            <el-input-number v-model="configure.style.borderWidth" :min="0" :max="40">
+            </el-input-number>
+            </el-form-item>
+            <el-form-item label="线型" style="margin-top:-10px;">
+            <el-radio-group v-model="configure.style.borderType">
+                <el-radio-button value="solid">实线</el-radio-button>
+                <el-radio-button value="dotted">点线</el-radio-button>
+                <el-radio-button value="dashed">虚线</el-radio-button>
+            </el-radio-group>
+            </el-form-item>
+            <el-form-item label="圆角" style="margin-top:-10px;margin-bottom:-15px;">
+            <el-input-number v-model="configure.style.radius" :min="0" :max="40">
+            </el-input-number>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    import {} from 'vue';
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+</script>
+

package/src/components/runtime/views/assemblys/common/common-style-custom.vue

@@ -0,0 +1,35 @@
+<template>
+    <el-collapse-item
+              title="自定义"  
+              name="styleCustom"
+              class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+        <el-form label-position="top">
+            <el-form-item label="&nbsp;&nbsp;class(多个分号;隔开)" style="margin-top:4px;">
+            <el-input
+                v-model="configure.style.customClass"
+                placeholder=""
+                >
+            </el-input>
+            </el-form-item>
+            <el-form-item label="&nbsp;&nbsp;style" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-input
+                    v-model="configure.style.customStyle"
+                    :rows="5"
+                    type="textarea"
+                    placeholder=""
+                    />
+            </el-form-item>
+        </el-form>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+</script>
+

package/src/components/runtime/views/assemblys/common/common-style-font-head.vue

@@ -0,0 +1,53 @@
+<template>
+    <el-collapse-item
+              title="标题"  
+              name="styleFontHead"
+              class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+        <el-row style="margin-top:4px;">
+            <el-col :span="9">
+                <el-form-item label="加粗">
+                    <el-switch v-model="configure.style.headerFontWeight"/>
+                </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                <el-form-item label="倾斜">
+                    <el-switch v-model="configure.style.headerIncline"/>
+                </el-form-item>
+            </el-col>
+        </el-row>
+            <el-form-item
+                label="字号" style="margin-top:-10px;">
+                <el-select
+                v-model="configure.style.headerFontSize"
+                placeholder="默认"
+                clearable>
+                <el-option
+                    v-for="item in fontSizes"
+                    :label="item" :value="item"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="颜色" style="margin-top:-10px;">
+            <el-color-picker v-model="configure.style.headerColor" />
+            </el-form-item>
+            <el-form-item label="左右对齐" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-radio-group v-model="configure.style.headerTextAlign">
+                <el-radio-button value="left">左</el-radio-button>
+                <el-radio-button value="center">中</el-radio-button>
+                <el-radio-button value="right">右</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+    //字号
+    const fontSizes = ["8px","10px","12px","14px","16px","18px","20px","24px","28px"];
+</script>
+

package/src/components/runtime/views/assemblys/common/common-style-font.vue

@@ -0,0 +1,53 @@
+<template>
+    <el-collapse-item
+            title="字体"  
+            name="styleFont"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-row style="margin-top:4px;">
+                <el-col :span="9">
+                    <el-form-item label="加粗">
+                        <el-switch v-model="configure.style.fontWeight"/>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="倾斜">
+                        <el-switch v-model="configure.style.incline"/>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-form-item
+                label="字号" style="margin-top:-10px;">
+                <el-select
+                v-model="configure.style.fontSize"
+                placeholder="默认"
+                clearable>
+                <el-option
+                    v-for="item in fontSizes"
+                    :label="item" :value="item"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="颜色" style="margin-top:-10px;">
+                <el-color-picker v-model="configure.style.color" />
+            </el-form-item>
+            <el-form-item label="左右对齐" style="margin-top:-10px;margin-bottom:-15px;">
+                    <el-radio-group v-model="configure.style.textAlign">
+                    <el-radio-button value="left">左</el-radio-button>
+                    <el-radio-button value="center">中</el-radio-button>
+                    <el-radio-button value="right">右</el-radio-button>
+                    </el-radio-group>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+    //字号
+    const fontSizes = ["8px","10px","12px","14px","16px","18px","20px","24px","28px"];
+</script>
+

package/src/components/runtime/views/assemblys/common/common-style-margin.vue

@@ -0,0 +1,34 @@
+<template>
+    <el-collapse-item
+        title="Margin"  
+        name="styleMargin"
+        class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item label="上边距" style="margin-top:4px;">
+                <el-input-number v-model="configure.style.marginTop" :min="0" :max="40">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item label="右边距" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.marginRight" :min="0" :max="40">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item label="下边距" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.marginBottom" :min="0" :max="40">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item label="左边距" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-input-number v-model="configure.style.marginLeft" :min="0" :max="40">
+                </el-input-number>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+</script>
+

package/src/components/runtime/views/assemblys/common/common-style-padding.vue

@@ -0,0 +1,34 @@
+<template>
+    <el-collapse-item
+            title="Padding"  
+            name="stylePadding"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+        <el-form-item label="上边距" style="margin-top:4px;">
+            <el-input-number v-model="configure.style.paddingTop" :min="0" :max="100">
+            </el-input-number>
+        </el-form-item>
+        <el-form-item label="右边距" style="margin-top:-10px;">
+            <el-input-number v-model="configure.style.paddingRight" :min="0" :max="100">
+            </el-input-number>
+        </el-form-item>
+        <el-form-item label="下边距" style="margin-top:-10px;">
+            <el-input-number v-model="configure.style.paddingBottom" :min="0" :max="100">
+            </el-input-number>
+        </el-form-item>
+        <el-form-item label="左边距" style="margin-top:-10px;margin-bottom:-15px;">
+            <el-input-number v-model="configure.style.paddingLeft" :min="0" :max="100">
+            </el-input-number>
+        </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+</script>
+

package/src/components/runtime/views/assemblys/common/common-style-position.vue

@@ -0,0 +1,39 @@
+<template>
+    <el-collapse-item
+            title="定位"  
+            name="stylePosition"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-radio-group v-model="configure.style.position" style="padding:0px 8px 0px 30px;margin-bottom:-15px;">
+            <el-radio value="relative">relative</el-radio>
+            <el-radio value="absolute">absolute</el-radio>
+            <el-radio value="fixed">fixed</el-radio>
+            <el-radio value="sticky">sticky</el-radio>
+            </el-radio-group>
+            <el-form-item v-if="configure.style.position&&configure.style.position!='relative'" label="X坐标" style="margin-top:20px;">
+            <el-input v-model="configure.style.left">
+                <template #suffix>
+                px
+                </template>
+            </el-input>
+            </el-form-item>
+            <el-form-item v-if="configure.style.position&&configure.style.position!='relative'" label="Y坐标" style="margin-top:-10px;margin-bottom:-15px;">
+            <el-input v-model="configure.style.top">
+                <template #suffix>
+                px
+                </template>
+            </el-input>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    import {} from 'vue';
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+</script>
+

package/src/components/runtime/views/assemblys/common/common-style-shadow.vue

@@ -0,0 +1,37 @@
+<template>
+    <el-collapse-item
+              title="阴影"  
+              name="styleShadow"
+              class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item label="颜色" style="margin-top:4px;margin-bottom:-15px;">
+                <el-color-picker v-model="configure.style.shadowColor" />
+            </el-form-item>
+            <el-form-item v-if="configure.style.shadowColor" label="上" style="margin-top:23px;">
+                <el-input-number v-model="configure.style.shadowTop" :min="0" :max="40">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item v-if="configure.style.shadowColor" label="右" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.shadowRight" :min="0" :max="40">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item v-if="configure.style.shadowColor" label="下" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.shadowBottom" :min="0" :max="40">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item v-if="configure.style.shadowColor" label="左" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-input-number v-model="configure.style.shadowLeft" :min="0" :max="40">
+                </el-input-number>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+</script>
+