agilebuilder-ui 1.0.0

package/packages/super-grid/src/public-methods.js

@@ -0,0 +1,30 @@
+const publicMethods = {
+  clearSelection: function () {
+    this.$refs.superGrid.clearSelection()
+  },
+  toggleRowSelection: function (row, selected) {
+    this.$refs.superGrid.toggleRowSelection(row, selected)
+  },
+  toggleAllSelection: function () {
+    this.$refs.superGrid.toggleAllSelection()
+  },
+  toggleRowExpansion: function (row, expanded) {
+    this.$refs.superGrid.toggleRowExpansion(row, expanded)
+  },
+  setCurrentRow: function (row) {
+    this.$refs.superGrid.setCurrentRow(row)
+  },
+  clearSort: function () {
+    this.$refs.superGrid.clearSort()
+  },
+  clearFilter: function (columnKey) {
+    this.$refs.superGrid.clearFilter(columnKey)
+  },
+  doLayout: function () {
+    this.$refs.superGrid.doLayout()
+  },
+  sort: function (prop, order) {
+    this.$refs.superGrid.sort(prop, order)
+  },
+}
+export default publicMethods

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

@@ -0,0 +1,193 @@
+<template>
+  <!--将@click改为@mousedown.native是因为操作列保存按钮时事件和input等组件的@blur冲突，导致保存需要保存两次，因为
+      @blur先于@click执行的，所以只会执行@blur，@click就失效了，@mousedown是先于@blur执行的-->
+  <span :style="myStyle">
+    <span v-if="isShowButton()">
+      <span v-if="label">
+        <!-- <el-tooltip :content="label" class="item" effect="dark" placement="top-start"> -->
+        <component
+          v-bind="operationSetting"
+          :is="elementType"
+          v-if="operationSetting.permission"
+          v-permission="operationSetting.permission"
+          :disabled="preventReclick"
+          @mousedown="onClickFun(operationSetting)"
+          >{{ label }}</component
+        >
+        <component
+          v-bind="operationSetting"
+          :is="elementType"
+          v-else
+          :disabled="preventReclick"
+          @mousedown="onClickFun(operationSetting)"
+          >{{ label }}</component
+        >
+        <!-- </el-tooltip> -->
+      </span>
+      <span v-else>
+        <component
+          v-bind="operationSetting"
+          :is="elementType"
+          v-if="operationSetting.permission"
+          v-permission="operationSetting.permission"
+          :disabled="preventReclick"
+          @mousedown="onClickFun(operationSetting)"
+        />
+        <component
+          v-bind="operationSetting"
+          :is="elementType"
+          v-else
+          :disabled="preventReclick"
+          @mousedown="onClickFun(operationSetting)"
+        />
+      </span>
+    </span>
+  </span>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import customFormatter from './custom-formatter'
+import { analysisCondition } from '../../../src/utils/util'
+export default {
+  name: 'RowOperation',
+  props: {
+    editing: {
+      // 当前行是否是编辑行
+      type: Boolean,
+      default: false,
+    },
+    isShow: {
+      type: [Boolean, Function],
+      default: true,
+    },
+    onClick: {
+      type: Function,
+      default: function () {},
+    },
+    entity: {
+      type: Object,
+      default: null,
+    },
+    column: {
+      type: Object,
+      default: null,
+    },
+    rowIndex: {
+      type: Number,
+      default: null,
+    },
+    label: {
+      type: String,
+      default: null,
+    },
+    operationSetting: {
+      type: Object,
+      default: null,
+    },
+    operationIndex: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      elementType: 'el-button', // 组件标签，默认是按钮
+      myStyle: null, // 组件样式
+    }
+  },
+  computed: {
+    ...mapGetters(['preventReclick']),
+  },
+  created() {
+    if (
+      this.operationSetting.elementType &&
+      this.operationSetting.elementType === 'el-link'
+    ) {
+      this.operationSetting.type = 'primary'
+    }
+    if (
+      !this.operationSetting.elementType ||
+      this.operationSetting.elementType === 'el-button'
+    ) {
+      this.operationSetting.size = 'small'
+    }
+    if (this.operationSetting.style) {
+      // 等于配置的样式
+      this.myStyle = this.operationSetting.style
+    } else if (
+      this.operationIndex !== 0 &&
+      (this.operationSetting.elementType === undefined ||
+        this.operationSetting.elementType === 'el-button')
+    ) {
+      // 如果不是第0个元素，且是按钮时，添加左边距10px，使按钮不紧挨着
+      this.myStyle = { marginLeft: '10px' }
+    }
+    if (this.operationSetting.elementType) {
+      this.elementType = this.operationSetting.elementType
+    }
+    // if (!this.operationSetting.icon) {
+    //   if (this.operationSetting.code === 'lineEditUpdate') {
+    //     this.operationSetting.icon = 'el-icon-edit'
+    //   } else if (this.operationSetting.code === 'lineEditSave') {
+    //     this.operationSetting.icon = 'el-icon-check'
+    //   } else if (this.operationSetting.code === 'lineEditDelete') {
+    //     this.operationSetting.icon = 'el-icon-delete'
+    //   } else if (this.operationSetting.code === 'restoreEdit') {
+    //     this.operationSetting.icon = 'el-icon-circle-close'
+    //   } else if (this.operationSetting.code === 'viewDetail') {
+    //     this.operationSetting.icon = 'el-icon-view'
+    //   }
+    // }
+  },
+  methods: {
+    onClickFun(button) {
+      customFormatter.onClickFun(
+        this.entity,
+        this.column,
+        this.onClick,
+        this.rowIndex,
+        button
+      )
+    },
+    isShowButton() {
+      // const start = new Date().getTime()
+      const val = customFormatter.isShowButtonFun(
+        this.entity,
+        this.column,
+        this.isShow,
+        this.rowIndex
+      )
+      if (this.operationSetting.buttonDisplayConditionsList) {
+        const displayJudgment = JSON.stringify(
+          this.operationSetting.buttonDisplayConditionsList
+        )
+        return analysisCondition(
+          displayJudgment,
+          this.entity,
+          {},
+          {},
+          true,
+          null,
+          null
+        )
+      }
+
+      if (val) {
+        if (this.editing) {
+          if (this.operationSetting.code === 'lineEditUpdate') {
+            return false
+          }
+        } else {
+          if (this.operationSetting.code === 'restoreEdit') {
+            return false
+          }
+        }
+      }
+      // const end = new Date().getTime()
+      // console.log('---super-grid--isShowButtonFun--time1=', (end - start))
+      return val
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,79 @@
+<template>
+	<div class="search-button" style="text-align: right">
+		<!-- :loading="loading" -->
+		<el-button class="button--default" size="default" @click="$emit('save-condition')">
+			{{ $t('superGrid.saveCondition') }}
+		</el-button>
+		<el-button :loading="loading" class="button--default" size="default" @click="resetForm">
+			{{ $t('imatrixUIPublicModel.reset') }}
+		</el-button>
+		<el-button
+				:loading="loading"
+				size="default"
+				type="primary"
+				@click="submitForm"
+		>
+			{{ $t('imatrixUIMessage.search') }}
+		</el-button>
+		<el-button
+				:icon="isMyOpen ? CaretTop : CaretBottom"
+				link
+				size="default"
+				@click="openFold"
+		>
+			{{ isMyOpen ? $t('superGrid.fold') : $t('superGrid.open') }}
+		</el-button>
+		<!-- <span v-if="advancedQuery !== null && advancedQuery!== undefined && advancedQuery === true && normalQuery !== null && normalQuery!== undefined && normalQuery === true" style="margin-left:10px">
+								<el-button v-if="searchType === 'advanced'" size="default" @click="searchType = 'normal'">
+									{{ $t('imatrixUIPublicModel.switchToNormalQuery') }}
+								</el-button>
+								<el-button v-if="searchType === 'normal'" size="default" @click="searchType = 'advanced'">
+									{{ $t('imatrixUIPublicModel.switchToAdvancedQuery') }}
+								</el-button>
+							</span> -->
+	</div>
+</template>
+
+<script>
+import {$emit} from '../../utils/gogocodeTransfer'
+import {CaretBottom, CaretTop} from '@element-plus/icons-vue'
+import {shallowRef} from "vue";
+
+export default {
+	name: 'SearchButton',
+	props: {
+		isOpen: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		const isMyOpen = this.isOpen
+		return {
+			isMyOpen, // false表示折叠状态，应该显示“展开”,true表示当前是展开状态，应该显示“折叠”
+			loading: false,
+			CaretTop: shallowRef(CaretTop),
+			CaretBottom: shallowRef(CaretBottom)
+		}
+	},
+	methods: {
+		openFold() {
+			this.isMyOpen = !this.isMyOpen
+			$emit(this, 'open-fold', this.isMyOpen)
+		},
+		submitForm() {
+			this.loading = true
+			$emit(this, 'submit-form')
+		},
+		resetForm() {
+			this.loading = true
+			$emit(this, 'reset-form')
+		},
+		// 加载完毕
+		searchComplete() {
+			this.loading = false
+		},
+	},
+	emits: ['save-condition', 'open-fold', 'submit-form', 'reset-form'],
+}
+</script>

package/packages/super-grid/src/search-condition-input.vue

@@ -0,0 +1,74 @@
+<template>
+	<div>
+		<el-dialog
+				:close-on-click-modal="false"
+				:title="$t('superGrid.saveConditionTitle')"
+				append-to-body
+				model-value
+				@close="$emit('close')"
+				@closed="$emit('closed')"
+				@open="$emit('open')"
+				@opend="$emit('opend')"
+		>
+			<el-form
+					ref="conditionForm"
+					:model="searchCondition"
+					label-position="left"
+					label-width="120px"
+					size="default"
+			>
+				<el-form-item
+						:label="$t('superGrid.searchConditionName')"
+						:rules="[
+            {
+              required: true,
+              message: this.$t('superGrid.pleaseInputSearchConditionName'),
+              trigger: 'blur',
+            },
+          ]"
+						prop="conditionName"
+				>
+					<el-input v-model="searchCondition.conditionName" size="default"/>
+				</el-form-item>
+			</el-form>
+			<template v-slot:footer>
+				<div class="dialog-footer" style="padding-bottom: 10px">
+					<el-button size="default" @click="$emit('close')">
+						{{ $t('imatrixUIPublicModel.cancel') }}
+					</el-button>
+					<el-button size="default" type="primary" @click="saveCondition">
+						{{ $t('imatrixUIPublicModel.sure') }}
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+import {$on, $off, $once, $emit} from '../../utils/gogocodeTransfer'
+
+export default {
+	name: 'SearchConditionInput',
+	data() {
+		return {
+			searchCondition: {
+				conditionName: null,
+			},
+		}
+	},
+	methods: {
+		saveCondition() {
+			this.$refs['conditionForm'].validate((valid) => {
+				if (valid) {
+					$emit(this, 'close', this.searchCondition.conditionName)
+				} else {
+					// console.log('error submit!!')
+					return false
+				}
+			})
+		},
+	},
+	emits: ['open', 'opend', 'close', 'closed', 'opend', 'close', 'closed'],
+}
+</script>

package/packages/super-grid/src/search-condition-list.vue

@@ -0,0 +1,70 @@
+<template>
+	<el-tabs
+			v-model="editConditionId"
+			type="card"
+			@tab-remove="removeCondition"
+			@tab-click="selectCondition"
+	>
+		<el-tab-pane
+				v-for="item in searchConditions"
+				:key="item.id"
+				:closable="item.queryType === pageQueryType"
+				:disabled="item.queryType !== pageQueryType"
+				:label="item.name"
+				:name="item.id + ''"
+		/>
+	</el-tabs>
+</template>
+
+<script>
+import {$emit} from '../../utils/gogocodeTransfer'
+
+export default {
+	name: 'SearchConditionList',
+	components: {},
+	props: {
+		searchConditions: {
+			type: Array,
+			default: null,
+		},
+		searchType: {
+			type: String,
+			default: null,
+		},
+	},
+	data() {
+		let pageQueryType = 'FIXED'
+		if (this.searchType && this.searchType === 'advanced') {
+			pageQueryType = 'CUSTOM'
+		}
+		return {
+			pageQueryType,
+			editConditionId: null, // 当前选择的条件id
+		}
+	},
+	watch: {
+		searchType: {
+			deep: true,
+
+			handler(newValue, oldValue) {
+				this.searchType = newValue
+				this.pageQueryType = 'FIXED'
+				if (newValue && newValue === 'advanced') {
+					this.pageQueryType = 'CUSTOM'
+				}
+			},
+		},
+	},
+	methods: {
+		removeCondition(conditionId) {
+			$emit(this, 'remove-condition', conditionId)
+		},
+		selectCondition(tabInfo, event) {
+			let tab = tabInfo.props
+			const conditionId = tab.name
+			$emit(this, 'select-condition', conditionId)
+		},
+	},
+	emits: ['remove-condition', 'select-condition'],
+}
+</script>