agilebuilder-ui 1.1.22 → 1.1.23

package/packages/super-grid/src/search-form-advancedQuery.vue

@@ -820,6 +820,10 @@ export default {
 </script>
 
 <style scoped>
+.grid-search-form {
+	overflow: auto;
+}
+
 .grid-search-form :deep(.el-form-item) {
 	margin-bottom: 0px;
 }

package/packages/super-grid/src/search-form-item.vue

@@ -1,10 +1,21 @@
 <template>
 	<el-form-item
-			:label-width="labelWidth ?? (column.querySetting ? getLabelWidth(column.querySetting) : '110px')"
+			:label-width="
+      column.querySetting ? getLabelWidth(column.querySetting) : '110px'
+    "
 			:prop="column.prop"
 	>
 		<template v-slot:label>
-			<span :title="(column.searchLabel ?? column.label).replace(/\\n/g, '</br>')" v-html="(column.searchLabel ?? column.label).replace(/\\n/g, '</br>')" />
+      <span
+		      v-if="column.searchLabel && column.searchLabel !== ''"
+		      :title="column.searchLabel.replace(/\\n/g, '</br>')"
+		      v-html="column.searchLabel.replace(/\\n/g, '</br>')"
+      />
+			<span
+					v-else
+					:title="column.label.replace(/\\n/g, '</br>')"
+					v-html="column.label.replace(/\\n/g, '</br>')"
+			/>
 		</template>
 		<span v-if="customComponent(column) === true">
       <component
@@ -273,10 +284,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		labelWidth: {
-			type: [String, Number, undefined],
-			default: undefined,
-		},
 	},
 	data() {
 		const customComponentNames = new Set()

package/packages/super-grid/src/search-form-open.vue

@@ -1,26 +1,56 @@
 <template>
-	<div v-resize="onResize" class="grid-search-row">
-		<el-row>
-			<el-col v-for="(column, index) of filterSearchableColumns" :key="index" :span="span">
-				<search-form-item
-					:label-width="labelWidth"
-					:search-form="searchForm"
-					:column="column"
-					:code="code"
-					:is-sql="isSql"
-					:table-name="tableName"
-					:is-join-table="isJoinTable"
-				/>
-			</el-col>
-			<el-col :span="span" :class="{ 'no-show-open': !isShowOpen, 'no-search-button-auto': isSearchButtonAuto  }">
+	<div>
+		<div class="grid-search-row">
+			<el-row v-for="r of rowNum" v-show="myOpen || r === 1" :key="r">
+				<el-col
+						v-for="n of fieldNum"
+						:key="n"
+						:xs="spanNum"
+						:sm="spanNum"
+						:md="spanNum"
+						:lg="spanNum"
+						:xl="spanNum"
+				>
+					<template
+							v-if="fieldNum * (r - 1) + (n - 1) < searchableColumns.length"
+					>
+						<!--初始进入台账页面时 或 展开时显示按钮--->
+						<search-form-item
+								v-show="(!myOpen && r === 1 && n < fieldNum) || myOpen"
+								:search-form="searchForm"
+								:column="searchableColumns[fieldNum * (r - 1) + (n - 1)]"
+								:code="code"
+								:is-sql="isSql"
+								:table-name="tableName"
+								:is-join-table="isJoinTable"
+						/>
+					</template>
+					<!--初始进入台账页面时 或 展开时显示按钮--->
+					<search-button
+							v-if="
+              (!myOpen && r === 1 && n === fieldNum) ||
+              (myOpen && !isButtonNewRow && r === rowNum && n === fieldNum)
+            "
+							ref="searchBtnOpen"
+							:is-open="myOpen"
+							@submit-form="$emit('submit-form')"
+							@reset-form="$emit('reset-form')"
+							@save-condition="$emit('save-condition')"
+							@open-fold="openFold"
+					/>
+				</el-col>
+			</el-row>
+		</div>
+		<!--按钮单独一行放置时--->
+		<el-row v-if="isShowNewBtnRow">
+			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
 				<search-button
-					ref="searchBtnOpen"
-					:is-open="myOpen"
-					:is-show-open="isShowOpen"
-					@submit-form="$emit('submit-form')"
-					@reset-form="$emit('reset-form')"
-					@save-condition="$emit('save-condition')"
-					@open-fold="openFold"
+						ref="searchBtnOpen"
+						:is-open="myOpen"
+						@submit-form="$emit('submit-form')"
+						@reset-form="$emit('reset-form')"
+						@save-condition="$emit('save-condition')"
+						@open-fold="openFold"
 				/>
 			</el-col>
 		</el-row>
@@ -30,8 +60,6 @@
 import searchMethods from './search-methods'
 import SearchFormItem from './search-form-item.vue'
 import SearchButton from './search-button.vue'
-import storeVuex from '../../../src/store';
-
 export default {
 	name: 'SearchFormOpen',
 	components: {
@@ -86,66 +114,42 @@ export default {
 		},
 	},
 	data() {
-		return {
-			rowWidth: undefined, // 当前模块宽度
-			maxLength: undefined,
-			minLength: undefined,
-			myOpen: this.isOpen ?? false
+		let isButtonNewRow = false
+		let isShowNewBtnRow = false
+		const myOpen = this.isOpen
+		if (
+				this.searchableColumns.length % this.fieldNum === 0 ||
+				this.rowNum > 6
+		) {
+			// 表示查询字段正好占满行，或行数大于6时，需要另起一行放查询按钮
+			isButtonNewRow = true
+			isShowNewBtnRow = true
 		}
-	},
-	computed: {
-		// 是否展示 展开按钮
-		isShowOpen() {
-			return this.showColumn < this.searchableColumns.length + 1
-		},
-		// 是否开启按钮右边固定
-		isSearchButtonAuto() {
-			return (this.showColumn - this.searchableColumns.length) > 1
-		},
-		filterSearchableColumns() {
-			return this.searchableColumns.filter((_, index) => !this.myOpen && this.isShowOpen && index > (this.showColumn - 2) ? false : true)
-		},
-		// 检测label 最大宽度
-		labelWidth() {
-			try {
-				if (!this.maxLength || !this.minLength) return ''
-				if (this.maxLength >= 10) return 82
-				if (this.maxLength === this.minLength && this.minLength <= 4) return 45
-				return 72
-			} catch (error) {
-				return ''
-			}
-		},
-		// 列布局
-		span() {
-			return 24 / this.showColumn
-		},
-		// 显示多少列
-		showColumn() {
-			if (this.rowWidth) {
-				if (this.rowWidth >= 1500) return 4
-				if (this.rowWidth <= 768) return 2
-			}
-			return 3
+		if (isButtonNewRow && !myOpen) {
+			// 需要另起一行，但是当前是收起状态，暂不显示最后一行按钮
+			isShowNewBtnRow = false
+		}
+		return {
+			isButtonNewRow,
+			isShowNewBtnRow,
+			myOpen,
 		}
 	},
 	watch: {
-		filterSearchableColumns() {
-			const combinedArray = this.filterSearchableColumns.map(({ label, searchLabel }) => ( (searchLabel ?? label)?.replace(/[\u4e00-\u9fa5]/g, '**') ?? '').length)
-			this.maxLength = Math.max(...combinedArray)
-			this.minLength = Math.max(...combinedArray)
-		},
 		myOpen() {
+			if (this.isButtonNewRow) {
+				if (!this.myOpen) {
+					// 需要另起一行，但是当前是收起状态，暂不显示最后一行按钮
+					this.isShowNewBtnRow = false
+				} else {
+					// 需要另起一行，当前是展开状态，显示最后一行按钮
+					this.isShowNewBtnRow = true
+				}
+			}
 		},
 	},
 	methods: {
 		...searchMethods,
-		onResize(entry) {
-			this.rowWidth = entry.contentRect.width
-			// console.log('新尺寸:', entry.contentRect)
-			// console.log('宽度:', entry.contentRect.width)
-			// console.log('高度:', entry.contentRect.height)
-		},
 		openFold(isOpen) {
 			this.myOpen = isOpen
 			this.$emit('open-fold', isOpen)
@@ -166,5 +170,9 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+.grid-search-row {
+	overflow: auto;
+	max-height: 320px;
+}
 </style>

package/packages/super-grid/src/search-form-ordinarySearch.vue

@@ -1,32 +1,34 @@
 <template>
-	<el-form
-		v-if="searchableColumns.length > 0"
-		ref="searchForm"
-		:model="searchForm"
-		:rules="rules"
-		class="grid-search-form"
-		label-position="right"
-		size="default"
-	>
-		<search-form-open
-			ref="searchFormContent"
-			:code="code"
-			:field-num="fieldNum"
-			:is-join-table="isJoinTable"
-			:is-open="isOpen"
-			:is-sql="isSql"
-			:load-complete-query="loadCompleteQuery"
-			:row-num="rowNum"
-			:search-form="searchForm"
-			:searchable-columns="searchableColumns"
-			:span-num="spanNum"
-			:table-name="tableName"
-			@submit-form="$emit('submit-form')"
-			@reset-form="$emit('reset-form')"
-			@save-condition="$emit('save-condition')"
-			@open-fold="openFold"
-		/>
-	</el-form>
+	<div>
+		<el-form
+				v-if="searchableColumns.length > 0"
+				ref="searchForm"
+				:model="searchForm"
+				:rules="rules"
+				class="grid-search-form"
+				label-position="right"
+				size="default"
+		>
+			<search-form-open
+					ref="searchFormContent"
+					:code="code"
+					:field-num="fieldNum"
+					:is-join-table="isJoinTable"
+					:is-open="isOpen"
+					:is-sql="isSql"
+					:load-complete-query="loadCompleteQuery"
+					:row-num="rowNum"
+					:search-form="searchForm"
+					:searchable-columns="searchableColumns"
+					:span-num="spanNum"
+					:table-name="tableName"
+					@submit-form="$emit('submit-form')"
+					@reset-form="$emit('reset-form')"
+					@save-condition="$emit('save-condition')"
+					@open-fold="openFold"
+			/>
+		</el-form>
+	</div>
 </template>
 
 <script>
@@ -191,6 +193,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.grid-search-form {
+	overflow: auto;
+}
+
 .grid-search-form {
 	:deep(.el-form-item) {
 		margin-bottom: 0px;

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="amb-agilebuilder-search-form-view">
+	<div>
 		<el-drawer v-if="isMobile" v-model="isShowMobileForm" :close-on-click-modal="false" :close-on-press-escape="false" direction="rtl" size="50%" @close="closeMobileSearch()">
 			<div class="search-condition-mobile">
 				<search-condition-list
@@ -26,7 +26,7 @@
 				@save-condition="saveCondition()"
 			/>
 		</el-drawer>
-		<template v-else>
+		<div v-else>
 			<search-condition-list
 					v-if="searchConditions.length > 0"
 					ref="searchConditionList"
@@ -114,7 +114,7 @@
 					</el-button>
 				</span>
 			</div>
-		</template>
+		</div>
 			<search-condition-input
 				v-if="isShowSearchCondition"
 				@close="saveConditionValue"
@@ -815,6 +815,10 @@ export default {
 </script>
 
 <style scoped>
+.grid-search-form {
+	overflow: auto;
+}
+
 .grid-search-form :deep(.el-form-item) {
 	margin-bottom: 0px;
 }
@@ -829,9 +833,6 @@ export default {
 	width: 100%;
 }
 
-.amb-agilebuilder-search-form-view:empty {
-	display: none;
-}
 
 .search-condition-mobile {
 	padding-bottom: 10px;

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

@@ -4,7 +4,7 @@
     type="selection"
     :label="column.label"
     :fixed="fixed"
-    :width="60"
+    :width="column.width ? column.width : '50'"
   />
 </template>
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div data-v="1.0.0" class="super-grid-main-view" :style="subTableStyle" @click="onClickTableMain">
+  <div data-v="1.0.0" class="super-grid-main-view" :style="subTableStyle">
     <search-form
       v-if="!isFormSubTable && hasLoadedColumns && query && query.showType === 'embedded'"
       v-show="!isMobile || (isMobile && isShowMobileSearch)"
@@ -35,7 +35,7 @@
       @reset="resetSearch"
       @close="closeSearchFormDialog"
     />
-    <div ref="superGridMain" :class="'grid-area ' + code"  class="super-grid-main-body">
+    <div :class="'grid-area ' + code"  class="super-grid-main-body">
       <MobileCard
         v-if="isShowCard"
         :selection="selectionTableData"
@@ -72,8 +72,8 @@
         :header-cell-style="changeHeaderStyle"
         :highlight-current-row="true"
         :span-method="rowSpan"
-        :max-height="hasMaxHeight"
-        :height="hasTableHeight"
+        :max-height="maxHeight"
+        :height="tableHeight"
         :class="tableClass"
         :tree-props="getTreeProps(parentProp, isSql, isLazy, dataSourceType)"
         class="super-grid-main-table-view"
@@ -111,7 +111,7 @@
             :title="$t('superGrid.columnConfig')"
             @click="configColumns"
           >
-            <el-icon-setting style="width: 16px; height: 16px; color: #777; cursor: pointer;" />
+            <el-icon-setting style="width: 1em; height: 1em; color: #777; cursor: pointer;" />
           </div>
 
           <div
@@ -120,7 +120,7 @@
             :title="$t('superGrid.refresh')"
             @click="refreshGridData"
           >
-            <el-icon-refresh style="width: 16px; height: 16px; color: #777; cursor: pointer;" />
+            <el-icon-refresh style="width: 1em; height: 1em; color: #777; cursor: pointer;" />
           </div>
 
         </div>
@@ -453,21 +453,6 @@ export default {
     }
   },
   computed: {
-    // 限制高度最低值
-    hasMaxHeight() {
-      if (this.maxHeight) {
-        return this.maxHeight <= 100 ? 100 : this.maxHeight
-      }
-      return undefined
-    },
-
-    // 是指固钉高度最低值
-    hasTableHeight() {
-      if (this.maxHeight) {
-        return this.tableHeight <= 100 ? 100 : this.tableHeight
-      }
-      return undefined
-    },
     isMobileListCard() {
       return storeVuex.getters.isMobileListCard
     },
@@ -904,10 +889,6 @@ export default {
     ...publicMethods,
     ...superGridService,
     ...apis,
-    onClickMain() {
-      // 清理编辑选中
-      storeVuex?.dispatch?.('clearAllEditing')
-    },
     isDeleteChange(boole) {
       this.isDelete = boole
     },
@@ -1322,11 +1303,6 @@ export default {
     },
     changeRowStyle(param) {
       // param的格式：{row, rowIndex}
-
-      // 新增表格编辑背景颜色
-      if (param.row.$editing) {
-        return { background: `var(--el-table-row-hover-bg-color)` }
-      }
       const gridParams = store.get(this.code)
       if (this.lineEdit && this.lineEdit.editable) {
         if (param.rowIndex === gridParams.$rowIndex) {
@@ -3328,117 +3304,16 @@ export default {
     height: 100% !important;
   }
 }
-
-
-.flex-gap-15 {
-  display: flex;
-  gap: var(--layout-form-flex-gap, 15px);
-  align-items: center;
-
-  & .el-button {
-    margin: 0;
-    & + .el-button {
-      margin: 0;
-    }
-  }
-}
-
 .super-grid-main-view ::v-deep {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   align-items: stretch;
   max-width: 100%;
+  flex: 1 1 auto;
   gap: var(--super-grid-main-view-gap, 10px);
 
   .super-grid-main-search-view {
     width: 100%;
-    .grid-search-row {
-      @extend .flex-gap-15;
-      flex-wrap: wrap;
-      width: 100%;
-    }
-    [load-complete-query] {
-      @extend .flex-gap-15;
-      flex-direction: column;
-    }
-    .el-row {
-      @extend .flex-gap-15;
-      flex-wrap: wrap;
-      margin: 0;
-      padding: 0;
-      flex: 1 1 auto;
-      width: 100%;
-      align-items: self-start;
-
-      .el-col {
-        @extend .flex-gap-15;
-        padding: 0;
-        flex: 1 1 calc((100% - var(--layout-form-flex-gap, 15px) * 2) / 3);
-        max-width: calc((100% - var(--layout-form-flex-gap, 15px) * 2) / 3);
-
-        &.el-col-6 {
-          flex: 1 1 calc((100% - var(--layout-form-flex-gap, 15px) * 3) / 4);
-          max-width: calc((100% - var(--layout-form-flex-gap, 15px) * 3) / 4);
-        }
-
-        &.el-col-8 {
-          flex: 1 1 calc((100% - var(--layout-form-flex-gap, 15px) * 2) / 3);
-          max-width: calc((100% - var(--layout-form-flex-gap, 15px) * 2) / 3);
-        }
-
-        &.el-col-12 {
-          flex: 1 1 calc((100% - var(--layout-form-flex-gap, 15px) * 1) / 2);
-          max-width: calc((100% - var(--layout-form-flex-gap, 15px) * 1) / 2);
-        }
-
-        .el-form-item {
-          width: 100%;
-          align-items: center;
-
-          .el-form-item__label {
-            display: block;
-            width: 82px;
-            height: auto;
-            line-height: 1.2em;
-            word-wrap: break-word !important;
-            max-height: 2.4em;
-            text-align: left;
-            word-break: normal;
-            white-space: normal;
-          }
-
-          & > .el-form-item__content {
-            & > .el-select,& > .el-input, & > .el-textarea {
-              width: calc(100% - 1px);
-            }
-          }
-        }
-
-        &:has(.search-button) {
-          &:not(.no-show-open) {
-            margin-left: auto;
-            margin-top: auto;
-            flex: 1 1 auto;
-            max-width: none;
-          }
-
-          &.no-search-button-auto {
-            .search-button {
-              margin-left: var(--layout-form-flex-gap, 15px);
-              margin-top: 0;
-              margin-right: auto;
-            }
-          }
-        }
-      }
-    }
-
-    .search-button {
-      @extend .flex-gap-15;
-      gap: var(--super-grid-main-btn-view-gap, 10px);
-      margin-left: auto;
-      margin-top: auto;
-    }
   }
   .el-table {
     .el-scrollbar__bar {
@@ -3456,7 +3331,6 @@ export default {
     flex-wrap: wrap;
     align-items: stretch;
     max-width: 100%;
-    flex: 1 1 auto;
     gap: var(--super-grid-main-view-gap, 10px);
 
     .super-grid-main-table-view {
@@ -3478,11 +3352,6 @@ export default {
       flex-wrap: wrap;
       gap: var(--super-grid-main-view-gap, 10px);
       width: 100%;
-
-      .el-pagination {
-        flex-wrap: wrap;
-        gap: var(--layout-form-flex-gap, 15px) 0;
-      }
     }
   }
 }

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

@@ -201,7 +201,6 @@
       </div>
       <el-pagination
         v-if="pagination"
-        background
         v-model:current-page="currentPage"
         v-model:page-size="pagination.pageSize"
         :layout="pagination.layout"

package/src/i18n/langs/cn.js

@@ -88,12 +88,6 @@ const cn = {
     },
     // 列表组件
     superGrid: {
-        rowEditMessageBox: {
-            title: "操作确认",
-            content: "当前行有未保存的修改，是否进行保存修改切换？",
-            confirmButton: "保存修改",
-            cancelButton: "放弃修改"
-        },
         columnConfig: '字段配置',
         pleaseSaveOrCancelEditingLine: '请先保存或撤销编辑第 {row} 行数据',
         pleaseSaveLine: '请先保存第 {row} 行数据',

package/src/i18n/langs/en.js

@@ -89,12 +89,6 @@ const en = {
         mustFill: '{label} must fill'
     },
     superGrid: {
-        rowEditMessageBox: {
-            title: "Operation Confirmation",
-            content: "There are unsaved modifications in the current row. Do you want to save the modifications and switch?",
-            confirmButton: "Save edit",
-            cancelButton: "Discard edit"
-        },
         columnConfig: 'Column Config',
         pleaseSaveOrCancelEditingLine:
             'Please Save Or Cancel Editing Line {row} Data First',

package/src/store/getters.js

@@ -5,13 +5,6 @@ const getters = {
   windowHeight: (state) => state.app.windowHeight,
   isMobileResize: (state) => state.app.isMobileResize,
   isMobileListCard: (state) => state.app.windowWidth <= 768, // 是否显示卡片
-  tableEditingDatas: (state) => state.table.tableEditingDatas,
-  isConfigEditing: (state) => state.table.tableEditingDatas.length > 0,
-  isEditing: (state) => ($rowDataGuId) => state.table.tableEditingDatas.includes($rowDataGuId),
-  isRowEditing: (state) => ($rowGuId) => state.table.tableEditingDatas.some(v => v.includes($rowGuId)),
-  theme: (state) => state.system.theme, // 主题
-  navExpanded: (state) => state.system.navExpanded, // 是否展开导航
-  locale: (state) => state.system.locale, // 国际化
   token: (state) => state.user.token,
   name: (state) => state.user.name,
   // routers: state => state.permission.routers,

package/src/store/index.js

@@ -1,9 +1,7 @@
 import * as Vue from 'vue'
 import * as Vuex from 'vuex'
 import app from './modules/app'
-import table from './modules/table'
 import user from './modules/user'
-import system from './modules/system'
 import permission from './modules/permission'
 import tabContent from './modules/tab-content'
 import getters from './getters'
@@ -11,9 +9,7 @@ import getters from './getters'
 const store = Vuex.createStore({
   modules: {
     app,
-    table,
     user,
-    system,
     permission,
     tabContent,
   },