add "add" feature in apijson-table

zhangchunlin · zhangchunlin · commit eea55fd0ca50 · 2019-01-24T15:53:28.000+08:00
diff --git a/demo/apps/tables/settings.ini b/demo/apps/tables/settings.ini
@@ -13,6 +13,9 @@ moment = {
         {"title":"Date","key":"date","editable":False},
         {"title":"Content","key":"content","type":"textarea"},
     ],
+    "add_fields" : [
+        {"title":"Content","key":"content","type":"textarea"},
+    ],
 }
 
 comment = {
diff --git a/uliweb_apijson/apijson/templates/vue/inc_apijson_table.html b/uliweb_apijson/apijson/templates/vue/inc_apijson_table.html
@@ -3,8 +3,16 @@
     delimiters: ['{', '}'],
     props: ["table_name","config"],
     template: `<div>
+    <div v-if="config_editable && config_add_fields!=null"><i-button type="primary" @click="add">Add</i-button> <br><br> </div>
     <i-table stripe border :columns="tcolumns" :data="tlist" @on-sort-change="table_on_sort_change"></i-table>
     <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>
+    <modal v-model="modal_add" title="Add" @on-ok="real_add">
+        <i-form @submit.native.prevent :label-width="80">
+            <form-item v-for="item in add_items" :key="item.key" :label="item.title">
+                <i-input v-if="item.type=='textarea'" v-model="item.value" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></i-input>
+            </form-item>
+        </i-form>
+    </modal>
     <modal v-model="modal_view" :title="viewedit_label">
         <i-form @submit.native.prevent :label-width="80">
             <form-item v-for="item in viewedit_items" :key="item.key" :label="item.title">
@@ -32,6 +40,9 @@
             modal_delete: false,
             delete_params: {},
 
+            modal_add: false,
+            add_items : [],
+
             tcolumns: [],
             tcolumns_preset: {
                 "id": {title:'#',key:'id',width:80},
@@ -83,7 +94,8 @@
 
             config_editable: false,
             config_table_fields: null,
-            config_viewedit_fields: null
+            config_viewedit_fields: null,
+            config_add_fields: null
         }
     },
     computed: {
@@ -256,7 +268,48 @@
                     thisp.$Notice.success({
                         title: 'success remove #'+thisp.delete_params.row.id+' in table '+thisp.table_name,
                         desc: result.msg
-                    });
+                    })
+                    thisp.update_list()
+                }
+            })
+        },
+        add: function(){
+            for (var k in this.add_items){
+                var d = this.add_items[k]
+                d.value = null
+            }
+            this.modal_add = true
+        },
+        real_add: function(){
+            thisp = this
+            var params = {
+                "@tag": thisp.table_name
+            }
+            var post_params = {}
+            for (var k in thisp.add_items) {
+                var d = thisp.add_items[k]
+                post_params[d.key] = d.value
+            }
+            params[this.table_name] = post_params
+            
+            $.ajax({
+                type: "POST",
+                url: "{{=url_for('uliweb_apijson.apijson.views.ApiJson.post')}}",
+                contentType: 'application/json',
+                data: JSON.stringify(params),
+                success: function (data) {
+                    if (data.code!=200){
+                        thisp.$Notice.error({
+                            title: 'error when add new record in table '+thisp.table_name,
+                            desc: data.msg
+                        })
+                        return
+                    }
+                    var result = data[thisp.table_name]
+                    thisp.$Notice.success({
+                        title: 'success add #'+result.id+' in table '+thisp.table_name,
+                        desc: result.msg
+                    })
                     thisp.update_list()
                 }
             })
@@ -278,6 +331,10 @@
             this.config_editable = this.config.editable || false
             this.config_table_fields = this.config.table_fields || null
             this.config_viewedit_fields = this.config.viewedit_fields || null
+            this.config_add_fields = this.config.add_fields || null
+            if (this.config.add_fields!=null) {
+                this.add_items = this.config_add_fields
+            }
         }
         this.update_list()
     }

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,9 @@ moment = {`
`13`	`13`	`{"title":"Date","key":"date","editable":False},`
`14`	`14`	`{"title":"Content","key":"content","type":"textarea"},`
`15`	`15`	`],`
	`16`	`+ "add_fields" : [`
	`17`	`+ {"title":"Content","key":"content","type":"textarea"},`
	`18`	`+ ],`
`16`	`19`	`}`
`17`	`20`
`18`	`21`	`comment = {`