fuse-code/src/views/guide/path/edit.vue

<template>
  <ui-group borderBottom class="path-header">
    <template #header>
      <div class="path-header-content">
        <ui-input type="checkbox" v-model="all" :label="$t('sys.selectAll')" />
        <ui-icon type="add" ctrl @click="edit()" />
      </div>
    </template>
  </ui-group>
  <ui-group class="path-group">
    <div v-for="path in paths" :key="path.id" class="path-item">
      <ui-input
        type="checkbox"
        :modelValue="selects.some((item) => item.id === path.id)"
        @update:modelValue="(select: boolean) => updateSelect(path, select)"
      />
      <PathSign
        :path="path"
        @edit="edit(path)"
        @delete="deletePath(path)"
        class="path-content"
      />
    </div>
  </ui-group>
  <EditPath :data="currentPath" v-if="currentPath" @applyGlobal="applyGlobal" />
</template>

<script lang="ts" setup>
import { computed, ref, watchEffect } from "vue";
import PathSign from "./sign.vue";
import EditPath from "./edit-path.vue";
import { getPathNode, pathsGroup } from "@/sdk/association/path";
import { useViewStack } from "@/hook";
import {
  paths,
  enterEdit,
  sysBus,
  autoSavePaths,
  createPath,
  enterOld,
  selectPaths,
  save,
} from "@/store";

import type { Path } from "@/store";
import { Dialog } from "bill/expose-common";
import { showPathsStack, showPathStack } from "@/env";
import { asyncTimeout } from "@/utils";
import { ui18n } from "@/lang";

const { all, selects, updateSelect } = selectPaths;

const currentPath = ref<Path | null>(null);
const emit = defineEmits<{ (e: "update:current", v: Path | null): void }>();
watchEffect(() => emit("update:current", currentPath.value));

const leaveEdit = () => {
  currentPath.value = null;
  // pathsGroup.visibility(true);
  // showPathsStack.pop();
  // showPathStack.pop();
};
const edit = async (path?: Path) => {
  await save();
  await asyncTimeout(16);
  if (!path) {
    path = createPath();
    paths.value.unshift(path);
  }
  currentPath.value = path;
  enterEdit();
  sysBus.on("leave", leaveEdit);
  // showPathsStack.push(ref(false));
  // showPathStack.push(computed(() => path.id));
};

const deletePath = (path: Path) => {
  const index = paths.value.indexOf(path);
  paths.value.splice(index, 1);
};
const applyGlobal = async (keys: string | string[]) => {
  if (!(await Dialog.confirm(ui18n.t("guide.path.applyConfirm")))) return;
  keys = Array.isArray(keys) ? keys : [keys];
  for (const current of paths.value!) {
    let val: any = current;
    let newVal: any = currentPath.value;
    for (let i = 0; i < keys.length; i++) {
      if (i === keys.length - 1) {
        val[keys[i]] = newVal[keys[i]];
      } else {
        val = val[keys[i]];
        newVal = newVal[keys[i]];
      }
    }
  }
};

useViewStack(autoSavePaths);

defineExpose({
  add: () => {
    edit();
  },
});
</script>

<style lang="scss" scoped>
.video-toolbar {
  height: auto;
  display: block;
}

.guide-list {
  padding-bottom: 30px;
}

.path-group {
  padding-bottom: 50px;
  .path-item {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--colors-border-color);
  }

  .path-content {
    flex: 1;
  }
}

.path-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

<style>
.path-header.ui-group .border-bottom,
.path-header.ui-group {
  margin-bottom: 0;
}
</style>