up

src/views/PartyshistoryRecoder/components/imgBox.vue

@@ -1,32 +1,21 @@
 <template>
   <div>
     <Drawer width="46" title="图片集合" :closable="false" v-model="drawer">
-      <Button
+      <Button @click="
-        @click="
           $refs['addImg'].setForm(
             ['map_point_id', 'activity_list_id'],
             [select.filter[0].value, 7]
           ),
             $refs['addImg'].setType('add'),
             $refs['addImg'].show()
-        "
+        ">新增</Button>
-        >新增</Button
-      >
 
-      <xy-table
+      <xy-table style="margin-top: 20px" :total="total" :list="list" :table-item="talbe" :is-page="false"
-        style="margin-top: 20px"
+        @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange" @delete="row => destroy({
-        :total="total"
-        :list="list"
-        :table-item="talbe"
-        :is-page="false"
-        @pageSizeChange="pageSizeChange"
-        @pageIndexChange="pageChange"
-        @delete="row => destroy({
           table_name: 'map_point_images',
           id: row.id,
           activity_list_id: 7
-        }).then(_ => getList())"
+        }).then(_ => getList())" @editor="
-        @editor="
           (row) => {
             $refs['addImg'].setForm(
               ['map_point_id', 'activity_list_id'],
@@ -36,8 +25,7 @@
             $refs['addImg'].setType('editor');
             $refs['addImg'].show();
           }
-        "
+        ">
-      >
       </xy-table>
     </Drawer>
 
@@ -46,95 +34,109 @@
 </template>
 
 <script>
-import { index, destroy } from "@/api/index";
+  import {
+    index,
+    destroy
+  } from "@/api/index";
 
-import addImg from "./addImg.vue";
+  import addImg from "./addImg.vue";
-export default {
+  export default {
-  components: {
+    components: {
-    addImg,
+      addImg,
-  },
+    },
-  data() {
+    data() {
-    return {
+      return {
-      drawer: false,
+        drawer: false,
-      select: {
+        select: {
-        page: 1,
+          page: 1,
-        page_size: 999,
+          page_size: 999,
-        activity_list_id: 7,
+          activity_list_id: 7,
-        table_name: "map_point_images",
+          table_name: "map_point_images",
-        filter: [
+          with_relations:["image"],
-          {
+          filter: [{
             key: "map_point_id",
             value: 7,
             op: "eq",
-          },
+          }, ],
-        ],
-      },
-      total: 0,
-      list: [],
-      talbe: [
-        {
-          prop: "name",
-          label: "标题",
-          minWidth: 220,
-          align: "left",
         },
-        {
+        total: 0,
-          prop: "created_at",
+        list: [],
-          label: "创建信息",
+        talbe: [{
-          width: 190,
+            prop: "name",
-          formatter: (v1, v2, value) => {
+            label: "标题",
-            return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
+            minWidth: 220,
+            align: "left",
           },
-        },
+
-        {
+          {
-          prop: "updated_at",
+            prop: "img",
-          label: "更新时间",
+            label: "图片",
-          align: "left",
+            minWidth: 130,
-          width: 190,
+            align: "center",
-          formatter: (v1, v2, value) => {
+            customFn: (row) => {
-            return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
+              return ( <div><img src={row.image?.url} style = 'width:120px;' /> </div>
+              )
+            }
           },
-        },
-      ],
-    };
-  },
-  methods: {
-    destroy,
-    show() {
-      this.drawer = true;
-    },
-    hidden() {
-      this.drawer = false;
-    },
-    setMapPointId(value) {
-      this.select.filter[0].value = value;
-    },
 
-    async getList() {
-      const res = await index(this.select);
-      this.total = res.total;
-      this.list = res.data;
-    },
 
-    pageSizeChange(e) {
+          {
-      this.select.page_size = e;
+            prop: "created_at",
-      this.select.page = 1;
+            label: "创建信息",
-      this.getList();
+            width: 190,
-    },
+            formatter: (v1, v2, value) => {
-    pageChange(e) {
+              return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
-      this.select.page = e
+            },
-      this.getList()
+          },
+          {
+            prop: "updated_at",
+            label: "更新时间",
+            align: "left",
+            width: 190,
+            formatter: (v1, v2, value) => {
+              return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
+            },
+          },
+        ],
+      };
     },
-  },
+    methods: {
-  computed: {},
+      destroy,
-  watch: {
+      show() {
-    drawer(newVal) {
+        this.drawer = true;
-      if (newVal) {
+      },
+      hidden() {
+        this.drawer = false;
+      },
+      setMapPointId(value) {
+        this.select.filter[0].value = value;
+      },
+
+      async getList() {
+        const res = await index(this.select);
+        this.total = res.total;
+        this.list = res.data;
+      },
+
+      pageSizeChange(e) {
+        this.select.page_size = e;
+        this.select.page = 1;
         this.getList();
-      }
+      },
+      pageChange(e) {
+        this.select.page = e
+        this.getList()
+      },
+    },
+    computed: {},
+    watch: {
+      drawer(newVal) {
+        if (newVal) {
+          this.getList();
+        }
+      },
     },
-  },
+  };
-};
 </script>
 
 <style scoped lang="scss"></style>

src/views/PartyshistoryRecoder/pointer.vue

@@ -120,6 +120,17 @@ export default {
           minWidth: 220,
           align: "left",
         },
+
+        {
+          prop: "img",
+          label: "图片",
+          minWidth: 200,
+          align: "center",
+          customFn: (row) => {
+            return ( <div><img src={row.image?.url} style = 'width:180px;' /> </div>
+            )
+          }
+        },
         {
           prop: "lng,lat",
           label: "经度，纬度",