ed-frame-vue
Version:
easydata 基础组件
315 lines (305 loc) • 11.8 kB
JavaScript
import {DefaultUrl, pageQueryList} from "../../../api/easyData";
import {getVarType, sign, underlineToHumpJson} from "../../../utils/utils";
import {postAction} from "../../../api";
import {getControlProp, setFormData} from "../../../utils/useBusiness";
export default {
data() {
return {
// table 数据数组
tableData: [],
// 表格loading动画
tableLoading: false,
// 表格列的配置描述
columns: this.diyColums,
cacheColumns: [],
// 分页
pagination: {
current: 1,
pageSize: 10,
total: 0,
pageSizes: [10, 20, 30]
},
}
},
methods: {
/**
* @private
*/
bindTableProps() {
return {
...this.tableProps,
columnType: this.columnType,
pagination: this.pagination,
data: this.tableData,
columns: this.columns,
loading: this.initLoading
}
},
/**
* @name handleTableChange
* @description 分页、排序、筛选变化时触发
*/
handleTableChange({pagination}) {
this.loadTableData(pagination.current)
},
/**
* @name loadTableData
* @param arg
* @returns {Promise<void>}
* @description 加载列表数据
*/
async loadTableData(arg = 1) {
this.rowSelectionSelect(null, [], [])
if (arg === 1) this.pagination.current = 1
this.tableLoading = true
try {
let res = null
if (this.httpUrl.pageUrl === DefaultUrl.page) {
res = await pageQueryList(sign(this.getQueryParams()))
} else {
res = await postAction(this.httpUrl.pageUrl, this.getQueryParams())
}
this.tableLoading = false
if (res.success) {
let result = res.data
if (Number(result.total) > 0) {
this.pagination.total = Number(result.total)
this.tableData = setFormData(result.records, this.controlInfos, this)
} else {
this.pagination.total = 0
this.tableData = []
}
} else {
this.$message.warning(res.message)
}
this.loadDataOk(res)
} catch (e) {
console.log(e)
this.tableLoading = false
}
},
/**
* @private
* @name getQueryParams
* @returns {*}
* @description 组装表格查询参数
*/
getQueryParams() {
const {dataSource, controlProps, controlInfos} = this.controlConfig
//查询参数
let param = this.initQueryParams(dataSource);
// console.info("param", param, this.formKeyInfo)
//where
let whereList = [];
if (controlInfos) {
controlInfos.map(control => {
//查询参数
let controlValue = this.formKeyInfo[control.controlName]
const controlProp = getControlProp(control, controlProps);
if (control.isQuery && getVarType(controlValue) !== 'undefined') {
let where = {}
if (['cascader', 'select'].includes(control.controlType)) {
let isMultiple = getVarType(controlProp.multiple) === 'boolean' && controlProp.multiple
where = this.addWhereCascader(control, isMultiple, controlValue)
} else if (control.controlType === 'datePicker') {
where = this.addWhereDatePicker(control, controlValue)
} else {
where = this.addWhereOther(control, controlProp, controlValue)
}
if (where) whereList.push(where)
}
//传递参数
if (getVarType(this.queryParams) === 'object') {
if (this.queryParams && this.hasObject(this.queryParams, control.controlName)) {
whereList.push({
fieldName: control.controlName,
fieldValue: this.queryParams[control.controlName],
operator: 'like',
})
control.hidden = true
}
}
})
if (getVarType(this.queryParams) === 'array') {
whereList = whereList.concat(this.queryParams)
}
param.wheres = whereList
param.orders = this.orderBy
}
//加签
return sign(param);
},
/**
* @private
* 查询条件创建默认参数
* @param {} dataSource
* @returns
*/
initQueryParams(dataSource) {
let param = {}
for (let i in this.formKeyInfo) {
if (getVarType(this.formKeyInfo[i]) === 'string') {
this.formKeyInfo[i] = this.formKeyInfo[i].trimEnd().trimStart()
}
}
param = Object.assign({}, underlineToHumpJson(this.formKeyInfo))
param.key = Object.assign({}, this.formKeyInfo)
/**
* 判断key里面的属性在是否在查询项,不在查询项属性一律不要
*/
let keys = param.key;
for (let i in keys) {
let control = this.controlInfos.find(control => control.controlName === i)
const isQuery = control ? control.isQuery : false;
if (!isQuery) {
delete keys[i]
}
}
param.key = keys
param.dataSourceName = dataSource.dataSourceName
param.page = {
current: this.pagination.current,
size: this.pagination.pageSize
}
param.viewId = this.viewId
param.easyFormId = this.easyFormId
param.sqlId = this.sqlId
param.sqlIdAddWhere = this.sqlIdAddWhere
//转换数据库存id的字段为{label:'',value:''}格式
param.convertToTag = true
return param
},
/**
* 添加级连参数的查询条件
* @private
* @param {*} control
* @param isMultiple
* @param {*} controlValue
* @returns 查询参数是级连下拉、下拉列表
*/
addWhereCascader(control, isMultiple, controlValue) {
let where = {
fieldName: control.controlName
}
let isCascader = control.controlType === 'cascader'
if (isMultiple && getVarType(controlValue) === 'array' && controlValue.length > 1) {
this.$message.warning(`[${control.label}]只支持勾选一个作为查询条件,当前查询忽略该条件`);
return false
} else if (isMultiple && getVarType(controlValue) === 'array' && controlValue.length === 0) {
return false
}
let operator = isMultiple ? 'like' : '='
let fieldValue = isMultiple && controlValue.length === 1 ? controlValue[0] : controlValue
where.fieldValue = isCascader ? fieldValue.join("~") : fieldValue
where.operator = operator
return where
},
/**
* 日期查询条件
* @private
* @param control
* @param controlValue
* @returns {{sql: string}|{fieldName: ([]|*), fieldValue, operator: string}|boolean}
*/
addWhereDatePicker(control, controlValue) {
if (getVarType(controlValue) == 'string') {
return {
fieldName: control.controlName,
fieldValue: controlValue,
operator: 'like'
}
} else if (getVarType(controlValue) == 'array' && controlValue.length == 2) {
return {
sql: control.controlName + ' between "' + controlValue[0] + '" and "' + controlValue[1] + '"'
}
}
return false;
},
/**
* @private
* 其他查询条件
* @param control
* @param controlProp
* @param controlValue
* @returns {{fieldName: ([]|*)}}
*/
addWhereOther(control, controlProp, controlValue) {
let where = {
fieldName: control.controlName,
}
if (typeof controlValue == 'object' && Array.isArray(controlValue)) {
//当参数是数组时
let formKey = []
controlValue.forEach(key => {
if (typeof key == 'object') {
formKey.push(key.key ? key.key : key.value)
} else {
formKey.push(key)
}
})
if (formKey.length > 0) {
where.fieldValue = formKey
where.operator = 'in'
}
} else {
where.fieldValue = controlValue
where.operator = control.isAccurateQuery ? '=' : 'like'
}
return where
},
/**
* 编辑数据
* @param {*} row 一行数据
* @param {*} index 行索引
* @param {*} viewId 自定义viewId
*/
handlerEdit(row, index, viewId) {
let fd = row
if (this.formData && Object.keys(this.formData).length > 0) {
fd = JSON.parse(JSON.stringify(row))
let {keyInfo, keyInfoObject} = fd
Object.assign(keyInfo, this.formData.key ? this.formData.key : this.formData)
Object.assign(keyInfoObject, this.formData.key ? this.formData.key : this.formData)
}
this.$refs.BasicModal.showModal({
formData: fd,
isDescribe: false,
submitUrl: this.httpUrl.updateUrl,
title: '更新-' + this.dataSource.remark,
useControlConfig: !viewId,
viewId: viewId
})
},
/**
* 查看数据
* @param {*} row 一行数据
* @param {*} index 行索引
*/
handlerDetail(row, index) {
this.$refs.BasicModal.showModal({
formData: row,
isDescribe: true,
title: '查看-' + this.dataSource.remark,
})
},
/**
* 删除数据
* @param {*} id 行ID
*/
async handlerDelete(id) {
if (id) {
const params = {
id,
dataSourceName: this.dataSource.dataSourceName
}
const res = await postAction(this.httpUrl.deleteUrl, params);
if (res.success) {
this.$message.success(res.msg)
await this.loadTableData(this.pagination.current)
} else {
this.$message.error(res.msg)
}
}
},
}
}