agilebuilder-ui 1.1.12 → 1.1.13-tmp2

package/packages/super-grid/src/super-grid.vue

@@ -35,10 +35,12 @@
       @close="closeSearchFormDialog"
     />
     <div :class="'grid-area ' + code">
+      <MobileCard v-if="isShowCard" :selection="selectionTableData" :columns="visibleColumns" :getColumnComponentData="getColumnComponentData" :data="tableDatas" v-model:current-page="currentPage" :page-size="pagination?.pageSizes?.[0]" :page-total="pagination?.total" @selection-change="cardSelectionChangeEvent" @current-change="handleCurrentChange" @row-dblclick="rowDblclickEvent" />
+      
       <el-table
         v-if="refreshGrid && hasLoadedColumns"
         ref="superGrid"
-        :data="hasFilterDataEvent ? filterGridData : gridData"
+        :data="tableDatas"
         :row-key="getRowKeyProp"
         :show-summary="showSummary"
         :summary-method="getSummaries"
@@ -55,7 +57,7 @@
         :span-method="rowSpan"
         :max-height="maxHeight"
         :height="tableHeight"
-        :class="tableClass"
+        :class="`${tableClass} ${isShowCard ? 'xs-hidden-opacity-only' : ''}`"
         :tree-props="getTreeProps(parentProp, isSql, isLazy, dataSourceType)"
         @sort-change="handleSortChange"
         @select="selectRecord"
@@ -71,70 +73,18 @@
         @cell-dblclick="cellDblClick"
       >
         <row-detail v-if="detailColumn" :column="detailColumn" :list-code="code" @show-detail="openRowForm" />
-        <template v-if="myCustomFormatter">
-          <component
-            :is="getComponentType(column)"
-            v-for="(column, index) in visibleColumns"
-            :ref="column.prop"
-            :key="column.label + index"
-            :column="column"
-            :is-sql="isSql"
-            :list-code="code"
-            :custom-format="
-              getComponentType(column) === 'GroupColumn' ? myCustomFormatter : myCustomFormatter[column.prop]
-            "
-            :new-width="newWidth"
-            :drag-column-prop="dragColumnProp"
-            :right-click-menu-arr="options.rightClickMenuArr"
-            :table-name="tableName"
-            :page-code="pageCode"
-            :list-name="listName"
-            :options="options"
-            :pagination="pagination"
-            :current-page="currentPage"
-            :grid-data="isSubTableShowPage ? subTableData : gridData"
-            :page-grid-data="isSubTableShowPage ? getSubTableGridData(subTableData) : gridData"
-            @refresh-list="refreshList"
-            @open-page="openPageDialog"
-            @refresPortData="refresPortData"
-            @refresPortsData="refresPortsData"
-            @refresMainTableFields="refresMainTableFields"
-            @prohibitToEdit="prohibitToEdit"
-          />
-        </template>
-        <template v-else>
-          <component
-            :is="getComponentType(column)"
-            v-for="(column, index) in visibleColumns"
-            :ref="column.prop"
-            :key="column.label + index"
-            :is-sql="isSql"
-            :column="column"
-            :list-code="code"
-            :is-line-edit="lineEdit !== null && lineEdit.editable"
-            :new-width="newWidth"
-            :drag-column-prop="dragColumnProp"
-            :right-click-menu-arr="options.rightClickMenuArr"
-            :table-name="tableName"
-            :page-code="pageCode"
-            :list-toolbar-form-data="listToolbarFormData"
-            :list-name="listName"
-            :options="options"
-            :current-page="currentPage"
-            :pagination="pagination"
-            :grid-data="isSubTableShowPage ? subTableData : gridData"
-            :page-grid-data="isSubTableShowPage ? getSubTableGridData(subTableData) : gridData"
-            @open-page="openPageDialog"
-            @refresData="refresData"
-            @refresh-list="refreshList"
-            @refresPortData="refresPortData"
-            @refresPortsData="refresPortsData"
-            @refresMainTableFields="refresMainTableFields"
-            @prohibitToEdit="prohibitToEdit"
-          />
-        </template>
+        
+        <component
+          :is="getComponentType(column)"
+          v-for="({column, ...item}, index) in visibleColumnsComponentData"
+          :ref="column.prop"
+          :key="column.label + index"
+          v-bind="item.$bind"
+          v-on="item.$on"
+        />
+
       </el-table>
-      <div v-if="showPagination" style="position: relative; margin-top: 5px">
+      <div v-if="showPagination" style="position: relative; margin-top: 5px" :class="{ 'xs-hidden-opacity-only': isShowCard }">
         <el-row>
           <!-- <el-col
                   v-if="
@@ -254,6 +204,7 @@ import ColumnsConfig from './columns-config.vue'
 import SearchForm from './search-form.vue'
 import searchFormDialog from './search-form-dialog.vue'
 import RowDetail from './row-detail.vue'
+import MobileCard from './components/mobile-table-card.jsx'
 import { getEntityFieldValueWithOutCase, setEntityFieldValue } from '../../../src/utils/util'
 import eventBus from './eventBus'
 import {
@@ -282,6 +233,8 @@ import apis from './apis'
 import headerContextMenu from './header-context-menu.vue'
 import { isMobileBrowser, isPromise } from '../../../src/utils/common-util'
 import { checkPermission } from '../../../src/utils/permission'
+import { getGuId } from '../../../src/utils/guid.js';
+import resizeMixin from '../../../src/mixins/resizeMixin.js';
 
 export default {
   components: {
@@ -295,10 +248,17 @@ export default {
     searchFormDialog,
     ElIconSetting,
     ElIconRefresh,
-    RowDetail
+    RowDetail,
+    MobileCard
   },
   name: 'SuperGrid',
+  mixins: [resizeMixin],
   props: {
+    // 是否自适应卡片
+    isShowAutoCard: {
+      type: Boolean,
+      default: true
+    },
     code: {
       type: String,
       default: ''
@@ -489,10 +449,15 @@ export default {
       currentEditRowIndex: null, // 当前查看的行记录号
       showRowForm: false, // 是否显示行记录详情
       baseURL: null,
-      hasFilterDataEvent: false // 是否是表格过滤
+      hasFilterDataEvent: false, // 是否是表格过滤
+      selectionTableData: [], // 勾选数据
     }
   },
   computed: {
+    // 是否显示卡片
+    isShowCard() {
+      return this.isShowAutoCard && this.isMobileResize
+    },
     visibleColumns() {
       const gridParams = store.get(this.code)
       const operations = this.getOptionOperations()
@@ -555,6 +520,15 @@ export default {
         })
       }
     },
+    visibleColumnsComponentData() {
+      return this.visibleColumns.map(data => this.getColumnComponentData(data, this.myCustomFormatter))
+    },
+    mobileColumns() {
+      return 'Layout' 
+    },
+    tableDatas() {
+      return this.hasFilterDataEvent ? this.filterGridData : this.gridData
+    },
     spanArr() {
       const spanArr = []
       for (const column of this.columns) {
@@ -597,6 +571,24 @@ export default {
     // }
   },
   watch: {
+    // 是否为移动端尺寸
+    'isMobileResize': {
+      deep: true,
+      handler() {
+        // 是否开启卡片，如果开启则平台切换时候重新回到第一页
+        if(this.isShowAutoCard) {
+          this.currentPage = 1
+          this.handleCurrentChange()
+        }
+      }
+    },
+    'tableDatas': {
+      deep: true,
+      immediate: true,
+      handler(a, b) {
+        console.log('SGQ --- 表格监听数据修改============================》', a, b)
+      }
+    },
     'options.SuperGrid': {
       deep: true,
       handler: function () {
@@ -1737,11 +1729,24 @@ export default {
           .post(requestUrl, param)
           .then((data) => {
             if (typeof parentRowIds === 'undefined' || parentRowIds === null) {
+              // 当开启卡片的时候，则开启滚动分页
+              const getChildren = (data) => {
+                return data?.map(item => {
+                  return {
+                    $rowDataGuId: getGuId(),
+                    ...item,
+                    ...(item?.children?.length ? {
+                      children: getChildren(item.children)
+                    } : {})
+                  }
+                }) ?? []
+              }
+              const dataList = [...(this.isShowCard && this.currentPage > 1 ? this.gridData : []), ...getChildren(data?.data ?? [])]
               let tableData = []
               // 对数据做序列化，比如：处理xss攻击
               if (isHasOptionFunction('gridDataLoaded', this.code)) {
                 const gridDataLoadedParam = {
-                  gridData: data.data,
+                  gridData: dataList,
                   columns: gridParams.columns,
                   additionalParamMap: gridParams.additionalParamMap,
                   pageContext: this.pageContext,
@@ -1755,10 +1760,10 @@ export default {
                 if (gridData) {
                   tableData = gridData
                 } else {
-                  tableData = data.data
+                  tableData = dataList
                 }
               } else {
-                tableData = data.data
+                tableData = dataList
               }
               if (!tableData) {
                 tableData = []
@@ -2164,8 +2169,7 @@ export default {
     },
     getSearchParam() {
       const searchParam = {
-        code: this.code,
-        tableName: this.tableName
+        code: this.code
       }
       const gridParams = store.get(this.code)
       const pagination = this.getPaginationInfo()
@@ -2271,6 +2275,7 @@ export default {
       }
     },
     changePage() {
+      console.log('点击了分页')
       // 翻页操作会导致筛选项发生变化，所以需要清空已有的
       this.$refs.superGrid.clearFilter()
       // TODO: 把当前页数、每页条数、查询条件、排序信息传回后台
@@ -2739,6 +2744,7 @@ export default {
       return this.isSubTableShowPage ? this.subTableData : this.gridData
     },
     rowDblclickEvent(row, column, event) {
+      console.log('+++++++++++++++++++++++++++++++++', row, column, event)
       const gridParams = store.get(this.code)
       if (gridParams.options && gridParams.options.isFormSubTable && gridParams.options.isPdfEditor) {
         // 如果是子表并且是pdf模式
@@ -2778,6 +2784,7 @@ export default {
         }
       } else {
         if (row) {
+          debugger;
           if (gridParams && gridParams.lineEdit && gridParams.lineEdit.editable && gridParams.canntEdit) {
             let index = this.gridData.findIndex(function (item) {
               return (item.id && item.id === row.id) || (item.ID && item.ID === row.ID)
@@ -2785,6 +2792,7 @@ export default {
             if (index < 0) {
               index = 0
             }
+            console.log('我点击了。。。。。。。。。。。。。。。。。。。', index, this.code)
             this.editRow(index, this.code)
           }
         }
@@ -2792,6 +2800,7 @@ export default {
       this.rowDblClick(row, column, event)
     },
     rowDbClickEditRow(gridParams, row) {
+      console.log('rowDbClickEditRow+++++++++++++++++++', gridParams, row)
       // 取消上一行的编辑状态
       let editRows
       if (this.isSubTableShowPage) {
@@ -2973,6 +2982,7 @@ export default {
      * @param entity 格式如：{'NAME':false,"DYM_COLUMN":true}。表示NAME字段不可编辑，DYM_COLUMN可以被编辑
      */
     prohibitToEdit(entity) {
+      console.log('我执行了 prohibitToEdit=================================》', entity)
       this.fnProhibitToEdit(entity)
     },
     // 树形结构时数据展示
@@ -3013,6 +3023,8 @@ export default {
     },
     // 选择记录
     selectRecord(selection, row) {
+      console.log('selectRecord====>', selection, row)
+      this.selectionTableData = row
       let selectRecordEventResult = true
       const gridParams = store.get(this.code)
       if (isHasOptionFunction('selectRecord', this.code)) {
@@ -3034,9 +3046,11 @@ export default {
         }
       }
       this.select(selection, row)
+      console.log('查看页面数据', this, gridParams.options, this.row, this.selection)
     },
     // 取消选择记录
     selectAllRecord(selection) {
+      console.log('selectAllRecord====>', selection)
       let selectAllRecordsEventResult = true
       const gridParams = store.get(this.code)
       if (isHasOptionFunction('selectAllRecords', this.code)) {
@@ -3058,8 +3072,22 @@ export default {
       }
       this.selectAll(selection)
     },
+    cardSelectionChangeEvent(newSelection) {
+      try {
+        this.$refs.superGrid.clearSelection()
+        for(const i in newSelection) {
+          const row = newSelection[i]
+          this.$refs.superGrid.toggleRowSelection(row, true)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+      this.selectionChangeEvent(newSelection)
+    },
     // 选择记录发生改变时
     selectionChangeEvent(newSelection) {
+      this.selectionTableData = newSelection
+      console.log('selectionChangeEvent====>', newSelection)
       const gridParams = store.get(this.code)
       if (isHasOptionFunction('selectionChange', this.code)) {
         gridParams.options.selectionChange.call(this, {
@@ -3175,6 +3203,57 @@ export default {
       } else {
         return prop
       }
+    },
+    getColumnComponentData(column, myCustomFormatter) {
+      try {
+        // if (!['[object Object]'].includes(Object.prototype.toString.call(column))) throw new Error('no column');
+        const componentType = this.getComponentType(column)
+        return {
+          column,
+          getComponentType: this.getComponentType,
+          customFormat: myCustomFormatter,
+          // props + attrs 参数
+          $bind: {
+            column,
+            'ref': column.prop,
+            // 'is': componentType,
+            'is-sql': this.isSql,
+            'list-code': this.code,
+            'new-width': this.newWidth,
+            'drag-column-prop': this.dragColumnProp,
+            'right-click-menu-arr': this.options?.rightClickMenuArr,
+            'table-name': this.tableName,
+            'page-code': this.pageCode,
+            'list-name': this.listName,
+            'options': this.options,
+            'current-page': this.currentPage,
+            'pagination': this.pagination,
+            'grid-data': this.isSubTableShowPage ? this.subTableData : this.gridData,
+            'page-grid-data': this.isSubTableShowPage ? this.getSubTableGridData(this.subTableData) : this.gridData,
+            ...(myCustomFormatter ? {
+              'custom-format': ['GroupColumn'].includes(componentType) ? myCustomFormatter : myCustomFormatter[column.prop],
+            } : {
+              'is-line-edit': this.lineEdit?.editable ?? false,
+              'list-toolbar-form-data': this.listToolbarFormData,
+            }),
+          },
+          // 事件绑定
+          $on: {
+            'open-page': this.openPageDialog,
+            'refresData': this.refresData,
+            'refresh-list': this.refreshList,
+            'refresPortData': this.refresPortData,
+            'refresPortsData': this.refresPortsData,
+            'refresMainTableFields': this.refresMainTableFields,
+            'prohibitToEdit': this.prohibitToEdit,
+          }
+        }
+      } catch (error) {
+        console.error(error)
+        return {
+          column
+        }
+      }
     }
   },
   emits: [

package/src/mixins/resizeMixin.js

@@ -0,0 +1,49 @@
+export default {
+    data() {
+        const element = document.querySelector('.amb-design-board');
+        let designObserver
+        if (element) {
+            this.designObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    console.log(entry);
+                    this.handleDesignResize(entry?.['target'])
+                }
+            });
+            designObserver.observe(element);
+        }
+        return {
+            windowWidth: designObserver ? element.clientWidth : window.innerWidth,
+            windowHeight: designObserver ? element.clientHeight : window.innerHeight,
+            designObserver
+        };
+    },
+    computed: {
+        isMobileResize() {
+            return (this.windowWidth ?? 0) <= 768
+        }
+    },
+    mounted() {
+        if (!this.designObserver) {
+            window.addEventListener('resize', this.handleWindowResize);
+        }
+    },
+    beforeDestroy() {
+        if (this.designObserver) {
+            this.designObserver.disconnect();
+        } else {
+            window.removeEventListener('resize', this.handleWindowResize);
+        }
+    },
+    methods: {
+        handleWindowResize() {
+            this.windowWidth = window.innerWidth;
+            this.windowHeight = window.innerHeight;
+        },
+        handleDesignResize(element) {
+            if (element) {
+                this.windowWidth = element.clientWidth;
+                this.windowHeight = element.clientHeight;
+            }
+        }
+    }
+};

package/src/store/modules/app.js

@@ -1,3 +1,5 @@
+import System from "@zxing/library/esm/core/util/System"
+
 const app = {
   state: {
     sidebar: {
@@ -7,8 +9,20 @@ const app = {
     device: 'desktop',
     preventReclick: false,
     whiteList: [],
+    systemWidth: [],
+    windowWidth: window.innerWidth,
+    windowHeight: window.innerHeight,
+    targetDomWidth: 0,
+    isModel: false,
   },
   mutations: {
+    updateWindowSize(state, { width, height }) {
+      state.windowWidth = width;
+      state.windowHeight = height;
+    },
+    updateTargetDomWidth(state, width) {
+        state.targetDomWidth = width;
+    },
     toggleSidebar: (state) => {
       if (state.sidebar.opened) {
         window.sessionStorage.setItem('sidebarStatus', 1)
@@ -36,6 +50,18 @@ const app = {
     },
   },
   actions: {
+    startListeningToResize({ commit }) {
+        const handleResize = () => {
+            commit('updateWindowSize', {
+                width: window.innerWidth,
+                height: window.innerHeight
+            });
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    },
     toggleSidebar: ({ commit }) => {
       commit('toggleSidebar')
     },

package/src/styles/display-layout.scss

@@ -32,3 +32,135 @@
     box-shadow: 0px 1px 8px 0px #00000019;
   }
 }
+
+[overflow-wrap] {
+  word-wrap: break-word; 
+  overflow-wrap: break-word;
+}
+
+.yx-flex-wrap {
+  display: flex;
+  justify-content: flex-start;
+  &[vertical] {
+    flex-direction: column;
+  }
+  &[justify='space-between'] {
+    justify-content: space-between;
+  }
+  &[align='center'] {
+    align-items: center;
+  }
+  &[wrap] {
+    flex-wrap: wrap;
+  }
+}
+
+.el-descriptions {
+  &[layout='form'] {
+    .el-descriptions__cell {
+      display: flex;
+      gap: 10px;
+      .el-descriptions__label {
+        margin: 0;
+        max-width: 40%;
+        flex: 0 0 auto;
+      }
+      .el-descriptions__content {
+        flex: 1 1 auto;
+        word-wrap: break-word; 
+        overflow-wrap: break-word;
+
+        .ellipsis {
+          word-wrap: break-word !important; 
+          overflow-wrap: break-word !important; 
+          width: auto !important;
+          white-space: inherit !important;
+        }
+      }
+      @media (max-width: 450px) {
+        & {
+          flex-direction: column;
+        }
+        .el-descriptions__label {
+          width: 100% !important;
+          max-width: 100%;
+        }
+      }
+    }
+  }
+}
+
+.yx-card-main {
+  &.is-checked {
+    border-color: #409eff;
+  }
+  &[header-padding] {
+    & > .el-card__header {
+      padding: 0 !important;
+    }
+  }
+  &[body-padding] {
+    & > .el-card__body {
+      padding: 0 !important;
+    }
+  }
+  .el-card__header {
+    & > .yx-flex-wrap {
+      flex: 1 1 auto;
+    }
+  }
+}
+
+[scrollable-main] {
+  position: relative;
+  &:has(.el-scrollbar__wrap:has(::-webkit-scrollbar-thumb:vertical)):not(:has(.el-scrollbar__wrap:has(:first-child:has(+ *))))::before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 10px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
+    pointer-events: none;
+  }
+  
+  /* 底部阴影 */
+  &:has(.el-scrollbar__wrap:has(::-webkit-scrollbar-thumb:vertical)):not(:has(.el-scrollbar__wrap:has(:last-child:has(+ *))))::after {
+    content: " ";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 10px;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
+    pointer-events: none;
+  }
+}
+
+[loading-rotate] {
+  animation: loading-rotate 2s linear infinite;
+}
+
+@keyframes loading-rotate {
+  to {
+    transform:rotate(360deg)
+  }
+}
+
+.isHideTable {
+  opacity: 0 !important;
+  z-index: -99 !important;
+  width: 0px !important;
+  height: 0px !important;
+  overflow: hidden !important;
+}
+
+.xs-hidden-opacity-only {
+  @media (max-width: 768px) {
+    opacity: 0 !important;
+    z-index: -99 !important;
+    width: 0px !important;
+    height: 0px !important;
+    overflow: hidden !important;
+  }
+}

package/src/styles/index.scss

@@ -19,6 +19,7 @@
 @import "./table.scss";
 @import './theme/tiffany-blue-mobile/index.scss';
 @import './theme/tiffany-blue-mobile/sidebar.scss';
+@import 'element-plus/theme-chalk/display.css';
 
 body {
   overflow: hidden;

package/src/utils/guid.js

@@ -0,0 +1,13 @@
+/**
+ * 获取4位随机数
+ */
+export function getS4(a, b, c, d) {
+  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+}
+
+/**
+ * 生成GuId
+ */
+export function getGuId(data = `{s}{s}-{s}-{s}-{s}-{s}{s}{s}`) {
+  return data.replace(/{(y|m|d|h|i|s|a)+}/g, getS4)
+}

package/vite.config.js

@@ -2,14 +2,17 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import path from "path";
 import { terser } from 'rollup-plugin-terser'
+import vueJsx from '@vitejs/plugin-vue-jsx';
+
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [
-    vue(),  
+    vue(),
+    vueJsx(),
     terser({
       compress: {
-        drop_console: true,
-        drop_debugger: true
+        drop_console: ['production'].includes(mode),
+        drop_debugger: ['production'].includes(mode),
       },
       output: {
         // 对于console.error，不做任何处理
@@ -26,7 +29,7 @@ export default defineConfig({
     }, //库编译模式配置
     rollupOptions: {
       // 确保外部化处理那些你不想打包进库的依赖
-      external: ["vue"],
+      external: ["vue", "jsx"],
       output: {
         // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
         globals: {
@@ -40,11 +43,12 @@ export default defineConfig({
         },
       },
     }, // rollup打包配置
+    sourcemap: mode === 'development'
   },
   // ...其他配置项
   resolve: {
     // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
   }
-});
+}));