物流方式新增弹窗物流编码添加提示交互，物流公司新增弹窗物流公司编码关联名称

d24ac9d0 · linjinhong · a0fe056a · d24ac9d0 · d24ac9d0 · d24ac9d0
Commit d24ac9d0 authored Jul 03, 2025 by linjinhong
5 changed files
--- a/components.d.ts
+++ b/components.d.ts
@@ -32,6 +32,7 @@ declare module 'vue' {
    ElImage: typeof import('element-plus/es')['ElImage']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
    ElMenu: typeof import('element-plus/es')['ElMenu']
    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
    ElOption: typeof import('element-plus/es')['ElOption']

--- a/src/assets/images/UPARCEL物流编码.png
+++ b/src/assets/images/UPARCEL物流编码.png
--- a/src/views/logistics/components/LogisticsWaySelect.tsx
+++ b/src/views/logistics/components/LogisticsWaySelect.tsx
@@ -21,6 +21,7 @@ const styles = {
    display: 'flex',
    padding: '10px',
    justifyContent: 'flex-start',
+    flexWrap: 'wrap',
    backgroundColor: '#efefef',
  },
 } as const

--- a/src/views/logistics/logisticsCompany.vue
+++ b/src/views/logistics/logisticsCompany.vue
@@ -4,9 +4,13 @@ import SplitDiv from '@/components/splitDiv/splitDiv.vue'
 import {
  getLogisticsLog,
  IForm,
-  ILogisticsCompany, ILogisticsCompanyData, ILogisticsList,
+  ILogisticsCompany,
+  ILogisticsCompanyData,
+  ILogisticsList,
  logisticsCompany,
-  logisticsCompanyAdd, logisticsCompanyAllCodelist, logisticsCompanyDelete,
+  logisticsCompanyAdd,
+  logisticsCompanyAllCodelist,
+  logisticsCompanyDelete,
  logisticsCompanyUpdate,
 } from '@/api/logistics.ts'
 import LogDialog from '@/views/logistics/components/LogDialog.tsx'
@@ -51,25 +55,12 @@ const createData = ref({
  },
 })
 const rules = {
-  code: [
+  code: [{ required: true, message: '请选择物流公司编码', trigger: 'change' }],
-    { required: true, message: '请选择物流公司编码', trigger: 'change' },
-  ],
-  name: [
-    { required: true, message: '请输入名称', trigger: 'blur' },
-  ],
-  contact: [
-    { required: true, message: '请输入联系人', trigger: 'blur' },
-  ],
-  phone: [
-    { required: true, message: '请输入电话/手机', trigger: 'blur' },
-  ],
-  siteUrl: [
-    { required: true, message: '请输入网址', trigger: 'blur' },
-  ],
+  contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
-  address: [
+  phone: [{ required: true, message: '请输入电话/手机', trigger: 'blur' }],
-    { required: true, message: '请输入地址', trigger: 'blur' },
+  siteUrl: [{ required: true, message: '请输入网址', trigger: 'blur' }],
-  ],
+  address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
 }
 const leftData = ref<ILogisticsCompany[]>([])
 const pagination = ref<ILogisticsCompanyData>({
@@ -127,7 +118,10 @@ const handleBatchDelete = async (row: ILogisticsCompany | null) => {
    cancelButtonText: '取消',
    type: 'warning',
  })
-  const str = row && row.id ? row.id?.toString() : selections.value.map((el) => el.id).join(',')
+  const str =
+    row && row.id
+      ? row.id?.toString()
+      : selections.value.map((el) => el.id).join(',')
  await logisticsCompanyDelete(str)
  ElMessage.success('删除成功')
  await getData()
@@ -173,9 +167,10 @@ const updateWarehouse = (item: IForm) => {
 }
 const codeChange = (v: string) => {
-  const item = logisticsList.value.find(d => d.code === v)
+  const item = logisticsList.value.find((d) => d.code === v)
  if (item) {
    otherFields.value = Object.keys(item.apiData || {})
+    form.value.name = item.basicsName
  }
 }
@@ -194,19 +189,27 @@ getLogisticsList()
        <el-form inline :model="searchForm">
          <el-form-item label="名称">
            <el-input
-              v-model="searchForm.name" style="width: 140px;" placeholder="请输入名称"
+              v-model="searchForm.name"
-              clearable></el-input>
+              style="width: 140px"
+              placeholder="请输入名称"
+              clearable
+            ></el-input>
          </el-form-item>
          <el-form-item label="编码">
            <el-input
-              v-model="searchForm.code" style="width: 140px;" placeholder="请输入编码"
+              v-model="searchForm.code"
-              clearable></el-input>
+              style="width: 140px"
+              placeholder="请输入编码"
+              clearable
+            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getData">查询</el-button>
            <el-button type="success" @click="createWarehouse">新增</el-button>
-            <el-button type="danger" @click="handleBatchDelete(null)">删除</el-button>
+            <el-button type="danger" @click="handleBatchDelete(null)"
+              >删除</el-button
+            >
          </el-form-item>
        </el-form>
      </el-card>
@@ -217,53 +220,76 @@ getLogisticsList()
          <div class="table-flex">
            <div class="left-table">
              <div class="table-container">
-                <el-table height="100%" :data="leftData" border @selection-change="handleSelectionChange">
+                <el-table
+                  height="100%"
+                  :data="leftData"
+                  border
+                  @selection-change="handleSelectionChange"
+                >
                  <el-table-column type="selection" />
                  <el-table-column type="index" label="序号" width="60" />
                  <el-table-column
                    label="名称"
                    prop="name"
                    align="center"
-                    show-overflow-tooltip>
+                    show-overflow-tooltip
+                  >
                  </el-table-column>
                  <el-table-column
                    label="编码"
                    prop="code"
                    align="center"
-                    show-overflow-tooltip>
+                    show-overflow-tooltip
+                  >
                  </el-table-column>
                  <el-table-column
                    label="联系人"
                    prop="contact"
                    align="center"
-                    show-overflow-tooltip>
+                    show-overflow-tooltip
+                  >
                  </el-table-column>
                  <el-table-column
                    label="电话"
                    prop="phone"
                    align="center"
-                    show-overflow-tooltip>
+                    show-overflow-tooltip
+                  >
                  </el-table-column>
                  <el-table-column
                    label="网址"
                    prop="siteUrl"
                    align="center"
-                    show-overflow-tooltip>
+                    show-overflow-tooltip
+                  >
                  </el-table-column>
                  <el-table-column
                    label="地址"
                    prop="address"
                    align="center"
-                    show-overflow-tooltip>
+                    show-overflow-tooltip
+                  >
                  </el-table-column>
                  <el-table-column width="260" label="操作" align="center">
-                    <template #default="{row}">
+                    <template #default="{ row }">
-                      <el-button text type="primary" @click="updateWarehouse(row)">编辑</el-button>
+                      <el-button
-                      <el-button text type="danger" @click="handleBatchDelete(row)">删除</el-button>
+                        text
-                      <el-button text type="info" @click="handleShowLog(row)">操作日志</el-button>
+                        type="primary"
+                        @click="updateWarehouse(row)"
+                        >编辑</el-button
+                      >
+                      <el-button
+                        text
+                        type="danger"
+                        @click="handleBatchDelete(row)"
+                        >删除</el-button
+                      >
+                      <el-button text type="info" @click="handleShowLog(row)"
+                        >操作日志</el-button
+                      >
                    </template>
                  </el-table-column>
                </el-table>
@@ -279,7 +305,6 @@ getLogisticsList()
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </div>
          <LogDialog
@@ -287,46 +312,105 @@ getLogisticsList()
            title="操作日志"
            @close="logDialogVisible = false"
          >
-            <div v-for="item in logList" :key="item.id" style="margin-bottom: 8px">
+            <div
+              v-for="item in logList"
+              :key="item.id"
+              style="margin-bottom: 8px"
+            >
              <span style="margin-right: 10px">{{ item.createTime }}</span>
              <span>{{ item.description }}</span>
            </div>
          </LogDialog>
-          <el-dialog v-model="createData.show" :close-on-click-modal="false" width="900px" :title="createData.title">
+          <el-dialog
-            <el-form v-if="createData.show" ref="formRef" style="padding: 30px" label-width="110px" :rules="rules" :model="form" class="el-row">
+            v-model="createData.show"
+            :close-on-click-modal="false"
+            width="900px"
+            :title="createData.title"
+          >
+            <el-form
+              v-if="createData.show"
+              ref="formRef"
+              style="padding: 30px"
+              label-width="110px"
+              :rules="rules"
+              :model="form"
+              class="el-row"
+            >
              <el-form-item class="el-col-12" label="物流公司编码" prop="code">
-                <el-select v-model="form.code" clearable filterable @change="codeChange">
+                <el-select
+                  v-model="form.code"
+                  clearable
+                  filterable
+                  @change="codeChange"
+                >
                  <el-option
-                    v-for="it in logisticsList" :key="it.code" :label="it.code"
+                    v-for="it in logisticsList"
-                    :value="it.code">
+                    :key="it.code"
+                    :label="it.code"
+                    :value="it.code"
+                  >
                    {{ it.code }}
-                    <span style="font-size: 14px; color: #999; line-height: 24px">
+                    <span
-                    ({{ it.basicsName }})
+                      style="font-size: 14px; color: #999; line-height: 24px"
-                  </span>
+                    >
+                      ({{ it.basicsName }})
+                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
-              <el-form-item class="el-col-12" label="名称" prop="name">
+              <el-form-item class="el-col-12" label="名称">
-                <el-input v-model="form.name" clearable placeholder="请输入名称"></el-input>
+                <el-input
+                  v-model="form.name"
+                  clearable
+                  disabled
+                  placeholder="选择物流公司编码后展示"
+                ></el-input>
              </el-form-item>
              <el-form-item class="el-col-12" label="联系人" prop="contact">
-                <el-input v-model="form.contact" clearable placeholder="请输入联系人"></el-input>
+                <el-input
+                  v-model="form.contact"
+                  clearable
+                  placeholder="请输入联系人"
+                ></el-input>
              </el-form-item>
              <el-form-item class="el-col-12" label="电话/手机" prop="phone">
-                <el-input v-model="form.phone" clearable placeholder="请输入电话/手机"></el-input>
+                <el-input
+                  v-model="form.phone"
+                  clearable
+                  placeholder="请输入电话/手机"
+                ></el-input>
              </el-form-item>
              <el-form-item class="el-col-12" label="网址" prop="siteUrl">
-                <el-input v-model="form.siteUrl" clearable placeholder="请输入网址"></el-input>
+                <el-input
+                  v-model="form.siteUrl"
+                  clearable
+                  placeholder="请输入网址"
+                ></el-input>
              </el-form-item>
              <el-form-item class="el-col-12" label="地址" prop="address">
-                <el-input v-model="form.address" clearable placeholder="请输入地址"></el-input>
+                <el-input
+                  v-model="form.address"
+                  clearable
+                  placeholder="请输入地址"
+                ></el-input>
              </el-form-item>
-              <el-form-item v-for="o in otherFields" :key="o" class="el-col-12" required :label="o" :prop="`apiData.${o}`">
+              <el-form-item
-                <el-input v-model="form.apiData[o]" clearable :placeholder="`请输入${o}`"></el-input>
+                v-for="o in otherFields"
+                :key="o"
+                class="el-col-12"
+                required
+                :label="o"
+                :prop="`apiData.${o}`"
+              >
+                <el-input
+                  v-model="form.apiData[o]"
+                  clearable
+                  :placeholder="`请输入${o}`"
+                ></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
-              <el-button @click="createData.show=false">取消</el-button>
+              <el-button @click="createData.show = false">取消</el-button>
              <el-button type="primary" @click="handleConfirm">确定</el-button>
            </template>
          </el-dialog>

--- a/src/views/logistics/logisticsMethod.vue
+++ b/src/views/logistics/logisticsMethod.vue
@@ -42,7 +42,6 @@
      v-model="editForm"
      :config="formConfig"
      form-item-width="100%"
-      labelWidth="125"
    >
    </CustomizeForm>
@@ -98,9 +97,9 @@ import { IFormConfig } from '@/components/CustomizeForm.tsx'
 import usePageList from '@/utils/hooks/usePageList'
 import { useValue } from './hooks/useValue'
 import { showConfirm } from '@/utils/ui'
-import { Edit, Delete, List } from '@element-plus/icons-vue'
+import { Edit, Delete, List, WarningFilled } from '@element-plus/icons-vue'
 import { debounce } from 'lodash-es'
+import UPARCELImage from '@/assets/images/UPARCEL物流编码.png'
 const [searchForm] = useValue({})
 const [editForm, resetEditForm] = useValue<LogisticsMethod>({
  platformList: [{ platform: '', logisticsName: '', showPlatform: [] }],
@@ -131,6 +130,13 @@ const dialogVisible = ref(false)
 const logDialogVisible = ref(false)
 const editFormRef = ref<InstanceType<typeof CustomizeForm> | null>(null)
 const selection = ref([])
+interface ImageList {
+  [key: string]: string
+}
+const imgeList = ref<ImageList>({
+  UPARCEL: UPARCELImage,
+})
 const searchConfig = ref<ISeachFormConfig[]>([
  {
    prop: 'name',
@@ -173,41 +179,6 @@ const logisticsCompanyList = ref([])
 const formConfig = computed<IFormConfig[]>(() => [
  { title: '物流基础信息' },
  {
-    prop: 'name',
-    type: 'input',
-    label: '物流名称',
-    attrs: {
-      placeholder: '请输入物流名称',
-    },
-    rules: [
-      {
-        required: true,
-        message: '请输入物流名称',
-      },
-    ],
-  },
-  {
-    prop: 'warehouseId',
-    type: 'select',
-    label: '仓库名称',
-    attrs: {
-      placeholder: '请选择仓库名称',
-      label: 'name',
-      value: 'id',
-      options: [...(warehouseList.value || [])],
-      onChange: (value: { name: string; id: string | number }) => {
-        editForm.value.warehouseName = value.name
-      },
-    },
-    rules: [
-      {
-        required: true,
-        message: '请选择仓库名称',
-      },
-    ],
-  },
-  {
    prop: 'companyId',
    type: 'select',
    label: '物流公司',
@@ -282,15 +253,51 @@ const formConfig = computed<IFormConfig[]>(() => [
      },
    ],
  },
  {
    prop: 'serviceCode',
-    type: 'input',
    label: '物流编码',
    fixed: 'last',
-    attrs: {
+    render: () => {
-      placeholder: '请输入物流编码',
+      const company = editForm.value.company
+      return (
+        <div style="display: flex; width:100%;height: 100%">
+          <el-input
+            v-model={editForm.value.serviceCode}
+            placeholder="请输入物流编码"
+          />
+          <el-popover
+            placement="bottom-end"
+            width={1050}
+            v-slots={{
+              default: () => (
+                <div style="width: 100%; height: 100%;">
+                  <div style="font-size: 20px; font-weight: bold;margin-bottom: 10px;">
+                    {company ? `${company}物流编码来源图:` : '请先选择物流公司'}
+                  </div>
+                  {company && imgeList.value[company] && (
+                    <img
+                      src={imgeList.value[company]}
+                      style={{ width: '100%' }}
+                      alt={`${company}物流编码图`}
+                    />
+                  )}
+                </div>
+              ),
+              reference: () => (
+                <el-icon
+                  style={{ marginLeft: '10px', height: '100%' }}
+                  size={25}
+                >
+                  <WarningFilled />
+                </el-icon>
+              ),
+            }}
+          ></el-popover>
+        </div>
+      )
    },
    rules: [
      {
        required: true,
@@ -299,6 +306,31 @@ const formConfig = computed<IFormConfig[]>(() => [
    ],
  },
  {
+    prop: 'name',
+    type: 'input',
+    label: '物流名称',
+    fixed: 'last',
+    attrs: {
+      placeholder: '请输入物流名称',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入物流名称',
+      },
+    ],
+  },
+  {
+    prop: 'warehouseId',
+    type: 'input',
+    label: '仓库名称',
+    fixed: 'last',
+    attrs: {
+      placeholder: '请输入仓库名称',
+    },
+  },
+  {
    prop: 'siteUrl',
    type: 'input',
    label: '查询网址',
@@ -376,7 +408,7 @@ const formConfig = computed<IFormConfig[]>(() => [
                placeholder="请输入物流名称"
              />
            </el-form-item>
-            <div style="display: flex;flex:20%">
+            <div style="display: flex;flex:17%">
              {(formData?.platformList as platformObj[])?.length - 1 ===
                index && (
                <el-button