8 changed files with 1079 additions and 209 deletions
@ -0,0 +1,116 @@
|
||||
<template> |
||||
<div class="content_box"> |
||||
<div class="header"> |
||||
<!-- 模板名称 --> |
||||
<div class="el_Template"> |
||||
<span class="name">模板名称</span> |
||||
<el-input v-model="form.TemplateName" style="width: 240px" placeholder="请输入模板名称" /> |
||||
</div> |
||||
<!-- 服务类型 --> |
||||
<div class="el_Service"> |
||||
<span class="name">服务类型</span> |
||||
<el-select |
||||
v-model="form.ServiceType" |
||||
filterable |
||||
placeholder="请选择服务类型" |
||||
:popper-append-to-body="false" |
||||
style="width: 340px" |
||||
multiple |
||||
@remove-tag="removeTag" |
||||
> |
||||
<el-option |
||||
v-for="item in ServiceList" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
> |
||||
<el-checkbox v-model="item.check" @change="isChecked(item)"> |
||||
{{ item.label }} |
||||
</el-checkbox> |
||||
</el-option> |
||||
</el-select> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref } from 'vue'; |
||||
const form = ref({}); |
||||
const ServiceList = ref([ |
||||
{ |
||||
label: '提货', |
||||
value: '1', |
||||
}, |
||||
{ |
||||
label: '干线', |
||||
value: '2', |
||||
}, |
||||
{ |
||||
label: '仓储', |
||||
value: '3', |
||||
}, |
||||
{ |
||||
label: '配送', |
||||
value: '4', |
||||
}, |
||||
{ |
||||
label: '安装', |
||||
value: '5', |
||||
}, |
||||
]); |
||||
const isChecked = val => { |
||||
console.log(val); |
||||
}; |
||||
const removeTag=(value) =>{ |
||||
console.log(value,'value'); |
||||
ServiceList.value.find(res=>res.value==value).check=false |
||||
} |
||||
|
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.content_box { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.header { |
||||
.el_Template { |
||||
.name { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
display: flex; |
||||
.el_Service { |
||||
margin-left: 30px; |
||||
|
||||
.el-checkbox { |
||||
width: 100% !important; |
||||
padding: 0 30px; |
||||
.el-checkbox__label { |
||||
margin-left: 20px; |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.el-checkbox { |
||||
width: 100% !important; |
||||
padding-left: 10px; |
||||
box-sizing: border-box; |
||||
.el-checkbox__label { |
||||
margin-left: 20px; |
||||
} |
||||
} |
||||
.el-select-dropdown__item { |
||||
padding: 0; |
||||
} |
||||
.el-select-dropdown__item::after { |
||||
content: ''; |
||||
display: none; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,585 @@
|
||||
<template> |
||||
<div class="content_max"> |
||||
<!-- 仓储计费类型 --> |
||||
<div class="el_Storage"> |
||||
<span class="el_table_span">仓储计费类型</span> |
||||
<el-select |
||||
class="el_Cselect" |
||||
v-model="form.Storagebillingtype" |
||||
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.Warehousebillingmode" |
||||
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.CalculationBasis" 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 v-model="form.Distinguishcategories" 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"> |
||||
<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.Warehousecategory" |
||||
filterable |
||||
clearable |
||||
placeholder="请选择品类" |
||||
style="width: 240px" |
||||
> |
||||
<el-option |
||||
v-for="item in Warehousecategory" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.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.Surchargepricingunit" |
||||
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.Managementfees" 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.Operatingunloading" 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.Sortingfee" 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-select |
||||
class="el_Cselect" |
||||
v-model="form.Additionalfeebilling" |
||||
filterable |
||||
clearable |
||||
placeholder="附加费用是否统一计费" |
||||
style="width: 240px" |
||||
> |
||||
<el-option |
||||
v-for="item in Additionalfeebilling" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</div> |
||||
|
||||
<!-- 附加费品类配置 --> |
||||
<div class="el_Storage"> |
||||
<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.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 |
||||
@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> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref } from 'vue'; |
||||
const Storageloading = ref(false); //仓储品类加载 |
||||
const goriesloading = ref(false); //仓储品类加载 |
||||
const form = ref({ |
||||
CalculationBasis: '1', // 计算基准 |
||||
Distinguishcategories: '1', //是否区分品类 |
||||
Managementfees: '1', //是否有管理费 |
||||
Operatingunloading: '1', //是否有操作/装卸费 |
||||
Sortingfee: '1', //是否有分拣费 |
||||
}); //表单 |
||||
// 仓储计费类型 |
||||
const Storagebillingtype = ref([ |
||||
{ |
||||
value: '1', |
||||
label: '按件', |
||||
}, |
||||
{ |
||||
value: '2', |
||||
label: '按方', |
||||
}, |
||||
{ |
||||
value: '3', |
||||
label: '按重量(KG)', |
||||
}, |
||||
{ |
||||
value: '4', |
||||
label: '按吨', |
||||
}, |
||||
]); |
||||
// 仓储计费模式 |
||||
const Warehousebillingmode = ref([ |
||||
{ |
||||
value: '1', |
||||
label: '分段式计费', |
||||
}, |
||||
{ |
||||
value: '2', |
||||
label: '最高标准计费', |
||||
}, |
||||
]); |
||||
// 计算基准 |
||||
const CalculationBasis = ref([ |
||||
{ |
||||
value: '1', |
||||
label: '按件/天', |
||||
}, |
||||
{ |
||||
value: '2', |
||||
label: '按件/月', |
||||
}, |
||||
]); |
||||
// 是否区分品类 |
||||
const Distinguishcategories = ref([ |
||||
{ |
||||
value: '1', |
||||
label: '是', |
||||
}, |
||||
{ |
||||
value: '2', |
||||
label: '否', |
||||
}, |
||||
]); |
||||
// 仓库品类列表 |
||||
const Warehousecategory = ref([ |
||||
{ |
||||
label: '衣柜', |
||||
value: '1', |
||||
}, |
||||
{ |
||||
label: '橱柜', |
||||
value: '2', |
||||
}, |
||||
]); |
||||
// 仓储品类配置 |
||||
const StoragecategoryList = ref([ |
||||
{ |
||||
id: 1, |
||||
plus: true, |
||||
reduce: false, |
||||
}, |
||||
{ |
||||
id: 2, |
||||
plus: true, |
||||
reduce: true, |
||||
}, |
||||
]); |
||||
// 附加费品类配置 |
||||
const AdditionalcategoriesList = ref([ |
||||
{ |
||||
id: 1, |
||||
plus: true, |
||||
reduce: false, |
||||
}, |
||||
{ |
||||
id: 2, |
||||
plus: true, |
||||
reduce: true, |
||||
}, |
||||
]); |
||||
// 附加费品类 |
||||
const Additionalcategories = ref([ |
||||
{ |
||||
label: '衣柜', |
||||
value: '1', |
||||
}, |
||||
{ |
||||
label: '橱柜', |
||||
value: '2', |
||||
}, |
||||
]); |
||||
// 附加计费单位 |
||||
const Surchargepricingunit = ref([ |
||||
{ |
||||
label: '件', |
||||
value: '1', |
||||
}, |
||||
{ |
||||
label: '方', |
||||
value: '2', |
||||
}, |
||||
{ |
||||
label: '重量(KG)', |
||||
value: '3', |
||||
}, |
||||
{ |
||||
label: '吨(KG)', |
||||
value: '4', |
||||
}, |
||||
]); |
||||
// 是否有管理费 |
||||
const Managementfees = ref([ |
||||
{ |
||||
value: '1', |
||||
label: '是', |
||||
}, |
||||
{ |
||||
value: '0', |
||||
label: '否', |
||||
}, |
||||
]); |
||||
// 是否有操作/装卸费 |
||||
const Operatingunloading = ref([ |
||||
{ |
||||
value: '1', |
||||
label: '是', |
||||
}, |
||||
{ |
||||
value: '0', |
||||
label: '否', |
||||
}, |
||||
]); |
||||
// 是否有分拣费 |
||||
const Sortingfee = ref([ |
||||
{ |
||||
value: '1', |
||||
label: '是', |
||||
}, |
||||
{ |
||||
value: '0', |
||||
label: '否', |
||||
}, |
||||
]); |
||||
// 附加费用是否统一计费 |
||||
const Additionalfeebilling = ref([ |
||||
{ |
||||
value: '1', |
||||
label: '是', |
||||
}, |
||||
{ |
||||
value: '2', |
||||
label: '否', |
||||
}, |
||||
]); |
||||
// 移除对象 |
||||
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); |
||||
} |
||||
// 添加对象 |
||||
function addItemAfterId(array, id) { |
||||
const newItem = { |
||||
id: array.length + 1, // 新对象的 ID 为当前数组长度加 1 |
||||
plus: true, |
||||
reduce: true, |
||||
}; |
||||
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 = val => { |
||||
console.log(val); |
||||
Storageloading.value = true; |
||||
removeItemById(StoragecategoryList.value, val); |
||||
}; |
||||
// 仓储加 |
||||
const storageplus = val => { |
||||
Storageloading.value = true; |
||||
addItemAfterId(StoragecategoryList.value, val); |
||||
}; |
||||
// 附加品类加 |
||||
const categoriesplus = val => { |
||||
goriesloading.value = true; |
||||
addItemAfterId(AdditionalcategoriesList.value, val); |
||||
}; |
||||
// 附加品类减 |
||||
const categoriesduce = val => { |
||||
goriesloading.value = true; |
||||
removeItemById(AdditionalcategoriesList.value, val); |
||||
}; |
||||
</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 { |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue