h5-service-web/src/views/PartyshistoryRecoder/pointer.vue

<template>
  <div>
    <lx-header
      icon="md-apps"
      style="margin-bottom: 10px; border: 0px; margin-top: 15px"
      text="场馆点位管理"
    >
      <div slot="content"></div>
      <slot>
        <div class="selects">
          <div>
            <span style="padding: 0 6px; word-break: keep-all"> 关键字 </span>
            <Input
              v-model="select.keyword"
              placeholder="请输入关键字"
              style="width: 180px"
            ></Input>
          </div>

          <Button
            style="margin-left: 10px"
            type="primary"
            @click="select = { page: 1, keyword: '' }"
            >重置
          </Button>
          <Button style="margin-left: 10px" type="primary" @click="doSearch"
            >查询</Button
          >
          <Button
            style="margin-left: 10px"
            type="primary"
            @click="
              $refs['addPointer'].setForm(['activity_list_id'],[7]),$refs['addPointer'].setType('add'), $refs['addPointer'].show()
            "
            >新增</Button
          >
        </div>
      </slot>
    </lx-header>

    <xy-table
      :list="list"
      :total="total"
      :table-item="table"
    >
      <template v-slot:btns>
        <template v-if="type == 0"> </template>
        <template v-else>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <Poptip confirm transfer title="确认删除?" @on-ok="deleteitem(row)">
                <Button size="small" type="error">删除</Button>
              </Poptip>
              <Button
                size="small"
                type="primary"
                style="margin-left: 4px"
                @click="
                $refs['addPointer'].setForm(['activity_list_id'],[7]);
                  $refs['addPointer'].setId(row.id);
                    $refs['addPointer'].setType('editor');
                    $refs['addPointer'].show();
                "
                >编辑</Button
              >
              <Button size="small" type="primary" style="margin-left: 4px" @click="
                  $refs['vr'].setMapPointId(row.id);
                    $refs['vr'].show();
                "
                >vr看展</Button
              >
            </template>
          </el-table-column>
        </template>
      </template>
    </xy-table>
    <addPointer ref="addPointer" @refresh="load"></addPointer>
    <vr ref="vr"></vr>
  </div>
</template>

<script>
import { index, destroy, show } from "@/api/index";

import vr from './components/vr.vue';
import addPointer from "@/views/PartyshistoryRecoder/components/addPointer.vue";
export default {
  components: {
    addPointer,
    vr
  },
  data() {
    return {
      select: {
        page: 1,
        page_size: 10,
        table_name: "map_points",
        activity_list_id: 7,
        filter: [],
      },
      listActivity: [],
      total: 0,
      list: [],
      table: [
        {
          prop: "name",
          label: "名称",
          minWidth: 220,
          align: "left",
        },
        {
          prop: "lng,lat",
          label: "经度，纬度",
          width: 160,
          customFn: (row) => {
            return (
              <span>
                （{row.lng} ，{row.lat}）
              </span>
            );
          },
        },
        {
          prop: "x,y",
          label: "x轴，y轴",
          width: 160,
          customFn: (row) => {
            return (
              <span>
                （{row.x} ，{row.y}）
              </span>
            );
          },
        },
        {
          prop: "created_at",
          label: "创建信息",
          width: 190,
          formatter: (v1, v2, value) => {
            return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
          },
        },
        {
          prop: "updated_at",
          label: "更新时间",
          align: "left",
          width: 190,
          formatter: (v1, v2, value) => {
            return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
          },
        },
      ],
    };
  },
  methods: {
    doSearch() {
      this.select.page = 1;
      this.load();
    },

    pageSizeChange(e) {
      this.select.page_size = e;
      this.select.page = 1;
      this.load();
    },
    async load() {
      const res = await index(this.select);
      this.total = res.total;
      this.list = res.data;
    },
    deleteitem(row) {
      destroy({
        id: row.id,
        activity_list_id: 7,
        table_name: 'map_points'
      }).then((res) => {
        this.load();
        this.$Message.success("操作成功");
      });
    },
    pageChange(e) {
      this.select.page = e;
      this.load();
    },
  },
  mounted() {
    this.load();
  },
  created() {
    let type = parseInt(this.$route.path.split("_")[1] || 0);
    this.type = this.select.is_auth = type;
  },
};
</script>

<style lang="scss" scoped>
.selects {
  display: flex;
  flex-wrap: wrap;

  & > div {
    margin-bottom: 6px;
  }
}
</style>