Skip to content

Commit d1576ac

Browse files
zhangchunlinzhangchunlin
committed
change hook function names; change "type" to "component" in fields config; override modal footer, only cancel button; add checkbox render; add set deleted support
1 parent 155298c commit d1576ac

File tree

2 files changed

+133
-30
lines changed

2 files changed

+133
-30
lines changed

‎.gitignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,6 @@ build
44
dist
55
*.egg-info
66
.idea
7-
_git
7+
_git
8+
.vscode
9+

‎uliweb_apijson/apijson/templates/vue/inc_apijson_table.html

+130-29
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<script>
22
Vue.component('apijson-table', {
33
delimiters: ['{', '}'],
4-
props: ["table_name","config","func_init","func_change_params"],
4+
props: [
5+
"table_name",
6+
"config",
7+
"hook_init",
8+
"hook_ajax_params"
9+
],
510
template: `<div>
611
<div v-if="config_editable && config_add_fields!=null"><i-button type="primary" @click="add">Add</i-button> <br><br> </div>
712
<Spin size="large" fix v-if="loading"></Spin>
@@ -10,26 +15,32 @@
1015
<modal v-model="modal_add" title="Add">
1116
<i-form @submit.native.prevent :label-width="80">
1217
<form-item v-for="item in add_items" :key="item.key" :label="item.title">
13-
<i-input v-if="item.type=='input'" v-model="item.value"></i-input>
14-
<checkbox v-if="item.type=='checkbox'" v-model="item.value"></checkbox>
15-
<i-input v-if="item.type=='textarea'" v-model="item.value" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></i-input>
18+
<i-input v-if="item.component=='input'" v-model="item.value"></i-input>
19+
<checkbox v-if="item.component=='checkbox'" v-model="item.value"></checkbox>
20+
<i-input v-if="item.component=='textarea'" v-model="item.value" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></i-input>
1621
</form-item>
1722
<form-item v-if="config_editable" label="action">
18-
<i-button type="info" icon="plus" @click="real_add">Add</i-button>
23+
<i-button type="info" icon="plus" size="large" @click="real_add">Add</i-button>
1924
</form-item>
2025
</i-form>
26+
<div slot="footer">
27+
<i-button type="default" size="large" @click="modal_add=false">Cancel</i-button>
28+
</div>
2129
</modal>
2230
<modal v-model="modal_view" :title="viewedit_label">
2331
<i-form @submit.native.prevent :label-width="80">
2432
<form-item v-for="item in viewedit_items" :key="item.key" :label="item.title">
25-
<i-input v-if="item.type=='input'" v-model="item.value" :readonly="!editable(item)"></i-input>
26-
<checkbox v-if="item.type=='checkbox'" v-model="item.value" :disabled="!editable(item)"></checkbox>
27-
<i-input v-if="item.type=='textarea'" v-model="item.value" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></i-input>
33+
<i-input v-if="item.component=='input'" v-model="item.value" :readonly="!editable(item)"></i-input>
34+
<checkbox v-if="item.component=='checkbox'" v-model="item.value" :disabled="!editable(item)"></checkbox>
35+
<i-input v-if="item.component=='textarea'" v-model="item.value" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></i-input>
2836
</form-item>
2937
<form-item v-if="config_editable" label="action">
30-
<i-button type="info" icon="ios-download" @click="save">Save</i-button>
38+
<i-button type="info" icon="ios-download" size="large" @click="save">Save</i-button>
3139
</form-item>
3240
</i-form>
41+
<div slot="footer">
42+
<i-button type="default" size="large" @click="modal_view=false">Cancel</i-button>
43+
</div>
3344
</modal>
3445
<modal v-model="modal_delete" title="Confirm to delete" @on-ok="real_remove">
3546
<p>Confirm to delete #{delete_params.row&&delete_params.row.id} in table '{table_name}'?</p>
@@ -91,9 +102,24 @@
91102
}
92103
}
93104
},
105+
tcolumns_render_generator: {
106+
checkbox: function(key) {
107+
var render_func = function(h,params){
108+
var row = params.row
109+
return h('Icon',{
110+
attrs:{
111+
type: row[key]?"ios-checkmark":"ios-checkmark-outline",
112+
color: row[key]?"#2d8cf0":"#bbbec4",
113+
size: "25"
114+
},
115+
})
116+
}
117+
return render_func
118+
}
119+
},
94120
tcolumns_init: false,
95121
tlist:[],
96-
query_count: 10,
122+
query_count: thisp.config ? (thisp.config.default_page_size || 10) : 10,
97123
current_page: 1,
98124
total: 0,
99125
sort_key: "id",
@@ -109,6 +135,29 @@
109135
viewedit_label: function(){return this.config_editable?'Edit':'View'}
110136
},
111137
methods: {
138+
tcolumns_custom_render(){
139+
for (var k in this.tcolumns) {
140+
var c = this.tcolumns[k]
141+
if (c.component!=null) {
142+
var g = this.tcolumns_render_generator[c.component]
143+
if (g!=null){
144+
c.render = g(c.key)
145+
}
146+
}
147+
}
148+
},
149+
ajax_hook: function(method,action,params) {
150+
if (this.hook_ajax_params!=null) {
151+
var after_hook = this.hook_ajax_params(method,action,params)
152+
if (after_hook!=null) {
153+
params = after_hook
154+
}
155+
else {
156+
console.log("warning: hook_ajax_params('"+method+"','"+action+"',params) return null, so ignore this hook")
157+
}
158+
}
159+
return params
160+
},
112161
update_list: function(){
113162
var thisp = this
114163
var arr_params = {
@@ -124,9 +173,7 @@
124173
"[]":arr_params,
125174
"total@":"/[]/total"
126175
}
127-
if (thisp.func_change_params!=null) {
128-
params = thisp.func_change_params("apijson_get",params)
129-
}
176+
params = thisp.ajax_hook("apijson_get","list",params)
130177
thisp.loading = true
131178
$.ajax({
132179
type: "POST",
@@ -141,6 +188,7 @@
141188
if (thisp.config_table_fields!=null){
142189
thisp.tcolumns = thisp.config_table_fields
143190
thisp.tcolumns.push(thisp.tcolumns_preset["action"])
191+
thisp.tcolumns_custom_render()
144192
thisp.tcolumns_init = true
145193
}
146194
else {
@@ -160,13 +208,20 @@
160208
}
161209
}
162210
thisp.tcolumns.push(thisp.tcolumns_preset["action"])
211+
thisp.tcolumns_custom_render()
163212
thisp.tcolumns_init = true
164213
}
165214
}
166215
}
167216
thisp.tlist = arr
168217
thisp.total = data.total
169218
}
219+
else {
220+
thisp.$Notice.error({
221+
title: 'error when get table '+thisp.table_name,
222+
desc: data.msg
223+
})
224+
}
170225
}
171226
})
172227
},
@@ -177,20 +232,20 @@
177232
for (var i in this.config_viewedit_fields) {
178233
var d = this.config_viewedit_fields[i]
179234
d.value = row[d.key]
180-
d.type = d.type || "input"
235+
d.component = d.component || "input"
181236
this.viewedit_items.push(d)
182237
}
183238
}
184239
else {
185-
this.viewedit_items.push({title:"id",value:row.id,"type":"input"})
186-
var type2type = {
240+
this.viewedit_items.push({title:"id",value:row.id,component:"input"})
241+
var type2comp = {
187242
"boolean":"checkbox"
188243
}
189244
for (var k in row){
190245
if (k!="id" && k[0]!="_") {
191246
var value = row[k]
192-
var type = type2type[typeof value] || "input"
193-
this.viewedit_items.push({title:k,value:value,type:type})
247+
var comp = type2comp[typeof value] || "input"
248+
this.viewedit_items.push({title:k,value:value,component:comp})
194249
}
195250
}
196251
}
@@ -226,9 +281,7 @@
226281
}
227282
}
228283
params[thisp.table_name] = record_params
229-
if (thisp.func_change_params!=null) {
230-
params = thisp.func_change_params("apijson_put",params)
231-
}
284+
params = thisp.ajax_hook("apijson_put","update",params)
232285
$.ajax({
233286
type: "POST",
234287
url: "{{=url_for('uliweb_apijson.apijson.views.ApiJson.put')}}",
@@ -253,16 +306,64 @@
253306
})
254307
},
255308
real_remove: function(){
309+
if (this.config_delete_set_deleted) {
310+
this.real_remove_set_deleted()
311+
}
312+
else {
313+
this.real_remove_delete()
314+
}
315+
},
316+
real_remove_set_deleted: function(){
317+
var thisp = this
318+
var params = {
319+
"@tag": thisp.table_name
320+
}
321+
var params_table = {
322+
"id": thisp.delete_params.row.id,
323+
}
324+
params_table[this.config_deleted_field_name] = true
325+
params[thisp.table_name] = params_table
326+
327+
params = thisp.ajax_hook("apijson_put","delete",params)
328+
329+
$.ajax({
330+
type: "POST",
331+
url: "{{=url_for('uliweb_apijson.apijson.views.ApiJson.put')}}",
332+
contentType: 'application/json',
333+
data: JSON.stringify(params),
334+
success: function (data) {
335+
if (data.code!=200){
336+
thisp.$Notice.error({
337+
title: 'error when remove #'+thisp.delete_params.row.id+' in table '+thisp.table_name,
338+
desc: data.msg
339+
})
340+
return
341+
}
342+
var result = data[thisp.table_name]
343+
if (result.code!=200){
344+
thisp.$Notice.error({
345+
title: 'error when remove #'+thisp.delete_params.row.id+' in table '+thisp.table_name,
346+
desc: result.msg
347+
})
348+
return
349+
}
350+
thisp.$Notice.success({
351+
title: 'success remove #'+thisp.delete_params.row.id+' in table '+thisp.table_name,
352+
desc: result.msg
353+
})
354+
thisp.update_list()
355+
}
356+
})
357+
},
358+
real_remove_delete: function(){
256359
var thisp = this
257360
var params = {
258361
"@tag": thisp.table_name
259362
}
260363
params[thisp.table_name] = {
261364
"id": thisp.delete_params.row.id
262365
}
263-
if (thisp.func_change_params!=null) {
264-
params = thisp.func_change_params("apijson_delete",params)
265-
}
366+
params = thisp.ajax_hook("apijson_delete","delete",params)
266367
$.ajax({
267368
type: "POST",
268369
url: "{{=url_for('uliweb_apijson.apijson.views.ApiJson.delete')}}",
@@ -310,9 +411,7 @@
310411
post_params[d.key] = d.value
311412
}
312413
params[this.table_name] = post_params
313-
if (thisp.func_change_params!=null) {
314-
params = thisp.func_change_params("apijson_post",params)
315-
}
414+
params = thisp.ajax_hook("apijson_post","add",params)
316415
$.ajax({
317416
type: "POST",
318417
url: "{{=url_for('uliweb_apijson.apijson.views.ApiJson.post')}}",
@@ -360,9 +459,11 @@
360459
if (this.config.default_page_size!=null) {
361460
this.query_count = this.config.default_page_size
362461
}
462+
this.config_delete_set_deleted = this.config.delete_set_deleted || false
463+
this.config_deleted_field_name = this.config.deleted_field_name || "deleted"
363464
}
364-
if (this.func_init!=null) {
365-
this.func_init(this)
465+
if (this.hook_init!=null) {
466+
this.hook_init(this)
366467
}
367468
this.update_list()
368469
}

0 commit comments

Comments
 (0)