yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'yudao/dev' into dev-to-dev

pull/159/head
puhui999 2023-06-01 11:55:22 +08:00
parent 7fb6258bed 000aa95012
commit 91a5f8044c
7 changed files with 573 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/mall/trade/delivery/expressTemplate/index.ts
View File

@ -10,7 +10,7 @@ export interface DeliveryExpressTemplateVO {
}
export declare type ExpressTemplateChargeVO = {
areaId: number
areaIds: number[]
startCount: number
startPrice: number
extraCount: number
@ -18,7 +18,7 @@ export declare type ExpressTemplateChargeVO = {
}
export declare type ExpressTemplateFreeVO = {
areaId: number
areaIds: number[]
freeCount: number
freePrice: number
}

46
src/api/mall/trade/delivery/pickUpStore/index.ts Normal file
View 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 })
}

6
src/api/system/area/index.ts
View File

@ -6,11 +6,11 @@ export const getAreaTree = async () => {
}
export const getChildrenArea = async (id: number) => {
return await request.get({ url: '/system/area/getChildrenArea?id=' + id })
return await request.get({ url: '/system/area/get-children?id=' + id })
}
export const getAreaListByIds = async (data) => {
return await request.post({ url: '/system/area/list', data })
export const getAreaListByIds = async (ids) => {
return await request.get({ url: '/system/area/get-by-ids?ids=' + ids })
}
// 获得 IP 对应的地区名

57
src/views/mall/trade/delivery/expressTemplate/DeliveryExpressTemplateForm.vue → src/views/mall/trade/delivery/expressTemplate/ExpressTemplateForm.vue
View File

@ -27,10 +27,11 @@
<template #default="{ row }">
<!-- 区域数据太多，用赖加载方式，要不然性能有问题 -->
<el-tree-select
v-model="row.areaId"
v-model="row.areaIds"
lazy
:load="loadChargeArea"
:props="defaultProps"
multiple
node-key="id"
check-strictly
show-checkbox
@ -90,7 +91,8 @@
<template #default="{ row }">
<!-- 区域数据太多，用赖加载方式，要不然性能有问题 -->
<el-tree-select
v-model="row.areaId"
v-model="row.areaIds"
multiple
lazy
:load="loadFreeArea"
:props="defaultProps"
@ -98,7 +100,7 @@
check-strictly
show-checkbox
check-on-click-node
:render-after-expand="false"
:render-after-expand="true"
:cache-data="areaCache"
/>
</template>
@ -170,7 +172,6 @@ const formRules = reactive({
})
const formRef = ref() // 表单 Ref
const areaCache = ref([]) //由于区域节点懒加载，已选区域节点需要缓存展示
// let areaTree: any[]
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
@ -183,25 +184,30 @@ const open = async (type: string, id?: number) => {
formLoading.value = true
formData.value = await DeliveryExpressTemplateApi.getDeliveryExpressTemplate(id)
columnTitle.value = columnTitleMap.get(formData.value.chargeMode)
//已选的区域节点
const areaIds = []
const chargeAreaIds = []
const freeAreaIds = []
formData.value.templateCharge.forEach((item) => {
//不等于全国的节点
if (item.areaId !== 1) {
areaIds.push(item.areaId)
for (let i = 0; i < item.areaIds.length; i++) {
if (!chargeAreaIds.includes(item.areaIds[i])) {
chargeAreaIds.push(item.areaIds[i])
}
}
//前端价格以元展示
item.startPrice = fenToYuan(item.startPrice)
item.extraPrice = fenToYuan(item.extraPrice)
})
formData.value.templateFree.forEach((item) => {
if (item.areaId !== 1 && !areaIds.includes(item.areaId)) {
areaIds.push(item.areaId)
for (let i = 0; i < item.areaIds.length; i++) {
if (!chargeAreaIds.includes(item.areaIds[i]) && !freeAreaIds.includes(item.areaIds[i])) {
freeAreaIds.push(item.areaIds[i])
}
}
item.freePrice = fenToYuan(item.freePrice)
})
//已选的区域节点
const areaIds = chargeAreaIds.concat(freeAreaIds)
//区域节点，懒加载方式。 已选节点需要缓存展示
areaCache.value = await getAreaListByIds(areaIds)
areaCache.value = await getAreaListByIds(areaIds.join(','))
}
} finally {
formLoading.value = false
@ -250,7 +256,7 @@ const resetForm = () => {
chargeMode: 1,
templateCharge: [
{
areaId: 1,
areaIds: [1],
startCount: 2,
startPrice: 5,
extraCount: 5,
@ -300,10 +306,11 @@ const initData = async () => {
/** 懒加载运费区域树 */
const loadChargeArea = async (node, resolve) => {
//已选区域需要禁止再次选择
const areaIds = []
formData.value.templateCharge.forEach((item) => {
if (item.areaId) {
areaIds.push(item.areaId)
if (item.areaIds.length > 0) {
item.areaIds.forEach((areaId) => areaIds.push(areaId))
}
})
if (node.isLeaf) return resolve([])
@ -312,7 +319,8 @@ const loadChargeArea = async (node, resolve) => {
const data = cloneDeep(defaultArea)
const item = data[0]
if (areaIds.includes(item.id)) {
item.disabled = true
// TODO 禁止选中的区域有些问题， 导致修改时候不能重新选择 不知道如何处理。 暂时注释掉 @芋艿 有空瞅瞅
//item.disabled = true
}
resolve(data)
} else {
@ -320,7 +328,7 @@ const loadChargeArea = async (node, resolve) => {
const data = await getChildrenArea(id)
data.forEach((item) => {
if (areaIds.includes(item.id)) {
item.disabled = true
//item.disabled = true
}
})
resolve(data)
@ -330,11 +338,11 @@ const loadChargeArea = async (node, resolve) => {
/** 懒加载包邮区域树 */
const loadFreeArea = async (node, resolve) => {
if (node.isLeaf) return resolve([])
//已经选择的区域id
//已选区域需要禁止再次选择
const areaIds = []
formData.value.templateFree.forEach((item) => {
if (item.areaId) {
areaIds.push(item.areaId)
if (item.areaIds.length > 0) {
item.areaIds.forEach((areaId) => areaIds.push(areaId))
}
})
const length = node.data.length
@ -343,7 +351,7 @@ const loadFreeArea = async (node, resolve) => {
const data = cloneDeep(defaultArea)
const item = data[0]
if (areaIds.includes(item.id)) {
item.disabled = true
//item.disabled = true
}
resolve(data)
} else {
@ -352,7 +360,8 @@ const loadFreeArea = async (node, resolve) => {
//已选区域需要禁止再次选择
data.forEach((item) => {
if (areaIds.includes(item.id)) {
item.disabled = true
// TODO 禁止选中的区域有些问题， 导致修改时候不能重新选择 不知道如何处理。 暂时注释掉 @芋艿 有空瞅瞅
//item.disabled = true
}
})
resolve(data)
@ -362,7 +371,7 @@ const loadFreeArea = async (node, resolve) => {
const addChargeArea = () => {
const data = formData.value
data.templateCharge.push({
areaId: undefined,
areaIds: [],
startCount: 1,
startPrice: 1,
extraCount: 1,
@ -378,7 +387,7 @@ const deleteChargeArea = (index) => {
const addFreeArea = () => {
const data = formData.value
data.templateFree.push({
areaId: undefined,
areaIds: [],
freeCount: 1,
freePrice: 1
})

4
src/views/mall/trade/delivery/expressTemplate/index.vue
View File

@ -90,13 +90,13 @@
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<DeliveryExpressTemplateForm ref="formRef" @success="getList" />
<ExpressTemplateForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts" name="DeliveryExpressTemplate">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as DeliveryExpressTemplateApi from '@/api/mall/trade/delivery/expressTemplate'
import DeliveryExpressTemplateForm from './DeliveryExpressTemplateForm.vue'
import ExpressTemplateForm from './ExpressTemplateForm.vue'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

288
src/views/mall/trade/delivery/pickUpStore/PickUpStoreForm.vue Normal file
View 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
View 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>