10 changed files with 3238 additions and 193 deletions
@ -0,0 +1,606 @@
|
||||
<template> |
||||
<div v-loading="details.loadingObj.pageLoading"> |
||||
<el-form label-width="130px" :model="details.form" ref="formRef"> |
||||
<!-- 计价方式 --> |
||||
<el-form-item |
||||
label="计价方式" |
||||
prop="pickupPricingType" |
||||
:rules="[{ required: true, message: '请选择计价方式', trigger: ['blur', 'change'] }]" |
||||
> |
||||
<el-select |
||||
v-model="details.form.pickupPricingType" |
||||
clearable |
||||
multiple |
||||
placeholder="请选择计价方式" |
||||
style="width: 20vw" |
||||
@change="handleChangePrcieMethod" |
||||
> |
||||
<el-option |
||||
v-for="item in details.priceMethodType" |
||||
:key="item.dictKey" |
||||
:label="item.dictValue" |
||||
:value="item.dictKey" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<!-- 整车计费 --> |
||||
<el-divider content-position="left">整车计费</el-divider> |
||||
<el-form |
||||
v-for="(value, index) in details.form.VehicleBillingDetal" |
||||
:key="value" |
||||
label-width="130px" |
||||
inline |
||||
:model="value" |
||||
ref="VehicleBillingFormRef" |
||||
> |
||||
<!-- 计价方式 --> |
||||
<el-form-item |
||||
label="车型" |
||||
prop="pickupPricingType" |
||||
:rules="[{ required: true, message: '请选择车型', trigger: ['blur', 'change'] }]" |
||||
> |
||||
<el-select |
||||
v-model="value.pickupPricingType" |
||||
style="width: 13vw" |
||||
clearable |
||||
placeholder="请选择车型" |
||||
@change="handleChangePrcieMethod" |
||||
> |
||||
<el-option |
||||
v-for="item in details.priceMethodType" |
||||
:key="item.dictKey" |
||||
:label="item.dictValue" |
||||
:value="item.dictKey" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
<el-form-item |
||||
label="整车计费(元/车)" |
||||
prop="pickupPricing" |
||||
:rules="[{ required: true, validator: validatePrice, trigger: ['blur', 'change'] }]" |
||||
> |
||||
<el-input-number |
||||
v-model="value.pickupPricing" |
||||
style="width: 13vw" |
||||
:controls="false" |
||||
:precision="2" |
||||
:value-on-clear="0" |
||||
:min="0" |
||||
/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<div class="button_container"> |
||||
<div class="el_table_operation"> |
||||
<!-- 新增 --> |
||||
<span |
||||
v-if="value.plus" |
||||
@click="handlePlus(value, index)" |
||||
class="el_table_operation_span_b" |
||||
>+ |
||||
</span> |
||||
<!-- 删除 --> |
||||
<span |
||||
v-if="value.reduce" |
||||
@click="handleReduce(value, index)" |
||||
class="el_table_operation_span_a" |
||||
>- |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<!-- 品类计费 --> |
||||
<!-- <template v-if="details.form.pickupIsByCategory === '1'"> --> |
||||
<el-divider content-position="left">品类管理</el-divider> |
||||
|
||||
<template v-for="value in details.form.billTemplateDetail" :key="value.title"> |
||||
<!-- 附加费品类 --> |
||||
<el-form-item |
||||
label-width="130px" |
||||
v-if="details.form.pickupPricingType.includes(value.code)" |
||||
:label="value.title" |
||||
> |
||||
<div class="el_Storagecategory" v-loading="goriesloading" element-loading-text="Loading..."> |
||||
<div class="el_table_span"> |
||||
<div class="el_table_id">序号</div> |
||||
<div class="el_table_title">产品品类</div> |
||||
</div> |
||||
|
||||
<!-- 表格循环 --> |
||||
<div class="el_table_td" v-for="(item, index) in value.categories"> |
||||
<div class="el_table_idNumber">{{ index }}</div> |
||||
<el-select |
||||
:ref="value.title + index" |
||||
class="el_Cselect" |
||||
v-model="item.goods" |
||||
filterable |
||||
clearable |
||||
placeholder="请选择品类" |
||||
style="width: 240px" |
||||
:loading="item.loading" |
||||
@change="handleChangeCategory(item)" |
||||
remote |
||||
reserve-keyword |
||||
default-first-option |
||||
:remote-method="value => debounce(remoteMethod(value, item), 500)" |
||||
> |
||||
<el-option |
||||
v-for="val in item.goodsArr" |
||||
:key="val.goodsId" |
||||
:label="val.goodsName" |
||||
:value="val.goodsId" |
||||
/> |
||||
</el-select> |
||||
<div class="el_table_operation"> |
||||
<!-- 新增 --> |
||||
<span |
||||
v-if="item.plus" |
||||
@click="handlePlus(value, index)" |
||||
class="el_table_operation_span_b" |
||||
>+ |
||||
</span> |
||||
<!-- 删除 --> |
||||
<span |
||||
v-if="item.reduce" |
||||
@click="handleReduce(value, index)" |
||||
class="el_table_operation_span_a" |
||||
>- |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
</template> |
||||
<!-- </template> --> |
||||
|
||||
<!-- 操作按钮 --> |
||||
<div class="flex-c-c"> |
||||
<el-button type="primary" icon="Refresh" @click="resetFormData">重置</el-button> |
||||
<el-button type="primary" icon="Position" @click="handleSubmit">保存</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ref, reactive, getCurrentInstance, nextTick } from 'vue'; |
||||
import { debounce, deepClone } from '@/utils/util'; |
||||
import { ElMessage, ElMessageBox } from 'element-plus'; |
||||
import { getDictionaryBiz } from '@/api/system/dict'; |
||||
|
||||
import { postFindCategoryInfo } from '@/api/distribution/CreateOrder.js'; |
||||
|
||||
const instance = getCurrentInstance(); |
||||
|
||||
/** 表单实例 */ |
||||
const formRef = ref(); |
||||
|
||||
const VehicleBillingFormRef = ref(); |
||||
|
||||
// 品类价格 |
||||
interface categories { |
||||
/** 品类名称 */ |
||||
goodsName: string; |
||||
/** 品类id */ |
||||
goodsId: string; |
||||
/** 显示新增 */ |
||||
plus: boolean; |
||||
/** 显示删除 */ |
||||
reduce: boolean; |
||||
/** 品类名映射 */ |
||||
goods: string; |
||||
/** 模糊查询存放品类的数组 */ |
||||
goodsArr: {}[]; |
||||
/** loading */ |
||||
loading: boolean; |
||||
} |
||||
|
||||
interface BillTemplateDetail { |
||||
/** 标题 */ |
||||
title: string; |
||||
/** 对应的code */ |
||||
code: string; |
||||
/** 品类数组 */ |
||||
categories: categories[]; |
||||
} |
||||
|
||||
/** 整车计费 */ |
||||
interface VehicleBilling { |
||||
/** 车型 */ |
||||
pickupPricingType: string; |
||||
/** 车型计费(元/车) */ |
||||
pickupPricing: number; |
||||
/** 显示新增 */ |
||||
plus: boolean; |
||||
/** 显示删除 */ |
||||
reduce: boolean; |
||||
} |
||||
|
||||
/** 页面数据 */ |
||||
const details = reactive({ |
||||
/** 计价方式集合 */ |
||||
priceMethodType: [ |
||||
{ |
||||
label: '按件', |
||||
value: '0', |
||||
}, |
||||
{ |
||||
label: '按整车', |
||||
value: '1', |
||||
}, |
||||
{ |
||||
label: '按方', |
||||
value: '2', |
||||
}, |
||||
{ |
||||
label: '按重量', |
||||
value: '3', |
||||
}, |
||||
], |
||||
|
||||
/** 表单数据 */ |
||||
form: { |
||||
/** 计价方式 */ |
||||
pickupPricingType: [], |
||||
/** 计费模版详情 */ |
||||
billTemplateDetail: [] as BillTemplateDetail[], |
||||
VehicleBillingDetal: [ |
||||
{ |
||||
/** 车型 */ |
||||
pickupPricingType: '', |
||||
/** 车型计费(元/车) */ |
||||
pickupPricing: 0, |
||||
plus: true, |
||||
reduce: false, |
||||
}, |
||||
{ |
||||
/** 车型 */ |
||||
pickupPricingType: '', |
||||
/** 车型计费(元/车) */ |
||||
pickupPricing: 0, |
||||
plus: true, |
||||
reduce: true, |
||||
}, |
||||
] as VehicleBilling[], |
||||
}, |
||||
/** 初始化form数据 */ |
||||
initForm: {}, |
||||
/** loading */ |
||||
loadingObj: { |
||||
pageLoading: false, |
||||
}, |
||||
}); |
||||
|
||||
const validatePrice = (rule: any, value: any, callback: any) => { |
||||
console.log('value :>> ', value); |
||||
console.log('!value :>> ', !value); |
||||
const message = '请输入大于0的费用'; |
||||
|
||||
if (!value) { |
||||
callback(new Error(message)); |
||||
return false; |
||||
} else if (value <= 0) { |
||||
callback(new Error(message)); |
||||
return false; |
||||
} else { |
||||
callback(); |
||||
} |
||||
}; |
||||
|
||||
const goriesloading = ref(false); |
||||
|
||||
/** 计价方式改变时 */ |
||||
const handleChangePrcieMethod = value => { |
||||
console.log('value :>> ', value); |
||||
|
||||
let activeItem: any = {}; |
||||
for (let i = 0; i < details.lowestType.length; i++) { |
||||
const item = details.lowestType[i]; |
||||
if (item.value !== details.form.pickupMinCostType) continue; |
||||
activeItem = item; |
||||
break; |
||||
} |
||||
|
||||
if (!activeItem.MappingOrNot) return; |
||||
if (!details.form.pickupPricingType.includes(activeItem.mapValue)) |
||||
details.form.pickupMinCostType = '0'; |
||||
}; |
||||
|
||||
/** 处理干线计费模式 */ |
||||
const handleTrunkLinePricingType = response => { |
||||
const { code, data } = response.data; |
||||
|
||||
if (code !== 200) return; |
||||
|
||||
details.priceMethodType = data || []; |
||||
|
||||
const _billTemplateDetailArr = []; |
||||
for (let i = 0; i < details.priceMethodType.length; i++) { |
||||
const value = details.priceMethodType[i]; |
||||
|
||||
_billTemplateDetailArr.push({ |
||||
title: value.dictValue + '计费品类', |
||||
code: value.dictKey, |
||||
categories: [ |
||||
{ |
||||
reduce: false, |
||||
plus: true, |
||||
goodsName: '', |
||||
goodsId: '', |
||||
goods: '', |
||||
goodsArr: [], |
||||
loading: false, |
||||
}, |
||||
], |
||||
}); |
||||
} |
||||
|
||||
details.form.billTemplateDetail = _billTemplateDetailArr; |
||||
}; |
||||
|
||||
/** 处理最低计费价格 */ |
||||
const handleLowestPrice = response => { |
||||
console.log('response :>> ', response); |
||||
const { code, data } = response.data; |
||||
|
||||
if (code !== 200) return; |
||||
|
||||
const _dataArr = []; |
||||
|
||||
if (!data) { |
||||
} |
||||
|
||||
details.lowestType = data || []; |
||||
}; |
||||
|
||||
/** 获取业务字典 */ |
||||
const initDictionaryBiz = async () => { |
||||
try { |
||||
// 干线计费方式 |
||||
const trunkLinePromise = getDictionaryBiz('trunk_line_pricing_type'); |
||||
// 最低计费价格 |
||||
const minCostPromise = getDictionaryBiz('min_cost_type'); |
||||
|
||||
const [trunkLineResult, minCostResult] = await Promise.all([trunkLinePromise, minCostPromise]); |
||||
|
||||
// 处理干线 |
||||
handleTrunkLinePricingType(trunkLineResult); |
||||
handleLowestPrice(minCostResult); |
||||
|
||||
// 初始化复制form数据 |
||||
initFormData(); |
||||
} catch (error) { |
||||
console.log('error :>> ', error); |
||||
} finally { |
||||
} |
||||
}; |
||||
|
||||
initDictionaryBiz(); |
||||
|
||||
/** 复制form初始数据 */ |
||||
const initFormData = () => { |
||||
details.initForm = deepClone(details.form); |
||||
}; |
||||
|
||||
/** 新增品类 */ |
||||
const handlePlus = async (value: any, index: number) => { |
||||
value.categories.splice(index + 1, 0, { |
||||
reduce: true, |
||||
plus: true, |
||||
goodsName: '', |
||||
goodsId: '', |
||||
goods: '', |
||||
goodsArr: [], |
||||
loading: false, |
||||
}); |
||||
|
||||
await nextTick(); |
||||
|
||||
instance.ctx.$refs[value.title + (index + 1)][0].focus(); |
||||
console.log('instance :>> ', instance.ctx); |
||||
}; |
||||
|
||||
/** 删除品类 */ |
||||
const handleReduce = (value: any, index: number) => { |
||||
if (index === 0) return; |
||||
value.categories.splice(index, 1); |
||||
}; |
||||
|
||||
/** 货物变化时 */ |
||||
const handleChangeCategory = item => { |
||||
if (!item.goods) { |
||||
item.goodsId = ''; |
||||
item.goodsName = ''; |
||||
return; |
||||
} |
||||
|
||||
for (let i = 0; i < item.goodsArr.length; i++) { |
||||
const value = item.goodsArr[i]; |
||||
|
||||
if (item.goods !== value.goodsId) continue; |
||||
item.goodsId = value.goodsId; |
||||
item.goodsName = value.goodsName; |
||||
break; |
||||
} |
||||
}; |
||||
|
||||
/** 插混品类 */ |
||||
const remoteMethod = async (value, item) => { |
||||
try { |
||||
if (!value) return; |
||||
item.loading = true; |
||||
|
||||
const response = await postFindCategoryInfo({ goodsName: value }); |
||||
|
||||
const { code, data } = response.data; |
||||
|
||||
if (code !== 200) return; |
||||
|
||||
item.goodsArr = data || []; |
||||
} catch (error) { |
||||
console.log('error :>> ', error); |
||||
} finally { |
||||
item.loading = false; |
||||
} |
||||
}; |
||||
|
||||
/** 重置数据 */ |
||||
const resetFormData = () => { |
||||
ElMessageBox.confirm('是否重置数据?', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}).then(() => { |
||||
formRef.value.resetFields(); |
||||
|
||||
details.loadingObj.pageLoading = true; |
||||
details.form = deepClone(details.initForm); |
||||
setTimeout(() => { |
||||
details.loadingObj.pageLoading = false; |
||||
}, 300); |
||||
}); |
||||
}; |
||||
|
||||
/** 提交 */ |
||||
const handleSubmit = async () => { |
||||
if (details.form.pickupPricingType.length === 0) ElMessage.error('请选择计价方式'); |
||||
|
||||
let isRetrun = false; |
||||
|
||||
await formRef.value.validate(valid => { |
||||
// if (!valid) return; |
||||
console.log('222 :>> ', 222); |
||||
isRetrun = !valid; |
||||
}); |
||||
|
||||
console.log('VehicleBillingFormRef.value :>> ', VehicleBillingFormRef.value); |
||||
|
||||
const _VehicleBillingPromiseAll = []; |
||||
|
||||
for (let i = 0; i < VehicleBillingFormRef.value.length; i++) { |
||||
const value = VehicleBillingFormRef.value[i]; |
||||
_VehicleBillingPromiseAll.push( |
||||
value.validate(valid => { |
||||
if (isRetrun || !valid) return (isRetrun = !valid); |
||||
}) |
||||
); |
||||
} |
||||
|
||||
await Promise.all(_VehicleBillingPromiseAll); |
||||
|
||||
if (isRetrun) return; |
||||
|
||||
console.log('123 :>> ', 123); |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
// 标题 |
||||
:deep(.el-divider__text.is-left) { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: var(--el-color-primary); |
||||
} |
||||
|
||||
:deep(.el-input-number .el-input__inner) { |
||||
text-align: left; |
||||
} |
||||
|
||||
.el_Cselect { |
||||
margin-left: 10px; |
||||
} |
||||
.el_table_span { |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
display: inline-block; |
||||
width: 160px; |
||||
} |
||||
|
||||
.el_Storagecategory { |
||||
border: 1px solid #ccc; |
||||
.el_table_span { |
||||
display: flex; |
||||
width: 100%; |
||||
background-color: #ebeef5; |
||||
padding: 4px; |
||||
box-sizing: border-box; |
||||
} |
||||
.el_table_id { |
||||
width: 62px; |
||||
font-weight: 600; |
||||
color: #606266; |
||||
} |
||||
.el_table_title { |
||||
font-weight: 600; |
||||
color: #606266; |
||||
} |
||||
.el_table_td { |
||||
display: flex; |
||||
height: 40px; |
||||
align-items: center; |
||||
border-bottom: 1px solid #ccc; |
||||
position: relative; |
||||
} |
||||
.el_table_idNumber { |
||||
width: 50px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
font-weight: 400; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-right: 1px solid #ccc; |
||||
} |
||||
} |
||||
|
||||
.button_container { |
||||
height: 40px; |
||||
position: relative; |
||||
} |
||||
|
||||
.el_table_operation { |
||||
width: 70px; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
position: absolute; |
||||
right: -80px; |
||||
.el_table_operation_span_a, |
||||
.el_table_operation_span_b { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
width: 40%; |
||||
border: 2px solid #f00; |
||||
color: #f00; |
||||
height: 70%; |
||||
border-radius: 6px; |
||||
display: block; |
||||
line-height: 23px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
} |
||||
.el_table_operation_span_b { |
||||
border: 2px solid #0d83b7; |
||||
color: #0d83b7; |
||||
} |
||||
|
||||
.el_table_operation_span_a:hover { |
||||
background-color: #f00; |
||||
color: #ccc; |
||||
} |
||||
.el_table_operation_span_b:hover { |
||||
background-color: #0d83b7; |
||||
color: #ccc; |
||||
} |
||||
|
||||
:deep(.el-input__wrapper) { |
||||
box-shadow: none; |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,649 @@
|
||||
<template> |
||||
<div v-loading="details.loadingObj.pageLoading"> |
||||
<el-form label-width="150px" :model="details.form" ref="formRef"> |
||||
<!-- 计价方式 --> |
||||
<el-form-item |
||||
label="计价方式" |
||||
prop="trunklinePricingType" |
||||
:rules="[{ required: true, message: '请选择计价方式', trigger: ['blur', 'change'] }]" |
||||
> |
||||
<el-select |
||||
v-model="details.form.trunklinePricingType" |
||||
clearable |
||||
multiple |
||||
placeholder="请选择计价方式" |
||||
style="width: 20vw" |
||||
@change="handleChangePrcieMethod" |
||||
> |
||||
<el-option |
||||
v-for="item in details.priceMethodType" |
||||
:key="item.dictKey" |
||||
:label="item.dictValue" |
||||
:value="item.dictKey" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
<!-- 是否统一区域计费 --> |
||||
<el-form-item label="是否统一区域计费"> |
||||
<el-radio-group v-model="details.form.trunklineIsUnifyAreaBill" class="ml-4"> |
||||
<el-radio |
||||
v-for="item in details.isType" |
||||
:key="item.value" |
||||
:label="item.value" |
||||
size="large" |
||||
>{{ item.label }} |
||||
</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
|
||||
<!-- 是否区分品类 --> |
||||
<el-form-item label="是否区分品类"> |
||||
<el-radio-group v-model="details.form.trunklineIsByCategory" class="ml-4"> |
||||
<el-radio |
||||
v-for="item in details.isType" |
||||
:key="item.value" |
||||
:label="item.value" |
||||
size="large" |
||||
>{{ item.label }} |
||||
</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<template v-if="details.form.trunklineIsByCategory === '1'"> |
||||
<el-divider content-position="left">品类管理</el-divider> |
||||
|
||||
<template v-for="value in details.form.billTemplateDetail" :key="value.title"> |
||||
<!-- 附加费品类 --> |
||||
<el-form-item |
||||
label-width="150px" |
||||
v-if="details.form.trunklinePricingType.includes(value.code)" |
||||
:label="value.title" |
||||
> |
||||
<div |
||||
class="el_Storagecategory" |
||||
v-loading="goriesloading" |
||||
element-loading-text="Loading..." |
||||
> |
||||
<div class="el_table_span"> |
||||
<div class="el_table_id">序号</div> |
||||
<div class="el_table_title">产品品类</div> |
||||
</div> |
||||
|
||||
<!-- 表格循环 --> |
||||
<div class="el_table_td" v-for="(item, index) in value.categories"> |
||||
<div class="el_table_idNumber">{{ index }}</div> |
||||
<el-select |
||||
:ref="value.title + index" |
||||
class="el_Cselect" |
||||
v-model="item.goods" |
||||
filterable |
||||
clearable |
||||
placeholder="请选择品类" |
||||
style="width: 240px" |
||||
:loading="item.loading" |
||||
@change="handleChangeCategory(item)" |
||||
remote |
||||
reserve-keyword |
||||
default-first-option |
||||
:remote-method="value => debounce(remoteMethod(value, item), 500)" |
||||
> |
||||
<el-option |
||||
v-for="val in item.goodsArr" |
||||
:key="val.goodsId" |
||||
:label="val.goodsName" |
||||
:value="val.goodsId" |
||||
/> |
||||
</el-select> |
||||
<div class="el_table_operation"> |
||||
<!-- 新增 --> |
||||
<span |
||||
v-if="item.plus" |
||||
@click="handlePlus(value, index)" |
||||
class="el_table_operation_span_b" |
||||
>+ |
||||
</span> |
||||
<!-- 删除 --> |
||||
<span |
||||
v-if="item.reduce" |
||||
@click="handleReduce(value, index)" |
||||
class="el_table_operation_span_a" |
||||
>- |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
</template> |
||||
</template> |
||||
|
||||
<el-divider content-position="left">特殊计费</el-divider> |
||||
|
||||
<!-- 是否特殊配置 --> |
||||
<el-form-item label-width="150px" label="是否特殊配置"> |
||||
<el-radio-group v-model="details.form.trunklineIsPeculiarSetup" class="ml-4"> |
||||
<el-radio v-for="item in details.isType" :key="item.value" :label="item.value" size="large" |
||||
>{{ item.label }} |
||||
</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
|
||||
<el-divider content-position="left">一般计费</el-divider> |
||||
|
||||
<!-- 是否最低计费 --> |
||||
<el-form-item label-width="150px" label="是否最低计费"> |
||||
<el-radio-group v-model="details.form.trunklineIsMinCost" class="ml-4"> |
||||
<el-radio v-for="item in details.isType" :key="item.value" :label="item.value" size="large" |
||||
>{{ item.label }} |
||||
</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
|
||||
<!-- 最低计费类型 --> |
||||
<el-form-item |
||||
v-if="details.form.trunklineIsMinCost === '1'" |
||||
label-width="150px" |
||||
label="最低计费类型" |
||||
> |
||||
<el-radio-group v-model="details.form.trunklineMinCostType" class="ml-4"> |
||||
<template v-for="item in details.lowestType" :key="item.value"> |
||||
<el-radio |
||||
v-if="!item.MappingOrNot || details.form.trunklinePricingType.includes(item.mapValue)" |
||||
:label="item.dictKey" |
||||
size="large" |
||||
>{{ item.dictValue }} |
||||
</el-radio> |
||||
|
||||
<el-radio v-else :label="item.dictKey" size="large" disabled>{{ |
||||
item.dictValue |
||||
}}</el-radio> |
||||
</template> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
|
||||
<!-- 操作按钮 --> |
||||
<div class="flex-c-c"> |
||||
<el-button type="primary" icon="Refresh" @click="resetFormData">重置</el-button> |
||||
<el-button type="primary" icon="Position" @click="handleSubmit">保存</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ref, reactive, getCurrentInstance, nextTick,defineEmits, defineComponent } from 'vue'; |
||||
import { debounce, deepClone } from '@/utils/util'; |
||||
import { ElMessage, ElMessageBox } from 'element-plus'; |
||||
import { getDictionaryBiz } from '@/api/system/dict'; |
||||
import { $_priceTemplate } from '@/api/financialsector/index'; //价格模板 |
||||
import { postFindCategoryInfo } from '@/api/distribution/CreateOrder.js'; |
||||
const emit = defineEmits(['request-data']); |
||||
defineComponent({ |
||||
emits: ['request-data'], |
||||
}); |
||||
// 接收参数 |
||||
const props = defineProps({ |
||||
templateData: Object, |
||||
}); |
||||
console.log(props, '来自父页面参数'); |
||||
const instance = getCurrentInstance(); |
||||
|
||||
// 表单实例 |
||||
const formRef = ref(); |
||||
|
||||
interface categories { |
||||
/** 品类名称 */ |
||||
goodsName: string; |
||||
/** 品类id */ |
||||
goodsId: string; |
||||
/** 显示新增 */ |
||||
plus: boolean; |
||||
/** 显示删除 */ |
||||
reduce: boolean; |
||||
/** 品类名映射 */ |
||||
goods: string; |
||||
/** 模糊查询存放品类的数组 */ |
||||
goodsArr: {}[]; |
||||
/** loading */ |
||||
loading: boolean; |
||||
} |
||||
|
||||
interface BillTemplateDetail { |
||||
/** 标题 */ |
||||
title: string; |
||||
/** 对应的code */ |
||||
code: string; |
||||
/** 品类数组 */ |
||||
categories: categories[]; |
||||
} |
||||
|
||||
/** 页面数据 */ |
||||
const details = reactive({ |
||||
/** 计价方式集合 */ |
||||
priceMethodType: [ |
||||
{ |
||||
label: '按件', |
||||
value: '0', |
||||
}, |
||||
{ |
||||
label: '按整车', |
||||
value: '1', |
||||
}, |
||||
{ |
||||
label: '按方', |
||||
value: '2', |
||||
}, |
||||
{ |
||||
label: '按重量', |
||||
value: '3', |
||||
}, |
||||
], |
||||
isType: [ |
||||
{ |
||||
label: '是', |
||||
value: '1', |
||||
}, |
||||
{ |
||||
label: '否', |
||||
value: '0', |
||||
}, |
||||
], |
||||
/** 最低计费类型集合 |
||||
* mapValue 用于映射最低计费类型 当选择的计价方式内与该项中mapValue相同时, 显示其选项 |
||||
* 当 MappingOrNot 为false时, 不需要检测, 直接显示 |
||||
*/ |
||||
lowestType: [ |
||||
{ |
||||
label: '价格', |
||||
value: '0', |
||||
MappingOrNot: false, |
||||
}, |
||||
{ |
||||
label: '件', |
||||
value: '1', |
||||
mapValue: '0', |
||||
MappingOrNot: true, |
||||
}, |
||||
{ |
||||
label: '方数(m³)', |
||||
value: '2', |
||||
mapValue: '2', |
||||
MappingOrNot: true, |
||||
}, |
||||
{ |
||||
label: '重量(kg)', |
||||
value: '3', |
||||
mapValue: '3', |
||||
MappingOrNot: true, |
||||
}, |
||||
], |
||||
/** 表单数据 */ |
||||
form: { |
||||
/** 计价方式 */ |
||||
trunklinePricingType: [], |
||||
/** 是否统一区域计费 */ |
||||
trunklineIsUnifyAreaBill: '0', |
||||
/** 是否区分品类 */ |
||||
trunklineIsByCategory: '0', |
||||
/** 是否特殊配置 */ |
||||
trunklineIsPeculiarSetup: '0', |
||||
/** 是否最低计费 */ |
||||
trunklineIsMinCost: '0', |
||||
/** 最低计费类型 */ |
||||
trunklineMinCostType: '1', |
||||
/** 计费模版详情 */ |
||||
billTemplateDetail: [] as BillTemplateDetail[], |
||||
}, |
||||
/** 初始化form数据 */ |
||||
initForm: {}, |
||||
/** loading */ |
||||
loadingObj: { |
||||
pageLoading: false, |
||||
}, |
||||
}); |
||||
|
||||
const goriesloading = ref(false); |
||||
|
||||
/** 计价方式改变时 */ |
||||
const handleChangePrcieMethod = value => { |
||||
console.log('value :>> ', value); |
||||
|
||||
let activeItem: any = {}; |
||||
for (let i = 0; i < details.lowestType.length; i++) { |
||||
const item = details.lowestType[i]; |
||||
if (item.value !== details.form.trunklineMinCostType) continue; |
||||
activeItem = item; |
||||
break; |
||||
} |
||||
|
||||
if (!activeItem.MappingOrNot) return; |
||||
if (!details.form.trunklinePricingType.includes(activeItem.mapValue)) |
||||
details.form.trunklineMinCostType = '0'; |
||||
}; |
||||
|
||||
/** 处理干线计费模式 */ |
||||
const handleTrunkLinePricingType = response => { |
||||
const { code, data } = response.data; |
||||
|
||||
if (code !== 200) return; |
||||
|
||||
details.priceMethodType = data || []; |
||||
|
||||
const _billTemplateDetailArr = []; |
||||
for (let i = 0; i < details.priceMethodType.length; i++) { |
||||
const value = details.priceMethodType[i]; |
||||
console.log(value,'value'); |
||||
|
||||
if(value.dictKey !='2'){ |
||||
console.log(value,'value===='); |
||||
_billTemplateDetailArr.push({ |
||||
title: value.dictValue + '计费品类', |
||||
code: value.dictKey, |
||||
categories: [ |
||||
{ |
||||
reduce: false, |
||||
plus: true, |
||||
goodsName: '', |
||||
goodsId: '', |
||||
goods: '', |
||||
goodsArr: [], |
||||
loading: false, |
||||
}, |
||||
], |
||||
}); |
||||
} |
||||
|
||||
} |
||||
|
||||
details.form.billTemplateDetail = _billTemplateDetailArr; |
||||
}; |
||||
|
||||
/** 处理最低计费价格 */ |
||||
const handleLowestPrice = response => { |
||||
console.log('response :>> ', response); |
||||
const { code, data } = response.data; |
||||
|
||||
if (code !== 200) return; |
||||
|
||||
const _dataArr = []; |
||||
|
||||
if (!data) { |
||||
} |
||||
|
||||
details.lowestType = data || []; |
||||
}; |
||||
|
||||
/** 复制form初始数据 */ |
||||
const initFormData = () => { |
||||
details.initForm = deepClone(details.form); |
||||
}; |
||||
|
||||
/** 获取业务字典 */ |
||||
const initDictionaryBiz = async () => { |
||||
try { |
||||
// 干线计费方式 |
||||
const trunkLinePromise = getDictionaryBiz('trunk_line_pricing_type'); |
||||
// 最低计费价格 |
||||
const minCostPromise = getDictionaryBiz('min_cost_type'); |
||||
|
||||
const [trunkLineResult, minCostResult] = await Promise.all([trunkLinePromise, minCostPromise]); |
||||
|
||||
// 处理干线 |
||||
handleTrunkLinePricingType(trunkLineResult); |
||||
handleLowestPrice(minCostResult); |
||||
|
||||
// 初始化复制form数据 |
||||
initFormData(); |
||||
} catch (error) { |
||||
console.log('error :>> ', error); |
||||
} finally { |
||||
} |
||||
}; |
||||
|
||||
initDictionaryBiz(); |
||||
|
||||
/** 新增品类 */ |
||||
const handlePlus = async (value: any, index: number) => { |
||||
value.categories.splice(index + 1, 0, { |
||||
reduce: true, |
||||
plus: true, |
||||
goodsName: '', |
||||
goodsId: '', |
||||
goods: '', |
||||
goodsArr: [], |
||||
loading: false, |
||||
}); |
||||
|
||||
await nextTick(); |
||||
|
||||
instance.ctx.$refs[value.title + (index + 1)][0].focus(); |
||||
console.log('instance :>> ', instance.ctx); |
||||
}; |
||||
|
||||
/** 删除品类 */ |
||||
const handleReduce = (value: any, index: number) => { |
||||
if (index === 0) return; |
||||
value.categories.splice(index, 1); |
||||
}; |
||||
|
||||
/** 货物变化时 */ |
||||
const handleChangeCategory = item => { |
||||
if (!item.goods) { |
||||
item.goodsId = ''; |
||||
item.goodsName = ''; |
||||
return; |
||||
} |
||||
|
||||
for (let i = 0; i < item.goodsArr.length; i++) { |
||||
const value = item.goodsArr[i]; |
||||
|
||||
if (item.goods !== value.goodsId) continue; |
||||
item.goodsId = value.goodsId; |
||||
item.goodsName = value.goodsName; |
||||
break; |
||||
} |
||||
}; |
||||
|
||||
/** 插混品类 */ |
||||
const remoteMethod = async (value, item) => { |
||||
try { |
||||
if (!value) return; |
||||
item.loading = true; |
||||
|
||||
const response = await postFindCategoryInfo({ goodsName: value }); |
||||
|
||||
const { code, data } = response.data; |
||||
|
||||
if (code !== 200) return; |
||||
|
||||
item.goodsArr = data || []; |
||||
} catch (error) { |
||||
console.log('error :>> ', error); |
||||
} finally { |
||||
item.loading = false; |
||||
} |
||||
}; |
||||
|
||||
/** 重置数据 */ |
||||
const resetFormData = () => { |
||||
ElMessageBox.confirm('是否重置数据?', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}).then(() => { |
||||
formRef.value.resetFields(); |
||||
|
||||
details.loadingObj.pageLoading = true; |
||||
details.form = deepClone(details.initForm); |
||||
setTimeout(() => { |
||||
details.loadingObj.pageLoading = false; |
||||
}, 300); |
||||
}); |
||||
}; |
||||
|
||||
/** 提交 */ |
||||
const handleSubmit = async() => { |
||||
if (details.form.trunklinePricingType.length === 0) ElMessage.error('请选择计价方式'); |
||||
|
||||
formRef.value.validate(async valid => { |
||||
await emit('request-data'); //通知父页面传递数据 |
||||
if (!valid) return; |
||||
console.log(props, 'props'); |
||||
if (!props.templateData.TemplateName) { |
||||
ElMessage({ |
||||
message: '请输入模板名称', |
||||
type: 'warning', |
||||
}); |
||||
return; |
||||
} else { |
||||
details.form.name = props.templateData.TemplateName; //模板名称 |
||||
} |
||||
|
||||
if (!props.templateData.brand) { |
||||
ElMessage({ |
||||
message: '请选择品牌', |
||||
type: 'warning', |
||||
}); |
||||
return; |
||||
} else { |
||||
details.form.brandId = props.templateData.brand; //品牌ID |
||||
} |
||||
console.log(details.form,'初始表单'); |
||||
const submitData = deepClone(details.form);//深拷贝 |
||||
// 计价方式 |
||||
submitData.trunklinePricingType= submitData.trunklinePricingType.join(',') |
||||
//品类管理 |
||||
submitData.billTemplateDetail.forEach(item=>{ |
||||
switch (item.code) { |
||||
case '1': |
||||
submitData.trunklinePieceCategory = item.categories.filter(res => res.goodsId).map(res => res.goodsId).join(','); |
||||
break; |
||||
case '3': |
||||
submitData.trunklineCubeCategory = item.categories.filter(res => res.goodsId).map(res => res.goodsId).join(','); |
||||
break; |
||||
case '4': |
||||
submitData.trunklineWeightCategory = item.categories.filter(res => res.goodsId).map(res => res.goodsId).join(','); |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
}) |
||||
submitData.serviceType = '2'; //服务类型（干线固定参数） |
||||
delete submitData.billTemplateDetail;//删除是否区分品类多余参数 |
||||
console.log(submitData,'处理好的参数'); |
||||
let data={ |
||||
...submitData,//提交的参数 |
||||
} |
||||
$_priceTemplate(data).then(res=>{ |
||||
console.log(res,'提交成功返回值'); |
||||
if (res.data.code == 200) { |
||||
ElMessage({ |
||||
message: res.data.msg, |
||||
type: 'success', |
||||
}); |
||||
emit('request-data',res.data.data);//把获取到的数据传递给父页面 |
||||
} |
||||
}) |
||||
}); |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
// 标题 |
||||
:deep(.el-divider__text.is-left) { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: var(--el-color-primary); |
||||
} |
||||
|
||||
:deep(.el-input-number .el-input__inner) { |
||||
text-align: left; |
||||
} |
||||
|
||||
.el_Cselect { |
||||
margin-left: 10px; |
||||
} |
||||
.el_table_span { |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
display: inline-block; |
||||
width: 160px; |
||||
} |
||||
|
||||
.el_Storagecategory { |
||||
border: 1px solid #ccc; |
||||
.el_table_span { |
||||
display: flex; |
||||
width: 100%; |
||||
background-color: #ebeef5; |
||||
padding: 4px; |
||||
box-sizing: border-box; |
||||
} |
||||
.el_table_id { |
||||
width: 62px; |
||||
font-weight: 600; |
||||
color: #606266; |
||||
} |
||||
.el_table_title { |
||||
font-weight: 600; |
||||
color: #606266; |
||||
} |
||||
.el_table_td { |
||||
display: flex; |
||||
height: 40px; |
||||
align-items: center; |
||||
border-bottom: 1px solid #ccc; |
||||
position: relative; |
||||
.el_table_operation { |
||||
width: 70px; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
position: absolute; |
||||
right: -80px; |
||||
.el_table_operation_span_a, |
||||
.el_table_operation_span_b { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
width: 40%; |
||||
border: 2px solid #f00; |
||||
color: #f00; |
||||
height: 70%; |
||||
border-radius: 6px; |
||||
display: block; |
||||
line-height: 23px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
} |
||||
.el_table_operation_span_b { |
||||
border: 2px solid #0d83b7; |
||||
color: #0d83b7; |
||||
} |
||||
|
||||
.el_table_operation_span_a:hover { |
||||
background-color: #f00; |
||||
color: #ccc; |
||||
} |
||||
.el_table_operation_span_b:hover { |
||||
background-color: #0d83b7; |
||||
color: #ccc; |
||||
} |
||||
} |
||||
} |
||||
.el_table_idNumber { |
||||
width: 50px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
font-weight: 400; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-right: 1px solid #ccc; |
||||
} |
||||
:deep(.el-input__wrapper) { |
||||
box-shadow: none; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,714 @@
|
||||
<template> |
||||
<div class="content_max"> |
||||
<!-- 仓储计费类型 --> |
||||
<div class="el_Storage"> |
||||
<span class="el_table_span">仓储计费类型</span> |
||||
<el-select |
||||
class="el_Cselect" |
||||
v-model="form.warehousePricingType" |
||||
filterable |
||||
clearable |
||||
placeholder="选择计费类型" |
||||
style="width: 240px" |
||||
> |
||||
<el-option |
||||
v-for="item in Storagebillingtype" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</div> |
||||
|
||||
<!-- 仓储计费模式 --> |
||||
<div class="el_Storage"> |
||||
<span class="el_table_span">仓储计费模式</span> |
||||
<el-select |
||||
class="el_Cselect" |
||||
v-model="form.warehousePricingMode" |
||||
filterable |
||||
clearable |
||||
placeholder="选择仓储计费模式" |
||||
style="width: 240px" |
||||
> |
||||
<el-option |
||||
v-for="item in Warehousebillingmode" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</div> |
||||
<!-- 计算基准 --> |
||||
<div class="el_Storage"> |
||||
<span class="el_table_span">计算基准</span> |
||||
<el-radio-group v-model="form.warehouseCalculationBasis" class="el_Cselect"> |
||||
<el-radio v-for="item in CalculationBasis" :key="item.label" :label="item.value">{{ |
||||
item.label |
||||
}}</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
|
||||
<!-- 是否区分品类 --> |
||||
<div class="el_Storage"> |
||||
<span class="el_table_span">是否区分品类</span> |
||||
<el-radio-group |
||||
@change="categoriesDisplayChange" |
||||
v-model="form.warehouseIsByCategory" |
||||
class="el_Cselect" |
||||
> |
||||
<el-radio v-for="item in Distinguishcategories" :key="item.label" :label="item.value">{{ |
||||
item.label |
||||
}}</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
|
||||
<!-- 仓储品类配置 --> |
||||
<div class="el_Storage" v-if="categoriesDisplay"> |
||||
<div class="Storage-cont"> |
||||
<span class="el_table_span">仓储品类配置</span> |
||||
<!-- 表格 --> |
||||
<div |
||||
class="el_Storagecategory" |
||||
v-loading="Storageloading" |
||||
element-loading-text="Loading..." |
||||
> |
||||
<div class="el_table_span"> |
||||
<div class="el_table_id">序号</div> |
||||
<div class="el_table_title">产品品类</div> |
||||
</div> |
||||
<!-- 表格循环 --> |
||||
<div class="el_table_td" v-for="item in StoragecategoryList" :key="item.id"> |
||||
<div class="el_table_idNumber">{{ item.id }}</div> |
||||
<el-select |
||||
class="el_Cselect" |
||||
v-model="item.warehousePieceCategory" |
||||
filterable |
||||
remote |
||||
clearable |
||||
reserve-keyword |
||||
placeholder="请选择品类" |
||||
style="width: 240px" |
||||
remote-show-suffix |
||||
:remote-method="categoriesearch" |
||||
@focus="categoriesSearchfocus(item)" |
||||
> |
||||
<!-- @remote-method="changeCategory(item.warehousePieceCategory)" --> |
||||
<el-option |
||||
v-for="items in item.Additionalcategories" |
||||
:key="items.value" |
||||
:label="items.label" |
||||
:value="items.value" |
||||
/> |
||||
</el-select> |
||||
<div class="el_table_operation"> |
||||
<span |
||||
@click="storagereduce(item.id)" |
||||
v-if="item.reduce" |
||||
class="el_table_operation_span_a" |
||||
>-</span |
||||
> |
||||
<span @click="storageplus(item.id)" v-if="item.plus" class="el_table_operation_span_b" |
||||
>+</span |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<hr class="el_hr" /> |
||||
<!-- 附加费 --> |
||||
<div class="el_Surcharge_title"> |
||||
<span>附加费</span> |
||||
</div> |
||||
<div class="el_Surcharge"> |
||||
<!-- 附加费计价单位 --> |
||||
<div class="el_Storage"> |
||||
<span class="el_table_span">附加费计价单位</span> |
||||
<el-select |
||||
class="el_Cselect" |
||||
v-model="form.warehouseSubjoinFeeUnit" |
||||
filterable |
||||
clearable |
||||
placeholder="选择计费类型" |
||||
style="width: 240px" |
||||
> |
||||
<el-option |
||||
v-for="item in Surchargepricingunit" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</div> |
||||
|
||||
<!-- 是否有管理费 --> |
||||
<div class="el_Storage"> |
||||
<span class="el_table_span">是否有管理费</span> |
||||
<el-radio-group v-model="form.warehouseIsManageFee" class="el_Cselect"> |
||||
<el-radio v-for="item in Managementfees" :key="item.label" :label="item.value">{{ |
||||
item.label |
||||
}}</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
|
||||
<!-- 是否有操作/装卸费 --> |
||||
<div class="el_Storage"> |
||||
<span class="el_table_span">是否有操作/装卸费</span> |
||||
<el-radio-group v-model="form.warehouseIsOperateFee" class="el_Cselect"> |
||||
<el-radio v-for="item in Operatingunloading" :key="item.label" :label="item.value">{{ |
||||
item.label |
||||
}}</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
|
||||
<!-- 是否有分拣费用 --> |
||||
<div class="el_Storage"> |
||||
<span class="el_table_span">是否有分拣费用</span> |
||||
<el-radio-group v-model="form.warehouseIsSortFee" class="el_Cselect"> |
||||
<el-radio v-for="item in Sortingfee" :key="item.label" :label="item.value">{{ |
||||
item.label |
||||
}}</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
|
||||
<!-- 附加费用是否统一计费 --> |
||||
<div class="el_Storage"> |
||||
<span class="el_table_span">附加费是否按品类计费</span> |
||||
|
||||
<el-radio-group |
||||
@change="AdditionalDisplayChange" |
||||
v-model="form.warehouseIsCategorySubjoin" |
||||
class="el_Cselect" |
||||
> |
||||
<el-radio v-for="item in Additionalfeebilling" :key="item.label" :label="item.value">{{ |
||||
item.label |
||||
}}</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
|
||||
<!-- 附加费品类配置 --> |
||||
<div class="el_Storage" v-if="SurchargeDisplay"> |
||||
<div class="Storage-cont"> |
||||
<span class="el_table_span">附加费品类配置</span> |
||||
<!-- 表格 --> |
||||
<div |
||||
class="el_Storagecategory" |
||||
v-loading="goriesloading" |
||||
element-loading-text="Loading..." |
||||
> |
||||
<div class="el_table_span"> |
||||
<div class="el_table_id">序号</div> |
||||
<div class="el_table_title">产品品类</div> |
||||
</div> |
||||
<!-- 表格循环 --> |
||||
<div class="el_table_td" v-for="item in AdditionalcategoriesList" :key="item.id"> |
||||
<div class="el_table_idNumber">{{ item.id }}</div> |
||||
<el-select |
||||
class="el_Cselect" |
||||
v-model="item.warehousePieceCategory" |
||||
filterable |
||||
remote |
||||
clearable |
||||
reserve-keyword |
||||
placeholder="请选择品类" |
||||
style="width: 240px" |
||||
remote-show-suffix |
||||
:remote-method="categoriesearch" |
||||
@focus="categoriesSearchfocus(item)" |
||||
> |
||||
<el-option |
||||
v-for="items in item.Additionalcategories" |
||||
:key="items.value" |
||||
:label="items.label" |
||||
:value="items.value" |
||||
/> |
||||
</el-select> |
||||
<div class="el_table_operation"> |
||||
<span |
||||
@click="categoriesduce(item.id)" |
||||
v-if="item.reduce" |
||||
class="el_table_operation_span_a" |
||||
>-</span |
||||
> |
||||
<span |
||||
@click="categoriesplus(item.id)" |
||||
v-if="item.plus" |
||||
class="el_table_operation_span_b" |
||||
>+</span |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="el_submit"> |
||||
<el-button type="primary" @click="Submit">保存</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref } from 'vue'; |
||||
import { defineProps, defineEmits ,defineComponent} from 'vue'; |
||||
import { getDictionaryBiz } from '@/api/system/dict'; //字典 |
||||
import { $_priceTemplate, $_basicdataBrande } from '@/api/financialsector/index'; //价格模板 |
||||
import { ElMessage } from 'element-plus'; |
||||
import { postFindCategoryInfo } from '@/api/distribution/CreateOrder.js'; |
||||
const SelectOpin = ref(null); //当前点击的品类搜索框 |
||||
// 获取点击的品类(附加品类配置) |
||||
const categoriesDisplay = ref(false); //是否区分品类（显示/隐藏） |
||||
const SurchargeDisplay = ref(false); //附加费是否按品类计费(显示/隐藏) |
||||
const categoriesSearchfocus = item => { |
||||
console.log(item, 'item'); |
||||
SelectOpin.value = item; //获取当前点击的是那个品类输入框 |
||||
}; |
||||
// 附加品类的搜索 |
||||
const categoriesearch = goodsName => { |
||||
console.log(goodsName, '当前搜索参数'); |
||||
if (!goodsName) { |
||||
return; |
||||
} |
||||
let data = { |
||||
goodsName: goodsName, |
||||
}; |
||||
let selectionList = null; |
||||
// StateName:'storage',//仓储标识 |
||||
// StateName:'additional',//附加费标识 |
||||
if (SelectOpin.value.StateName == 'storage') { |
||||
selectionList = StoragecategoryList.value.find(res => res.id == SelectOpin.value.id); //当前是那个选择框 |
||||
} else { |
||||
selectionList = AdditionalcategoriesList.value.find(res => res.id == SelectOpin.value.id); //当前是那个选择框 |
||||
} |
||||
console.log(selectionList, 'selectionList'); |
||||
postFindCategoryInfo(data).then(res => { |
||||
console.log(res, '附加费品类计费'); |
||||
if (res.data.code == 200) { |
||||
if (res.data.data.length) { |
||||
selectionList.Additionalcategories = []; //如果有新的参数就清空之前的 |
||||
res.data.data.forEach(item => { |
||||
selectionList.Additionalcategories.push({ |
||||
label: item.goodsName, |
||||
value: item.goodsId, |
||||
}); |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
}; |
||||
|
||||
const emit = defineEmits(['request-data']); |
||||
defineComponent({ |
||||
emits: ['request-data'], |
||||
}); |
||||
// 接收参数 |
||||
const props = defineProps({ |
||||
templateData: Object, |
||||
}); |
||||
console.log(props, '来自父页面参数'); |
||||
const Storageloading = ref(false); //仓储品类加载 |
||||
const goriesloading = ref(false); //仓储品类加载 |
||||
const form = ref({ |
||||
warehouseCalculationBasis: '1', // 计算基准 |
||||
warehouseIsByCategory: '0', //是否区分品类 |
||||
warehouseIsManageFee: '0', //是否有管理费 |
||||
warehouseIsOperateFee: '0', //是否有操作/装卸费 |
||||
warehouseIsSortFee: '0', //是否有分拣费 |
||||
warehouseIsCategorySubjoin: '0', //附加费用是否按品类计费 |
||||
}); //表单 |
||||
// 仓储计费类型 |
||||
const Storagebillingtype = ref([]); |
||||
// 仓储计费模式 |
||||
const Warehousebillingmode = ref([]); |
||||
// 计算基准 |
||||
const CalculationBasis = ref([]); |
||||
// 是否区分品类 |
||||
const Distinguishcategories = ref([]); |
||||
// 仓库品类列表 |
||||
const Warehousecategory = ref([ |
||||
{ |
||||
label: '衣柜', |
||||
value: '1', |
||||
}, |
||||
{ |
||||
label: '橱柜', |
||||
value: '2', |
||||
}, |
||||
]); |
||||
// 仓储品类配置 |
||||
const StoragecategoryList = ref([ |
||||
{ |
||||
id: 1, |
||||
plus: true, |
||||
reduce: false, |
||||
StateName: 'storage', //仓储标识 |
||||
warehousePieceCategory: '', //输入的值 |
||||
Additionalcategories: [], |
||||
}, |
||||
]); |
||||
// 附加费品类配置 |
||||
const AdditionalcategoriesList = ref([ |
||||
{ |
||||
id: 1, |
||||
plus: true, |
||||
reduce: false, |
||||
StateName: 'additional', //附加费标识 |
||||
warehousePieceCategory: '', //输入的值 |
||||
Additionalcategories: [], |
||||
}, |
||||
]); |
||||
// 附加费品类 |
||||
const Additionalcategories = ref([ |
||||
{ |
||||
label: '衣柜', |
||||
value: '1', |
||||
}, |
||||
{ |
||||
label: '橱柜', |
||||
value: '2', |
||||
}, |
||||
]); |
||||
// 附加计费单位 |
||||
const Surchargepricingunit = ref([]); |
||||
// 是否有管理费 |
||||
const Managementfees = ref([]); |
||||
// 是否有操作/装卸费 |
||||
const Operatingunloading = ref([]); |
||||
// 是否有分拣费 |
||||
const Sortingfee = ref([]); |
||||
// 附加费用是否统一计费 |
||||
const Additionalfeebilling = ref([]); |
||||
|
||||
// 移除对象 |
||||
function removeItemById(array, id) { |
||||
const index = array.findIndex(item => item.id === id); |
||||
if (index !== -1) { |
||||
array.splice(index, 1); |
||||
array.forEach((item, index) => { |
||||
item.id = index + 1; |
||||
}); |
||||
} |
||||
let timerId = setTimeout(() => { |
||||
goriesloading.value = false; |
||||
Storageloading.value = false; |
||||
clearTimeout(timerId); // 在回调函数内部清除定时器 |
||||
}, 300); |
||||
} |
||||
// StateName:'storage',//仓储标识 |
||||
// StateName:'additional',//附加费标识 |
||||
// 添加对象 |
||||
function addItemAfterId(array, id, StateName) { |
||||
console.log(array); |
||||
const newItem = { |
||||
id: array.length + 1, // 新对象的 ID 为当前数组长度加 1 |
||||
plus: true, //是否显示加号 |
||||
reduce: true, //是否显示减号 |
||||
StateName, //标识 |
||||
warehousePieceCategory: '', //选择框值 |
||||
Additionalcategories: [], //选择框列表,防止后期需要改动列表值 |
||||
}; |
||||
const index = array.findIndex(item => item.id === id); |
||||
if (index !== -1) { |
||||
array.splice(index + 1, 0, newItem); // 在找到的 ID 后面插入新对象 |
||||
// 重新排序 ID |
||||
array.forEach((item, index) => { |
||||
item.id = index + 1; |
||||
}); |
||||
} |
||||
let timerId = setTimeout(() => { |
||||
goriesloading.value = false; //关闭加载效果 |
||||
Storageloading.value = false; //关闭加载效果 |
||||
clearTimeout(timerId); // 在回调函数内部清除定时器 |
||||
}, 300); |
||||
// 取消定时器 |
||||
} |
||||
// 仓储减 |
||||
const storagereduce = id => { |
||||
// ID当前点击的 |
||||
Storageloading.value = true; //开启加载效果 |
||||
removeItemById(StoragecategoryList.value, id); //传入配置项和对应的ID |
||||
}; |
||||
// StateName:'storage',//仓储标识 |
||||
// StateName:'additional',//附加费标识 |
||||
// 仓储加 |
||||
const storageplus = id => { |
||||
Storageloading.value = true; |
||||
addItemAfterId(StoragecategoryList.value, id, 'storage'); |
||||
}; |
||||
// 附加品类加 |
||||
const categoriesplus = id => { |
||||
goriesloading.value = true; |
||||
addItemAfterId(AdditionalcategoriesList.value, id, 'additional'); |
||||
}; |
||||
// 附加品类减 |
||||
const categoriesduce = id => { |
||||
goriesloading.value = true; |
||||
removeItemById(AdditionalcategoriesList.value, id); |
||||
}; |
||||
function updateDictionary(targetArray, dictionaryType) { |
||||
getDictionaryBiz(dictionaryType) |
||||
.then(res => { |
||||
console.log(res, '字典'); |
||||
if (res.data.code == 200) { |
||||
if (res.data.data.length) { |
||||
res.data.data.forEach(item => { |
||||
targetArray.push({ |
||||
value: item.dictKey, |
||||
label: item.dictValue, |
||||
id: item.id, |
||||
}); |
||||
}); |
||||
} |
||||
} |
||||
if (dictionaryType == 'price_yes_no') { |
||||
Managementfees.value = { ...Distinguishcategories.value }; //是否有管理费 |
||||
Operatingunloading.value = { ...Distinguishcategories.value }; //是否有操作/装卸费 |
||||
Sortingfee.value = { ...Distinguishcategories.value }; //是否有分拣费用 |
||||
Additionalfeebilling.value = { ...Distinguishcategories.value }; //附加费用是否统一计费 |
||||
} |
||||
}) |
||||
.catch(() => {}) |
||||
.finally(() => {}); |
||||
} |
||||
// 页面初始化必要请求 |
||||
const onLoad = () => { |
||||
updateDictionary(Storagebillingtype.value, 'warehouse_pricing_type'); //仓储计费类型 |
||||
updateDictionary(Warehousebillingmode.value, 'warehouse_pricing_mode'); //仓储计费模式 |
||||
updateDictionary(CalculationBasis.value, 'warehouse_calculation_basis'); //计算基准 |
||||
updateDictionary(Distinguishcategories.value, 'price_yes_no'); //是否区分品类 |
||||
updateDictionary(Surchargepricingunit.value, 'warehouse_pricing_unit'); //附加费计价单位 |
||||
}; |
||||
onLoad(); |
||||
// 新增 |
||||
const Submit = async () => { |
||||
await emit('request-data'); //通知父页面传递数据 |
||||
console.log(props, 'props'); |
||||
if (!props.templateData.TemplateName) { |
||||
ElMessage({ |
||||
message: '请输入模板名称', |
||||
type: 'warning', |
||||
}); |
||||
return; |
||||
} else { |
||||
form.value.name = props.templateData.TemplateName; //模板名称 |
||||
} |
||||
if (!props.templateData.brand) { |
||||
ElMessage({ |
||||
message: '请选择品牌', |
||||
type: 'warning', |
||||
}); |
||||
return; |
||||
} else { |
||||
form.value.brandId = props.templateData.brand; //品牌ID |
||||
} |
||||
|
||||
form.value.serviceType = '3'; //服务类型（仓储固定参数） |
||||
// 如果勾选了区分品类判断是否填写了仓储品类配置 |
||||
if (categoriesDisplay.value) { |
||||
let storage = StoragecategoryList.value.find(res => !res.warehousePieceCategory); //查看仓储品类配置是否完全没有填写 |
||||
if (storage) { |
||||
// 如果勾选了,并且查到了有没有填写的就提示必须填写 |
||||
ElMessage({ |
||||
message: '请填写仓储品类配置', |
||||
type: 'warning', |
||||
}); |
||||
return; |
||||
} else { |
||||
console.log(StoragecategoryList.value, 'StoragecategoryList.value'); |
||||
// 如果都填写了进行数据处理 |
||||
form.value.warehousePieceCategory = StoragecategoryList.value |
||||
.map(res => res.warehousePieceCategory) |
||||
.join(','); |
||||
} |
||||
} |
||||
// 如果勾选了附加费是否按品类计费判断是否填写了附加品类配置 |
||||
if (SurchargeDisplay.value) { |
||||
let Surcharge = AdditionalcategoriesList.value.find(res => !res.warehousePieceCategory); //查看附加费品类配置是否完全没有填写 |
||||
if (Surcharge) { |
||||
// 如果勾选了,并且查到了有没有填写的就提示必须填写 |
||||
ElMessage({ |
||||
message: '请填写附加品类配置', |
||||
type: 'warning', |
||||
}); |
||||
return; |
||||
} else { |
||||
// 如果都填写了进行数据处理 |
||||
form.value.warehouseSubjoinCategory = AdditionalcategoriesList.value |
||||
.map(res => res.warehousePieceCategory) |
||||
.join(','); |
||||
} |
||||
} |
||||
|
||||
console.log(form.value, '要提交的参数'); |
||||
let data = { |
||||
...form.value, |
||||
}; |
||||
$_priceTemplate(data).then(res => { |
||||
console.log(res, '提交成功之后返回值'); |
||||
if (res.data.code == 200) { |
||||
ElMessage({ |
||||
message: res.data.msg, |
||||
type: 'success', |
||||
}); |
||||
emit('request-data',res.data.data);//把获取到的数据传递给父页面 |
||||
} |
||||
// res.data.data 返回的参数 |
||||
}); |
||||
}; |
||||
// 是否区分品类事件 |
||||
const categoriesDisplayChange = val => { |
||||
console.log(val); |
||||
if (val == 1) { |
||||
categoriesDisplay.value = true; |
||||
StoragecategoryList.value = [ |
||||
{ |
||||
id: 1, |
||||
plus: true, |
||||
reduce: false, |
||||
StateName: 'storage', //仓储标识 |
||||
warehousePieceCategory: '', //输入的值 |
||||
Additionalcategories: [], |
||||
}, |
||||
]; |
||||
} else { |
||||
categoriesDisplay.value = false; |
||||
} |
||||
}; |
||||
// 附加费是否按品类计费 |
||||
const AdditionalDisplayChange = val => { |
||||
if (val == 1) { |
||||
SurchargeDisplay.value = true; |
||||
AdditionalcategoriesList.value = [ |
||||
{ |
||||
id: 1, |
||||
plus: true, |
||||
reduce: false, |
||||
StateName: 'additional', //附加费标识 |
||||
warehousePieceCategory: '', //输入的值 |
||||
Additionalcategories: [], |
||||
}, |
||||
]; |
||||
} else { |
||||
SurchargeDisplay.value = false; |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.content_max { |
||||
padding: 10px; |
||||
} |
||||
.el_Storage { |
||||
margin-bottom: 30px; |
||||
.el_Cselect { |
||||
margin-left: 10px; |
||||
} |
||||
.el_table_span { |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
display: inline-block; |
||||
width: 160px; |
||||
} |
||||
.Storage-cont { |
||||
/* 禁止双击选中文本 */ |
||||
-webkit-user-select: none; /* Safari */ |
||||
-moz-user-select: none; /* Firefox */ |
||||
-ms-user-select: none; /* IE 10+/Edge */ |
||||
user-select: none; /* Standard syntax */ |
||||
display: flex; |
||||
.el_Storagecategory { |
||||
border: 1px solid #ccc; |
||||
.el_table_span { |
||||
display: flex; |
||||
width: 100%; |
||||
background-color: #ebeef5; |
||||
padding: 4px; |
||||
box-sizing: border-box; |
||||
} |
||||
.el_table_id { |
||||
width: 62px; |
||||
font-weight: 600; |
||||
color: #606266; |
||||
} |
||||
.el_table_title { |
||||
font-weight: 600; |
||||
color: #606266; |
||||
} |
||||
.el_table_td { |
||||
display: flex; |
||||
height: 40px; |
||||
align-items: center; |
||||
border-bottom: 1px solid #ccc; |
||||
position: relative; |
||||
.el_table_operation { |
||||
width: 70px; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
position: absolute; |
||||
right: -80px; |
||||
.el_table_operation_span_a, |
||||
.el_table_operation_span_b { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
width: 40%; |
||||
border: 2px solid #f00; |
||||
color: #f00; |
||||
height: 70%; |
||||
border-radius: 6px; |
||||
display: block; |
||||
line-height: 23px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
} |
||||
.el_table_operation_span_b { |
||||
border: 2px solid #0d83b7; |
||||
color: #0d83b7; |
||||
} |
||||
|
||||
.el_table_operation_span_a:hover { |
||||
background-color: #f00; |
||||
color: #ccc; |
||||
} |
||||
.el_table_operation_span_b:hover { |
||||
background-color: #0d83b7; |
||||
color: #ccc; |
||||
} |
||||
} |
||||
} |
||||
.el_table_idNumber { |
||||
width: 50px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
font-weight: 400; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-right: 1px solid #ccc; |
||||
} |
||||
:deep(.el-input__wrapper) { |
||||
box-shadow: none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.el_hr { |
||||
height: 1px; |
||||
background-color: #378cbe; |
||||
border: none; |
||||
border-radius: 10px; |
||||
} |
||||
.el_Surcharge_title { |
||||
margin-bottom: 10px; |
||||
} |
||||
.el_Surcharge { |
||||
} |
||||
.el_submit { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue