agilebuilder-ui 1.0.0

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

@@ -0,0 +1,591 @@
+const searchMethods = {
+    packageSearchParam() {
+        if (
+            this.searchType === 'normal' ||
+            !this.searchType ||
+            this.searchType === null ||
+            this.searchType === undefined ||
+            this.searchType === ''
+        ) {
+            const searchParams = []
+            this.searchableColumns.forEach((column) => {
+                const param = {leftBracket: '', rightBracket: '', joinSign: 'and'}
+                // 布尔型字段时prop中去掉了is字符，查询时返回带有is的属性字段，
+                // 否则会导致查询布尔型报500错误
+                let orgProp = column.orgProp
+                // sql查询时，会把点“.”改为两个下划线"__"
+                const replaceDot = '__'
+                if (orgProp && orgProp.indexOf(replaceDot) > 0) {
+                    // 表示包括点“.”，需要把两个下划线"__"重新改为点“.”,否则会导致查询报500错误
+                    orgProp = orgProp.replace(replaceDot, '.')
+                }
+                param.propName = orgProp
+                param.enumName = column.enumName
+                param.operator = this.getOperator(column)
+                param.dataType = column.dataType
+                param.matchingType = column.queryMatching
+                param.formatter = column.formatter
+                    ? JSON.parse(JSON.stringify(column.formatter))
+                    : column.formatter
+                const values = this.getFormItemValue(column.prop)
+                if (column.dataType === 'DATE' || column.dataType === 'TIME') {
+                    // 日期 或 时间类型
+                    // console.log('values==', values, column.prop)
+                    if (
+                        values&&
+                        values.length === 2 &&
+                        values[0] !== null &&
+                        values[1] !== null
+                    ) {
+                        const format = this.getDateTimeSearchFormatter(
+                            column,
+                            column.dataType,
+                            column.formatter
+                        )
+                        if (format) {
+                            if (!param.formatter) {
+                                param.formatter = {}
+                                param.formatter.options = {}
+                            } else if (!param.formatter.options) {
+                                param.formatter.options = {}
+                            }
+                            param.formatter.options.format = format
+                        }
+                        param.startValue = this.getDateTimeMillsByDateStr(values[0], format)
+                        param.endValue = this.getDateTimeMillsByDateStr(values[1], format)
+                        searchParams.push(param)
+                    }
+                } else if (
+                    (column.dataType === 'INTEGER' ||
+                        column.dataType === 'LONG' ||
+                        column.dataType === 'DOUBLE') &&
+                    Array.isArray(values)
+                ) {
+                    // 日期 或 时间类型
+                    // const values1 = this.getFormItemValue(column.prop)
+                    if (values) {
+                        if (column.componentType === 'yearRange') {
+                            if (values[0] || values[1]) {
+                                param.startValue = values[0]
+                                param.endValue = values[1]
+                                if (values[0] && !values[1]) {
+                                    param.startValue = values[0]
+                                    param.endValue = 9999
+                                } else if (!values[0] && values[1]) {
+                                    param.startValue = 0
+                                    param.endValue = values[1]
+                                }
+                                searchParams.push(param)
+                            }
+                        } else {
+                            if (
+                                !Array.isArray(values) ||
+                                values.length < 2 ||
+                                (values[0] === null && values[1] === null)
+                            ) {
+                                // 填写了一个有效值
+                                if (!Array.isArray(values)) {
+                                    param.propValue = values
+                                    searchParams.push(param)
+                                } else if (values.length < 2) {
+                                    param.propValue = values[0]
+                                    searchParams.push(param)
+                                } else if (values[0] === null) {
+                                    param.propValue = values[1]
+                                    searchParams.push(param)
+                                } else if (values[1] === null) {
+                                    param.propValue = values[0]
+                                    searchParams.push(param)
+                                }
+                            } else {
+                                // 填写了两个有效值
+                                
+                                param.startValue = values[0]
+                                param.endValue = values[1]
+                                searchParams.push(param)
+                            }
+                        }
+                    }
+                } else if (
+                    column.componentType &&
+                    column.componentType.indexOf('Tree') !== -1 &&
+                    column.componentType.indexOf('single') === -1
+                ) {
+                    // 说明是多选组织树
+                    // 是否是人员树
+                    const isUser = this.isUserTree(column.componentType)
+                    const values = this.getFormItemValue(column.prop)
+                    if (values && values !== '') {
+                        const newValue = []
+                        let valueArr = values
+                        if (Array.isArray(values)) {
+                            // 表示是数组
+                            valueArr = values
+                        } else {
+                            // 表示是字符串
+                            valueArr = values.split(',')
+                        }
+                        if (Array.isArray(valueArr) && valueArr && valueArr.length > 0) {
+                            valueArr.forEach((val) => {
+                                // 截取用户名中的英文名信息
+                                const userName = this.getUserName(isUser, val)
+                                if (userName !== undefined && userName !== null) {
+                                    newValue.push(userName)
+                                }
+                            })
+                        }
+                        this.packageValueWithArray(newValue, searchParams, param)
+                    }
+                } else if (
+                    column.componentType &&
+                    column.componentType.indexOf('Tree') !== -1
+                ) {
+                    // 说明是单选组织树
+                    // 是否是人员树
+                    const isUser = this.isUserTree(column.componentType)
+                    let propValue = this.getFormItemValue(column.prop)
+                    // 截取用户名中的英文名信息
+                    propValue = this.getUserName(isUser, propValue)
+                    this.packageValueWithArray(propValue, searchParams, param)
+                } else {
+                    if (column.componentType === 'multiselect') {
+                        // 表示是多选下拉框选择器选择的值
+                        const values = this.getFormItemValue(column.prop)
+                        // console.log('values==', values, column.prop)
+                        this.packageValueWithArray(values, searchParams, param)
+                    } else {
+                        const propValue = this.getFormItemValue(column.prop)
+                        this.packageValueWithArray(propValue, searchParams, param)
+                    }
+                }
+            })
+            return searchParams
+        } else {
+            const newSearchFormList = []
+            this.searchFormList.forEach((param) => {
+                let newParam = {}
+                newParam = param
+                // const param = { leftBracket: '', rightBracket: '', joinSign: 'and' }
+                // 布尔型字段时prop中去掉了is字符，查询时返回带有is的属性字段，
+                // 否则会导致查询布尔型报500错误
+                let orgProp = newParam.orgProp
+                // sql查询时，会把点“.”改为两个下划线"__"
+                const replaceDot = '__'
+                if (orgProp && orgProp.indexOf(replaceDot) > 0) {
+                    // 表示包括点“.”，需要把两个下划线"__"重新改为点“.”,否则会导致查询报500错误
+                    orgProp = orgProp.replace(replaceDot, '.')
+                }
+                newParam.propName = orgProp
+                newParam.operator = this.getOperator(param)
+                newParam.matchingType = param.queryMatching
+                if (newParam.dataType === 'DATE' || newParam.dataType === 'TIME') {
+                    // 日期 或 时间类型
+                    const values = newParam.value
+                    // console.log('values==', values, column.prop)
+                    if (
+                        values !== null &&
+                        values.length === 2 &&
+                        values[0] !== null &&
+                        values[1] !== null
+                    ) {
+                        newParam.startValue = values[0]
+                        newParam.endValue = values[1]
+                    }
+                } else if (
+                    newParam.dataType === 'INTEGER' ||
+                    newParam.dataType === 'LONG'
+                ) {
+                    const values1 = newParam.value
+                    if (values1) {
+                        if (
+                            !Array.isArray(values1) ||
+                            values1.length < 2 ||
+                            (values1[0] === null && values1[1] === null)
+                        ) {
+                            // 填写了一个有效值
+                            if (!Array.isArray(values1)) {
+                                newParam.propValue = values1
+                            } else if (values1.length < 2) {
+                                newParam.propValue = values1[0]
+                            } else if (values1[0] === null) {
+                                newParam.propValue = values1[1]
+                            } else if (values1[1] === null) {
+                                newParam.propValue = values1[0]
+                            }
+                        } else {
+                            // 填写了两个有效值
+                            newParam.startValue = values1[0]
+                            newParam.endValue = values1[1]
+                        }
+                    }
+                } else if (
+                    newParam.componentType &&
+                    newParam.componentType.indexOf('Tree') !== -1 &&
+                    newParam.componentType.indexOf('single') === -1
+                ) {
+                    // 树多选，先手动分割数组，在生成多条
+                    // 是否是人员树
+                    const isUser = this.isUserTree(newParam.componentType)
+                    const values = newParam.value
+                    if (values && values !== '') {
+                        const newValue = []
+                        let valueArr = values
+                        if (Array.isArray(values)) {
+                            valueArr = values
+                        } else {
+                            valueArr = values.split(',')
+                        }
+                        if (Array.isArray(valueArr) && valueArr && valueArr.length > 0) {
+                            valueArr.forEach((val) => {
+                                // 截取用户名中的英文名信息
+                                const userName = this.getUserName(isUser, val)
+                                if (userName !== undefined && userName !== null) {
+                                    newValue.push(userName)
+                                }
+                            })
+                        }
+                        this.packageValueWithArray(newValue, newSearchFormList, param)
+                    }
+                } else if (
+                    newParam.componentType &&
+                    newParam.componentType.indexOf('Tree') !== -1
+                ) {
+                    // 说明是单选组织树
+                    // 是否是人员树
+                    const isUser = this.isUserTree(newParam.componentType)
+                    let propValue = newParam.value
+                    // 截取用户名中的英文名信息
+                    propValue = this.getUserName(isUser, propValue)
+                    this.packageValueWithArray(propValue, newSearchFormList, param)
+                } else {
+                    if (newParam.componentType === 'multiselect') {
+                        // 表示是多选下拉框选择器选择的值
+                        const values = newParam.value
+                        // console.log('values==', values, column.prop)
+                        this.packageValueWithArray(values, newSearchFormList, param)
+                    } else {
+                        const values = newParam.value
+                        this.packageValueWithArray(values, newSearchFormList, param)
+                    }
+                }
+            })
+            return newSearchFormList
+        }
+    },
+    // 获得日期、时间查询格式配置，影响后台查询结果
+    getDateTimeSearchFormatter(column, dataType, formatter) {
+        const dateTimeFormat = 'yyyy-MM-dd HH:mm:ss'
+        const dateFormat = 'yyyy-m-d'
+        let format
+        if (column.componentType === 'dateSection') {
+            // 日期区间
+            format = dateFormat
+        } else if (column.componentType === 'dateTimePicker') {
+            // 日期时间选择器
+            format = dateTimeFormat
+        } else if (column.dataType === 'DATE' || column.componentType === 'date') {
+            // 日期选择器
+            format = dateFormat
+        }
+        if (!format) {
+            if (formatter) {
+                const formatOptions = formatter.options
+                if (formatOptions && formatOptions != null) {
+                    format = formatOptions.format
+                }
+            }
+        }
+        
+        if (!format) {
+            if (dataType === 'DATE') {
+                format = 'yyyy-m-d'
+            } else if (dataType === 'TIME') {
+                format = 'yyyy-m-d hh:mm:ss'
+            }
+        }
+        return format
+    },
+    // 根据日期字符串获得日期毫秒值
+    getDateTimeMillsByDateStr(dateStr, format) {
+        if (typeof dateStr === 'string' && format) {
+            if (dateStr.indexOf('T') !== -1) {
+                return new Date(dateStr).getTime()
+            }
+            // 表示是格式化后的值，转成date毫秒值传给后台，解决时区问题
+            format = format.toLowerCase()
+            if (
+                format.indexOf('h') > 0 &&
+                format.indexOf('m') > 0 &&
+                format.indexOf('s') > 0
+            ) {
+                // 表示有时分秒
+                dateStr = new Date(dateStr).getTime()
+            } else {
+                // 表示精确到日
+                dateStr = new Date(dateStr + ' 00:00:00').getTime()
+            }
+        }
+        return dateStr
+    },
+    // 是否是人员树
+    isUserTree(componentType) {
+        if (
+            componentType.indexOf('DeptManTree') > 0 ||
+            componentType.indexOf('WgManTree') > 0
+        ) {
+            return true
+        }
+        return false
+    },
+    // 获得用户名
+    getUserName(isUser, val) {
+        if (
+            isUser &&
+            val !== undefined &&
+            val !== null &&
+            val.indexOf('(') > 0 &&
+            val.indexOf(')') > 0
+        ) {
+            // 说明是人员树，如果是值中包括英文名，把英文名截取掉，因为有些字段保存的有英文名，有些没有英文名，为了便于查询，所以统一将英文名去掉。
+            // 例如：张三(Andy)，处理后是:张三
+            val = val.substring(0, val.indexOf('('))
+        }
+        return val
+    },
+    getOperator(column) {
+        if (
+            (column.dataType === 'TEXT' || column.dataType === 'CLOB') &&
+            column.fuzzy &&
+            (!column.componentType ||
+                (column.componentType &&
+                    ((column.componentType !== 'select' &&
+                            column.componentType !== 'multiselect') ||
+                        (column.componentType === 'multiselect' &&
+                            column.ifMultiData !== undefined &&
+                            column.ifMultiData === true))))
+        ) {
+            // 是否是文本类型的字段，且启用了模糊查询，则表示操作符为contains模糊查询
+            return 'CONTAIN'
+        } else if (Array.isArray(this.getFormItemValue(column.prop))) {
+            if (
+                column.dataType === 'INTEGER' ||
+                column.dataType === 'LONG' ||
+                column.dataType === 'DOUBLE'
+            ) {
+                return 'BETWEEN'
+            } else {
+                return 'EQ'
+            }
+        } else {
+            // 否则就是等于
+            return 'EQ'
+        }
+    },
+    getFormItemValue(prop, index) {
+        if (prop.indexOf('.') > 0) {
+            const parentOjbect = this.getParentObject(prop)
+            if (index != null && index !== undefined) {
+                return parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index]
+            } else {
+                return parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)]
+            }
+        } else {
+            if (index != null && index !== undefined) {
+                return this.searchForm[prop][index]
+            } else {
+                return this.searchForm[prop]
+            }
+        }
+    },
+    getParentObject(prop) {
+        const nestedProp = prop.split('.')
+        // 属性只有一个时父对象就是searchForm
+        if (nestedProp.length === 1) {
+            return this.searchForm
+        } else {
+            let parentObject
+            // 属性超过2个时先找到最后一层属性的父对象
+            for (let i = 0; i < nestedProp.length - 1; i++) {
+                parentObject = this.searchForm[nestedProp[i]]
+            }
+            return parentObject
+        }
+    },
+    // 处理多选下拉框时获得的值
+    // 处理非多选下拉框的值
+    packageValueWithArray(value, searchParams, param) {
+        if (value && Array.isArray(value)) {
+            const selectValues = value
+            // if (!Array.isArray(values)) {
+            //   selectValues = values.split(',')
+            // }
+            let num = 0
+            selectValues.forEach((val) => {
+                const selectParam = Object.assign({}, param)
+                selectParam.joinSign = 'or' // 将条件连接符修改为or，否则无法查询到值
+                if (num === 0) {
+                    selectParam.leftBracket = '1' // 左边有1个括号
+                }
+                if (num === selectValues.length - 1) {
+                    // 说明是最后一个条件
+                    selectParam.rightBracket = '1' // 右边有1个括号
+                    selectParam.joinSign = 'and' // 最后一个条件的连接符需要修改为and
+                }
+                selectParam.propValue = val
+                // 注释该代码，是因为多选下拉框数据库中以逗号分隔存储时，使用EQ无法查询出结果，需要使用getOpertator计算出的结果
+                // selectParam.operator = 'EQ'
+                if (val !== undefined && val !== null) {
+                    searchParams.push(selectParam)
+                }
+                num++
+            })
+        } else if (
+            typeof value !== 'undefined' &&
+            value !== '' &&
+            value !== null &&
+            !Array.isArray(value)
+        ) {
+            // 不是数组
+            param.propValue = value
+            searchParams.push(param)
+        }
+    },
+    // 保存查询条件
+    saveSearchCondition(condition) {
+        return this.$http.post(
+            window.$vueApp.config.globalProperties.baseAPI +
+            '/component/super-grids/search-conditions',
+            condition
+        )
+    },
+    // 显示查询条件列表
+    listSearchCondition(listCode) {
+        return this.$http.get(
+            window.$vueApp.config.globalProperties.baseAPI +
+            '/component/super-grids/search-condition-list/' +
+            listCode
+        )
+    },
+    // 删除查询条件
+    removeSearchCondition(conditionId) {
+        return this.$http.delete(
+            window.$vueApp.config.globalProperties.baseAPI +
+            '/component/super-grids/search-conditions/' +
+            conditionId
+        )
+    },
+    // 查询条件
+    getSearchCondition(conditionId) {
+        return this.$http.get(
+            window.$vueApp.config.globalProperties.baseAPI +
+            '/component/super-grids/search-conditions/' +
+            conditionId
+        )
+    },
+    // 设置默认查询值
+    setDefaultQueryValue(column, searchForm) {
+        if (
+            column.componentType === 'date' ||
+            column.componentType === 'dateSection' ||
+            column.componentType === 'timePicker' ||
+            column.componentType === 'dateTimePicker'
+        ) {
+            const formatList = {
+                date: 'YYYYMMDD',
+                dateSection: 'YYYYMMDDHHMMSS',
+                timePicker: 'YYYYMMDD',
+                dateTimePicker: 'YYYYMMDDHHMMSS',
+            }
+            const valueTypeList = {
+                date: 'String',
+                dateSection: 'Date',
+                timePicker: 'String',
+                dateTimePicker: 'String',
+            }
+            const rowControlConfig = column['controlConfig']
+            if (
+                rowControlConfig !== null &&
+                rowControlConfig !== undefined &&
+                rowControlConfig !== ''
+            ) {
+                const controlConfig = JSON.parse(rowControlConfig)
+                if (controlConfig.timeDefaultQueryRange) {
+                    const format = formatList[column.componentType]
+                    const valueType = valueTypeList[column.componentType]
+                    if (format && valueType) {
+                        const queryRange = this.getDateQueryRange(
+                            column.componentType,
+                            format,
+                            controlConfig.timeDefaultQueryRange,
+                            valueType
+                        )
+                        searchForm[column.prop] = queryRange
+                    }
+                }
+            }
+        }
+    },
+    // 获取近一周，近两周，近一个月的时间范围
+    // componentType组件类型 date time
+    // format 格式 年月日/年月日时分秒
+    // queryRangeType 查询范围类型 近一周nearlyWeek/近两周nearlyTwoWeeks/近一个月nearlyMonth
+    // valueType 返回对象类型 String Date
+    getDateQueryRange(componentType, format, timeDefaultQueryRange, valueType) {
+        const queryRange = []
+        const nowDate = new Date() // 当前时间
+        let startDate // 开始时间
+        const endDate = new Date() // 结束时间
+        if (timeDefaultQueryRange !== null && timeDefaultQueryRange > 0) {
+            startDate = new Date(
+                nowDate.setDate(nowDate.getDate() - parseInt(timeDefaultQueryRange))
+            )
+        }
+        if (format === 'YYYYMMDD') {
+            queryRange[0] =
+                startDate.getFullYear() +
+                '-' +
+                (startDate.getMonth() + 1) +
+                '-' +
+                startDate.getDate()
+            queryRange[1] =
+                endDate.getFullYear() +
+                '-' +
+                (endDate.getMonth() + 1) +
+                '-' +
+                endDate.getDate()
+        } else {
+            queryRange[0] =
+                startDate.getFullYear() +
+                '-' +
+                (startDate.getMonth() + 1) +
+                '-' +
+                startDate.getDate() +
+                ' 00:00:00'
+            queryRange[1] =
+                endDate.getFullYear() +
+                '-' +
+                (endDate.getMonth() + 1) +
+                '-' +
+                endDate.getDate() +
+                ' 23:59:59'
+        }
+        if (valueType === 'Date') {
+            const queryRangeFormat = []
+            queryRange.forEach((date) => {
+                var tempStrs = date.split(' ')
+                var dateStrs = tempStrs[0].split('-')
+                var year = parseInt(dateStrs[0], 10)
+                var month = parseInt(dateStrs[1], 10) - 1
+                var day = parseInt(dateStrs[2], 10)
+                var timeStrs = tempStrs[1].split(':')
+                var hour = parseInt(timeStrs[0], 10)
+                var minute = parseInt(timeStrs[1], 10)
+                var second = parseInt(timeStrs[2], 10)
+                queryRangeFormat.push(new Date(year, month, day, hour, minute, second))
+            })
+            return queryRangeFormat
+        }
+        return queryRange
+    },
+}
+export default searchMethods

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

@@ -0,0 +1,46 @@
+<template>
+  <el-table-column
+    align="center"
+    type="selection"
+    :label="column.label"
+    :fixed="fixed"
+    :width="column.width ? column.width : '50'"
+  />
+</template>
+
+<script>
+/**
+ * 复选框列
+ */
+export default {
+  name: 'SelectionColumn',
+  components: {},
+  props: {
+    column: {
+      type: Object,
+      default: null,
+    },
+    isLineEdit: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    fixed() {
+      if (
+        this.column.fixed === undefined ||
+        this.column.fixed === null ||
+        this.column.fixed === '' ||
+        this.column.fixed === 'false'
+      ) {
+        return false
+      }
+      // 左右都固定会导致列表显示速度慢，暂只支持左侧固定
+      if (this.column.fixed && this.column.fixed === 'right') {
+        return 'left'
+      }
+      return this.column.fixed
+    },
+  },
+}
+</script>

package/packages/super-grid/src/store.js

@@ -0,0 +1,3 @@
+// 用于存放表格的控制属性，控制表格的编辑状态、存储表格的数据便于使用等等
+const store = new Map()
+export default store