mirror of
				https://gitee.com/hhyykk/ipms-sjy-ui.git
				synced 2025-11-03 03:38:44 +08:00 
			
		
		
		
	新增门店自提管理
This commit is contained in:
		
							
								
								
									
										46
									
								
								src/api/mall/trade/delivery/pickUpStore/index.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										46
									
								
								src/api/mall/trade/delivery/pickUpStore/index.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,46 @@
 | 
				
			|||||||
 | 
					import request from '@/config/axios'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export interface DeliveryPickUpStoreVO {
 | 
				
			||||||
 | 
					  id: number
 | 
				
			||||||
 | 
					  name: string
 | 
				
			||||||
 | 
					  introduction: string
 | 
				
			||||||
 | 
					  phone: string
 | 
				
			||||||
 | 
					  areaId: number
 | 
				
			||||||
 | 
					  detailAddress: string
 | 
				
			||||||
 | 
					  logo: string
 | 
				
			||||||
 | 
					  openingTime: string
 | 
				
			||||||
 | 
					  closingTime: string
 | 
				
			||||||
 | 
					  latitude: number
 | 
				
			||||||
 | 
					  longitude: number
 | 
				
			||||||
 | 
					  status: number
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 查询自提门店列表
 | 
				
			||||||
 | 
					export const getDeliveryPickUpStorePage = async (params: DeliveryPickUpStorePageReqVO) => {
 | 
				
			||||||
 | 
					  return await request.get({ url: '/trade/delivery/pick-up-store/page', params })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 查询自提门店详情
 | 
				
			||||||
 | 
					export const getDeliveryPickUpStore = async (id: number) => {
 | 
				
			||||||
 | 
					  return await request.get({ url: '/trade/delivery/pick-up-store/get?id=' + id })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 新增自提门店
 | 
				
			||||||
 | 
					export const createDeliveryPickUpStore = async (data: DeliveryPickUpStoreVO) => {
 | 
				
			||||||
 | 
					  return await request.post({ url: '/trade/delivery/pick-up-store/create', data })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 修改自提门店
 | 
				
			||||||
 | 
					export const updateDeliveryPickUpStore = async (data: DeliveryPickUpStoreVO) => {
 | 
				
			||||||
 | 
					  return await request.put({ url: '/trade/delivery/pick-up-store/update', data })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 删除自提门店
 | 
				
			||||||
 | 
					export const deleteDeliveryPickUpStore = async (id: number) => {
 | 
				
			||||||
 | 
					  return await request.delete({ url: '/trade/delivery/pick-up-store/delete?id=' + id })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 导出自提门店 Excel
 | 
				
			||||||
 | 
					export const exportDeliveryPickUpStoreApi = async (params) => {
 | 
				
			||||||
 | 
					  return await request.download({ url: '/trade/delivery/pick-up-store/export-excel', params })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										288
									
								
								src/views/mall/trade/delivery/pickUpStore/PickUpStoreForm.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										288
									
								
								src/views/mall/trade/delivery/pickUpStore/PickUpStoreForm.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,288 @@
 | 
				
			|||||||
 | 
					<template>
 | 
				
			||||||
 | 
					  <Dialog :title="dialogTitle" v-model="dialogVisible" width="60%">
 | 
				
			||||||
 | 
					    <el-form
 | 
				
			||||||
 | 
					      ref="formRef"
 | 
				
			||||||
 | 
					      :model="formData"
 | 
				
			||||||
 | 
					      :rules="formRules"
 | 
				
			||||||
 | 
					      label-width="120px"
 | 
				
			||||||
 | 
					      v-loading="formLoading"
 | 
				
			||||||
 | 
					    >
 | 
				
			||||||
 | 
					      <el-row>
 | 
				
			||||||
 | 
					        <el-col :span="12">
 | 
				
			||||||
 | 
					          <el-form-item label="门店 logo" prop="logo">
 | 
				
			||||||
 | 
					            <UploadImg v-model="formData.logo" :limit="1" :is-show-tip="false" />
 | 
				
			||||||
 | 
					            <div style="font-size: 10px" class="pl-10px">推荐 180x180 图片分辨率</div>
 | 
				
			||||||
 | 
					          </el-form-item>
 | 
				
			||||||
 | 
					        </el-col>
 | 
				
			||||||
 | 
					        <el-col :span="12">
 | 
				
			||||||
 | 
					          <el-form-item label="门店状态" prop="status">
 | 
				
			||||||
 | 
					            <el-radio-group v-model="formData.status">
 | 
				
			||||||
 | 
					              <el-radio
 | 
				
			||||||
 | 
					                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
 | 
				
			||||||
 | 
					                :key="dict.value"
 | 
				
			||||||
 | 
					                :label="dict.value"
 | 
				
			||||||
 | 
					              >
 | 
				
			||||||
 | 
					                {{ dict.label }}
 | 
				
			||||||
 | 
					              </el-radio>
 | 
				
			||||||
 | 
					            </el-radio-group>
 | 
				
			||||||
 | 
					          </el-form-item>
 | 
				
			||||||
 | 
					        </el-col>
 | 
				
			||||||
 | 
					      </el-row>
 | 
				
			||||||
 | 
					      <el-row>
 | 
				
			||||||
 | 
					        <el-col :span="12">
 | 
				
			||||||
 | 
					          <el-form-item label="门店名称" prop="name">
 | 
				
			||||||
 | 
					            <el-input v-model="formData.name" placeholder="请输入门店名称" />
 | 
				
			||||||
 | 
					          </el-form-item>
 | 
				
			||||||
 | 
					        </el-col>
 | 
				
			||||||
 | 
					        <el-col :span="12">
 | 
				
			||||||
 | 
					          <el-form-item label="门店手机" prop="phone">
 | 
				
			||||||
 | 
					            <el-input v-model="formData.phone" placeholder="请输入门店手机" />
 | 
				
			||||||
 | 
					          </el-form-item>
 | 
				
			||||||
 | 
					        </el-col>
 | 
				
			||||||
 | 
					      </el-row>
 | 
				
			||||||
 | 
					      <el-form-item label="门店简介" prop="introduction">
 | 
				
			||||||
 | 
					        <el-input
 | 
				
			||||||
 | 
					          v-model="formData.introduction"
 | 
				
			||||||
 | 
					          :rows="3"
 | 
				
			||||||
 | 
					          type="textarea"
 | 
				
			||||||
 | 
					          placeholder="请输入门店简介"
 | 
				
			||||||
 | 
					        />
 | 
				
			||||||
 | 
					      </el-form-item>
 | 
				
			||||||
 | 
					      <el-row>
 | 
				
			||||||
 | 
					        <el-col :span="12">
 | 
				
			||||||
 | 
					          <el-form-item label="门店所在地区" prop="areaId">
 | 
				
			||||||
 | 
					            <el-cascader v-model="formData.areaId" :options="areaList" :props="cascaderProps" />
 | 
				
			||||||
 | 
					          </el-form-item>
 | 
				
			||||||
 | 
					        </el-col>
 | 
				
			||||||
 | 
					        <el-col :span="12">
 | 
				
			||||||
 | 
					          <el-form-item label="门店详细地址" prop="detailAddress">
 | 
				
			||||||
 | 
					            <el-input v-model="formData.detailAddress" placeholder="请输入门店详细地址" />
 | 
				
			||||||
 | 
					          </el-form-item>
 | 
				
			||||||
 | 
					        </el-col>
 | 
				
			||||||
 | 
					      </el-row>
 | 
				
			||||||
 | 
					      <el-row>
 | 
				
			||||||
 | 
					        <el-col :span="12">
 | 
				
			||||||
 | 
					          <el-form-item label="营业开始时间" prop="openingTime">
 | 
				
			||||||
 | 
					            <el-time-select
 | 
				
			||||||
 | 
					              v-model="formData.openingTime"
 | 
				
			||||||
 | 
					              :max-time="formData.closingTime"
 | 
				
			||||||
 | 
					              placeholder="开始时间"
 | 
				
			||||||
 | 
					              start="08:30"
 | 
				
			||||||
 | 
					              step="00:15"
 | 
				
			||||||
 | 
					              end="23:30"
 | 
				
			||||||
 | 
					            />
 | 
				
			||||||
 | 
					          </el-form-item>
 | 
				
			||||||
 | 
					        </el-col>
 | 
				
			||||||
 | 
					        <el-col :span="12">
 | 
				
			||||||
 | 
					          <el-form-item label="营业结束时间" prop="closingTime">
 | 
				
			||||||
 | 
					            <el-time-select
 | 
				
			||||||
 | 
					              v-model="formData.closingTime"
 | 
				
			||||||
 | 
					              :min-time="formData.openingTime"
 | 
				
			||||||
 | 
					              placeholder="结束时间"
 | 
				
			||||||
 | 
					              start="08:30"
 | 
				
			||||||
 | 
					              step="00:15"
 | 
				
			||||||
 | 
					              end="23:30"
 | 
				
			||||||
 | 
					            />
 | 
				
			||||||
 | 
					          </el-form-item>
 | 
				
			||||||
 | 
					        </el-col>
 | 
				
			||||||
 | 
					      </el-row>
 | 
				
			||||||
 | 
					      <el-row>
 | 
				
			||||||
 | 
					        <el-col :span="12">
 | 
				
			||||||
 | 
					          <el-form-item label="经度" prop="longitude">
 | 
				
			||||||
 | 
					            <el-input v-model="formData.longitude" placeholder="请输入门店经度" />
 | 
				
			||||||
 | 
					          </el-form-item>
 | 
				
			||||||
 | 
					        </el-col>
 | 
				
			||||||
 | 
					        <el-col :span="12">
 | 
				
			||||||
 | 
					          <el-form-item label="纬度" prop="latitude">
 | 
				
			||||||
 | 
					            <el-input v-model="formData.latitude" placeholder="请输入门店纬度" />
 | 
				
			||||||
 | 
					          </el-form-item>
 | 
				
			||||||
 | 
					        </el-col>
 | 
				
			||||||
 | 
					      </el-row>
 | 
				
			||||||
 | 
					      <el-form-item label="获取经纬度">
 | 
				
			||||||
 | 
					        <el-button type="primary" @click="searchLocation">获取</el-button>
 | 
				
			||||||
 | 
					      </el-form-item>
 | 
				
			||||||
 | 
					    </el-form>
 | 
				
			||||||
 | 
					    <template #footer>
 | 
				
			||||||
 | 
					      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
 | 
				
			||||||
 | 
					      <el-button @click="dialogVisible = false">取 消</el-button>
 | 
				
			||||||
 | 
					    </template>
 | 
				
			||||||
 | 
					    <el-dialog
 | 
				
			||||||
 | 
					      v-model="mapDialogVisible"
 | 
				
			||||||
 | 
					      title="获取经纬度"
 | 
				
			||||||
 | 
					      append-to-body
 | 
				
			||||||
 | 
					      width="500px"
 | 
				
			||||||
 | 
					      class="mapBox"
 | 
				
			||||||
 | 
					    >
 | 
				
			||||||
 | 
					      <iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="tencentLbsUrl"></iframe>
 | 
				
			||||||
 | 
					    </el-dialog>
 | 
				
			||||||
 | 
					  </Dialog>
 | 
				
			||||||
 | 
					</template>
 | 
				
			||||||
 | 
					<script setup lang="ts">
 | 
				
			||||||
 | 
					import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 | 
				
			||||||
 | 
					import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 | 
				
			||||||
 | 
					import { CommonStatusEnum } from '@/utils/constants'
 | 
				
			||||||
 | 
					import { getAreaTree } from '@/api/system/area'
 | 
				
			||||||
 | 
					import * as ConfigApi from '@/api/infra/config'
 | 
				
			||||||
 | 
					const { t } = useI18n() // 国际化
 | 
				
			||||||
 | 
					const message = useMessage() // 消息弹窗
 | 
				
			||||||
 | 
					const dialogVisible = ref(false) // 弹窗的是否展示
 | 
				
			||||||
 | 
					const mapDialogVisible = ref(false) // 地图弹窗的是否展示
 | 
				
			||||||
 | 
					const dialogTitle = ref('') // 弹窗的标题
 | 
				
			||||||
 | 
					const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
 | 
				
			||||||
 | 
					const formType = ref('') // 表单的类型:create - 新增;update - 修改
 | 
				
			||||||
 | 
					const formData = ref({
 | 
				
			||||||
 | 
					  id: undefined,
 | 
				
			||||||
 | 
					  name: '',
 | 
				
			||||||
 | 
					  phone: '',
 | 
				
			||||||
 | 
					  logo: '',
 | 
				
			||||||
 | 
					  detailAddress: '',
 | 
				
			||||||
 | 
					  introduction: '',
 | 
				
			||||||
 | 
					  areaId: 0,
 | 
				
			||||||
 | 
					  openingTime: undefined,
 | 
				
			||||||
 | 
					  closingTime: undefined,
 | 
				
			||||||
 | 
					  latitude: undefined,
 | 
				
			||||||
 | 
					  longitude: undefined,
 | 
				
			||||||
 | 
					  status: CommonStatusEnum.ENABLE
 | 
				
			||||||
 | 
					})
 | 
				
			||||||
 | 
					const formRules = reactive({
 | 
				
			||||||
 | 
					  name: [{ required: true, message: '门店名称不能为空', trigger: 'blur' }],
 | 
				
			||||||
 | 
					  logo: [{ required: true, message: '门店 logo 不能为空', trigger: 'blur' }],
 | 
				
			||||||
 | 
					  phone: [
 | 
				
			||||||
 | 
					    { required: true, message: '门店手机不能为空', trigger: 'blur' },
 | 
				
			||||||
 | 
					    { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
 | 
				
			||||||
 | 
					  ],
 | 
				
			||||||
 | 
					  areaId: [{ required: true, message: '门店所在区域不能为空', trigger: 'blur' }],
 | 
				
			||||||
 | 
					  detailAddress: [{ required: true, message: '门店详细地址不能为空', trigger: 'blur' }],
 | 
				
			||||||
 | 
					  openingTime: [{ required: true, message: '营业开始时间不能为空', trigger: 'blur' }],
 | 
				
			||||||
 | 
					  closingTime: [{ required: true, message: '营业结束时间不能为空', trigger: 'blur' }],
 | 
				
			||||||
 | 
					  latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
 | 
				
			||||||
 | 
					  longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
 | 
				
			||||||
 | 
					  status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
 | 
				
			||||||
 | 
					})
 | 
				
			||||||
 | 
					const formRef = ref() // 表单 Ref
 | 
				
			||||||
 | 
					const cascaderProps = {
 | 
				
			||||||
 | 
					  children: 'children',
 | 
				
			||||||
 | 
					  label: 'name',
 | 
				
			||||||
 | 
					  value: 'id',
 | 
				
			||||||
 | 
					  emitPath: false
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					const areaList = ref() // 区域树
 | 
				
			||||||
 | 
					const tencentLbsUrl = ref('') //腾讯位置服务 url
 | 
				
			||||||
 | 
					/** 打开弹窗 */
 | 
				
			||||||
 | 
					const open = async (type: string, id?: number) => {
 | 
				
			||||||
 | 
					  dialogVisible.value = true
 | 
				
			||||||
 | 
					  dialogTitle.value = t('action.' + type)
 | 
				
			||||||
 | 
					  formType.value = type
 | 
				
			||||||
 | 
					  resetForm()
 | 
				
			||||||
 | 
					  // 修改时,设置数据
 | 
				
			||||||
 | 
					  if (id) {
 | 
				
			||||||
 | 
					    formLoading.value = true
 | 
				
			||||||
 | 
					    try {
 | 
				
			||||||
 | 
					      formData.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(id)
 | 
				
			||||||
 | 
					    } finally {
 | 
				
			||||||
 | 
					      formLoading.value = false
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					defineExpose({ open }) // 提供 open 方法,用于打开弹窗
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/** 提交表单 */
 | 
				
			||||||
 | 
					const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
 | 
				
			||||||
 | 
					const submitForm = async () => {
 | 
				
			||||||
 | 
					  // 校验表单
 | 
				
			||||||
 | 
					  if (!formRef) return
 | 
				
			||||||
 | 
					  const valid = await formRef.value.validate()
 | 
				
			||||||
 | 
					  if (!valid) return
 | 
				
			||||||
 | 
					  // 提交请求
 | 
				
			||||||
 | 
					  formLoading.value = true
 | 
				
			||||||
 | 
					  try {
 | 
				
			||||||
 | 
					    console.log('formData.value', formData.value)
 | 
				
			||||||
 | 
					    const data = formData.value as DeliveryPickUpStoreApi.DeliveryPickUpStoreVO
 | 
				
			||||||
 | 
					    if (formType.value === 'create') {
 | 
				
			||||||
 | 
					      await DeliveryPickUpStoreApi.createDeliveryPickUpStore(data)
 | 
				
			||||||
 | 
					      message.success(t('common.createSuccess'))
 | 
				
			||||||
 | 
					    } else {
 | 
				
			||||||
 | 
					      await DeliveryPickUpStoreApi.updateDeliveryPickUpStore(data)
 | 
				
			||||||
 | 
					      message.success(t('common.updateSuccess'))
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    dialogVisible.value = false
 | 
				
			||||||
 | 
					    // 发送操作成功的事件
 | 
				
			||||||
 | 
					    emit('success')
 | 
				
			||||||
 | 
					  } finally {
 | 
				
			||||||
 | 
					    formLoading.value = false
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/** 重置表单 */
 | 
				
			||||||
 | 
					const resetForm = () => {
 | 
				
			||||||
 | 
					  formData.value = {
 | 
				
			||||||
 | 
					    id: undefined,
 | 
				
			||||||
 | 
					    name: '',
 | 
				
			||||||
 | 
					    phone: '',
 | 
				
			||||||
 | 
					    logo: '',
 | 
				
			||||||
 | 
					    detailAddress: '',
 | 
				
			||||||
 | 
					    introduction: '',
 | 
				
			||||||
 | 
					    areaId: 1,
 | 
				
			||||||
 | 
					    openingTime: undefined,
 | 
				
			||||||
 | 
					    closingTime: undefined,
 | 
				
			||||||
 | 
					    latitude: undefined,
 | 
				
			||||||
 | 
					    longitude: undefined,
 | 
				
			||||||
 | 
					    status: CommonStatusEnum.ENABLE
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  formRef.value?.resetFields()
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					//查找位置
 | 
				
			||||||
 | 
					const searchLocation = async () => {
 | 
				
			||||||
 | 
					  mapDialogVisible.value = true
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					// 选择经纬度
 | 
				
			||||||
 | 
					const selectAddress = function (loc: any): void {
 | 
				
			||||||
 | 
					  if (loc.latlng && loc.latlng.lat) {
 | 
				
			||||||
 | 
					    formData.value.latitude = loc.latlng.lat
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  if (loc.latlng && loc.latlng.lng) {
 | 
				
			||||||
 | 
					    formData.value.longitude = loc.latlng.lng
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  mapDialogVisible.value = false
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					/** 初始化数据 */
 | 
				
			||||||
 | 
					const initData = async () => {
 | 
				
			||||||
 | 
					  formLoading.value = true
 | 
				
			||||||
 | 
					  try {
 | 
				
			||||||
 | 
					    const data = await getAreaTree()
 | 
				
			||||||
 | 
					    areaList.value = data
 | 
				
			||||||
 | 
					  } finally {
 | 
				
			||||||
 | 
					    formLoading.value = false
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  window.selectAddress = selectAddress
 | 
				
			||||||
 | 
					  window.addEventListener(
 | 
				
			||||||
 | 
					    'message',
 | 
				
			||||||
 | 
					    function (event) {
 | 
				
			||||||
 | 
					      // 接收位置信息,用户选择确认位置点后选点组件会触发该事件,回传用户的位置信息
 | 
				
			||||||
 | 
					      let loc = event.data
 | 
				
			||||||
 | 
					      if (loc && loc.module === 'locationPicker') {
 | 
				
			||||||
 | 
					        // 防止其他应用也会向该页面post信息,需判断module是否为'locationPicker'
 | 
				
			||||||
 | 
					        window.parent.selectAddress(loc)
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					    },
 | 
				
			||||||
 | 
					    false
 | 
				
			||||||
 | 
					  )
 | 
				
			||||||
 | 
					  const data = await ConfigApi.getConfigKey('tencent.lbs.key')
 | 
				
			||||||
 | 
					  let key = ''
 | 
				
			||||||
 | 
					  if (data && data.length > 0) {
 | 
				
			||||||
 | 
					    key = data
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  tencentLbsUrl.value = `https://apis.map.qq.com/tools/locpicker?type=1&key=${key}&referer=myapp`
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/** 初始化 **/
 | 
				
			||||||
 | 
					onMounted(() => {
 | 
				
			||||||
 | 
					  initData()
 | 
				
			||||||
 | 
					})
 | 
				
			||||||
 | 
					</script>
 | 
				
			||||||
 | 
					<style lang="scss">
 | 
				
			||||||
 | 
					.mapBox .el-dialog__body {
 | 
				
			||||||
 | 
					  height: 640px !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					</style>
 | 
				
			||||||
							
								
								
									
										199
									
								
								src/views/mall/trade/delivery/pickUpStore/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										199
									
								
								src/views/mall/trade/delivery/pickUpStore/index.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,199 @@
 | 
				
			|||||||
 | 
					<template>
 | 
				
			||||||
 | 
					  <!-- 搜索工作栏 -->
 | 
				
			||||||
 | 
					  <ContentWrap>
 | 
				
			||||||
 | 
					    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
 | 
				
			||||||
 | 
					      <el-form-item label="门店手机" prop="phone">
 | 
				
			||||||
 | 
					        <el-input
 | 
				
			||||||
 | 
					          v-model="queryParams.phone"
 | 
				
			||||||
 | 
					          placeholder="请输门店手机"
 | 
				
			||||||
 | 
					          clearable
 | 
				
			||||||
 | 
					          @keyup.enter="handleQuery"
 | 
				
			||||||
 | 
					          class="!w-240px"
 | 
				
			||||||
 | 
					        />
 | 
				
			||||||
 | 
					      </el-form-item>
 | 
				
			||||||
 | 
					      <el-form-item label="门店名称" prop="name">
 | 
				
			||||||
 | 
					        <el-input
 | 
				
			||||||
 | 
					          v-model="queryParams.name"
 | 
				
			||||||
 | 
					          placeholder="请输门店名称"
 | 
				
			||||||
 | 
					          clearable
 | 
				
			||||||
 | 
					          @keyup.enter="handleQuery"
 | 
				
			||||||
 | 
					          class="!w-240px"
 | 
				
			||||||
 | 
					        />
 | 
				
			||||||
 | 
					      </el-form-item>
 | 
				
			||||||
 | 
					      <el-form-item label="门店状态" prop="status">
 | 
				
			||||||
 | 
					        <el-select v-model="queryParams.status" placeholder="门店状态" clearable class="!w-240px">
 | 
				
			||||||
 | 
					          <el-option
 | 
				
			||||||
 | 
					            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
 | 
				
			||||||
 | 
					            :key="dict.value"
 | 
				
			||||||
 | 
					            :label="dict.label"
 | 
				
			||||||
 | 
					            :value="dict.value"
 | 
				
			||||||
 | 
					          />
 | 
				
			||||||
 | 
					        </el-select>
 | 
				
			||||||
 | 
					      </el-form-item>
 | 
				
			||||||
 | 
					      <el-form-item label="创建时间" prop="createTime">
 | 
				
			||||||
 | 
					        <el-date-picker
 | 
				
			||||||
 | 
					          v-model="queryParams.createTime"
 | 
				
			||||||
 | 
					          value-format="YYYY-MM-DD HH:mm:ss"
 | 
				
			||||||
 | 
					          type="datetimerange"
 | 
				
			||||||
 | 
					          start-placeholder="开始日期"
 | 
				
			||||||
 | 
					          end-placeholder="结束日期"
 | 
				
			||||||
 | 
					          class="!w-240px"
 | 
				
			||||||
 | 
					        />
 | 
				
			||||||
 | 
					      </el-form-item>
 | 
				
			||||||
 | 
					      <el-form-item>
 | 
				
			||||||
 | 
					        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
 | 
				
			||||||
 | 
					        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
 | 
				
			||||||
 | 
					        <el-button
 | 
				
			||||||
 | 
					          type="primary"
 | 
				
			||||||
 | 
					          plain
 | 
				
			||||||
 | 
					          @click="openForm('create')"
 | 
				
			||||||
 | 
					          v-hasPermi="['trade:delivery:pick-up-store:create']"
 | 
				
			||||||
 | 
					        >
 | 
				
			||||||
 | 
					          <Icon icon="ep:plus" class="mr-5px" /> 新增
 | 
				
			||||||
 | 
					        </el-button>
 | 
				
			||||||
 | 
					        <el-button
 | 
				
			||||||
 | 
					          type="success"
 | 
				
			||||||
 | 
					          plain
 | 
				
			||||||
 | 
					          @click="handleExport"
 | 
				
			||||||
 | 
					          :loading="exportLoading"
 | 
				
			||||||
 | 
					          v-hasPermi="['trade:delivery:pick-up-store:export']"
 | 
				
			||||||
 | 
					        >
 | 
				
			||||||
 | 
					          <Icon icon="ep:download" class="mr-5px" /> 导出
 | 
				
			||||||
 | 
					        </el-button>
 | 
				
			||||||
 | 
					      </el-form-item>
 | 
				
			||||||
 | 
					    </el-form>
 | 
				
			||||||
 | 
					  </ContentWrap>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  <!-- 列表 -->
 | 
				
			||||||
 | 
					  <ContentWrap>
 | 
				
			||||||
 | 
					    <el-table v-loading="loading" :data="list">
 | 
				
			||||||
 | 
					      <el-table-column label="编号" prop="id" />
 | 
				
			||||||
 | 
					      <el-table-column label="门店 logo" prop="logo">
 | 
				
			||||||
 | 
					        <template #default="scope">
 | 
				
			||||||
 | 
					          <img v-if="scope.row.logo" :src="scope.row.logo" alt="门店 logo" class="h-100px" />
 | 
				
			||||||
 | 
					        </template>
 | 
				
			||||||
 | 
					      </el-table-column>
 | 
				
			||||||
 | 
					      <el-table-column label="门店名称" prop="name" />
 | 
				
			||||||
 | 
					      <el-table-column label="门店手机" prop="phone" />
 | 
				
			||||||
 | 
					      <el-table-column label="门店详细地址" align="center" prop="detailAddress" />
 | 
				
			||||||
 | 
					      <el-table-column label="开启状态" align="center" prop="status">
 | 
				
			||||||
 | 
					        <template #default="scope">
 | 
				
			||||||
 | 
					          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
 | 
				
			||||||
 | 
					        </template>
 | 
				
			||||||
 | 
					      </el-table-column>
 | 
				
			||||||
 | 
					      <el-table-column
 | 
				
			||||||
 | 
					        label="创建时间"
 | 
				
			||||||
 | 
					        align="center"
 | 
				
			||||||
 | 
					        prop="createTime"
 | 
				
			||||||
 | 
					        width="180"
 | 
				
			||||||
 | 
					        :formatter="dateFormatter"
 | 
				
			||||||
 | 
					      />
 | 
				
			||||||
 | 
					      <el-table-column label="操作" align="center">
 | 
				
			||||||
 | 
					        <template #default="scope">
 | 
				
			||||||
 | 
					          <el-button
 | 
				
			||||||
 | 
					            link
 | 
				
			||||||
 | 
					            type="primary"
 | 
				
			||||||
 | 
					            @click="openForm('update', scope.row.id)"
 | 
				
			||||||
 | 
					            v-hasPermi="['trade:delivery:pick-up-store:update']"
 | 
				
			||||||
 | 
					          >
 | 
				
			||||||
 | 
					            编辑
 | 
				
			||||||
 | 
					          </el-button>
 | 
				
			||||||
 | 
					          <el-button
 | 
				
			||||||
 | 
					            link
 | 
				
			||||||
 | 
					            type="danger"
 | 
				
			||||||
 | 
					            @click="handleDelete(scope.row.id)"
 | 
				
			||||||
 | 
					            v-hasPermi="['trade:delivery:pick-up-store:delete']"
 | 
				
			||||||
 | 
					          >
 | 
				
			||||||
 | 
					            删除
 | 
				
			||||||
 | 
					          </el-button>
 | 
				
			||||||
 | 
					        </template>
 | 
				
			||||||
 | 
					      </el-table-column>
 | 
				
			||||||
 | 
					    </el-table>
 | 
				
			||||||
 | 
					  </ContentWrap>
 | 
				
			||||||
 | 
					  <!-- 表单弹窗:添加/修改 -->
 | 
				
			||||||
 | 
					  <DeliveryPickUpStoreForm ref="formRef" @success="getList" />
 | 
				
			||||||
 | 
					</template>
 | 
				
			||||||
 | 
					<script setup lang="ts" name="DeliveryPickUpStore">
 | 
				
			||||||
 | 
					import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 | 
				
			||||||
 | 
					import DeliveryPickUpStoreForm from './PickUpStoreForm.vue'
 | 
				
			||||||
 | 
					import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 | 
				
			||||||
 | 
					import { dateFormatter } from '@/utils/formatTime'
 | 
				
			||||||
 | 
					import download from '@/utils/download'
 | 
				
			||||||
 | 
					const message = useMessage() // 消息弹窗
 | 
				
			||||||
 | 
					const { t } = useI18n() // 国际化
 | 
				
			||||||
 | 
					const total = ref(0) // 列表的总页数
 | 
				
			||||||
 | 
					const loading = ref(true) // 列表的加载中
 | 
				
			||||||
 | 
					const exportLoading = ref(false) // 导出的加载中
 | 
				
			||||||
 | 
					const list = ref<any[]>([]) // 列表的数据
 | 
				
			||||||
 | 
					const queryParams = reactive({
 | 
				
			||||||
 | 
					  pageNo: 1,
 | 
				
			||||||
 | 
					  pageSize: 10,
 | 
				
			||||||
 | 
					  status: undefined,
 | 
				
			||||||
 | 
					  phone: undefined,
 | 
				
			||||||
 | 
					  name: undefined,
 | 
				
			||||||
 | 
					  createTime: []
 | 
				
			||||||
 | 
					})
 | 
				
			||||||
 | 
					const queryFormRef = ref() // 搜索的表单
 | 
				
			||||||
 | 
					/** 添加/修改操作 */
 | 
				
			||||||
 | 
					const formRef = ref()
 | 
				
			||||||
 | 
					const openForm = (type: string, id?: number) => {
 | 
				
			||||||
 | 
					  formRef.value.open(type, id)
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/** 删除按钮操作 */
 | 
				
			||||||
 | 
					const handleDelete = async (id: number) => {
 | 
				
			||||||
 | 
					  try {
 | 
				
			||||||
 | 
					    // 删除的二次确认
 | 
				
			||||||
 | 
					    await message.delConfirm()
 | 
				
			||||||
 | 
					    // 发起删除
 | 
				
			||||||
 | 
					    await DeliveryPickUpStoreApi.deleteDeliveryPickUpStore(id)
 | 
				
			||||||
 | 
					    message.success(t('common.delSuccess'))
 | 
				
			||||||
 | 
					    // 刷新列表
 | 
				
			||||||
 | 
					    await getList()
 | 
				
			||||||
 | 
					  } catch {}
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					//** 查询列表 */
 | 
				
			||||||
 | 
					const getList = async () => {
 | 
				
			||||||
 | 
					  loading.value = true
 | 
				
			||||||
 | 
					  try {
 | 
				
			||||||
 | 
					    const data = await DeliveryPickUpStoreApi.getDeliveryPickUpStorePage(queryParams)
 | 
				
			||||||
 | 
					    list.value = data.list
 | 
				
			||||||
 | 
					    total.value = data.total
 | 
				
			||||||
 | 
					  } finally {
 | 
				
			||||||
 | 
					    loading.value = false
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/** 搜索按钮操作 */
 | 
				
			||||||
 | 
					const handleQuery = () => {
 | 
				
			||||||
 | 
					  queryParams.pageNo = 1
 | 
				
			||||||
 | 
					  getList()
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/** 重置按钮操作 */
 | 
				
			||||||
 | 
					const resetQuery = () => {
 | 
				
			||||||
 | 
					  queryFormRef.value.resetFields()
 | 
				
			||||||
 | 
					  handleQuery()
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/** 导出按钮操作 */
 | 
				
			||||||
 | 
					const handleExport = async () => {
 | 
				
			||||||
 | 
					  try {
 | 
				
			||||||
 | 
					    // 导出的二次确认
 | 
				
			||||||
 | 
					    await message.exportConfirm()
 | 
				
			||||||
 | 
					    // 发起导出
 | 
				
			||||||
 | 
					    exportLoading.value = true
 | 
				
			||||||
 | 
					    const data = await DeliveryPickUpStoreApi.exportDeliveryPickUpStoreApi(queryParams)
 | 
				
			||||||
 | 
					    download.excel(data, '自提门店.xls')
 | 
				
			||||||
 | 
					  } catch {
 | 
				
			||||||
 | 
					  } finally {
 | 
				
			||||||
 | 
					    exportLoading.value = false
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/** 初始化 **/
 | 
				
			||||||
 | 
					onMounted(() => {
 | 
				
			||||||
 | 
					  getList()
 | 
				
			||||||
 | 
					})
 | 
				
			||||||
 | 
					</script>
 | 
				
			||||||
		Reference in New Issue
	
	Block a user