Skip to content

F
factory_front
Commit 5003fd35 by linjinhong
Options

申报规则页面完成

parent 6a0c26ab
Showing with 720 additions and 5 deletions
src/api/logistics.ts
......@@ -49,7 +49,6 @@ export function deleteLogisticsWay(ids: string) {
params: { ids: ids },
})
}
//获取申报规则列表
export function getRuleList() {
return axios.get<never, BaseRespData<never>>(
......@@ -163,3 +162,34 @@ export function getLogisticsQuotationByID(params: any) {
{ 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 {
fixed?: string
title?: string
prop?: string
label?: string
type?: string
btn?: JSX.Element | (() => JSX.Element)
attrs?: Record<string, unknown>
isIncludeProp?: boolean
rules?: FormItemRule | FormItemRule[]
render?: (
item?: IFormConfig,
......@@ -77,7 +79,15 @@ export default defineComponent({
setup(props, { emit, attrs }) {
const formRef = ref<FormInstance>()
const formData = ref<Record<string, unknown>>(props.modelValue)
const tableConfig = ref<any[]>([])
watch(
() => props.config,
(val) => {
tableConfig.value = val
},
{ immediate: true, deep: true },
)
// 监听表单数据变化
watch(
() => formData.value,
......@@ -91,7 +101,7 @@ export default defineComponent({
watch(
() => props.modelValue,
(val) => {
// console.log(84, val)
console.log(84, val)
formData.value = val
},
......@@ -120,6 +130,22 @@ export default defineComponent({
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 {
formRef,
formData,
......@@ -127,6 +153,8 @@ export default defineComponent({
resetFields,
getFormAttrs,
getComponentAttrs,
refashConfig,
tableConfig,
}
},
render() {
......@@ -142,7 +170,7 @@ export default defineComponent({
style={{ display: 'flex', flexWrap: 'wrap' }}
class="customForm"
>
{this.config.map((item, index) =>
{this.tableConfig.map((item, index) =>
item.title ? (
<div
style={{
......
src/components/Form.vue/Select.vue
......@@ -36,6 +36,7 @@ const props = withDefaults(
initChange?: boolean // 首次是否触发change事件
modelValue?: string | number
isRefresh?: boolean
isValueKey?: boolean
load?: (arg: (val: boolean) => void) => void // focus后再加载数据的
}>(),
{
......@@ -48,6 +49,7 @@ const props = withDefaults(
modelValue: '',
isRefresh: false,
load: null,
isValueKey: false,
},
)
......@@ -91,6 +93,7 @@ const getOptions = computed(() => {
const changeFn = (id) => {
const value = props.labelIsValue ? fields.label : fields.value
const findItem = props.options.find((item) => item[value] === id)
if (findItem) {
emits('change', findItem, id)
}
......
src/router/index.ts
......@@ -141,6 +141,13 @@ const router = createRouter({
},
component: () => import('@/views/logistics/logisticsQuotation.vue'),
},
{
path: '/logistics/declarationRule',
meta: {
title: '申报规则',
},
component: () => import('@/views/logistics/declarationRule.vue'),
},
{
path: '/warehouse/manage',
......
src/router/menu.ts
......@@ -144,7 +144,11 @@ const menu: MenuItem[] = [
id: 1,
label: '物流报价',
},
{
index: '/logistics/declarationRule',
id: 1,
label: '申报规则',
},
],
},
// {
......
src/views/logistics/declarationRule.vue 0 → 100644
<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 0 → 100644
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
}
vite.config.ts
......@@ -13,7 +13,7 @@ export default defineConfig({
host: true,
proxy: {
'/api': {
target: 'http://10.168.31.194:8060',
target: 'http://10.168.1.132:8060',
},
},
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment