多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

424 lines
12 KiB

export default {
data: () => ({
viewStatus: {},
showSystemFields: false,
fieldFilter: '',
filtersKey: 0,
filters: [],
sortList: [],
showFields: {},
// fieldList: [],
// meta: {},
data: []
}),
methods: {
mapFieldsAndShowFields() {
// this.fieldList = this.availableColumns.map(c => c._cn);
this.showFields = this.fieldList.reduce((obj, k) => {
obj[k] = k in this.showFields ? this.showFields[k] : true
return obj
}, {})
},
syncDataDebounce() {
// not implemented
},
onKeyDown(e) {
if (this.selected.col === null || this.selected.row === null) {
return
}
switch (e.keyCode) {
// left
case 37:
if (this.selected.col > 0) {
this.selected.col--
}
break
// right
case 39:
if (this.selected.col < this.colLength - 1) {
this.selected.col++
}
break
// up
case 38:
if (this.selected.row > 0) {
this.selected.row--
}
break
// down
case 40:
if (this.selected.row < this.rowLength - 1) {
this.selected.row++
}
break
// enter
case 13:
this.makeEditable(this.selected.col, this.selected.row)
break
}
}
},
computed: {
isLocked() {
return this.viewStatus && this.viewStatus.type === 'locked'
},
fieldList() {
return this.availableColumns.map((c) => {
return c.alias
})
},
realFieldList() {
return this.availableRealColumns.map((c) => {
return c._cn
})
},
formulaFieldList() {
return this.availableColumns.reduce((arr, c) => {
if (c.formula) {
arr.push(c._cn)
}
return arr
}, [])
},
availableRealColumns() {
return this.availableColumns && this.availableColumns.filter(c => !c.virtual)
},
allColumns() {
if (!this.meta) { return [] }
let columns = this.meta.columns
if (this.meta && this.meta.v) {
columns = [...columns, ...this.meta.v.map(v => ({ ...v, virtual: 1 }))]
}
{
const _ref = {}
columns.forEach((c) => {
if (c.virtual && c.lk) {
c.alias = `${c.lk._lcn} (from ${c.lk._ltn})`
} else {
c.alias = c._cn
}
if (c.alias in _ref) {
c.alias += _ref[c.alias]++
} else {
_ref[c.alias] = 1
}
})
}
return columns
},
availableColumns() {
let columns = []
if (!this.meta) {
return []
}
// todo: generate hideCols based on default values
const hideCols = ['created_at', 'updated_at']
if (this.showSystemFields) {
columns = this.meta.columns || []
} else {
columns = (this.meta.columns.filter(c => !(c.pk && c.ai) &&
!((this.meta.v || []).some(v => v.bt && v.bt.cn === c.cn)) &&
!hideCols.includes(c.cn))) || []
}
if (this.meta && this.meta.v) {
columns = [...columns, ...this.meta.v.map(v => ({ ...v, virtual: 1 }))]
}
{
const _ref = {}
columns.forEach((c) => {
if (c.virtual && c.lk) {
c.alias = `${c.lk._lcn} (from ${c.lk._ltn})`
} else {
c.alias = c._cn
}
if (c.alias in _ref) {
c.alias += _ref[c.alias]++
} else {
_ref[c.alias] = 1
}
})
}
if (this.fieldsOrder.length) {
return [...columns].sort((c1, c2) => {
const i1 = this.fieldsOrder.indexOf(c1.alias)
const i2 = this.fieldsOrder.indexOf(c2.alias)
return (i1 === -1 ? Infinity : i1) - (i2 === -1 ? Infinity : i2)
})
}
return columns
},
concatenatedXWhere() {
let where = ''
if (this.searchField && this.searchQuery.trim()) {
if (['text', 'string'].includes(this.sqlUi.getAbstractType(this.availableColumns.find(({ _cn }) => _cn === this.searchField) || this.availableColumns[0]))) {
where = `(${this.searchField},like,%${this.searchQuery.trim()}%)`
} else {
where = `(${this.searchField},eq,${this.searchQuery.trim()})`
}
}
if (!where) {
return this.xWhere
}
return this.xWhere ? where + `~and(${this.xWhere})` : where
},
nestedAndRollupColumnParams() {
// generate params for nested columns
const nestedFields = ((this.meta && this.meta.v && this.meta.v) || []).reduce((obj, vc) => {
if (vc.hm) {
obj.hm.push(vc.hm.tn)
} else if (vc.bt) {
obj.bt.push(vc.bt.rtn)
} else if (vc.mm) {
obj.mm.push(vc.mm.rtn)
}
return obj
}, { hm: [], bt: [], mm: [] })
// todo: handle if virtual column missing
// construct fields args based on lookup columns
const fieldsObj = ((this.meta && this.meta.v && this.meta.v) || []).reduce((obj, vc) => {
if (!vc.lk) {
return obj
}
let key
let index
let column
switch (vc.lk.type) {
case 'mm':
index = nestedFields.mm.indexOf(vc.lk.ltn) + 1
key = `mfields${index}`
column = vc.lk.lcn
break
case 'hm':
index = nestedFields.hm.indexOf(vc.lk.ltn) + 1
key = `hfields${index}`
column = vc.lk.lcn
break
case 'bt':
index = nestedFields.bt.indexOf(vc.lk.ltn) + 1
key = `bfields${index}`
column = vc.lk.lcn
break
}
if (index && column) {
obj[key] = `${obj[key] ? `${obj[key]},` : ''}${column}`
}
return obj
}, {})
return {
...Object.entries(nestedFields).reduce((ro, [k, a]) => ({ ...ro, [k]: a.join(',') }), {}),
...fieldsObj
}
},
queryParams() {
return {
limit: this.size,
offset: this.size * (this.page - 1),
// condition: this.condition,
where: this.concatenatedXWhere,
sort: this.sort,
...this.nestedAndRollupColumnParams
// ...Object.entries(nestedFields).reduce((ro, [k, a]) => ({ ...ro, [k]: a.join(',') })),
// ...fieldsObj
}
},
colLength() {
return (this.availableColumns && this.availableColumns.length) || 0
},
visibleColLength() {
return (this.availableColumns && this.availableColumns.length) || 0
},
rowLength() {
return (this.data && this.data.length) || 0
},
edited() {
return this.data && this.data.some(r => r.rowMeta && (r.rowMeta.new || r.rowMeta.changed))
},
hasMany() {
// todo: use cn alias
return this.meta && this.meta.hasMany
? this.meta.hasMany.reduce((hm, o) => {
const _rcn = this.meta.columns.find(c => c.cn === o.rcn)._cn
hm[_rcn] = hm[_rcn] || []
hm[_rcn].push(o)
return hm
}, {})
: {}
},
haveHasManyrelation() {
return !!Object.keys(this.hasMany).length
},
belongsTo() {
return this.meta && this.meta.belongsTo
? this.meta.belongsTo.reduce((bt, o) => {
const _cn = (this.meta.columns.find(c => c.cn === o.cn) || {})._cn
bt[_cn] = o
return bt
}, {})
: {}
},
table() {
if (this.relationType === 'hm') {
return this.relation.tn
} else if (this.relationType === 'bt') {
return this.relation.rtn
}
return this.nodes.tn || this.nodes.view_name
},
primaryValueColumn() {
if (!this.meta || !this.availableColumns || !this.availableColumns.length) {
return ''
}
return (this.availableColumns.find(col => col.pv) || { _cn: '' })._cn
}
},
watch: {
meta() {
this.mapFieldsAndShowFields()
},
'viewStatus.type'() {
if (!this.loadingMeta || !this.loadingData) {
this.syncDataDebounce(this)
}
},
showFields: {
handler(v) {
if (!this.loadingMeta || !this.loadingData) {
this.syncDataDebounce(this)
}
},
deep: true
},
extraViewParams: {
handler(v) {
if (!this.loadingMeta || !this.loadingData) {
this.syncDataDebounce(this)
}
},
deep: true
},
coverImageField(v) {
if (!this.loadingMeta || !this.loadingData) {
this.syncDataDebounce(this)
}
},
fieldsOrder: {
handler(v) {
if (!this.loadingMeta || !this.loadingData) {
this.syncDataDebounce(this)
}
},
deep: true
},
showSystemFields(v) {
if (!this.loadingMeta || !this.loadingData) {
this.syncDataDebounce(this)
}
},
filters: {
async handler(filter) {
let defaultQuery = ''
let j = 0
const xWhere = filter.reduce((condition, filt, k) => {
if (filt.readOnly) {
defaultQuery += `(${filt.field},eq,${filt.value})`
j++
return condition
}
const i = k - j
if (i && !filt.logicOp) {
return condition
}
if (!(filt.field && filt.op)) {
return condition
}
condition += (i ? `~${filt.logicOp}` : '')
switch (filt.op) {
case 'is equal':
return condition + `(${filt.field},eq,${filt.value})`
case 'is not equal':
return condition + `~not(${filt.field},eq,${filt.value})`
case 'is like':
return condition + `(${filt.field},like,%${filt.value}%)`
case 'is not like':
return condition + `~not(${filt.field},like,%${filt.value}%)`
case 'is empty':
return condition + `(${filt.field},in,)`
case 'is not empty':
return condition + `~not(${filt.field},in,)`
case 'is null':
return condition + `(${filt.field},is,null)`
case 'is not null':
return condition + `~not(${filt.field},is,null)`
case '<':
return condition + `(${filt.field},lt,${filt.value})`
case '<=':
return condition + `(${filt.field},le,${filt.value})`
case '>':
return condition + `(${filt.field},gt,${filt.value})`
case '>=':
return condition + `(${filt.field},ge,${filt.value})`
}
return condition
}, '')
this.xWhere = defaultQuery ? defaultQuery + (xWhere ? `~and(${xWhere})` : xWhere) : xWhere
// if (!this.progress) {
// await this.loadTableData();
// }
if (!this.loadingMeta || !this.loadingData) {
this.syncDataDebounce(this)
}
},
deep: true
},
sortList: {
async handler(sortList) {
const sort = sortList.map((sort) => {
return sort.field ? `${sort.order}${sort.field}` : ''
}).filter(Boolean).join(',')
this.sort = sort
// if (!this.progress) {
// await this.loadTableData();
// }
if (!this.loadingMeta || !this.loadingData) {
this.syncDataDebounce(this)
}
},
deep: true
},
columnsWidth() {
if (!this.loadingMeta || !this.loadingData) {
this.syncDataDebounce(this)
}
},
sort(n, o) {
if (o !== n) {
this.loadTableData()
}
},
concatenatedXWhere(n, o) {
if (o !== n) {
this.loadTableData()
}
}
}
}