From 07c988e61f72ec4630f60daad597d65c5d0e7152 Mon Sep 17 00:00:00 2001
From: linmianxun <634841751@qq.com>
Date: Mon, 14 Sep 2026 21:27:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E5=8D=95=E5=88=9B=E5=BB=BA=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E6=94=B9=E7=94=A8=20Ant=20RangePicker=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=80=E6=AC=A1=E5=BC=B9=E5=B1=82=E9=80=89=E8=B5=B7=E6=AD=A2?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=8E=E7=AD=9B=E9=80=89=E5=90=8C=E6=AD=A5=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../views/inquiry/styles/admin-fidelity.css   | 104 ++++++------------
 .../src/views/inquiry/workOrder/index.vue     |  76 +++++--------
 2 files changed, 62 insertions(+), 118 deletions(-)

diff --git a/inquiry-backend/src/views/inquiry/styles/admin-fidelity.css b/inquiry-backend/src/views/inquiry/styles/admin-fidelity.css
index 099cf96..087003a 100644
--- a/inquiry-backend/src/views/inquiry/styles/admin-fidelity.css
+++ b/inquiry-backend/src/views/inquiry/styles/admin-fidelity.css
@@ -284,94 +284,62 @@ body {
   box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12) !important;
 }
 
-/* 日期范围：与 select 同高同边框；文案可见，原生 date 透明铺满，点文字即弹日历 */
+/* 日期范围：Ant RangePicker，一次弹层点选起止；外观对齐工具栏 select */
 .toolbar-date-range {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  flex-shrink: 0;
   height: 38px;
-  box-sizing: border-box;
-  padding: 0 12px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: #ffffff;
-  flex-shrink: 0;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
-.toolbar-date-range:hover {
-  border-color: #98a2b3;
+.toolbar-date-range .toolbar-range-picker.ant-picker,
+.toolbar-date-range .ant-picker {
+  height: 38px !important;
+  padding: 0 12px !important;
+  border: 1px solid var(--line) !important;
+  border-radius: 8px !important;
+  background: #ffffff !important;
+  box-shadow: none !important;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
 }
 
-.toolbar-date-range:focus-within {
-  border-color: #155eef;
-  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12);
+.toolbar-date-range .ant-picker:hover {
+  border-color: #98a2b3 !important;
 }
 
-.toolbar-date-icon {
-  color: #98a2b3;
-  flex-shrink: 0;
-  pointer-events: none;
+.toolbar-date-range .ant-picker-focused,
+.toolbar-date-range .ant-picker:focus,
+.toolbar-date-range .ant-picker.ant-picker-focused {
+  border-color: #155eef !important;
+  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12) !important;
 }
 
-.toolbar-date-part {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  min-width: 84px;
-  height: 28px;
-  padding: 0 2px;
-  cursor: pointer;
+.toolbar-date-range .ant-picker-input > input {
+  font-size: 11px !important;
+  font-weight: 700 !important;
+  color: #344054 !important;
+  cursor: pointer !important;
 }
 
-.toolbar-date-label {
-  font-size: 11px;
-  font-weight: 700;
-  color: #344054;
-  white-space: nowrap;
-  line-height: 1;
-  pointer-events: none;
-  user-select: none;
+.toolbar-date-range .ant-picker-input > input::placeholder {
+  color: #98a2b3 !important;
+  font-weight: 600 !important;
 }
 
-.toolbar-date-label.is-placeholder {
-  color: #98a2b3;
-  font-weight: 600;
+.toolbar-date-range .ant-picker-separator {
+  color: #98a2b3 !important;
+  font-size: 11px !important;
+  font-weight: 600 !important;
+  padding: 0 4px !important;
 }
 
-.toolbar-date-native {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  opacity: 0;
-  cursor: pointer;
-  font-size: 16px;
-  background: transparent;
+.toolbar-date-range .ant-picker-suffix {
+  color: #98a2b3 !important;
+  margin-left: 4px !important;
 }
 
-/* WebKit：把日历图标热区拉满整格，点文字区域也能出 picker */
-.toolbar-date-native::-webkit-calendar-picker-indicator {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.toolbar-date-sep {
-  font-size: 11px;
-  font-weight: 600;
-  color: #98a2b3;
-  flex-shrink: 0;
-  line-height: 1;
-  user-select: none;
+.toolbar-date-range .ant-picker-clear {
+  background: #ffffff !important;
 }
 
 .toolbar .toolbar-actions .btn {
diff --git a/inquiry-backend/src/views/inquiry/workOrder/index.vue b/inquiry-backend/src/views/inquiry/workOrder/index.vue
index 074dd7c..856ed5c 100644
--- a/inquiry-backend/src/views/inquiry/workOrder/index.vue
+++ b/inquiry-backend/src/views/inquiry/workOrder/index.vue
@@ -5,7 +5,7 @@
  * 详情/关单弹窗必须用 AdminModal：本工程 ant-design-vue 3 的 a-modal 只认 visible，
  * v-model:open 不会弹出（账号/角色页已统一走 AdminModal）。
  */
-import { onMounted, reactive, ref, watch } from "vue";
+import { computed, onMounted, reactive, ref, watch } from "vue";
 import { message, Modal } from "ant-design-vue";
 import {
   getWorkOrderDetail,
@@ -67,29 +67,20 @@ const closeOpen = ref(false);
 const current = ref<TicketRow | null>(null);
 const closeReason = ref("");
 
-/** 创建时间起止：原生 date 叠在文案上，点文字也能弹出日历 */
-const dateFromRef = ref<HTMLInputElement | null>(null);
-const dateToRef = ref<HTMLInputElement | null>(null);
-
 /**
- * 打开系统日期面板。
- * 点「开始/结束日期」文案时调用；优先 HTMLInputElement.showPicker。
- * 不在此处再 el.click()，避免与 input 的 click 互相重入。
- * WebKit 另靠 CSS 把 calendar-picker-indicator 铺满热区兜底。
+ * 创建时间范围：与 filters.dateFrom/dateTo 双向同步。
+ * RangePicker 一次弹层点选起止两天；valueFormat 固定 YYYY-MM-DD 给列表 API。
  */
-function openDatePicker(which: "from" | "to") {
-  const el = which === "from" ? dateFromRef.value : dateToRef.value;
-  if (!el) return;
-  try {
-    if (typeof (el as HTMLInputElement & { showPicker?: () => void }).showPicker === "function") {
-      (el as HTMLInputElement & { showPicker: () => void }).showPicker();
-    } else {
-      el.focus();
-    }
-  } catch {
-    el.focus();
-  }
-}
+const dateRange = computed({
+  get(): [string, string] | undefined {
+    if (!filters.dateFrom && !filters.dateTo) return undefined;
+    return [filters.dateFrom || "", filters.dateTo || ""];
+  },
+  set(v: [string, string] | null | undefined) {
+    filters.dateFrom = v?.[0] ? String(v[0]) : "";
+    filters.dateTo = v?.[1] ? String(v[1]) : "";
+  },
+});
 
 function dash(v: any) {
   const s = (v ?? "").toString().trim();
@@ -438,34 +429,19 @@ function refresh() {
           <option value="多段联运">多段联运</option>
         </select>
         <div class="toolbar-date-range" title="按创建时间筛选">
-          <ProtoIcon name="calendar" :size="14" class="toolbar-date-icon" />
-          <div class="toolbar-date-part" @click="openDatePicker('from')">
-            <span class="toolbar-date-label" :class="{ 'is-placeholder': !filters.dateFrom }">
-              {{ filters.dateFrom || "开始日期" }}
-            </span>
-            <input
-              ref="dateFromRef"
-              v-model="filters.dateFrom"
-              type="date"
-              class="toolbar-date-native"
-              aria-label="创建时间起"
-              @click.stop="openDatePicker('from')"
-            />
-          </div>
-          <span class="toolbar-date-sep">至</span>
-          <div class="toolbar-date-part" @click="openDatePicker('to')">
-            <span class="toolbar-date-label" :class="{ 'is-placeholder': !filters.dateTo }">
-              {{ filters.dateTo || "结束日期" }}
-            </span>
-            <input
-              ref="dateToRef"
-              v-model="filters.dateTo"
-              type="date"
-              class="toolbar-date-native"
-              aria-label="创建时间止"
-              @click.stop="openDatePicker('to')"
-            />
-          </div>
+          <a-range-picker
+            v-model:value="dateRange"
+            class="toolbar-range-picker"
+            value-format="YYYY-MM-DD"
+            separator="至"
+            :placeholder="['开始日期', '结束日期']"
+            :allow-clear="true"
+            :input-read-only="true"
+          >
+            <template #suffixIcon>
+              <ProtoIcon name="calendar" :size="14" />
+            </template>
+          </a-range-picker>
         </div>
       </div>