申报规则页面完成

src/api/logistics.ts

@@ -49,7 +49,6 @@ export function deleteLogisticsWay(ids: string) {
     params: { ids: ids },
     params: { ids: ids },
   })
   })
 }
 }
-
 //获取申报规则列表
 //获取申报规则列表
 export function getRuleList() {
 export function getRuleList() {
   return axios.get<never, BaseRespData<never>>(
   return axios.get<never, BaseRespData<never>>(
@@ -163,3 +162,34 @@ export function getLogisticsQuotationByID(params: any) {
     { params },
     { params },
   )
   )
 }
 }
+
+/**
+ * @description 申报规则
+ */
+//列表
+export function getLogisticsCustomsRuleList(params: any) {
+  return axios.post<never, BaseRespData<never>>(
+    '/logisticsCustomsRule/list_page',
+    params,
+  )
+}
+//新增
+export function addLogisticsCustomsRule(params: any) {
+  return axios.post<never, BaseRespData<never>>(
+    '/logisticsCustomsRule/add',
+    params,
+  )
+}
+//修改
+export function updateLogisticsCustomsRule(params: any) {
+  return axios.post<never, BaseRespData<never>>(
+    '/logisticsCustomsRule/update',
+    params,
+  )
+}
+//删除
+export function deleteLogisticsCustomsRule(params: any) {
+  return axios.get<never, BaseRespData<never>>('/logisticsCustomsRule/delete', {
+    params,
+  })
+}

src/components/CustomizeForm.tsx

@@ -13,12 +13,14 @@ import type { FormItemRule } from 'element-plus'
 
 
 // 定义表单项配置接口
 // 定义表单项配置接口
 export interface IFormConfig {
 export interface IFormConfig {
+  fixed?: string
   title?: string
   title?: string
   prop?: string
   prop?: string
   label?: string
   label?: string
   type?: string
   type?: string
   btn?: JSX.Element | (() => JSX.Element)
   btn?: JSX.Element | (() => JSX.Element)
   attrs?: Record<string, unknown>
   attrs?: Record<string, unknown>
+  isIncludeProp?: boolean
   rules?: FormItemRule | FormItemRule[]
   rules?: FormItemRule | FormItemRule[]
   render?: (
   render?: (
     item?: IFormConfig,
     item?: IFormConfig,
@@ -77,7 +79,15 @@ export default defineComponent({
   setup(props, { emit, attrs }) {
   setup(props, { emit, attrs }) {
     const formRef = ref<FormInstance>()
     const formRef = ref<FormInstance>()
     const formData = ref<Record<string, unknown>>(props.modelValue)
     const formData = ref<Record<string, unknown>>(props.modelValue)
+    const tableConfig = ref<any[]>([])
 
 
+    watch(
+      () => props.config,
+      (val) => {
+        tableConfig.value = val
+      },
+      { immediate: true, deep: true },
+    )
     // 监听表单数据变化
     // 监听表单数据变化
     watch(
     watch(
       () => formData.value,
       () => formData.value,
@@ -91,7 +101,7 @@ export default defineComponent({
     watch(
     watch(
       () => props.modelValue,
       () => props.modelValue,
       (val) => {
       (val) => {
-        // console.log(84, val)
+        console.log(84, val)
 
 
         formData.value = val
         formData.value = val
       },
       },
@@ -120,6 +130,22 @@ export default defineComponent({
       await formRef.value?.resetFields()
       await formRef.value?.resetFields()
     }
     }
 
 
+    function refashConfig(showFields: string[]) {
+      if (showFields.length) {
+        const filterArr = props.config.filter((item) =>
+          showFields.includes(item.prop as string),
+        )
+
+        tableConfig.value = [
+          ...props.config.filter((item) => !item.isIncludeProp),
+          ...filterArr,
+        ]
+          .filter((item) => !item.fixed)
+          .concat(tableConfig.value.filter((item) => item.fixed))
+      }
+      console.log('tableConfig', tableConfig.value)
+    }
+
     return {
     return {
       formRef,
       formRef,
       formData,
       formData,
@@ -127,6 +153,8 @@ export default defineComponent({
       resetFields,
       resetFields,
       getFormAttrs,
       getFormAttrs,
       getComponentAttrs,
       getComponentAttrs,
+      refashConfig,
+      tableConfig,
     }
     }
   },
   },
   render() {
   render() {
@@ -142,7 +170,7 @@ export default defineComponent({
         style={{ display: 'flex', flexWrap: 'wrap' }}
         style={{ display: 'flex', flexWrap: 'wrap' }}
         class="customForm"
         class="customForm"
       >
       >
-        {this.config.map((item, index) =>
+        {this.tableConfig.map((item, index) =>
           item.title ? (
           item.title ? (
             <div
             <div
               style={{
               style={{

src/components/Form.vue/Select.vue

@@ -36,6 +36,7 @@ const props = withDefaults(
     initChange?: boolean // 首次是否触发change事件
     initChange?: boolean // 首次是否触发change事件
     modelValue?: string | number
     modelValue?: string | number
     isRefresh?: boolean
     isRefresh?: boolean
+    isValueKey?: boolean
     load?: (arg: (val: boolean) => void) => void // focus后再加载数据的
     load?: (arg: (val: boolean) => void) => void // focus后再加载数据的
   }>(),
   }>(),
   {
   {
@@ -48,6 +49,7 @@ const props = withDefaults(
     modelValue: '',
     modelValue: '',
     isRefresh: false,
     isRefresh: false,
     load: null,
     load: null,
+    isValueKey: false,
   },
   },
 )
 )
 
 
@@ -91,6 +93,7 @@ const getOptions = computed(() => {
 const changeFn = (id) => {
 const changeFn = (id) => {
   const value = props.labelIsValue ? fields.label : fields.value
   const value = props.labelIsValue ? fields.label : fields.value
   const findItem = props.options.find((item) => item[value] === id)
   const findItem = props.options.find((item) => item[value] === id)
+
   if (findItem) {
   if (findItem) {
     emits('change', findItem, id)
     emits('change', findItem, id)
   }
   }

src/router/index.ts

@@ -176,6 +176,49 @@ const router = createRouter({
           component: () => import('@/views/logistics/logisticsQuotation.vue'),
           component: () => import('@/views/logistics/logisticsQuotation.vue'),
         },
         },
       
       
+        {
+          path: '/logistics/declarationRule',
+          meta: {
+            title: '申报规则',
+          },
+          component: () => import('@/views/logistics/declarationRule.vue'),
+        },
+
+        {
+          path: '/warehouse/manage',
+          meta: {
+            title: '仓库管理',
+          },
+          component: WarehouseManage,
+        },
+        {
+          path: '/warehouse/receipt-doc',
+          meta: {
+            title: '入库单',
+          },
+          component: receiptDoc,
+        },
+        {
+          path: '/warehouse/issue-doc',
+          meta: {
+            title: '出库单',
+          },
+          component: issueDoc,
+        },
+        {
+          path: '/warehouse/warning',
+          meta: {
+            title: '仓库预警',
+          },
+          component: WarehouseWarning,
+        },
+        {
+          path: '/warehouse/position',
+          meta: {
+            title: '库位管理',
+          },
+          component: WarehousePosition,
+        },
       ],
       ],
     },
     },
     // 登录
     // 登录

src/router/menu.ts

@@ -144,7 +144,11 @@ const menu: MenuItem[] = [
         id: 1,
         id: 1,
         label: '物流报价',
         label: '物流报价',
       },
       },
-
+      {
+        index: '/logistics/declarationRule',
+        id: 1,
+        label: '申报规则',
+      },
     ],
     ],
   },
   },
   // {
   // {

src/views/logistics/declarationRule.vue

+<template>
+  <div class="user-page flex-column card h-100 overflow-hidden">
+    <div class="header-filter-form">
+      <SearchForm
+        :config="searchConfig"
+        @search="search"
+        @add="addDialog"
+        @delete="deleteFn"
+        v-model="searchForm"
+      ></SearchForm>
+    </div>
+    <div class="user-content flex-1 flex-column overflow-hidden">
+      <div class="user-list flex-1 overflow-hidden" v-loading="loading">
+        <CustomizeTable
+          v-model="tableData"
+          :config="tableConfig"
+          @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>
+
+  <LogDialog
+    :title="editForm.id ? '编辑申报规则' : '新增申报规则'"
+    dialogWidth="1000px"
+    v-model="dialogVisible"
+    @close="cancelFn"
+  >
+    <CustomizeForm
+      ref="editFormRef"
+      v-model="editForm"
+      :config="formConfig"
+      formItemWidth="100%"
+      :labelWidth="120"
+    >
+    </CustomizeForm>
+
+    <template #footer>
+      <div style="text-align: center">
+        <ElButton @click="cancelFn">取消</ElButton>
+
+        <ElButton type="primary" @click="save">保存</ElButton>
+      </div>
+    </template>
+  </LogDialog>
+  <LogDialog
+    title="操作日志"
+    v-model="logDialogVisible"
+    @close="logDialogVisible = false"
+  >
+    <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>
+</template>
+
+<script setup lang="tsx">
+import {
+  getLogisticsCustomsRuleList,
+  addLogisticsCustomsRule,
+  updateLogisticsCustomsRule,
+  deleteLogisticsCustomsRule,
+  getLogisticsLog,
+} from '@/api/logistics'
+import type { LogisticsMethod } from '@/types/api/logistics'
+import SearchForm from '@/components/SearchForm.tsx'
+import LogDialog from './components/LogDialog.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 {
+  DeclarationRuleList,
+  AddDeclarationRuleObj,
+} from './types/declarationRule'
+import { Edit, Delete, List } from '@element-plus/icons-vue'
+
+const [searchForm] = useValue({})
+const [editForm, resetEditForm] = useValue<AddDeclarationRuleObj>({ type: 1 })
+const {
+  currentPage,
+  pageSize,
+  total,
+  data: tableData,
+  refresh: search,
+  onCurrentPageChange: handleCurrentChange,
+  onPageSizeChange: handleSizeChange,
+} = usePageList({
+  query: (page, pageSize) =>
+    getLogisticsCustomsRuleList({
+      ...searchForm.value,
+      pageSize: pageSize,
+      currentPage: page,
+    }).then(({ data }) => {
+      console.log(130, data)
+      return data
+    }),
+})
+const dialogVisible = ref(false)
+const logDialogVisible = ref(false)
+const editFormRef = ref(null)
+const selection = ref([])
+const searchConfig = ref([
+  {
+    prop: 'name',
+    type: 'input',
+    label: '规则名称',
+
+    attrs: {
+      placeholder: '请输入规则名称',
+    },
+  },
+])
+const platformList = ref([])
+
+const mapData = ref(new Map<number, string[]>())
+mapData.value.set(1, ['fixedValue', 'fixedWeight'])
+mapData.value.set(2, ['orderPercent', 'valueUp', 'weightPercent', 'weightUp'])
+
+const formConfig = ref<IFormConfig[]>([
+  {
+    prop: 'name',
+    type: 'input',
+    label: '规则名称',
+    attrs: {
+      placeholder: '请输入规则名称',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入规则名称',
+      },
+    ],
+  },
+  {
+    prop: 'currency',
+    type: 'select',
+    label: '申报币种',
+    attrs: {
+      placeholder: '请选择申报币种',
+      options: [{ label: 'USD', value: 'USD' }],
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择申报币种',
+      },
+    ],
+  },
+  {
+    prop: 'type',
+    type: 'select',
+    label: '申报类型',
+    attrs: {
+      placeholder: '请选择申报类型',
+
+      options: [
+        { label: '固定', value: 1 },
+        { label: '比例', value: 2 },
+      ],
+      onChange: (item, value) => {
+        if (value === 2) {
+          editForm.value.fixedValue = ''
+          editForm.value.fixedWeight = ''
+        } else {
+          editForm.value.orderPercent = ''
+          editForm.value.valueUp = ''
+          editForm.value.weightPercent = ''
+          editForm.value.weightUp = ''
+        }
+        editFormRef.value?.refashConfig(mapData.value.get(value) as string[])
+        editFormRef.value?.validate()
+      },
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择申报类型',
+      },
+    ],
+  },
+  {
+    prop: 'fixedValue',
+    type: 'amountInput',
+    label: '固定金额',
+    isIncludeProp: true,
+    attrs: {
+      placeholder: '请输入固定金额',
+      hasSuffix: true,
+      suffix: 'USD',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入固定金额',
+      },
+    ],
+  },
+  {
+    prop: 'fixedWeight',
+    type: 'amountInput',
+    label: '固定重量',
+    isIncludeProp: true,
+    attrs: {
+      placeholder: '请输入固定重量',
+      hasSuffix: true,
+      suffix: 'g',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入固定重量',
+      },
+    ],
+  },
+  {
+    prop: 'orderPercent',
+    type: 'amountInput',
+    label: '金额百分比',
+    isIncludeProp: true,
+    attrs: {
+      placeholder: '请输入金额百分比',
+      hasSuffix: true,
+      suffix: '%',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入金额百分比',
+      },
+    ],
+  },
+
+  {
+    prop: 'valueUp',
+    type: 'amountInput',
+    label: '申报价值上限',
+    isIncludeProp: true,
+    attrs: {
+      placeholder: '请输入申报价值上限',
+      hasSuffix: true,
+      suffix: 'USD',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入申报价值上限',
+      },
+    ],
+  },
+  {
+    prop: 'weightPercent',
+    type: 'amountInput',
+    label: '重量百分比',
+    isIncludeProp: true,
+    attrs: {
+      placeholder: '请输入重量百分比',
+      hasSuffix: true,
+      suffix: '%',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入重量百分比',
+      },
+    ],
+  },
+  {
+    prop: 'weightUp',
+    type: 'amountInput',
+    label: '申报重量上限',
+    isIncludeProp: true,
+    attrs: {
+      placeholder: '请输入申报重量上限',
+      hasSuffix: true,
+      suffix: 'g',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入申报重量上限',
+      },
+    ],
+  },
+  {
+    prop: 'remark',
+    type: 'input',
+    label: '备注',
+    fixed: 'last',
+    attrs: {
+      placeholder: '请输入备注',
+      type: 'textarea',
+      rows: 4,
+    },
+  },
+])
+
+const tableConfig = ref([
+  {
+    prop: 'name',
+    label: '规则名称',
+  },
+  {
+    prop: 'currency',
+    label: '申报币种',
+  },
+
+  {
+    prop: 'type',
+    label: '申报类型',
+  },
+  {
+    prop: 'fixedValue',
+    label: '固定金额',
+  },
+  {
+    prop: 'fixedWeight',
+    label: '固定重量',
+  },
+  {
+    prop: 'orderPercent',
+    label: '订单总金额百分比',
+  },
+  {
+    prop: 'valueUp',
+    label: '申报价值上限',
+  },
+  {
+    prop: 'weightPercent',
+    label: '按原订单报关重量',
+  },
+  {
+    prop: 'weightUp',
+    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={() => editRule(row)}
+          >
+            <Edit />
+          </el-icon>
+          <el-icon
+            size="24"
+            title="删除"
+            color="#f56c6c"
+            style="cursor: pointer; vertical-align: middle"
+            onclick={() => deleteRule(row)}
+          >
+            <Delete />
+          </el-icon>
+          <el-icon
+            size="24"
+            title="日志"
+            color="#008aff"
+            style="cursor: pointer; vertical-align: middle"
+            onclick={() => showLog(row)}
+          >
+            <List />
+          </el-icon>
+        </div>
+      ),
+    },
+  },
+])
+
+onMounted(() => {
+  // getAllList()
+})
+
+const loading = ref(false)
+
+function cancelFn() {
+  dialogVisible.value = false
+  editFormRef.value?.resetFields()
+  resetEditForm()
+}
+
+async function editRule(item: AddDeclarationRuleObj) {
+  try {
+    editForm.value = { ...item }
+    dialogVisible.value = true
+    nextTick(() => {
+      editFormRef.value?.refashConfig(mapData.value.get(item.type) as string[])
+    })
+    console.log(493, editForm.value)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+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<LogisticsMethod>((resolve) => {
+      const params = { ...editForm.value }
+
+      resolve(params)
+    }),
+  ])
+  console.log(isValid, postData)
+
+  return { isValid, postData }
+}
+
+async function save() {
+  const { isValid, postData } = await checkData()
+  if (isValid) {
+    try {
+      if (!postData.id) {
+        await addLogisticsCustomsRule({
+          ...postData,
+        })
+      } else {
+        await updateLogisticsCustomsRule({
+          ...postData,
+        })
+      }
+      ElMessage({
+        message: '保存成功',
+        type: 'success',
+        offset: window.innerHeight / 2,
+      })
+
+      cancelFn()
+      search()
+    } catch (e) {
+      return
+    }
+  }
+}
+function addDialog() {
+  dialogVisible.value = true
+  nextTick(() => {
+    console.log(999)
+    editFormRef.value?.refashConfig(mapData.value.get(1))
+  })
+}
+
+function handleCheckboxRecords(value: never[]) {
+  console.log(351, value)
+  selection.value = value
+}
+
+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) => item.id).join(',') }
+    await deleteLogisticsCustomsRule(ids)
+    ElMessage({
+      message: '删除成功',
+      type: 'success',
+    })
+    search()
+  } catch (e) {
+    search()
+    // showError(e)
+  }
+}
+async function deleteRule(item) {
+  try {
+    await showConfirm('是否删除物流方式', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+  } catch {
+    return
+  }
+  try {
+    const ids = { ids: [item.id].join(',') }
+    await deleteLogisticsCustomsRule(ids)
+    ElMessage({
+      message: '删除成功',
+      type: 'success',
+    })
+    search()
+  } catch (e) {
+    search()
+    // showError(e)
+  }
+}
+
+// async function getAllList() {
+//   try {
+//     const res = await Promise.all([
+//       getWarehouseList(),
+//       getRuleList(),
+//       getPlatformList(),
+//     ])
+//     res.forEach((item, index) => {
+//       if (item.code === 200) {
+//         if (index == 0) {
+//           warehouseList.value = item.data
+//         } else if (index == 1) {
+//           ruleNameList.value = item.data || []
+//         } else if (index == 2) {
+//           platformList.value = item.data
+//         }
+//       }
+//     })
+//     if (
+//       formConfig.value[2] &&
+//       formConfig.value[3] &&
+//       'attrs' in formConfig.value[2]
+//     ) {
+//       // 非空断言强制类型
+//       ;(formConfig.value[2]!.attrs as Record<string, any>).options = [
+//         ...warehouseList.value,
+//       ]
+//       ;(formConfig.value[3]!.attrs as Record<string, any>).options = [
+//         ...ruleNameList.value,
+//       ]
+//     }
+
+//     console.log(545, res)
+//   } catch (error) {
+//     console.log(error)
+//   }
+// }
+
+const logList = ref([])
+async function showLog(row) {
+  logDialogVisible.value = true
+  try {
+    const { data } = await getLogisticsLog({
+      logType: 'logistics_way',
+      relaId: row.id,
+    })
+    logList.value = data
+  } catch (error) {
+    console.log(error)
+  }
+}
+</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/logistics/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
+}