|
| 1 | +<script> |
| 2 | +Vue.component('apijson-viewedit',{ |
| 3 | +delimiters:['{','}'], |
| 4 | +props:[ |
| 5 | +"model_name", |
| 6 | +"request_tag", |
| 7 | +"id", |
| 8 | +"config", |
| 9 | +"custom_tcolumns_render_generator", |
| 10 | +"hook_init", |
| 11 | +"hook_ajax_params" |
| 12 | +], |
| 13 | +template:` |
| 14 | +<i-form @submit.native.prevent :label-width="80"> |
| 15 | + <form-item v-for="item in viewedit_items" :key="item.key" :label="item.title"> |
| 16 | + <i-input v-if="item.component=='input'" v-model="item.value" :readonly="!editable(item)"></i-input> |
| 17 | + <checkbox v-if="item.component=='checkbox'" v-model="item.value" :disabled="!editable(item)"></checkbox> |
| 18 | + <i-input v-if="item.component=='textarea'" v-model="item.value" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></i-input> |
| 19 | + </form-item> |
| 20 | + <form-item v-if="config_editable" label="action"> |
| 21 | + <i-button type="info" icon="ios-download" size="large" @click="save">Save</i-button> |
| 22 | + </form-item> |
| 23 | +</i-form> |
| 24 | + `, |
| 25 | +data:function(){ |
| 26 | +return{ |
| 27 | +l_request_tag:null, |
| 28 | +role:"{{=role}}", |
| 29 | +row:{}, |
| 30 | +row_saved:{}, |
| 31 | +viewedit_items:[], |
| 32 | + |
| 33 | +config_editable:false, |
| 34 | +config_viewedit_fields:null, |
| 35 | +} |
| 36 | +}, |
| 37 | +methods:{ |
| 38 | +init_viewedit:function(){ |
| 39 | +varparams={} |
| 40 | +varmodel_params={ |
| 41 | +"id":this.id, |
| 42 | +"@role":this.role |
| 43 | +} |
| 44 | +params[this.model_name]=model_params |
| 45 | +varthisp=this |
| 46 | +$.ajax({ |
| 47 | +type:"POST", |
| 48 | +url:"{{=url_for('uliweb_apijson.apijson.views.ApiJson.get')}}", |
| 49 | +contentType:'application/json', |
| 50 | +data:JSON.stringify(params), |
| 51 | +success:function(data){ |
| 52 | +if(data.code==200){ |
| 53 | +thisp.row=data[thisp.model_name] |
| 54 | +thisp.row_saved=thisp.row |
| 55 | +thisp.viewedit_items=[] |
| 56 | +if(thisp.config_viewedit_fields!=null){ |
| 57 | +for(variinthisp.config_viewedit_fields){ |
| 58 | +vard=thisp.config_viewedit_fields[i] |
| 59 | +d.value=thisp.row[d.key] |
| 60 | +d.component=d.component||"input" |
| 61 | +thisp.viewedit_items.push(d) |
| 62 | +} |
| 63 | +} |
| 64 | +} |
| 65 | +else{ |
| 66 | +thisp.$Notice.error({ |
| 67 | +title:'error when get table '+thisp.table_name, |
| 68 | +desc:data.msg |
| 69 | +}) |
| 70 | +} |
| 71 | +} |
| 72 | +}) |
| 73 | +}, |
| 74 | +editable:function(item){ |
| 75 | +vareditable=true |
| 76 | +if(item.editable!=null){editable=item.editable} |
| 77 | +returnthis.config_editable&&editable&&(item.key!="id") |
| 78 | +}, |
| 79 | +save:function(){ |
| 80 | +varparams={ |
| 81 | +"@tag":this.l_request_tag |
| 82 | +} |
| 83 | +varrecord_params={} |
| 84 | +//only save modified fields |
| 85 | +for(varkinthis.viewedit_items){ |
| 86 | +vard=this.viewedit_items[k] |
| 87 | +if(d.key=="id"||d.value!=this.row_saved[d.key]){ |
| 88 | +record_params[d.key]=d.value |
| 89 | +} |
| 90 | +} |
| 91 | +params[this.l_request_tag]=record_params |
| 92 | +params=this.ajax_hook("apijson_put","update",params) |
| 93 | +varthisp=this |
| 94 | +$.ajax({ |
| 95 | +type:"POST", |
| 96 | +url:"{{=url_for('uliweb_apijson.apijson.views.ApiJson.put')}}", |
| 97 | +contentType:'application/json', |
| 98 | +data:JSON.stringify(params), |
| 99 | +success:function(data){ |
| 100 | +if(data.code==200){ |
| 101 | +thisp.row_saved=thisp.row |
| 102 | +thisp.$Notice.success({ |
| 103 | +title:'success update #'+thisp.row.id+' in table '+thisp.model_name, |
| 104 | +desc:data.msg |
| 105 | +}) |
| 106 | +} |
| 107 | +else{ |
| 108 | +thisp.$Notice.error({ |
| 109 | +title:'error when update #'+thisp.row.id+' in table '+thisp.model_name, |
| 110 | +desc:data.msg |
| 111 | +}) |
| 112 | +} |
| 113 | +} |
| 114 | +}) |
| 115 | +}, |
| 116 | +ajax_hook:function(method,action,params){ |
| 117 | +if(this.hook_ajax_params!=null){ |
| 118 | +varafter_hook=this.hook_ajax_params(method,action,params) |
| 119 | +if(after_hook!=null){ |
| 120 | +params=after_hook |
| 121 | +} |
| 122 | +else{ |
| 123 | +console.log("warning: hook_ajax_params('"+method+"','"+action+"',params) return null, so ignore this hook") |
| 124 | +} |
| 125 | +} |
| 126 | +returnparams |
| 127 | +} |
| 128 | +}, |
| 129 | +mounted:function(){ |
| 130 | +if(this.request_tag==null){ |
| 131 | +this.l_request_tag=this.model_name |
| 132 | +} |
| 133 | +else{ |
| 134 | +this.l_request_tag=this.request_tag |
| 135 | +} |
| 136 | +//if not do this, the first notice will hide behind the navigation bar in uliweb apps |
| 137 | +this.$Notice.config({top:100,duration:8}); |
| 138 | +if(this.hook_init!=null){ |
| 139 | +this.hook_init(this) |
| 140 | +} |
| 141 | +if(this.config!=null){ |
| 142 | +this.config_editable=this.config.editable||false |
| 143 | +this.config_viewedit_fields=this.config.viewedit_fields||null |
| 144 | +} |
| 145 | +this.init_viewedit() |
| 146 | +} |
| 147 | +}) |
| 148 | +</script> |