agilebuilder-ui 1.0.0

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

@@ -0,0 +1,429 @@
+<template>
+	<el-dialog
+			:close-on-click-modal="false"
+			:model-value="true"
+			:show-close="true"
+			:title="$t('superGrid.columnConfig')"
+			append-to-body
+			top="5vh"
+			width="50%"
+			@close="$emit('close')"
+			@closed="$emit('closed')"
+			@open="$emit('open')"
+			@opend="$emit('opend')"
+	>
+		<div class="operation-area">
+			<el-button size="default" type="primary" @click="saveConfig">
+				{{ $t('imatrixUIPublicModel.sure') }}
+			</el-button>
+			<el-button size="default" @click="resetConfig">
+				{{ $t('imatrixUIPublicModel.reset') }}
+			</el-button>
+			<el-button size="default" @click="$emit('close')">
+				{{ $t('imatrixUIPublicModel.cancel') }}
+			</el-button>
+			<span v-if="isDragColumn" style="padding-left: 10px; color: red"
+			>({{ $t('superGrid.dragColumnOrderMessage') }})</span
+			>
+		</div>
+		<el-table
+				v-if="hasLoaded"
+				:data="columns"
+				class="custom-config-elTable"
+				max-height="450"
+		>
+			<el-table-column
+					:label="$t('superGrid.label')"
+					property="label"
+					width="220"
+			>
+				<template v-slot="scope">
+          <span :title="scope.row.label" class="ellipsis cell--span">{{
+            scope.row.label
+          }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('superGrid.isShow')"
+					property="showType"
+					width="120"
+			>
+				<template v-slot="scope">
+					<el-select
+							v-model="scope.row.showType"
+							:disabled="isDisabledShow(scope.row)"
+							@change="changeShow(scope.row, $event)"
+					>
+						<el-option
+								:label="
+                isDisabledShow(scope.row)
+                  ? $t('superGrid.default')
+                  : $t('superGrid.show')
+              "
+								value="default"
+						/>
+						<el-option :label="$t('superGrid.hidden')" value="false"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('superGrid.isExportable')"
+					property="exportType"
+					width="120"
+			>
+				<template v-slot="scope">
+					<el-select
+							v-model="scope.row.exportType"
+							:disabled="isDisabledExport(scope.row)"
+							@change="changeExport(scope.row, $event)"
+					>
+						<el-option
+								:label="
+                isDisabledExport(scope.row)
+                  ? $t('superGrid.default')
+                  : $t('superGrid.export')
+              "
+								value="default"
+						/>
+						<el-option :label="$t('superGrid.unExport')" value="false"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column
+					v-if="isDragColumn"
+					:label="$t('superGrid.displayOrder')"
+					property="displayOrderType"
+					width="120"
+			>
+				<template v-slot="scope">
+					<el-input
+							v-if="
+              scope.row.displayOrderType &&
+              scope.row.displayOrderType === 'custom'
+            "
+							v-model="scope.row.displayOrder"
+							clearable
+							size="default"
+							@clear="clearDisplayOrder(scope.row)"
+					/>
+					<el-select v-else v-model="scope.row.displayOrderType">
+						<el-option :label="$t('superGrid.default')" value="default"/>
+						<el-option :label="$t('superGrid.custom')" value="custom"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('superGrid.width')"
+					property="widthType"
+					width="120"
+			>
+				<template v-slot="scope">
+					<el-input
+							v-if="scope.row.widthType && scope.row.widthType === 'custom'"
+							v-model="scope.row.width"
+							clearable
+							size="default"
+							@clear="clearWidth(scope.row)"
+					/>
+					<el-select v-else v-model="scope.row.widthType">
+						<el-option :label="$t('superGrid.default')" value="default"/>
+						<el-option :label="$t('superGrid.custom')" value="custom"/>
+					</el-select>
+				</template>
+			</el-table-column>
+		</el-table>
+	</el-dialog>
+</template>
+
+<script>
+import {$on, $off, $once, $emit} from '../../utils/gogocodeTransfer'
+import * as Vue from 'vue'
+import store from './store'
+import Sortable from 'sortablejs'
+
+export default {
+	name: 'ColumnsConfig',
+	props: {
+		listCode: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			columns: [],
+			hasLoaded: false,
+		}
+	},
+	created() {
+	},
+	mounted() {
+		this.listAllColumns().then((columns) => {
+			this.columns = columns
+			this.hasLoaded = true
+			this.$nextTick(() => {
+				this.dragColumnDisplayOrder()
+			})
+		})
+	},
+	methods: {
+		isDisabledShow(row) {
+			// 序号、复选框列不可以配置是否显示；占位符列不可以设置是否显示；当不是自定义的显示状态为false时，不可配置是否显示
+			return (
+					(row.prop && (row.prop === '$index' || row.prop === '$selection')) ||
+					row.custom === true ||
+					(row.showType && row.showType !== 'false' && row.show === false)
+			)
+		},
+		isDisabledExport(row) {
+			// 序号、复选框列不可以配置是否导出；占位符列不可以设置是否导出；当不是自定义的导出状态为false时，不可配置是否导出
+			return (
+					(row.prop && (row.prop === '$index' || row.prop === '$selection')) ||
+					row.custom === true ||
+					(row.exportType &&
+							row.exportType !== 'false' &&
+							row.exportable === false)
+			)
+		},
+		changeShow(row, value) {
+			if (value !== undefined && value === 'false') {
+				row.show = false
+			} else {
+				row.show = true
+			}
+		},
+		changeExport(row, value) {
+			if (value !== undefined && value === 'false') {
+				row.exportable = false
+			} else {
+				row.exportable = true
+			}
+		},
+		saveConfig() {
+			const params = {
+				settingColumns: this.columns,
+				listCode: this.listCode,
+			}
+			this.$http
+					.post(
+							window.$vueApp.config.globalProperties.baseAPI +
+							'/component/super-grids/setting-columns',
+							params
+					)
+					.then((data) => {
+						this.$message({
+							type: 'success',
+							message: this.$t('imatrixUIMessage.saveSuccessfully'),
+							showClose: true,
+						})
+						$emit(this, 'close', true)
+					})
+		},
+		resetConfig() {
+			this.$confirm(
+					this.$t('superGrid.whetherToConfirmReset'),
+					this.$t('imatrixUIMessage.tips'),
+					{
+						confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
+						cancelButtonText: this.$t('imatrixUIPublicModel.cancel'),
+						type: 'warning',
+					}
+			).then(() => {
+				const url =
+						window.$vueApp.config.globalProperties.baseAPI +
+						'/component/super-grids/reset-columns/' +
+						this.listCode
+				this.$http.delete(url).then(() => {
+					this.$message({
+						type: 'success',
+						message: this.$t('superGrid.resetSuccessful'),
+						showClose: true,
+					})
+					this.listAllColumns().then((columns) => {
+						this.columns = columns
+						$emit(this, 'reset', true)
+					})
+				})
+			})
+		},
+		listAllColumns() {
+			return new Promise((resolve, reject) => {
+				const url =
+						window.$vueApp.config.globalProperties.baseAPI +
+						'/component/super-grids/all-list-columns/' +
+						this.listCode
+				const gridParams = store.get(this.listCode)
+				const params = {}
+				const isSql = gridParams.isSql
+				this.isDragColumn = gridParams.colSetting.isDragColumn
+				if (typeof isSql !== 'undefined') {
+					params.isSql = isSql + ''
+				}
+				this.$http
+						.post(url, params)
+						.then((columns) => {
+							resolve(columns)
+						})
+						.catch((error) => {
+							reject(error)
+						})
+			})
+		},
+		clearDisplayOrder(row) {
+			row.displayOrderType = 'default'
+		},
+		clearWidth(row) {
+			row.widthType = 'default'
+		},
+		// 移动完成后的displayOrder设置
+		indexAfterTheChangeUpdateDisplayOrder(dataList, oldIndex, newIndex, prop) {
+			if (dataList && dataList.length > 0) {
+				if (oldIndex != null && oldIndex !== undefined && oldIndex !== -1) {
+					if (newIndex !== null && newIndex !== undefined && newIndex !== -1) {
+						if (prop && prop !== '') {
+							const selectCol = dataList[newIndex]
+							selectCol.displayOrderType = 'custom'
+							if (newIndex > oldIndex) {
+								// 表示向后移动
+								// 位置已经移动，所以参数要赋值给原始位置的下一个
+								const afProp = dataList[newIndex - 1][prop]
+								const arr = dataList.slice(oldIndex, newIndex)
+								if (arr && arr.length > 0) {
+									for (let i = arr.length - 1; i > -1; i--) {
+										const col = arr[i]
+										col.displayOrderType = 'custom'
+										if (i === 0) {
+											// 紧靠原始位置的上一个
+											col[prop] = selectCol[prop]
+										} else {
+											col[prop] = arr[i - 1][prop]
+										}
+									}
+								}
+								selectCol[prop] = afProp
+							} else {
+								const befProp = dataList[newIndex + 1][prop]
+								// 表示向前移动
+								// 位置已经移动，所以参数要赋值给原始位置的上一个
+								const arr = dataList.slice(newIndex + 1, oldIndex + 1)
+								if (arr && arr.length > 0) {
+									for (let i = 0; i < arr.length; i++) {
+										const col = arr[i]
+										col.displayOrderType = 'custom'
+										if (i === arr.length - 1) {
+											// 紧靠原始位置的上一个
+											col[prop] = selectCol[prop]
+										} else {
+											col[prop] = arr[i + 1][prop]
+										}
+									}
+								}
+								selectCol[prop] = befProp
+							}
+						}
+					}
+				}
+			}
+		},
+		// 拖动列顺序
+		dragColumnDisplayOrder() {
+			if (!this.isDragColumn) {
+				return
+			}
+			return new Promise((resolve, reject) => {
+				const tbody = document.querySelector(
+						'.custom-config-elTable .el-table__body-wrapper tbody'
+				)
+				if (tbody != null) {
+					const vm = this
+					Sortable.create(tbody, {
+						onEnd({newIndex, oldIndex}) {
+							if (
+									oldIndex !== null &&
+									oldIndex !== undefined &&
+									oldIndex !== -1 &&
+									newIndex !== null &&
+									newIndex !== undefined &&
+									newIndex !== -1
+							) {
+								if (oldIndex > newIndex) {
+									// 从后往前
+									if (vm.columns && vm.columns.length > 0) {
+										const item = vm.columns[oldIndex]
+										for (var i = oldIndex - 1; i >= newIndex; i--) {
+											const col = vm.columns[i]
+											col.displayOrderType = 'custom'
+											vm.columns[i + 1] = col
+										}
+										vm.columns[newIndex] = item
+									}
+								} else {
+									// 从前往后
+									if (vm.columns && vm.columns.length > 0) {
+										const item = vm.columns[oldIndex]
+										for (var k = oldIndex + 1; k <= newIndex; k++) {
+											const col = vm.columns[k]
+											col.displayOrderType = 'custom'
+											vm.columns[k - 1] = col
+										}
+										vm.columns[newIndex] = item
+									}
+								}
+							}
+							console.log('config拖动字段', vm.columns)
+							console.log('config拖动字段oldIndex', oldIndex)
+							console.log('config拖动字段newIndex', newIndex)
+							vm.hasLoaded = false
+							setTimeout(function () {
+								vm.hasLoaded = true
+								vm.$nextTick(() => {
+									vm.indexAfterTheChangeUpdateDisplayOrder(
+											vm.columns,
+											oldIndex,
+											newIndex,
+											'displayOrder'
+									)
+									vm.dragColumnDisplayOrder()
+								})
+							}, 100)
+
+							// vm.hasLoaded = false
+							// // 添加setTimeout是解决拖动顺序后数组columns值改变了，但是列表没有重新渲染问题
+							// setTimeout(function() {
+							//   vm.hasLoaded = true
+							//   vm.$nextTick(() => {
+							//     vm.dragColumnDisplayOrder()
+							//   })
+							//   const currentColumn = vm.columns[oldIndex]
+							//   const targetColumn = vm.columns[newIndex]
+							//   const currentDisplayOrder = currentColumn.displayOrder
+							//   const targetDisplayOrder = targetColumn.displayOrder
+							//   vm.columns.splice(oldIndex, 1)
+							//   vm.columns.splice(newIndex, 0, currentColumn)
+							//   vm.$set(currentColumn, 'displayOrder', targetDisplayOrder)
+							//   vm.$set(currentColumn, 'displayOrderType', 'custom')
+							//   vm.$set(targetColumn, 'displayOrder', currentDisplayOrder)
+							//   vm.$set(targetColumn, 'displayOrderType', 'custom')
+							//   vm.hasLoaded = true
+							//   vm.$nextTick(() => {
+							//     vm.dragColumnDisplayOrder()
+							//   })
+							// }, 100)
+						},
+					})
+				}
+			})
+		},
+	},
+	emits: [
+		'open',
+		'opend',
+		'close',
+		'closed',
+		'reset',
+		'opend',
+		'close',
+		'closed',
+	],
+}
+</script>

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

@@ -0,0 +1,162 @@
+<template>
+  <span>
+    <span v-if="formatConfig.isTag">
+      <el-tag
+        v-if="displayText"
+        :type="customStyle.type"
+        :color="customStyle.color"
+        :effect="formatConfig.effect"
+        :size="formatConfig.size"
+        :hit="formatConfig.hit"
+      >
+        {{ displayText }}
+      </el-tag>
+    </span>
+    <span v-else :style="customStyle">
+      <i v-if="formatConfig.position==='pre'" :class="formatConfig.icon" />
+      <span v-if="formatConfig.displayTextJudge" class="cell--span">{{ displayText }}
+      </span>
+      <i v-if="formatConfig.position==='suf'" :class="formatConfig.icon" />
+    </span>
+  </span>
+</template>
+
+<script>
+import store from '../store'
+import { getParentObjectUtil } from '../../../../src/utils/util'
+import customFormatter from '../custom-formatter'
+import { isPromise } from '../../../../src/utils/common-util'
+import publicMethodService from '../../../plugins/public-method'
+export default {
+  name: 'GridIcon',
+  props: {
+    column: {
+      type: Object,
+      default: null
+    },
+    row: {
+      type: Object,
+      default: null
+    },
+    listCode: {
+      type: String,
+      default: null
+    },
+    isSql: {
+      type: Boolean,
+      default: false
+    },
+    rowIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      customStyle: {},
+      formatConfig: {},
+      displayText: null
+    }
+  },
+  watch: {
+    row: {
+      handler(newValue, oldValue) {
+        this.initFomrat()
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.initFomrat()
+  },
+  mounted() {
+
+  },
+  methods: {
+    ...customFormatter,
+    initFomrat() {
+			    if (this.column.formatter &&
+    this.column.formatter.options && this.column.formatter.options.format) {
+        this.formatConfig = JSON.parse(this.column.formatter.options.format)
+        Object.assign(this.formatConfig, this.getFormatIconSetting(this.row))
+        console.log(this.formatConfig, '-------------------')
+        this.displayText = publicMethodService.escapeHtml(this.formatConfig.label)
+        if (this.formatConfig.event) {
+          this.getCustomStyle()
+        }
+      }
+    },
+    // 兼容oracle和mysql数据库，oracle是字段名是大写的，mysql是小写的，将小写转为大写
+    transferColumnDataToUpperCase(row) {
+      const reg1 = /[A-Z]+/ // 大写字母
+      if (this.isSql && reg1.test(this.column.prop)) {
+        this.transferColumnDataToUpperCaseWithProp(row, this.column.prop.toLowerCase(), this.column.prop)
+      }
+    },
+    transferColumnDataToUpperCaseWithProp(row, propLowerCase, columnProp) {
+      let dataModel
+      if (propLowerCase && propLowerCase.indexOf('.') > 0) {
+        const parentObj = getParentObjectUtil(propLowerCase, row)
+        const prop = propLowerCase.substring(propLowerCase.lastIndexOf('.') + 1)
+        dataModel = parentObj[prop]
+        if (dataModel !== undefined) {
+          // sql字段名小写转大写，兼容mysql、oracle数据库
+          parentObj[columnProp] = dataModel
+          delete parentObj[prop]
+        }
+      } else {
+        dataModel = row[propLowerCase]
+        if (dataModel !== undefined) {
+          // sql字段名小写转大写，兼容mysql、oracle数据库
+          row[columnProp] = dataModel
+          delete row[propLowerCase]
+        }
+      }
+      return dataModel
+    },
+    getFormatIconSetting(row) {
+      this.transferColumnDataToUpperCase(row)
+      const gridParams = store.get(this.listCode)
+      const result = this.getIconSetting(this.column, row, this.isSql, gridParams, this.listCode)
+      return result
+    },
+    getHyperIconClass(iconFormat) {
+      let iconName
+      if (iconFormat && iconFormat !== null && iconFormat.icon && iconFormat.icon !== '') {
+        iconName = iconFormat.icon
+      }
+      if (iconName && iconName.indexOf('fa-') === 0) {
+        // 表示以“fa-”开头，使用font-awesome中的图标
+        iconName = 'fa ' + iconName
+      }
+      return iconName
+    },
+    async getCustomStyle() {
+      const params = {
+        value: this.row[this.column.property],
+        row: this.row,
+        column: this.column,
+        prop: this.column.property,
+        rowIndex: this.rowIndex
+      }
+      const gridParams = store.get(this.listCode)
+      if (gridParams.options['eventCallBack'] && gridParams.options['eventCallBack'][this.formatConfig.event]) {
+        const customEventResult = gridParams.options['eventCallBack'][this.formatConfig.event].call(this, params)
+        if (isPromise(customEventResult)) {
+          await customEventResult.then(result => {
+            console.log('点击前事件返回结果--Promise--resolve---', result)
+            this.customStyle = result
+          })
+        } else {
+          this.customStyle = customEventResult
+        }
+      }
+    }
+  }
+
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,114 @@
+<template>
+  <span>
+    <el-link :type="getLinkType(row)" @click="clickHyperLink(column, row, listCode,scopeIndex)">
+      <span v-if="isShowOverflowTooltip" :id="column.prop+'DomData'+scopeIndex" :title="$escapeHtml(getMyHyperLinkSetting(row).title)" :style="{width:cellWidth+'px'}" class="ellipsis cell--span">{{ $escapeHtml(getMyHyperLinkSetting(row).label) }}<i v-if="getMyHyperLinkSetting(row).icon" :class="getMyHyperLinkSetting(row).icon" /></span>
+      <span v-else :id="column.prop+'DomData'+scopeIndex" class="cell--span">{{ $escapeHtml(getMyHyperLinkSetting(row).label) }}<i v-if="getMyHyperLinkSetting(row).icon" :class="getMyHyperLinkSetting(row).icon" /></span>
+    </el-link>
+  </span>
+</template>
+
+<script>
+import store from '../store'
+import { getParentObjectUtil } from '../../../../src/utils/util'
+import customFormatter from '../custom-formatter'
+export default {
+  name: 'Hyperlinks',
+  props: {
+    column: {
+      type: Object,
+      default: null
+    },
+    row: {
+      type: Object,
+      default: null
+    },
+    listCode: {
+      type: String,
+      default: null
+    },
+    isSql: {
+      type: Boolean,
+      default: false
+    },
+    scopeIndex: {
+      type: Number,
+      default: 0
+    },
+    isShowOverflowTooltip: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    ...customFormatter,
+    getMyHyperLinkSetting(row) {
+      this.transferColumnDataToUpperCase(row)
+      const gridParams = store.get(this.listCode)
+      let tableName
+      if (gridParams && gridParams.basicInfo && gridParams.basicInfo.tableName) {
+        tableName = gridParams.basicInfo.tableName
+      }
+      const hyperLinkResult = this.getHyperLinkSetting(this.column, row, this.isSql, gridParams.additionalParamMap, gridParams.contextParameter, tableName, this.listCode)
+      hyperLinkResult.icon = this.getHyperIconClass(hyperLinkResult)
+      return hyperLinkResult
+    },
+    // 兼容oracle和mysql数据库，oracle是字段名是大写的，mysql是小写的，将小写转为大写
+    transferColumnDataToUpperCase(row) {
+      const reg1 = /[A-Z]+/ // 大写字母
+      if (this.isSql && reg1.test(this.column.prop)) {
+        this.transferColumnDataToUpperCaseWithProp(row, this.column.prop.toLowerCase(), this.column.prop)
+      }
+    },
+    transferColumnDataToUpperCaseWithProp(row, propLowerCase, columnProp) {
+      let dataModel
+      if (propLowerCase && propLowerCase.indexOf('.') > 0) {
+        const parentObj = getParentObjectUtil(propLowerCase, row)
+        const prop = propLowerCase.substring(propLowerCase.lastIndexOf('.') + 1)
+        dataModel = parentObj[prop]
+        if (dataModel !== undefined) {
+          // sql字段名小写转大写，兼容mysql、oracle数据库
+          parentObj[columnProp] = dataModel
+          delete parentObj[prop]
+        }
+      } else {
+        dataModel = row[propLowerCase]
+        if (dataModel !== undefined) {
+          // sql字段名小写转大写，兼容mysql、oracle数据库
+          row[columnProp] = dataModel
+          delete row[propLowerCase]
+        }
+      }
+      return dataModel
+    },
+    getHyperIconClass(hyperLinkResult) {
+      let iconName
+      if (hyperLinkResult && hyperLinkResult !== null && hyperLinkResult.icon && hyperLinkResult.icon !== '') {
+        iconName = hyperLinkResult.icon
+      }
+      if (iconName && iconName.indexOf('fa-') === 0) {
+        // 表示以“fa-”开头，使用font-awesome中的图标
+        iconName = 'fa ' + iconName
+      }
+      return iconName
+    },
+    getLinkType(row) {
+      if (this.column.events && this.column.events['cellStyle']) {
+        const params = {
+          value: row[this.column.property],
+          row: row,
+          column: this.column,
+          prop: this.column.property
+        }
+        const gridParams = store.get(this.listCode)
+        return gridParams.options['eventCallBack'][this.column.events['cellStyle']].call(this, params)
+      }
+      return 'primary'
+    }
+  }
+
+}
+</script>
+
+<style>
+
+</style>