Skip to content

Commit

Permalink
ModelTable add form action
Browse files Browse the repository at this point in the history
  • Loading branch information
@szuprefix
szuprefix committed Jun 28, 2019
1 parent 7790d23 commit 62f3bf2
Show file tree
Hide file tree
Showing 14 changed files with 183 additions and 114 deletions.
17 changes: 5 additions & 12 deletions src/components/layout/table/DataTable.vue
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,8 @@
<template>
<el-table :data="_value" ref="table" :span-method="spanMethod" :cell-class-name="options.cellClassName">
<!--<el-table-column :prop="f.name" :column-key="f.name" :label="f.label || f.name"-->
<!--:min-width="f.min_width" :width="f.width" :formater="f.formater"-->
<!--:align="f.align" :class-name="f.type"-->
<!--:type="f.type" v-for="f in _fields"-->
<!--:key="f.name">-->
<!--<template slot-scope="{row}">-->
<!--<component :is="f.widget" v-model="row" :prop="f.name" :field="f"-->
<!--v-if="f.widget && typeof f.widget == 'object'"></component>-->
<!--<span v-else-if="f.widget && typeof f.widget == 'function'" v-html="f.widget(row)"></span>-->
<!--<template v-else>{{row[f.name]}}</template>-->
<!--</template>-->
<!--</el-table-column>-->
<template slot="left"></template>
<data-table-column :field="f" v-for="f in _fields" :key="f.name"></data-table-column>
<template slot="right"></template>
</el-table>
</template>
<script>
Expand Down Expand Up @@ -51,6 +41,9 @@
},
components: {DataTableColumn},
methods: {
doLayout () {
this.$refs.table.doLayout()
},
spanMethod ({row, column, rowIndex, columnIndex}){
if (!this.group) {
return
Expand Down
58 changes: 27 additions & 31 deletions src/components/rest/FormTable.vue
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,24 @@
<template>
<div>
<r-form :formUrl="formUrl" :formItems="formTableFormItems" v-model="formValue" ref="form" v-if="dialogVisible"
<r-form :formUrl="formUrl" :formItems="formTableFormItems" v-model="formValue" ref="form"
v-if="dialogVisible" formInline formNoLabel
:formMethod="formMethod" @form-posted="formTableOnFormPosted" :formSubmit="modelFormSubmit"
:formTextareaSize="formTextareaSize">
</r-form>
<el-table :data="tableData" size="mini" v-loading="loading" :element-loading-text="loading" @row-dblclick="tableOnRowSelect">
<el-table :data="tableData" size="mini" v-loading="loading" :element-loading-text="loading"
@row-dblclick="tableOnRowSelect">
<el-table-column :prop="f.name" :column-key="f.name" :label="f.label || f.name"
:class-name="`${f.type} field_${f.name}`" v-for="f in modelTableItems"
:key="f.name" :type="f.columnType || undefined">
<template slot-scope="{row}">
<form-widget v-model="row" :field="f.field" v-if="f.useFormWidget"></form-widget>
<component :is="f.widget" v-model="row" :prop="f.name" :field="f.field"
v-if="f.widget && typeof f.widget == 'object'"></component>
v-else-if="f.widget && typeof f.widget == 'object'"></component>
<span v-else-if="f.widget && typeof f.widget == 'function'" v-html="f.widget(row)"></span>
<template v-else>{{row[f.name]}}</template>
</template>
</el-table-column>
<!--<el-table-column label="">-->
<!--<template slot="header">-->
<!--<el-button><i class="fa fa-plus"></i>产品 </el-button>-->
<!--</template>-->
<!--<template slot-scope="{row}">-->
<!--&lt;!&ndash;<el-button title="编辑" size="mini" @click="showEditForm(row)">&ndash;&gt;-->
<!--&lt;!&ndash;<i :class="`fa fa-pencil`"></i>&ndash;&gt;-->
<!--&lt;!&ndash;</el-button>&ndash;&gt;-->
<!--<el-button title="保存" size="mini" @click="saveRow(row)" v-if="readOnly == false">-->
<!--<i :class="`fa fa-save`"></i>-->
<!--</el-button>-->
<!--</template>-->
<!--</el-table-column>-->
<el-table-column :width="`${60*rowActionList.length}px`"
align="right">
<el-table-column :width="`${60*rowActionList.length}px`" align="right">
<template slot="header" slot-scope="scope">
<el-button title="新增" size="small" @click="showEditForm()" v-if="readOnly == false">
<i class="fa fa-plus"></i>
Expand Down Expand Up @@ -58,20 +47,18 @@
},
value: Object,
defaultCreateValue: {
type: Object, default: function () {
return {}
type: Object,
default: () => {
}
},
dataUrl: String,
editFields: {
type: Array, default: function () {
return []
}
type: Array,
default: () => []
},
createFields: {
type: Array, default: function () {
return []
}
type: Array,
default: () => []
},
readOnly: {
type: Boolean, default: false
Expand All @@ -81,7 +68,15 @@
// console.log(this.value)
this.modelTableInit()
this.modelFormInit()
// console.log(this.editFields)
},
created() {
this.modelTableAvairableActions['save'] = {
name: 'save',
icon: 'save',
title: '保存',
do: this.saveRow
}
// }
},
data () {
return {
Expand All @@ -92,7 +87,7 @@
},
components: {FormWidget, RForm, Actions},
methods: {
showEditForm(row){
showEditForm(row, show){
if (!row) {
this.modelData = Object.assign({}, this.modelEmptyDataFromOptions(this.modelFieldConfigs), this.defaultCreateValue)
this.formTableFormItems = this.formCreateItems
Expand All @@ -101,10 +96,11 @@
this.formTableFormItems = this.formEditItems
}
this.modelId = this.modelData.id
this.dialogVisible = true
this.dialogVisible = show === undefined ? true : show
},
saveRow(row){
this.showEditForm(row)
saveRow({row}){
console.log(row)
this.showEditForm(row, false)
this.$nextTick(() => {
this.$refs.form.onSubmit()
})
Expand Down
57 changes: 36 additions & 21 deletions src/components/rest/ModelBatchCreator.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
<template>
<el-row>
<el-row v-loading="loading" :element-loading-text="loading">
<el-col :span="11">
<csv-input v-model="value"
<csv-input v-model="_value"
:field="{name:'content', type:'string', items: csvItems, callback:change}"></csv-input>
</el-col>
<el-col :span="11" :offset="2">
<data-table :fields="tableItems" v-model="records" :group="true" :options="{cellClassName}"></data-table>
<el-button @click="batchCreate()" type="primary" :disabled="records.length===0">开始创建</el-button>
<data-table :fields="tableItems" v-model="records" ref="table" :group="true"
:options="{cellClassName}"></data-table>
</el-col>
</el-row>
</template>
Expand All @@ -17,62 +19,66 @@
export default{
props: {
structure: Object,
value: String ,
defaults: {
type: Object, default: a => {
}
}
},
data () {
return {
loading: false,
optionsLoading: true,
value: '',
records: [],
_value: '',
matrix: []
}
},
components: {CsvInput, DataTable},
created () {
this._value = this.value
this.loadModelOptions()
//
// let struct = {models:BatchCreator.getModels(this.structure)}
// BatchCreator.batchLoadOptions(struct.models).then((r)=> {
// struct.fields = this.fields = BatchCreator.getFields(this.structure)
//
//// console.log(BatchCreator.groupByModel(this.fields))
// this.$emit('struct', struct)
//// console.log(JSON.stringify(this.fields))
// })
},
methods: {
batchCreate(){
batchCreate(defaults){
let st = this._structure
queue_limit(this.matrix, 1, a => st.create(a)).then(data => {
console.log(st.getNotExists())
st.defaults = defaults || this.defaults
this.loading = '开始批量创建'
return queue_limit(this.matrix, 1, a => {
this.loading = a.join(',')
return st.create(a)
}).then(data => {
this.loading = false
this.$emit('posted', {count: this.matrix.length})
this.$store.state.bus.$emit('model-posted', {model: st.model.config})
this.$message({message: `批量创建成功`, type: 'success'})
})
},
change({matrix, records}){
let st = this._structure
let ds = st.genDataList(matrix)
this.records = records
this.matrix = matrix
console.log(JSON.stringify(matrix))
// console.log(JSON.stringify(matrix))
queue_limit(matrix, 1, a => st.checkPk(a)).then(data => {
// console.log(st.dmap)
console.log(st.foreignKeys[0].getNotExists())
this.$refs.table.doLayout()
// console.log(st.getNotExists())
})
this.$emit('change', {matrix, records})
},
cellClassName({row, column, rowIndex, columnIndex}){
let series = Object.values(row)
let d = this._structure.get(series)
return columnIndex < 3 ? ( d.id < 0 ? 'warning-row' : 'success-row') : ''
// console.log({rowIndex,columnIndex})
// return columnIndex < 3 ? ( d.id < 0 ? 'warning-row' : 'success-row') : ''
},
loadModelOptions () {
this.optionsLoading = true
BatchCreator.batchLoadOptions(this._structure.getModelNames()).then((r) => {
this.optionsLoading = false
// console.log(this._structure)
this.$emit('struct', this._structure)
})
}
Expand All @@ -91,9 +97,18 @@
return BatchCreator.genCsvItems(this.tableItems)
}
},
watched: {
watch: {
_structure (val) {
this.loadModelOptions()
},
defaults (dfs) {
this._structure.defaults = dfs
},
value(val){
this._value = val
},
_value(val){
this.$emit('change', val)
}
}
}
Expand Down
58 changes: 45 additions & 13 deletions src/components/rest/ModelTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,15 @@
:min-width="f.min_width" :width="f.width" :fixed="f.fixed"
:align="['number','integer'].includes(f.type)?'right':'left'"
:sortable="modelTableOrderingFields.includes(f.name) && 'custom'" :class-name="f.type"
:type="f.type" :filters="modelTableFilters[f.name]" v-for="f in modelTableItems"
:type="f.columnType || undefined" :filters="modelTableFilters[f.name]"
v-for="f in modelTableItems"
:filter-method="f.name in modelTableFilters?filterHandler:undefined"
:key="f.name">
:key="f.columnKey || f.name">
<template slot-scope="{row}">
<form-widget v-if="f.useFormWidget" v-model="row" :field="f"
@change="onCellValueChange"></form-widget>
<component :is="f.widget" v-model="row" :prop="f.name" :field="f.field"
v-if="f.widget && typeof f.widget == 'object'"></component>
v-else-if="f.widget && typeof f.widget == 'object'"></component>
<span v-else-if="f.widget && typeof f.widget == 'function'" v-html="f.widget(row)"></span>
<template v-else>{{row[f.name]}}</template>
</template>
Expand Down Expand Up @@ -83,24 +86,27 @@
<script>
import model_table from '../../mixins/model_table'
import Actions from '../layout/Actions.vue'
import FormWidget from '../widgets/FormWidget.vue'
import BatchActions from '../layout/BatchActions.vue'
import RelatedSelect from './RelatedSelect.vue'
// import DownloadExcel from 'vue-json-excel'
import XLSX from 'xlsx'
import Qs from 'qs'
export default{
mixins: [model_table],
components: {
RelatedSelect, Actions, BatchActions//, DownloadExcel
RelatedSelect, Actions, BatchActions, FormWidget//, DownloadExcel
},
created () {
},
mounted (){
this.modelTableInit()
},
data(){
return {
selectionCount: 0,
maxHeight: window.screen.availHeight - 100
maxHeight: window.screen.availHeight - 100,
changedData: {}
}
},
methods: {
Expand All @@ -109,10 +115,13 @@
return this.modelTableItems.map((a) => {
let v = d[a.name]
if (a.choices) {
return a.choices[v]
return a.choices.find(a => a.value===v).display_name
} else if (a.model) {
return d[`${a.name}_name`]
}
// if(typeof v === 'object'){
// return JSON.stringify(v)
// }
return v
})
Expand All @@ -125,11 +134,13 @@
this.loading = true
this.loadingText = '正在导出'
this.$http.get(`${this.tableUrl}?${Qs.stringify(d)}`).then(({data}) => {
let wb = XLSX.utils.book_new()
let ws = XLSX.utils.aoa_to_sheet(this.getGridData(data.results))
XLSX.utils.book_append_sheet(wb, ws, 'Sheet 1')
XLSX.writeFile(wb, `${this.modelTableTitle}.xlsx`)
this.loading = false
import('xlsx').then(XLSX => {
let wb = XLSX.utils.book_new()
let ws = XLSX.utils.aoa_to_sheet(this.getGridData(data.results))
XLSX.utils.book_append_sheet(wb, ws, 'Sheet 1')
XLSX.writeFile(wb, `${this.modelTableTitle}.xlsx`)
this.loading = false
})
}).catch(this.onServerResponseError)
},
onModelTableSelectionChange(selection){
Expand Down Expand Up @@ -173,7 +184,7 @@
d[a] = v
}
})
console.log(d)
// console.log(d)
this.tableUpdateQueries(d)
},
onSortChange(payLoad){
Expand All @@ -186,6 +197,24 @@
l.startsWith('是') ? `非${l.substr(1)}` : `非${l}`
)
)
},
onCellValueChange({form, field, value}){
let id = form.id
let fn = field.name
let d = this.changedData[id] || {}
d[fn] = value
this.changedData[id] = d
let pd = {}
this.patchFields.forEach(a => {
pd[a.name] = form[a.name]
})
this.$http.patch(this.modelGetDetailUrl(id), pd).then(({data}) => {
this.$message({message: '保存成功', type: 'success'})
this.$emit('change', {data: this.tableData})
}).catch(error => {
this.onServerResponseError(error)
this.$message({message: '数据检验未通过，请修正.', type: 'error'})
})
}
},
computed: {
Expand All @@ -194,6 +223,9 @@
},
selectionIds(){
return this.selection.map((a) => a.id)
},
patchFields () {
return this.modelTableItems.filter(a => a.useFormWidget)
}
},
watch: {
Expand Down
1 change: 0 additions & 1 deletion src/components/widgets/ChoicesDisplay.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
export default{
props: {
value: Object,
prop:String,
field: Object
},
computed:{
Expand Down

0 comments on commit 62f3bf2

Please sign in to comment.