update

simple-demo/location_list.html

@@ -81,19 +81,27 @@
     <table>
         <thead>
         <tr>
+            <td>id</td>
             <td>事件</td>
             <td>地点</td>
             <td>信息</td>
+            <td>操作</td>
         </tr>
         </thead>
         <tbody>
         <tr v-for="(item,index) in list">
+            <td>{{item.id}}</td>
             <td>{{new Date(item.create_time).format("yyyy-MM-dd hh:mm:ss")}}</td>
             <td>
                 <a :href="'https://api.map.baidu.com/marker?location='+ item.location_xy + '&title=' + item.msg + '&content=&output=html&src=webapp.baidu.openAPIdemo'"
                    target="_blank">{{item.location_xy}}</a>
             </td>
             <td>{{item.msg}}</td>
+            <td>
+                <span @click="to_update(item)">跳转更新</span>
+                <span> | | | | </span>
+                <span @click="delete_by_id(item.id)">删除</span>
+            </td>
         </tr>
         </tbody>
     </table>
@@ -104,9 +112,19 @@
         <button>第<input v-model="page" @change="choose_page" type="text" value="1"/>页</button>
         <button class="nextPage" @click="next_click">下一页</button>
     </div>
+
+
+    <hr>
+    <p>根据 id 更新</p>
+    <input v-model="update_id" placeholder="id" id="update_id">
+    <input v-model="update_msg" placeholder="信息">
+    <button @click="update">更新</button>
+
+
 </div>
 
 
+
 <script>
     Date.prototype.format = function (fmt) {
         var o = {
@@ -129,9 +147,16 @@
         return fmt;
     }
 
-    new Vue({
+    const scrollElement = (el)=>{
+        document.querySelector(el).scrollIntoView({behavior: 'smooth'});
+    }
+
+
+    let _this = new Vue({
         el: '#tby',
         data: {
+            update_id: '',
+            update_msg: '',
             page: 1,
             size: 1000,
             msg: "",
@@ -143,6 +168,45 @@
             this.search();
         },
         methods: {
+            delete_by_id: function (id) {
+                if (confirm("确定要删除吗？不可恢复！！！")) {
+                    axios.get("https://api.tianyunperfect.cn/web_history/location_delete", {
+                        params: {
+                            "id": id,
+                            "user_id": _this.user_id,
+                        }
+                    }).then(res => {
+                        if (res.data.code === 1) {
+                            _this.search();
+                            _this.update_id = '';
+                            _this.update_msg = '';
+                        }
+                    });
+                }
+
+            },
+            to_update: function (item) {
+                this.update_id = item.id;
+                if (item.msg && item.msg.length > 1) {
+                    this.update_msg = item.msg;
+                }
+                scrollElement("#update_id");
+            },
+            update: function () {
+                axios.get("https://api.tianyunperfect.cn/web_history/location_update", {
+                    params: {
+                        "id": _this.update_id,
+                        "user_id": _this.user_id,
+                        "msg": _this.update_msg
+                    }
+                }).then(res => {
+                    if (res.data.code === 1) {
+                        _this.search();
+                        _this.update_id = '';
+                        _this.update_msg = '';
+                    }
+                });
+            },
             first_click: function () {
                 this.page = 1;
                 this.search();
@@ -169,7 +233,6 @@
                 return obj;
             },
             search: function () {
-                let _this = this;
                 axios.get("https://api.tianyunperfect.cn/web_history/location_history", {params: this.getParam()}).then(res => {
                     if (res.data.code === 1) {
                         _this.list = res.data.data;