|
1 | 1 | <script>
|
2 | 2 | Vue.component('apijson-table', {
|
3 | 3 | delimiters: ['{', '}'],
|
4 |
| - props: ["table_name"], |
| 4 | + props: ["table_name","config"], |
5 | 5 | template: `<div>
|
6 | 6 | <i-table stripe border :columns="tcolumns" :data="tlist" @on-sort-change="table_on_sort_change"></i-table>
|
7 | 7 | <page :total="total" :page-size="query_count" :current.sync="current_page" :page-size-opts="[10, 20, 50, 100]" show-sizer @on-change="page_on_change" @on-page-size-change="page_on_page_size_change"></page>
|
8 |
| - <modal v-model="modal_view" title="View"> |
| 8 | + <modal v-model="modal_view" :title="viewedit_label"> |
9 | 9 | <i-form @submit.native.prevent :label-width="80">
|
10 |
| - <form-item v-for="item in view_items" :key="item.key" :label="item.key"> |
11 |
| - <i-input v-if="typeof item.value !=='boolean'" v-model="item.value" :readonly=true></i-input> |
12 |
| - <checkbox v-if="typeof item.value ==='boolean'" v-model="item.value" disabled></checkbox> |
| 10 | + <form-item v-for="item in viewedit_items" :key="item.key" :label="item.title"> |
| 11 | + <i-input v-if="item.type=='input'" v-model="item.value" :readonly="!editable(item)"></i-input> |
| 12 | + <checkbox v-if="item.type=='checkbox'" v-model="item.value" :disabled="!editable(item)"></checkbox> |
| 13 | + <i-input v-if="item.type=='textarea'" v-model="item.value" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></i-input> |
| 14 | + </form-item> |
| 15 | + <form-item v-if="config_editable" label="action"> |
| 16 | + <i-button type="info" icon="ios-download" @click="save">Save</i-button> |
13 | 17 | </form-item>
|
14 | 18 | </i-form>
|
15 | 19 | </modal>
|
|
21 | 25 | var thisp = this
|
22 | 26 | return {
|
23 | 27 | modal_view: false,
|
24 |
| - view_items: [], |
| 28 | + viewedit_items: [], |
| 29 | + |
| 30 | + edit_params: {}, |
| 31 | + |
25 | 32 | modal_delete: false,
|
26 |
| - delete_params:{}, |
27 |
| - tcolumns: [ |
28 |
| - {title:'#',key:'id',width:80}, |
29 |
| - { |
| 33 | + delete_params: {}, |
| 34 | + |
| 35 | + tcolumns: [], |
| 36 | + tcolumns_preset: { |
| 37 | + "id": {title:'#',key:'id',width:80}, |
| 38 | + "action": { |
30 | 39 | title: 'Action',
|
31 | 40 | width: 140,
|
32 |
| - render: (h, params) => { |
33 |
| - return h('div', [ |
| 41 | + render: function(h, params){ |
| 42 | + var delete_button = h('Button', { |
| 43 | + props: { |
| 44 | + type: 'error', |
| 45 | + size: 'small' |
| 46 | + }, |
| 47 | + on: { |
| 48 | + click: function(){ |
| 49 | + thisp.remove(params) |
| 50 | + } |
| 51 | + } |
| 52 | + }, 'Delete') |
| 53 | + var buttons = [ |
34 | 54 | h('Button', {
|
35 | 55 | props: {
|
36 | 56 | type: 'primary',
|
|
44 | 64 | thisp.show(params)
|
45 | 65 | }
|
46 | 66 | }
|
47 |
| - }, 'View'), |
48 |
| - h('Button', { |
49 |
| - props: { |
50 |
| - type: 'error', |
51 |
| - size: 'small' |
52 |
| - }, |
53 |
| - on: { |
54 |
| - click: function(){ |
55 |
| - thisp.remove(params) |
56 |
| - } |
57 |
| - } |
58 |
| - }, 'Delete') |
59 |
| - ]); |
| 67 | + }, thisp.viewedit_label) |
| 68 | + ] |
| 69 | + if (thisp.config_editable) { |
| 70 | + buttons.push(delete_button) |
| 71 | + } |
| 72 | + return h('div', buttons); |
60 | 73 | }
|
61 | 74 | }
|
62 |
| - ], |
| 75 | + }, |
63 | 76 | tcolumns_init: false,
|
64 | 77 | tlist:[],
|
65 | 78 | query_count: 10,
|
66 | 79 | current_page: 1,
|
67 | 80 | total: 0,
|
68 | 81 | sort_key: "id",
|
69 |
| - sort_order: "-" |
| 82 | + sort_order: "-", |
| 83 | + |
| 84 | + config_editable: false, |
| 85 | + config_table_fields: null, |
| 86 | + config_viewedit_fields: null |
70 | 87 | }
|
71 | 88 | },
|
| 89 | + computed: { |
| 90 | + viewedit_label: function(){return this.config_editable?'Edit':'View'} |
| 91 | + }, |
72 | 92 | methods: {
|
73 | 93 | update_list: function(){
|
74 | 94 | var thisp = this
|
|
94 | 114 | if (data.code==200) {
|
95 | 115 | var arr = data["[]"]
|
96 | 116 | if (!thisp.tcolumns_init) {
|
97 |
| - if (arr.length>0) { |
98 |
| - var item = arr[0] |
99 |
| - for (var k in item){ |
100 |
| - if (k!="id") { |
101 |
| - var col = {title:k,key:k} |
102 |
| - if (typeof item[k] ==="boolean") { |
103 |
| - col["width"] = 80 |
104 |
| - } |
105 |
| - else if (typeof item[k] ==="number") { |
106 |
| - col["width"] = 100 |
| 117 | + if (thisp.config_table_fields!=null){ |
| 118 | + thisp.tcolumns = thisp.config_table_fields |
| 119 | + thisp.tcolumns.push(thisp.tcolumns_preset["action"]) |
| 120 | + thisp.tcolumns_init = true |
| 121 | + } |
| 122 | + else { |
| 123 | + thisp.tcolumns.push(thisp.tcolumns_preset["id"]) |
| 124 | + if (arr.length>0) { |
| 125 | + var item = arr[0] |
| 126 | + for (var k in item){ |
| 127 | + if (k!="id") { |
| 128 | + var col = {title:k,key:k} |
| 129 | + if (typeof item[k] ==="boolean") { |
| 130 | + col["width"] = 80 |
| 131 | + } |
| 132 | + else if (typeof item[k] ==="number") { |
| 133 | + col["width"] = 100 |
| 134 | + } |
| 135 | + thisp.tcolumns.push(col) |
107 | 136 | }
|
108 |
| - thisp.tcolumns.push(col) |
109 | 137 | }
|
| 138 | + thisp.tcolumns.push(thisp.tcolumns_preset["action"]) |
| 139 | + thisp.tcolumns_init = true |
110 | 140 | }
|
111 |
| - thisp.tcolumns_init = true |
112 | 141 | }
|
113 | 142 | }
|
114 | 143 | thisp.tlist = arr
|
|
119 | 148 | },
|
120 | 149 | show: function(params){
|
121 | 150 | var row = params.row
|
122 |
| - this.view_items = [] |
123 |
| - this.view_items.push({key:"id",value:row.id}) |
124 |
| - for (var k in row){ |
125 |
| - if (k!="id" && k[0]!="_") { |
126 |
| - value = row[k] |
127 |
| - this.view_items.push({key:k,value:value}) |
| 151 | + this.viewedit_items = [] |
| 152 | + if (this.config_viewedit_fields!=null) { |
| 153 | + for (var i in this.config_viewedit_fields) { |
| 154 | + var d = this.config_viewedit_fields[i] |
| 155 | + d.value = row[d.key] |
| 156 | + d.type = d.type || "input" |
| 157 | + this.viewedit_items.push(d) |
| 158 | + } |
| 159 | + } |
| 160 | + else { |
| 161 | + this.viewedit_items.push({title:"id",value:row.id,"type":"input"}) |
| 162 | + var type2type = { |
| 163 | + "boolean":"checkbox" |
128 | 164 | }
|
| 165 | + for (var k in row){ |
| 166 | + if (k!="id" && k[0]!="_") { |
| 167 | + var value = row[k] |
| 168 | + var type = type2type[typeof value] || "input" |
| 169 | + this.viewedit_items.push({title:k,value:value,type:type}) |
| 170 | + } |
| 171 | + } |
| 172 | + } |
| 173 | + if (this.config_editable){ |
| 174 | + this.edit_params = params |
| 175 | + } |
| 176 | + else { |
| 177 | + this.edit_params = null |
129 | 178 | }
|
130 | 179 | this.modal_view = true
|
131 | 180 | },
|
| 181 | + editable: function(item){ |
| 182 | + var editable = true |
| 183 | + if (item.editable!=null) {editable=item.editable} |
| 184 | + return this.config_editable && editable && (item.key!="id") |
| 185 | + }, |
132 | 186 | remove: function(params){
|
133 | 187 | this.delete_params = params
|
134 | 188 | this.modal_delete = true
|
135 | 189 | },
|
| 190 | + save: function(){ |
| 191 | + var thisp = this |
| 192 | + var params = { |
| 193 | + "@tag": thisp.table_name |
| 194 | + } |
| 195 | + var record_params = {} |
| 196 | + var row = thisp.edit_params.row |
| 197 | + |
| 198 | + for (var k in thisp.viewedit_items) { |
| 199 | + var d = thisp.viewedit_items[k] |
| 200 | + if (d.key=="id"|| d.value!=row[d.key]) { |
| 201 | + record_params[d.key] = d.value |
| 202 | + } |
| 203 | + } |
| 204 | + params[thisp.table_name] = record_params |
| 205 | + $.ajax({ |
| 206 | + type: "POST", |
| 207 | + url: "{{=url_for('uliweb_apijson.apijson.views.ApiJson.put')}}", |
| 208 | + contentType: 'application/json', |
| 209 | + data: JSON.stringify(params), |
| 210 | + success: function (data) { |
| 211 | + if (data.code==200){ |
| 212 | + thisp.$Notice.success({ |
| 213 | + title: 'success update #'+row.id+' in table '+thisp.table_name, |
| 214 | + desc: data.msg |
| 215 | + }) |
| 216 | + thisp.update_list() |
| 217 | + } |
| 218 | + else { |
| 219 | + thisp.$Notice.error({ |
| 220 | + title: 'error when update #'+row.id+' in table '+thisp.table_name, |
| 221 | + desc: data.msg |
| 222 | + }) |
| 223 | + } |
| 224 | + } |
| 225 | + }) |
| 226 | + }, |
136 | 227 | real_remove: function(){
|
137 | 228 | var thisp = this
|
138 | 229 | var params = {
|
|
183 | 274 | }
|
184 | 275 | },
|
185 | 276 | mounted: function(){
|
| 277 | + if (this.config!=null){ |
| 278 | + this.config_editable = this.config.editable || false |
| 279 | + this.config_table_fields = this.config.table_fields || null |
| 280 | + this.config_viewedit_fields = this.config.viewedit_fields || null |
| 281 | + } |
186 | 282 | this.update_list()
|
187 | 283 | }
|
188 | 284 | })
|
|
0 commit comments