店铺相关模块

src/views/bst/booth/index.vue

@@ -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"
+          v-model="queryParams.partName"
-          placeholder="请输入分区ID"
+          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" />
+      <el-table-column type="selection" width="25" align="center" />
-      <template v-for="column of showColumns">
+<!--      <el-table-column label="卡座ID" align="center" prop="boothId" />-->
-        <el-table-column
+<!--      <el-table-column label="所属店铺" align="center" prop="storeName" />-->
-            :key="column.key"
+      <el-table-column label="所属分区" align="center" prop="partName" />
-            :label="column.label"
+      <el-table-column label="卡座名称" align="center" prop="boothName" />
-            :prop="column.key"
+      <el-table-column label="卡座图片" align="center" prop="picture" >
-            :align="column.align"
+        <image-preview slot-scope="d" :src="d.row.picture" :width="50" :height="50"/>
-            :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>
-      </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-form-item label="选择店铺" prop="storeId">-->
-            <el-input v-model="form.partId" placeholder="请输入分区ID" />
+<!--            <el-select-->
-          </form-col>
+<!--              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">
+          <form-col :span="span"  label="卡座图片" prop="picture">
-            <el-input v-model="form.picture" type="textarea" placeholder="请输入内容" />
+            <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) {

src/views/bst/part/index.vue

@@ -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"
+          v-model="queryParams.floorName"
-          placeholder="请输入父分区ID"
+          placeholder="请输入楼层名称"
           clearable
-          @keyup.enter.native="handleQuery"
+          @change="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="店铺ID" prop="storeId">
-        <el-input
-          v-model="queryParams.storeId"
-          placeholder="请输入店铺ID"
-          clearable
-          @keyup.enter.native="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="floorName" />
-      <el-table-column label="店铺名称" align="center" prop="storeId" />
       <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"
+          v-model="form.floorId"
-          placeholder="请选择店铺"
+          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 => {
+      listFloor().then(response => {
-        this.storeOptions = response.data.map(item => ({
+        this.floorOptions = (response.rows || []).map(item => ({
-          value: item.storeId,
+          value: item.floorId,
-          lable: item.storeName
+          label: item.floorName
         }))
         this.loading = false
       });
@@ -230,8 +236,7 @@
     reset() {
       this.form = {
         partId: null,
-        parentId: null,
+        floorId: null,
-        storeId: null,
         partName: null,
         picture: null,
         createTime: null

src/views/bst/store/index.vue

@@ -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 label="店铺ID" align="center" prop="storeId"/>
-        <el-table-column
+      <el-table-column label="店铺名称" align="center" prop="storeName"/>
-          :key="column.key"
+      <el-table-column label="门店地址" align="center" min-width="200">
-          :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 === 'storeId'">
+          {{d.row.province}}{{d.row.city}}{{d.row.county}}{{d.row.address}}
-              {{d.row[column.key]}}
-            </template>
-            <template v-else>
-              {{d.row[column.key]}}
-            </template>
         </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">
+          <form-col label="定位地址" prop="address" :span="span * 2">
-            <el-input v-model="form.address" placeholder="请输入详细地址" />
+            <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,