feat: 物流分拣配置展示修改

648c09bb · wusiyi · 5627765b · 648c09bb · 648c09bb
Commit 648c09bb authored Jul 29, 2026 by wusiyi
Show whitespace changes
Inline Side-by-side

Showing with 128 additions and 26 deletions

src/views/logistics/components/CreateSortingRuleDialog.vue
+4 -21

src/views/logistics/sortingConfiguration.vue
+124 -5

No files found.
--- a/src/views/logistics/components/CreateSortingRuleDialog.vue
+++ b/src/views/logistics/components/CreateSortingRuleDialog.vue
@@ -191,15 +191,12 @@ import {
  updateSortingApi,
  getSortingConfig,
  getSortingPortAreaListApi,
-  getSortPortConditionTypeListApi,
-  getSortPortOperatorListApi,
 } from '@/api/logistics'
-const conditionTypeList = ref<SortingPortOptionItem[]>()
+const props = defineProps<{
-const operatorList = ref<SortingPortOptionItem[]>()
-defineProps<{
  logisticsMethodsList: Ilogistics[]
+  conditionTypeList: SortingPortOptionItem[]
+  operatorList: SortingPortOptionItem[]
 }>()
 const emit = defineEmits<{
@@ -233,7 +230,7 @@ const getAvailableConditionTypes = (currentIndex: number) => {
  const selectedFields = (form.value.conditions ?? [])
    .filter((_, index) => index !== currentIndex)
    .map((item) => item.conditionType)
-  return conditionTypeList.value?.filter(
+  return props.conditionTypeList?.filter(
    (rule) => !selectedFields.includes(rule.code),
  )
 }
@@ -308,18 +305,6 @@ const loadAreaList = async () => {
  }
 }
-const loadConditionTypeList = async () => {
-  const res = await getSortPortConditionTypeListApi()
-  if (res.code !== 200) return
-  conditionTypeList.value = res.data
-}
-const loadOperatorList = async () => {
-  const res = await getSortPortOperatorListApi()
-  if (res.code !== 200) return
-  operatorList.value = res.data
-}
 const handleSubmit = async () => {
  await formRef.value?.validate()
  const submitData: IsortingInfo = {
@@ -349,8 +334,6 @@ const open = async (item?: IsortingInfo) => {
  editId.value = item?.id
  form.value = createDefaultForm()
-  await Promise.all([loadConditionTypeList(), loadOperatorList()])
  if (item?.id) {
    const res = await getSortingConfig({ id: item.id })
    if (res.code !== 200) return

--- a/src/views/logistics/sortingConfiguration.vue
+++ b/src/views/logistics/sortingConfiguration.vue
@@ -38,6 +38,30 @@
        <div class="user-list flex-1 overflow-hidden">
          <div v-loading="loading" class="table-container">
            <TableView :paginated-data="tableData" :columns="columns">
+              <template #conditions="{ row }">
+                <div class="conditions-text">
+                  <div class="match-type">
+                    {{
+                      row.matchType === 1
+                        ? '满足以下所有条件：'
+                        : '满足以下任一条件：'
+                    }}
+                  </div>
+                  <div
+                    v-for="(item, index) in row.conditions || []"
+                    :key="index"
+                    class="condition-item"
+                  >
+                    <span
+                      class="condition-text"
+                      :title="formatConditionText(item)"
+                    >
+                      {{ index + 1 }}、 {{ formatConditionText(item) }}
+                    </span>
+                  </div>
+                </div>
+              </template>
              <template #operation="{ row }">
                <el-button type="primary" link @click="updateSorting(row)">
                  编辑
@@ -66,19 +90,28 @@
    <CreateSortingRuleDialog
      ref="createDialogRef"
      :logistics-methods-list="logisticsMethodsList"
+      :condition-type-list="conditionTypeList"
+      :operator-list="operatorList"
      @success="search"
    />
  </div>
 </template>
 <script setup lang="ts">
-import { Ilogistics, IsortingInfo } from '@/types/api/logistics'
+import {
+  Ilogistics,
+  IsortingInfo,
+  SortingPortCondition,
+  SortingPortOptionItem,
+} from '@/types/api/logistics'
 import {
  getsortingConfigListApi,
  deleteSortingApi,
  getSortingPortAreaListApi,
+  getSortPortConditionTypeListApi,
+  getSortPortOperatorListApi,
 } from '@/api/logistics'
 import { allErpCodeListApi } from '@/api/podCnOrder'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import CreateSortingRuleDialog from './components/CreateSortingRuleDialog.vue'
 import { useEnterKeyTrigger } from '@/utils/hooks/useEnterKeyTrigger.ts'
 import TableView from '@/components/TableView.vue'
@@ -95,11 +128,13 @@ const columns: CustomColumn<IsortingInfo>[] = [
    align: 'center',
  },
  {
-    key: 'conditionsText',
+    key: 'conditions',
-    prop: 'conditionsText',
+    prop: 'conditions',
+    slot: 'conditions',
    label: '分拣口规则',
    minWidth: 250,
    align: 'left',
+    showOverflowTooltip: false,
  },
  {
    key: 'sortingAreaName',
@@ -173,6 +208,52 @@ const getSortingList = async () => {
  }))
 }
+const conditionTypeList = ref<SortingPortOptionItem[]>([])
+const operatorList = ref<SortingPortOptionItem[]>([])
+const loadConditionTypeList = async () => {
+  const res = await getSortPortConditionTypeListApi()
+  if (res.code !== 200) return
+  conditionTypeList.value = res.data
+}
+const loadOperatorList = async () => {
+  const res = await getSortPortOperatorListApi()
+  if (res.code !== 200) return
+  operatorList.value = res.data
+}
+const formatConditionText = (item: SortingPortCondition) => {
+  const typeDesc =
+    conditionTypeList.value.find((r) => r.code === item.conditionType)?.desc ??
+    item.conditionType
+  const operatorDesc =
+    operatorList.value.find((r) => r.code === item.operator)?.desc ??
+    item.operator
+  let valueText = ''
+  switch (item.conditionType) {
+    case 'order_platform':
+      valueText = String(item.conditionValue ?? '')
+        .split(',')
+        .filter(Boolean)
+        .join('、')
+      break
+    default:
+      valueText = String(item.conditionValue ?? '')
+        .split(',')
+        .filter(Boolean)
+        .map(
+          (code) =>
+            logisticsMethodsList.value.find((l) => l.code === code)
+              ?.basicsName ?? code,
+        )
+        .join('、')
+      break
+  }
+  return `${typeDesc}${operatorDesc} ${valueText}`
+}
 const handleBatchDelete = async (row: IsortingInfo | null) => {
  if (!row?.id) {
    return ElMessage.warning('请选择要删除的数据')
@@ -195,7 +276,12 @@ const updateSorting = (item: IsortingInfo) => {
 }
 onMounted(async () => {
-  await Promise.all([getSortingList(), getlogisticsMethods()])
+  await Promise.all([
+    getSortingList(),
+    getlogisticsMethods(),
+    loadConditionTypeList(),
+    loadOperatorList(),
+  ])
 })
 const searchFormRef = ref()
@@ -221,6 +307,39 @@ useEnterKeyTrigger({
    height: 100%;
  }
 }
+.conditions-text {
+  padding: 4px 0;
+  line-height: 1.6;
+  overflow: hidden;
+  .match-type {
+    color: #666;
+    margin-bottom: 2px;
+  }
+  .condition-item {
+    display: flex;
+    align-items: center;
+    color: #333;
+    overflow: hidden;
+    min-width: 0;
+    .condition-text {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .category-detail-btn {
+      flex-shrink: 0;
+      margin-left: 4px;
+      padding: 0;
+      height: auto;
+    }
+  }
+}
 .manage {
  height: 100%;
  display: flex;