moc/src/views/my/myDraft/index.vue

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { Icon } from '@iconify/vue'
import { useThemeStore } from '@/store/modules/theme';
import { useRouterPush } from '@/hooks/common/router';
import { draftListApi, deleteDraftApi } from '@/service/api/draft';

const appStore = useAppStore();
const themeStore = useThemeStore();
const gap = computed(() => (appStore.isMobile ? 0 : 16));
const { routerPushByKey } = useRouterPush();

const loading = ref<boolean>(false);
const pagination = ref<{page: number, pageSize: number, itemCount: number}>({
  page: 1,
  pageSize: 20,
  itemCount: 0,
})
const list = ref<{id: number, change_no: string, title: string, updated_at: string}[]>([]);

// 获取草稿列表
const getList = async () => {
  loading.value = true;
  const {data,error} = await draftListApi({
    page_num: pagination.value.page, 
    page_size: pagination.value.pageSize
  });
  if(!error) {
    list.value = data.list;
    pagination.value.itemCount = data.total;
  }
  loading.value = false;
}
// 分页
const pageChange = (page: number) => {
  pagination.value.page = page;
  getList();
}
// 跳转变更页面
const jumpToChange = () => {
  routerPushByKey("my_initiatechange");
};
// 继续编辑
const continueEdit = (qid: number) => {
  routerPushByKey("my_initiatechange",{ query: { id: qid.toString() } });
};
// 删除草稿
const remove = async (qid:number) => {
  loading.value = true;
  const {error} = await deleteDraftApi(qid);
  if(!error) {
    window.$message?.success("删除成功");
    getList();
  }
  loading.value = false;
};

onMounted(() => {
  getList();
})
</script>

<template>
  <NSpace vertical :size="16">
    <!-- 我的草稿箱 -->
    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
      <NSpin :show="loading" size="small">
        <div class="border mb-3 py-3 px-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
          <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
            <NGi span="24 s:24 m:16">
              <div class="h-100% flex items-center gap-2">
                <Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" />
                <p class="text-sm font-600">我的草稿箱</p>
                <span class="rounded bg-slate-100 px-1.5 text-xs font-semibold text-slate-700">{{ pagination.itemCount }}</span>
                <p class="text-xs text-#94a3b8">草稿仅本人可见，提交后自动从草稿箱移除</p>
              </div>
            </NGi>
            <NGi span="24 s:24 m:8" class="flex items-center justify-end gap-12px">
              <NButton type="primary" size="small" @click="jumpToChange">
                <Icon icon="ic:round-plus" class="size-16px" />新建空白变更
              </NButton>
            </NGi>
          </NGrid>
        </div>
        <template v-if="list.length">
          <div class="space-y-2 scroll">
            <div v-for="d in list" :key="d.id" class="rounded-lg border px-4 py-3">
              <div class="flex flex-wrap items-center gap-3">
                <div class="min-w-0 flex-1">
                  <div class="text-sm font-semibold text-slate-800 dark:text-white">{{ d.title }}</div>
                  <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-400">
                    <span class="font-mono">{{ d.change_no }}</span>
                    <span>保存于 {{ d.updated_at }}</span>
                  </div>
                </div>
                <div class="flex shrink-0 items-center gap-2 pt-2px">
                  <NPopconfirm
                    positive-text="确定"
                    :positiveButtonProps="{ size: 'tiny' }"
                    :negativeButtonProps="{ size: 'tiny' }"
                    @positive-click="remove(d.id)"
                  >
                    <template #trigger>
                      <NButton class="text-xs" text type="error">删除</NButton>
                    </template>
                    确定删除吗？
                  </NPopconfirm>
                  <NButton class="text-xs" text type="primary" @click="continueEdit(d.id)">继续编辑</NButton>
                </div>
              </div>
            </div>
          </div>
          <div class="flex justify-end mt-3">
            <NPagination 
              v-model:page="pagination.page" 
              :page-size="pagination.pageSize" 
              :item-count="pagination.itemCount"
              :on-update:page="pageChange"
            >
              <template #prefix="{ itemCount }">
                共 {{ itemCount }} 条
              </template>
            </NPagination>
          </div>
        </template>
        <div v-else class="rounded-lg border border-dashed bg-white py-12 text-center scroll2">
          <div class="text-sm text-slate-400">暂无草稿</div>
          <div class="mt-1 text-xs text-slate-300">在发起变更页点击右下角「保存」，即可将当前内容存为草稿</div>
        </div>
      </NSpin>
    </NCard>
  </NSpace>
</template>

<style scoped>

</style>
<style scoped lang="scss">
.scroll {
  height: calc(100vh - 252px);
  overflow-y: auto;
}
.scroll2 {
  height: calc(100vh - 212px);
  overflow-y: auto;
}
</style>