chuangte/boom-light-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

店铺相关模块

Browse Source
This commit is contained in:
SjS 2025-04-22 19:43:54 +08:00
parent b663ea26b6
commit baaae1cbce
3 changed files with 218 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/views/bst/booth/index.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="分区ID" prop="partId">
<el-form-item label="所属分区" prop="partName">
<el-input
v-model="queryParams.partId"
placeholder="请输入分区ID"
v-model="queryParams.partName"
placeholder="请输入所属分区"
clearable
@keyup.enter.native="handleQuery"
@change="handleQuery"
/>
</el-form-item>
<el-form-item label="卡座名称" prop="boothName">
@ -14,6 +14,7 @@
v-model="queryParams.boothName"
placeholder="请输入卡座名称"
clearable
@change="handleQuery"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
@ -59,29 +60,14 @@
</el-row>
<el-table v-loading="loading" :data="boothList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="onSortChange">
<el-table-column type="selection" width="55" align="center" />
<template v-for="column of showColumns">
<el-table-column
:key="column.key"
:label="column.label"
:prop="column.key"
:align="column.align"
:min-width="column.minWidth"
:sort-orders="orderSorts"
:sortable="column.sortable"
:show-overflow-tooltip="column.overflow"
:width="column.width"
>
<template slot-scope="d">
<template v-if="column.key === 'boothId'">
{{d.row[column.key]}}
</template>
<template v-else>
{{d.row[column.key]}}
</template>
</template>
<el-table-column type="selection" width="25" align="center" />
<!-- <el-table-column label="卡座ID" align="center" prop="boothId" />-->
<!-- <el-table-column label="所属店铺" align="center" prop="storeName" />-->
<el-table-column label="所属分区" align="center" prop="partName" />
<el-table-column label="卡座名称" align="center" prop="boothName" />
<el-table-column label="卡座图片" align="center" prop="picture" >
<image-preview slot-scope="d" :src="d.row.picture" :width="50" :height="50"/>
</el-table-column>
</template>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
@ -114,14 +100,43 @@
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<form-col :span="span" label="分区ID" prop="partId">
<el-input v-model="form.partId" placeholder="请输入分区ID" />
</form-col>
<!-- <el-form-item label="选择店铺" prop="storeId">-->
<!-- <el-select-->
<!-- v-model="form.storeId"-->
<!-- placeholder="请选择店铺"-->
<!-- clearable-->
<!-- filterable-->
<!-- :loading="loading"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="item in storeOptions"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="选择分区" prop="partId">
<el-select
v-model="form.partId"
placeholder="请选择分区"
clearable
filterable
:loading="loading"
>
<el-option
v-for="item in partOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<form-col :span="span" label="卡座名称" prop="boothName">
<el-input v-model="form.boothName" placeholder="请输入卡座名称" />
</form-col>
<form-col :span="span" label="分区图片" prop="picture">
<el-input v-model="form.picture" type="textarea" placeholder="请输入内容" />
<form-col :span="span" label="卡座图片" prop="picture">
<image-upload v-model="form.picture" type="textarea" placeholder="请输入内容" />
</form-col>
</el-row>
</el-form>
@ -137,6 +152,8 @@
import { listBooth, getBooth, delBooth, addBooth, updateBooth } from "@/api/bst/booth";
import { $showColumns } from '@/utils/mixins';
import FormCol from "@/components/FormCol/index.vue";
import {listStore} from "@/api/bst/store";
import {listPart} from "@/api/bst/part";
// 默认排序字段
const defaultSort = {
@ -168,6 +185,10 @@ export default {
single: true,
// 非多个禁用
multiple: true,
// 店铺选项
storeOptions: [],
// 分区选项
partOptions: [],
// 显示搜索条件
showSearch: true,
// 总条数
@ -195,14 +216,46 @@ export default {
rules: {
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
]
],
partId: [
{ required: true, message: "分区不能为空", trigger: "blur" }
],
boothName: [
{ required: true, message: "卡座名称不能为空", trigger: "blur" }
],
}
};
},
created() {
this.getList();
this.getStoreList();
this.getPartList();
},
methods: {
/** 查询分区列表 */
getPartList() {
this.loading = true;
listPart().then(response => {
console.log(response)
this.partOptions = (response.data || []).map(item => ({
value: item.partId,
label: item.partName
}))
this.loading = false
});
},
/** 查询店铺列表 */
getStoreList() {
this.loading = true;
listStore().then(response => {
this.storeOptions = (response.rows || []).map(item => ({
value: item.storeId,
label: item.storeName
}))
this.loading = false
});
},
/** 当排序按钮被点击时触发 **/
onSortChange(column) {
if (column.order == null) {

73
src/views/bst/part/index.vue
View File

@ -1,20 +1,12 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="父分区ID" prop="parentId">
<el-form-item label="所属楼层" prop="floorName">
<el-input
v-model="queryParams.parentId"
placeholder="请输入父分区ID"
v-model="queryParams.floorName"
placeholder="请输入楼层名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="店铺ID" prop="storeId">
<el-input
v-model="queryParams.storeId"
placeholder="请输入店铺ID"
clearable
@keyup.enter.native="handleQuery"
@change="handleQuery"
/>
</el-form-item>
<el-form-item label="分区名称" prop="partName">
@ -62,10 +54,12 @@
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column label="分区所属" prop="parentId" />
<el-table-column label="店铺名称" align="center" prop="storeId" />
<el-table-column label="所在楼层" align="center" prop="floorName" />
<el-table-column label="分区名称" align="center" prop="partName" />
<el-table-column label="分区图片" align="center" prop="picture" />
<el-table-column label="分区图片" align="center" prop="picture" >
<image-preview slot-scope="d" :src="d.row.picture" :width="65" :height="65"/>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
@ -96,21 +90,21 @@
<!-- 添加或修改分区对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="所在楼层" prop="floorId">
<el-select
v-model="form.storeId"
placeholder="请选择店铺"
v-model="form.floorId"
placeholder="请选择楼层"
clearable
filterable
:loading="loading"
>
<el-option
v-for="item in storeOptions"
v-for="item in floorOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-form-item label="分区所属" prop="parentId">
<treeselect v-model="form.parentId" :options="partOptions" :normalizer="normalizer" placeholder="请选择分区所属" />
</el-form-item>
<el-form-item label="分区名称" prop="partName">
<el-input v-model="form.partName" placeholder="请输入分区名称" />
@ -128,11 +122,11 @@
</template>
<script>
import {getPart, listPart,addPart,updatePart} from "@/api/bst/part";
import {getPart, listPart, addPart, updatePart, delPart} from "@/api/bst/part";
import {listStore} from "@/api/bst/store";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import item from "@/layout/components/Sidebar/Item.vue";
import {listFloor} from "@/api/bst/floor";
export default {
name: "Part",
@ -149,8 +143,8 @@
partList: [],
// 分区树选项
partOptions: [],
// 店铺树选项
storeOptions: [],
// 楼层选项
floorOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
@ -161,7 +155,7 @@
refreshTable: true,
// 查询参数
queryParams: {
parentId: null,
storeName: null,
storeId: null,
partName: null,
picture: null,
@ -172,31 +166,43 @@
rules: {
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
floorId: [
{ required: true, message: "楼层不能为空", trigger: "blur" }
],
partName: [
{ required: true, message: "分区名称不能为空", trigger: "blur" }
]
}
};
},
created() {
this.getList();
this.getStoreList();
this.getFloorList();
},
methods: {
handleStoreChange(storeId) {
// 更新查询参数中的店铺ID
this.form.storeId = storeId;
// 触发数据加载
this.getList();
},
/** 查询分区列表 */
getList() {
this.loading = true;
listPart(this.queryParams).then(response => {
this.partList = this.handleTree(response.data, "partId", "parentId");
this.loading = false;
});
})
},
/** 查询店铺列表 */
getStoreList() {
getFloorList() {
this.loading = true;
listStore(this.queryParams).then(response => {
this.storeOptions = response.data.map(item => ({
value: item.storeId,
lable: item.storeName
listFloor().then(response => {
this.floorOptions = (response.rows || []).map(item => ({
value: item.floorId,
label: item.floorName
}))
this.loading = false
});
@ -230,8 +236,7 @@
reset() {
this.form = {
partId: null,
parentId: null,
storeId: null,
floorId: null,
partName: null,
picture: null,
createTime: null

99
src/views/bst/store/index.vue
View File

@ -108,28 +108,22 @@
<el-table v-loading="loading" :data="storeList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="onSortChange">
<el-table-column type="selection" width="55" align="center" />
<template v-for="column of showColumns">
<el-table-column
:key="column.key"
:label="column.label"
:prop="column.key"
:align="column.align"
:min-width="column.minWidth"
:sort-orders="orderSorts"
:sortable="column.sortable"
:show-overflow-tooltip="column.overflow"
:width="column.width"
>
<el-table-column label="店铺ID" align="center" prop="storeId"/>
<el-table-column label="店铺名称" align="center" prop="storeName"/>
<el-table-column label="门店地址" align="center" min-width="200">
<template slot-scope="d">
<template v-if="column.key === 'storeId'">
{{d.row[column.key]}}
</template>
<template v-else>
{{d.row[column.key]}}
</template>
{{d.row.province}}{{d.row.city}}{{d.row.county}}{{d.row.address}}
</template>
</el-table-column>
<el-table-column label="门店照片" align="center" prop="picture" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.picture" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="商户" align="center" prop="userName"/>
<el-table-column label="联系电话" align="center" prop="phone" />
<el-table-column label="营业开始时间" align="center" prop="startTime" />
<el-table-column label="营业结束时间" align="center" prop="endTime" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
@ -174,21 +168,27 @@
<form-col label="营业时间" class="compact-time">
<el-row :gutter="11">
<el-col :span="9">
<el-form-item prop="startTime">
<el-time-picker
v-model="form.startTime"
format="HH:mm"
value-format="HH:mm"
placeholder="开始时间"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="1" class="time-separator">—</el-col>
<el-col :span="9">
<el-form-item prop="endTime">
<el-time-picker
v-model="form.endTime"
format="HH:mm"
value-format="HH:mm"
placeholder="结束时间"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
</form-col>
@ -199,8 +199,17 @@
<!-- <form-col :span="span" label="纬度" prop="latitude">-->
<!-- <el-input v-model="form.latitude" placeholder="请输入纬度" />-->
<!-- </form-col>-->
<form-col :span="span" label="详细地址" prop="address">
<el-input v-model="form.address" placeholder="请输入详细地址" />
<form-col label="定位地址" prop="address" :span="span * 2">
<el-input v-model="form.address" placeholder="请输入店铺地址">
<template #prepend>
<div>
{{form.province}}{{form.city}}{{form.county}}
</div>
</template>
<template #append>
<el-button @click="showPlaceSearchMap = true" icon="el-icon-location">选择定位</el-button>
</template>
</el-input>
</form-col>
<form-col :span="span" label="门店照片" prop="picture">
<image-upload v-model="form.picture" type="textarea" placeholder="请输入内容" />
@ -212,13 +221,23 @@
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<place-search-dialog
:show.sync="showPlaceSearchMap"
:init-lat="form.lat"
:init-lng="form.lng"
@submit="onSubmitAddress"
marker-type="store"
/>
</div>
</template>
<script>
import { listStore, getStore, delStore, addStore, updateStore } from "@/api/bst/store";
import { $showColumns } from '@/utils/mixins';
import FormCol from "@/components/FormCol/index.vue";
import PlaceSearchDialog from "@/components/Map/PlaceSearch/PlaceSearchDialog.vue";
// 默认排序字段
const defaultSort = {
@ -229,7 +248,7 @@ const defaultSort = {
export default {
name: "Store",
mixins: [$showColumns],
components: {FormCol},
components: {PlaceSearchDialog, FormCol},
data() {
return {
span: 24,
@ -292,14 +311,45 @@ export default {
rules: {
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
]
}
],
storeName: [
{ required: true, message: '店铺名不能为空', trigger: 'blur' }
],
userName: [
{ required: true, message: '联系用户不能为空', trigger: 'blur' }
],
phone: [
{ required: true, message: '联系方式不能为空', trigger: 'blur' }
],
startTime: [
{ required: true, message: '营业开始时间不能为空', trigger: 'change' },
],
endTime: [
{ required: true, message: '营业结束时间不能为空', trigger: 'change' },
],
address: [
{ required: true, message: '地址不能为空', trigger: 'blur' },
],
picture: [
{ required: true, message: '地址不能为空', trigger: 'blur' },
],
},
showPlaceSearchMap: false,
};
},
created() {
this.getList();
},
methods: {
onSubmitAddress(addr) {
this.form.address = addr.name;
this.form.lat = addr.lat;
this.form.lng = addr.lng;
this.form.province = addr.province;
this.form.city = addr.city;
this.form.county = addr.county;
this.form.specificAddress = addr.name;
},
/** 当排序按钮被点击时触发 **/
onSortChange(column) {
if (column.order == null) {
@ -334,6 +384,9 @@ export default {
userName: null,
phone: null,
startTime: null,
province: "福建省",
city: "宁德市",
county: "福鼎市",
endTime: null,
longitude: null,
latitude: null,