1

src/views/system/jdorder/orderList.vue

@@ -226,7 +226,7 @@
                   aria-hidden="true"
                 />
                 <div class="header-title-block">
-                  <div class="order-id">{{ row.remark || row.orderId }}</div>
+                  <div class="order-id">{{ row.orderId }}</div>
                   <el-tag 
                     v-if="row.orderStatus != null"
                     :type="getOrderStatusType(row.orderStatus)" 
@@ -324,7 +324,21 @@
               class="card-summary-compact"
               @click="toggleMobileOrderExpand(row)"
             >
-              <span class="card-summary-line">{{ row.modelNumber || '—' }} · 付{{ toYuan(row.paymentAmount) }} · 返{{ toYuan(row.rebateAmount) }}<template v-if="row.distributionMark"> · {{ row.distributionMark }}</template></span>
+              <span class="card-summary-line">
+                <template v-if="row.distributionMark">
+                  <span
+                    class="card-distribution-mark-highlight jd-dist-mark-summary-pill"
+                    :style="distributionMarkDisplayStyle(row.distributionMark)"
+                    role="button"
+                    tabindex="0"
+                    title="点击编辑分销标识"
+                    @click.stop="openDistributionMarkEditDialog(row)"
+                    @keydown.enter.prevent.stop="openDistributionMarkEditDialog(row)"
+                  >{{ row.distributionMark }}</span>
+                  <span class="card-summary-sep"> · </span>
+                </template>
+                <span class="card-summary-meta">{{ row.modelNumber || '—' }} · 付{{ toYuan(row.paymentAmount) }} · 返{{ toYuan(row.rebateAmount) }}</span>
+              </span>
             </div>
 
             <el-collapse-transition>
@@ -349,17 +363,19 @@
                   <el-button type="primary" size="mini" plain @click="onThirdPartyOrderNoSave(row)">保存</el-button>
                 </div>
               </div>
-              <div class="field-row">
-                <span class="field-label">标记</span>
-                <div class="field-value field-value--third-party-edit">
-                  <el-input
-                    v-model="row.distributionMark"
-                    size="small"
-                    clearable
-                    placeholder="分销标识，失焦或保存写入"
-                    @blur="onDistributionMarkBlur(row)"
-                  />
-                  <el-button type="primary" size="mini" plain @click="onDistributionMarkSave(row)">保存</el-button>
+              <div class="field-row field-row--distribution-mark">
+                <span class="field-label">分销标识</span>
+                <div
+                  class="field-value jd-dist-mark-mobile-tap"
+                  title="点击编辑"
+                  @click.stop="openDistributionMarkEditDialog(row)"
+                >
+                  <span
+                    class="jd-dist-mark-mobile-pill"
+                    :class="[distributionMarkDisplayClass(row.distributionMark)]"
+                    :style="distributionMarkDisplayStyle(row.distributionMark)"
+                  >{{ distributionMarkCellLabel(row.distributionMark) }}</span>
+                  <i class="el-icon-edit-outline jd-dist-mark-edit-ico" aria-hidden="true" />
                 </div>
               </div>
               <div class="field-row">
@@ -527,9 +543,24 @@
           class="order-table jd-order-el-table">
           <!-- 多选列（仅桌面端显示） -->
           <el-table-column v-if="!isMobile" type="selection" width="55" fixed="left" align="center"/>
+          <!-- 分销标识列置首：相同标识稳定同色 -->
+          <el-table-column label="分销标识" prop="distributionMark" min-width="112" align="center" fixed="left" class-name="jd-col-distribution-mark">
+            <template slot-scope="scope">
+              <div
+                :class="['jd-dist-mark-cell', 'jd-dist-mark-cell--tap', distributionMarkDisplayClass(scope.row.distributionMark)]"
+                :style="distributionMarkDisplayStyle(scope.row.distributionMark)"
+                role="button"
+                tabindex="0"
+                title="点击编辑分销标识"
+                @click.stop="openDistributionMarkEditDialog(scope.row)"
+                @keydown.enter.prevent.stop="openDistributionMarkEditDialog(scope.row)"
+              >
+                <span class="jd-dist-mark-text">{{ distributionMarkCellLabel(scope.row.distributionMark) }}</span>
+              </div>
+            </template>
+          </el-table-column>
           <!-- 核心信息列 -->
-          <el-table-column label="内部单号" prop="remark" width="120" sortable :fixed="isMobile ? false : 'left'"/>
-          <el-table-column label="订单号" prop="orderId" width="160"/>
+          <el-table-column label="订单号" prop="orderId" width="160" :fixed="isMobile ? false : 'left'"/>
           <el-table-column label="第三方单号" prop="thirdPartyOrderNo" min-width="188">
             <template slot-scope="scope">
               <template v-if="scope.row.thirdPartyOrderNo">
@@ -548,18 +579,6 @@
           </el-table-column>
 
           <!-- 业务信息列 -->
-          <el-table-column label="标记" prop="distributionMark" min-width="92" align="center">
-            <template slot-scope="scope">
-              <el-input
-                v-model="scope.row.distributionMark"
-                size="mini"
-                clearable
-                placeholder="标识"
-                @blur="onDistributionMarkBlur(scope.row)"
-                @keyup.enter.native="onDistributionMarkBlur(scope.row)"
-              />
-            </template>
-          </el-table-column>
           <el-table-column label="型号" prop="modelNumber" width="140"/>
           <el-table-column label="地址" prop="address" min-width="220" show-overflow-tooltip class-name="address-cell">
             <template slot-scope="scope">
@@ -1062,6 +1081,30 @@
     <!-- 分销标识接收人配置 -->
     <distribution-mark-touser-config v-model="showTouserConfig" @config-updated="handleTouserConfigUpdated" />
 
+    <!-- 分销标识：点击列表单元格后编辑（非行内快捷编辑） -->
+    <el-dialog
+      title="编辑分销标识"
+      :visible.sync="distributionMarkEditDialogVisible"
+      width="440px"
+      append-to-body
+      :close-on-click-modal="false"
+      @closed="onDistributionMarkEditDialogClosed"
+    >
+      <p v-if="distributionMarkEditRow" style="margin:0 0 12px;color:#909399;font-size:13px;">
+        订单号：{{ distributionMarkEditRow.orderId }}
+      </p>
+      <el-input
+        v-model="distributionMarkEditDraft"
+        placeholder="分销标识"
+        clearable
+        @keyup.enter.native="confirmDistributionMarkEdit"
+      />
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="distributionMarkEditDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmDistributionMarkEdit">保存</el-button>
+      </div>
+    </el-dialog>
+
     <!-- 导入跟团返现 / 后返 Excel（支持多文件，一次提交后台依次处理） -->
     <el-dialog
       title="导入后返表（跟团返现等）"
@@ -1268,7 +1311,11 @@ export default {
       /** 视口高度（桌面端用于矮窗口下自动收起「跟进状态」筛选） */
       viewportHeight: typeof window !== 'undefined' ? window.innerHeight : 900,
       /** 矮窗口下是否展开完整筛选（基础条件 / 跟进状态 / 查询） */
-      showDesktopExpandedFilters: true
+      showDesktopExpandedFilters: true,
+      /** 分销标识弹窗编辑 */
+      distributionMarkEditDialogVisible: false,
+      distributionMarkEditRow: null,
+      distributionMarkEditDraft: ''
     }
   },
   computed: {
@@ -1308,6 +1355,23 @@ export default {
       }, 0)
       return has ? t : ''
     },
+    /**
+     * 本页 list 中出现的分销标识（规范化后）去重、排序，再映射为连续下标。
+     * 同色只表示「本页内同一标识」，不同标识在本页一定不同色（色相按序号散开）。
+     */
+    distributionMarkToneIndexByKey() {
+      const set = new Set()
+      for (const row of this.list || []) {
+        const k = this.normalizeDistributionMarkInput(row.distributionMark)
+        if (k) set.add(k)
+      }
+      const sorted = Array.from(set).sort()
+      const map = Object.create(null)
+      sorted.forEach((k, i) => {
+        map[k] = i
+      })
+      return map
+    },
     actionButtons() {
       // 移动端不展示顶部工具按钮（统一用底部导航与各页内操作）
       if (this.isMobile) {
@@ -1381,6 +1445,43 @@ export default {
       const m = String(mark).trim()
       return m === 'F' || m.startsWith('F-')
     },
+    distributionMarkCellLabel(mark) {
+      const k = this.normalizeDistributionMarkInput(mark)
+      return k || '点击编辑'
+    },
+    openDistributionMarkEditDialog(row) {
+      if (!row || row.id == null) return
+      this.distributionMarkEditRow = row
+      this.distributionMarkEditDraft = row.distributionMark == null ? '' : String(row.distributionMark)
+      this.distributionMarkEditDialogVisible = true
+    },
+    confirmDistributionMarkEdit() {
+      const row = this.distributionMarkEditRow
+      if (!row) return
+      row.distributionMark = this.distributionMarkEditDraft
+      this.saveDistributionMarkIfChanged(row, '分销标识已保存')
+      this.distributionMarkEditDialogVisible = false
+    },
+    onDistributionMarkEditDialogClosed() {
+      this.distributionMarkEditRow = null
+      this.distributionMarkEditDraft = ''
+    },
+    /** 空标识：仅用灰色底 class */
+    distributionMarkDisplayClass(mark) {
+      return this.normalizeDistributionMarkInput(mark) ? '' : 'jd-dist-tone-empty'
+    },
+    /** 非空：用本页 distributionMarkToneIndexByKey + 黄金角色相，避免哈希撞车 */
+    distributionMarkDisplayStyle(mark) {
+      const key = this.normalizeDistributionMarkInput(mark)
+      if (!key) return {}
+      const idx = this.distributionMarkToneIndexByKey[key]
+      if (idx == null) return {}
+      const hue = Math.round((idx * 222.49223594960218) % 360)
+      return {
+        background: `hsl(${hue}, 46%, 91%)`,
+        color: '#1e293b'
+      }
+    },
     handleMainPagination() {
       this.getList()
       this.$nextTick(() => {
@@ -1834,12 +1935,6 @@ export default {
       if (next === base) return
       this.persistOrderRow(row, successMsg)
     },
-    onDistributionMarkBlur(row) {
-      this.saveDistributionMarkIfChanged(row)
-    },
-    onDistributionMarkSave(row) {
-      this.saveDistributionMarkIfChanged(row, '分销标识已保存')
-    },
     onOrderSellingPriceTypeChange(row) {
       row.sellingPriceManual = 0
       row.profitManual = 0
@@ -3757,6 +3852,25 @@ export default {
   white-space: nowrap;
 }
 
+.mobile-order-card .card-distribution-mark-highlight {
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.mobile-order-card .jd-dist-mark-summary-pill {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mobile-order-card .card-summary-sep {
+  color: #94a3b8;
+  font-weight: 400;
+}
+
 .mobile-order-card .card-content {
   display: flex;
   flex-direction: column;
@@ -4176,7 +4290,58 @@ export default {
   min-width: 0;
 }
 
-/* 移动端卡片：第三方单号补录 */
+/* 分销标识：单元格底色（本页同标识同色）；点击弹窗编辑 */
+.jd-dist-mark-cell {
+  padding: 3px 6px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.jd-dist-mark-cell.jd-dist-tone-empty {
+  background: #f4f4f5;
+}
+.jd-dist-mark-cell--tap {
+  cursor: pointer;
+  user-select: none;
+}
+.jd-dist-mark-text {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.4;
+  text-align: center;
+  word-break: break-all;
+}
+
+.jd-order-el-table ::v-deep td.jd-col-distribution-mark {
+  vertical-align: middle;
+}
+
+.mobile-order-card .jd-dist-mark-mobile-tap {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.mobile-order-card .jd-dist-mark-mobile-pill {
+  font-size: 14px;
+  font-weight: 400;
+  padding: 2px 8px;
+  border-radius: 4px;
+  max-width: 100%;
+  word-break: break-all;
+}
+.mobile-order-card .jd-dist-mark-edit-ico {
+  flex-shrink: 0;
+  color: #909399;
+  font-size: 14px;
+}
+
+/* 移动端卡片：第三方单号 / 分销标识等可编辑字段 */
 .field-value--third-party-edit {
   display: flex;
   flex-direction: column;