添加物流方式和发货地址页面

.eslintrc

@@ -12,7 +12,7 @@
   "rules": {
     "vue/require-default-prop": "off",
     "vue/multi-word-component-names": "off",
-    "no-console": "warn","no-unused-vars": "off"
+    "no-console": "off","no-unused-vars": "off",
   },
   "overrides": [{ "files": "*.vue", "rules": { "no-undef": "off" } }]
 }

auto-imports.d.ts

@@ -9,6 +9,8 @@ declare global {
   const ElLoading: typeof import('element-plus/es')['ElLoading']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
+  const ElOption: typeof import('element-plus/es')['ElOption']
+  const ElSelect: typeof import('element-plus/es')['ElSelect']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']

components.d.ts

@@ -18,10 +18,10 @@ declare module 'vue' {
     RenderColumn: typeof import('./src/components/RenderColumn.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    SearchForm: typeof import('./src/components/SearchForm.vue')['default']
     Select: typeof import('./src/components/Form.vue/Select.vue')['default']
     ShipmentOrderDetail: typeof import('./src/components/ShipmentOrderDetail.vue')['default']
     SplitDiv: typeof import('./src/components/splitDiv/splitDiv.vue')['default']
+    'Switch ': typeof import('./src/components/Form.vue/Switch .vue')['default']
     TableRightMenu: typeof import('./src/components/TableRightMenu.vue')['default']
     TableView: typeof import('./src/components/TableView.vue')['default']
     UploadExcel: typeof import('./src/components/UploadExcel.vue')['default']

package-lock.json

@@ -2827,6 +2827,19 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@vxe-ui/core": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmmirror.com/@vxe-ui/core/-/core-4.1.4.tgz",
+      "integrity": "sha512-XjT7gyKwiThAQ06rwmsZA+WEvr6eX2XuaMPzArPOS41gTasgvbVT777y3QZUvzkjuy+JnGH9zY98cydEF5W0ng==",
+      "license": "MIT",
+      "dependencies": {
+        "dom-zindex": "^1.0.6",
+        "xe-utils": "^3.7.4"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@wangeditor/basic-modules": {
       "version": "1.1.7",
       "resolved": "https://registry.npmmirror.com/@wangeditor/basic-modules/-/basic-modules-1.1.7.tgz",
@@ -3521,6 +3534,12 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-zindex": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/dom-zindex/-/dom-zindex-1.0.6.tgz",
+      "integrity": "sha512-FKWIhiU96bi3xpP9ewRMgANsoVmMUBnMnmpCT6dPMZOunVYJQmJhSRruoI0XSPoHeIif3kyEuiHbFrOJwEJaEA==",
+      "license": "MIT"
+    },
     "node_modules/dom7": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/dom7/-/dom7-3.0.0.tgz",
@@ -6407,6 +6426,24 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/vxe-pc-ui": {
+      "version": "4.6.12",
+      "resolved": "https://registry.npmmirror.com/vxe-pc-ui/-/vxe-pc-ui-4.6.12.tgz",
+      "integrity": "sha512-57sRB/ksP8ip4l0hPcph5qXt/qGlrCjO2/Y6ZL4sHkGdb+CBWgbzvUPcq3GYgSSPdZg+Ae++UcGqgRGMZss+RQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vxe-ui/core": "^4.1.4"
+      }
+    },
+    "node_modules/vxe-table": {
+      "version": "4.13.31",
+      "resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-4.13.31.tgz",
+      "integrity": "sha512-ibSM7jXYwJyY+eqXoRy/yXEVLENGFzL96cOEwtnFjBYbbaZV6/ptlM3tsyewGFBCUo5AtIyM+98hswxfjyXxMA==",
+      "license": "MIT",
+      "dependencies": {
+        "vxe-pc-ui": "^4.6.0"
+      }
+    },
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",

package.json

@@ -24,7 +24,8 @@
     "vue-dompurify-html": "^5.1.0",
     "vue-router": "^4.3.0",
     "vue-tsc": "^2.1.10",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "vxe-table": "^4.13.31"
   },
   "devDependencies": {
     "@types/splitpanes": "^2.2.6",

src/api/logistics.ts

+import { BaseRespData } from '@/types/api'
+import axios from './axios'
+import {
+  LogisticsMethod,
+  LogisticsMethodList,
+  UpdateLogisticsMethodStatus,
+} from '@/types/api/logistics'
+interface Ikey {
+  [key: string]: unknown
+}
+interface ILogisticsParams {
+  logType: 'logistics_way' | 'logistics_address'
+  relaId: number | string
+}
+//获取日志
+export function getLogisticsLog(params: ILogisticsParams) {
+  return axios.get<never, BaseRespData<never>>('logisticsLog/getList', {
+    params,
+  })
+}
+
+/**
+ * @description 物流方式
+ */
+//列表
+export function getLogisticsWayList(data: LogisticsMethodList) {
+  return axios.post<never, BaseRespData<never>>('/logisticsWay/list_page', data)
+}
+//新增
+export function addLogisticsWay(data: LogisticsMethod) {
+  return axios.post<Ikey, BaseRespData<never>>('/logisticsWay/add', data)
+}
+//修改
+export function updateLogisticsWay(data: LogisticsMethod) {
+  return axios.post<Ikey, BaseRespData<never>>('/logisticsWay/update', data)
+}
+//更新状态
+export function updateStatusLogisticsWay(params: UpdateLogisticsMethodStatus) {
+  return axios.get<Ikey, BaseRespData<never>>(
+    '/logisticsWay/updateStatusById',
+    {
+      params,
+    },
+  )
+}
+// 删除
+export function deleteLogisticsWay(ids: string) {
+  return axios.get<Ikey, BaseRespData<never>>('/logisticsWay/delete', {
+    params: { ids: ids },
+  })
+}
+
+//获取申报规则列表
+export function getRuleList() {
+  return axios.get<never, BaseRespData<never>>(
+    '/logisticsCustomsRule/getRuleList',
+  )
+}
+//获取仓库列表
+export function getWarehouseList() {
+  return axios.get<never, BaseRespData<never>>('/factoryWarehouseInfo/getAll')
+}
+//获取平台列表
+export function getPlatformList() {
+  return axios.get<never, BaseRespData<never>>('/logisticsWay/platform')
+}
+
+/**
+ * @description 发货地址
+ */
+//列表
+export function getAddressByIdList(params: any) {
+  return axios.get<never, BaseRespData<never>>('/logisticsAddress/list_page', {
+    params,
+  })
+}
+//根据id查询地址
+export function getAddressById(params: any) {
+  return axios.get<never, BaseRespData<never>>(
+    '/logisticsAddress/getAddressById',
+    {
+      params,
+    },
+  )
+}
+//新增
+export function addAddress(params: any) {
+  return axios.post<never, BaseRespData<never>>(
+    '/logisticsAddress/addAddress',
+    params,
+  )
+}
+//修改
+export function updateAddress(params: any) {
+  return axios.post<never, BaseRespData<never>>(
+    '/logisticsAddress/updateAddress',
+    params,
+  )
+}
+//删除
+export function deleteAddressByIds(params: any) {
+  return axios.get<never, BaseRespData<never>>(
+    '/logisticsAddress/deleteAddressByIds',
+    {
+      params,
+    },
+  )
+}
+
+/**
+ * @description 物流报价
+ */
+//物流方式列表
+export function getlogisticsWayAllList() {
+  return axios.get<never, BaseRespData<never>>('/logisticsWay/all_list', {})
+}
+//物流报价列表
+export function getlogisticsQuotationList() {
+  return axios.get<never, BaseRespData<never>>(
+    '/logistics/logisticsQuotation/list_page',
+    {},
+  )
+}
+//新增
+export function addLogisticsQuotation(params: any) {
+  return axios.get<never, BaseRespData<never>>(
+    '/logistics/logisticsQuotation/add',
+    params,
+  )
+}
+//修改
+export function updateLogisticsQuotation(params: any) {
+  return axios.post<never, BaseRespData<never>>(
+    '/logistics/logisticsQuotation/update',
+    params,
+  )
+}
+//删除
+export function deleteLogisticsQuotation(params: any) {
+  return axios.post<never, BaseRespData<never>>(
+    '/logistics/logisticsQuotation/delete',
+    params,
+  )
+}
+//导入
+export function importLogisticsQuotation(params: any) {
+  return axios.get<never, BaseRespData<never>>(
+    '/logistics/logisticsQuotation/import',
+    { params },
+  )
+}
+//下载模版
+export function exportLogisticsQuotationTemplate(params: any) {
+  return axios.get<never, BaseRespData<never>>(
+    '/logistics/logisticsQuotation/exportExcel',
+    { params },
+  )
+}
+//根据ID查对象
+export function getLogisticsQuotationByID(params: any) {
+  return axios.get<never, BaseRespData<never>>(
+    '/logistics/logisticsQuotation/get',
+    { params },
+  )
+}

src/components/CustomizeForm.tsx

+import { defineComponent, PropType, ref, computed, h } from 'vue'
+import type { Component } from 'vue'
+import { ElInput, ElForm, ElFormItem } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import AmountInput from './Form.vue/AmountInput.vue' // 金额输入框
+import DateRangePicker from './Form.vue/DateRangePicker.vue' // 时间范围选择器
+import DatePicker from './Form.vue/DatePicker.vue' // 单个日期选择器
+import Select from './Form.vue/Select.vue' // 普通下拉选择框
+import Switch from './Form.vue/Switch .vue'
+import './Form.vue/form.scss'
+
+import type { FormItemRule } from 'element-plus'
+
+// 定义表单项配置接口
+export interface IFormConfig {
+  title?: string
+  prop?: string
+  label?: string
+  type?: string
+  btn?: JSX.Element | (() => JSX.Element)
+  attrs?: Record<string, unknown>
+  rules?: FormItemRule | FormItemRule[]
+  render?: (
+    item?: IFormConfig,
+    formData?: Record<string, any>,
+    index?: number,
+  ) => JSX.Element
+}
+
+// 定义组件类型
+type ComponentType = Component
+
+// 支持的组件映射
+const componentConfig: Record<string, ComponentType> = {
+  input: ElInput,
+  amountInput: AmountInput,
+  dateRangePicker: DateRangePicker,
+  datePicker: DatePicker,
+  select: Select,
+  switch: Switch,
+  // 这里可以根据需要添加更多组件类型
+}
+
+export default defineComponent({
+  name: 'CustomizeForm',
+  props: {
+    config: {
+      type: Array as PropType<IFormConfig[]>,
+      default: () => [],
+    },
+    labelWidth: {
+      type: [String, Number],
+      default: 100,
+    },
+    formItemWidth: {
+      type: [String, Number],
+      default: '50%',
+    },
+    modelValue: {
+      type: Object as PropType<Record<string, unknown>>,
+      default: () => ({}),
+    },
+    size: {
+      type: String as PropType<'large' | 'default' | 'small'>,
+      default: 'default',
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+    labelPosition: {
+      type: String as PropType<'left' | 'right' | 'top'>,
+      default: 'right',
+    },
+  },
+  emits: ['update:modelValue', 'validate'],
+  setup(props, { emit, attrs }) {
+    const formRef = ref<FormInstance>()
+    const formData = ref<Record<string, unknown>>(props.modelValue)
+
+    // 监听表单数据变化
+    watch(
+      () => formData.value,
+      (val) => {
+        emit('update:modelValue', val)
+      },
+      { deep: true },
+    )
+
+    // 监听外部数据变化
+    watch(
+      () => props.modelValue,
+      (val) => {
+        // console.log(84, val)
+
+        formData.value = val
+      },
+      { immediate: true, deep: true },
+    )
+
+    // 获取form表单的属性
+    const getFormAttrs = computed(() => ({
+      ...attrs,
+      style: { width: '100%' },
+    }))
+
+    // 获取组件项的属性
+    const getComponentAttrs = (item: IFormConfig) => {
+      return item.attrs ? { ...item.attrs } : {}
+    }
+
+    // 表单验证方法
+    const validate = async () => {
+      if (!formRef.value) return false
+      return await formRef.value.validate()
+    }
+
+    // 重置表单
+    const resetFields = async () => {
+      await formRef.value?.resetFields()
+    }
+
+    return {
+      formRef,
+      formData,
+      validate,
+      resetFields,
+      getFormAttrs,
+      getComponentAttrs,
+    }
+  },
+  render() {
+    return (
+      <ElForm
+        ref="formRef"
+        model={this.formData}
+        labelWidth={this.labelWidth}
+        size={this.size}
+        inline={this.inline}
+        labelPosition={this.labelPosition}
+        {...this.getFormAttrs}
+        style={{ display: 'flex', flexWrap: 'wrap' }}
+        class="customForm"
+      >
+        {this.config.map((item, index) =>
+          item.title ? (
+            <div
+              style={{
+                display: 'flex',
+                width: '100%',
+                flexWrap: 'wrap',
+              }}
+            >
+              <div
+                style={{
+                  width: '100%',
+                  textAlign: 'center',
+                  fontWeight: 700,
+                  marginBottom: '20px',
+                  fontSize: '16px',
+                }}
+              >
+                {item.title}
+              </div>
+              {item.render && item.render(item, this.formData, this)}
+            </div>
+          ) : (
+            <ElFormItem
+              key={index}
+              prop={item.prop}
+              label={item.label}
+              style={{
+                width: item.attrs?.width || this.formItemWidth || '50%',
+              }}
+              rules={item.rules}
+            >
+              {item.render
+                ? item.render(item)
+                : h(componentConfig[item.type] || ElInput, {
+                    modelValue: this.formData[item.prop],
+                    'onUpdate:modelValue': (value: unknown) => {
+                      this.formData[item.prop] = value
+                    },
+                    ...this.getComponentAttrs(item),
+                  })}
+              {item.btn && item.btn()}
+            </ElFormItem>
+          ),
+        )}
+      </ElForm>
+    )
+  },
+})

src/components/Form.vue/AmountInput.vue

@@ -32,16 +32,17 @@ const props = withDefaults(
   },
 )
 const emits = defineEmits<{
-  (e: 'update:modelValue', data: string | number)
-  (e: 'input', data: string | number)
+  (e: 'update:modelValue', data: string | number | null): void
+  (e: 'input', data: string | number): void
 }>()
 
-const val = ref<string | number>(props.modelValue)
+const val = ref<string | number | null>(props.modelValue)
 
 const iptFn = (e) => {
   const bool = isNumFloat(e) // 只允许输入数字和最多一个小数点
   if (e === '') {
     val.value = null
+    emits('input', '')
   } else {
     if (bool) {
       const parts = e.split('.') // 将输入的数字按小数点分割成整数部分和小数部分
@@ -63,7 +64,7 @@ const iptFn = (e) => {
       }
     }
   }
-  emits('input', val.value)
+  emits('input', val.value || '')
 }
 
 watch(

src/components/Form.vue/DatePicker.vue

@@ -27,7 +27,7 @@ const props = withDefaults(
     isNeedTime: false,
     isrowDate: false,
     rowData: null,
-    newDisableDate: null,
+    newDisableDate: undefined,
   },
 )
 // 用于存储动态的禁用日期逻辑

src/components/Form.vue/Switch .vue

+<template>
+  <el-switch
+    v-model="model"
+    class="ml-2"
+    :style="{
+      '--el-switch-on-color': props.activeColor,
+      '--el-switch-off-color': props.inactiveColor,
+    }"
+    v-bind="$attrs"
+  />
+</template>
+<script lang="ts" setup>
+const model = ref()
+const props = withDefaults(
+  defineProps<{
+    activeColor?: string
+    inactiveColor?: string
+    modelValue?: any
+  }>(),
+  {
+    activeColor: '#13ce66',
+    inactiveColor: ' #ff4949',
+    modelValue: null,
+  },
+)
+watch(
+  () => props.modelValue,
+  (val) => {
+    console.log(32, val)
+    model.value = val
+  },
+  { immediate: true },
+)
+watch(model, (val) => {
+  emits('update:modelValue', val)
+})
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', data: string | number | undefined)
+}>()
+</script>
+<style lang="scss" scoped></style>

src/components/Form.vue/form.scss

+.customForm {
+
+    .el-form-item {
+
+
+        .el-form-item__content {
+
+            flex-wrap: nowrap;
+        }
+    }
+
+
+}
\ No newline at end of file

src/components/SearchForm.tsx

-import { defineComponent, PropType, ref, computed, reactive, watch, h } from 'vue'
+import {
+  defineComponent,
+  PropType,
+  ref,
+  computed,
+  reactive,
+  watch,
+  h,
+} from 'vue'
 import type { Component } from 'vue'
 
 import AmountInput from './Form.vue/AmountInput.vue' // 金额输入框
@@ -22,8 +30,6 @@ const componentDataTypeMap = new Map([
   [EComponenetType.select, EDataType.undefined],
 ])
 
-
-
 type ComponentType = Component
 
 const componentConfig: Record<EComponenetType, ComponentType> = {
@@ -39,14 +45,14 @@ const styles = {
     position: 'relative',
   },
   searchFormHeader: {
-    display: 'flex',  marginBottom: '10px'
+    display: 'flex',
+    marginBottom: '10px',
   },
   wrapper: {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
-  
   },
 } as const
 
@@ -55,62 +61,54 @@ export default defineComponent({
   props: {
     config: {
       type: Array as PropType<ISeachFormConfig[]>,
-      default: () => []
+      default: () => [],
     },
     labelWidth: {
       type: [String, Number],
-      default: 58
+      default: 58,
     },
     modelValue: {
       type: Object as PropType<ISearchForm>,
-      default: () => ({})
+      default: () => ({}),
     },
     getTablelist: {
       type: Function as PropType<(...args: unknown[]) => Promise<unknown>>,
-      default: null
+      default: null,
     },
     size: {
       type: String as PropType<'large' | 'default' | 'small'>,
-      default: 'default'
+      default: 'default',
     },
     addPermissionName: {
       type: [String, Array] as PropType<string | string[]>,
-      default: ''
+      default: '',
     },
     isSearchBtn: {
       type: Boolean,
-      default: true
+      default: true,
     },
     isResetBtn: {
       type: Boolean,
-      default: true
+      default: true,
     },
     isAddBtn: {
       type: Boolean,
-      default: true
+      default: true,
     },
     isDeleteBtn: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
-  emits: [
-    'search',
-    'reset',
-    'fold',
-    'headerPrimaryBtn',
-    'headerDefaultBtn',
-    'update:modelValue',
-    'clear',
-    'update:tableFieldForm',
-    'getExcelData'
-  ],
+  emits: ['search', 'reset', 'fold', 'add', 'delete', 'update:modelValue'],
   setup(props, { emit, slots, attrs }) {
     const formRef = ref()
     const formWrapperRef = ref()
-    const searchForm = reactive<ISearchForm>(props.modelValue || {})
+    const searchForm = ref<ISearchForm>(props.modelValue || {})
     const selectResult = ref<ISeachFormConfig[]>([])
-    const componentWidth = computed(() => props.size === 'default' ? 200 : 220)
+    const componentWidth = computed(() =>
+      props.size === 'default' ? 200 : 220,
+    )
 
     function initSeachForm() {
       props.config.forEach((item, index) => {
@@ -133,12 +131,12 @@ export default defineComponent({
       },
       {
         immediate: true,
-      }
+      },
     )
 
     // 获取form表单的属性
     const getFormAttrs = computed(() => ({
-      ...attrs
+      ...attrs,
     }))
 
     // 获取组件项传进来的attrs
@@ -146,14 +144,6 @@ export default defineComponent({
       return item.attrs ? { ...item.attrs } : {}
     }
 
-    const searchFn = () => {
-      emit('search', searchForm)
-    }
-
-    const resetFn = () => {
-      emit('reset', {})
-    }
-
     const handleSubmit = (e: Event) => {
       e.preventDefault()
     }
@@ -167,14 +157,14 @@ export default defineComponent({
             <div style={styles.wrapper} class="mt-15">
               <ElForm
                 {...getFormAttrs.value}
-                ref={formRef}
+                ref={el=>formRef.value=el}
                 class="w-full"
                 inline
-                model={searchForm}
+                model={searchForm.value}
                 labelPosition="left"
                 size={props.size}
                 {...{
-                  onSubmit: handleSubmit
+                  onSubmit: handleSubmit,
                 }}
               >
                 <div ref={formWrapperRef} class="formItemWrapper w-full">
@@ -184,20 +174,19 @@ export default defineComponent({
                         key={index}
                         prop={item.prop}
                         label={item.label}
-                        style={{marginBottom:'0px'}}
+                        style={{ marginBottom: '0px' }}
                       >
-                        {item.render ? (
-                          item.render()
-                        ) : (
-                          h(componentConfig[item.type as EComponenetType], {
-                            modelValue: searchForm[item.prop],
-                            'onUpdate:modelValue': (value: unknown) => {
-                              searchForm[item.prop] = value
-                            },
-                            ...getComponentAttrs(item),
-                            style: { width: `${componentWidth.value}px` }
-                          })
-                        )}
+                        {item.render
+                          ? item.render()
+                          : h(componentConfig[item.type as EComponenetType], {
+                              modelValue: searchForm.value[item.prop],
+                              'onUpdate:modelValue': (value: unknown) => {
+                                searchForm.value[item.prop] = value
+                              },
+
+                              ...getComponentAttrs(item),
+                              style: { width: `${componentWidth.value}px` },
+                            })}
                       </ElFormItem>
                     ))}
                   </div>
@@ -207,21 +196,28 @@ export default defineComponent({
           )}
           <div style={{ display: 'flex', alignItems: 'center' }}>
             {props.isSearchBtn && (
-              <ElButton class="btn" type="primary" onClick={searchFn}>
+              <ElButton
+                class="btn"
+                type="primary"
+                onClick={() => emit('search', searchForm.value)}
+              >
                 查询
               </ElButton>
             )}
             {props.isResetBtn && (
-              <ElButton class="btn" onClick={resetFn}>
+              <ElButton
+                class="btn"
+                onClick={() => {
+                  formRef.value?.resetFields()
+                  // emit('update:modelValue', {})
+                  emit('reset')
+                }}
+              >
                 重置
               </ElButton>
             )}
             {props.isAddBtn && (
-              <ElButton
-                class="btn"
-                type="success"
-                onClick={() => emit('headerPrimaryBtn')}
-              >
+              <ElButton class="btn" type="success" onClick={() => emit('add')}>
                 新增
               </ElButton>
             )}
@@ -229,7 +225,7 @@ export default defineComponent({
               <ElButton
                 class="btn"
                 type="danger"
-                onClick={() => emit('headerDefaultBtn')}
+                onClick={() => emit('delete')}
               >
                 删除
               </ElButton>
@@ -239,5 +235,5 @@ export default defineComponent({
         </div>
       </div>
     )
-  }
-}) 
\ No newline at end of file
+  },
+})

src/components/SearchForm.vue

-<!--
-  配置说明：
-  hasHeader 控制是否使用头部额外的区域
-  插槽  header-content  头部内容区域
-  插槽  header-btn  头部左侧按钮区域 默认: 新增、导出按钮
-  新增按钮事件: @headerPrimaryBtn
-  导出按钮事件：@headerDefaultBtn
-
-  搜索事件： @search    接收一个搜索对象
-  重置事件： @reset     接收一个空对象
-  折叠事件： @fold      接收一个布尔值  true折叠  false 展开
-
-  表单组件类型：
-    input 普通输入框
-    amountInput 金额输入框
-    dateRangePicker 时间范围选择器
-    datePicker 单个日期选择器
-    select 普通下拉选择框
-
-
-  必传属性：
-    prop 字段名称
-    type 表单组件类型
-    label 该项标题名称
-  可选属性：
-    defaultValue 设置初始默认值  v-model传入的时候是无效的，用户可以自行设置默认值
-    attrs 表单组件的配置属性
-          表单组件 input 可以配置el-input 的属性 如：placeholder
-          注意：amountRangeInput 不要设置attrs 属性配置对象
-                selectV2 和 select 必须要在attrs 中传递一个 options 选项数组
-                selectV2 和 select 还有三个可选选项：
-                    hasAllOptions  在选项第一个，配置一个全部选项 true为使用，默认为false
-                    value  为选项值的字段名称 默认字段名称为 'value'
-                    label  为选项描述的字段名称 默认字段名称为 'label'
-                ** 注意：select的options也可以通过组件属性的形式进行传入，字段名称为prop+options 的字符串，
-                    如果options是异步的，推荐作为组件的属性进行传入，第一因为响应式数据的更新通过组件的属性会自动传给子组件，
-                    二是可以避免因为频繁修改配置文件中的值而导致组件被重复渲染。
-
-  ** 可以通过v-model传递一个对象，但是不太推荐，因为即时使用了v-model还是需要指明配置对应的prop，否则prop为undefined
--->
-<template>
-  <div class="searchForm">
-    <div class="searchForm-header pb-15">
-      <slot v-if="$slots['header-content']" name="header-content"></slot>
-      <template v-else>
-        <div class="wrapper mt-15">
-          <el-form
-            v-bind="getFormAttrs"
-            ref="formRef"
-            class="w-full"
-            inline
-            :model="searchForm"
-            label-position="left"
-            :size="props.size"
-            @submit.prevent
-          >
-            <div ref="formWrapperRef" class="formItemWrapper w-full">
-              <div class="mt--18 flex align-center flex-wrap">
-                <el-form-item
-                  v-for="(item, index) in selectResult"
-                  :key="index"
-                  ref="formItemRef"
-                  :prop="item.prop"
-                  :label="item.label"
-                >
-                  <template v-if="item.render">
-                    {{ item.render() }}
-                  </template>
-                  <template v-else>
-                    <component
-                      :is="getConfigComponent(item.type)"
-                      v-model="searchForm[item.prop]"
-                      v-bind="{
-                        ...getComponentAttrs(item),
-                      }"
-                      :style="`width: ${componentWidth}px`"
-                    />
-                  </template>
-                </el-form-item>
-              </div>
-            </div>
-          </el-form>
-        </div>
-      </template>
-      <div class="flex align-center">
-        <el-button
-          v-if="isSearchBtn"
-          class="btn"
-          type="primary"
-          @click="searchFn"
-        >
-          查询
-        </el-button>
-        <el-button v-if="isResetBtn" class="btn" @click="searchFn">
-          重置
-        </el-button>
-        <el-button
-          v-if="isDeleteBtn"
-          class="btn"
-          type="success"
-          @click="searchFn"
-        >
-          新增
-        </el-button>
-        <el-button v-if="deleteBtn" class="btn" type="danger" @click="searchFn">
-          删除
-        </el-button>
-      </div>
-      <slot name="ontherBtn"></slot>
-    </div>
-  </div>
-</template>
-<script setup lang="tsx" name="SearchForm">
-import AmountInput from './Form.vue/AmountInput.vue' // 金额输入框
-import DateRangePicker from './Form.vue/DateRangePicker.vue' // 时间范围选择器
-import DatePicker from './Form.vue/DatePicker.vue' // 单个日期选择器
-import Select from './Form.vue/Select.vue' // 普通下拉选择框
-
-import { ElInput } from 'element-plus'
-
-const attrs = useAttrs()
-
-import {
-  ISearchForm,
-  EComponenetType,
-  ISeachFormConfig,
-  EDataType,
-} from '@/types/searchType.ts'
-
-import { IConfig } from '@/components/TenantTable/types/index'
-
-defineOptions({
-  name: 'SearchForm',
-  inheritAttrs: false,
-})
-
-// 组件 - 数据类型 映射
-const componentDataTypeMap = new Map([
-  [EComponenetType.amountInput, EDataType.string],
-  [EComponenetType.input, EDataType.string],
-  [EComponenetType.dateRangePicker, EDataType.array],
-  [EComponenetType.datePicker, EDataType.string],
-  [EComponenetType.select, EDataType.undefined],
-])
-
-const props = withDefaults(
-  defineProps<{
-    config: Array<ISeachFormConfig>
-    labelWidth?: string | number
-    modelValue?: ISearchForm
-    getTablelist?: (...args: any[]) => Promise<any>
-    size?: 'large' | 'default' | 'small'
-    addPermissionName?: string | Array<string> // 新增按钮的权限名称
-    additionalConfig?: Array<IConfig>
-    isSearchBtn?: boolean
-    isResetBtn?: boolean
-    isAddBtn?: boolean
-    isDeleteBtn?: boolean
-  }>(),
-  {
-    config: () => [],
-    labelWidth: 58,
-    modelValue: () => ({} as ISearchForm),
-    getTablelist: null,
-    size: 'default',
-    addPermissionName: '',
-    additionalConfig: null,
-    isSearchBtn: true,
-    isResetBtn: true,
-    isAddBtn: true,
-    isDeleteBtn: true,
-  },
-)
-
-// 获取组件
-const getConfigComponent = (type: string) => {
-  const component = componentConfig[type]
-  if (component) {
-    return component
-  } else {
-    return null
-  }
-}
-
-const searchForm = reactive(props.modelValue || {})
-const selectResult = ref([])
-const componentWidth = props.size === 'default' ? 200 : 220 // 组件宽度
-
-selectResult.value = props.config
-const componentConfig = {
-  amountInput: AmountInput,
-  input: ElInput,
-  dateRangePicker: DateRangePicker,
-  datePicker: DatePicker,
-  select: Select,
-}
-
-function initSeachForm() {
-  props.config.forEach((item, index) => {
-    if (componentDataTypeMap.has(item.type as EComponenetType)) {
-      const prop = item.prop || `value${index}`
-      if (!item.prop) {
-        item.prop = prop
-      }
-    }
-  })
-}
-
-watch(
-  () => props.config,
-  (val) => {
-    if (val.length) {
-      initSeachForm()
-    }
-  },
-  {
-    immediate: true,
-  },
-)
-
-// 获取form表单的属性
-const getFormAttrs = computed(() => {
-  const paramsAttrs = {
-    ...attrs,
-  }
-  return paramsAttrs
-})
-
-function searchFn(params) {}
-// 获取组件项传进来的attrs
-const getComponentAttrs = (item: ISeachFormConfig) => {
-  const params = item.attrs
-    ? {
-        ...item.attrs,
-      }
-    : {}
-
-  return Object.assign({}, params)
-}
-
-const emits = defineEmits<{
-  (e: 'search', data: ISearchForm)
-  (e: 'reset', dataL: ISearchForm)
-  (e: 'fold', data: boolean)
-
-  (e: 'headerPrimaryBtn') // 头部新增按钮
-  (e: 'headerDefaultBtn', data, data2, searchData) // 头部导出按钮
-
-  (e: 'update:modelValue', data: ISearchForm)
-  (e: 'clear', data: ISearchForm) // 点击clearable触发的
-
-  (e: 'update:tableFieldForm', data: ISearchForm)
-  (e: 'getExcelData', data) // 头部新增按钮
-}>()
-</script>
-
-<style lang="scss" scoped>
-.ml-12 {
-  margin-left: 12px;
-}
-
-.searchForm {
-  position: relative;
-
-  &-header {
-    display: flex;
-  }
-
-  .filterBtn {
-    // position: absolute;
-    // top: -15px;
-    // z-index: 100;
-  }
-}
-
-.setTableFields {
-  margin-left: 12px;
-}
-
-.wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.handle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  margin-left: 10px;
-
-  // width: 32px;
-  // height: 32px;
-  & > div {
-    display: flex;
-    align-items: center;
-  }
-
-  .filterBtn {
-    &:hover {
-      opacity: 0.6;
-    }
-  }
-}
-
-// .el-form--inline {
-//   .el-form-item {
-//     & > .el-input, .el-select {
-//       width: v-bind(componentWidth)px;
-//     }
-//   }
-// }
-</style>

src/components/VxeTable.tsx

+import { VNode } from 'vue'
+
+
+interface ColumnAttrs {
+  field?: string
+  title?: string
+  width?: string | number
+  [key: string]: unknown
+}
+
+interface TableColumn {
+  prop: string
+  label: string
+  attrs?: ColumnAttrs
+  render?: {
+    edit?: (params: { row: TableRowData }) => VNode | JSX.Element
+    default?: (params: { row: TableRowData }) => VNode | JSX.Element
+    [key: string]:
+      | ((params: { row: TableRowData }) => VNode | JSX.Element)
+      | undefined
+  }
+}
+
+interface TableRowData {
+  [key: string]: unknown
+}
+
+type SlotFunction = (scope: { row: TableRowData }) => VNode | JSX.Element
+
+export default defineComponent({
+  name: 'CustomizeTable',
+  props: {
+    config: {
+      type: Array as PropType<TableColumn[]>,
+      default: () => [],
+    },
+    tableEditConfig: {
+      type: Object,
+      default: () => ({}),
+    },
+    modelValue: {
+      type: Object,
+      default: () => ({}),
+    },
+    getTablelist: {
+      type: Function as PropType<(...args: unknown[]) => Promise<unknown>>,
+      default: null,
+    },
+    isShowCheckBox: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['update:modelValue', 'checkbox-change', 'getCheckboxRecords'],
+  setup(props, { emit ,attrs}) {
+    const tableRef = ref(null)
+    const tableData = ref<Record<string, unknown>[]>([])
+    const tableColumns = ref<TableColumn[]>([])
+    const editConfig = computed(() => {
+      return {
+        trigger: 'dblclick',
+        mode: 'cell',
+        enabled: false,
+        ...props.tableEditConfig,
+      }
+    })
+
+    watch(
+      () => props.config,
+      (val) => {
+        if (val?.length) {
+          tableColumns.value = val
+        }
+      },
+      {
+        immediate: true,
+      },
+    )
+    watch(
+      () => props.modelValue,
+      (val) => {
+    
+          tableData.value = Array.isArray(val) ? val : []
+        
+      },
+      {
+        immediate: true,
+      },
+    )
+
+    async function getList() {
+      if (props.getTablelist) {
+        try {
+          const data = await props.getTablelist()
+          console.log(78, data)
+        } catch (error) {
+          console.log(error)
+        }
+      }
+    }
+
+    const getSelectEvent = () => {
+      const $table = tableRef.value
+      if ($table) {
+        const selectRecords = $table.getCheckboxRecords()
+        emit('getCheckboxRecords', selectRecords)
+      }
+    }
+
+    onMounted(() => {
+      getList()
+    })
+
+    return {
+      tableRef,
+      tableData,
+      tableColumns,
+      editConfig,
+      getSelectEvent,attrs
+    }
+  },
+  render() {
+    return (
+     
+        <vxe-table
+          ref={(el) => this.tableRef = el}
+          data={this.tableData}
+          height='100%'
+          
+          edit-config={this.editConfig}
+          onCheckboxChange={this.getSelectEvent}
+          onCheckboxAll={this.getSelectEvent}
+          {...this.attrs}
+        >
+          {this.isShowCheckBox && (
+            <vxe-column type="checkbox" width="50" align="center"></vxe-column>
+          )}
+
+          <vxe-column align="center" type="seq" width="50" title="序号" />
+          {this.tableColumns.map((item: TableColumn, index: number) => (
+            <vxe-column
+              key={index}
+              field={item.prop}
+              title={item.label}
+              {...item.attrs}
+              edit-render={{}}
+            >
+              {{
+                ...(() => {
+                  // 创建基础插槽配置
+                  const slots: Record<string, SlotFunction> = {
+                    // 默认的 default 插槽实现
+                    default: ({ row }) => <span>{row[item.prop]}</span>,
+                  }
+
+                  if (item.render) {
+                    // 添加所有自定义插槽
+                    Object.entries(item.render).forEach(
+                      ([slotName, renderFn]) => {
+                        if (renderFn) {
+                          slots[slotName] = (scope: { row: TableRowData }) =>
+                            renderFn(scope)
+                        }
+                      },
+                    )
+                  }
+
+                  return slots
+                })(),
+              }}
+            </vxe-column>
+          ))}
+        </vxe-table>
+     
+    )
+  },
+})

src/main.ts

@@ -4,7 +4,16 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import './styles/index.scss'
+
+import VxeUITable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
 // 确保在渲染用户提供的HTML内容时，不会执行任何潜在的恶意脚本，从而提高应用的安全性
 import vueDomPurifyHTMLPlugin from 'vue-dompurify-html'
 
-createApp(App).use(vueDomPurifyHTMLPlugin).use(router).use(store).mount('#app')
+createApp(App)
+  .use(vueDomPurifyHTMLPlugin)
+  .use(router)
+  .use(store)
+  .use(VxeUITable)
+  .mount('#app')

src/router/index.ts

@@ -157,17 +157,25 @@ const router = createRouter({
         {
           path: '/logistics/logisticsMethod',
           meta: {
-            title: '物流公司',
+            title: '物流方式',
           },
           component: () => import('@/views/logistics/logisticsMethod.vue'),
         },
         {
-          path:  '/logistics/logisticsCompany',
+          path: '/logistics/shippingAddress',
           meta: {
-            title: '物流方式',
+            title: '发货地址',
+          },
+          component: () => import('@/views/logistics/shippingAddress.vue'),
+        },
+        {
+          path: '/logistics/logisticsQuotation',
+          meta: {
+            title: '物流报价',
           },
-           component: () => import('@/views/logistics/logisticsCompany.vue'),
+          component: () => import('@/views/logistics/logisticsQuotation.vue'),
         },
+      
       ],
     },
     // 登录

src/router/menu.ts

@@ -135,10 +135,16 @@ const menu: MenuItem[] = [
         label: '物流方式',
       },
       {
-        index: '/logistics/logisticsCompany',
-        id: 2,
-        label: '物流公司',
+        index: '/logistics/shippingAddress',
+        id: 1,
+        label: '发货地址',
+      },
+      {
+        index: '/logistics/logisticsQuotation',
+        id: 1,
+        label: '物流报价',
       },
+
     ],
   },
   // {

src/types/api/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
+}
+
+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
+}
+
+interface platformObj {
+  platform: string
+  logisticsName: string | number
+  showPlatform: (string | number)[]
+}
+interface ruleRefObj {
+  ruleId: string | number
+  ruleName: string | number
+}

src/utils/hooks/usePageList.ts

@@ -44,6 +44,7 @@ export default function usePageList<T>(options: UsePageListOptions<T>) {
         pageSize.value = res.size
         data.value = res.records
       }
+      console.log(7, data.value)
     } catch (error) {
       console.error(error)
       // showError(error)

src/views/logistics/components/LogDialog.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(null)
+    const isShow = ref(false)
+    watch(
+      () => props.modelValue,
+      (val) => {
+        isShow.value = val
+      },
+      { immediate: true },
+    )
+
+    return () => {
+      return (
+        <ElDialog
+          ref={(el) => (formRef.value = el)}
+          v-model={isShow.value}
+          title={props.title}
+          width={props.dialogWidth}
+          onClose={() => {
+            emit('close')
+          }}
+          close-on-click-modal={false}
+          {...attrs}
+        >
+          <div class="dialog-form">
+            {slots.default?.()}
+            {slots.footer?.()}
+          </div>
+        </ElDialog>
+      )
+    }
+  },
+})

src/views/logistics/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/logistics/types/logisticsQuotation.ts

+export interface LogisticsQuotation {
+  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
+}

vite.config.ts

-
 import { defineConfig } from 'vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'