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 @@
placement="bottom"
:width="800"
trigger="click"
v-model:visible="shopListShow"
>
<template #reference>
<el-button
......@@ -239,12 +240,14 @@
ref="shopListRef"
:data="shopsList"
@selection-change="handleShopsChange"
row-key="sub_shop_id"
>
<!-- :selectable="canChooseShop"↓ -->
<el-table-column
type="selection"
width="55"
:selectable="canChooseShop"
aria-checked="true"
:reserve-selection="true"
>
</el-table-column>
<el-table-column
......@@ -276,7 +279,7 @@
<!-- 分页 -->
<el-pagination
style="margin-top:20px"
style="margin-top:20px;"
background
@current-change="changeShopListPage"
v-model:currentPage="shopCurrentPage"
......@@ -285,64 +288,71 @@
:total="shopsCount"
>
</el-pagination>
<!-- 添加门店弹窗 -->
<el-popover
placement="bottom"
:width="600"
trigger="click"
:visible="addShopShow"
>
<template #reference>
<el-button
@click="addShopShow = true"
type="primary"
style="border-radius:20px;margin:20px 0 0 50%;transform: translate(-50%,0);"
>添加门店
</el-button>
</template>
<!-- 添加门店表单 -->
<el-form
label-position="right"
label-width="100px"
:model="shopForm"
<section style="display:flex;justify-content:center;">
<el-button
type="primary"
style="border-radius:20px;"
@click="handleChooseShops"
>确定</el-button>
<!-- 添加门店弹窗 -->
<el-popover
placement="bottom"
:width="600"
trigger="click"
:visible="addShopShow"
>
<el-form-item label="门店名称：">
<el-input
v-model="shopForm.shop_name"
maxlength="20"
show-word-limit
></el-input>
</el-form-item>
<el-form-item label="联系电话：">
<el-input
v-model="shopForm.connect_phone"
maxlength="11"
show-word-limit
></el-input>
</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"
<template #reference>
<el-button
@click="addShopShow = true"
type="primary"
style="border-radius:20px;"
>添加门店
</el-button>
</template>
<!-- 添加门店表单 -->
<el-form
label-position="right"
label-width="100px"
:model="shopForm"
>
<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>
<el-form-item label="门店名称：">
<el-input
v-model="shopForm.shop_name"
maxlength="20"
show-word-limit
></el-input>
</el-form-item>
<el-form-item label="联系电话：">
<el-input
v-model="shopForm.connect_phone"
maxlength="11"
show-word-limit
></el-input>
</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>
<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>
</section>
<section class="width50p">
......@@ -680,7 +690,7 @@ export default {
if (!val) {
this.rejectReason.reason = "";
}
}
},
},
data () {
......@@ -740,6 +750,7 @@ export default {
},
shopsList: [], // 门店列表
shopListShow: false, // 门店列表是否展示
shopId: [], // 门店id数组
chooseShopsList: [], // 已选门店列表
shopsCount: 0,
......@@ -889,32 +900,45 @@ export default {
this.shopsList.forEach(row => {
if (this.shopId.indexOf(row.sub_shop_id) !== -1) {
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) {
this.goodsObj.sub_shop = value;
this.chooseShopsList = [];
this.chooseShopsList = value;
console.log("已选择列表的长度", this.chooseShopsList.length);
const shopList = value.map(item => {
return item.sub_shop_id;
});
this.shopIds = "";
this.shopIds = shopList.join(",");
},
// 是否可选门店
canChooseShop (row) {
if (
this.goodsObj.sub_shop.length === 0 ||
this.shopIds === row.sub_shop_id
) {
return true;
} else {
return false;
}
// 商品列表换页
changeShopListPage (page) {
this.shopCurrentPage = page;
this.getShops();
},
// 确认选择的店铺
handleChooseShops () {
this.goodsObj.sub_shop = this.chooseShopsList;
this.shopListShow = false;
},
// 添加新门店
async addShop () {
const deepPlace = this.shopForm.deep_place.split(",");
......@@ -953,22 +977,23 @@ export default {
this.addShopShow = 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(",");
},
// 是否可选门店
// canChooseShop (row) {
// if (
// this.chooseShopsList.length === 0 ||
// this.shopIds === row.sub_shop_id
// ) {
// return true;
// } else {
// return false;
// }
// },
// 商品列表换页
changeShopListPage (page) {
this.shopCurrentPage = page;
this.getShops();
},
// 取消新建门店
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