我的草稿接口完成

2026-09-07 09:41:17 +08:00
parent deea4c4991
commit a202b40c7d
3 changed files with 127 additions and 57 deletions
@@ -0,0 +1,19 @@
+import { request } from '../request';
+
+/** 草稿列表
+ *
+ */
+export function draftListApi(params: {page_num: number, page_size: number}) {
+  return request({
+    url: `/api/changes/my-drafts`,
+    method: 'get',
+    params
+  });
+}
+// 删除草稿
+export function deleteDraftApi(id: number) {
+  return request({
+    url: `/api/changes/${id}`,
+    method: 'delete',
+  });
+}
@@ -1,87 +1,134 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+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 emit = defineEmits<{ go: [v: string, preset?: string];}>();
+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}[]>([]);

-interface Draft {
-  id: string;
-  name: string;
-  time: string;
-  step: string;
-  progress: 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;
  }
-const drafts = ref<Draft[]>([
-    { id: "D-2026-011", name: "R-101 搅拌提速至 180rpm（80℃→95℃）", time: "2026-08-02 09:41", step: "已生成申请表 · 待提交", progress: "4/6 页" },
-    { id: "D-2026-009", name: "P-301 机封冲洗方案调整（驳回重报）", time: "2026-07-30 16:22", step: "变更预识别完成", progress: "2/6 页" },
-    { id: "D-2026-007", name: "化验室新增 COD 在线分析仪", time: "2026-07-28 11:05", step: "仅填写变更描述", progress: "1/6 页" },
-]);
-
-const continueEdit = (d: Draft) => {
-    window.$message?.success(`已载入草稿 ${d.id}，从「${d.step}」断点继续编辑`);
-    emit("go", "apply");
+  loading.value = false;
+}
+// 分页
+const pageChange = (page: number) => {
+  pagination.value.page = page;
+  getList();
+}
+// 跳转变更页面
+const jumpToChange = () => {
+  routerPushByKey("my_initiatechange");
 };
-const remove = (d: Draft) => {
-    drafts.value = drafts.value.filter((x: Draft) => x.id !== d.id);
-    window.$message?.success(`草稿 ${d.id} 已删除`);
+// 继续编辑
+const continueEdit = (qid: number) => {
+  routerPushByKey("my_initiatechange",{ query: { id: qid.toString() } });
 };
-const progressPct = (p: string) => {
-    const m = p.match(/(\d+)\s*\/\s*(\d+)/);
-    return m ? Math.round((Number(m[1]) / Number(m[2])) * 100) : 0;
+// 删除草稿
+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">{{ drafts.length }}</span>
+                <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="emit('go', 'apply')">
-              <Icon icon="ic:round-plus" class="size-16px" />
-              新建空白变更
+              <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 drafts" :key="d.id" class="rounded-lg border px-4 py-3">
+            <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.name }}</div>
+                  <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-[11px] text-slate-400">
-                  <span class="font-mono">{{ d.id }}</span>
-                  <span>保存于 {{ d.time }}</span>
-                  <NTag type="primary" size="small" class="text-11px">{{ d.step }}</NTag>
+                    <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">
-                  <NButton class="text-xs" text type="error" @click="remove(d)">删除</NButton>
-                  <NButton class="text-xs" text type="primary" @click="continueEdit(d)">继续编辑</NButton>
+                  <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 v-if="drafts.length === 0" class="rounded-lg border border-dashed bg-white py-12 text-center">
+          </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>
-        </div>
+      </NSpin>
    </NCard>
  </NSpace>
 </template>
@@ -91,6 +138,10 @@ const progressPct = (p: string) => {
 </style>
 <style scoped lang="scss">
 .scroll {
+  height: calc(100vh - 252px);
+  overflow-y: auto;
+}
+.scroll2 {
  height: calc(100vh - 212px);
  overflow-y: auto;
 }
@@ -654,7 +654,7 @@ onMounted(() => {
        </NGrid>
      </div>
      <div class="flex gap-3">
-        <NSpin :show="treeLoading" size="small" :stroke-width="18">
+        <NSpin :show="treeLoading" size="small">
          <div class="border p-3 w-300px" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
            <NInput v-model:value="keyword" placeholder="请输入人员" clearable @keyup.enter="searchUser">
              <template #suffix>