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

<template>
  <MainPanel>
    <template v-slot:header>
      <Header type="return_l" :count="selects.length" :title="`已标注照片（${sortPhotos.length}）`" :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>

    <div class="type-photos-layout">
      <template v-if="sortPhotos.length">
        <div class="type-photos" v-for="typePhoto in typePhotos" :key="typePhoto.type">
          <p class="type-title">{{ typePhoto.type }}</p>
          <Photos
              class="type-photos-content accident-photos-content"
              :class="{max: typePhoto.photos.length > 4}"
              v-model:active="active"
              v-model:selects="selects"
              :select-mode="selectMode"
              :data="typePhoto.photos"
          >
            <template v-slot="{data, index}">
              <p>{{ data.title || typePhoto.type.substring(0, 2) + (index + 1) }}</p>
            </template>
          </Photos>
        </div>
      </template>
      <undata v-else undata-msg="无照片。请点击右上角按钮标注照片。" />
    </div>

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

  <FillSlide :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 ActionMenus from "@/components/group-button/index.vue";
import {types, accidentPhotos, AccidentPhoto} from '@/store/accidentPhotos'
import {router, writeRouteName} from '@/router'
import {computed, onDeactivated, reactive, ref, watchEffect} from "vue";
import {Mode} from '@/views/graphic/menus'
import UiButton from "@/components/base/components/button/index.vue";
import Photos from "@/components/photos/index.vue";
import Header from "@/components/photos/header.vue";
import {useConfirm} from "@/hook";
import Undata from "@/components/photos/undata.vue";
import {api} from "@/store/sync";
import {photos} from "@/store/photos";

const sortPhotos = computed(() => {
  const photos = [...accidentPhotos.value]
  return photos.sort((a, b) =>
    types.indexOf(a.type) - types.indexOf(b.type)
  )
})
const typePhotos = computed(() =>
  types
    .map(type => ({
      type,
      photos: sortPhotos.value.filter(data => data.type === type)
    }))
    .filter(data => data.photos.length)
)
const selectMode = ref(false)
const selects = ref<AccidentPhoto[]>([])
const active = ref<AccidentPhoto>()
const menus = [
  {
    key: "edit",
    icon: "edit",
    text: "修改",
    onClick: () => gotoDraw()
  },
  {
    key: "del",
    icon: "del",
    text: "删除",
    onClick: () => delPhoto()
  }
]

const selectMenus = reactive([
  {
    key: "gen",
    icon: "photo",
    text: "生成A4",
    disabled: computed(() => selects.value.length > 2),
    onClick: () => {
      const params = {
        id1: selects.value[0].id,
        id2: selects.value.length === 1 ? '-1' : selects.value[1].id
      }
      router.push({ name: writeRouteName.gena4, params})
    }
  },
  {
    key: "del",
    text: "删除",
    icon: "del",
    onClick: () => delSelects()
  },
])


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

const delPhotoRaw = (accidentPhoto = active.value) => {
  const index = accidentPhotos.value.indexOf(accidentPhoto)
  const reset = active.value ? accidentPhotos.value.indexOf(active.value) : -1
  if (~index) {
    accidentPhotos.value.splice(index, 1)
  }
  if (~reset) {
    console.log(reset)
    if (reset >= accidentPhotos.value.length) {
      if (accidentPhotos.value.length) {
        active.value = accidentPhotos.value[accidentPhotos.value.length - 1]
      } else {
        active.value = null
      }
    } else {
      active.value = accidentPhotos.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.Photo, id: active.value.id, action: 'update'}
  })
}

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

<style scoped lang="scss">
.type-photos-layout {
  position: absolute;
  top: calc(var(--header-top) + var(--editor-head-height));
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  background: #2E2E2E;
  padding: 25px 0;
}

.type-photos-content {
  position: static;
  overflow: initial;
  background: none;
  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);
}

.type-title {
  padding: 0 24px 2px;
  font-size: 16px;
}


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

<style lang="scss">
.photos-layout.type-photos-content {
  overflow-x: auto;
  width: 100%;
  margin-bottom: 14px;

  .photos {
    display: flex;
    padding-bottom: 10px;
    .photo {
      flex: none;
      width: calc(calc(100% - 24px * 3) / 4);

    }

    &.max:after {
      content: "";
      display: inline-block;
      width: 1px;
      height: 1px;
      flex: none;
    }
  }
}
.accident-photos-content .photo {
  &:last-child:not(:nth-child(4)) {
    padding-right: 24px;
    box-sizing: content-box;
  }
  .img-layout {
    width: 100%;
    height: 200px;
  }
}

</style>