feat:【工厂端】工厂端-供应模块新增供应商管理#1001007

src/api/supplier/supplierManagement.ts

+import { BasePaginationData, BaseRespData } from '@/types/api'
+import axios from './../axios'
+
+export interface IListPage {
+  pageSize: number | string
+  currentPage: number | string
+}
+//供应商分页查询
+export function getSupplierListApi(params: IListPage) {
+  return axios.post<never, BasePaginationData<never>>(
+    '/factory/supplier/list_page',
+    params,
+  )
+}
+
+// 删除供应商
+export function deleteSupplierApi(params: { ids: string }) {
+  return axios.get<never, BaseRespData<never>>('/factory/supplier/delete', {
+    params,
+  })
+}

src/components/CustomizeForm.tsx

@@ -16,7 +16,7 @@ type SimpleFormData = Record<string, unknown>
 // 定义表单项配置接口
 // 定义表单项配置接口
 export interface IFormConfig {
 export interface IFormConfig {
   fixed?: string
   fixed?: string
-  title?: string
+  title?: string | boolean
   prop?: string
   prop?: string
   label?: string
   label?: string
   type?: string
   type?: string
@@ -190,17 +190,19 @@ export default defineComponent({
                 flexWrap: 'wrap',
                 flexWrap: 'wrap',
               }}
               }}
             >
             >
-              <div
-                style={{
-                  width: '100%',
-                  textAlign: 'center',
-                  fontWeight: 700,
-                  marginBottom: '20px',
-                  fontSize: '16px',
-                }}
-              >
-                {item.title}
-              </div>
+              {typeof item.title === 'string' && item.title !== '' && (
+                <div
+                  style={{
+                    width: '100%',
+                    textAlign: 'center',
+                    fontWeight: 700,
+                    marginBottom: '20px',
+                    fontSize: '16px',
+                  }}
+                >
+                  {item.title}
+                </div>
+              )}
               {item.render && item.render(item, this.formData)}
               {item.render && item.render(item, this.formData)}
             </div>
             </div>
           ) : (
           ) : (

src/router/index.ts

@@ -131,7 +131,7 @@ const router = createRouter({
           meta: {
           meta: {
             title: '下载生产客户端',
             title: '下载生产客户端',
           },
           },
-          component: () => { },
+          component: () => {},
           beforeEnter() {
           beforeEnter() {
             // 假设你的下载链接是这个
             // 假设你的下载链接是这个
             const downloadLink = '/exeFiles/JomallProductionAssistantSetup.exe'
             const downloadLink = '/exeFiles/JomallProductionAssistantSetup.exe'
@@ -317,6 +317,15 @@ const router = createRouter({
           name: 'MyDownloads',
           name: 'MyDownloads',
           component: () => import('@/views/MyDownloads.vue'),
           component: () => import('@/views/MyDownloads.vue'),
         },
         },
+        {
+          path: '/supply/supplierManagement',
+          meta: {
+            title: '供应商管理',
+          },
+          name: 'supplierManagement',
+          component: () =>
+            import('@/views//supply/supplierManagement/index.vue'),
+        },
       ],
       ],
     },
     },
     // 登录
     // 登录

src/router/menu.ts

@@ -150,6 +150,18 @@ const menu: MenuItem[] = [
   },
   },
 
 
   {
   {
+    index: '12',
+    id: 4,
+    label: '供应',
+    children: [
+      {
+        index: '/supply/supplierManagement',
+        id: 1,
+        label: '供应商管理',
+      },
+    ],
+  },
+  {
     index: '11',
     index: '11',
     id: 3,
     id: 3,
     label: '对账单',
     label: '对账单',

src/views/supply/supplierManagement/components/LogisticsWaySelect.tsx

+import { defineComponent, ref } from 'vue'
+import {
+  ElPopover,
+  ElScrollbar,
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElRadioGroup,
+  ElRadio,
+  ElInput,
+} from 'element-plus'
+
+const styles = {
+  searchForm: {
+    position: 'relative',
+  },
+  titleBox: {
+    display: 'flex',
+    padding: '10px 18px',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  checkboxGroup: {
+    display: 'flex',
+    padding: '10px',
+    justifyContent: 'flex-start',
+    flexWrap: 'wrap',
+    backgroundColor: '#efefef',
+  },
+
+  checkbox: {
+    width: '33.3333%',
+    'margin-right': '0px !important',
+  },
+} as const
+
+interface ICompanyList {
+  warehouseName: string
+  wayList: IwayList[]
+}
+interface IwayList {
+  name: string
+  id: string
+}
+interface IAllList {
+  factoryId?: number
+  id: number | string
+  name: string
+  serviceCode?: string
+  siteUrl?: string
+  status?: number
+  uinuinWarehouseId?: number | null
+  updateTime?: string
+  warehouseId?: number
+  warehouseName?: string
+  wayList?: IwayList[]
+}
+export default defineComponent({
+  name: 'CustomizeForm',
+  props: {
+    modelValue: {
+      type: [Array, String, Number] as PropType<
+        (string | number)[] | string | number
+      >,
+      default: () => [],
+      // 可选：添加自定义验证器确保类型安全
+      validator: (value: unknown) => {
+        return (
+          Array.isArray(value) ||
+          typeof value === 'string' ||
+          typeof value === 'number'
+        )
+      },
+    },
+    companyList: {
+      type: Array as PropType<IAllList[] | ICompanyList[]>,
+      default: () => [],
+    },
+    isRadio: {
+      type: Boolean,
+      default: false,
+    },
+    valueKey: {
+      type: String,
+      default: 'id',
+    },
+    searchPlaceholder: {
+      type: String,
+      default: '请搜索承运商',
+    },
+    startPlaceholder: {
+      type: String,
+      default: '请选择物流方式',
+    },
+    startWidth: {
+      type: String,
+      default: '100%',
+    },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const companyList = ref<ICompanyList[]>([])
+    const templeCompanyList = ref<ICompanyList[] | IwayList[] | IAllList[]>([])
+    const allList = ref<IAllList[]>([])
+    const allWayLists = ref<IwayList[]>([])
+    const selectedList = ref<(string | number)[]>([])
+    const selectedRadioList = ref<string | number>()
+    const waysName = ref('')
+    const searchName = ref('')
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        if (props.isRadio) {
+          allWayLists.value = props.companyList.flatMap(
+            (company) => company.wayList,
+          ) as IwayList[]
+
+          if (props.valueKey === 'id') {
+            selectedRadioList.value = newVal as string | number
+          } else {
+            selectedRadioList.value =
+              allWayLists.value.find((el: IwayList) => newVal === el.name)
+                ?.id || ''
+          }
+        } else {
+          selectedList.value = newVal as (string | number)[]
+        }
+      },
+      {
+        immediate: true,
+        deep: true,
+      },
+    )
+
+    watch(
+      [
+        () => selectedList.value,
+        () => props.companyList,
+        () => selectedRadioList.value,
+      ],
+      (newVal) => {
+        if (props.isRadio) {
+          companyList.value = newVal[1] as ICompanyList[]
+          allWayLists.value = props.companyList.flatMap(
+            (company) => company.wayList,
+          ) as IwayList[]
+
+          waysName.value =
+            allWayLists.value.find((el: IwayList) => newVal[2] === el.id)
+              ?.name || ''
+          if (props.valueKey === 'id') {
+            emit('update:modelValue', newVal[2])
+          } else {
+            emit('update:modelValue', waysName.value)
+          }
+        } else {
+          emit('update:modelValue', newVal[0])
+          allList.value = newVal[1] as IAllList[]
+          companyList.value = transformData(newVal[1] as IAllList[])
+
+          if (newVal[1]?.length) {
+            waysName.value = (newVal[1] as IAllList[])
+              .filter((item) => {
+                if (newVal[0].includes(item.id)) {
+                  return item.name
+                }
+              })
+              .map((item) => item.name)
+              .join(',')
+            // emit('waysName', res)
+            // console.log(87, waysName.value)
+          }
+        }
+      },
+      { deep: true, immediate: true },
+    )
+    const handleClearSelection = () => {
+      /* 1. 清空显示文本 */
+      waysName.value = ''
+      /* 2. 清空双向绑定结果 */
+      if (props.isRadio) {
+        selectedRadioList.value = '' // 单选
+        emit('update:modelValue', '')
+      } else {
+        selectedList.value = [] // 多选
+        emit('update:modelValue', [])
+      }
+      /* 3. 可选：把搜索框也重置 */
+      searchName.value = ''
+    }
+    function setCheckAll(company: ICompanyList, event: boolean) {
+      if (event) {
+        selectedList.value = [
+          ...selectedList.value,
+          ...company.wayList.map((item) => item.id),
+        ]
+      } else {
+        selectedList.value = selectedList.value.filter(
+          (item) =>
+            !company.wayList.map((el) => el.id).includes(item as string),
+        )
+      }
+    }
+
+    const getCompanySelectedStatus = computed(() => {
+      const statusMap = new Map()
+
+      companyList.value.forEach((company: ICompanyList) => {
+        const allSelected = company.wayList.every((way) =>
+          selectedList.value.includes(way.id),
+        )
+        statusMap.set(company.warehouseName, allSelected)
+      })
+
+      return (company: ICompanyList) => statusMap.get(company.warehouseName)
+    })
+
+    function fuzzySearch<T>(
+      items: T[],
+      searchTerm: string,
+      key: keyof T = 'name' as keyof T,
+    ): T[] {
+      // 空搜索返回所有元素
+      if (!searchTerm.trim()) {
+        return [...items]
+      }
+
+      // 将搜索词转为小写（不区分大小写）
+      const searchLower = searchTerm.toLowerCase()
+
+      return items.filter((item) => {
+        // 获取属性值
+        const value = item[key]
+
+        // 确保属性值存在且为字符串
+        if (typeof value !== 'string') return false
+
+        // 将属性值转为小写并检查是否包含搜索词
+        return value.toLowerCase().includes(searchLower)
+      })
+    }
+
+    function transformData(data: IAllList[]) {
+      const warehouseMap = new Map()
+      for (const item of data) {
+        const warehouseName = item.warehouseName ?? '未命名仓库'
+        if (!warehouseMap.has(warehouseName)) {
+          warehouseMap.set(warehouseName, new Set())
+        }
+
+        warehouseMap.get(warehouseName).add({ name: item.name, id: item.id })
+      }
+      const result: {
+        warehouseName: string
+        wayList: { name: string; id: string }[]
+      }[] = []
+
+      warehouseMap.forEach((children, parent) => {
+        result.push({
+          warehouseName: parent,
+          wayList: Array.from(children),
+        })
+      })
+
+      return result
+    }
+
+    return () => (
+      <ElPopover
+        width="750px"
+        placement="bottom-start"
+        trigger="click"
+        popper-style={{ padding: 0 }}
+        onUpdate:visible={(value) => {
+          if (value) searchName.value = ''
+        }}
+        v-slots={{
+          reference: () => (
+            <ElInput
+              modelValue={waysName.value}
+              style={{ width: props.startWidth }}
+              placeholder={props.startPlaceholder}
+              clearable
+              onClear={handleClearSelection}
+            />
+          ),
+        }}
+      >
+        <ElInput
+          modelValue={searchName.value}
+          onUpdate:modelValue={(value) => {
+            if (props.isRadio) {
+              templeCompanyList.value = fuzzySearch(allWayLists.value, value)
+            } else {
+              templeCompanyList.value = fuzzySearch(allList.value, value)
+            }
+            console.log('templeCompanyList', templeCompanyList.value)
+            searchName.value = value
+          }}
+          clearable
+          style={{ width: '200px', padding: '10px' }}
+          placeholder={props.searchPlaceholder}
+        />
+        <ElScrollbar
+          class="scroll-container"
+          maxHeight="450px"
+          style={{ 'border-top': '1px solid #eee' }}
+        >
+          {!searchName.value ? (
+            companyList.value.map((company, index) => (
+              <div class="companyBox" key={index}>
+                <div style={styles.titleBox}>
+                  <div class="title">{company.warehouseName}</div>
+                  {!props.isRadio && (
+                    <ElCheckbox
+                      modelValue={getCompanySelectedStatus.value(
+                        company as ICompanyList,
+                      )}
+                      onChange={(v) =>
+                        setCheckAll(company as ICompanyList, v as boolean)
+                      }
+                      class="selectAll"
+                    >
+                      全选
+                    </ElCheckbox>
+                  )}
+                </div>
+
+                {props.isRadio ? (
+                  <ElRadioGroup
+                    modelValue={selectedRadioList.value}
+                    onUpdate:modelValue={(value) => {
+                      console.log('company', value)
+                      selectedRadioList.value = value as string | number
+                    }}
+                    style={styles.checkboxGroup}
+                  >
+                    {company.wayList?.map((item) => (
+                      <div title={item.name} style={styles.checkbox}>
+                        <ElRadio
+                          label={item.name}
+                          value={item.id}
+                          key={`item-${item.id}`}
+                        >
+                          {item.name}
+                        </ElRadio>
+                      </div>
+                    ))}
+                  </ElRadioGroup>
+                ) : (
+                  <ElCheckboxGroup
+                    modelValue={selectedList.value}
+                    onUpdate:modelValue={(value) =>
+                      (selectedList.value = value)
+                    }
+                    style={styles.checkboxGroup}
+                  >
+                    {(company as ICompanyList).wayList.map((item) => (
+                      <div title={item.name} style={styles.checkbox}>
+                        <ElCheckbox
+                          label={item.name}
+                          value={item.id}
+                          key={`item-${item.id}`}
+                          class="checkboxItem"
+                        />
+                      </div>
+                    ))}
+                  </ElCheckboxGroup>
+                )}
+              </div>
+            ))
+          ) : props.isRadio ? (
+            <ElRadioGroup
+              modelValue={selectedRadioList.value}
+              onUpdate:modelValue={(value) => {
+                console.log('company', value)
+                selectedRadioList.value = value as string | number
+              }}
+              style={styles.checkboxGroup}
+            >
+              {(templeCompanyList.value as IwayList[]).map((item) => (
+                <div title={item.name} style={styles.checkbox}>
+                  <ElRadio
+                    label={item.name}
+                    value={item.id}
+                    key={`item-${item.id}`}
+                  >
+                    {item.name}
+                  </ElRadio>
+                </div>
+              ))}
+            </ElRadioGroup>
+          ) : (
+            <ElCheckboxGroup
+              modelValue={selectedList.value}
+              onUpdate:modelValue={(value) => (selectedList.value = value)}
+              style={styles.checkboxGroup}
+            >
+              {(templeCompanyList.value as IwayList[]).map((item) => (
+                <div title={item.name} style={styles.checkbox}>
+                  <ElCheckbox
+                    label={item.name}
+                    value={item.id}
+                    key={`item-${item.id}`}
+                    class="checkboxItem"
+                  />
+                </div>
+              ))}
+            </ElCheckboxGroup>
+          )}
+        </ElScrollbar>
+      </ElPopover>
+    )
+  },
+})

src/views/supply/supplierManagement/components/dialog.tsx

+import { defineComponent, ref } from 'vue'
+import { ElDialog } from 'element-plus'
+
+export default defineComponent({
+  name: 'CustomizeForm',
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+
+    title: {
+      type: String,
+      default: '',
+    },
+    dialogWidth: {
+      type: String,
+      default: '600px',
+    },
+  },
+  emits: ['update:modelValue', 'close'],
+  setup(props, { emit, attrs, slots }) {
+    const formRef = ref<InstanceType<typeof ElDialog> | null>(null)
+    const isShow = ref(false)
+    watch(
+      () => props.modelValue,
+      (val) => {
+        isShow.value = val
+      },
+      { immediate: true },
+    )
+
+    return () => {
+      return (
+        <ElDialog
+          ref={formRef}
+          v-model={isShow.value}
+          title={props.title}
+          width={props.dialogWidth}
+          onClose={() => {
+            emit('close')
+          }}
+          destroy-on-close={true}
+          close-on-click-modal={false}
+          {...attrs}
+        >
+          <div class="dialog-form">
+            {slots.default?.()}
+            {slots.footer?.()}
+          </div>
+        </ElDialog>
+      )
+    }
+  },
+})

src/views/supply/supplierManagement/hooks/useValue.ts

+import { Ref, ref } from 'vue'
+import { cloneDeep } from 'lodash-es'
+
+export function useValue<T extends object>(
+  initialValue: T,
+): [Ref<T>, () => void] {
+  const value = ref<T>(cloneDeep(initialValue)) as Ref<T>
+
+  const resetToDefault = () => {
+    value.value = cloneDeep(initialValue)
+  }
+
+  return [value, resetToDefault]
+}

src/views/supply/supplierManagement/index.vue

+<template>
+  <div class="user-page flex-column card h-100 overflow-hidden">
+    <div class="header-filter-form">
+      <ElButton type="success" @click="showDialog">新增供应商</ElButton>
+
+      <ElButton type="danger" @click="deleteFn">删除</ElButton>
+    </div>
+    <div class="user-content flex-1 flex-column overflow-hidden">
+      <div class="user-list flex-1 overflow-hidden" v-loading="loading">
+        <CustomizeTable
+          border
+          v-model="tableData"
+          :config="tableConfig"
+          align="center"
+          @getCheckboxRecords="handleCheckboxRecords"
+        ></CustomizeTable>
+      </div>
+      <ElPagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[100, 200, 300, 400, 500]"
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin: 10px auto 0; text-align: right"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      ></ElPagination>
+    </div>
+  </div>
+
+  <Dialog
+    :title="editForm['id'] ? '编辑供应商' : '新增供应商'"
+    v-model="dialogVisible"
+    @close="cancelFn"
+    width="75%"
+  >
+    <CustomizeForm
+      ref="editFormRef"
+      v-model="editForm"
+      :config="formConfig"
+      formItemWidth="100%"
+      :labelWidth="100"
+    >
+    </CustomizeForm>
+
+    <template #footer>
+      <div style="text-align: center">
+        <ElButton @click="cancelFn">取消</ElButton>
+
+        <ElButton type="primary" @click="saveSupplierFn">保存</ElButton>
+      </div>
+    </template>
+  </Dialog>
+
+  <Dialog
+    title="管理供应商价格"
+    v-model="piceDialogVisible"
+    width="65%"
+    @close="cancelPiceFn"
+  >
+    <div style="display: flex; margin-bottom: 10px">
+      <div style="display: flex; align-items: center; gap: 20px">
+        <div><span style="color: red">*</span> 结算币种</div>
+        <el-select style="width: 300px; flex: 1"></el-select>
+      </div>
+    </div>
+    <div style="border-top: 1px solid #eee; margin-bottom: 10px">
+      <div style="font-size: 20px; font-weight: bold; margin: 10px 0">
+        颜色(Color)
+      </div>
+      <div class="flex gap-2">
+        <el-tag color="#0000ff" v-for="value in 8" :key="value"
+          >Tag {{ value }}</el-tag
+        >
+      </div>
+    </div>
+    <div style="border-top: 1px solid #eee; margin-bottom: 10px">
+      <div style="font-size: 20px; font-weight: bold; margin: 10px 0">
+        尺码(Size)
+      </div>
+      <div class="flex gap-2">
+        <el-tag color="#0000ff" v-for="value in 8" :key="value"
+          >Tag {{ value }}</el-tag
+        >
+      </div>
+    </div>
+    <div
+      style="
+        display: flex;
+        justify-content: end;
+
+        border-top: 1px solid #eee;
+      "
+    >
+      <div style="margin: 10px 0">
+        <el-input
+          placeholder="请输入更新价格"
+          style="width: 200px; margin-right: 20px"
+          size="small"
+        ></el-input
+        ><ElButton type="primary" @click="updatePrices" size="small"
+          >批量更新价格</ElButton
+        >
+      </div>
+    </div>
+    <CustomizeTable
+      border
+      style="margin-bottom: 20px"
+      v-model="picetableData"
+      :config="supplyTableConfig"
+      align="center"
+      height="500px"
+      @getCheckboxRecords="handleCheckboxRecords"
+    ></CustomizeTable>
+    <template #footer>
+      <div style="text-align: center">
+        <ElButton @click="cancelPiceFn">取消</ElButton>
+
+        <ElButton type="primary" @click="savePiceFn">保存</ElButton>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="tsx">
+defineOptions({
+  name: 'DeclarationRule',
+})
+import {
+  getSupplierListApi,
+  deleteSupplierApi,
+} from '@/api/supplier/supplierManagement.ts'
+
+import Dialog from './components/dialog.tsx'
+import CustomizeForm from '@/components/CustomizeForm.tsx'
+import CustomizeTable from '@/components/VxeTable.tsx'
+import { IFormConfig } from '@/components/CustomizeForm.tsx'
+import usePageList from '@/utils/hooks/usePageList'
+import { useValue } from './hooks/useValue'
+import { showConfirm } from '@/utils/ui'
+import { debounce } from 'lodash-es'
+import { AddDeclarationRuleObj } from './types/declarationRule'
+import { Edit, CirclePlus } from '@element-plus/icons-vue'
+
+import { TableColumn } from '@/components/VxeTable'
+
+const [editForm, resetEditForm] = useValue<AddDeclarationRuleObj>({
+  type: 1,
+  currency: 'USD',
+})
+const {
+  loading,
+  currentPage,
+  pageSize,
+  total,
+  data: tableData,
+  refresh: search,
+  onCurrentPageChange: handleCurrentChange,
+  onPageSizeChange: handleSizeChange,
+} = usePageList({
+  query: (page, pageSize) =>
+    getSupplierListApi({
+      pageSize: pageSize,
+      currentPage: page,
+    }).then(({ data }) => {
+      console.log(130, data)
+      return data
+    }),
+})
+const dialogVisible = ref(false)
+const goodsTableData = ref([])
+
+const supplierTableData = ref([])
+
+const piceDialogVisible = ref(false)
+const picetableData = ref([])
+const editFormRef = ref<InstanceType<typeof CustomizeForm> | null>(null)
+const selection = ref([])
+
+interface IOption {
+  [key: string]: unknown
+}
+
+const formConfig = computed<IFormConfig[]>(() => [
+  {
+    prop: 'name',
+    type: 'input',
+    label: '供应商名称',
+    attrs: {
+      placeholder: '请输入供应商名称',
+      width: '33%',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入供应商名称',
+      },
+    ],
+  },
+  {
+    prop: 'name',
+    type: 'input',
+    label: '联系人',
+    attrs: {
+      placeholder: '请输入联系人',
+      width: '33%',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入联系人',
+      },
+    ],
+  },
+  {
+    prop: 'name',
+    type: 'input',
+    label: '联系电话',
+    attrs: {
+      placeholder: '请输入联系电话',
+      width: '33%',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入联系电话',
+      },
+    ],
+  },
+  {
+    prop: 'name',
+    type: 'input',
+    label: '地址',
+    attrs: {
+      placeholder: '请输入地址',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入地址',
+      },
+    ],
+  },
+
+  {
+    prop: 'remark',
+    type: 'input',
+    label: '备注',
+    attrs: {
+      placeholder: '请输入备注',
+      type: 'textarea',
+      rows: 4,
+    },
+  },
+  {
+    prop: 'table',
+    title: true,
+    type: '',
+    label: '',
+    render: () => {
+      return (
+        <div style={{ width: '100%' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexWrap: 'nowrap',
+              alignItems: 'center',
+              gap: '20px',
+              marginBottom: '20px',
+            }}
+          >
+            <div>管理供应商品</div>
+            <el-input
+              v-model={searchSupplierGoods.value}
+              clearable
+              placeholder="九猫商品SPU"
+              style={{ width: '200px' }}
+            ></el-input>
+            <el-popover
+              placement="right"
+              trigger="click"
+              width="1050"
+              v-slots={{
+                reference: () => (
+                  <el-button
+                    type="primary"
+                    onclick={() => searchSupplyGoodsFn()}
+                  >
+                    查询
+                  </el-button>
+                ),
+              }}
+            >
+              <CustomizeTable
+                v-loading={goodsLoading.value}
+                isShowCheckBox={false}
+                modelValue={goodsTableData.value}
+                config={searchTableConfig.value}
+                {...{ height: '600px', align: 'center', border: true }}
+                style={{ marginBottom: '20px' }}
+              ></CustomizeTable>
+            </el-popover>
+          </div>
+
+          <CustomizeTable
+            modelValue={supplierTableData.value}
+            config={formTableConfig.value}
+            {...{ height: '500px', align: 'center', border: true }}
+            style={{ marginBottom: '20px' }}
+          ></CustomizeTable>
+        </div>
+      )
+    },
+  },
+])
+
+const tableConfig = ref<TableColumn[]>([
+  {
+    prop: 'name',
+    label: '供应商名称',
+  },
+  {
+    prop: 'currency',
+    label: '联系人',
+  },
+
+  {
+    prop: 'type',
+    label: '联系电话',
+  },
+  {
+    prop: 'logisticsWayId',
+    label: '地址',
+  },
+
+  {
+    prop: 'remark',
+    label: '备注',
+  },
+
+  {
+    prop: 'opeare',
+    label: '操作',
+    attrs: {
+      align: 'center',
+    },
+    render: {
+      default: ({ row }: { row: AddDeclarationRuleObj }) => (
+        <div>
+          <el-icon
+            size="24"
+            title="编辑"
+            color="#EF6C00"
+            style="cursor: pointer; vertical-align: middle"
+            onclick={() => editSupplier(row)}
+          >
+            <Edit />
+          </el-icon>
+        </div>
+      ),
+    },
+  },
+])
+const formTableConfig = ref<TableColumn[]>([
+  {
+    prop: 'name',
+    label: '商品名称',
+  },
+  {
+    prop: 'currency',
+    label: '款号',
+  },
+
+  {
+    prop: 'type',
+    label: '商品SPU',
+  },
+  {
+    prop: 'logisticsWayId',
+    label: '商品图片',
+  },
+
+  {
+    prop: 'remark',
+    label: '币种',
+  },
+  {
+    prop: 'remark',
+    label: '供应价格',
+  },
+
+  {
+    prop: 'opeare',
+    label: '操作',
+    attrs: {
+      align: 'center',
+    },
+    render: {
+      default: ({ row }: { row: AddDeclarationRuleObj }) => (
+        <el-button type="primary" onclick={() => addPice(row)} size="small">
+          管理供应价格
+        </el-button>
+      ),
+    },
+  },
+])
+const searchTableConfig = ref<TableColumn[]>([
+  {
+    prop: 'name',
+    label: '商品名称',
+  },
+  {
+    prop: 'currency',
+    label: '款号',
+  },
+
+  {
+    prop: 'type',
+    label: '商品SPU',
+  },
+  {
+    prop: 'logisticsWayId',
+    label: '商品图片',
+  },
+  {
+    prop: 'opeare',
+    label: '操作',
+    attrs: {
+      align: 'center',
+      width: '65px',
+    },
+    render: {
+      default: ({ row }: { row: AddDeclarationRuleObj }) => (
+        <div>
+          <el-icon
+            size="24"
+            title="新增"
+            color="#EF6C00"
+            style="cursor: pointer; vertical-align: middle"
+            onclick={() => addGoods(row)}
+          >
+            <CirclePlus />
+          </el-icon>
+        </div>
+      ),
+    },
+  },
+])
+const supplyTableConfig = ref<TableColumn[]>([
+  {
+    prop: 'name',
+    label: '商品名称',
+  },
+  {
+    prop: 'currency',
+    label: 'SKU码',
+  },
+
+  {
+    prop: 'opeare',
+    label: '操作',
+    attrs: {
+      align: 'center',
+      width: '230px',
+    },
+    render: {
+      default: ({ row }: { row: any }) => (
+        <div>
+          <el-input
+            modelValue={row.pice}
+            placeholder="请输入更新价格"
+            style="width: 200px; margin-right: 20px"
+            size="small"
+          ></el-input>
+        </div>
+      ),
+    },
+  },
+])
+
+const searchSupplierGoods = ref('')
+
+/**
+ * @description: 取消按钮
+ */
+function cancelFn() {
+  dialogVisible.value = false
+  editFormRef.value?.resetFields()
+  resetEditForm()
+}
+/**
+ * @description: 取消供应价格按钮
+ */
+function cancelPiceFn() {
+  piceDialogVisible.value = false
+}
+
+function savePiceFn() {}
+
+/**
+ * @description: 检查数据
+ */
+async function checkData() {
+  const [isValid, postData] = await Promise.all([
+    new Promise<boolean>((resolve) => {
+      editFormRef.value
+        ?.validate()
+        .then(() => resolve(true))
+        .catch((err) => {
+          resolve(false)
+          console.log(err)
+        })
+    }),
+    new Promise<AddDeclarationRuleObj>((resolve) => {
+      const params = { ...editForm.value }
+      params.logisticsWay = params.logisticsWayId?.join(',')
+      resolve(params)
+    }),
+  ])
+  return { isValid, postData }
+}
+
+/**
+ * @description: 保存按钮
+ */
+const saveSupplierFn = debounce(async () => {
+  const { isValid, postData } = await checkData()
+  if (isValid) {
+    try {
+      if (!postData.id) {
+        // await addLogisticsCustomsRule({
+        //   ...postData,
+        // })
+      } else {
+        // await updateLogisticsCustomsRule({
+        //   ...postData,
+        // })
+      }
+      ElMessage({
+        message: postData.id ? '更新成功' : '新增成功',
+        type: 'success',
+      })
+
+      cancelFn()
+      search()
+    } catch (e) {
+      return
+    }
+  }
+}, 400)
+
+/**
+ * @description: 获取选中数据
+ */
+function handleCheckboxRecords(value: never[]) {
+  console.log(351, value)
+  selection.value = value
+}
+
+/**
+ * @description: 多选删除按钮
+ */
+async function deleteFn() {
+  if (!selection.value.length) {
+    return ElMessage({
+      message: '请选择供应商',
+      type: 'warning',
+    })
+  }
+  try {
+    await showConfirm('是否删除供应商', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+  } catch {
+    return
+  }
+  try {
+    const ids = {
+      ids: selection.value.map((item: IOption) => item.id).join(','),
+    }
+    await deleteSupplierApi(ids)
+    ElMessage({
+      message: '删除成功',
+      type: 'success',
+    })
+    search()
+  } catch (e) {
+    search()
+    // showError(e)
+  }
+}
+
+/**
+ * @description: 新增供应商
+ */
+async function showDialog() {
+  dialogVisible.value = true
+}
+/**
+ * @description: 编辑供应商
+ */
+async function editSupplier() {
+  dialogVisible.value = true
+}
+
+const goodsLoading = ref(false)
+function searchSupplyGoodsFn() {
+  goodsLoading.value = true
+  console.log(604, searchSupplierGoods.value)
+}
+
+function addPice() {
+  piceDialogVisible.value = true
+}
+
+function addGoods(data: any) {
+  supplierTableData.value.push(data)
+}
+function updatePrices() {}
+
+onMounted(() => {
+  getAllList()
+})
+
+async function getAllList() {}
+</script>
+
+<style lang="scss" scoped>
+.header-filter-form {
+  margin-bottom: 20px;
+
+  :deep(.el-form-item) {
+    margin-right: 14px;
+    margin-bottom: 10px;
+  }
+}
+.user-operate-btn {
+  margin-bottom: 10px;
+}
+.dialog-footer {
+  text-align: center;
+}
+</style>

src/views/supply/supplierManagement/types/declarationRule.ts

+export interface DeclarationRuleList {
+  countries: string
+  createTime: string
+  currency: string
+  defaulted: string
+  fixedValue: string
+  fixedWeight: string
+  id: number
+  name: string
+  orderPercent: number
+
+  remark: string
+  shops: string
+  type: number
+  valueUp: number
+  wayIds: string
+  wayNames: string
+  weightPercent: number
+  weightUp: number
+}
+
+export interface AddDeclarationRuleObj {
+  currency?: string
+  fixedValue?: string
+  fixedWeight?: string
+  id?: number
+  limitAmountType?: string
+  limitWeightType?: string
+  name?: string
+  orderPercent?: number | string | null
+
+  remark?: string
+  shops?: string
+  type?: number
+  valueUp?: number | string | null
+  weightPercent?: number | string | null
+  weightUp?: number | string | null
+  logisticsWay?: string
+  logisticsWayId?: (string | number)[]
+}

src/views/supply/supplierManagement/types/logistics.ts

+export interface LogisticsMethod {
+  id?: number | string
+  name?: string
+  warehouseId?: number
+  warehouseName?: string
+  companyId?: number
+  company?: string
+  serviceCode?: string
+  siteUrl?: string
+  status: number | string
+  platformList: platformObj[]
+  ruleRef: ruleRefObj
+  ruleId?: string | number
+  ruleList?: ruleRefObj[]
+  uinuinWarehouseId?: number | string | null
+  companyWarehouseCode?: number | string | null
+}
+
+export interface LogisticsMethodList {
+  name?: string
+  status?: number | string
+  serviceCode?: number | string
+  pageSize: number | string
+  currentPage: number | string
+}
+
+export interface UpdateLogisticsMethodStatus {
+  id?: number | string
+  status?: number | string
+}
+
+export interface LogisticsResponse {
+  code: number
+  data: {
+    total: number
+    size: number
+    current: number
+    records: LogisticsMethod[]
+  }
+  message: string
+}
+
+export interface platformObj {
+  platform: string
+  logisticsName: string | number
+  showPlatform: (string | number)[]
+}
+interface ruleRefObj {
+  ruleId: string | number
+  ruleName: string | number
+}
+
+export interface LogisticsTrackingTree {
+  name: string
+  status: number
+  num: number
+}
+export interface LogisticsTrackingParams {
+  trackNumber?: number | string
+  shopNumber?: string | number
+  trackingStatus?: number
+}

src/views/supply/supplierManagement/types/logisticsPartition.ts

+export interface LogisticsPartitionObj {
+  zoneName?: string
+  logistics?: string
+  codePrefix?: string
+  logisticsId?: string
+}

src/views/supply/supplierManagement/types/logisticsQuotation.ts

+export interface LogisticsQuotation {
+  factoryId?: number
+  id?: number
+  logistics?: string
+  logisticsId?: number
+  rate?: number
+  rateG?: number
+  rateKg?: number
+  rateType?: string
+  seq?: number
+  unit?: string
+  zone1?: string
+  zone2?: string
+  zone3?: string
+  zone4?: string
+  zone5?: string
+  zone6?: string
+  zone7?: string
+  zone8?: string
+  zone9?: string
+  logisticsQuotationList?: LogisticsQuotation[]
+}

src/views/supply/supplierManagement/types/shippingAddress.ts

+export interface ShippingAddressObj {
+  addressLine1?: string
+  addressLine2?: string
+  addressLine3?: string
+  city?: string
+  cityCode?: string
+  countryCode?: string
+  countryName?: string
+  createTime?: string
+  cspAccount?: string
+  district?: string
+  districtCode?: string
+  factoryId?: number
+  id?: number
+  phoneNumber?: string
+  postalCode?: string
+  rfcTaxId?: string
+  shipperName?: string
+  stateProvince?: string
+  stateProvinceAbbr?: string
+  swDefault?: boolean
+  updateTime?: string
+  checked?: boolean
+}
+
+export interface ICountryObj {
+  aeCountryCode: string
+  continentCode: string
+  countryCode: string
+  id: number
+  nameCn: string
+  nameEn: string
+  needProviceAbbr: number
+}