2 changed files with 248 additions and 1 deletions
@ -0,0 +1,232 @@
|
||||
<template> |
||||
<div class="content_box" v-loading='ServiceTypeLoading'> |
||||
<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.brand" |
||||
filterable |
||||
placeholder="请选择品牌" |
||||
:popper-append-to-body="false" |
||||
style="width: 340px" |
||||
> |
||||
<el-option |
||||
v-for="item in brand" |
||||
:key="item.value" |
||||
:label="item.brandName" |
||||
:value="item.id" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</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" |
||||
:loading='ServiceTypeLoading' |
||||
> |
||||
<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="content" > |
||||
<el-tabs type="border-card" v-model="Tabmenu"> |
||||
<template v-for="item in ServiceList" :key="item.label"> |
||||
<el-tab-pane :name="item.label" v-if="item.state" :label="item.label"> |
||||
<span v-if="item.label == '提货'"><FinancialBill /></span> |
||||
<span v-if="item.label == '干线'"><FinancialTrunkLine @request-data="provideData" :templateData="templateInfo"/></span> |
||||
<span v-if="item.label == '仓储'" |
||||
><FinancialWarehousing @request-data="provideData" :templateData="templateInfo" |
||||
/></span> |
||||
<span v-if="item.label == '配送'"><FinancialDelivery @request-data="provideData" :templateData="templateInfo"/></span> |
||||
<span v-if="item.label == '安装'">安装</span> |
||||
</el-tab-pane> |
||||
</template> |
||||
</el-tabs> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, defineAsyncComponent } from 'vue'; |
||||
import { getDictionaryBiz } from '@/api/system/dict'; //字典 |
||||
import { $_basicdataBrande} from '@/api/financialsector/index'; //价格模板 |
||||
//仓储模板 |
||||
const FinancialWarehousing = defineAsyncComponent(() => |
||||
import('@/views/financialsector/Financialse/FinancialWarehousing.vue') |
||||
); |
||||
/** 提货模板 */ |
||||
const FinancialBill = defineAsyncComponent(() => |
||||
import('@/views/financialsector/Financialse/FinancialBill.vue') |
||||
); |
||||
/** 干线模板 */ |
||||
const FinancialTrunkLine = defineAsyncComponent(() => |
||||
import('@/views/financialsector/Financialse/FinancialTrunkLine.vue') |
||||
); |
||||
// 配送模板 |
||||
const FinancialDelivery = defineAsyncComponent(() => |
||||
import('@/views/financialsector/Financialse/FinancialDelivery.vue') |
||||
); |
||||
const ServiceTypeLoading=ref(true);//菜单加载 |
||||
const form = ref({}); |
||||
const brand=ref([]);//品牌 |
||||
const Tabmenu = ref('仓储'); |
||||
const templateInfo = ref({}); |
||||
// 菜单列表 |
||||
const ServiceList = ref([]); |
||||
// 字典公共函数 |
||||
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, |
||||
}); |
||||
}); |
||||
} |
||||
} |
||||
}).catch(()=>{ |
||||
}).finally(()=>{ |
||||
ServiceTypeLoading.value=false; |
||||
}); |
||||
} |
||||
// 页面初始化必要请求 |
||||
const onLoad=()=>{ |
||||
updateDictionary(ServiceList.value,'service_type');//菜单加载 |
||||
let data={ |
||||
current:1, |
||||
size:1000, |
||||
} |
||||
$_basicdataBrande(data).then(res=>{ |
||||
console.log(res,'品牌'); |
||||
if(res.data.code == 200){ |
||||
brand.value=res.data.data |
||||
} |
||||
}) |
||||
} |
||||
onLoad() |
||||
// 点击菜单 |
||||
const isChecked = val => { |
||||
//菜单隐藏/显示 |
||||
val.state = !val.state; |
||||
//设置激活菜单 |
||||
Tabmenu.value = val.label; |
||||
// 如果当前菜单被关闭则显示最新菜单 |
||||
if (!val.state && form.value.ServiceType.length) { |
||||
Tabmenu.value = ServiceList.value.find(res => res.state).label; |
||||
} |
||||
}; |
||||
// 点击移除 |
||||
const removeTag = value => { |
||||
ServiceList.value.find(res => res.value == value).check = false; |
||||
ServiceList.value.find(res => res.value == value).state = false; |
||||
// 激活菜单设置为已经存在的 |
||||
if (form.value.ServiceType.length) { |
||||
Tabmenu.value = ServiceList.value.find(res => res.state).label; |
||||
} |
||||
}; |
||||
|
||||
// 给子页面传递数据 |
||||
const provideData = (data) => { |
||||
console.log(data,'来自子页面的数据'); |
||||
console.log(form.value,'form.value'); |
||||
|
||||
templateInfo.value = form.value; |
||||
if(data){ |
||||
templateInfo.value.code=data;//接收来自子页面第一次保存的返回值 |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.content_box { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.header { |
||||
border-bottom: 1px solid #ccc; |
||||
padding: 10px; |
||||
box-shadow: -1px -1px 3px; |
||||
.el_Template { |
||||
display: flex; |
||||
align-items: center; |
||||
.name { |
||||
font-size: 16px; |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
display: flex; |
||||
.el_Service { |
||||
margin-left: 30px; |
||||
display: flex; |
||||
align-items: center; |
||||
.name { |
||||
margin-right: 10px; |
||||
} |
||||
.el-checkbox { |
||||
width: 100% !important; |
||||
padding: 0 30px; |
||||
.el-checkbox__label { |
||||
width: 100%; |
||||
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; |
||||
} |
||||
.content { |
||||
margin-top: 6px; |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue