!284 完善 SPU，订单列表：完善表头宽度自适应
Merge pull request !284 from puhui999/dev-to-dev
This commit is contained in:
芋道源码
Gitee
commit
4709c18a6e
2
.env
2
.env
@ -11,7 +11,7 @@ VITE_OPEN=true
|
||||
VITE_APP_TENANT_ENABLE=true
|
||||
|
||||
# 验证码的开关
|
||||
VITE_APP_CAPTCHA_ENABLE=true
|
||||
VITE_APP_CAPTCHA_ENABLE=false
|
||||
|
||||
# 百度统计
|
||||
VITE_APP_BAIDU_CODE = a1ff8825baa73c3a78eb96aa40325abc
|
||||
|
||||
@ -58,6 +58,7 @@
|
||||
"pinia": "^2.1.7",
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.11.2",
|
||||
"sortablejs": "^1.15.0",
|
||||
"steady-xml": "^0.1.0",
|
||||
"url": "^0.11.3",
|
||||
"video.js": "^7.21.5",
|
||||
@ -82,6 +83,7 @@
|
||||
"@types/nprogress": "^0.2.1",
|
||||
"@types/qrcode": "^1.5.2",
|
||||
"@types/qs": "^6.9.8",
|
||||
"@types/sortablejs": "^1.15.4",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.5",
|
||||
"@typescript-eslint/parser": "^6.7.5",
|
||||
"@unocss/transformer-variant-group": "^0.56.5",
|
||||
|
||||
36
src/api/mall/market/banner/index.ts
Normal file
36
src/api/mall/market/banner/index.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface BannerVO {
|
||||
id: number
|
||||
title: string
|
||||
picUrl: string
|
||||
status: number
|
||||
url: string
|
||||
sort: number
|
||||
memo: string
|
||||
}
|
||||
|
||||
// 查询Banner管理列表
|
||||
export const getBannerPage = async (params) => {
|
||||
return await request.get({ url: `/market/banner/page`, params })
|
||||
}
|
||||
|
||||
// 查询Banner管理详情
|
||||
export const getBanner = async (id: number) => {
|
||||
return await request.get({ url: `/market/banner/get?id=` + id })
|
||||
}
|
||||
|
||||
// 新增Banner管理
|
||||
export const createBanner = async (data: BannerVO) => {
|
||||
return await request.post({ url: `/market/banner/create`, data })
|
||||
}
|
||||
|
||||
// 修改Banner管理
|
||||
export const updateBanner = async (data: BannerVO) => {
|
||||
return await request.put({ url: `/market/banner/update`, data })
|
||||
}
|
||||
|
||||
// 删除Banner管理
|
||||
export const deleteBanner = async (id: number) => {
|
||||
return await request.delete({ url: `/market/banner/delete?id=` + id })
|
||||
}
|
||||
@ -25,17 +25,22 @@ export interface Sku {
|
||||
salesCount?: number // 商品销量
|
||||
}
|
||||
|
||||
export interface GiveCouponTemplate {
|
||||
id?: number
|
||||
name?: string // 优惠券名称
|
||||
}
|
||||
|
||||
export interface Spu {
|
||||
id?: number
|
||||
name?: string // 商品名称
|
||||
categoryId?: number | null // 商品分类
|
||||
categoryId?: number | undefined // 商品分类
|
||||
keyword?: string // 关键字
|
||||
unit?: number | null // 单位
|
||||
unit?: number | undefined // 单位
|
||||
picUrl?: string // 商品封面图
|
||||
sliderPicUrls?: string[] // 商品轮播图
|
||||
introduction?: string // 商品简介
|
||||
deliveryTemplateId?: number | null // 运费模版
|
||||
brandId?: number | null // 商品品牌编号
|
||||
deliveryTemplateId?: number | undefined // 运费模版
|
||||
brandId?: number | undefined // 商品品牌编号
|
||||
specType?: boolean // 商品规格
|
||||
subCommissionType?: boolean // 分销类型
|
||||
skus?: Sku[] // sku数组
|
||||
@ -55,6 +60,8 @@ export interface Spu {
|
||||
stock?: number // 商品库存
|
||||
createTime?: Date // 商品创建时间
|
||||
status?: number // 商品状态
|
||||
activityOrders: number[] // 活动排序
|
||||
giveCouponTemplates: GiveCouponTemplate[] // 优惠卷
|
||||
}
|
||||
|
||||
// 获得 Spu 列表
|
||||
|
||||
@ -26,7 +26,7 @@ export const getDeliveryPickUpStore = async (id: number) => {
|
||||
}
|
||||
|
||||
// 查询自提门店精简列表
|
||||
export const getListAllSimple = async () => {
|
||||
export const getListAllSimple = async (): Promise<DeliveryPickUpStoreVO[]> => {
|
||||
return await request.get({ url: '/trade/delivery/pick-up-store/list-all-simple' })
|
||||
}
|
||||
|
||||
|
||||
@ -155,6 +155,7 @@ export enum DICT_TYPE {
|
||||
// ========== MALL - 商品模块 ==========
|
||||
PRODUCT_UNIT = 'product_unit', // 商品单位
|
||||
PRODUCT_SPU_STATUS = 'product_spu_status', //商品状态
|
||||
PROMOTION_TYPE_ENUM = 'promotion_type_enum', // 营销类型枚举
|
||||
|
||||
// ========== MALL - 交易模块 ==========
|
||||
EXPRESS_CHARGE_MODE = 'trade_delivery_express_charge_mode', //快递的计费方式
|
||||
|
||||
59
src/views/mall/product/spu/form/ActivityOrdersSort.vue
Normal file
59
src/views/mall/product/spu/form/ActivityOrdersSort.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div ref="elTagWrappingRef">
|
||||
<template v-if="activityOrders && activityOrders.length > 0">
|
||||
<el-tag
|
||||
v-for="activityType in activityOrders"
|
||||
:key="activityType"
|
||||
:type="promotionTypes.find((item) => item.value === activityType)?.colorType"
|
||||
class="mr-[10px]"
|
||||
>
|
||||
{{ promotionTypes.find((item) => item.value === activityType)?.label }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-tag
|
||||
v-for="type in promotionTypes"
|
||||
:key="type.value as number"
|
||||
:type="type.colorType"
|
||||
class="mr-[10px]"
|
||||
>
|
||||
{{ type.label }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Sortable from 'sortablejs'
|
||||
import type { DictDataType } from '@/utils/dict'
|
||||
|
||||
defineOptions({ name: 'ActivityOrdersSort' })
|
||||
const props = defineProps<{
|
||||
promotionTypes: DictDataType[]
|
||||
activityOrders: number[]
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:activityOrders', v: number[])
|
||||
}>()
|
||||
const elTagWrappingRef = ref() // elTag 容器 Ref
|
||||
|
||||
const initSortable = () => {
|
||||
new Sortable(elTagWrappingRef.value, {
|
||||
swapThreshold: 1,
|
||||
animation: 150,
|
||||
onEnd: (el) => {
|
||||
const innerText = el.to.innerText
|
||||
// 将字符串按换行符分割成数组
|
||||
const activityOrder = innerText.split('\n')
|
||||
// 根据字符串中的顺序重新排序数组
|
||||
const sortedActivityOrder = activityOrder.map((activityName) => {
|
||||
return props.promotionTypes.find((item) => item.label === activityName)?.value
|
||||
})
|
||||
emit('update:activityOrders', sortedActivityOrder as number[])
|
||||
}
|
||||
})
|
||||
}
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
initSortable()
|
||||
})
|
||||
</script>
|
||||
220
src/views/mall/product/spu/form/CouponSelect.vue
Normal file
220
src/views/mall/product/spu/form/CouponSelect.vue
Normal file
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
|
||||
<!-- 搜索工作栏 -->
|
||||
<ContentWrap>
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="82px"
|
||||
>
|
||||
<el-form-item label="优惠券名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请输入优惠劵名"
|
||||
@keyup="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠类型" prop="discountType">
|
||||
<el-select
|
||||
v-model="queryParams.discountType"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请选择优惠券类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠券状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请选择优惠券状态"
|
||||
>
|
||||
<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"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
end-placeholder="结束日期"
|
||||
start-placeholder="开始日期"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="优惠券名称" min-width="140" prop="name" />
|
||||
<el-table-column label="类型" min-width="80" prop="productScope">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="scope.row.productScope" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="优惠" min-width="100" prop="discount">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
|
||||
{{ discountFormat(scope.row) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="领取方式" min-width="100" prop="takeType">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE" :value="scope.row.takeType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:formatter="validityTypeFormat"
|
||||
align="center"
|
||||
label="使用时间"
|
||||
prop="validityType"
|
||||
width="185"
|
||||
/>
|
||||
<el-table-column align="center" label="发放数量" prop="totalCount" />
|
||||
<el-table-column
|
||||
:formatter="remainedCountFormat"
|
||||
align="center"
|
||||
label="剩余数量"
|
||||
prop="totalCount"
|
||||
/>
|
||||
<el-table-column
|
||||
:formatter="takeLimitCountFormat"
|
||||
align="center"
|
||||
label="领取上限"
|
||||
prop="takeLimitCount"
|
||||
/>
|
||||
<el-table-column align="center" label="状态" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
width="180"
|
||||
/>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
<template #footer>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import {
|
||||
discountFormat,
|
||||
remainedCountFormat,
|
||||
takeLimitCountFormat,
|
||||
validityTypeFormat
|
||||
} from '@/views/mall/promotion/coupon/formatter'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
|
||||
import type { GiveCouponTemplate } from '@/api/mall/product/spu'
|
||||
|
||||
defineOptions({ name: 'CouponSelect' })
|
||||
|
||||
defineProps<{
|
||||
multipleSelection: GiveCouponTemplate[]
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:multipleSelection', v: GiveCouponTemplate[])
|
||||
}>()
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('选择优惠卷') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const total = ref(0) // 列表的总页数
|
||||
const list = ref([]) // 字典表格数据
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
status: null,
|
||||
discountType: null,
|
||||
type: null,
|
||||
createTime: []
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// 执行查询
|
||||
const data = await CouponTemplateApi.getCouponTemplatePage(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 open = async () => {
|
||||
dialogVisible.value = true
|
||||
resetQuery()
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
const handleSelectionChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
|
||||
emit(
|
||||
'update:multipleSelection',
|
||||
val.map((item) => ({ id: item.id, name: item.name }))
|
||||
)
|
||||
}
|
||||
const submitForm = () => {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@ -41,18 +41,23 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<!-- TODO @puhui999：tag展示暂时不考虑排序；支持拖动排序 -->
|
||||
<el-form-item label="活动优先级">
|
||||
<el-tag>默认</el-tag>
|
||||
<el-tag class="ml-2" type="success">秒杀</el-tag>
|
||||
<el-tag class="ml-2" type="info">砍价</el-tag>
|
||||
<el-tag class="ml-2" type="warning">拼团</el-tag>
|
||||
<ActivityOrdersSort
|
||||
v-model:activity-orders="formData.activityOrders"
|
||||
:promotion-types="promotionTypes"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- TODO @puhui999：等优惠劵 ok 在搞 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item label="赠送优惠劵">
|
||||
<el-button>选择优惠券</el-button>
|
||||
<el-tag
|
||||
v-for="coupon in formData.giveCouponTemplates"
|
||||
:key="coupon.id as number"
|
||||
class="mr-[10px]"
|
||||
>
|
||||
{{ coupon.name }}
|
||||
</el-tag>
|
||||
<el-button @click="openCouponSelect">选择优惠券</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -61,27 +66,41 @@
|
||||
<!-- 情况二：详情 -->
|
||||
<Descriptions v-if="isDetail" :data="formData" :schema="allSchemas.detailSchema">
|
||||
<template #recommendHot="{ row }">
|
||||
{{ row.recommendHot ? '是' : '否' }}
|
||||
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="row.recommendHot" />
|
||||
</template>
|
||||
<template #recommendBenefit="{ row }">
|
||||
{{ row.recommendBenefit ? '是' : '否' }}
|
||||
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="row.recommendBenefit" />
|
||||
</template>
|
||||
<template #recommendBest="{ row }">
|
||||
{{ row.recommendBest ? '是' : '否' }}
|
||||
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="row.recommendBest" />
|
||||
</template>
|
||||
<template #recommendNew="{ row }">
|
||||
{{ row.recommendNew ? '是' : '否' }}
|
||||
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="row.recommendNew" />
|
||||
</template>
|
||||
<template #recommendGood="{ row }">
|
||||
{{ row.recommendGood ? '是' : '否' }}
|
||||
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="row.recommendGood" />
|
||||
</template>
|
||||
<template #activityOrders>
|
||||
<el-tag>默认</el-tag>
|
||||
<el-tag class="ml-2" type="success">秒杀</el-tag>
|
||||
<el-tag class="ml-2" type="info">砍价</el-tag>
|
||||
<el-tag class="ml-2" type="warning">拼团</el-tag>
|
||||
<template #activityOrders="{ row }">
|
||||
<el-tag
|
||||
v-for="activityType in row.activityOrders"
|
||||
:key="activityType"
|
||||
:type="promotionTypes.find((item) => item.value === activityType)?.colorType"
|
||||
class="mr-[10px]"
|
||||
>
|
||||
{{ promotionTypes.find((item) => item.value === activityType)?.label }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #giveCouponTemplates="{ row }">
|
||||
<el-tag
|
||||
v-for="coupon in row.giveCouponTemplates"
|
||||
:key="coupon.id as number"
|
||||
class="mr-[10px]"
|
||||
>
|
||||
{{ coupon.name }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</Descriptions>
|
||||
<CouponSelect ref="couponSelectRef" v-model:multiple-selection="formData.giveCouponTemplates" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { Spu } from '@/api/mall/product/spu'
|
||||
@ -89,6 +108,9 @@ import { PropType } from 'vue'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { copyValueToTarget } from '@/utils'
|
||||
import { otherSettingsSchema } from './spu.data'
|
||||
import { DICT_TYPE, DictDataType, getIntDictOptions } from '@/utils/dict'
|
||||
import CouponSelect from './CouponSelect.vue'
|
||||
import ActivityOrdersSort from './ActivityOrdersSort.vue'
|
||||
|
||||
defineOptions({ name: 'OtherSettingsForm' })
|
||||
|
||||
@ -105,6 +127,15 @@ const props = defineProps({
|
||||
isDetail: propTypes.bool.def(false) // 是否作为详情组件
|
||||
})
|
||||
|
||||
// 优惠卷
|
||||
const couponSelectRef = ref() // 优惠卷模版选择 Ref
|
||||
const openCouponSelect = () => {
|
||||
couponSelectRef.value?.open()
|
||||
}
|
||||
|
||||
// 活动优先级处理
|
||||
const promotionTypes = ref<DictDataType[]>(getIntDictOptions(DICT_TYPE.PROMOTION_TYPE_ENUM))
|
||||
|
||||
const otherSettingsFormRef = ref() // 表单Ref
|
||||
// 表单数据
|
||||
const formData = ref<Spu>({
|
||||
@ -115,7 +146,9 @@ const formData = ref<Spu>({
|
||||
recommendBenefit: false, // 是否优惠
|
||||
recommendBest: false, // 是否精品
|
||||
recommendNew: false, // 是否新品
|
||||
recommendGood: false // 是否优品
|
||||
recommendGood: false, // 是否优品
|
||||
activityOrders: [], // 活动排序
|
||||
giveCouponTemplates: [] // 赠送的优惠券
|
||||
})
|
||||
// 表单规则
|
||||
const rules = reactive({
|
||||
|
||||
@ -62,14 +62,14 @@ const otherSettingsRef = ref() // 其他设置Ref
|
||||
// spu 表单数据
|
||||
const formData = ref<ProductSpuApi.Spu>({
|
||||
name: '', // 商品名称
|
||||
categoryId: null, // 商品分类
|
||||
categoryId: undefined, // 商品分类
|
||||
keyword: '', // 关键字
|
||||
unit: null, // 单位
|
||||
unit: undefined, // 单位
|
||||
picUrl: '', // 商品封面图
|
||||
sliderPicUrls: [], // 商品轮播图
|
||||
introduction: '', // 商品简介
|
||||
deliveryTemplateId: null, // 运费模版
|
||||
brandId: null, // 商品品牌
|
||||
deliveryTemplateId: undefined, // 运费模版
|
||||
brandId: undefined, // 商品品牌
|
||||
specType: false, // 商品规格
|
||||
subCommissionType: false, // 分销类型
|
||||
skus: [
|
||||
@ -94,7 +94,9 @@ const formData = ref<ProductSpuApi.Spu>({
|
||||
recommendBenefit: false, // 是否优惠
|
||||
recommendBest: false, // 是否精品
|
||||
recommendNew: false, // 是否新品
|
||||
recommendGood: false // 是否优品
|
||||
recommendGood: false, // 是否优品
|
||||
activityOrders: [], // 活动排序
|
||||
giveCouponTemplates: [] // 赠送的优惠券
|
||||
})
|
||||
|
||||
/** 获得详情 */
|
||||
@ -108,7 +110,7 @@ const getDetail = async () => {
|
||||
try {
|
||||
const res = (await ProductSpuApi.getSpu(id)) as ProductSpuApi.Spu
|
||||
res.skus?.forEach((item) => {
|
||||
if (isDetail.value === true) {
|
||||
if (isDetail.value) {
|
||||
item.price = floatToFixed2(item.price)
|
||||
item.marketPrice = floatToFixed2(item.marketPrice)
|
||||
item.costPrice = floatToFixed2(item.costPrice)
|
||||
|
||||
@ -96,7 +96,7 @@ export const otherSettingsSchema = reactive<CrudSchema[]>([
|
||||
},
|
||||
{
|
||||
label: '赠送的优惠劵',
|
||||
field: 'giveCouponTemplateIds'
|
||||
field: 'giveCouponTemplates'
|
||||
},
|
||||
{
|
||||
label: '活动显示排序',
|
||||
|
||||
@ -24,8 +24,8 @@
|
||||
:props="defaultProps"
|
||||
class="w-1/1"
|
||||
clearable
|
||||
placeholder="请选择商品分类"
|
||||
filterable
|
||||
placeholder="请选择商品分类"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
@ -48,7 +48,12 @@
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button v-hasPermi="['product:spu:create']" plain type="primary" @click="openForm">
|
||||
<el-button
|
||||
v-hasPermi="['product:spu:create']"
|
||||
plain
|
||||
type="primary"
|
||||
@click="openForm(undefined)"
|
||||
>
|
||||
<Icon class="mr-5px" icon="ep:plus" />
|
||||
新增
|
||||
</el-button>
|
||||
@ -278,8 +283,8 @@ const queryParams = ref({
|
||||
pageSize: 10,
|
||||
tabType: 0,
|
||||
name: '',
|
||||
categoryId: null,
|
||||
createTime: []
|
||||
categoryId: undefined,
|
||||
createTime: undefined
|
||||
}) // 查询参数
|
||||
const queryFormRef = ref() // 搜索的表单Ref
|
||||
|
||||
|
||||
@ -40,17 +40,6 @@
|
||||
<UploadImg v-model="formData.picUrl" height="80px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- TODO @puhui999：浏览次数，不能修改 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="浏览次数" prop="browseCount">
|
||||
<el-input-number
|
||||
v-model="formData.browseCount"
|
||||
:min="0"
|
||||
clearable
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" />
|
||||
@ -69,19 +58,6 @@
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- TODO @puhui999：可以使用 SpuTableSelect -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商品关联" prop="spuId">
|
||||
<el-select v-model="formData.spuId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in spuList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否热门" prop="recommendHot">
|
||||
<el-radio-group v-model="formData.recommendHot">
|
||||
@ -108,6 +84,14 @@
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="商品关联" prop="spuId">
|
||||
<el-tag v-if="formData.spuId" class="mr-10px">
|
||||
{{ spuList.find((item) => item.id === formData.spuId)?.name }}
|
||||
</el-tag>
|
||||
<el-button @click="spuSelectRef?.open()">选择商品</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="文章内容">
|
||||
<Editor v-model="formData.content" height="150px" />
|
||||
@ -120,12 +104,14 @@
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
<SpuSelect ref="spuSelectRef" @confirm="selectSpu" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
|
||||
import * as ArticleApi from '@/api/mall/promotion/article'
|
||||
import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
import { SpuSelect } from '@/views/mall/promotion/components'
|
||||
|
||||
defineOptions({ name: 'PromotionArticleForm' })
|
||||
|
||||
@ -143,10 +129,9 @@ const formData = ref({
|
||||
author: undefined,
|
||||
picUrl: undefined,
|
||||
introduction: undefined,
|
||||
browseCount: 0,
|
||||
sort: 0,
|
||||
status: 0,
|
||||
spuId: undefined,
|
||||
spuId: 0,
|
||||
recommendHot: false,
|
||||
recommendBanner: false,
|
||||
content: undefined
|
||||
@ -163,7 +148,10 @@ const formRules = reactive({
|
||||
content: [{ required: true, message: '文章内容不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
const spuSelectRef = ref() // 商品和属性选择 Ref
|
||||
const selectSpu = (spuId: number) => {
|
||||
formData.value.spuId = spuId
|
||||
}
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
@ -217,10 +205,9 @@ const resetForm = () => {
|
||||
author: undefined,
|
||||
picUrl: undefined,
|
||||
introduction: undefined,
|
||||
browseCount: 0,
|
||||
sort: 0,
|
||||
status: 0,
|
||||
spuId: undefined,
|
||||
spuId: 0,
|
||||
recommendHot: false,
|
||||
recommendBanner: false,
|
||||
content: undefined
|
||||
|
||||
@ -78,23 +78,22 @@
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
|
||||
<el-table-column align="center" label="编号" prop="id" min-width="60" />
|
||||
<el-table-column align="center" label="封面" prop="picUrl" min-width="80">
|
||||
<el-table-column align="center" label="封面" min-width="80" prop="picUrl">
|
||||
<template #default="{ row }">
|
||||
<el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="标题" prop="title" min-width="180" />
|
||||
<el-table-column align="center" label="分类" prop="categoryId" min-width="180">
|
||||
<el-table-column align="center" label="标题" min-width="180" prop="title" />
|
||||
<el-table-column align="center" label="分类" min-width="180" prop="categoryId">
|
||||
<template #default="scope">
|
||||
{{ categoryList.find((item) => item.id === scope.row.categoryId)?.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="浏览量" prop="browseCount" min-width="180" />
|
||||
<el-table-column align="center" label="作者" prop="author" min-width="180" />
|
||||
<el-table-column align="center" label="文章简介" prop="introduction" min-width="250" />
|
||||
<el-table-column align="center" label="排序" prop="sort" min-width="60" />
|
||||
<el-table-column align="center" label="状态" prop="status" min-width="60">
|
||||
<el-table-column align="center" label="浏览量" min-width="180" prop="browseCount" />
|
||||
<el-table-column align="center" label="作者" min-width="180" prop="author" />
|
||||
<el-table-column align="center" label="文章简介" min-width="250" prop="introduction" />
|
||||
<el-table-column align="center" label="排序" min-width="60" prop="sort" />
|
||||
<el-table-column align="center" label="状态" min-width="60" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
@ -167,7 +166,6 @@ const queryParams = reactive({
|
||||
createTime: []
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
/** 文章封面预览 */
|
||||
const imagePreview = (imgUrl: string) => {
|
||||
createImageViewer({
|
||||
|
||||
142
src/views/mall/promotion/market/banner/BannerForm.vue
Normal file
142
src/views/mall/promotion/market/banner/BannerForm.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
v-loading="formLoading"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="Banner标题" prop="title">
|
||||
<el-input v-model="formData.title" placeholder="请输入Banner标题" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="图片">
|
||||
<UploadImg v-model="formData.picUrl" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="跳转地址" prop="url">
|
||||
<el-input v-model="formData.url" placeholder="请输入跳转地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<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-col :span="24">
|
||||
<el-form-item label="描述" prop="memo">
|
||||
<el-input v-model="formData.memo" placeholder="请输入描述" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import * as BannerApi from '@/api/mall/market/banner'
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
picUrl: undefined,
|
||||
status: 0,
|
||||
url: undefined,
|
||||
sort: 0,
|
||||
memo: undefined
|
||||
})
|
||||
const formRules = reactive({
|
||||
title: [{ required: true, message: 'Banner标题不能为空', trigger: 'blur' }],
|
||||
picUrl: [{ required: true, message: '图片URL不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '活动状态不能为空', trigger: 'blur' }],
|
||||
url: [{ required: true, message: '跳转地址不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
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 BannerApi.getBanner(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 {
|
||||
const data = formData.value as unknown as BannerApi.BannerVO
|
||||
if (formType.value === 'create') {
|
||||
await BannerApi.createBanner(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await BannerApi.updateBanner(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
picUrl: undefined,
|
||||
status: 0,
|
||||
url: undefined,
|
||||
sort: 0,
|
||||
memo: undefined
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
199
src/views/mall/promotion/market/banner/index.vue
Normal file
199
src/views/mall/promotion/market/banner/index.vue
Normal file
@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="Banner标题" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请输入Banner标题"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动状态" prop="status">
|
||||
<el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="全部">
|
||||
<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"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
end-placeholder="结束日期"
|
||||
start-placeholder="开始日期"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['market:banner:create']"
|
||||
plain
|
||||
type="primary"
|
||||
@click="openForm('create')"
|
||||
>
|
||||
<Icon class="mr-5px" icon="ep:plus" />
|
||||
新增
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
|
||||
<el-table-column align="center" label="Banner标题" prop="title" />
|
||||
<el-table-column align="center" label="图片" min-width="80" prop="picUrl">
|
||||
<template #default="{ row }">
|
||||
<el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="状态" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="跳转地址" prop="url" />
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column align="center" label="排序" prop="sort" />
|
||||
<el-table-column align="center" label="描述" prop="memo" />
|
||||
<el-table-column align="center" label="操作">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="['market:banner:update']"
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['market:banner:delete']"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<BannerForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import * as BannerApi from '@/api/mall/market/banner'
|
||||
import BannerForm from './BannerForm.vue'
|
||||
import { createImageViewer } from '@/components/ImageViewer'
|
||||
|
||||
defineOptions({ name: 'Banner' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const total = ref(0) // 列表的总页数
|
||||
const list = ref([]) // 列表的数据
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
createTime: []
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
|
||||
/** 文章封面预览 */
|
||||
const imagePreview = (imgUrl: string) => {
|
||||
createImageViewer({
|
||||
urlList: [imgUrl]
|
||||
})
|
||||
}
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await BannerApi.getBannerPage(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 formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await BannerApi.deleteBanner(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
263
src/views/mall/trade/order/components/OrderTableColumn.vue
Normal file
263
src/views/mall/trade/order/components/OrderTableColumn.vue
Normal file
@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<el-table-column class-name="order-table-col">
|
||||
<template #header>
|
||||
<div class="flex items-center" style="width: 100%">
|
||||
<div :style="{ width: orderTableHeadWidthList[0] + 'px' }" class="flex justify-center">
|
||||
商品信息
|
||||
</div>
|
||||
<div :style="{ width: orderTableHeadWidthList[1] + 'px' }" class="flex justify-center">
|
||||
单价(元)/数量
|
||||
</div>
|
||||
<div :style="{ width: orderTableHeadWidthList[2] + 'px' }" class="flex justify-center">
|
||||
售后状态
|
||||
</div>
|
||||
<div :style="{ width: orderTableHeadWidthList[3] + 'px' }" class="flex justify-center">
|
||||
实付金额(元)
|
||||
</div>
|
||||
<div :style="{ width: orderTableHeadWidthList[4] + 'px' }" class="flex justify-center">
|
||||
买家/收货人
|
||||
</div>
|
||||
<div :style="{ width: orderTableHeadWidthList[5] + 'px' }" class="flex justify-center">
|
||||
配送方式
|
||||
</div>
|
||||
<div :style="{ width: orderTableHeadWidthList[6] + 'px' }" class="flex justify-center">
|
||||
订单状态
|
||||
</div>
|
||||
<div :style="{ width: orderTableHeadWidthList[7] + 'px' }" class="flex justify-center">
|
||||
操作
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-table
|
||||
:ref="setOrderTableRef"
|
||||
:border="true"
|
||||
:data="scope.row.items"
|
||||
:header-cell-style="headerStyle"
|
||||
:span-method="spanMethod"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column min-width="300" prop="spuName">
|
||||
<template #header>
|
||||
<div
|
||||
class="mr-[20px] h-[35px] flex items-center pl-[10px] pr-[10px]"
|
||||
style="background-color: #f7f7f7"
|
||||
>
|
||||
<span class="mr-20px">订单号：{{ scope.row.no }} </span>
|
||||
<span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>
|
||||
<span>订单来源：</span>
|
||||
<dict-tag :type="DICT_TYPE.TERMINAL" :value="scope.row.terminal" class="mr-20px" />
|
||||
<span>支付方式：</span>
|
||||
<dict-tag
|
||||
v-if="scope.row.payChannelCode"
|
||||
:type="DICT_TYPE.PAY_CHANNEL_CODE"
|
||||
:value="scope.row.payChannelCode"
|
||||
class="mr-20px"
|
||||
/>
|
||||
<span v-else class="mr-20px">未支付</span>
|
||||
<span v-if="scope.row.payTime" class="mr-20px">
|
||||
支付时间：{{ formatDate(scope.row.payTime) }}
|
||||
</span>
|
||||
<span>订单类型：</span>
|
||||
<dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="scope.row.type" />
|
||||
</div>
|
||||
</template>
|
||||
<template #default="{ row }">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="mb-[10px] mr-[10px] flex items-start">
|
||||
<div class="mr-[10px]">
|
||||
<el-image
|
||||
:src="row.picUrl"
|
||||
class="!h-[45px] !w-[45px]"
|
||||
fit="contain"
|
||||
@click="imagePreview(row.picUrl)"
|
||||
>
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<icon icon="ep:picture" />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
<ElTooltip :content="row.spuName" placement="top">
|
||||
<span class="overflow-ellipsis max-h-[45px] overflow-hidden">
|
||||
{{ row.spuName }}
|
||||
</span>
|
||||
</ElTooltip>
|
||||
</div>
|
||||
<el-tag
|
||||
v-for="property in row.properties"
|
||||
:key="property.propertyId"
|
||||
class="mb-[10px] mr-[10px]"
|
||||
>
|
||||
{{ property.propertyName }}: {{ property.valueName }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品原价*数量" prop="price" width="150">
|
||||
<template #default="{ row }">
|
||||
{{ floatToFixed2(row.price) }} 元 / {{ row.count }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="售后状态" prop="afterSaleStatus" width="120">
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
|
||||
:value="row.afterSaleStatus"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="实际支付" min-width="120" prop="payPrice">
|
||||
<template #default>
|
||||
{{ floatToFixed2(scope.row.payPrice) + '元' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="买家/收货人" min-width="160">
|
||||
<template #default>
|
||||
<!-- 快递发货 -->
|
||||
<div
|
||||
v-if="scope.row.deliveryType === DeliveryTypeEnum.EXPRESS.type"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<span>买家：{{ scope.row.user.nickname }}</span>
|
||||
<span>
|
||||
收货人：{{ scope.row.receiverName }} {{ scope.row.receiverMobile }}
|
||||
{{ scope.row.receiverAreaName }} {{ scope.row.receiverDetailAddress }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- 自提 -->
|
||||
<div
|
||||
v-if="scope.row.deliveryType === DeliveryTypeEnum.PICK_UP.type"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<span>
|
||||
门店名称：
|
||||
{{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.name }}
|
||||
</span>
|
||||
<span>
|
||||
门店手机：
|
||||
{{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.phone }}
|
||||
</span>
|
||||
<span>
|
||||
自提门店:
|
||||
{{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.detailAddress }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="配送方式" width="120">
|
||||
<template #default>
|
||||
<dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="scope.row.deliveryType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="订单状态" width="120">
|
||||
<template #default>
|
||||
<dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="160">
|
||||
<template #default>
|
||||
<slot :row="scope.row"></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { DeliveryTypeEnum } from '@/utils/constants'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { floatToFixed2 } from '@/utils'
|
||||
import * as TradeOrderApi from '@/api/mall/trade/order'
|
||||
import { OrderVO } from '@/api/mall/trade/order'
|
||||
import type { TableColumnCtx, TableInstance } from 'element-plus'
|
||||
import { createImageViewer } from '@/components/ImageViewer'
|
||||
import type { DeliveryPickUpStoreVO } from '@/api/mall/trade/delivery/pickUpStore'
|
||||
|
||||
defineOptions({ name: 'OrderTableColumn' })
|
||||
|
||||
const props = defineProps<{
|
||||
list: OrderVO[]
|
||||
pickUpStoreList: DeliveryPickUpStoreVO[]
|
||||
}>()
|
||||
|
||||
const headerStyle = ({ row, columnIndex }: any) => {
|
||||
// 表头第一行第一列占 8
|
||||
if (columnIndex === 0) {
|
||||
row[columnIndex].colSpan = 8
|
||||
} else {
|
||||
// 其余的不要
|
||||
row[columnIndex].colSpan = 0
|
||||
return {
|
||||
display: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
interface SpanMethodProps {
|
||||
row: TradeOrderApi.OrderItemRespVO
|
||||
column: TableColumnCtx<TradeOrderApi.OrderItemRespVO>
|
||||
rowIndex: number
|
||||
columnIndex: number
|
||||
}
|
||||
|
||||
type spanMethodResp = number[] | { rowspan: number; colspan: number } | undefined
|
||||
const spanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps): spanMethodResp => {
|
||||
const len = props.list.find(
|
||||
(order) => order.items?.findIndex((item) => item.id === row.id) !== -1
|
||||
)?.items?.length
|
||||
// 要合并的列，从零开始
|
||||
const colIndex = [3, 4, 5, 6, 7]
|
||||
if (colIndex.includes(columnIndex)) {
|
||||
// 除了第一行其余的不要
|
||||
if (rowIndex !== 0) {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
}
|
||||
}
|
||||
// 动态合并行
|
||||
return {
|
||||
rowspan: len!,
|
||||
colspan: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 解决 ref 在 v-for 中的获取问题*/
|
||||
const setOrderTableRef = (el: TableInstance) => {
|
||||
if (!el) return
|
||||
// 只要第一个表也就是开始的第一行
|
||||
if (el.tableId !== 'el-table_2') {
|
||||
return
|
||||
}
|
||||
tableHeadWidthAuto(el)
|
||||
}
|
||||
// 头部 col 宽度初始化
|
||||
const orderTableHeadWidthList = ref([300, 150, 120, 120, 160, 120, 120, 160])
|
||||
// 头部宽度自适应
|
||||
const tableHeadWidthAuto = (el: TableInstance) => {
|
||||
const columns = el.store.states.columns.value
|
||||
if (columns.length === 0) {
|
||||
return
|
||||
}
|
||||
columns.forEach((col: TableColumnCtx<TableInstance>, index: number) => {
|
||||
if (col.realWidth) {
|
||||
orderTableHeadWidthList.value[index] = col.realWidth
|
||||
}
|
||||
})
|
||||
}
|
||||
/** 商品图预览 */
|
||||
const imagePreview = (imgUrl: string) => {
|
||||
createImageViewer({
|
||||
urlList: [imgUrl]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.order-table-col > .cell) {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
3
src/views/mall/trade/order/components/index.ts
Normal file
3
src/views/mall/trade/order/components/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import OrderTableColumn from './OrderTableColumn.vue'
|
||||
|
||||
export { OrderTableColumn }
|
||||
@ -164,147 +164,15 @@
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column class-name="order-table-col">
|
||||
<template #header>
|
||||
<!-- TODO @puhui999：小屏幕下，会有偏移，后续看看 -->
|
||||
<div class="flex items-center" style="width: 100%">
|
||||
<div class="ml-100px mr-200px">商品信息</div>
|
||||
<div class="mr-60px">单价(元)/数量</div>
|
||||
<div class="mr-60px">售后状态</div>
|
||||
<div class="mr-60px">实付金额(元)</div>
|
||||
<div class="mr-60px">买家/收货人</div>
|
||||
<div class="mr-60px">配送方式</div>
|
||||
<div class="mr-60px">订单状态</div>
|
||||
<div class="mr-60px">操作</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-table
|
||||
:border="true"
|
||||
:data="scope.row.items"
|
||||
:header-cell-style="headerStyle"
|
||||
:span-method="spanMethod"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column min-width="300" prop="spuName">
|
||||
<template #header>
|
||||
<div
|
||||
class="flex items-center"
|
||||
style="width: 100%; height: 35px; background-color: #f7f7f7"
|
||||
>
|
||||
<span class="mr-20px">订单号：{{ scope.row.no }} </span>
|
||||
<span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>
|
||||
<span>订单来源：</span>
|
||||
<dict-tag
|
||||
:type="DICT_TYPE.TERMINAL"
|
||||
:value="scope.row.terminal"
|
||||
class="mr-20px"
|
||||
/>
|
||||
<span>支付方式：</span>
|
||||
<dict-tag
|
||||
v-if="scope.row.payChannelCode"
|
||||
:type="DICT_TYPE.PAY_CHANNEL_CODE"
|
||||
:value="scope.row.payChannelCode"
|
||||
class="mr-20px"
|
||||
/>
|
||||
<v-else v-else class="mr-20px">未支付</v-else>
|
||||
<span v-if="scope.row.payTime" class="mr-20px">
|
||||
支付时间：{{ formatDate(scope.row.payTime) }}
|
||||
</span>
|
||||
<span>订单类型：</span>
|
||||
<dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="scope.row.type" />
|
||||
</div>
|
||||
</template>
|
||||
<OrderTableColumn :list="list" :pick-up-store-list="pickUpStoreList">
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center">
|
||||
<el-image
|
||||
:src="row.picUrl"
|
||||
class="mr-10px h-30px w-30px"
|
||||
@click="imagePreview(row.picUrl)"
|
||||
/>
|
||||
<span class="mr-10px">{{ row.spuName }}</span>
|
||||
<el-tag
|
||||
v-for="property in row.properties"
|
||||
:key="property.propertyId"
|
||||
class="mr-10px"
|
||||
>
|
||||
{{ property.propertyName }}: {{ property.valueName }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品原价*数量" prop="price" width="150">
|
||||
<template #default="{ row }">
|
||||
{{ floatToFixed2(row.price) }} 元 / {{ row.count }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="售后状态" prop="afterSaleStatus" width="120">
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
|
||||
:value="row.afterSaleStatus"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="实际支付" min-width="120" prop="payPrice">
|
||||
<template #default>
|
||||
{{ floatToFixed2(scope.row.payPrice) + '元' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="买家/收货人" min-width="160">
|
||||
<template #default>
|
||||
<!-- 快递发货 -->
|
||||
<div
|
||||
v-if="scope.row.deliveryType === DeliveryTypeEnum.EXPRESS.type"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<span>买家：{{ scope.row.user.nickname }}</span>
|
||||
<span>
|
||||
收货人：{{ scope.row.receiverName }} {{ scope.row.receiverMobile }}
|
||||
{{ scope.row.receiverAreaName }} {{ scope.row.receiverDetailAddress }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- 自提 -->
|
||||
<div
|
||||
v-if="scope.row.deliveryType === DeliveryTypeEnum.PICK_UP.type"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<span>
|
||||
门店名称：
|
||||
{{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.name }}
|
||||
</span>
|
||||
<span>
|
||||
门店手机：
|
||||
{{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.phone }}
|
||||
</span>
|
||||
<span>
|
||||
自提门店:
|
||||
{{
|
||||
pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.detailAddress
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="配送方式" width="120">
|
||||
<template #default>
|
||||
<dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="scope.row.deliveryType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="订单状态" width="120">
|
||||
<template #default>
|
||||
<dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="160">
|
||||
<template #default>
|
||||
<!-- TODO 权限后续补齐 -->
|
||||
<div class="flex items-center justify-center">
|
||||
<el-button link type="primary" @click="openDetail(scope.row.id)">
|
||||
<el-button link type="primary" @click="openDetail(row.id)">
|
||||
<Icon icon="ep:notification" />
|
||||
详情
|
||||
</el-button>
|
||||
<el-dropdown @command="(command) => handleCommand(command, scope.row)">
|
||||
<el-dropdown @command="(command) => handleCommand(command, row)">
|
||||
<el-button link type="primary">
|
||||
<Icon icon="ep:d-arrow-right" />
|
||||
更多
|
||||
@ -314,8 +182,8 @@
|
||||
<!-- 如果是【快递】，并且【未发货】，则展示【发货】按钮 -->
|
||||
<el-dropdown-item
|
||||
v-if="
|
||||
scope.row.deliveryType === DeliveryTypeEnum.EXPRESS.type &&
|
||||
scope.row.status === TradeOrderStatusEnum.UNDELIVERED.status
|
||||
row.deliveryType === DeliveryTypeEnum.EXPRESS.type &&
|
||||
row.status === TradeOrderStatusEnum.UNDELIVERED.status
|
||||
"
|
||||
command="delivery"
|
||||
>
|
||||
@ -331,10 +199,7 @@
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</OrderTableColumn>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
@ -351,22 +216,19 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance, TableColumnCtx } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import OrderDeliveryForm from '@/views/mall/trade/order/form/OrderDeliveryForm.vue'
|
||||
import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.vue'
|
||||
import * as TradeOrderApi from '@/api/mall/trade/order'
|
||||
import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
|
||||
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { floatToFixed2 } from '@/utils'
|
||||
import { createImageViewer } from '@/components/ImageViewer'
|
||||
import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
|
||||
import { DeliveryTypeEnum, TradeOrderStatusEnum } from '@/utils/constants'
|
||||
import { OrderTableColumn } from './components'
|
||||
|
||||
defineOptions({ name: 'TradeOrder' })
|
||||
|
||||
const { currentRoute, push } = useRouter() // 路由跳转
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const total = ref(2) // 列表的总页数
|
||||
const list = ref<TradeOrderApi.OrderVO[]>([]) // 列表的数据
|
||||
@ -375,15 +237,15 @@ const queryFormRef = ref<FormInstance>() // 搜索的表单
|
||||
const queryParams = ref({
|
||||
pageNo: 1, // 页数
|
||||
pageSize: 10, // 每页显示数量
|
||||
status: null, // 订单状态
|
||||
payChannelCode: null, // 支付方式
|
||||
createTime: null, // 创建时间
|
||||
terminal: null, // 订单来源
|
||||
type: null, // 订单类型
|
||||
deliveryType: null, // 配送方式
|
||||
logisticsId: null, // 快递公司
|
||||
pickUpStoreId: null, // 自提门店
|
||||
pickUpVerifyCode: null // 自提核销码
|
||||
status: undefined, // 订单状态
|
||||
payChannelCode: undefined, // 支付方式
|
||||
createTime: undefined, // 创建时间
|
||||
terminal: undefined, // 订单来源
|
||||
type: undefined, // 订单类型
|
||||
deliveryType: undefined, // 配送方式
|
||||
logisticsId: undefined, // 快递公司
|
||||
pickUpStoreId: undefined, // 自提门店
|
||||
pickUpVerifyCode: undefined // 自提核销码
|
||||
})
|
||||
const queryType = reactive({ queryParam: '' }) // 订单搜索类型 queryParam
|
||||
|
||||
@ -409,48 +271,6 @@ const inputChangeSelect = (val: string) => {
|
||||
})
|
||||
}
|
||||
|
||||
const headerStyle = ({ row, columnIndex }: any) => {
|
||||
// 表头第一行第一列占 8
|
||||
if (columnIndex === 0) {
|
||||
row[columnIndex].colSpan = 8
|
||||
} else {
|
||||
// 其余的不要
|
||||
row[columnIndex].colSpan = 0
|
||||
return {
|
||||
display: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
interface SpanMethodProps {
|
||||
row: TradeOrderApi.OrderItemRespVO
|
||||
column: TableColumnCtx<TradeOrderApi.OrderItemRespVO>
|
||||
rowIndex: number
|
||||
columnIndex: number
|
||||
}
|
||||
|
||||
const spanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps) => {
|
||||
const len = list.value.find(
|
||||
(order) => order.items?.findIndex((item) => item.id === row.id) !== -1
|
||||
)?.items?.length
|
||||
// 要合并的列，从零开始
|
||||
const colIndex = [3, 4, 5, 6, 7]
|
||||
if (colIndex.includes(columnIndex)) {
|
||||
// 除了第一行其余的不要
|
||||
if (rowIndex !== 0) {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
}
|
||||
}
|
||||
// 动态合并行
|
||||
return {
|
||||
rowspan: len,
|
||||
colspan: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
@ -473,28 +293,21 @@ const handleQuery = async () => {
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields()
|
||||
queryParams.value = {
|
||||
pickUpVerifyCode: null, // 自提核销码
|
||||
pageNo: 1, // 页数
|
||||
pageSize: 10, // 每页显示数量
|
||||
status: null, // 订单状态
|
||||
payChannelCode: null, // 支付方式
|
||||
createTime: null, // 创建时间
|
||||
terminal: null, // 订单来源
|
||||
type: null, // 订单类型
|
||||
deliveryType: null, // 配送方式
|
||||
logisticsId: null, // 快递公司
|
||||
pickUpStoreId: null // 自提门店
|
||||
status: undefined, // 订单状态
|
||||
payChannelCode: undefined, // 支付方式
|
||||
createTime: undefined, // 创建时间
|
||||
terminal: undefined, // 订单来源
|
||||
type: undefined, // 订单类型
|
||||
deliveryType: undefined, // 配送方式
|
||||
logisticsId: undefined, // 快递公司
|
||||
pickUpStoreId: undefined, // 自提门店
|
||||
pickUpVerifyCode: undefined // 自提核销码
|
||||
}
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 商品图预览 */
|
||||
const imagePreview = (imgUrl: string) => {
|
||||
createImageViewer({
|
||||
urlList: [imgUrl]
|
||||
})
|
||||
}
|
||||
|
||||
/** 查看订单详情 */
|
||||
const openDetail = (id: number) => {
|
||||
push({ name: 'TradeOrderDetail', params: { id } })
|
||||
@ -522,8 +335,8 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
const pickUpStoreList = ref([]) // 自提门店精简列表
|
||||
const deliveryExpressList = ref([]) // 物流公司
|
||||
const pickUpStoreList = ref<PickUpStoreApi.DeliveryPickUpStoreVO[]>([]) // 自提门店精简列表
|
||||
const deliveryExpressList = ref<DeliveryExpressApi.DeliveryExpressVO[]>([]) // 物流公司
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
await getList()
|
||||
@ -531,8 +344,3 @@ onMounted(async () => {
|
||||
deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.order-table-col > .cell) {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -74,7 +74,11 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="queryParams.deliveryType === 1" label="快递公司">
|
||||
<el-form-item
|
||||
v-if="queryParams.deliveryType === DeliveryTypeEnum.EXPRESS.type"
|
||||
label="快递公司"
|
||||
prop="logisticsId"
|
||||
>
|
||||
<el-select v-model="queryParams.logisticsId" class="!w-280px" clearable placeholder="全部">
|
||||
<el-option
|
||||
v-for="item in deliveryExpressList"
|
||||
@ -84,7 +88,11 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="queryParams.deliveryType === 2" label="自提门店">
|
||||
<el-form-item
|
||||
v-if="queryParams.deliveryType === DeliveryTypeEnum.PICK_UP.type"
|
||||
label="自提门店"
|
||||
prop="pickUpStoreId"
|
||||
>
|
||||
<el-select
|
||||
v-model="queryParams.pickUpStoreId"
|
||||
class="!w-280px"
|
||||
@ -100,27 +108,45 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- TODO 聚合搜索等售后结束后实现-->
|
||||
<!-- <el-form-item label="聚合搜索">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-show="true"-->
|
||||
<!-- v-model="queryType.v"-->
|
||||
<!-- class="!w-280px"-->
|
||||
<!-- clearable-->
|
||||
<!-- placeholder="请输入"-->
|
||||
<!-- >-->
|
||||
<!-- <template #prepend>-->
|
||||
<!-- <el-select v-model="queryType.k" class="!w-110px" clearable placeholder="全部">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="dict in searchList"-->
|
||||
<!-- :key="dict.value"-->
|
||||
<!-- :label="dict.label"-->
|
||||
<!-- :value="dict.value"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item
|
||||
v-if="queryParams.deliveryType === DeliveryTypeEnum.PICK_UP.type"
|
||||
label="核销码"
|
||||
prop="pickUpVerifyCode"
|
||||
>
|
||||
<el-input
|
||||
v-model="queryParams.pickUpVerifyCode"
|
||||
class="!w-280px"
|
||||
clearable
|
||||
placeholder="请输入自提核销码"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="聚合搜索">
|
||||
<el-input
|
||||
v-show="true"
|
||||
v-model="queryParams[queryType.queryParam]"
|
||||
class="!w-280px"
|
||||
clearable
|
||||
placeholder="请输入"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-select
|
||||
v-model="queryType.queryParam"
|
||||
class="!w-110px"
|
||||
clearable
|
||||
placeholder="全部"
|
||||
@change="inputChangeSelect"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in dynamicSearchList"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
@ -137,143 +163,14 @@
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column class-name="order-table-col">
|
||||
<template #header>
|
||||
<!-- TODO @puhui999：小屏幕下，会有偏移，后续看看 -->
|
||||
<div class="flex items-center" style="width: 100%">
|
||||
<div class="ml-100px mr-200px">商品信息</div>
|
||||
<div class="mr-60px">单价(元)/数量</div>
|
||||
<div class="mr-60px">售后状态</div>
|
||||
<div class="mr-60px">实付金额(元)</div>
|
||||
<div class="mr-60px">买家/收货人</div>
|
||||
<div class="mr-60px">配送方式</div>
|
||||
<div class="mr-60px">订单状态</div>
|
||||
<div class="mr-60px">操作</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-table
|
||||
:border="true"
|
||||
:data="scope.row.items"
|
||||
:header-cell-style="headerStyle"
|
||||
:span-method="spanMethod"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column min-width="300" prop="spuName">
|
||||
<template #header>
|
||||
<div
|
||||
class="flex items-center"
|
||||
style="width: 100%; height: 35px; background-color: #f7f7f7"
|
||||
>
|
||||
<span class="mr-20px">订单号：{{ scope.row.no }} </span>
|
||||
<span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>
|
||||
<span>订单来源：</span>
|
||||
<dict-tag
|
||||
:type="DICT_TYPE.TERMINAL"
|
||||
:value="scope.row.terminal"
|
||||
class="mr-20px"
|
||||
/>
|
||||
<span>支付方式：</span>
|
||||
<dict-tag
|
||||
v-if="scope.row.payChannelCode"
|
||||
:type="DICT_TYPE.PAY_CHANNEL_CODE"
|
||||
:value="scope.row.payChannelCode"
|
||||
class="mr-20px"
|
||||
/>
|
||||
<v-else v-else class="mr-20px">未支付</v-else>
|
||||
<span v-if="scope.row.payTime" class="mr-20px">
|
||||
支付时间：{{ formatDate(scope.row.payTime) }}
|
||||
</span>
|
||||
<span>订单类型：</span>
|
||||
<dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="scope.row.type" />
|
||||
</div>
|
||||
</template>
|
||||
<OrderTableColumn :list="list" :pick-up-store-list="pickUpStoreList">
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center">
|
||||
<el-image
|
||||
:src="row.picUrl"
|
||||
class="mr-10px h-30px w-30px"
|
||||
@click="imagePreview(row.picUrl)"
|
||||
/>
|
||||
<span class="mr-10px">{{ row.spuName }}</span>
|
||||
<el-tag
|
||||
v-for="property in row.properties"
|
||||
:key="property.propertyId"
|
||||
class="mr-10px"
|
||||
>
|
||||
{{ property.propertyName }}: {{ property.valueName }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品原价*数量" prop="price" width="150">
|
||||
<template #default="{ row }">
|
||||
{{ floatToFixed2(row.price) }} 元 / {{ row.count }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="售后状态" prop="afterSaleStatus" width="120">
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
|
||||
:value="row.afterSaleStatus"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="实际支付" min-width="120" prop="payPrice">
|
||||
<template #default>
|
||||
{{ floatToFixed2(scope.row.payPrice) + '元' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="买家/收货人" min-width="160">
|
||||
<template #default>
|
||||
<!-- 快递发货 -->
|
||||
<div v-if="scope.row.deliveryType === 1" class="flex flex-col">
|
||||
<span>买家：{{ scope.row.user.nickname }}</span>
|
||||
<span>
|
||||
收货人：{{ scope.row.receiverName }} {{ scope.row.receiverMobile }}
|
||||
{{ scope.row.receiverAreaName }} {{ scope.row.receiverDetailAddress }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- 自提 -->
|
||||
<div v-if="scope.row.deliveryType === 2" class="flex flex-col">
|
||||
<span>
|
||||
门店名称：
|
||||
{{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.name }}
|
||||
</span>
|
||||
<span>
|
||||
门店手机：
|
||||
{{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.phone }}
|
||||
</span>
|
||||
<span>
|
||||
自提门店:
|
||||
{{
|
||||
pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.detailAddress
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="配送方式" width="120">
|
||||
<template #default>
|
||||
<dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="scope.row.deliveryType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="订单状态" width="120">
|
||||
<template #default>
|
||||
<dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="160">
|
||||
<template #default>
|
||||
<el-button link type="primary" @click="openDetail(scope.row.id)">
|
||||
<el-button link type="primary" @click="openDetail(row.id)">
|
||||
<Icon icon="ep:notification" />
|
||||
详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</OrderTableColumn>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
@ -284,66 +181,82 @@
|
||||
/>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import * as OrderApi from '@/api/mall/trade/order/index'
|
||||
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { floatToFixed2 } from '@/utils'
|
||||
import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
|
||||
import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
|
||||
import { createImageViewer } from '@/components/ImageViewer'
|
||||
import * as TradeOrderApi from '@/api/mall/trade/order'
|
||||
import { FormInstance, TableColumnCtx } from 'element-plus'
|
||||
import { FormInstance } from 'element-plus'
|
||||
import { OrderTableColumn } from '@/views/mall/trade/order/components'
|
||||
import { DeliveryTypeEnum } from '@/utils/constants'
|
||||
|
||||
const { push } = useRouter() // 路由跳转
|
||||
|
||||
const { userId }: { userId: number } = defineProps({
|
||||
userId: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const { userId } = defineProps<{
|
||||
userId: number
|
||||
}>()
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const total = ref(0) // 列表的总页数
|
||||
const list = ref([]) // 列表的数据
|
||||
const pickUpStoreList = ref([]) // 自提门店精简列表
|
||||
const deliveryExpressList = ref([]) // 物流公司
|
||||
const pickUpStoreList = ref<PickUpStoreApi.DeliveryPickUpStoreVO[]>([]) // 自提门店精简列表
|
||||
const deliveryExpressList = ref<DeliveryExpressApi.DeliveryExpressVO[]>([]) // 物流公司
|
||||
const queryFormRef = ref<FormInstance>() // 搜索的表单
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
createDate: [],
|
||||
userId: NaN
|
||||
// 表单搜索
|
||||
const queryParams = ref({
|
||||
pageNo: 1, // 页数
|
||||
pageSize: 10, // 每页显示数量
|
||||
userId: userId,
|
||||
status: undefined, // 订单状态
|
||||
payChannelCode: undefined, // 支付方式
|
||||
createTime: undefined, // 创建时间
|
||||
terminal: undefined, // 订单来源
|
||||
type: undefined, // 订单类型
|
||||
deliveryType: undefined, // 配送方式
|
||||
logisticsId: undefined, // 快递公司
|
||||
pickUpStoreId: undefined, // 自提门店
|
||||
pickUpVerifyCode: undefined // 自提核销码
|
||||
})
|
||||
const headerStyle = ({ row, columnIndex }: any) => {
|
||||
// 表头第一行第一列占 8
|
||||
if (columnIndex === 0) {
|
||||
row[columnIndex].colSpan = 8
|
||||
} else {
|
||||
// 其余的不要
|
||||
row[columnIndex].colSpan = 0
|
||||
return {
|
||||
display: 'none'
|
||||
}
|
||||
const queryType = reactive({ queryParam: '' }) // 订单搜索类型 queryParam
|
||||
|
||||
// 订单聚合搜索 select 类型配置（动态搜索）
|
||||
const dynamicSearchList = ref([
|
||||
{ value: 'no', label: '订单号' },
|
||||
{ value: 'userNickname', label: '用户昵称' },
|
||||
{ value: 'userMobile', label: '用户电话' }
|
||||
])
|
||||
/**
|
||||
* 聚合搜索切换查询对象时触发
|
||||
* @param val
|
||||
*/
|
||||
const inputChangeSelect = (val: string) => {
|
||||
dynamicSearchList.value
|
||||
.filter((item) => item.value !== val)
|
||||
?.forEach((item1) => {
|
||||
// 清除集合搜索无用属性
|
||||
if (queryParams.value.hasOwnProperty(item1.value)) {
|
||||
delete queryParams.value[item1.value]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = async () => {
|
||||
queryParams.pageNo = 1
|
||||
queryParams.value.pageNo = 1
|
||||
await getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields()
|
||||
queryParams.value.userId = userId
|
||||
handleQuery()
|
||||
}
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await OrderApi.getOrderPage(queryParams)
|
||||
console.log(data)
|
||||
const data = await OrderApi.getOrderPage(queryParams.value)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
@ -351,42 +264,6 @@ const getList = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
/** 商品图预览 */
|
||||
const imagePreview = (imgUrl: string) => {
|
||||
createImageViewer({
|
||||
urlList: [imgUrl]
|
||||
})
|
||||
}
|
||||
|
||||
interface SpanMethodProps {
|
||||
row: TradeOrderApi.OrderItemRespVO
|
||||
column: TableColumnCtx<TradeOrderApi.OrderItemRespVO>
|
||||
rowIndex: number
|
||||
columnIndex: number
|
||||
}
|
||||
|
||||
const spanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps) => {
|
||||
const len = list.value.find(
|
||||
(order) => order.items?.findIndex((item) => item.id === row.id) !== -1
|
||||
)?.items?.length
|
||||
// 要合并的列，从零开始
|
||||
const colIndex = [3, 4, 5, 6, 7]
|
||||
if (colIndex.includes(columnIndex)) {
|
||||
// 除了第一行其余的不要
|
||||
if (rowIndex !== 0) {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
}
|
||||
}
|
||||
// 动态合并行
|
||||
return {
|
||||
rowspan: len,
|
||||
colspan: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 查看订单详情 */
|
||||
const openDetail = (id: number) => {
|
||||
push({ name: 'TradeOrderDetail', params: { orderId: id } })
|
||||
@ -394,10 +271,8 @@ const openDetail = (id: number) => {
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
queryParams.userId = userId
|
||||
await getList()
|
||||
pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
|
||||
deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user