Skip to content

phsl / admin

Go to a project
Commit 7df7719b by liuhongfeng
Options

Merge branch 'master' of https://gitee.com/yudaocode/yudao-ui-admin-vue3

parents 764e1715 54897b6d
Showing with 952 additions and 279 deletions
src/api/crm/permission/index.ts
...@@ -6,9 +6,9 @@ export interface PermissionVO { ...@@ -6,9 +6,9 @@ export interface PermissionVO {
bizType: number | undefined // Crm 类型 bizType: number | undefined // Crm 类型
bizId: number | undefined // Crm 类型数据编号 bizId: number | undefined // Crm 类型数据编号
level: number | undefined // 权限级别 level: number | undefined // 权限级别
deptName?: string // 部门名称 // 岗位名称数组 TODO @puhui999：数组？ deptName?: string // 部门名称
nickname?: string // 用户昵称 nickname?: string // 用户昵称
postNames?: string // 岗位名称数组 TODO @puhui999：数组？ postNames?: string[] // 岗位名称数组
createTime?: Date createTime?: Date
} }
...@@ -19,7 +19,7 @@ export const getPermissionList = async (params) => { ...@@ -19,7 +19,7 @@ export const getPermissionList = async (params) => {
// 新增团队成员 // 新增团队成员
export const createPermission = async (data: PermissionVO) => { export const createPermission = async (data: PermissionVO) => {
return await request.post({ url: `/crm/permission/add`, data }) return await request.post({ url: `/crm/permission/create`, data })
} }
// 修改团队成员权限级别 // 修改团队成员权限级别
......
src/api/mall/promotion/coupon/couponTemplate.ts
...@@ -73,6 +73,13 @@ export function getCouponTemplatePage(params: PageParam) { ...@@ -73,6 +73,13 @@ export function getCouponTemplatePage(params: PageParam) {
}) })
} }
// 获得优惠劵模板分页
export function getCouponTemplateList(ids: number[]) {
return request.get({
url: `/promotion/coupon-template/list?ids=${ids}`
})
}
// 导出优惠劵模板 Excel // 导出优惠劵模板 Excel
export function exportCouponTemplateExcel(params: PageParam) { export function exportCouponTemplateExcel(params: PageParam) {
return request.get({ return request.get({
......
src/components/DiyEditor/components/mobile/CouponCard/component.tsx 0 → 100644
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
import { CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum } from '@/utils/constants'
import { floatToFixed2 } from '@/utils'
import { formatDate } from '@/utils/formatTime'
// 优惠值
export const CouponDiscount = defineComponent({
name: 'CouponDiscount',
props: {
coupon: {
type: CouponTemplateApi.CouponTemplateVO
}
},
setup(props) {
const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
// 折扣
let value = coupon.discountPercent + ''
let suffix = ' 折'
// 满减
if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
value = floatToFixed2(coupon.discountPrice)
suffix = ' 元'
}
return () => (
<div>
<span class={'text-20px font-bold'}>{value}</span>
<span>{suffix}</span>
</div>
)
}
})
// 优惠描述
export const CouponDiscountDesc = defineComponent({
name: 'CouponDiscountDesc',
props: {
coupon: {
type: CouponTemplateApi.CouponTemplateVO
}
},
setup(props) {
const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
// 使用条件
const useCondition = coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : ''
// 优惠描述
const discountDesc =
coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
? `减${floatToFixed2(coupon.discountPrice)}元`
: `打${coupon.discountPercent}折`
return () => (
<div>
<span>{useCondition}</span>
<span>{discountDesc}</span>
</div>
)
}
})
// 有效期
export const CouponValidTerm = defineComponent({
name: 'CouponValidTerm',
props: {
coupon: {
type: CouponTemplateApi.CouponTemplateVO
}
},
setup(props) {
const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
const text =
coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
coupon.validEndTime,
'YYYY-MM-DD'
)}`
: `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`
return () => <div>{text}</div>
}
})
src/components/DiyEditor/components/mobile/CouponCard/config.ts 0 → 100644
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
/** 商品卡片属性 */
export interface CouponCardProperty {
// 列数
columns: number
// 背景图
bgImg: string
// 文字颜色
textColor: string
// 按钮样式
button: {
// 颜色
color: string
// 背景颜色
bgColor: string
}
// 间距
space: number
// 优惠券编号列表
couponIds: number[]
// 组件样式
style: ComponentStyle
}
// 定义组件
export const component = {
id: 'CouponCard',
name: '优惠券',
icon: 'ep:ticket',
property: {
columns: 1,
bgImg: '',
textColor: '#E9B461',
button: {
color: '#434343',
bgColor: ''
},
space: 0,
couponIds: [],
style: {
bgType: 'color',
bgColor: '',
marginBottom: 8
} as ComponentStyle
}
} as DiyComponent<CouponCardProperty>
src/components/DiyEditor/components/mobile/CouponCard/index.vue 0 → 100644
<template>
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
<div
class="flex flex-row text-12px"
:style="{
gap: `${property.space}px`,
width: scrollbarWidth
}"
>
<div
class="box-content"
:style="{
background: property.bgImg
? `url(${property.bgImg}) 100% center / 100% 100% no-repeat`
: '#fff',
width: `${couponWidth}px`,
color: property.textColor
}"
v-for="(coupon, index) in couponList"
:key="index"
>
<!-- 布局1：1列-->
<div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
<div class="flex flex-col justify-evenly gap-4px">
<!-- 优惠值 -->
<CouponDiscount :coupon="coupon" />
<!-- 优惠描述 -->
<CouponDiscountDesc :coupon="coupon" />
<!-- 有效期 -->
<CouponValidTerm :coupon="coupon" />
</div>
<div class="flex flex-col justify-evenly">
<div
class="rounded-20px p-x-8px p-y-2px"
:style="{
color: property.button.color,
background: property.button.bgColor
}"
>
立即领取
</div>
</div>
</div>
<!-- 布局2：2列-->
<div
v-else-if="property.columns === 2"
class="m-l-16px flex flex-row justify-between p-8px"
>
<div class="flex flex-col justify-evenly gap-4px">
<!-- 优惠值 -->
<CouponDiscount :coupon="coupon" />
<div>{{ coupon.name }}</div>
</div>
<div class="flex flex-col">
<div
class="h-full w-20px rounded-20px p-x-2px p-y-8px text-center"
:style="{
color: property.button.color,
background: property.button.bgColor
}"
>
立即领取
</div>
</div>
</div>
<!-- 布局3：3列-->
<div v-else class="flex flex-col items-center justify-around gap-4px p-4px">
<!-- 优惠值 -->
<CouponDiscount :coupon="coupon" />
<div>{{ coupon.name }}</div>
<div
class="rounded-20px p-x-8px p-y-2px"
:style="{
color: property.button.color,
background: property.button.bgColor
}"
>
立即领取
</div>
</div>
</div>
</div>
</el-scrollbar>
</template>
<script setup lang="ts">
import { CouponCardProperty } from './config'
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
import { CouponDiscount } from './component'
import {
CouponDiscountDesc,
CouponValidTerm
} from '@/components/DiyEditor/components/mobile/CouponCard/component'
/** 商品卡片 */
defineOptions({ name: 'CouponCard' })
// 定义属性
const props = defineProps<{ property: CouponCardProperty }>()
// 商品列表
const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([])
watch(
() => props.property.couponIds,
async () => {
if (props.property.couponIds?.length > 0) {
couponList.value = await CouponTemplateApi.getCouponTemplateList(props.property.couponIds)
}
},
{
immediate: true,
deep: true
}
)
// 手机宽度
const phoneWidth = ref(375)
// 容器
const containerRef = ref()
// 滚动条宽度
const scrollbarWidth = ref('100%')
// 优惠券的宽度
const couponWidth = ref(375)
// 计算布局参数
watch(
() => [props.property, phoneWidth, couponList.value.length],
() => {
// 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
couponWidth.value =
(phoneWidth.value * 0.95 - props.property.space * (props.property.columns - 1)) /
props.property.columns
// 显示滚动条
scrollbarWidth.value = `${
couponWidth.value * couponList.value.length +
props.property.space * (couponList.value.length - 1)
}px`
},
{ immediate: true, deep: true }
)
onMounted(() => {
// 提取手机宽度
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
})
</script>
<style scoped lang="scss"></style>
src/components/DiyEditor/components/mobile/CouponCard/property.vue 0 → 100644
<template>
<ComponentContainerProperty v-model="formData.style">
<el-form label-width="80px" :model="formData">
<el-card header="优惠券列表" class="property-group" shadow="never">
<div
v-for="(coupon, index) in couponList"
:key="index"
class="flex items-center justify-between"
>
<el-text size="large" truncated>{{ coupon.name }}</el-text>
<el-text type="info" truncated>
<span v-if="coupon.usePrice > 0">满{{ floatToFixed2(coupon.usePrice) }}元，</span>
<span v-if="coupon.discountType === PromotionDiscountTypeEnum.PRICE.type">
减{{ floatToFixed2(coupon.discountPrice) }}元
</span>
<span v-else> 打{{ coupon.discountPercent }}折 </span>
</el-text>
</div>
<el-form-item label-width="0">
<el-button @click="handleAddCoupon" type="primary" plain class="m-t-8px w-full">
<Icon icon="ep:plus" class="mr-5px" /> 添加
</el-button>
</el-form-item>
</el-card>
<el-card header="优惠券样式" class="property-group" shadow="never">
<el-form-item label="列数" prop="type">
<el-radio-group v-model="formData.columns">
<el-tooltip class="item" content="一列" placement="bottom">
<el-radio-button :label="1">
<Icon icon="fluent:text-column-one-24-filled" />
</el-radio-button>
</el-tooltip>
<el-tooltip class="item" content="二列" placement="bottom">
<el-radio-button :label="2">
<Icon icon="fluent:text-column-two-24-filled" />
</el-radio-button>
</el-tooltip>
<el-tooltip class="item" content="三列" placement="bottom">
<el-radio-button :label="3">
<Icon icon="fluent:text-column-three-24-filled" />
</el-radio-button>
</el-tooltip>
</el-radio-group>
</el-form-item>
<el-form-item label="背景图片" prop="bgImg">
<UploadImg v-model="formData.bgImg" height="80px" width="100%" class="min-w-160px" />
</el-form-item>
<el-form-item label="文字颜色" prop="textColor">
<ColorInput v-model="formData.textColor" />
</el-form-item>
<el-form-item label="按钮背景" prop="button.bgColor">
<ColorInput v-model="formData.button.bgColor" />
</el-form-item>
<el-form-item label="按钮文字" prop="button.color">
<ColorInput v-model="formData.button.color" />
</el-form-item>
<el-form-item label="间隔" prop="space">
<el-slider
v-model="formData.space"
:max="100"
:min="0"
show-input
input-size="small"
:show-input-controls="false"
/>
</el-form-item>
</el-card>
</el-form>
</ComponentContainerProperty>
<!-- 优惠券选择 -->
<CouponSelect ref="couponSelectDialog" v-model:multiple-selection="couponList" />
</template>
<script setup lang="ts">
import { CouponCardProperty } from './config'
import { usePropertyForm } from '@/components/DiyEditor/util'
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
import { floatToFixed2 } from '@/utils'
import { PromotionDiscountTypeEnum } from '@/utils/constants'
import CouponSelect from '@/views/mall/promotion/coupon/components/CouponSelect.vue'
// 优惠券卡片属性面板
defineOptions({ name: 'CouponCardProperty' })
const props = defineProps<{ modelValue: CouponCardProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
// 优惠券列表
const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([])
const couponSelectDialog = ref()
// 添加优惠券
const handleAddCoupon = () => {
couponSelectDialog.value.open()
}
watch(
() => couponList.value,
() => {
formData.value.couponIds = couponList.value.map((coupon) => coupon.id)
}
)
</script>
<style scoped lang="scss"></style>
src/components/DiyEditor/components/mobile/ProductCard/config.ts
...@@ -62,7 +62,7 @@ export interface ProductCardFieldProperty { ...@@ -62,7 +62,7 @@ export interface ProductCardFieldProperty {
export const component = { export const component = {
id: 'ProductCard', id: 'ProductCard',
name: '商品卡片', name: '商品卡片',
icon: 'system-uicons:carousel', icon: 'fluent:text-column-two-left-24-filled',
property: { property: {
layoutType: 'oneColBigImg', layoutType: 'oneColBigImg',
fields: { fields: {
......
src/components/DiyEditor/components/mobile/ProductList/config.ts 0 → 100644
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
/** 商品卡片属性 */
export interface ProductListProperty {
// 布局类型：双列 | 三列 | 水平滑动
layoutType: 'twoCol' | 'threeCol' | 'horizSwiper'
// 商品字段
fields: {
// 商品名称
name: ProductListFieldProperty
// 商品价格
price: ProductListFieldProperty
}
// 角标
badge: {
// 是否显示
show: boolean
// 角标图片
imgUrl: string
}
// 上圆角
borderRadiusTop: number
// 下圆角
borderRadiusBottom: number
// 间距
space: number
// 商品编号列表
spuIds: number[]
// 组件样式
style: ComponentStyle
}
// 商品字段
export interface ProductListFieldProperty {
// 是否显示
show: boolean
// 颜色
color: string
}
// 定义组件
export const component = {
id: 'ProductList',
name: '商品栏',
icon: 'fluent:text-column-two-24-filled',
property: {
layoutType: 'twoCol',
fields: {
name: { show: true, color: '#000' },
price: { show: true, color: '#ff3000' }
},
badge: { show: false, imgUrl: '' },
borderRadiusTop: 8,
borderRadiusBottom: 8,
space: 8,
spuIds: [],
style: {
bgType: 'color',
bgColor: '',
marginLeft: 8,
marginRight: 8,
marginBottom: 8
} as ComponentStyle
}
} as DiyComponent<ProductListProperty>
src/components/DiyEditor/components/mobile/ProductList/index.vue 0 → 100644
<template>
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
<!-- 商品网格 -->
<div
class="grid overflow-x-auto"
:style="{
gridGap: `${property.space}px`,
gridTemplateColumns,
width: scrollbarWidth
}"
>
<!-- 商品 -->
<div
class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
:style="{
borderTopLeftRadius: `${property.borderRadiusTop}px`,
borderTopRightRadius: `${property.borderRadiusTop}px`,
borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
borderBottomRightRadius: `${property.borderRadiusBottom}px`
}"
v-for="(spu, index) in spuList"
:key="index"
>
<!-- 角标 -->
<div
v-if="property.badge.show"
class="absolute left-0 top-0 z-1 items-center justify-center"
>
<el-image fit="cover" :src="property.badge.imgUrl" class="h-26px w-38px" />
</div>
<!-- 商品封面图 -->
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
<div
:class="[
'flex flex-col gap-8px p-8px box-border',
{
'w-[calc(100%-64px)]': columns === 2,
'w-full': columns === 3
}
]"
>
<!-- 商品名称 -->
<div
v-if="property.fields.name.show"
class="truncate text-12px"
:style="{ color: property.fields.name.color }"
>
{{ spu.name }}
</div>
<div>
<!-- 商品价格 -->
<span
v-if="property.fields.price.show"
class="text-12px"
:style="{ color: property.fields.price.color }"
>
￥{{ spu.price }}
</span>
</div>
</div>
</div>
</div>
</el-scrollbar>
</template>
<script setup lang="ts">
import { ProductListProperty } from './config'
import * as ProductSpuApi from '@/api/mall/product/spu'
/** 商品卡片 */
defineOptions({ name: 'ProductList' })
// 定义属性
const props = defineProps<{ property: ProductListProperty }>()
// 商品列表
const spuList = ref<ProductSpuApi.Spu[]>([])
watch(
() => props.property.spuIds,
async () => {
spuList.value = await ProductSpuApi.getSpuDetailList(props.property.spuIds)
},
{
immediate: true,
deep: true
}
)
// 手机宽度
const phoneWidth = ref(375)
// 容器
const containerRef = ref()
// 商品的列数
const columns = ref(2)
// 滚动条宽度
const scrollbarWidth = ref('100%')
// 商品图大小
const imageSize = ref('0')
// 商品网络列数
const gridTemplateColumns = ref('')
// 计算布局参数
watch(
() => [props.property, phoneWidth, spuList.value.length],
() => {
// 计算列数
columns.value = props.property.layoutType === 'twoCol' ? 2 : 3
// 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
const productWidth =
(phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value
// 商品图布局：2列时，左右布局 3列时，上下布局
imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`
// 根据布局类型，计算行数、列数
if (props.property.layoutType === 'horizSwiper') {
// 单行显示
gridTemplateColumns.value = `repeat(auto-fill, ${productWidth}px)`
// 显示滚动条
scrollbarWidth.value = `${
productWidth * spuList.value.length + props.property.space * (spuList.value.length - 1)
}px`
} else {
// 指定列数
gridTemplateColumns.value = `repeat(${columns.value}, auto)`
// 不滚动
scrollbarWidth.value = '100%'
}
},
{ immediate: true, deep: true }
)
onMounted(() => {
// 提取手机宽度
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
})
</script>
<style scoped lang="scss"></style>
src/components/DiyEditor/components/mobile/ProductList/property.vue 0 → 100644
<template>
<ComponentContainerProperty v-model="formData.style">
<el-form label-width="80px" :model="formData">
<el-card header="商品列表" class="property-group" shadow="never">
<SpuShowcase v-model="formData.spuIds" />
</el-card>
<el-card header="商品样式" class="property-group" shadow="never">
<el-form-item label="布局" prop="type">
<el-radio-group v-model="formData.layoutType">
<el-tooltip class="item" content="双列" placement="bottom">
<el-radio-button label="twoCol">
<Icon icon="fluent:text-column-two-24-filled" />
</el-radio-button>
</el-tooltip>
<el-tooltip class="item" content="三列" placement="bottom">
<el-radio-button label="threeCol">
<Icon icon="fluent:text-column-three-24-filled" />
</el-radio-button>
</el-tooltip>
<el-tooltip class="item" content="水平滑动" placement="bottom">
<el-radio-button label="horizSwiper">
<Icon icon="system-uicons:carousel" />
</el-radio-button>
</el-tooltip>
</el-radio-group>
</el-form-item>
<el-form-item label="商品名称" prop="fields.name.show">
<div class="flex gap-8px">
<ColorInput v-model="formData.fields.name.color" />
<el-checkbox v-model="formData.fields.name.show" />
</div>
</el-form-item>
<el-form-item label="商品价格" prop="fields.price.show">
<div class="flex gap-8px">
<ColorInput v-model="formData.fields.price.color" />
<el-checkbox v-model="formData.fields.price.show" />
</div>
</el-form-item>
</el-card>
<el-card header="角标" class="property-group" shadow="never">
<el-form-item label="角标" prop="badge.show">
<el-switch v-model="formData.badge.show" />
</el-form-item>
<el-form-item label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
<UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
<template #tip> 建议尺寸：36 * 22 </template>
</UploadImg>
</el-form-item>
</el-card>
<el-card header="商品样式" class="property-group" shadow="never">
<el-form-item label="上圆角" prop="borderRadiusTop">
<el-slider
v-model="formData.borderRadiusTop"
:max="100"
:min="0"
show-input
input-size="small"
:show-input-controls="false"
/>
</el-form-item>
<el-form-item label="下圆角" prop="borderRadiusBottom">
<el-slider
v-model="formData.borderRadiusBottom"
:max="100"
:min="0"
show-input
input-size="small"
:show-input-controls="false"
/>
</el-form-item>
<el-form-item label="间隔" prop="space">
<el-slider
v-model="formData.space"
:max="100"
:min="0"
show-input
input-size="small"
:show-input-controls="false"
/>
</el-form-item>
</el-card>
</el-form>
</ComponentContainerProperty>
</template>
<script setup lang="ts">
import { ProductListProperty } from './config'
import { usePropertyForm } from '@/components/DiyEditor/util'
import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
// 商品卡片属性面板
defineOptions({ name: 'ProductListProperty' })
const props = defineProps<{ modelValue: ProductListProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
</script>
<style scoped lang="scss"></style>
src/components/DiyEditor/util.ts
...@@ -107,11 +107,15 @@ export const PAGE_LIBS = [ ...@@ -107,11 +107,15 @@ export const PAGE_LIBS = [
extended: true, extended: true,
components: ['ImageBar', 'Carousel', 'TitleBar', 'VideoPlayer', 'Divider', 'MagicCube'] components: ['ImageBar', 'Carousel', 'TitleBar', 'VideoPlayer', 'Divider', 'MagicCube']
}, },
{ name: '商品组件', extended: true, components: ['ProductCard'] }, { name: '商品组件', extended: true, components: ['ProductCard', 'ProductList'] },
{ {
name: '会员组件', name: '会员组件',
extended: true, extended: true,
components: ['UserCard', 'OrderCard', 'WalletCard', 'CouponCard'] components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon']
}, },
{ name: '营销组件', extended: true, components: ['Combination', 'Seckill', 'Point', 'Coupon'] } {
name: '营销组件',
extended: true,
components: ['CombinationCard', 'SeckillCard', 'PointCard', 'CouponCard']
}
] as DiyComponentLibrary[] ] as DiyComponentLibrary[]
src/components/ShortcutDateRangePicker/index.vue
...@@ -74,11 +74,6 @@ const emits = defineEmits<{ ...@@ -74,11 +74,6 @@ const emits = defineEmits<{
}>() }>()
/** 触发时间范围选中事件 */ /** 触发时间范围选中事件 */
const emitDateRangePicker = async () => { const emitDateRangePicker = async () => {
// 开始与截止在同一天的, 折线图出不来, 需要延长一天
if (DateUtil.isSameDay(times.value[0], times.value[1])) {
// 前天
times.value[0] = DateUtil.formatDate(dayjs(times.value[0]).subtract(1, 'd'))
}
emits('change', times.value) emits('change', times.value)
} }
......
src/utils/dict.ts
/** /**
* 数据字典工具类 * 数据字典工具类
*/ */
import { useDictStoreWithOut } from '@/store/modules/dict' import {useDictStoreWithOut} from '@/store/modules/dict'
import { ElementPlusInfoType } from '@/types/elementPlus' import {ElementPlusInfoType} from '@/types/elementPlus'
const dictStore = useDictStoreWithOut() const dictStore = useDictStoreWithOut()
...@@ -195,5 +195,9 @@ export enum DICT_TYPE { ...@@ -195,5 +195,9 @@ export enum DICT_TYPE {
CRM_CUSTOMER_INDUSTRY = 'crm_customer_industry', CRM_CUSTOMER_INDUSTRY = 'crm_customer_industry',
CRM_CUSTOMER_LEVEL = 'crm_customer_level', CRM_CUSTOMER_LEVEL = 'crm_customer_level',
CRM_CUSTOMER_SOURCE = 'crm_customer_source', CRM_CUSTOMER_SOURCE = 'crm_customer_source',
CRM_PRODUCT_STATUS = 'crm_product_status' CRM_PRODUCT_STATUS = 'crm_product_status',
// ========== CRM - 数据权限模块 ==========
CRM_BIZ_TYPE = 'crm_biz_type', // 数据模块类型
CRM_PERMISSION_LEVEL = 'crm_permission_level' // 用户数据权限类型
} }
src/utils/formatTime.ts
...@@ -335,5 +335,8 @@ export function getDateRange( ...@@ -335,5 +335,8 @@ export function getDateRange(
beginDate: dayjs.ConfigType, beginDate: dayjs.ConfigType,
endDate: dayjs.ConfigType endDate: dayjs.ConfigType
): [string, string] { ): [string, string] {
return [dayjs(beginDate).startOf('d').toString(), dayjs(endDate).endOf('d').toString()] return [
dayjs(beginDate).startOf('d').format('YYYY-MM-DD HH:mm:ss'),
dayjs(endDate).endOf('d').format('YYYY-MM-DD HH:mm:ss')
]
} }
src/views/crm/components/CrmPermissionForm.vue
...@@ -19,9 +19,14 @@ ...@@ -19,9 +19,14 @@
</el-form-item> </el-form-item>
<el-form-item label="权限级别" prop="level"> <el-form-item label="权限级别" prop="level">
<el-radio-group v-model="formData.level"> <el-radio-group v-model="formData.level">
<!-- TODO @puhui999：搞个字典配置？然后这里 remove 掉负责人 --> <template
<el-radio :label="CrmPermissionLevelEnum.READ">只读</el-radio> v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PERMISSION_LEVEL)"
<el-radio :label="CrmPermissionLevelEnum.WRITE">读写</el-radio> :key="dict.value"
>
<el-radio v-if="dict.value != CrmPermissionLevelEnum.OWNER" :label="dict.value">
{{ dict.label }}
</el-radio>
</template>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -34,7 +39,8 @@ ...@@ -34,7 +39,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import * as UserApi from '@/api/system/user' import * as UserApi from '@/api/system/user'
import * as PermissionApi from '@/api/crm/permission' import * as PermissionApi from '@/api/crm/permission'
import { CrmPermissionLevelEnum } from './index' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CrmPermissionLevelEnum } from '@/views/crm/components/index'
defineOptions({ name: 'CrmPermissionForm' }) defineOptions({ name: 'CrmPermissionForm' })
......
src/views/crm/components/CrmTeamList.vue → src/views/crm/components/CrmPermissionList.vue
<template> <template>
<!-- 操作栏 --> <!-- 操作栏 -->
<el-row justify="end"> <el-row justify="end">
<el-button type="primary" @click="handleAdd"> <el-button type="primary" @click="openForm">
<Icon class="mr-5px" icon="ep:plus" /> <Icon class="mr-5px" icon="ep:plus" />
新增 新增
</el-button> </el-button>
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<Icon class="mr-5px" icon="ep:edit" /> <Icon class="mr-5px" icon="ep:edit" />
编辑 编辑
</el-button> </el-button>
<el-button @click="handleRemove"> <el-button @click="handleDelete">
<Icon class="mr-5px" icon="ep:delete" /> <Icon class="mr-5px" icon="ep:delete" />
移除 移除
</el-button> </el-button>
...@@ -30,45 +30,32 @@ ...@@ -30,45 +30,32 @@
<el-table-column align="center" label="岗位" prop="postNames" /> <el-table-column align="center" label="岗位" prop="postNames" />
<el-table-column align="center" label="权限级别" prop="level"> <el-table-column align="center" label="权限级别" prop="level">
<template #default="{ row }"> <template #default="{ row }">
<el-tag>{{ getLevelName(row.level) }}</el-tag> <dict-tag :type="DICT_TYPE.CRM_PERMISSION_LEVEL" :value="row.level" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :formatter="dateFormatter" align="center" label="加入时间" prop="createTime" /> <el-table-column :formatter="dateFormatter" align="center" label="加入时间" prop="createTime" />
</el-table> </el-table>
<CrmPermissionForm ref="crmPermissionFormRef" /> <CrmPermissionForm ref="permissionFormRef" @success="getList" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
// TODO @puhui999：改成 CrmPermissionList
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import { ElTable } from 'element-plus' import { ElTable } from 'element-plus'
import * as PermissionApi from '@/api/crm/permission' import * as PermissionApi from '@/api/crm/permission'
import { useUserStoreWithOut } from '@/store/modules/user' import { useUserStoreWithOut } from '@/store/modules/user'
import CrmPermissionForm from './CrmPermissionForm.vue' import CrmPermissionForm from './CrmPermissionForm.vue'
import { CrmPermissionLevelEnum } from './index' import { CrmPermissionLevelEnum } from './index'
import { DICT_TYPE } from '@/utils/dict'
defineOptions({ name: 'CrmTeam' }) defineOptions({ name: 'CrmPermissionList' })
const message = useMessage() // 消息 const message = useMessage() // 消息
const props = defineProps<{ const props = defineProps<{
bizType: number bizType: number // 模块类型
bizId: number bizId: number // 模块数据编号
}>() }>()
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
const list = ref<PermissionApi.PermissionVO[]>([ const list = ref<PermissionApi.PermissionVO[]>([]) // 列表的数据
// TODO 测试数据
{
id: 1, // 数据权限编号
userId: 1, // 用户编号
bizType: 1, // Crm 类型
bizId: 1, // Crm 类型数据编号
level: 1, // 权限级别
deptName: '研发部门', // 部门名称
nickname: '芋道源码', // 用户昵称
postNames: '全栈开发工程师', // 岗位名称数组
createTime: new Date()
}
]) // 列表的数据
/** 查询列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
...@@ -83,40 +70,28 @@ const getList = async () => { ...@@ -83,40 +70,28 @@ const getList = async () => {
loading.value = false loading.value = false
} }
} }
const multipleSelection = ref<PermissionApi.PermissionVO[]>([]) // 选择的团队成员
// TODO @puhui999：字典格式化
/**
* 获得权限级别名称
* @param level 权限级别
*/
const getLevelName = computed(() => (level: number) => {
switch (level) {
case CrmPermissionLevelEnum.OWNER:
return '负责人'
case CrmPermissionLevelEnum.READ:
return '只读'
case CrmPermissionLevelEnum.WRITE:
return '读写'
default:
break
}
})
// TODO @puhui999：空行稍微注意下哈；一些注释补齐下；
const multipleSelection = ref<PermissionApi.PermissionVO[]>([])
const handleSelectionChange = (val: PermissionApi.PermissionVO[]) => { const handleSelectionChange = (val: PermissionApi.PermissionVO[]) => {
multipleSelection.value = val multipleSelection.value = val
} }
// TODO @puhui999：一些变量命名，看看有没可能跟列表界面的 index.vue 保持他统一的风格；
const crmPermissionFormRef = ref<InstanceType<typeof CrmPermissionForm>>() const permissionFormRef = ref<InstanceType<typeof CrmPermissionForm>>() // 权限表单 Ref
/**
* 编辑团队成员
*/
const handleEdit = () => { const handleEdit = () => {
if (multipleSelection.value?.length === 0) { if (multipleSelection.value?.length === 0) {
message.warning('请先选择团队成员后操作！') message.warning('请先选择团队成员后操作！')
return return
} }
const ids = multipleSelection.value?.map((item) => item.id) const ids = multipleSelection.value?.map((item) => item.id)
crmPermissionFormRef.value?.open('update', props.bizType, props.bizId, ids) permissionFormRef.value?.open('update', props.bizType, props.bizId, ids)
} }
const handleRemove = async () => {
/**
* 移除团队成员
*/
const handleDelete = async () => {
if (multipleSelection.value?.length === 0) { if (multipleSelection.value?.length === 0) {
message.warning('请先选择团队成员后操作！') message.warning('请先选择团队成员后操作！')
return return
...@@ -129,11 +104,18 @@ const handleRemove = async () => { ...@@ -129,11 +104,18 @@ const handleRemove = async () => {
ids ids
}) })
} }
const handleAdd = () => {
crmPermissionFormRef.value?.open('create', props.bizType, props.bizId) /**
* 添加团队成员
*/
const openForm = () => {
permissionFormRef.value?.open('create', props.bizType, props.bizId)
} }
const userStore = useUserStoreWithOut() const userStore = useUserStoreWithOut() // 用户信息缓存
/**
* 退出团队
*/
const handleQuit = async () => { const handleQuit = async () => {
const permission = list.value.find( const permission = list.value.find(
(item) => item.userId === userStore.getUser.id && item.level === CrmPermissionLevelEnum.OWNER (item) => item.userId === userStore.getUser.id && item.level === CrmPermissionLevelEnum.OWNER
......
src/views/crm/components/index.ts
import CrmTeam from './CrmTeamList.vue' import CrmPermissionList from './CrmPermissionList.vue'
enum CrmBizTypeEnum { enum CrmBizTypeEnum {
CRM_LEADS = 1, // 线索 CRM_LEADS = 1, // 线索
...@@ -9,9 +9,7 @@ enum CrmBizTypeEnum { ...@@ -9,9 +9,7 @@ enum CrmBizTypeEnum {
} }
enum CrmPermissionLevelEnum { enum CrmPermissionLevelEnum {
OWNER = 1, // 负责人 OWNER = 1 // 负责人
READ = 2, // 读
WRITE = 3 // 写
} }
export { CrmTeam, CrmBizTypeEnum, CrmPermissionLevelEnum } export { CrmPermissionList, CrmBizTypeEnum, CrmPermissionLevelEnum }
src/views/crm/customer/detail/index.vue
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</div> </div>
<div> <div>
<!-- 右上：按钮 --> <!-- 右上：按钮 -->
<el-button @click="openForm('update', customer.id)" v-hasPermi="['crm:customer:update']"> <el-button v-hasPermi="['crm:customer:update']" @click="openForm('update', customer.id)">
编辑 编辑
</el-button> </el-button>
<el-button>更改成交状态</el-button> <el-button>更改成交状态</el-button>
...@@ -16,31 +16,31 @@ ...@@ -16,31 +16,31 @@
</div> </div>
<el-row class="mt-10px"> <el-row class="mt-10px">
<el-button> <el-button>
<Icon icon="ph:calendar-fill" class="mr-5px" /> <Icon class="mr-5px" icon="ph:calendar-fill" />
创建任务 创建任务
</el-button> </el-button>
<el-button> <el-button>
<Icon icon="carbon:email" class="mr-5px" /> <Icon class="mr-5px" icon="carbon:email" />
发送邮件 发送邮件
</el-button> </el-button>
<el-button> <el-button>
<Icon icon="system-uicons:contacts" class="mr-5px" /> <Icon class="mr-5px" icon="system-uicons:contacts" />
创建联系人 创建联系人
</el-button> </el-button>
<el-button> <el-button>
<Icon icon="ep:opportunity" class="mr-5px" /> <Icon class="mr-5px" icon="ep:opportunity" />
创建商机 创建商机
</el-button> </el-button>
<el-button> <el-button>
<Icon icon="clarity:contract-line" class="mr-5px" /> <Icon class="mr-5px" icon="clarity:contract-line" />
创建合同 创建合同
</el-button> </el-button>
<el-button> <el-button>
<Icon icon="icon-park:income-one" class="mr-5px" /> <Icon class="mr-5px" icon="icon-park:income-one" />
创建回款 创建回款
</el-button> </el-button>
<el-button> <el-button>
<Icon icon="fluent:people-team-add-20-filled" class="mr-5px" /> <Icon class="mr-5px" icon="fluent:people-team-add-20-filled" />
添加团队成员 添加团队成员
</el-button> </el-button>
</el-row> </el-row>
...@@ -75,20 +75,32 @@ ...@@ -75,20 +75,32 @@
<el-tab-pane label="客户关系" lazy> 客户关系</el-tab-pane> <el-tab-pane label="客户关系" lazy> 客户关系</el-tab-pane>
<!-- TODO wanwan 以下标签上的数量需要接口统计返回 --> <!-- TODO wanwan 以下标签上的数量需要接口统计返回 -->
<el-tab-pane label="联系人" lazy> <el-tab-pane label="联系人" lazy>
<template #label> 联系人<el-badge class="item" type="primary" /> </template> <template #label>
联系人
<el-badge class="item" type="primary" />
</template>
联系人 联系人
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="团队成员" lazy> <el-tab-pane label="团队成员" lazy>
<template #label> 团队成员<el-badge class="item" type="primary" /> </template> <template #label>
团队成员 团队成员
<el-badge class="item" type="primary" />
</template>
<CrmPermissionList :biz-id="customer.id" :biz-type="CrmBizTypeEnum.CRM_CUSTOMER" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="商机" lazy> 商机</el-tab-pane> <el-tab-pane label="商机" lazy> 商机</el-tab-pane>
<el-tab-pane label="合同" lazy> <el-tab-pane label="合同" lazy>
<template #label> 合同<el-badge class="item" type="primary" /> </template> <template #label>
合同
<el-badge class="item" type="primary" />
</template>
合同 合同
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="回款" lazy> <el-tab-pane label="回款" lazy>
<template #label> 回款<el-badge class="item" type="primary" /> </template> <template #label>
回款
<el-badge class="item" type="primary" />
</template>
回款 回款
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="回访" lazy> 回访</el-tab-pane> <el-tab-pane label="回访" lazy> 回访</el-tab-pane>
...@@ -100,7 +112,7 @@ ...@@ -100,7 +112,7 @@
<CustomerForm ref="formRef" @success="getCustomerData(id)" /> <CustomerForm ref="formRef" @success="getCustomerData(id)" />
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { useTagsViewStore } from '@/store/modules/tagsView' import { useTagsViewStore } from '@/store/modules/tagsView'
import * as CustomerApi from '@/api/crm/customer' import * as CustomerApi from '@/api/crm/customer'
...@@ -108,6 +120,7 @@ import CustomerBasicInfo from '@/views/crm/customer/detail/CustomerBasicInfo.vue ...@@ -108,6 +120,7 @@ import CustomerBasicInfo from '@/views/crm/customer/detail/CustomerBasicInfo.vue
import { DICT_TYPE } from '@/utils/dict' import { DICT_TYPE } from '@/utils/dict'
import CustomerDetails from '@/views/crm/customer/detail/CustomerDetails.vue' import CustomerDetails from '@/views/crm/customer/detail/CustomerDetails.vue'
import CustomerForm from '@/views/crm/customer/CustomerForm.vue' import CustomerForm from '@/views/crm/customer/CustomerForm.vue'
import { CrmBizTypeEnum, CrmPermissionList } from '@/views/crm/components'
defineOptions({ name: 'CustomerDetail' }) defineOptions({ name: 'CustomerDetail' })
......
src/views/crm/customer/index.vue
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
<el-table-column align="center" label="手机" prop="mobile" width="120" /> <el-table-column align="center" label="手机" prop="mobile" width="120" />
<el-table-column align="center" label="详细地址" prop="detailAddress" width="200" /> <el-table-column align="center" label="详细地址" prop="detailAddress" width="200" />
<el-table-column align="center" label="负责人" prop="ownerUserName" /> <el-table-column align="center" label="负责人" prop="ownerUserName" />
<el-table-column align="center" label="所属部门" prop="ownerUserDept" /> <el-table-column align="center" label="所属部门" prop="ownerUserDeptName" />
<el-table-column align="center" label="创建人" prop="creatorName" /> <el-table-column align="center" label="创建人" prop="creatorName" />
<el-table-column <el-table-column
:formatter="dateFormatter" :formatter="dateFormatter"
...@@ -185,8 +185,6 @@ ...@@ -185,8 +185,6 @@
@pagination="getList" @pagination="getList"
/> />
</ContentWrap> </ContentWrap>
<!-- TODO 方便查看效果 TODO 芋艿：先注释了，避免演示环境报错 -->
<!-- <CrmTeam :biz-id="1" :biz-type="CrmBizTypeEnum.CRM_CUSTOMER" />-->
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<CustomerForm ref="formRef" @success="getList" /> <CustomerForm ref="formRef" @success="getList" />
...@@ -198,7 +196,6 @@ import { dateFormatter } from '@/utils/formatTime' ...@@ -198,7 +196,6 @@ import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
import * as CustomerApi from '@/api/crm/customer' import * as CustomerApi from '@/api/crm/customer'
import CustomerForm from './CustomerForm.vue' import CustomerForm from './CustomerForm.vue'
import { CrmBizTypeEnum, CrmTeam } from '@/views/crm/components'
defineOptions({ name: 'CrmCustomer' }) defineOptions({ name: 'CrmCustomer' })
...@@ -211,11 +208,12 @@ const list = ref([]) // 列表的数据 ...@@ -211,11 +208,12 @@ const list = ref([]) // 列表的数据
const queryParams = reactive({ const queryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
name: null, pool: false,
mobile: null, name: '',
industryId: null, mobile: '',
level: null, industryId: undefined,
source: null level: undefined,
source: undefined
}) })
const queryFormRef = ref() // 搜索的表单 const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中 const exportLoading = ref(false) // 导出的加载中
...@@ -241,6 +239,7 @@ const handleQuery = () => { ...@@ -241,6 +239,7 @@ const handleQuery = () => {
/** 重置按钮操作 */ /** 重置按钮操作 */
const resetQuery = () => { const resetQuery = () => {
queryFormRef.value.resetFields() queryFormRef.value.resetFields()
queryParams.pool = false
handleQuery() handleQuery()
} }
......
src/views/mall/product/comment/CommentForm.vue
...@@ -8,14 +8,7 @@ ...@@ -8,14 +8,7 @@
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="商品" prop="spuId"> <el-form-item label="商品" prop="spuId">
<div @click="handleSelectSpu" class="h-60px w-60px"> <SpuShowcase v-model="formData.spuId" :limit="1" />
<div v-if="spuData && spuData.picUrl">
<el-image :src="spuData.picUrl" />
</div>
<div v-else class="select-box">
<Icon icon="ep:plus" />
</div>
</div>
</el-form-item> </el-form-item>
<el-form-item label="商品规格" prop="skuId" v-if="formData.spuId"> <el-form-item label="商品规格" prop="skuId" v-if="formData.spuId">
<div @click="handleSelectSku" class="h-60px w-60px"> <div @click="handleSelectSku" class="h-60px w-60px">
...@@ -51,12 +44,11 @@ ...@@ -51,12 +44,11 @@
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
</template> </template>
</Dialog> </Dialog>
<SpuTableSelect ref="spuTableSelectRef" @change="handleSpuChange" /> <SkuTableSelect ref="skuTableSelectRef" @change="handleSkuChange" :spu-id="formData.spuId" />
<SkuTableSelect ref="skuTableSelectRef" @change="handleSkuChange" :spu-id="spuData.id" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import * as CommentApi from '@/api/mall/product/comment' import * as CommentApi from '@/api/mall/product/comment'
import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue' import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
import * as ProductSpuApi from '@/api/mall/product/spu' import * as ProductSpuApi from '@/api/mall/product/spu'
import SkuTableSelect from '@/views/mall/product/spu/components/SkuTableSelect.vue' import SkuTableSelect from '@/views/mall/product/spu/components/SkuTableSelect.vue'
...@@ -72,8 +64,7 @@ const formData = ref({ ...@@ -72,8 +64,7 @@ const formData = ref({
userId: undefined, userId: undefined,
userNickname: undefined, userNickname: undefined,
userAvatar: undefined, userAvatar: undefined,
spuId: undefined, spuId: 0,
spuName: undefined,
skuId: undefined, skuId: undefined,
descriptionScores: 5, descriptionScores: 5,
benefitScores: 5, benefitScores: 5,
...@@ -90,7 +81,6 @@ const formRules = reactive({ ...@@ -90,7 +81,6 @@ const formRules = reactive({
benefitScores: [{ required: true, message: '服务星级不能为空', trigger: 'blur' }] benefitScores: [{ required: true, message: '服务星级不能为空', trigger: 'blur' }]
}) })
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
const spuData = ref<ProductSpuApi.Spu>({})
const skuData = ref({ const skuData = ref({
id: -1, id: -1,
name: '', name: '',
...@@ -149,8 +139,7 @@ const resetForm = () => { ...@@ -149,8 +139,7 @@ const resetForm = () => {
userId: undefined, userId: undefined,
userNickname: undefined, userNickname: undefined,
userAvatar: undefined, userAvatar: undefined,
spuId: undefined, spuId: 0,
spuName: undefined,
skuId: undefined, skuId: undefined,
descriptionScores: 5, descriptionScores: 5,
benefitScores: 5, benefitScores: 5,
...@@ -160,16 +149,6 @@ const resetForm = () => { ...@@ -160,16 +149,6 @@ const resetForm = () => {
formRef.value?.resetFields() formRef.value?.resetFields()
} }
/** SPU 表格选择 */
const spuTableSelectRef = ref()
const handleSelectSpu = () => {
spuTableSelectRef.value.open()
}
const handleSpuChange = (spu: ProductSpuApi.Spu) => {
spuData.value = spu
formData.value.spuId = spu.id
}
/** SKU 表格选择 */ /** SKU 表格选择 */
const skuTableSelectRef = ref() const skuTableSelectRef = ref()
const handleSelectSku = () => { const handleSelectSku = () => {
......
src/views/mall/product/comment/index.vue
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<!-- 列表 --> <!-- 列表 -->
<ContentWrap> <ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="false"> <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="false">
<el-table-column label="评论编号" align="center" prop="id" min-width="50" /> <el-table-column label="评论编号" align="center" prop="id" min-width="80" />
<el-table-column label="商品信息" align="center" min-width="400"> <el-table-column label="商品信息" align="center" min-width="400">
<template #default="scope"> <template #default="scope">
<div class="row flex items-center gap-x-4px"> <div class="row flex items-center gap-x-4px">
......
src/views/mall/product/spu/components/SpuShowcase.vue
...@@ -13,54 +13,64 @@ ...@@ -13,54 +13,64 @@
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<el-tooltip content="选择商品"> <el-tooltip content="选择商品" v-if="canAdd">
<div <div class="select-box" @click="openSpuTableSelect">
v-show="!disabled"
v-if="!limit || limit <= productSpus.length"
class="select-box"
@click="openSpuTableSelect"
>
<Icon icon="ep:plus" /> <Icon icon="ep:plus" />
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<!-- 商品选择对话框（表格形式） --> <!-- 商品选择对话框（表格形式） -->
<SpuTableSelect ref="spuTableSelectRef" multiple @change="handleSpuSelected" /> <SpuTableSelect ref="spuTableSelectRef" :multiple="limit != 1" @change="handleSpuSelected" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as ProductSpuApi from '@/api/mall/product/spu' import * as ProductSpuApi from '@/api/mall/product/spu'
import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue' import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { array } from 'vue-types' import { oneOfType } from 'vue-types'
import { isArray } from '@/utils/is'
// 商品橱窗，一般用于与商品建立关系时使用 // 商品橱窗，一般用于与商品建立关系时使用
// 提供功能：展示商品列表、添加商品、移除商品 // 提供功能：展示商品列表、添加商品、移除商品
defineOptions({ name: 'SpuShowcase' }) defineOptions({ name: 'SpuShowcase' })
const props = defineProps({ const props = defineProps({
modelValue: array<number>().def([]).isRequired, modelValue: oneOfType<number | Array<number>>([Number, Array]).isRequired,
// 限制数量：默认不限制 // 限制数量：默认不限制
limit: propTypes.number.def(0), limit: propTypes.number.def(Number.MAX_VALUE),
disabled: propTypes.bool.def(false) disabled: propTypes.bool.def(false)
}) })
// 计算是否可以添加
const canAdd = computed(() => {
// 情况一：禁用时不可以添加
if (props.disabled) return false
// 情况二：未指定限制数量时，可以添加
if (!props.limit) return true
// 情况三：检查已添加数量是否小于限制数量
return productSpus.value.length < props.limit
})
// 商品列表 // 商品列表
const productSpus = ref<ProductSpuApi.Spu[]>([]) const productSpus = ref<ProductSpuApi.Spu[]>([])
watch( watch(
() => props.modelValue, () => props.modelValue,
async () => { async () => {
if (props.modelValue.length === 0) { const ids = isArray(props.modelValue)
? // 情况一：多选
props.modelValue
: // 情况二：单选
props.modelValue
? [props.modelValue]
: []
// 不需要返显
if (ids.length === 0) {
productSpus.value = [] productSpus.value = []
return return
} }
// 只有商品发生变化之后，才去查询商品 // 只有商品发生变化之后，才去查询商品
if ( if (productSpus.value.length === 0 || productSpus.value.some((spu) => !ids.includes(spu.id!))) {
productSpus.value.length === 0 || productSpus.value = await ProductSpuApi.getSpuDetailList(ids)
productSpus.value.some((spu) => !props.modelValue.includes(spu.id))
) {
debugger
productSpus.value = await ProductSpuApi.getSpuDetailList(props.modelValue)
} }
}, },
{ immediate: true } { immediate: true }
...@@ -77,8 +87,8 @@ const openSpuTableSelect = () => { ...@@ -77,8 +87,8 @@ const openSpuTableSelect = () => {
* 选择商品后触发 * 选择商品后触发
* @param spus 选中的商品列表 * @param spus 选中的商品列表
*/ */
const handleSpuSelected = (spus: ProductSpuApi.Spu[]) => { const handleSpuSelected = (spus: ProductSpuApi.Spu | ProductSpuApi.Spu[]) => {
productSpus.value = spus productSpus.value = isArray(spus) ? spus : [spus]
emitSpuChange() emitSpuChange()
} }
...@@ -92,11 +102,17 @@ const handleRemoveSpu = (index: number) => { ...@@ -92,11 +102,17 @@ const handleRemoveSpu = (index: number) => {
} }
const emit = defineEmits(['update:modelValue', 'change']) const emit = defineEmits(['update:modelValue', 'change'])
const emitSpuChange = () => { const emitSpuChange = () => {
if (props.limit === 1) {
const spu = productSpus.value.length > 0 ? productSpus.value[0] : null
emit('update:modelValue', spu?.id || 0)
emit('change', spu)
} else {
emit( emit(
'update:modelValue', 'update:modelValue',
productSpus.value.map((spu) => spu.id) productSpus.value.map((spu) => spu.id)
) )
emit('change', productSpus.value) emit('change', productSpus.value)
}
} }
</script> </script>
......
src/views/mall/promotion/coupon/components/CouponSelect.vue
...@@ -150,15 +150,14 @@ import { ...@@ -150,15 +150,14 @@ import {
} from '@/views/mall/promotion/coupon/formatter' } from '@/views/mall/promotion/coupon/formatter'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate' import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
import type { GiveCouponTemplate } from '@/api/mall/product/spu'
defineOptions({ name: 'CouponSelect' }) defineOptions({ name: 'CouponSelect' })
defineProps<{ defineProps<{
multipleSelection: GiveCouponTemplate[] multipleSelection: CouponTemplateApi.CouponTemplateVO[]
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'update:multipleSelection', v: GiveCouponTemplate[]) (e: 'update:multipleSelection', v: CouponTemplateApi.CouponTemplateVO[])
}>() }>()
const dialogVisible = ref(false) // 弹窗的是否展示 const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('选择优惠卷') // 弹窗的标题 const dialogTitle = ref('选择优惠卷') // 弹窗的标题
...@@ -210,10 +209,7 @@ const open = async () => { ...@@ -210,10 +209,7 @@ const open = async () => {
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const handleSelectionChange = (val: CouponTemplateApi.CouponTemplateVO[]) => { const handleSelectionChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
emit( emit('update:multipleSelection', val)
'update:multipleSelection',
val.map((item) => ({ id: item.id, name: item.name }))
)
} }
const submitForm = () => { const submitForm = () => {
......
src/views/mall/promotion/coupon/template/CouponTemplateForm.vue
...@@ -26,15 +26,7 @@ ...@@ -26,15 +26,7 @@
label="商品" label="商品"
prop="productSpuIds" prop="productSpuIds"
> >
<div class="flex flex-wrap items-center gap-1"> <SpuShowcase v-model="formData.productSpuIds" />
<div v-for="(spu, index) in productSpus" :key="spu.id" class="select-box spu-pic">
<el-image :src="spu.picUrl" />
<Icon class="del-icon" icon="ep:circle-close-filled" @click="handleRemoveSpu(index)" />
</div>
<div class="select-box" @click="openSpuTableSelect">
<Icon icon="ep:plus" />
</div>
</div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="formData.productScope === PromotionProductScopeEnum.CATEGORY.scope" v-if="formData.productScope === PromotionProductScopeEnum.CATEGORY.scope"
...@@ -186,18 +178,16 @@ ...@@ -186,18 +178,16 @@
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
</template> </template>
</Dialog> </Dialog>
<SpuTableSelect ref="spuTableSelectRef" multiple @change="handleSpuSelected" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate' import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
import * as ProductSpuApi from '@/api/mall/product/spu'
import { import {
CouponTemplateValidityTypeEnum, CouponTemplateValidityTypeEnum,
PromotionDiscountTypeEnum, PromotionDiscountTypeEnum,
PromotionProductScopeEnum PromotionProductScopeEnum
} from '@/utils/constants' } from '@/utils/constants'
import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue' import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue' import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
import { convertToInteger, formatToFraction } from '@/utils' import { convertToInteger, formatToFraction } from '@/utils'
...@@ -251,7 +241,6 @@ const formRules = reactive({ ...@@ -251,7 +241,6 @@ const formRules = reactive({
productCategoryIds: [{ required: true, message: '分类不能为空', trigger: 'blur' }] productCategoryIds: [{ required: true, message: '分类不能为空', trigger: 'blur' }]
}) })
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
const productSpus = ref<ProductSpuApi.Spu[]>([]) // 商品列表
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (type: string, id?: number) => { const open = async (type: string, id?: number) => {
...@@ -354,7 +343,6 @@ const resetForm = () => { ...@@ -354,7 +343,6 @@ const resetForm = () => {
productCategoryIds: [] productCategoryIds: []
} }
formRef.value?.resetFields() formRef.value?.resetFields()
productSpus.value = []
} }
/** 获得商品范围 */ /** 获得商品范围 */
...@@ -363,8 +351,6 @@ const getProductScope = async () => { ...@@ -363,8 +351,6 @@ const getProductScope = async () => {
case PromotionProductScopeEnum.SPU.scope: case PromotionProductScopeEnum.SPU.scope:
// 设置商品编号 // 设置商品编号
formData.value.productSpuIds = formData.value.productScopeValues formData.value.productSpuIds = formData.value.productScopeValues
// 获得商品列表
productSpus.value = await ProductSpuApi.getSpuDetailList(formData.value.productScopeValues)
break break
case PromotionProductScopeEnum.CATEGORY.scope: case PromotionProductScopeEnum.CATEGORY.scope:
await nextTick(() => { await nextTick(() => {
...@@ -397,47 +383,6 @@ function setProductScopeValues(data: CouponTemplateApi.CouponTemplateVO) { ...@@ -397,47 +383,6 @@ function setProductScopeValues(data: CouponTemplateApi.CouponTemplateVO) {
break break
} }
} }
/** 活动商品的按钮 */
const spuTableSelectRef = ref()
const openSpuTableSelect = () => {
spuTableSelectRef.value.open(productSpus.value)
}
/** 选择商品后触发 */
const handleSpuSelected = (spus: ProductSpuApi.Spu[]) => {
productSpus.value = spus
formData.value.productSpuIds = spus.map((spu) => spu.id) as []
}
/** 选择商品后触发 */
const handleRemoveSpu = (index: number) => {
productSpus.value.splice(index, 1)
formData.value.productSpuIds.splice(index, 1)
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
.select-box {
display: flex;
width: 60px;
height: 60px;
border: 1px dashed var(--el-border-color-darker);
border-radius: 8px;
align-items: center;
justify-content: center;
}
.spu-pic {
position: relative;
}
.del-icon {
position: absolute;
top: -10px;
right: -10px;
z-index: 1;
width: 20px !important;
height: 20px !important;
}
</style>
src/views/mall/statistics/trade/index.vue
...@@ -219,6 +219,8 @@ import { TradeSummaryRespVO, TradeTrendSummaryRespVO } from '@/api/mall/statisti ...@@ -219,6 +219,8 @@ import { TradeSummaryRespVO, TradeTrendSummaryRespVO } from '@/api/mall/statisti
import { calculateRelativeRate, fenToYuan } from '@/utils' import { calculateRelativeRate, fenToYuan } from '@/utils'
import download from '@/utils/download' import download from '@/utils/download'
import { CardTitle } from '@/components/Card' import { CardTitle } from '@/components/Card'
import * as DateUtil from '@/utils/formatTime'
import dayjs from 'dayjs'
/** 交易统计 */ /** 交易统计 */
defineOptions({ name: 'TradeStatistics' }) defineOptions({ name: 'TradeStatistics' })
...@@ -289,6 +291,13 @@ const lineChartOptions = reactive<EChartsOption>({ ...@@ -289,6 +291,13 @@ const lineChartOptions = reactive<EChartsOption>({
/** 处理交易状况查询 */ /** 处理交易状况查询 */
const getTradeTrendData = async () => { const getTradeTrendData = async () => {
trendLoading.value = true trendLoading.value = true
// 1. 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
const times = shortcutDateRangePicker.value.times
if (DateUtil.isSameDay(times[0], times[1])) {
// 前天
times[0] = DateUtil.formatDate(dayjs(times[0]).subtract(1, 'd'))
}
// 查询数据
await Promise.all([getTradeTrendSummary(), getTradeStatisticsList()]) await Promise.all([getTradeTrendSummary(), getTradeStatisticsList()])
trendLoading.value = false trendLoading.value = false
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment