Refine travel reimbursement steward flow

Align planner, runtime rules, and policy assets so travel guidance
matches the updated reimbursement workflow.

web/src/views/TravelRequestDetailView.vue

@@ -228,7 +228,15 @@
                             <div class="expense-time-value">
                               <template v-if="editingExpenseId === item.id">
                                 <div class="cell-editor">
-                                  <input v-model="expenseEditor.itemDate" class="editor-input" type="date" />
+                                  <ElDatePicker
+                                    v-model="expenseEditor.itemDate"
+                                    class="editor-date-picker editor-control"
+                                    type="date"
+                                    value-format="YYYY-MM-DD"
+                                    format="YYYY/MM/DD"
+                                    popper-class="detail-editor-date-popper"
+                                    :clearable="false"
+                                  />
                                   <span>{{ item.dayLabel }}</span>
                                 </div>
                               </template>
@@ -242,7 +250,7 @@
                         <td class="expense-type col-type">
                           <template v-if="editingExpenseId === item.id">
                             <div class="cell-editor">
-                              <EnterpriseSelect v-model="expenseEditor.itemType" class="editor-select" :options="expenseTypeOptions" size="small" />
+                              <EnterpriseSelect v-model="expenseEditor.itemType" class="editor-select" :options="expenseTypeOptions" />
                               <span>编辑费用项目</span>
                             </div>
                           </template>
@@ -254,10 +262,10 @@
                         <td class="expense-desc col-desc">
                           <template v-if="editingExpenseId === item.id">
                             <div class="cell-editor">
-                              <input
+                              <ElInput
                                 v-model="expenseEditor.itemReason"
-                                class="editor-input"
-                                type="text"
+                                class="editor-input-control editor-control"
+                                clearable
                                 :placeholder="resolveExpenseReasonPlaceholder(expenseEditor.itemType)"
                               />
                               <span>{{ resolveExpenseReasonHelper(expenseEditor.itemType) }}</span>
@@ -271,18 +279,18 @@
                         <td class="expense-amount col-amount">
                           <template v-if="editingExpenseId === item.id">
                             <div class="cell-editor">
-                              <label class="currency-editor">
-                                <span>￥</span>
-                                <input
-                                  v-model="expenseEditor.itemAmount"
-                                  class="editor-input"
-                                  type="number"
-                                  min="0"
-                                  step="0.01"
-                                  placeholder="输入金额"
-                                />
-                              </label>
-                              <span>保存后自动格式化为人民币</span>
+                              <ElInput
+                                v-model="expenseEditor.itemAmount"
+                                class="editor-amount-input editor-control"
+                                type="number"
+                                inputmode="decimal"
+                                min="0"
+                                step="0.01"
+                                placeholder="输入金额"
+                              >
+                                <template #prefix>￥</template>
+                              </ElInput>
+                              <span>自动格式化</span>
                             </div>
                           </template>
                           <template v-else>
@@ -389,15 +397,15 @@
                         <td class="expense-risk-note col-risk-note">
                           <template v-if="editingExpenseId === item.id">
                             <div class="cell-editor">
-                              <textarea
+                              <ElInput
                                 v-model="expenseEditor.itemNote"
-                                class="editor-textarea risk-note-editor-textarea"
-                                rows="1"
+                                class="risk-note-editor-input editor-control"
+                                type="textarea"
+                                :rows="1"
+                                resize="none"
                                 placeholder="如票据存在异常或风险，请补充原因"
-                                @input="resizeExpenseNoteInput"
-                                @keydown.enter="resizeExpenseNoteInput"
-                              ></textarea>
-                              <span>用于说明改签、绕行、超标、票据异常等情况</span>
+                              />
+                              <span>非必填，若有异常则说明</span>
                             </div>
                           </template>
                           <template v-else>
@@ -886,3 +894,224 @@
 <style scoped src="../assets/styles/views/travel-request-detail-view.css"></style>
 <style scoped src="../assets/styles/views/travel-request-detail-view-part2.css"></style>
 <style scoped src="../assets/styles/views/travel-request-detail-responsive.css"></style>
+
+<style>
+/* 强力锁定表格中输入框的高度，解决 scoped 模式下有前缀的 Element Plus 子组件无法被 :deep 成功匹配的局限性 */
+.detail-expense-table .editor-control .el-input__wrapper,
+.detail-expense-table .editor-control .el-select__wrapper,
+.detail-expense-table .editor-select .el-select__wrapper,
+.detail-expense-table .editor-date-picker .el-input__wrapper {
+  box-sizing: border-box !important;
+  min-height: var(--expense-editor-control-height, 34px) !important;
+  height: var(--expense-editor-control-height, 34px) !important;
+  line-height: var(--expense-editor-control-line-height, 16px) !important;
+}
+
+.detail-expense-table .editor-control:not(.risk-note-editor-input),
+.detail-expense-table .editor-date-picker.editor-control,
+.detail-expense-table .editor-select {
+  min-height: var(--expense-editor-control-height, 34px) !important;
+  height: var(--expense-editor-control-height, 34px) !important;
+}
+
+.detail-expense-table .editor-date-picker.editor-control {
+  display: flex !important;
+  align-items: center !important;
+}
+
+.detail-expense-table .editor-date-picker.editor-control .el-input__wrapper {
+  gap: 4px !important;
+  padding-right: 7px !important;
+  padding-left: 7px !important;
+}
+
+.detail-expense-table .editor-date-picker.editor-control .el-input__inner,
+.detail-expense-table .editor-input-control.editor-control .el-input__inner,
+.detail-expense-table .editor-select .el-select__selected-item,
+.detail-expense-table .editor-select .el-select__placeholder {
+  height: var(--expense-editor-control-line-height, 16px) !important;
+  line-height: var(--expense-editor-control-line-height, 16px) !important;
+  font-size: 12px !important;
+}
+
+.detail-expense-table .editor-date-picker.editor-control .el-input__prefix,
+.detail-expense-table .editor-date-picker.editor-control .el-input__suffix,
+.detail-expense-table .editor-date-picker.editor-control .el-input__prefix-inner,
+.detail-expense-table .editor-date-picker.editor-control .el-input__suffix-inner {
+  display: inline-flex !important;
+  align-items: center !important;
+}
+
+.detail-expense-table .editor-date-picker.editor-control .el-input__prefix,
+.detail-expense-table .editor-date-picker.editor-control .el-input__suffix {
+  min-height: var(--expense-editor-control-height, 34px) !important;
+  height: var(--expense-editor-control-height, 34px) !important;
+}
+
+.detail-expense-table .editor-date-picker.editor-control .el-input__prefix {
+  flex: 0 0 14px !important;
+  width: 14px !important;
+  min-width: 14px !important;
+  margin: 0 !important;
+  color: #94a3b8 !important;
+  font-size: 13px !important;
+}
+
+.detail-expense-table .editor-date-picker.editor-control .el-input__suffix {
+  display: none !important;
+}
+
+.detail-expense-table .editor-date-picker.editor-control .el-input__prefix-inner,
+.detail-expense-table .editor-date-picker.editor-control .el-input__suffix-inner {
+  height: var(--expense-editor-control-line-height, 16px) !important;
+  line-height: var(--expense-editor-control-line-height, 16px) !important;
+}
+
+.detail-expense-table .editor-date-picker.editor-control .el-input__prefix-inner {
+  width: 14px !important;
+  font-size: 13px !important;
+}
+
+.detail-expense-table .editor-amount-input.editor-control {
+  display: flex !important;
+  align-items: center !important;
+}
+
+.detail-expense-table .editor-amount-input.editor-control .el-input__wrapper {
+  display: flex !important;
+  align-items: center !important;
+  min-height: var(--expense-editor-control-height, 34px) !important;
+  height: var(--expense-editor-control-height, 34px) !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.detail-expense-table .editor-amount-input.editor-control .el-input__inner {
+  height: var(--expense-editor-control-line-height, 16px) !important;
+  line-height: var(--expense-editor-control-line-height, 16px) !important;
+}
+
+.detail-expense-table .editor-amount-input.editor-control .el-input__prefix,
+.detail-expense-table .editor-amount-input.editor-control .el-input__prefix-inner {
+  display: inline-flex !important;
+  align-items: center !important;
+}
+
+.detail-expense-table .editor-amount-input.editor-control .el-input__prefix {
+  min-height: var(--expense-editor-control-height, 34px) !important;
+  height: var(--expense-editor-control-height, 34px) !important;
+}
+
+.detail-expense-table .editor-amount-input.editor-control .el-input__prefix-inner {
+  height: var(--expense-editor-control-line-height, 16px) !important;
+  line-height: var(--expense-editor-control-line-height, 16px) !important;
+}
+
+.detail-editor-date-popper.el-popper {
+  border: 1px solid rgba(148, 163, 184, .32) !important;
+  border-radius: 4px !important;
+  background: #ffffff !important;
+  box-shadow: 0 18px 42px rgba(15, 23, 42, .14) !important;
+}
+
+.detail-editor-date-popper .el-picker-panel {
+  border: 0 !important;
+  border-radius: 4px !important;
+  background: #ffffff !important;
+  color: #334155 !important;
+}
+
+.detail-editor-date-popper .el-date-picker__header {
+  height: 38px !important;
+  margin: 0 !important;
+  padding: 0 10px !important;
+  border-bottom: 1px solid #e2e8f0 !important;
+  display: flex !important;
+  align-items: center !important;
+}
+
+.detail-editor-date-popper .el-picker-panel__icon-btn {
+  appearance: none !important;
+  width: 24px !important;
+  height: 24px !important;
+  margin: 0 1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 4px !important;
+  background: transparent !important;
+  color: #64748b !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  transition: background-color 160ms var(--ease), color 160ms var(--ease) !important;
+}
+
+.detail-editor-date-popper .el-picker-panel__icon-btn:hover {
+  background: var(--theme-primary-soft) !important;
+  color: var(--theme-primary-active) !important;
+}
+
+.detail-editor-date-popper .el-date-picker__header-label {
+  color: #0f172a !important;
+  font-size: 13px !important;
+  font-weight: 800 !important;
+}
+
+.detail-editor-date-popper .el-picker-panel__content {
+  margin: 8px 10px 10px !important;
+}
+
+.detail-editor-date-popper .el-date-table th {
+  border-bottom: 1px solid #edf2f7 !important;
+  color: #64748b !important;
+  font-size: 11px !important;
+  font-weight: 800 !important;
+}
+
+.detail-editor-date-popper .el-date-table td {
+  width: 32px !important;
+  height: 30px !important;
+  padding: 2px !important;
+}
+
+.detail-editor-date-popper .el-date-table td .el-date-table-cell {
+  height: 28px !important;
+  padding: 0 !important;
+}
+
+.detail-editor-date-popper .el-date-table td .el-date-table-cell__text {
+  width: 26px !important;
+  height: 26px !important;
+  border-radius: 4px !important;
+  color: #334155 !important;
+  font-size: 12px !important;
+  line-height: 26px !important;
+}
+
+.detail-editor-date-popper .el-date-table td.available:hover .el-date-table-cell__text {
+  background: var(--theme-primary-soft) !important;
+  color: var(--theme-primary-active) !important;
+}
+
+.detail-editor-date-popper .el-date-table td.today .el-date-table-cell__text {
+  color: var(--theme-primary-active) !important;
+  font-weight: 850 !important;
+}
+
+.detail-editor-date-popper .el-date-table td.current .el-date-table-cell__text,
+.detail-editor-date-popper .el-date-table td.selected .el-date-table-cell__text {
+  background: var(--theme-primary) !important;
+  color: #ffffff !important;
+  font-weight: 850 !important;
+}
+
+.detail-editor-date-popper .el-date-table td.prev-month .el-date-table-cell__text,
+.detail-editor-date-popper .el-date-table td.next-month .el-date-table-cell__text {
+  color: #cbd5e1 !important;
+}
+
+.detail-editor-date-popper .el-date-table td.disabled .el-date-table-cell__text {
+  background: #f8fafc !important;
+  color: #cbd5e1 !important;
+}
+</style>