|
| 1 | +<script> |
| 2 | +Vue.component('apijson-table', { |
| 3 | + delimiters: ['{', '}'], |
| 4 | + props: ["table_name"], |
| 5 | + template: `<div> |
| 6 | + <i-table stripe border :columns="tcolumns" :data="tlist" @on-sort-change="table_on_sort_change"></i-table> |
| 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"> |
| 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> |
| 13 | + </form-item> |
| 14 | + </i-form> |
| 15 | + </modal> |
| 16 | + <modal v-model="modal_delete" title="Confirm to delete" @on-ok="real_remove"> |
| 17 | + <p>Confirm to delete #{delete_params.row&&delete_params.row.id} in table '{table_name}'?</p> |
| 18 | + </modal> |
| 19 | +</div>`, |
| 20 | + data: function(){ |
| 21 | + var thisp = this |
| 22 | + return { |
| 23 | + modal_view: false, |
| 24 | + view_items: [], |
| 25 | + modal_delete: false, |
| 26 | + delete_params:{}, |
| 27 | + tcolumns: [ |
| 28 | + {title:'#',key:'id',width:80}, |
| 29 | + { |
| 30 | + title: 'Action', |
| 31 | + width: 140, |
| 32 | + render: (h, params) => { |
| 33 | + return h('div', [ |
| 34 | + h('Button', { |
| 35 | + props: { |
| 36 | + type: 'primary', |
| 37 | + size: 'small' |
| 38 | + }, |
| 39 | + style: { |
| 40 | + marginRight: '5px' |
| 41 | + }, |
| 42 | + on: { |
| 43 | + click: function(){ |
| 44 | + thisp.show(params) |
| 45 | + } |
| 46 | + } |
| 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 | + ]); |
| 60 | + } |
| 61 | + } |
| 62 | + ], |
| 63 | + tcolumns_init: false, |
| 64 | + tlist:[], |
| 65 | + query_count: 10, |
| 66 | + current_page: 1, |
| 67 | + total: 0, |
| 68 | + sort_key: "id", |
| 69 | + sort_order: "-" |
| 70 | + } |
| 71 | + }, |
| 72 | + methods: { |
| 73 | + update_list: function(){ |
| 74 | + var thisp = this |
| 75 | + var arr_params = { |
| 76 | + "@count":thisp.query_count, |
| 77 | + "@page":thisp.current_page-1, |
| 78 | + "@query":2 |
| 79 | + } |
| 80 | + arr_params[this.table_name] = { |
| 81 | + "@order":thisp.sort_key+thisp.sort_order, |
| 82 | + "@role":"{{=role}}" |
| 83 | + } |
| 84 | + var params = { |
| 85 | + "[]":arr_params, |
| 86 | + "total@":"/[]/total" |
| 87 | + } |
| 88 | + $.ajax({ |
| 89 | + type: "POST", |
| 90 | + url: "{{=url_for('uliweb_apijson.apijson.views.ApiJson.get')}}", |
| 91 | + contentType: 'application/json', |
| 92 | + data: JSON.stringify(params), |
| 93 | + success: function (data) { |
| 94 | + if (data.code==200) { |
| 95 | + var arr = data["[]"] |
| 96 | + 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 |
| 107 | + } |
| 108 | + thisp.tcolumns.push(col) |
| 109 | + } |
| 110 | + } |
| 111 | + thisp.tcolumns_init = true |
| 112 | + } |
| 113 | + } |
| 114 | + thisp.tlist = arr |
| 115 | + thisp.total = data.total |
| 116 | + } |
| 117 | + } |
| 118 | + }) |
| 119 | + }, |
| 120 | + show: function(params){ |
| 121 | + 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}) |
| 128 | + } |
| 129 | + } |
| 130 | + this.modal_view = true |
| 131 | + }, |
| 132 | + remove: function(params){ |
| 133 | + this.delete_params = params |
| 134 | + this.modal_delete = true |
| 135 | + }, |
| 136 | + real_remove: function(){ |
| 137 | + var thisp = this |
| 138 | + var params = { |
| 139 | + "@tag": thisp.table_name |
| 140 | + } |
| 141 | + params[thisp.table_name] = { |
| 142 | + "id": thisp.delete_params.row.id |
| 143 | + } |
| 144 | + $.ajax({ |
| 145 | + type: "POST", |
| 146 | + url: "{{=url_for('uliweb_apijson.apijson.views.ApiJson.delete')}}", |
| 147 | + contentType: 'application/json', |
| 148 | + data: JSON.stringify(params), |
| 149 | + success: function (data) { |
| 150 | + if (data.code!=200){ |
| 151 | + thisp.$Notice.error({ |
| 152 | + title: 'error when remove #'+thisp.delete_params.row.id+' in table '+thisp.table_name, |
| 153 | + desc: data.msg |
| 154 | + }) |
| 155 | + return |
| 156 | + } |
| 157 | + var result = data[thisp.table_name] |
| 158 | + if (result.code!=200){ |
| 159 | + thisp.$Notice.error({ |
| 160 | + title: 'error when remove #'+thisp.delete_params.row.id+' in table '+thisp.table_name, |
| 161 | + desc: result.msg |
| 162 | + }) |
| 163 | + return |
| 164 | + } |
| 165 | + thisp.$Notice.success({ |
| 166 | + title: 'success remove #'+thisp.delete_params.row.id+' in table '+thisp.table_name, |
| 167 | + desc: result.msg |
| 168 | + }); |
| 169 | + thisp.update_list() |
| 170 | + } |
| 171 | + }) |
| 172 | + }, |
| 173 | + table_on_sort_change: function(){ |
| 174 | + |
| 175 | + }, |
| 176 | + page_on_change: function(data) { |
| 177 | + this.update_list() |
| 178 | + }, |
| 179 | + page_on_page_size_change: function(data) { |
| 180 | + this.query_count = data |
| 181 | + this.current_page = 0 |
| 182 | + this.update_list() |
| 183 | + } |
| 184 | + }, |
| 185 | + mounted: function(){ |
| 186 | + this.update_list() |
| 187 | + } |
| 188 | +}) |
| 189 | +</script> |
0 commit comments