fuse-code/src/views/tagging/index.vue

<template>
  <RightFillPano>
    <template #header>
      <ui-group borderBottom>
        <template #header>
          <ui-button @click="editTagging = createTagging()">
            <ui-icon type="add" />
            {{$t('sys.add')}}
          </ui-button>
        </template>
      </ui-group>
    </template>
    <ui-group :title="$t('tagging.list')" class="tagging-list">
      <template #header>
        <StyleTypeSelect v-model:value="type" all count />
      </template>
      <template #icon>
        <ui-icon
          ctrl
          :class="{ active: showSearch }"
          type="search"
          @click="showSearch = !showSearch"
          style="margin-right: 20px"
        />
        <ui-icon
          ctrl
          :type="custom.showTaggings ? 'eye-s' : 'eye-n'"
          @click="custom.showTaggings = !custom.showTaggings"
        />
      </template>
      <ui-group-option v-if="showSearch">
        <ui-input type="text" width="100%" :placeholder="$t('sys.save')" v-model="keyword">
          <template #preIcon>
            <ui-icon type="search" />
          </template>
        </ui-input>
      </ui-group-option>
      <TagingSign
        v-for="tagging in filterTaggings"
        :key="tagging.id"
        :tagging="tagging"
        :selected="selectTagging === tagging"
        @edit="editTagging = tagging"
        @delete="deleteTagging(tagging)"
        @select="(selected) => (selectTagging = selected ? tagging : null)"
        @fixed="fixedTagging(tagging)"
      />
    </ui-group>
  </RightFillPano>

  <Edit
    v-if="editTagging"
    :data="editTagging"
    @quit="editTagging = null"
    @save="saveHandler"
  />
</template>

<script lang="ts" setup>
import Edit from "./edit.vue";
import TagingSign from "./sign.vue";
import StyleTypeSelect from "./style-type-select.vue";
import { RightFillPano } from "@/layout";
import { useViewStack } from "@/hook";
import { computed, ref, watchEffect } from "vue";
import { router, RoutesName } from "@/router";
import { custom } from "@/env";
import {
  taggings,
  getTaggingStyle,
  Tagging,
  autoSaveTaggings,
  createTagging,
  getTaggingPositions,
  taggingPositions,
  isOld,
  save,
  getTagging,
  TaggingStyle,
} from "@/store";
import { taggingsGroup } from "@/sdk";

const showSearch = ref(false);
const type = ref<TaggingStyle["typeId"]>(-1);
const keyword = ref("");
const filterTaggings = computed(() =>
  taggings.value.filter((tagging) => {
    if (!tagging.title.includes(keyword.value)) return false;
    if (type.value === -1) return true;
    const style = getTaggingStyle(tagging.styleId);
    return style?.typeId === type.value;
  })
);

const editTagging = ref<Tagging | null>(null);
const saveHandler = (tagging: Tagging) => {
  if (!editTagging.value) return;
  if (!getTagging(editTagging.value.id)) {
    taggings.value.push(tagging);
    const style = getTaggingStyle(tagging.styleId);
    if (style) {
      style.lastUse = 1;
    }
  } else {
    Object.assign(editTagging.value, tagging);
  }

  editTagging.value = null;
};

const deleteTagging = (tagging: Tagging) => {
  const index = taggings.value.indexOf(tagging);
  const positions = getTaggingPositions(tagging);
  taggingPositions.value = taggingPositions.value.filter(
    (position) => !positions.includes(position)
  );
  taggings.value.splice(index, 1);
};

const fixedTagging = async (tagging: Tagging) => {
  if (isOld.value) {
    await save();
  }
  router.push({ name: RoutesName.taggingPosition, params: { id: tagging.id } });
};

const selectTagging = ref<Tagging | null>(null);
useViewStack(() => {
  const stopAuth = autoSaveTaggings();
  const stop = watchEffect((onCleanup) => {
    taggingsGroup.changeCanMove(true);
    taggingsGroup.showDelete(true);
    onCleanup(() => {
      taggingsGroup.changeCanMove(false);
      taggingsGroup.showDelete(false);
    });
  });
  return () => {
    stop();
    stopAuth();
  };
});
</script>

<style scoped>
.active {
  color: var(--color-main-normal) !important;
}

.tagging-list {
  padding-bottom: 30px;
}
</style>