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

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']

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

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: {
-      placeholder: '请输入物流编码',
+    render: () => {
+      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