traffic-laser/src/views/roads/index.vue

<template>
  <MainPanel>
    <template v-slot:header>
      <Header
        :count="selects.length"
        :title="`现场图管理（${sortPhotos.length}）`"
        type="return_l"
        :on-back="() => api.closePage()"
      >
        <ui-button
          :type="selectMode ? 'primary' : 'normal'"
          @click="selectMode = !selectMode"
          width="96px"
          style="margin-right: 16px"
          v-if="sortPhotos.length"
        >
          {{ selectMode ? "取消" : "选择" }}
        </ui-button>
        <ui-button
          v-if="!selectMode"
          type="primary"
          @click="router.push({ name: writeRouteName.photos })"
          width="96px"
        >
          新增
        </ui-button>
      </Header>
    </template>

    <Photos
      undata-msg="无现场图。请点击右上角按钮绘制现场图。"
      v-model:active="active"
      v-model:selects="selects"
      :select-mode="selectMode"
      :data="sortPhotos"
      :getURL="(data) => data?.table?.url || data.url"
    >
      <template v-slot="{ data }">
        <p>{{ data.title || "默认标题" }}</p>
      </template>
    </Photos>

    <ActionMenus
      class="select-menus"
      :menus="selectMenus"
      dire="row"
      v-if="selects.length"
    />
  </MainPanel>

  <FillSlide
    :getURL="(data) => data?.table?.url || data.url"
    :data="sortPhotos"
    v-model:active="active"
    @quit="active = null"
    v-if="active"
  >
    <template v-slot:foot>
      <ActionMenus class="menus" :menus="menus" dire="row" />
    </template>
  </FillSlide>
</template>

<script setup lang="ts">
import MainPanel from "@/components/main-panel/index.vue";
import FillSlide from "@/components/fill-slide/index.vue";
import { roadPhotos, RoadPhoto } from "@/store/roadPhotos";
import ActionMenus from "@/components/group-button/index.vue";
import { router, writeRouteName } from "@/router";
import { computed, onDeactivated, ref, watchEffect } from "vue";
import { Mode } from "@/views/graphic/menus";
import UiButton from "@/components/base/components/button/index.vue";
import Header from "@/components/photos/header.vue";
import Photos from "@/components/photos/index.vue";
import ButtonPane from "@/components/button-pane/index.vue";
import UiIcon from "@/components/base/components/icon/index.vue";
import { useConfirm } from "@/hook";
import { api } from "@/store/sync";
import { photos } from "@/store/photos";

const sortPhotos = computed(() => [...roadPhotos.value].reverse());
const active = ref<RoadPhoto>();
const selectMode = ref(false);
const selects = ref<RoadPhoto[]>([]);
const menus = [
  {
    key: "road",
    icon: "edit",
    text: "修改",
    onClick: () => gotoDraw(),
  },
  {
    key: "del",
    icon: "del",
    text: "删除",
    onClick: () => delPhoto(),
  },
];

const selectMenus = [
  {
    key: "del",
    icon: "del",
    text: "删除",
    onClick: () => delSelects(),
  },
];

watchEffect(() => {
  if (!selectMode.value) {
    selects.value = [];
  }
});

const delPhotoRaw = (roadPhoto = active.value) => {
  const index = roadPhotos.value.indexOf(roadPhoto);
  const reset = active.value ? roadPhotos.value.indexOf(active.value) : -1;
  if (~index) {
    roadPhotos.value.splice(index, 1);
  }
  if (~reset) {
    if (reset >= roadPhotos.value.length) {
      if (roadPhotos.value.length) {
        active.value = roadPhotos.value[roadPhotos.value.length - 1];
      } else {
        active.value = null;
      }
    } else {
      active.value = roadPhotos.value[reset];
    }
  }
};

const delPhoto = async (photo = active.value) => {
  if (await useConfirm(`确定要删除此数据？`)) {
    delPhotoRaw(photo);
  }
};
const delSelects = async () => {
  if (await useConfirm(`确定要删除这${selects.value.length}项数据？`)) {
    while (selects.value.length) {
      delPhotoRaw(selects.value[0]);
      selects.value.shift();
    }
    if (!sortPhotos.value.length) {
      selectMode.value = false;
    }
  }
};

const gotoDraw = () => {
  router.push({
    name: writeRouteName.graphic,
    params: { mode: Mode.Road, id: active.value.id, action: "update" },
  });
};

onDeactivated(() => {
  active.value = null;
});
</script>

<style scoped lang="scss">
.photo p {
  color: #fff;
  font-size: 14px;
  margin-top: 8px;
}

.menus {
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--boundMargin);
}
.fun-ctrl {
  color: #fff;
  font-size: 20px;
  transition: color 0.3s ease;

  .icon {
    position: absolute;
    transform: translateX(-50%);
  }
}

.del {
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--boundMargin);
}

.select-menus {
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--boundMargin);
}
</style>