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

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

    <Photos
        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, 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";


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()
    }
  }
}


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

</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 .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>