feat: 添加取消和催单功能，更新反馈组件和服务

Author: Kaviilee

src/assets/css/dashboard/feedback_single.less

@@ -145,6 +145,25 @@
             gap: 15px;
             align-items: center;
         }
+        .m-actions {
+            .flex;
+            align-items: center;
+            gap: 12px;
+            flex-wrap: wrap;
+            justify-content: flex-end;
+
+            > * {
+                margin-left: 0 !important;
+            }
+
+            .u-action-btn {
+                height: 32px;
+                min-width: 88px;
+                padding: 0 12px;
+                margin-left: 0;
+                font-weight: 500;
+            }
+        }
         .u-status {
             color: #fff;
             padding: 2px 8px;

src/components/dashboard/feedback/single.vue

@@ -13,35 +13,61 @@
                             <span class="u-value">{{ subtypes[data.subtype] }}</span>
                         </div>
                     </div>
-                    <el-dropdown
-                        v-if="isTeammate && data.status < 12"
-                        split-button
-                        trigger="click"
-                        type="primary"
-                        @click.stop="onDeal"
-                    >
-                        <i class="el-icon-s-tools u-dropdown-icon"></i>
-                        {{ statusText(data.status) }}
-                        <template #dropdown>
-                            <el-dropdown-menu>
-                                <el-dropdown-item @click="handleEdit">
-                                    <el-button class="u-btn" type="primary" icon="Edit">编辑</el-button>
-                                </el-dropdown-item>
-                                <el-dropdown-item @click="handleTransfer">
-                                    <el-button class="u-btn" type="warning" icon="Right">转交</el-button>
-                                </el-dropdown-item>
-                                <template v-if="data.status === 2">
-                                    <el-dropdown-item @click="handleCoordination">
-                                        <el-button class="u-btn" type="success" icon="Help">协同</el-button>
+                    <div class="m-actions" v-if="canCancelTicket || canUrgeTicket || (isTeammate && data.status < 12)">
+                        <el-button
+                            v-if="canCancelTicket"
+                            class="u-action-btn is-cancel"
+                            type="danger"
+                            plain
+                            icon="CircleClose"
+                            :loading="closeTicketLoading"
+                            :disabled="closeTicketLoading"
+                            @click.stop="onCancelTicket"
+                        >
+                            取消工单
+                        </el-button>
+                        <el-button
+                            v-if="canUrgeTicket"
+                            class="u-action-btn is-urgent"
+                            type="warning"
+                            plain
+                            icon="Bell"
+                            :loading="urgeTicketLoading"
+                            :disabled="urgeTicketLoading"
+                            @click.stop="onUrgeTicket"
+                        >
+                            催单
+                        </el-button>
+                        <el-dropdown
+                            v-if="isTeammate && data.status < 12"
+                            split-button
+                            trigger="click"
+                            type="primary"
+                            @click.stop="onDeal"
+                        >
+                            <i class="el-icon-s-tools u-dropdown-icon"></i>
+                            {{ statusText(data.status) }}
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item @click="handleEdit">
+                                        <el-button class="u-btn" type="primary" icon="Edit">编辑</el-button>
                                     </el-dropdown-item>
-
-                                    <el-dropdown-item @click="handleClose">
-                                        <el-button class="u-btn" type="info" icon="CircleClose">关闭 </el-button>
+                                    <el-dropdown-item @click="handleTransfer">
+                                        <el-button class="u-btn" type="warning" icon="Right">转交</el-button>
                                     </el-dropdown-item>
-                                </template>
-                            </el-dropdown-menu>
-                        </template>
-                    </el-dropdown>
+                                    <template v-if="data.status === 2">
+                                        <el-dropdown-item @click="handleCoordination">
+                                            <el-button class="u-btn" type="success" icon="Help">协同</el-button>
+                                        </el-dropdown-item>
+
+                                        <el-dropdown-item @click="handleClose">
+                                            <el-button class="u-btn" type="info" icon="CircleClose">关闭 </el-button>
+                                        </el-dropdown-item>
+                                    </template>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </div>
                 </div>
                 <div class="m-block m-user">
                     <div class="u-subblock">
@@ -292,7 +318,7 @@
 
 <script>
 import DOMPurify from "dompurify";
-import { getFeedback, getFeedbackLog } from "@/service/dashboard/feedback";
+import { closeMyFeedback, getFeedback, getFeedbackLog, urgeMyFeedback } from "@/service/dashboard/feedback";
 import { getTeammates } from "@/service/dashboard/index";
 import feedbackData from "@/assets/data/dashboard/feedback.json";
 const { types, subtypes, statusMap, statusColors, statusTypes } = feedbackData;
@@ -348,6 +374,8 @@ export default {
             opType: "assign",
             statusVisible: false,
             isClose: false,
+            closeTicketLoading: false,
+            urgeTicketLoading: false,
         };
     },
     computed: {
@@ -390,6 +418,27 @@ export default {
         videoAttachments() {
             return this.attachments.filter((item) => this.isVideoUrl(item));
         },
+        isTicketOwner() {
+            const user = User.getInfo();
+            const ownerId = Number(this.data?.user_id || this.data?.user?.id);
+            return User.isLogin() && Number(user?.uid) === ownerId;
+        },
+        isTicketFinalStatus() {
+            return [10, 11, 12].includes(Number(this.data?.status));
+        },
+        hasUrgedTicket() {
+            return Boolean(this.data?.is_urgent);
+        },
+        canCancelTicket() {
+            return this.isTicketOwner && !this.isTicketFinalStatus;
+        },
+        canUrgeTicket() {
+            return (
+                this.isTicketOwner &&
+                ![0, 10, 11, 12].includes(Number(this.data?.status)) &&
+                !this.hasUrgedTicket
+            );
+        },
     },
     watch: {
         id: {
@@ -477,6 +526,52 @@ export default {
             this.isClose = true;
             this.statusVisible = true;
         },
+        async onCancelTicket() {
+            if (!this.canCancelTicket || this.closeTicketLoading) return;
+
+            try {
+                const { value } = await this.$prompt("请输入取消工单的备注", "取消工单", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    inputPlaceholder: "请输入备注",
+                    inputValidator(value) {
+                        return !!String(value || "").trim() || "请输入备注";
+                    },
+                });
+                const remark = String(value || "").trim();
+                this.closeTicketLoading = true;
+                await closeMyFeedback(this.id, { remark });
+                this.$message.success("取消成功");
+                this.load();
+            } catch (error) {
+                if (error !== "cancel" && error !== "close") {
+                    this.$message.error(error?.response?.data?.msg || "取消失败");
+                }
+            } finally {
+                this.closeTicketLoading = false;
+            }
+        },
+        async onUrgeTicket() {
+            if (!this.canUrgeTicket || this.urgeTicketLoading) return;
+
+            try {
+                await this.$confirm("每个工单只有一次催单机会，确定要催单吗？", "催单", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                });
+                this.urgeTicketLoading = true;
+                await urgeMyFeedback(this.id);
+                this.$message.success("催单成功");
+                this.load();
+            } catch (error) {
+                if (error !== "cancel" && error !== "close") {
+                    this.$message.error(error?.response?.data?.msg || "催单失败");
+                }
+            } finally {
+                this.urgeTicketLoading = false;
+            }
+        },
         loadLogs() {
             this.logLoading = true;
             getFeedbackLog(this.id)

src/service/dashboard/feedback.js

@@ -51,6 +51,23 @@ function getFeedbackLog(id) {
     return $next().get(`/api/next2/miscfeedback/item/${id}/history`);
 }
 
+/**
+ * 用户取消自己的反馈工单
+ * @param {*} id 反馈id
+ * @param {*} data 取消备注
+ */
+function closeMyFeedback(id, data) {
+    return $next().put(`/api/next2/miscfeedback/my/item/${id}/close`, data);
+}
+
+/**
+ * 用户催促自己的反馈工单
+ * @param {*} id 反馈id
+ */
+function urgeMyFeedback(id) {
+    return $next().post(`/api/next2/miscfeedback/item/${id}/urgent`);
+}
+
 /**
  * 更新反馈
  * @param {*} id 反馈id
@@ -97,6 +114,8 @@ export {
     getFeedback,
     getMiscfeedback,
     getFeedbackLog,
+    closeMyFeedback,
+    urgeMyFeedback,
     updateFeedback,
     getTeammates,
     assignMiscFeedback,

tests/feedback-close-ticket.test.mjs

@@ -0,0 +1,63 @@
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.resolve(__dirname, "..");
+const service = fs.readFileSync(path.join(root, "src/service/dashboard/feedback.js"), "utf8");
+const page = fs.readFileSync(path.join(root, "src/components/dashboard/feedback/single.vue"), "utf8");
+
+assert.match(
+    service,
+    /function closeMyFeedback\(id,\s*data\)\s*{[\s\S]*miscfeedback\/my\/item\/\$\{id\}\/close[\s\S]*}/,
+    "service should expose closeMyFeedback using the user close endpoint"
+);
+
+assert.match(
+    service,
+    /function urgeMyFeedback\(id\)\s*{[\s\S]*\$next\(\)\.post\(`\/api\/next2\/miscfeedback\/item\/\$\{id\}\/urgent`\)[\s\S]*}/,
+    "service should expose urgeMyFeedback using the urgent endpoint"
+);
+
+assert.match(
+    page,
+    /<el-button[\s\S]*class="u-action-btn is-cancel"[\s\S]*icon="CircleClose"[\s\S]*取消工单[\s\S]*<\/el-button>[\s\S]*<el-dropdown/,
+    "feedback detail should render cancel ticket button with icon before the deal dropdown"
+);
+
+assert.match(
+    page,
+    /isTicketOwner\(\)[\s\S]*const user = User\.getInfo\(\)[\s\S]*const ownerId = Number\(this\.data\?\.user_id \|\| this\.data\?\.user\?\.id\)[\s\S]*User\.isLogin\(\) && Number\(user\?\.uid\) === ownerId[\s\S]*isTicketFinalStatus\(\)[\s\S]*\[10,\s*11,\s*12\]\.includes\(Number\(this\.data\?\.status\)\)[\s\S]*canCancelTicket\(\)[\s\S]*this\.isTicketOwner && !this\.isTicketFinalStatus/,
+    "cancel ticket button should only be available to the ticket owner before processed, closed, or settled statuses"
+);
+
+assert.match(
+    page,
+    /closeMyFeedback\(this\.id,\s*{\s*remark\s*}\)/,
+    "cancel ticket should call closeMyFeedback with only remark in the payload"
+);
+
+assert.match(
+    page,
+    /<el-button[\s\S]*class="u-action-btn is-urgent"[\s\S]*icon="Bell"[\s\S]*催单[\s\S]*<\/el-button>[\s\S]*<el-dropdown/,
+    "feedback detail should render urge ticket button with icon before the deal dropdown"
+);
+
+assert.match(
+    fs.readFileSync(path.join(root, "src/assets/css/dashboard/feedback_single.less"), "utf8"),
+    /\.m-actions[\s\S]*gap:\s*12px[\s\S]*>\s*\*[\s\S]*margin-left:\s*0 !important[\s\S]*\.u-action-btn[\s\S]*height:\s*32px/,
+    "feedback action buttons should have one consistent gap and stable button sizing"
+);
+
+assert.match(
+    page,
+    /hasUrgedTicket\(\)[\s\S]*Boolean\(this\.data\?\.is_urgent\)[\s\S]*canUrgeTicket\(\)[\s\S]*this\.isTicketOwner[\s\S]*!\[0,\s*10,\s*11,\s*12\]\.includes\(Number\(this\.data\?\.status\)\)[\s\S]*!this\.hasUrgedTicket/,
+    "urge ticket button should only be available to the ticket owner after assignment and before final statuses once"
+);
+
+assert.match(
+    page,
+    /urgeMyFeedback\(this\.id\)/,
+    "urge ticket should call urgeMyFeedback"
+);