kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

定制方案-小程序-底部导航栏增加 添加按钮和位置控制

Browse Source
This commit is contained in:
aixianling
2023-01-05 09:49:07 +08:00
parent c42f6006b8
commit 39707d88d5
1 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
project/oms/apps/develop/AppDeployCustom/add.vue
View File

@@ -110,11 +110,13 @@
<el-form-item label="接口是否单服务"> <el-form-item label="接口是否单服务">
<el-checkbox v-model="form.isSingleService"/> <el-checkbox v-model="form.isSingleService"/>
</el-form-item> </el-form-item>
<ai-title title="底部导航栏"/> <ai-title title="底部导航栏">
<ai-table :tableData="tabBar.list" :colConfigs="colConfigs" tableSize="mini" :isShowPagination="false" border> <el-button type="text" slot="rightBtn" icon="iconfont iconAdd" @click="tabBar.list.push({})">添加</el-button>
<el-table-column slot="options" label="操作" width="140" align="center"> </ai-title>
<ai-table :tableData="tabBar.list" :colConfigs="colConfigs" tableSize="mini" :isShowPagination="false" border ref="TabBar">
<el-table-column slot="options" label="操作" width="260" align="center">
<template slot-scope="{row,$index}"> <template slot-scope="{row,$index}">
<el-row type="flex" justify="center"> <el-row type="flex" class="tabBarOptions">
<ai-dialog-btn text="更换" dialogTitle="选择应用"> <ai-dialog-btn text="更换" dialogTitle="选择应用">
<ai-lib-table :meta="appList" v-model="row.id" @select="v=>handleTabbarChange(row,v)" :isShowPagination="false" v-bind="$props" <ai-lib-table :meta="appList" v-model="row.id" @select="v=>handleTabbarChange(row,v)" :isShowPagination="false" v-bind="$props"
:border="false"/> :border="false"/>
@@ -131,6 +133,8 @@
</el-form-item> </el-form-item>
</ai-dialog-btn> </ai-dialog-btn>
<el-button type="text" @click="handleTabbarDelete($index)">删除</el-button> <el-button type="text" @click="handleTabbarDelete($index)">删除</el-button>
<el-button type="text" @click="handleTabbarPosition($index,-1)" v-if="$index>0">上移</el-button>
<el-button type="text" @click="handleTabbarPosition($index,1)" v-if="$index<tabBar.list.length-1">下移</el-button>
</el-row> </el-row>
</template> </template>
</el-table-column> </el-table-column>
@@ -246,7 +250,7 @@ export default {
// customPath: {required: true, message: "请输入"}, // customPath: {required: true, message: "请输入"},
}, },
colConfigs: [ colConfigs: [
{prop: 'text', label: "名称"}, {prop: 'text', label: "名称", width: 120},
{prop: 'pagePath', label: "应用路径"}, {prop: 'pagePath', label: "应用路径"},
{prop: 'iconPath', label: "默认图标"}, {prop: 'iconPath', label: "默认图标"},
{prop: 'selectedIconPath', label: "选中图标"}, {prop: 'selectedIconPath', label: "选中图标"},
@@ -350,6 +354,11 @@ export default {
handleAppEdit(row) { handleAppEdit(row) {
const i = this.form.appList.findIndex(e => e.id == row.id) const i = this.form.appList.findIndex(e => e.id == row.id)
this.form.appList.splice(i, 1, row) this.form.appList.splice(i, 1, row)
},
handleTabbarPosition(i, offset) {
const row = this.tabBar.list[i]
this.tabBar.list.splice(i, 1, this.tabBar.list[i + offset])
this.tabBar.list.splice(i + offset, 1, row)
} }
}, },
created() { created() {
@@ -365,5 +374,13 @@ export default {
.mar-l16 { .mar-l16 {
margin-left: 16px; margin-left: 16px;
} }
:deep(.tabBarOptions) {
flex-wrap: wrap;
.el-button--text + .el-button--text {
margin-left: 0;
}
}
} }
</style> </style>