工单创建时间改用 Ant RangePicker，一次弹层选起止并与筛选同步。

Co-authored-by: Cursor <cursoragent@cursor.com>

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 {
+.toolbar-date-range .toolbar-range-picker.ant-picker,
-  border-color: #98a2b3;
+.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 {
+.toolbar-date-range .ant-picker:hover {
-  border-color: #155eef;
+  border-color: #98a2b3 !important;
-  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12);
 }
 
-.toolbar-date-icon {
+.toolbar-date-range .ant-picker-focused,
-  color: #98a2b3;
+.toolbar-date-range .ant-picker:focus,
-  flex-shrink: 0;
+.toolbar-date-range .ant-picker.ant-picker-focused {
-  pointer-events: none;
+  border-color: #155eef !important;
+  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12) !important;
 }
 
-.toolbar-date-part {
+.toolbar-date-range .ant-picker-input > input {
-  position: relative;
+  font-size: 11px !important;
-  display: inline-flex;
+  font-weight: 700 !important;
-  align-items: center;
+  color: #344054 !important;
-  min-width: 84px;
+  cursor: pointer !important;
-  height: 28px;
-  padding: 0 2px;
-  cursor: pointer;
 }
 
-.toolbar-date-label {
+.toolbar-date-range .ant-picker-input > input::placeholder {
-  font-size: 11px;
+  color: #98a2b3 !important;
-  font-weight: 700;
+  font-weight: 600 !important;
-  color: #344054;
-  white-space: nowrap;
-  line-height: 1;
-  pointer-events: none;
-  user-select: none;
 }
 
-.toolbar-date-label.is-placeholder {
+.toolbar-date-range .ant-picker-separator {
-  color: #98a2b3;
+  color: #98a2b3 !important;
-  font-weight: 600;
+  font-size: 11px !important;
+  font-weight: 600 !important;
+  padding: 0 4px !important;
 }
 
-.toolbar-date-native {
+.toolbar-date-range .ant-picker-suffix {
-  position: absolute;
+  color: #98a2b3 !important;
-  inset: 0;
+  margin-left: 4px !important;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  opacity: 0;
-  cursor: pointer;
-  font-size: 16px;
-  background: transparent;
 }
 
-/* WebKit：把日历图标热区拉满整格，点文字区域也能出 picker */
+.toolbar-date-range .ant-picker-clear {
-.toolbar-date-native::-webkit-calendar-picker-indicator {
+  background: #ffffff !important;
-  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 .toolbar-actions .btn {

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);
-
 /**
- * 打开系统日期面板。
+ * 创建时间范围：与 filters.dateFrom/dateTo 双向同步。
- * 点「开始/结束日期」文案时调用；优先 HTMLInputElement.showPicker。
+ * RangePicker 一次弹层点选起止两天；valueFormat 固定 YYYY-MM-DD 给列表 API。
- * 不在此处再 el.click()，避免与 input 的 click 互相重入。
- * WebKit 另靠 CSS 把 calendar-picker-indicator 铺满热区兜底。
  */
-function openDatePicker(which: "from" | "to") {
+const dateRange = computed({
-  const el = which === "from" ? dateFromRef.value : dateToRef.value;
+  get(): [string, string] | undefined {
-  if (!el) return;
+    if (!filters.dateFrom && !filters.dateTo) return undefined;
-  try {
+    return [filters.dateFrom || "", filters.dateTo || ""];
-    if (typeof (el as HTMLInputElement & { showPicker?: () => void }).showPicker === "function") {
+  },
-      (el as HTMLInputElement & { showPicker: () => void }).showPicker();
+  set(v: [string, string] | null | undefined) {
-    } else {
+    filters.dateFrom = v?.[0] ? String(v[0]) : "";
-      el.focus();
+    filters.dateTo = v?.[1] ? String(v[1]) : "";
-    }
+  },
-  } catch {
+});
-    el.focus();
-  }
-}
 
 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" />
+          <a-range-picker
-          <div class="toolbar-date-part" @click="openDatePicker('from')">
+            v-model:value="dateRange"
-            <span class="toolbar-date-label" :class="{ 'is-placeholder': !filters.dateFrom }">
+            class="toolbar-range-picker"
-              {{ filters.dateFrom || "开始日期" }}
+            value-format="YYYY-MM-DD"
-            </span>
+            separator="至"
-            <input
+            :placeholder="['开始日期', '结束日期']"
-              ref="dateFromRef"
+            :allow-clear="true"
-              v-model="filters.dateFrom"
+            :input-read-only="true"
-              type="date"
+          >
-              class="toolbar-date-native"
+            <template #suffixIcon>
-              aria-label="创建时间起"
+              <ProtoIcon name="calendar" :size="14" />
-              @click.stop="openDatePicker('from')"
+            </template>
-            />
+          </a-range-picker>
-          </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>
         </div>
       </div>