From c9efdb0e65a5f6594bdf1c6b9cb4fb024feb15d9 Mon Sep 17 00:00:00 2001
From: "2358328281@qq.com" <邮箱地址>
Date: Fri, 19 Jun 2026 22:19:53 +0800
Subject: [PATCH] =?UTF-8?q?csm=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/lang/zh-CN.js               |   6 +-
 src/i18n/lang/zh-TW.js               |   2 +-
 src/views/admin/hospitals/detail.vue |   2 +-
 src/views/admin/orders/detail.vue    |   2 +-
 src/views/admin/orders/list.vue      | 208 ++++++++++++++++-----------
 src/views/admin/orders/process.vue   |  53 +++++--
 6 files changed, 172 insertions(+), 101 deletions(-)

diff --git a/src/i18n/lang/zh-CN.js b/src/i18n/lang/zh-CN.js
index db1b8ec..5838d59 100644
--- a/src/i18n/lang/zh-CN.js
+++ b/src/i18n/lang/zh-CN.js
@@ -97,6 +97,7 @@ export default {
     close: "关闭",
     detail: "详情",
     process: "处理",
+    modify: "修改",
     submit: "提交工单",
     save: "保存修改",
     cancelModal: "取消",
@@ -142,11 +143,12 @@ export default {
     category: "客户分类",
     signDate: "签约时间",
     acceptDate: "验收时间",
-    years: "年限",
+    years: "免费维保年限",
     maintenanceEndDate: "维保截止时间",
     manager: "客户经理",
     acceptanceReport: "请上传验收报告",
     acceptanceReportTip: "支持上传PDF格式文件（必填）",
+    attachmentTip: "（不超过50M）",
     account: "账号",
     accountType: "账号类型",
     nameAccount: "姓名/账号",
@@ -252,7 +254,7 @@ export default {
     phone: "联系电话",
     manager: "客户经理",
     signDate: "签约日期",
-    usageYears: "客户使用年限",
+    usageYears: "累计使用年限",
     maintenanceEnd: "维保截止时间",
     acceptanceReport: "验收报告",
     account: "账号",
diff --git a/src/i18n/lang/zh-TW.js b/src/i18n/lang/zh-TW.js
index 27bc8d0..35dda27 100644
--- a/src/i18n/lang/zh-TW.js
+++ b/src/i18n/lang/zh-TW.js
@@ -142,7 +142,7 @@ export default {
         category: '客戶分類',
         signDate: '簽約時間',
         acceptDate: '驗收時間',
-        years: '年限',
+        years: '免费维保年限',
         maintenanceEndDate: '維保截止時間',
         manager: '客戶經理',
         acceptanceReport: '驗收報告',
diff --git a/src/views/admin/hospitals/detail.vue b/src/views/admin/hospitals/detail.vue
index d3b2ea6..c09c775 100644
--- a/src/views/admin/hospitals/detail.vue
+++ b/src/views/admin/hospitals/detail.vue
@@ -24,7 +24,7 @@
         <el-descriptions-item :label="$t('label.contactPhone')">{{ detail.contactPhone }}</el-descriptions-item>
         <el-descriptions-item :label="$t('table.signDate')">{{ formatDate(detail.signDate) }}</el-descriptions-item>
         <el-descriptions-item :label="$t('label.acceptDate')">{{ formatDate(detail.acceptDate) }}</el-descriptions-item>
-        <el-descriptions-item :label="$t('label.years')">{{ formatUsageYears(detail.signDate) }}</el-descriptions-item>
+        <el-descriptions-item :label="$t('label.years')">{{ detail.contractYears }}年</el-descriptions-item>
         <el-descriptions-item :label="$t('table.maintenanceEnd')">{{ formatDate(detail.maintenanceEnd) }}</el-descriptions-item>
         <el-descriptions-item :label="$t('table.manager')">{{ detail.managerName }}</el-descriptions-item>
       </el-descriptions>
diff --git a/src/views/admin/orders/detail.vue b/src/views/admin/orders/detail.vue
index 610a98f..5f7a90a 100644
--- a/src/views/admin/orders/detail.vue
+++ b/src/views/admin/orders/detail.vue
@@ -39,7 +39,7 @@
       </div>
 
       <div class="section">
-        <div class="section-title">{{ $t('label.attachment') }} ({{ (detail.attachments || []).length }})</div>
+        <div class="section-title">{{ $t('label.attachment') }}</div>
         <el-empty v-if="!detail.attachments?.length" :description="$t('orderDetail.noAttachment')" :image-size="80" />
         <div v-else class="files">
           <el-button
diff --git a/src/views/admin/orders/list.vue b/src/views/admin/orders/list.vue
index 19af284..f816424 100644
--- a/src/views/admin/orders/list.vue
+++ b/src/views/admin/orders/list.vue
@@ -85,22 +85,38 @@
       </el-form>
       <!-- 工单总览 -->
       <div class="order-stats">
-        <div class="stat-card stat-total">
+        <div
+          class="stat-card stat-total"
+          :class="{ active: activeStat === 'total' }"
+          @click="onStatClick('total')"
+        >
           <div class="stat-icon">📋</div>
           <div class="stat-value">{{ stats.total }}</div>
           <div class="stat-label">{{ $t("stat.totalOrders") }}</div>
         </div>
-        <div class="stat-card stat-pending">
+        <div
+          class="stat-card stat-pending"
+          :class="{ active: activeStat === 'pending' }"
+          @click="onStatClick('pending')"
+        >
           <div class="stat-icon">⏳</div>
           <div class="stat-value">{{ stats.pending }}</div>
           <div class="stat-label">{{ $t("stat.pendingOrders") }}</div>
         </div>
-        <div class="stat-card stat-completed">
+        <div
+          class="stat-card stat-completed"
+          :class="{ active: activeStat === 'completed' }"
+          @click="onStatClick('completed')"
+        >
           <div class="stat-icon">✅</div>
           <div class="stat-value">{{ stats.completed }}</div>
           <div class="stat-label">{{ $t("stat.completedOrders") }}</div>
         </div>
-        <div class="stat-card stat-high">
+        <div
+          class="stat-card stat-high"
+          :class="{ active: activeStat === 'high' }"
+          @click="onStatClick('high')"
+        >
           <div class="stat-icon">🔴</div>
           <div class="stat-value">{{ stats.highPriority }}</div>
           <div class="stat-label">{{ $t("stat.highPriorityOrders") }}</div>
@@ -114,10 +130,17 @@
           min-width="160"
           show-overflow-tooltip
         />
+        <el-table-column :label="$t('table.priority')" width="90">
+          <template #default="{ row }">
+            <el-tag :type="priorityType(row.priority)" size="small">{{
+              row.priority
+            }}</el-tag>
+          </template>
+        </el-table-column>
         <el-table-column
           :label="$t('table.title')"
           prop="title"
-          min-width="200"
+          min-width="300"
           show-overflow-tooltip
         />
         <el-table-column
@@ -155,14 +178,7 @@
           width="170"
         >
           <template #default="{ row }">
-            {{ row.completedAt || '-' }}
-          </template>
-        </el-table-column>
-        <el-table-column :label="$t('table.priority')" width="90">
-          <template #default="{ row }">
-            <el-tag :type="priorityType(row.priority)" size="small">{{
-              row.priority
-            }}</el-tag>
+            {{ row.completedAt || "-" }}
           </template>
         </el-table-column>
         <el-table-column :label="$t('table.status')" width="100">
@@ -184,10 +200,11 @@
             }}</el-button>
             <el-button
               link
-              type="success"
-              v-if="row.status !== '已完成'"
+              :type="row.status === '已完成' ? 'warning' : 'success'"
               @click="goProcess(row.id)"
-              >{{ $t("btn.process") }}</el-button
+              >{{
+                row.status === "已完成" ? $t("btn.modify") : $t("btn.process")
+              }}</el-button
             >
           </template>
         </el-table-column>
@@ -290,18 +307,18 @@
             <el-radio-button label="低">低</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item :label="$t('label.name')">
-          <el-input
-            v-model="quickForm.submitter"
-            :placeholder="$t('placeholder.name')"
-          />
-        </el-form-item>
         <el-form-item :label="$t('label.dept')">
           <el-input
             v-model="quickForm.department"
             :placeholder="$t('placeholder.dept')"
           />
         </el-form-item>
+        <el-form-item :label="$t('label.name')">
+          <el-input
+            v-model="quickForm.submitter"
+            :placeholder="$t('placeholder.name')"
+          />
+        </el-form-item>
         <el-form-item :label="$t('label.description')" prop="description">
           <div class="rich-editor">
             <Toolbar
@@ -321,28 +338,21 @@
           </div>
         </el-form-item>
         <el-form-item :label="$t('label.attachment')">
-          <div class="attachment-pick">
-            <el-input
-              :model-value="quickForm.files[0]?.name || ''"
-              :placeholder="$t('upload.text')"
-              readonly
-              clearable
-              @click="triggerFilePicker"
-              @clear="clearFile"
-            >
-              <template #append>
-                <el-button @click.stop="triggerFilePicker">{{
-                  $t("btn.upload")
-                }}</el-button>
-              </template>
-            </el-input>
-            <input
-              ref="fileInputRef"
-              type="file"
-              class="attachment-hidden-input"
-              @change="onFileChange"
-            />
-          </div>
+          <el-upload
+            v-model:file-list="quickForm.files"
+            :auto-upload="false"
+            :limit="1"
+            :on-exceed="handleAttachmentExceed"
+            :on-remove="handleAttachmentRemove"
+            :on-change="handleAttachmentChange"
+          >
+            <el-button type="primary" plain>{{ $t("btn.upload") }}</el-button>
+            <template #tip>
+              <div class="el-upload__tip">
+                {{ $t("label.attachmentTip") }}
+              </div>
+            </template>
+          </el-upload>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -361,10 +371,11 @@
 </template>
 
 <script setup>
+import dayjs from "dayjs";
 import {
   nextTick,
   onBeforeUnmount,
-  onMounted, 
+  onMounted,
   reactive,
   ref,
   shallowRef,
@@ -422,6 +433,8 @@ const stats = reactive({
   completed: 0,
   highPriority: 0,
 });
+// 当前选中的总览卡片：total | pending | completed | high
+const activeStat = ref("total");
 const parseStats = (res) => {
   stats.total = res?.total || 0;
   let payload = res?.data;
@@ -449,10 +462,12 @@ const loadList = async () => {
     list.value = res?.list || [];
     list.value.forEach((item) => {
       if (item.createdAt) {
-        item.createdAt = item.createdAt.split("T").join(" ");
+        item.createdAt = dayjs(item.createdAt).format("YYYY-MM-DD HH:mm:ss");
       }
       if (item.completedAt) {
-        item.completedAt = item.completedAt.split("T").join(" ");
+        item.completedAt = dayjs(item.completedAt).format(
+          "YYYY-MM-DD HH:mm:ss",
+        );
       }
     });
     total.value = res?.total || 0;
@@ -462,6 +477,26 @@ const loadList = async () => {
   }
 };
 
+// 总览卡片点击：根据卡片类型设置筛选条件并重新加载
+const onStatClick = (type) => {
+  activeStat.value = type;
+  if (type === "total") {
+    filters.status = "";
+    filters.priority = "";
+  } else if (type === "pending") {
+    filters.status = "待处理";
+    filters.priority = "";
+  } else if (type === "completed") {
+    filters.status = "已完成";
+    filters.priority = "";
+  } else if (type === "high") {
+    filters.status = "";
+    filters.priority = "高";
+  }
+  page.value = 1;
+  loadList();
+};
+
 const onSearch = () => {
   page.value = 1;
   loadList();
@@ -475,6 +510,7 @@ const onReset = () => {
     keyword: "",
   });
   dateRange.value = [];
+  activeStat.value = "total";
   onSearch();
 };
 
@@ -522,22 +558,27 @@ const quickForm = reactive({
   submitter: "",
   files: [],
 });
-const fileInputRef = ref();
 const MAX_FILE_SIZE = 50 * 1024 * 1024;
 // 粘贴到富文本的图片大小上限（base64 内联存储，避免 HTML 过大）
 const MAX_PASTE_IMAGE_SIZE = 5 * 1024 * 1024;
-const triggerFilePicker = () => {
-  fileInputRef.value?.click();
+
+// el-upload 事件：选文件后立即校验大小
+const handleAttachmentChange = (file) => {
+  if (file?.size > MAX_FILE_SIZE) {
+    ElMessage.warning("文件不能超过 50MB");
+    // 把超限文件从列表里移除
+    quickForm.files = quickForm.files.filter(
+      (f) => f.uid !== file.uid || f.size <= MAX_FILE_SIZE,
+    );
+  }
 };
-const onFileChange = (e) => {
-  const file = e.target.files?.[0];
-  e.target.value = "";
-  if (!file) return;
-  if (file.size > MAX_FILE_SIZE) return;
-  quickForm.files = [{ name: file.name, size: file.size, raw: file }];
+// el-upload 事件：超过 limit 时的回调
+const handleAttachmentExceed = () => {
+  ElMessage.warning("只能上传 1 个文件");
 };
-const clearFile = () => {
-  quickForm.files = [];
+// el-upload 事件：删除文件
+const handleAttachmentRemove = () => {
+  // el-upload 会自动从 v-model:file-list 移除，这里无需额外处理
 };
 const quickRules = {
   hospitalId: [
@@ -620,7 +661,7 @@ const collectPastedImages = (clipboardData) => {
   return files;
 };
 
-// 共用的图片粘贴处理逻辑（customPaste 和原生监听都走这里，用事件标记防重复）
+// 共用的图片粘贴处理逻辑
 const handleEditorPasteImage = (editor, event) => {
   if (event.__wpsImageHandled) return;
   const imageFiles = collectPastedImages(event.clipboardData);
@@ -630,15 +671,13 @@ const handleEditorPasteImage = (editor, event) => {
   if (typeof event.stopPropagation === "function") event.stopPropagation();
   if (typeof event.stopImmediatePropagation === "function")
     event.stopImmediatePropagation();
-  // ElMessage.info(`检测到 ${imageFiles.length} 张粘贴图片，正在处理...`);
 
-  // 同步先拿到当前 selection，等 FileReader 异步回调里恢复
   if (typeof editor.focus === "function") editor.focus();
   const savedSelection = editor.selection;
 
   imageFiles.forEach((file) => {
     if (file.size > MAX_PASTE_IMAGE_SIZE) {
-      ElMessage.warning("粘贴的图片不能超过 5MB，请使用下方附件上传");
+      ElMessage.warning("粘贴的图片不能超过 5MB");
       return;
     }
     const reader = new FileReader();
@@ -649,7 +688,6 @@ const handleEditorPasteImage = (editor, event) => {
         return;
       }
       try {
-        // 恢复保存的选区
         if (savedSelection) editor.select(savedSelection);
       } catch (_) {
         if (typeof editor.focus === "function") editor.focus();
@@ -658,32 +696,26 @@ const handleEditorPasteImage = (editor, event) => {
       editor.dangerouslyInsertHtml(
         `<img src="${dataUrl}" style="max-width:100%;height:auto;" />`,
       );
-      // 手动触发一次更新保证 v-model 同步
       if (typeof editor.updateView === "function") editor.updateView();
-      // ElMessage.success("图片插入成功");
     };
     reader.onerror = () => {
       ElMessage.error("图片处理失败");
     };
     reader.readAsDataURL(file);
   });
-  return false; // 告诉 wangEditor 跳过默认处理（customPaste 调用时生效）
+  return false;
 };
 
-// 注意：customPaste 不能放在 default-config 里（会被 wangEditor for Vue 检测到抛错）
-// 已改用 <Editor> 上的 @custom-paste 事件 + contentEditable 原生监听双重保障
 const editorConfig = {
   placeholder: $t("placeholder.description"),
 };
 let pasteHandlerRef = null;
 const handleEditorCreated = (editor) => {
   editorRef.value = editor;
-  // 额外在 contentEditable 上绑一份 capture 监听（防 customPaste 未生效的兜底）
   nextTick(() => {
     const root = typeof editor.$el === "function" ? editor.$el() : editor.$el;
     if (!root) return;
-    const editable =
-      root.querySelector?.('[contenteditable="true"]') || root;
+    const editable = root.querySelector?.('[contenteditable="true"]') || root;
     if (pasteHandlerRef) {
       editable.removeEventListener("paste", pasteHandlerRef, { capture: true });
     }
@@ -728,8 +760,9 @@ const submitQuick = async () => {
         }
       }
       formData.append("registrarName", userStore.userInfo?.userName || "");
+      // el-upload 的 file-list 元素 raw 字段就是 File 对象
       for (const f of files || []) {
-        formData.append("files", f.raw, f.name);
+        if (f.raw) formData.append("files", f.raw, f.name);
       }
       await createAdminOrder(formData);
       ElMessage.success($t("msg.submitSuccess"));
@@ -888,14 +921,6 @@ onBeforeUnmount(() => {
   transform: translate(-50%, -50%) rotate(-45deg);
 }
 
-// 附件上传
-.attachment-pick {
-  width: 100%;
-}
-.attachment-hidden-input {
-  display: none;
-}
-
 // 工单总览统计
 .order-stats {
   display: grid;
@@ -915,13 +940,32 @@ onBeforeUnmount(() => {
   border-left: 4px solid #d9d9d9;
   transition:
     transform 0.2s ease,
-    box-shadow 0.2s ease;
-  cursor: default;
+    box-shadow 0.2s ease,
+    background 0.2s ease;
+  cursor: pointer;
+  user-select: none;
 }
 .stat-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
 }
+.stat-card.active {
+  background: #f0f7ff;
+  box-shadow: 0 4px 14px rgba(24, 144, 255, 0.18);
+  transform: translateY(-2px);
+}
+.stat-card.active.stat-pending {
+  background: #fff7e6;
+  box-shadow: 0 4px 14px rgba(250, 140, 22, 0.18);
+}
+.stat-card.active.stat-completed {
+  background: #f6ffed;
+  box-shadow: 0 4px 14px rgba(82, 196, 26, 0.18);
+}
+.stat-card.active.stat-high {
+  background: #fff1f0;
+  box-shadow: 0 4px 14px rgba(255, 77, 79, 0.18);
+}
 .stat-total {
   border-left-color: #1890ff;
 }
diff --git a/src/views/admin/orders/process.vue b/src/views/admin/orders/process.vue
index 298a9fb..2893ebd 100644
--- a/src/views/admin/orders/process.vue
+++ b/src/views/admin/orders/process.vue
@@ -1,14 +1,19 @@
 <template>
   <div class="process" v-loading="loading">
-    <el-page-header :icon="ArrowLeft" :content="$t('common.back')" @back="goBack" class="page-header">
+    <el-page-header
+      :icon="ArrowLeft"
+      :content="$t('common.back')"
+      @back="goBack"
+      class="page-header"
+    >
       <template #content>
-        <span class="page-title">{{ $t('btn.process') }}</span>
+        <span class="page-title">{{ $t("btn.process") }}</span>
       </template>
     </el-page-header>
 
     <el-card shadow="never" v-if="detail.id" class="form-card">
       <template #header>
-        <span class="card-title">{{ $t('btn.process') }}</span>
+        <span class="card-title">{{ $t("btn.process") }}</span>
       </template>
 
       <el-form
@@ -61,8 +66,10 @@
         </el-form-item>
 
         <el-form-item>
-          <el-button type="primary" :loading="submitting" @click="submit">{{ $t('btn.confirm') }}</el-button>
-          <el-button @click="goBack">{{ $t('common.cancel') }}</el-button>
+          <el-button type="primary" :loading="submitting" @click="submit">{{
+            $t("btn.confirm")
+          }}</el-button>
+          <el-button @click="goBack">{{ $t("common.cancel") }}</el-button>
         </el-form-item>
       </el-form>
     </el-card>
@@ -70,14 +77,25 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef } from "vue";
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  shallowRef,
+} from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
 import { ArrowLeft } from "@element-plus/icons-vue";
 import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 import "@wangeditor/editor/dist/css/style.css";
 import { useI18n } from "vue-i18n";
-import { getAdminOrderDetail, processAdminOrder } from "@/service/modular/admin";
+import {
+  getAdminOrderDetail,
+  processAdminOrder,
+} from "@/service/modular/admin";
 import { useUserStore } from "@/stores/api/user";
 
 const { t: $t } = useI18n();
@@ -92,7 +110,11 @@ const formRef = ref();
 
 // 处理人显示当前登录用户名
 const handlerName = computed(
-  () => userStore.userInfo?.name || userStore.userInfo?.userName || userStore.userInfo?.account || '管理员',
+  () =>
+    userStore.userInfo?.name ||
+    userStore.userInfo?.userName ||
+    userStore.userInfo?.account ||
+    "管理员",
 );
 
 // 新状态只能为"已完成"
@@ -102,7 +124,9 @@ const form = reactive({
 });
 
 const rules = {
-  status: [{ required: true, message: () => $t('table.status'), trigger: "change" }],
+  status: [
+    { required: true, message: () => $t("table.status"), trigger: "change" },
+  ],
   processRemark: [
     {
       required: true,
@@ -112,7 +136,8 @@ const rules = {
           .replace(/<[^>]*>/g, "")
           .replace(/&nbsp;/gi, "")
           .trim();
-        if (!text && !hasImage) return callback(new Error($t('placeholder.remark')));
+        if (!text && !hasImage)
+          return callback(new Error($t("placeholder.remark")));
         callback();
       },
       trigger: "change",
@@ -133,7 +158,7 @@ const toolbarConfig = {
   ],
 };
 const editorConfig = {
-  placeholder: $t('placeholder.remark'),
+  placeholder: $t("placeholder.remark"),
 };
 
 // 粘贴到富文本的图片大小上限（base64 内联存储，避免 HTML 过大）
@@ -215,8 +240,7 @@ const handleEditorCreated = (editor) => {
   nextTick(() => {
     const root = typeof editor.$el === "function" ? editor.$el() : editor.$el;
     if (!root) return;
-    const editable =
-      root.querySelector?.('[contenteditable="true"]') || root;
+    const editable = root.querySelector?.('[contenteditable="true"]') || root;
     if (pasteHandlerRef) {
       editable.removeEventListener("paste", pasteHandlerRef, { capture: true });
     }
@@ -229,6 +253,7 @@ const loadDetail = async () => {
   loading.value = true;
   try {
     detail.value = await getAdminOrderDetail(route.params.id);
+    form.processRemark = detail.value.processRemark || "";
   } finally {
     loading.value = false;
   }
@@ -244,7 +269,7 @@ const submit = async () => {
         status: form.status,
         processRemark: form.processRemark,
       });
-      ElMessage.success($t('msg.editSuccess'));
+      ElMessage.success($t("msg.editSuccess"));
       router.replace("/admin/orders");
     } finally {
       submitting.value = false;