4 changed files with 297 additions and 8 deletions
@ -0,0 +1,259 @@
|
||||
<template> |
||||
<div class="content_max"> |
||||
<!-- 配送服务类型 --> |
||||
<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_select_check"> |
||||
<div class="el_Storage el_Service"> |
||||
<span class="el_table_span name">服务类型</span> |
||||
<el-select |
||||
v-model="form.ServiceType" |
||||
filterable |
||||
placeholder="请选择服务类型" |
||||
:popper-append-to-body="false" |
||||
style="width: 660px" |
||||
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 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> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref } from 'vue'; |
||||
const form = ref({}); //表单 |
||||
// 配送服务类型 |
||||
const Warehousebillingmode = ref([ |
||||
{ label: '市配', value: '1' }, |
||||
{ label: '商配', value: '2' }, |
||||
]); |
||||
// 配送计费模式 |
||||
const ServiceList = ref([ |
||||
{ |
||||
label: '按计件计费', |
||||
value: '1', |
||||
check: false, |
||||
}, |
||||
{ |
||||
label: '按重量计费', |
||||
value: '2', |
||||
check: false, |
||||
}, |
||||
{ |
||||
label: '按方计费', |
||||
value: '3', |
||||
check: false, |
||||
}, |
||||
{ |
||||
label: '按整车计费', |
||||
value: '4', |
||||
state: false, |
||||
check: false, |
||||
}, |
||||
{ |
||||
label: '按点位计费', |
||||
value: '5', |
||||
check: false, |
||||
}, |
||||
{ |
||||
label: '按吨计费', |
||||
value: '6', |
||||
check: false, |
||||
}, |
||||
{ |
||||
label: '按公里计费', |
||||
value: '7', |
||||
check: false, |
||||
}, |
||||
]); |
||||
|
||||
// 是否区分品类 |
||||
const Distinguishcategories = ref([ |
||||
{label: '是', value: '1'}, |
||||
{label: '否', value: '0'}, |
||||
]) |
||||
// 点击菜单 |
||||
const isChecked = val => { |
||||
console.log(val, '点击的'); |
||||
}; |
||||
// 点击移除 |
||||
const removeTag = value => { |
||||
ServiceList.value.find(res => res.value == value).check = false; |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.content_max { |
||||
padding: 10px; |
||||
} |
||||
|
||||
.el_Service { |
||||
display: flex; |
||||
align-items: center; |
||||
.name { |
||||
margin-right: 10px; |
||||
} |
||||
.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; |
||||
} |
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue