|
|
|
|
@ -1,8 +1,12 @@
|
|
|
|
|
<template> |
|
|
|
|
<div v-loading="details.loadingObj.pageLoading"> |
|
|
|
|
<el-form label-width="150px"> |
|
|
|
|
<el-form label-width="150px" :model="details.form" ref="formRef"> |
|
|
|
|
<!-- 计价方式 --> |
|
|
|
|
<el-form-item label="计价方式"> |
|
|
|
|
<el-form-item |
|
|
|
|
label="计价方式" |
|
|
|
|
prop="priceMethod" |
|
|
|
|
:rules="[{ required: true, message: '请选择计价方式', trigger: ['blur', 'change'] }]" |
|
|
|
|
> |
|
|
|
|
<el-select |
|
|
|
|
v-model="details.form.priceMethod" |
|
|
|
|
clearable |
|
|
|
|
@ -13,9 +17,9 @@
|
|
|
|
|
> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in details.priceMethodType" |
|
|
|
|
:key="item.value" |
|
|
|
|
:label="item.label" |
|
|
|
|
:value="item.value" |
|
|
|
|
:key="item.dictKey" |
|
|
|
|
:label="item.dictValue" |
|
|
|
|
:value="item.dictKey" |
|
|
|
|
/> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
@ -50,54 +54,68 @@
|
|
|
|
|
<template v-if="details.form.isDistinguish === '1'"> |
|
|
|
|
<el-divider content-position="left">品类管理</el-divider> |
|
|
|
|
|
|
|
|
|
<!-- 附加费品类 --> |
|
|
|
|
<el-form-item |
|
|
|
|
v-for="value in details.form.billTemplateDetail" |
|
|
|
|
label-width="150px" |
|
|
|
|
:label="value.title" |
|
|
|
|
:key="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> |
|
|
|
|
<template v-for="value in details.form.billTemplateDetail" :key="value.title"> |
|
|
|
|
<!-- 附加费品类 --> |
|
|
|
|
<el-form-item |
|
|
|
|
label-width="150px" |
|
|
|
|
v-if="details.form.priceMethod.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 |
|
|
|
|
class="el_Cselect" |
|
|
|
|
v-model="item.Additionalcategories" |
|
|
|
|
filterable |
|
|
|
|
clearable |
|
|
|
|
placeholder="请选择品类" |
|
|
|
|
style="width: 240px" |
|
|
|
|
> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in Additionalcategories" |
|
|
|
|
:key="item.value" |
|
|
|
|
:label="item.label" |
|
|
|
|
:value="item.value" |
|
|
|
|
/> |
|
|
|
|
</el-select> |
|
|
|
|
<div class="el_table_operation"> |
|
|
|
|
<span |
|
|
|
|
v-if="item.reduce" |
|
|
|
|
@click="handleReduce(value, index)" |
|
|
|
|
class="el_table_operation_span_a" |
|
|
|
|
>-</span |
|
|
|
|
> |
|
|
|
|
<span |
|
|
|
|
v-if="item.plus" |
|
|
|
|
@click="handlePlus(value, index)" |
|
|
|
|
class="el_table_operation_span_b" |
|
|
|
|
>+</span |
|
|
|
|
<!-- 表格循环 --> |
|
|
|
|
<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> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form-item> |
|
|
|
|
</template> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<!-- 是否最低计费 --> |
|
|
|
|
@ -115,12 +133,14 @@
|
|
|
|
|
<template v-for="item in details.lowestType" :key="item.value"> |
|
|
|
|
<el-radio |
|
|
|
|
v-if="!item.MappingOrNot || details.form.priceMethod.includes(item.mapValue)" |
|
|
|
|
:label="item.value" |
|
|
|
|
:label="item.dictKey" |
|
|
|
|
size="large" |
|
|
|
|
>{{ item.label }} |
|
|
|
|
>{{ item.dictValue }} |
|
|
|
|
</el-radio> |
|
|
|
|
|
|
|
|
|
<el-radio v-else :label="item.value" size="large" disabled>{{ item.label }}</el-radio> |
|
|
|
|
<el-radio v-else :label="item.dictKey" size="large" disabled>{{ |
|
|
|
|
item.dictValue |
|
|
|
|
}}</el-radio> |
|
|
|
|
</template> |
|
|
|
|
</el-radio-group> |
|
|
|
|
</el-form-item> |
|
|
|
|
@ -128,30 +148,46 @@
|
|
|
|
|
<!-- 操作按钮 --> |
|
|
|
|
<div class="flex-c-c"> |
|
|
|
|
<el-button type="primary" icon="Refresh" @click="resetFormData">重置</el-button> |
|
|
|
|
<el-button type="primary" icon="Position" @click="resetFormData">保存</el-button> |
|
|
|
|
<el-button type="primary" icon="Position" @click="handleSubmit">保存</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
import { ref, reactive } from 'vue'; |
|
|
|
|
import { deepClone } from '@/utils/util'; |
|
|
|
|
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(); |
|
|
|
|
|
|
|
|
|
interface categories { |
|
|
|
|
/** 品类名称 */ |
|
|
|
|
label: string; |
|
|
|
|
goodsName: string; |
|
|
|
|
/** 品类id */ |
|
|
|
|
value: string; |
|
|
|
|
goodsId: string; |
|
|
|
|
/** 显示新增 */ |
|
|
|
|
plus: boolean; |
|
|
|
|
/** 显示删除 */ |
|
|
|
|
reduce: boolean; |
|
|
|
|
/** 品类名映射 */ |
|
|
|
|
goods: string; |
|
|
|
|
/** 模糊查询存放品类的数组 */ |
|
|
|
|
goodsArr: {}[]; |
|
|
|
|
/** loading */ |
|
|
|
|
loading: boolean; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
interface BillTemplateDetail { |
|
|
|
|
/** 标题 */ |
|
|
|
|
title: string; |
|
|
|
|
/** 对应的code */ |
|
|
|
|
code: string; |
|
|
|
|
/** 品类数组 */ |
|
|
|
|
categories: categories[]; |
|
|
|
|
} |
|
|
|
|
@ -200,19 +236,19 @@ const details = reactive({
|
|
|
|
|
{ |
|
|
|
|
label: '件', |
|
|
|
|
value: '1', |
|
|
|
|
mapValue: '0', |
|
|
|
|
mapValue: '1', |
|
|
|
|
MappingOrNot: true, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: '方数(m³)', |
|
|
|
|
value: '2', |
|
|
|
|
mapValue: '2', |
|
|
|
|
mapValue: '3', |
|
|
|
|
MappingOrNot: true, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: '重量(kg)', |
|
|
|
|
value: '3', |
|
|
|
|
mapValue: '3', |
|
|
|
|
mapValue: '4', |
|
|
|
|
MappingOrNot: true, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
@ -227,22 +263,9 @@ const details = reactive({
|
|
|
|
|
/** 是否最低计费 */ |
|
|
|
|
isLowest: '1', |
|
|
|
|
/** 最低计费类型 */ |
|
|
|
|
lowestMethod: '0', |
|
|
|
|
lowestMethod: '1', |
|
|
|
|
/** 计费模版详情 */ |
|
|
|
|
billTemplateDetail: [ |
|
|
|
|
{ |
|
|
|
|
/** 标题 */ |
|
|
|
|
title: '计费模版详情', |
|
|
|
|
/** 品类数组 */ |
|
|
|
|
categories: [{ reduce: false, plus: true, label: '12', value: '11' }], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
/** 标题 */ |
|
|
|
|
title: '计费模版详情', |
|
|
|
|
/** 品类数组 */ |
|
|
|
|
categories: [{ reduce: false, plus: true, label: '12', value: '11' }], |
|
|
|
|
}, |
|
|
|
|
] as BillTemplateDetail[], |
|
|
|
|
billTemplateDetail: [] as BillTemplateDetail[], |
|
|
|
|
}, |
|
|
|
|
/** 初始化form数据 */ |
|
|
|
|
initForm: {}, |
|
|
|
|
@ -252,8 +275,6 @@ const details = reactive({
|
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const AdditionalcategoriesList = ref([{ reduce: true, plus: true }]); |
|
|
|
|
const Additionalcategories = ref([{}]); |
|
|
|
|
const goriesloading = ref(false); |
|
|
|
|
|
|
|
|
|
/** 计价方式改变时 */ |
|
|
|
|
@ -272,13 +293,146 @@ const handleChangePrcieMethod = value => {
|
|
|
|
|
if (!details.form.priceMethod.includes(activeItem.mapValue)) details.form.lowestMethod = '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); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 初始化复制form数据 |
|
|
|
|
initFormData(); |
|
|
|
|
/** 新增品类 */ |
|
|
|
|
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) => { |
|
|
|
|
console.log('value :>> ', value); |
|
|
|
|
console.log('item :>> ', 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 = () => { |
|
|
|
|
@ -287,6 +441,8 @@ const resetFormData = () => {
|
|
|
|
|
cancelButtonText: '取消', |
|
|
|
|
type: 'warning', |
|
|
|
|
}).then(() => { |
|
|
|
|
formRef.value.resetFields(); |
|
|
|
|
|
|
|
|
|
details.loadingObj.pageLoading = true; |
|
|
|
|
details.form = deepClone(details.initForm); |
|
|
|
|
setTimeout(() => { |
|
|
|
|
@ -295,15 +451,13 @@ const resetFormData = () => {
|
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 新增品类 */ |
|
|
|
|
const handlePlus = (value: any, index: number) => { |
|
|
|
|
value.categories.splice(index + 1, 0, { reduce: true, plus: true }); |
|
|
|
|
}; |
|
|
|
|
/** 提交 */ |
|
|
|
|
const handleSubmit = () => { |
|
|
|
|
// if (details.form.priceMethod.length === 0) return ElMessage.error('请选择计价方式'); |
|
|
|
|
|
|
|
|
|
/** 删除品类 */ |
|
|
|
|
const handleReduce = (value: any, index: number) => { |
|
|
|
|
if (index === 0) return; |
|
|
|
|
value.categories.splice(index, 1); |
|
|
|
|
formRef.value.validate(async valid => { |
|
|
|
|
if (!valid) return; |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
