Skip to content

O
op-web-service
Commit 94329bc6 authored by mengwenhao's avatar mengwenhao
Browse files
Options

fix:商品-门店列表选择列表优化

parent 201207c7
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 86 deletions
src/pages/Goods/Detail/index.vue
View file @ 94329bc6
...@@ -225,6 +225,7 @@ ...@@ -225,6 +225,7 @@
placement="bottom" placement="bottom"
:width="800" :width="800"
trigger="click" trigger="click"
v-model:visible="shopListShow"
> >
<template #reference> <template #reference>
<el-button <el-button
...@@ -239,12 +240,14 @@ ...@@ -239,12 +240,14 @@
ref="shopListRef" ref="shopListRef"
:data="shopsList" :data="shopsList"
@selection-change="handleShopsChange" @selection-change="handleShopsChange"
row-key="sub_shop_id"
> >
<!-- :selectable="canChooseShop"↓ -->
<el-table-column <el-table-column
type="selection" type="selection"
width="55" width="55"
:selectable="canChooseShop"
aria-checked="true" aria-checked="true"
:reserve-selection="true"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
...@@ -276,7 +279,7 @@ ...@@ -276,7 +279,7 @@
<!-- 分页 --> <!-- 分页 -->
<el-pagination <el-pagination
style="margin-top:20px" style="margin-top:20px;"
background background
@current-change="changeShopListPage" @current-change="changeShopListPage"
v-model:currentPage="shopCurrentPage" v-model:currentPage="shopCurrentPage"
...@@ -285,64 +288,71 @@ ...@@ -285,64 +288,71 @@
:total="shopsCount" :total="shopsCount"
> >
</el-pagination> </el-pagination>
<!-- 添加门店弹窗 --> <section style="display:flex;justify-content:center;">
<el-popover <el-button
placement="bottom" type="primary"
:width="600" style="border-radius:20px;"
trigger="click" @click="handleChooseShops"
:visible="addShopShow" >确定</el-button>
> <!-- 添加门店弹窗 -->
<template #reference> <el-popover
<el-button placement="bottom"
@click="addShopShow = true" :width="600"
type="primary" trigger="click"
style="border-radius:20px;margin:20px 0 0 50%;transform: translate(-50%,0);" :visible="addShopShow"
>添加门店
</el-button>
</template>
<!-- 添加门店表单 -->
<el-form
label-position="right"
label-width="100px"
:model="shopForm"
> >
<el-form-item label="门店名称："> <template #reference>
<el-input <el-button
v-model="shopForm.shop_name" @click="addShopShow = true"
maxlength="20" type="primary"
show-word-limit style="border-radius:20px;"
></el-input> >添加门店
</el-form-item> </el-button>
<el-form-item label="联系电话："> </template>
<el-input <!-- 添加门店表单 -->
v-model="shopForm.connect_phone" <el-form
maxlength="11" label-position="right"
show-word-limit label-width="100px"
></el-input> :model="shopForm"
</el-form-item>
<el-form-item label="地址：">
<el-input v-model="shopForm.address"></el-input>
</el-form-item>
<el-form-item
label="地理定位："
class="deep_place"
> >
<el-input v-model="shopForm.deep_place"></el-input> <el-form-item label="门店名称：">
<a <el-input
style="" v-model="shopForm.shop_name"
target="_blank" maxlength="20"
href="https://lbs.amap.com/tools/picker" show-word-limit
>高德获取定位</a> ></el-input>
</el-form-item> </el-form-item>
</el-form> <el-form-item label="联系电话：">
<section style="display:flex;justify-content:center;"> <el-input
<el-button v-model="shopForm.connect_phone"
type="primary" maxlength="11"
@click="addShop" show-word-limit
>保存</el-button> ></el-input>
<el-button @click="closeAddShops">取消</el-button> </el-form-item>
</section> <el-form-item label="地址：">
</el-popover> <el-input v-model="shopForm.address"></el-input>
</el-form-item>
<el-form-item
label="地理定位："
class="deep_place"
>
<el-input v-model="shopForm.deep_place"></el-input>
<a
style=""
target="_blank"
href="https://lbs.amap.com/tools/picker"
>高德获取定位</a>
</el-form-item>
</el-form>
<section style="display:flex;justify-content:center;">
<el-button
type="primary"
@click="addShop"
>保存</el-button>
<el-button @click="closeAddShops">取消</el-button>
</section>
</el-popover>
</section>
</el-popover> </el-popover>
</section> </section>
<section class="width50p"> <section class="width50p">
...@@ -680,7 +690,7 @@ export default { ...@@ -680,7 +690,7 @@ export default {
if (!val) { if (!val) {
this.rejectReason.reason = ""; this.rejectReason.reason = "";
} }
} },
}, },
data () { data () {
...@@ -740,6 +750,7 @@ export default { ...@@ -740,6 +750,7 @@ export default {
}, },
shopsList: [], // 门店列表 shopsList: [], // 门店列表
shopListShow: false, // 门店列表是否展示
shopId: [], // 门店id数组 shopId: [], // 门店id数组
chooseShopsList: [], // 已选门店列表 chooseShopsList: [], // 已选门店列表
shopsCount: 0, shopsCount: 0,
...@@ -889,32 +900,45 @@ export default { ...@@ -889,32 +900,45 @@ export default {
this.shopsList.forEach(row => { this.shopsList.forEach(row => {
if (this.shopId.indexOf(row.sub_shop_id) !== -1) { if (this.shopId.indexOf(row.sub_shop_id) !== -1) {
this.$refs.shopListRef.toggleRowSelection(row, true); this.$refs.shopListRef.toggleRowSelection(row, true);
} else {
this.$refs.shopListRef.toggleRowSelection(row, false);
} }
}); });
}); });
}, },
// 删除已选择门店
deleteShops (subShopId) {
this.goodsObj.sub_shop = this.goodsObj.sub_shop.filter(item => {
return item.sub_shop_id !== subShopId;
});
this.shopId = this.goodsObj.sub_shop.map(item => {
return item.sub_shop_id;
});
this.shopIds = this.shopId.join(",");
},
// 门店列表更改时操作 // 门店列表更改时操作
handleShopsChange (value) { handleShopsChange (value) {
this.goodsObj.sub_shop = value; this.chooseShopsList = [];
this.chooseShopsList = value;
console.log("已选择列表的长度", this.chooseShopsList.length);
const shopList = value.map(item => { const shopList = value.map(item => {
return item.sub_shop_id; return item.sub_shop_id;
}); });
this.shopIds = ""; this.shopIds = "";
this.shopIds = shopList.join(","); this.shopIds = shopList.join(",");
}, },
// 是否可选门店 // 商品列表换页
canChooseShop (row) { changeShopListPage (page) {
if ( this.shopCurrentPage = page;
this.goodsObj.sub_shop.length === 0 || this.getShops();
this.shopIds === row.sub_shop_id },
) { // 确认选择的店铺
return true; handleChooseShops () {
} else { this.goodsObj.sub_shop = this.chooseShopsList;
return false; this.shopListShow = false;
}
}, },
// 添加新门店 // 添加新门店
async addShop () { async addShop () {
const deepPlace = this.shopForm.deep_place.split(","); const deepPlace = this.shopForm.deep_place.split(",");
...@@ -953,22 +977,23 @@ export default { ...@@ -953,22 +977,23 @@ export default {
this.addShopShow = false; this.addShopShow = false;
}, },
// 删除已选择门店 // 是否可选门店
deleteShops (subShopId) { // canChooseShop (row) {
this.goodsObj.sub_shop = this.goodsObj.sub_shop.filter(item => { // if (
return item.sub_shop_id !== subShopId; // this.chooseShopsList.length === 0 ||
}); // this.shopIds === row.sub_shop_id
this.shopId = this.goodsObj.sub_shop.map(item => { // ) {
return item.sub_shop_id; // return true;
}); // } else {
this.shopIds = this.shopId.join(","); // return false;
}, // }
// },
// 商品列表换页
changeShopListPage (page) {
this.shopCurrentPage = page;
this.getShops();
},
// 取消新建门店 // 取消新建门店
closeAddShops () { closeAddShops () {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment