Skip to content

Commit

Permalink
$attrs, $listeners
Browse files Browse the repository at this point in the history
  • Loading branch information
szuprefix committed Dec 4, 2019
1 parent 703d8ce commit 0444965
Show file tree
Hide file tree
Showing 12 changed files with 283 additions and 116 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-django",
"version": "0.6.2",
"version": "0.7.0",
"description": "个人实验项目, 本框架的目标是借鉴并超越django admin的自动化思想, 实现UI前端的极简快速定制开发",
"main": "index.js",
"files": [
Expand Down
7 changes: 5 additions & 2 deletions src/components/layout/Actions.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<template v-for="a in showActions">
<el-button :type="a.type" :title="a.title" :size="size" @click="handleCommand(a.do)"
v-if="!a.show || a.show()" :key="a.name">
<i :class="`fa fa-${a.icon}`"></i>{{a.label}}
<i :class="getIconClass(a.icon)" v-if="a.icon"></i>{{a.label}}
</el-button>
</template>
<el-dropdown v-if="dropdownActions.length>0" @command="handleCommand" :size="size" :trigger="trigger">
Expand All @@ -13,7 +13,7 @@
<el-dropdown-menu slot="dropdown">
<template v-for="a in dropdownActions">
<el-dropdown-item :command="a.do" v-if="!a.show || a.show()" :key="a.name" :title="a.title"
:icon="`fa fa-${a.icon}`">
:icon="getIconClass(a.icon)">
{{a.label || a.title}}
</el-dropdown-item>
</template>
Expand Down Expand Up @@ -60,6 +60,9 @@
}
return a
},
getIconClass (icon) {
return icon && (icon.includes(' ') ? icon : `fa fa-${icon}`) || undefined
},
normalizeItems() {
this._items = array_normalize(this.items, this.map, this.normalizeItem)
},
Expand Down
1 change: 1 addition & 0 deletions src/components/model/Search.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
@change="onSearch"
clearable
:style="`width:${searchFieldNames.length+5}rem;min-width:10rem;`"
ref="search"
v-if="searchFields.length>0">
</el-input>
<template v-for="f in filterFields" v-if="! (f.name in exclude)">
Expand Down
43 changes: 23 additions & 20 deletions src/components/model/Table.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,15 @@
</el-drawer>

<remote-table :items="tableItems" :url="model.getListUrl()" ref="table" @loaded="onLoaded" v-if="optionLoaded"
:baseQueries="_baseQueries"
:options="rtOptions"></remote-table>
:baseQueries="_baseQueries" v-bind="rtAttrs" v-on="$listeners">

<template slot="left" v-if="$slots.left">
<slot name="left"></slot>
</template>
<template slot="right" v-if="$slots.right">
<slot name="right"></slot>
</template>
</remote-table>
</div>
</template>
<script>
Expand Down Expand Up @@ -104,7 +111,8 @@
title: '批量创建',
do: this.toBatchCreateModel,
show: () => this.checkPermission('create')
}
},
...this.$attrs.avairableActions
}
}
},
Expand Down Expand Up @@ -319,7 +327,7 @@
}
}
},
rtOptions () {
rtAttrs () {
let bactions = {}
if (this.model.config.actions) {
this.model.config.actions.forEach(a => {
Expand All @@ -329,22 +337,17 @@
}
})
}
let dopt = this.model.viewsConfig.list
dopt = dopt && dopt.options && dopt.options.remoteTable || {}
return mergeOptions(mergeOptions({
table: {
avairableActions: {...this.avairableActions, ...bactions},
excelFormat: this.excelFormat,
topActions: ['refresh', 'create', ['download'].concat(Object.keys(bactions))],
rowActions: ['edit', [this.parentMultipleRelationField ? 'removeFromParent' : 'delete']],
dblClickAction: 'edit',
permissionFunction: this.checkPermission,
elTable: {
onSelectionChange: this.onSelectionChange
},
title: this.model.config.verbose_name
}
}, dopt), this.options.remoteTable)
return {
topActions: ['refresh', 'create', ['download'].concat(Object.keys(bactions))],
rowActions: ['edit', [this.parentMultipleRelationField ? 'removeFromParent' : 'delete']],
excelFormat: this.excelFormat,
permissionFunction: this.checkPermission,
dblClickAction: 'edit',
'selection-change': this.onSelectionChange,
title: this.model.config.verbose_name,
...this.$attrs,
avairableActions: this.avairableActions
}
},
_baseQueries () {
return Object.assign({}, this.parentQueries, this.baseQueries)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<el-tooltip v-if="row.$errors && row.$errors[f.name]" effect="dark"
:content="row.$errors[f.name].join('\n')" placement="top">
<div class="data-table-column__error">
<form-widget v-if="f.useFormWidget" v-model="row" :field="f" :context="row"
<form-widget v-if="f.useFormWidget" v-model="row" :field="f" :context="context(row, $index)"
@change="onCellValueChange"></form-widget>
<component :is="f.widget" v-model="row[f.name]" :context="context(row, $index)" :field="f"
v-else-if="f.widget && typeof f.widget == 'object'"></component>
Expand All @@ -30,7 +30,7 @@
</div>
</el-tooltip>
<template v-else>
<form-widget v-if="f.useFormWidget" v-model="row" :field="f" :context="row"
<form-widget v-if="f.useFormWidget" v-model="row" :field="f" :context="context(row, $index)"
@change="onCellValueChange"></form-widget>
<component :is="f.widget" v-model="row[f.name]" :context="context(row, $index)" :field="f"
v-else-if="f.widget && typeof f.widget == 'object'"></component>
Expand Down
80 changes: 80 additions & 0 deletions src/components/table/EditableTable.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<template>
<x-table v-model="tableData" :items="tableItems" v-bind="$attrs" v-on="$listeners"
:topActions="[]" :rowActions="[{name:newLine, icon:'iconfont icon-return', title:'插入一行', do:newLine}]">

<template slot="left" v-if="$slots.left">
<slot name="left"></slot>
</template>
<template slot="right" v-if="$slots.right">
<slot name="right"></slot>
</template>
</x-table>
</template>
<script>
import XTable from './Table.vue'
import EditableLabel from '../widgets/EditableLabel.vue'
import {range} from 'lodash'
export default{
props: {
value: Array,
items: Array,
moreCount: {type: Number, default: 10}
},
data () {
return {
tableData: [],
tableItems: [],
captureKeyCode: '',
isNewLine: false
}
},
components: {XTable, EditableLabel},
created () {
this.normalizeItems()
this.genTableData()
},
methods: {
newLine ({$index}) {
this.value.splice($index + 1, 0, {})
this.isNewLine = true
this.$emit('input', this.value)
this.$nextTick(() => {
this.genTableData()
this.isNewLine = false
})
},
normalizeItems(){
this.tableItems = this.items.map(a => {
return {
...a,
alwaysEditable: true,
useFormWidget: true,
onChanged: this.onChange,
widget: EditableLabel
}
})
},
onChange ({context}) {
let {$index} = context
let td = this.tableData
td = td.slice(0, Math.max($index + 1, td.length - this.moreCount))
this.$emit('input', td)
},
genTableData (d) {
this.tableData = this.value.concat(range(this.moreCount).map(a => {
return {}
}))
}
},
computed: {},
watch: {
value (v) {
if (this.isNewLine) {
this.tableData = []
} else {
this.genTableData()
}
}
}
}
</script>
30 changes: 15 additions & 15 deletions src/components/table/RemoteTable.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
<template>
<div>
<x-table :items="items" :cellWidget="tOptions.cellWidget" v-model="data" v-loading="loading"
:element-loading-text="loading" :topActions="tOptions.topActions" :rowActions="tOptions.rowActions"
:headerWidget="tOptions.headerWidget" :group="group" :dblClickAction="tOptions.dblClickAction" :options="tOptions">
<div v-loading="loading" :element-loading-text="loading">
<x-table :items="items" v-model="data" v-on="$listeners" v-bind="tAttrs">
<template slot="left" v-if="$slots.left">
<slot name="left"></slot>
</template>
<template slot="right" v-if="$slots.right">
<slot name="right"></slot>
</template>
</x-table>
<!--<div class="pager-container">-->
<el-pagination v-if="count>pageSize || showPagger"
Expand Down Expand Up @@ -33,12 +37,6 @@
return {}
}
},
options: {
type: Object,
default: () => {
return {}
}
},
url: String,
pageSize: {type: Number, default: () => DEFAULT_PAGE_SIZE},
},
Expand All @@ -56,6 +54,7 @@
title: '刷新',
do: this.refresh
},
...this.$attrs.avairableActions
}
}
},
Expand Down Expand Up @@ -100,12 +99,13 @@
}
},
computed: {
tOptions () {
return mergeOptions({
tAttrs () {
return {
excelGetAllData: this.excelGetAllData,
avairableActions: this.avairableActions,
topActions:['refresh', 'download']
}, this.options.table)
topActions: ['refresh', 'download'],
...this.$attrs,
avairableActions: this.avairableActions
}
},
},
Expand Down
40 changes: 35 additions & 5 deletions src/components/table/Table.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ function customizer(objValue, srcValue) {
}
}

export function mergeOptions (a, b) {
export function mergeOptions(a, b) {
return mergeWith(a, b, customizer)
}
export function genSpanMap (data, fields) {
export function genSpanMap(data, fields, group) {
let vs = data
let fs = fields
let m = {}
Expand All @@ -23,10 +23,11 @@ export function genSpanMap (data, fields) {
m[i] = {}
let b = true
fs.forEach((f, j) => {
if (b == false) {
lm[f] = undefined
if (group > 0 && j >= group) {
m[i][j] = 1
return
}
if (r[f] !== lm[f]) {
if (b === false || r[f] !== lm[f]) {
let c = pm[f] || 0
m[i - c][j] = c
pm[f] = 0
Expand Down Expand Up @@ -58,4 +59,33 @@ export function flatten(ns, children_field_name) {
}
})
return r
}

export function rowIsEmpty(obj) {
return Object.values(obj).find(a => a === 0 || ![undefined, null, ''].includes(a)) === undefined
}

export function clearEmptyRow(table) {
return table.filter(r => !rowIsEmpty(r))
}

export function autoFill(table, items, group) {
let lr = undefined
table.forEach(r => {
if (lr) {
let b = true
items.forEach((i, j) => {
if (group > 0 && j >= group) {
return
}
if ( b && [undefined, null, ''].includes(r[i.name])) {
r[i.name] = lr[i.name]
} else {
b = false
}
})
}
lr = r
})
return table
}

0 comments on commit 0444965

Please sign in to comment.