mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-07-16 20:05:07 +08:00
Merge branch 'master' of https://gitee.com/yudaocode/yudao-ui-admin-vue3
This commit is contained in:
liuhongfeng
@ -19,9 +19,14 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="权限级别" prop="level">
|
||||
<el-radio-group v-model="formData.level">
|
||||
<!-- TODO @puhui999：搞个字典配置？然后这里 remove 掉负责人 -->
|
||||
<el-radio :label="CrmPermissionLevelEnum.READ">只读</el-radio>
|
||||
<el-radio :label="CrmPermissionLevelEnum.WRITE">读写</el-radio>
|
||||
<template
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PERMISSION_LEVEL)"
|
||||
:key="dict.value"
|
||||
>
|
||||
<el-radio v-if="dict.value != CrmPermissionLevelEnum.OWNER" :label="dict.value">
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@ -34,7 +39,8 @@
|
||||
<script lang="ts" setup>
|
||||
import * as UserApi from '@/api/system/user'
|
||||
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' })
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- 操作栏 -->
|
||||
<el-row justify="end">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-button type="primary" @click="openForm">
|
||||
<Icon class="mr-5px" icon="ep:plus" />
|
||||
新增
|
||||
</el-button>
|
||||
@ -9,7 +9,7 @@
|
||||
<Icon class="mr-5px" icon="ep:edit" />
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="handleRemove">
|
||||
<el-button @click="handleDelete">
|
||||
<Icon class="mr-5px" icon="ep:delete" />
|
||||
移除
|
||||
</el-button>
|
||||
@ -30,45 +30,32 @@
|
||||
<el-table-column align="center" label="岗位" prop="postNames" />
|
||||
<el-table-column align="center" label="权限级别" prop="level">
|
||||
<template #default="{ row }">
|
||||
<el-tag>{{ getLevelName(row.level) }}</el-tag>
|
||||
<dict-tag :type="DICT_TYPE.CRM_PERMISSION_LEVEL" :value="row.level" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :formatter="dateFormatter" align="center" label="加入时间" prop="createTime" />
|
||||
</el-table>
|
||||
<CrmPermissionForm ref="crmPermissionFormRef" />
|
||||
<CrmPermissionForm ref="permissionFormRef" @success="getList" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// TODO @puhui999：改成 CrmPermissionList
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import { ElTable } from 'element-plus'
|
||||
import * as PermissionApi from '@/api/crm/permission'
|
||||
import { useUserStoreWithOut } from '@/store/modules/user'
|
||||
import CrmPermissionForm from './CrmPermissionForm.vue'
|
||||
import { CrmPermissionLevelEnum } from './index'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
|
||||
defineOptions({ name: 'CrmTeam' })
|
||||
defineOptions({ name: 'CrmPermissionList' })
|
||||
|
||||
const message = useMessage() // 消息
|
||||
|
||||
const props = defineProps<{
|
||||
bizType: number
|
||||
bizId: number
|
||||
bizType: number // 模块类型
|
||||
bizId: number // 模块数据编号
|
||||
}>()
|
||||
const loading = ref(true) // 列表的加载中
|
||||
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 list = ref<PermissionApi.PermissionVO[]>([]) // 列表的数据
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
@ -83,40 +70,28 @@ const getList = async () => {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 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 multipleSelection = ref<PermissionApi.PermissionVO[]>([]) // 选择的团队成员
|
||||
const handleSelectionChange = (val: PermissionApi.PermissionVO[]) => {
|
||||
multipleSelection.value = val
|
||||
}
|
||||
// TODO @puhui999：一些变量命名，看看有没可能跟列表界面的 index.vue 保持他统一的风格；
|
||||
const crmPermissionFormRef = ref<InstanceType<typeof CrmPermissionForm>>()
|
||||
|
||||
const permissionFormRef = ref<InstanceType<typeof CrmPermissionForm>>() // 权限表单 Ref
|
||||
/**
|
||||
* 编辑团队成员
|
||||
*/
|
||||
const handleEdit = () => {
|
||||
if (multipleSelection.value?.length === 0) {
|
||||
message.warning('请先选择团队成员后操作！')
|
||||
return
|
||||
}
|
||||
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) {
|
||||
message.warning('请先选择团队成员后操作！')
|
||||
return
|
||||
@ -129,11 +104,18 @@ const handleRemove = async () => {
|
||||
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 permission = list.value.find(
|
||||
(item) => item.userId === userStore.getUser.id && item.level === CrmPermissionLevelEnum.OWNER
|
||||
@ -1,4 +1,4 @@
|
||||
import CrmTeam from './CrmTeamList.vue'
|
||||
import CrmPermissionList from './CrmPermissionList.vue'
|
||||
|
||||
enum CrmBizTypeEnum {
|
||||
CRM_LEADS = 1, // 线索
|
||||
@ -9,9 +9,7 @@ enum CrmBizTypeEnum {
|
||||
}
|
||||
|
||||
enum CrmPermissionLevelEnum {
|
||||
OWNER = 1, // 负责人
|
||||
READ = 2, // 读
|
||||
WRITE = 3 // 写
|
||||
OWNER = 1 // 负责人
|
||||
}
|
||||
|
||||
export { CrmTeam, CrmBizTypeEnum, CrmPermissionLevelEnum }
|
||||
export { CrmPermissionList, CrmBizTypeEnum, CrmPermissionLevelEnum }
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</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>
|
||||
@ -16,31 +16,31 @@
|
||||
</div>
|
||||
<el-row class="mt-10px">
|
||||
<el-button>
|
||||
<Icon icon="ph:calendar-fill" class="mr-5px" />
|
||||
<Icon class="mr-5px" icon="ph:calendar-fill" />
|
||||
创建任务
|
||||
</el-button>
|
||||
<el-button>
|
||||
<Icon icon="carbon:email" class="mr-5px" />
|
||||
<Icon class="mr-5px" icon="carbon:email" />
|
||||
发送邮件
|
||||
</el-button>
|
||||
<el-button>
|
||||
<Icon icon="system-uicons:contacts" class="mr-5px" />
|
||||
<Icon class="mr-5px" icon="system-uicons:contacts" />
|
||||
创建联系人
|
||||
</el-button>
|
||||
<el-button>
|
||||
<Icon icon="ep:opportunity" class="mr-5px" />
|
||||
<Icon class="mr-5px" icon="ep:opportunity" />
|
||||
创建商机
|
||||
</el-button>
|
||||
<el-button>
|
||||
<Icon icon="clarity:contract-line" class="mr-5px" />
|
||||
<Icon class="mr-5px" icon="clarity:contract-line" />
|
||||
创建合同
|
||||
</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>
|
||||
<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-row>
|
||||
@ -75,20 +75,32 @@
|
||||
<el-tab-pane label="客户关系" lazy> 客户关系</el-tab-pane>
|
||||
<!-- TODO wanwan 以下标签上的数量需要接口统计返回 -->
|
||||
<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 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 label="商机" lazy> 商机</el-tab-pane>
|
||||
<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 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 label="回访" lazy> 回访</el-tab-pane>
|
||||
@ -100,7 +112,7 @@
|
||||
<CustomerForm ref="formRef" @success="getCustomerData(id)" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||
import * as CustomerApi from '@/api/crm/customer'
|
||||
@ -108,6 +120,7 @@ import CustomerBasicInfo from '@/views/crm/customer/detail/CustomerBasicInfo.vue
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import CustomerDetails from '@/views/crm/customer/detail/CustomerDetails.vue'
|
||||
import CustomerForm from '@/views/crm/customer/CustomerForm.vue'
|
||||
import { CrmBizTypeEnum, CrmPermissionList } from '@/views/crm/components'
|
||||
|
||||
defineOptions({ name: 'CustomerDetail' })
|
||||
|
||||
|
||||
@ -121,7 +121,7 @@
|
||||
<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="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
|
||||
:formatter="dateFormatter"
|
||||
@ -185,8 +185,6 @@
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
<!-- TODO 方便查看效果 TODO 芋艿：先注释了，避免演示环境报错 -->
|
||||
<!-- <CrmTeam :biz-id="1" :biz-type="CrmBizTypeEnum.CRM_CUSTOMER" />-->
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<CustomerForm ref="formRef" @success="getList" />
|
||||
@ -198,7 +196,6 @@ import { dateFormatter } from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
import * as CustomerApi from '@/api/crm/customer'
|
||||
import CustomerForm from './CustomerForm.vue'
|
||||
import { CrmBizTypeEnum, CrmTeam } from '@/views/crm/components'
|
||||
|
||||
defineOptions({ name: 'CrmCustomer' })
|
||||
|
||||
@ -211,11 +208,12 @@ const list = ref([]) // 列表的数据
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
mobile: null,
|
||||
industryId: null,
|
||||
level: null,
|
||||
source: null
|
||||
pool: false,
|
||||
name: '',
|
||||
mobile: '',
|
||||
industryId: undefined,
|
||||
level: undefined,
|
||||
source: undefined
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
@ -241,6 +239,7 @@ const handleQuery = () => {
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
queryParams.pool = false
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
|
||||
@ -8,14 +8,7 @@
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="商品" prop="spuId">
|
||||
<div @click="handleSelectSpu" class="h-60px w-60px">
|
||||
<div v-if="spuData && spuData.picUrl">
|
||||
<el-image :src="spuData.picUrl" />
|
||||
</div>
|
||||
<div v-else class="select-box">
|
||||
<Icon icon="ep:plus" />
|
||||
</div>
|
||||
</div>
|
||||
<SpuShowcase v-model="formData.spuId" :limit="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品规格" prop="skuId" v-if="formData.spuId">
|
||||
<div @click="handleSelectSku" class="h-60px w-60px">
|
||||
@ -51,12 +44,11 @@
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
<SpuTableSelect ref="spuTableSelectRef" @change="handleSpuChange" />
|
||||
<SkuTableSelect ref="skuTableSelectRef" @change="handleSkuChange" :spu-id="spuData.id" />
|
||||
<SkuTableSelect ref="skuTableSelectRef" @change="handleSkuChange" :spu-id="formData.spuId" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
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 SkuTableSelect from '@/views/mall/product/spu/components/SkuTableSelect.vue'
|
||||
|
||||
@ -72,8 +64,7 @@ const formData = ref({
|
||||
userId: undefined,
|
||||
userNickname: undefined,
|
||||
userAvatar: undefined,
|
||||
spuId: undefined,
|
||||
spuName: undefined,
|
||||
spuId: 0,
|
||||
skuId: undefined,
|
||||
descriptionScores: 5,
|
||||
benefitScores: 5,
|
||||
@ -90,7 +81,6 @@ const formRules = reactive({
|
||||
benefitScores: [{ required: true, message: '服务星级不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
const spuData = ref<ProductSpuApi.Spu>({})
|
||||
const skuData = ref({
|
||||
id: -1,
|
||||
name: '',
|
||||
@ -149,8 +139,7 @@ const resetForm = () => {
|
||||
userId: undefined,
|
||||
userNickname: undefined,
|
||||
userAvatar: undefined,
|
||||
spuId: undefined,
|
||||
spuName: undefined,
|
||||
spuId: 0,
|
||||
skuId: undefined,
|
||||
descriptionScores: 5,
|
||||
benefitScores: 5,
|
||||
@ -160,16 +149,6 @@ const resetForm = () => {
|
||||
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 表格选择 */
|
||||
const skuTableSelectRef = ref()
|
||||
const handleSelectSku = () => {
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<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">
|
||||
<template #default="scope">
|
||||
<div class="row flex items-center gap-x-4px">
|
||||
|
||||
@ -13,54 +13,64 @@
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-tooltip content="选择商品">
|
||||
<div
|
||||
v-show="!disabled"
|
||||
v-if="!limit || limit <= productSpus.length"
|
||||
class="select-box"
|
||||
@click="openSpuTableSelect"
|
||||
>
|
||||
<el-tooltip content="选择商品" v-if="canAdd">
|
||||
<div class="select-box" @click="openSpuTableSelect">
|
||||
<Icon icon="ep:plus" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<!-- 商品选择对话框（表格形式） -->
|
||||
<SpuTableSelect ref="spuTableSelectRef" multiple @change="handleSpuSelected" />
|
||||
<SpuTableSelect ref="spuTableSelectRef" :multiple="limit != 1" @change="handleSpuSelected" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { array } from 'vue-types'
|
||||
import { oneOfType } from 'vue-types'
|
||||
import { isArray } from '@/utils/is'
|
||||
|
||||
// 商品橱窗，一般用于与商品建立关系时使用
|
||||
// 提供功能：展示商品列表、添加商品、移除商品
|
||||
defineOptions({ name: 'SpuShowcase' })
|
||||
|
||||
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)
|
||||
})
|
||||
|
||||
// 计算是否可以添加
|
||||
const canAdd = computed(() => {
|
||||
// 情况一：禁用时不可以添加
|
||||
if (props.disabled) return false
|
||||
// 情况二：未指定限制数量时，可以添加
|
||||
if (!props.limit) return true
|
||||
// 情况三：检查已添加数量是否小于限制数量
|
||||
return productSpus.value.length < props.limit
|
||||
})
|
||||
|
||||
// 商品列表
|
||||
const productSpus = ref<ProductSpuApi.Spu[]>([])
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
async () => {
|
||||
if (props.modelValue.length === 0) {
|
||||
const ids = isArray(props.modelValue)
|
||||
? // 情况一：多选
|
||||
props.modelValue
|
||||
: // 情况二：单选
|
||||
props.modelValue
|
||||
? [props.modelValue]
|
||||
: []
|
||||
// 不需要返显
|
||||
if (ids.length === 0) {
|
||||
productSpus.value = []
|
||||
return
|
||||
}
|
||||
// 只有商品发生变化之后，才去查询商品
|
||||
if (
|
||||
productSpus.value.length === 0 ||
|
||||
productSpus.value.some((spu) => !props.modelValue.includes(spu.id))
|
||||
) {
|
||||
debugger
|
||||
productSpus.value = await ProductSpuApi.getSpuDetailList(props.modelValue)
|
||||
if (productSpus.value.length === 0 || productSpus.value.some((spu) => !ids.includes(spu.id!))) {
|
||||
productSpus.value = await ProductSpuApi.getSpuDetailList(ids)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
@ -77,8 +87,8 @@ const openSpuTableSelect = () => {
|
||||
* 选择商品后触发
|
||||
* @param spus 选中的商品列表
|
||||
*/
|
||||
const handleSpuSelected = (spus: ProductSpuApi.Spu[]) => {
|
||||
productSpus.value = spus
|
||||
const handleSpuSelected = (spus: ProductSpuApi.Spu | ProductSpuApi.Spu[]) => {
|
||||
productSpus.value = isArray(spus) ? spus : [spus]
|
||||
emitSpuChange()
|
||||
}
|
||||
|
||||
@ -92,11 +102,17 @@ const handleRemoveSpu = (index: number) => {
|
||||
}
|
||||
const emit = defineEmits(['update:modelValue', 'change'])
|
||||
const emitSpuChange = () => {
|
||||
emit(
|
||||
'update:modelValue',
|
||||
productSpus.value.map((spu) => spu.id)
|
||||
)
|
||||
emit('change', productSpus.value)
|
||||
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(
|
||||
'update:modelValue',
|
||||
productSpus.value.map((spu) => spu.id)
|
||||
)
|
||||
emit('change', productSpus.value)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" :appendToBody="true" title="选择商品" width="70%">
|
||||
<ContentWrap>
|
||||
<el-row :gutter="20" class="mb-10px">
|
||||
<el-col :span="6">
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
class="!w-240px"
|
||||
@ -10,19 +16,19 @@
|
||||
placeholder="请输入商品名称"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
</el-form-item>
|
||||
<el-form-item label="商品分类" prop="categoryId">
|
||||
<el-tree-select
|
||||
v-model="queryParams.categoryId"
|
||||
:data="categoryTreeList"
|
||||
:props="defaultProps"
|
||||
check-strictly
|
||||
class="w-1/1"
|
||||
class="!w-240px"
|
||||
node-key="id"
|
||||
placeholder="请选择商品分类"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
</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')]"
|
||||
@ -32,8 +38,8 @@
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
@ -42,30 +48,32 @@
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="loading" :data="list" show-overflow-tooltip>
|
||||
<!-- 多选模式 -->
|
||||
<el-table-column key="2" type="selection" width="55" v-if="multiple">
|
||||
<!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
|
||||
<el-table-column width="55" v-if="multiple">
|
||||
<template #header>
|
||||
<el-checkbox
|
||||
:value="allChecked && checkedPageNos.indexOf(queryParams.pageNo) > -1"
|
||||
v-model="isCheckAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
@change="handleCheckAll"
|
||||
/>
|
||||
</template>
|
||||
<template #default="{ row }">
|
||||
<el-checkbox
|
||||
:value="checkedSpuIds.indexOf(row.id) > -1"
|
||||
@change="(checked: boolean) => handleCheckOne(checked, row)"
|
||||
v-model="checkedStatus[row.id]"
|
||||
@change="(checked: boolean) => handleCheckOne(checked, row, true)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 单选模式 -->
|
||||
<!-- 2. 单选模式 -->
|
||||
<el-table-column label="#" width="55" v-else>
|
||||
<template #default="{ row }">
|
||||
<el-radio :label="row.id" v-model="selectedSpuId" @change="handleSingleSelected(row)"
|
||||
> </el-radio
|
||||
>
|
||||
<el-radio :label="row.id" v-model="selectedSpuId" @change="handleSingleSelected(row)">
|
||||
<!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
|
||||
|
||||
</el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column key="id" align="center" label="商品编号" prop="id" min-width="60" />
|
||||
@ -102,54 +110,71 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ElTable } from 'element-plus'
|
||||
import { defaultProps, handleTree } from '@/utils/tree'
|
||||
|
||||
import * as ProductCategoryApi from '@/api/mall/product/category'
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { CHANGE_EVENT } from 'element-plus'
|
||||
|
||||
type Spu = Required<ProductSpuApi.Spu>
|
||||
|
||||
/**
|
||||
* 商品表格选择对话框
|
||||
* 1. 单选模式：
|
||||
* 1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
|
||||
* 1.2 再次打开时，保持选中状态
|
||||
* 2. 多选模式：
|
||||
* 2.1 点击表格左侧的多选框时，记录选中的商品
|
||||
* 2.2 切换分页时，保持商品的选中的状态
|
||||
* 2.3 点击右下角的确定按钮时，结束选择，关闭对话框
|
||||
* 2.4 再次打开时，保持选中状态
|
||||
*/
|
||||
defineOptions({ name: 'SpuTableSelect' })
|
||||
|
||||
const props = defineProps({
|
||||
// 多选
|
||||
defineProps({
|
||||
// 多选模式
|
||||
multiple: propTypes.bool.def(false)
|
||||
})
|
||||
|
||||
const total = ref(0) // 列表的总页数
|
||||
const list = ref<Spu[]>([]) // 列表的数据
|
||||
const loading = ref(false) // 列表的加载中
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
// 列表的总页数
|
||||
const total = ref(0)
|
||||
// 列表的数据
|
||||
const list = ref<Spu[]>([])
|
||||
// 列表的加载中
|
||||
const loading = ref(false)
|
||||
// 弹窗的是否展示
|
||||
const dialogVisible = ref(false)
|
||||
// 查询参数
|
||||
const queryParams = ref({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
tabType: 0, // 默认获取上架的商品
|
||||
// 默认获取上架的商品
|
||||
tabType: 0,
|
||||
name: '',
|
||||
categoryId: null,
|
||||
createTime: []
|
||||
}) // 查询参数
|
||||
|
||||
const selectedSpuId = ref() // 选中的商品 spuId
|
||||
})
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = (spus?: Spu[]) => {
|
||||
if (spus && spus.length > 0) {
|
||||
// todo check-box不显示选中？
|
||||
checkedSpus.value = [...spus]
|
||||
checkedSpuIds.value = spus.map((spu) => spu.id)
|
||||
} else {
|
||||
checkedSpus.value = []
|
||||
checkedSpuIds.value = []
|
||||
const open = (spuList?: Spu[]) => {
|
||||
// 重置
|
||||
checkedSpus.value = []
|
||||
checkedStatus.value = {}
|
||||
isCheckAll.value = false
|
||||
isIndeterminate.value = false
|
||||
|
||||
// 处理已选中
|
||||
if (spuList && spuList.length > 0) {
|
||||
checkedSpus.value = [...spuList]
|
||||
checkedStatus.value = Object.fromEntries(spuList.map((spu) => [spu.id, true]))
|
||||
}
|
||||
allChecked.value = false
|
||||
checkedPageNos.value = []
|
||||
|
||||
dialogVisible.value = true
|
||||
resetQuery()
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
// 提供 open 方法，用于打开弹窗
|
||||
defineExpose({ open })
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
@ -158,6 +183,12 @@ const getList = async () => {
|
||||
const data = await ProductSpuApi.getSpuPage(queryParams.value)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
// checkbox绑定undefined会有问题，需要给一个bool值
|
||||
list.value.forEach(
|
||||
(spu) => (checkedStatus.value[spu.id] = checkedStatus.value[spu.id] || false)
|
||||
)
|
||||
// 计算全选框状态
|
||||
calculateIsCheckAll()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@ -174,7 +205,8 @@ const resetQuery = () => {
|
||||
queryParams.value = {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
tabType: 0, // 默认获取上架的商品
|
||||
// 默认获取上架的商品
|
||||
tabType: 0,
|
||||
name: '',
|
||||
categoryId: null,
|
||||
createTime: []
|
||||
@ -182,65 +214,85 @@ const resetQuery = () => {
|
||||
getList()
|
||||
}
|
||||
|
||||
const allChecked = ref(false) //是否全选
|
||||
const checkedPageNos = ref<number[]>([]) //选中的页码
|
||||
const checkedSpuIds = ref<number[]>([]) //选中的商品ID
|
||||
const checkedSpus = ref<Spu[]>([]) //选中的商品
|
||||
// 是否全选
|
||||
const isCheckAll = ref(false)
|
||||
// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
|
||||
const isIndeterminate = ref(false)
|
||||
// 选中的商品
|
||||
const checkedSpus = ref<Spu[]>([])
|
||||
// 选中状态：key为商品ID，value为是否选中
|
||||
const checkedStatus = ref<Record<string, boolean>>({})
|
||||
|
||||
// 选中的商品 spuId
|
||||
const selectedSpuId = ref()
|
||||
/** 单选中时触发 */
|
||||
const handleSingleSelected = (row: Spu) => {
|
||||
emits('change', row)
|
||||
const handleSingleSelected = (spu: Spu) => {
|
||||
emits(CHANGE_EVENT, spu)
|
||||
// 关闭弹窗
|
||||
dialogVisible.value = false
|
||||
// 记住上次选择的ID
|
||||
selectedSpuId.value = row.id
|
||||
selectedSpuId.value = spu.id
|
||||
}
|
||||
|
||||
/** 多选完成 */
|
||||
const handleEmitChange = () => {
|
||||
// 关闭弹窗
|
||||
dialogVisible.value = false
|
||||
emits('change', [...checkedSpus.value])
|
||||
emits(CHANGE_EVENT, [...checkedSpus.value])
|
||||
}
|
||||
|
||||
/** 确认选择时的触发事件 */
|
||||
const emits = defineEmits<{
|
||||
(e: 'change', spu: Spu | Spu[] | any): void
|
||||
change: [spu: Spu | Spu[] | any]
|
||||
}>()
|
||||
|
||||
/** 全选 */
|
||||
/** 全选/全不选 */
|
||||
const handleCheckAll = (checked: boolean) => {
|
||||
debugger
|
||||
console.log('checkAll', checked)
|
||||
allChecked.value = checked
|
||||
const index = checkedPageNos.value.indexOf(queryParams.value.pageNo)
|
||||
checkedPageNos.value.push(queryParams.value.pageNo)
|
||||
if (index > -1) {
|
||||
checkedPageNos.value.splice(index, 1)
|
||||
}
|
||||
isCheckAll.value = checked
|
||||
isIndeterminate.value = false
|
||||
|
||||
list.value.forEach((item) => handleCheckOne(checked, item))
|
||||
list.value.forEach((spu) => handleCheckOne(checked, spu, false))
|
||||
}
|
||||
|
||||
/** 选中一行 */
|
||||
const handleCheckOne = (checked: boolean, spu: Spu) => {
|
||||
/**
|
||||
* 选中一行
|
||||
* @param checked 是否选中
|
||||
* @param spu 商品
|
||||
* @param isCalcCheckAll 是否计算全选
|
||||
*/
|
||||
const handleCheckOne = (checked: boolean, spu: Spu, isCalcCheckAll: boolean) => {
|
||||
if (checked) {
|
||||
const index = checkedSpuIds.value.indexOf(spu.id)
|
||||
if (index === -1) {
|
||||
checkedSpuIds.value.push(spu.id)
|
||||
checkedSpus.value.push(spu)
|
||||
}
|
||||
checkedSpus.value.push(spu)
|
||||
checkedStatus.value[spu.id] = true
|
||||
} else {
|
||||
const index = checkedSpuIds.value.indexOf(spu.id)
|
||||
const index = findCheckedIndex(spu)
|
||||
if (index > -1) {
|
||||
checkedSpuIds.value.splice(index, 1)
|
||||
checkedSpus.value.splice(index, 1)
|
||||
checkedStatus.value[spu.id] = false
|
||||
isCheckAll.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 计算全选框状态
|
||||
if (isCalcCheckAll) {
|
||||
calculateIsCheckAll()
|
||||
}
|
||||
}
|
||||
|
||||
const categoryList = ref() // 分类列表
|
||||
const categoryTreeList = ref() // 分类树
|
||||
// 查找商品在已选中商品列表中的索引
|
||||
const findCheckedIndex = (spu: Spu) => checkedSpus.value.findIndex((item) => item.id === spu.id)
|
||||
|
||||
// 计算全选框状态
|
||||
const calculateIsCheckAll = () => {
|
||||
isCheckAll.value = list.value.every((spu) => checkedStatus.value[spu.id])
|
||||
// 计算中间状态：不是全部选中 && 任意一个选中
|
||||
isIndeterminate.value = !isCheckAll.value && list.value.some((spu) => checkedStatus.value[spu.id])
|
||||
}
|
||||
|
||||
// 分类列表
|
||||
const categoryList = ref()
|
||||
// 分类树
|
||||
const categoryTreeList = ref()
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
await getList()
|
||||
|
||||
@ -150,15 +150,14 @@ import {
|
||||
} 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[]
|
||||
multipleSelection: CouponTemplateApi.CouponTemplateVO[]
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:multipleSelection', v: GiveCouponTemplate[])
|
||||
(e: 'update:multipleSelection', v: CouponTemplateApi.CouponTemplateVO[])
|
||||
}>()
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('选择优惠卷') // 弹窗的标题
|
||||
@ -210,10 +209,7 @@ const open = async () => {
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
const handleSelectionChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
|
||||
emit(
|
||||
'update:multipleSelection',
|
||||
val.map((item) => ({ id: item.id, name: item.name }))
|
||||
)
|
||||
emit('update:multipleSelection', val)
|
||||
}
|
||||
|
||||
const submitForm = () => {
|
||||
|
||||
@ -26,15 +26,7 @@
|
||||
label="商品"
|
||||
prop="productSpuIds"
|
||||
>
|
||||
<div class="flex flex-wrap items-center gap-1">
|
||||
<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>
|
||||
<SpuShowcase v-model="formData.productSpuIds" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="formData.productScope === PromotionProductScopeEnum.CATEGORY.scope"
|
||||
@ -186,18 +178,16 @@
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
<SpuTableSelect ref="spuTableSelectRef" multiple @change="handleSpuSelected" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
import {
|
||||
CouponTemplateValidityTypeEnum,
|
||||
PromotionDiscountTypeEnum,
|
||||
PromotionProductScopeEnum
|
||||
} 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 { convertToInteger, formatToFraction } from '@/utils'
|
||||
|
||||
@ -251,7 +241,6 @@ const formRules = reactive({
|
||||
productCategoryIds: [{ required: true, message: '分类不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
const productSpus = ref<ProductSpuApi.Spu[]>([]) // 商品列表
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
@ -354,7 +343,6 @@ const resetForm = () => {
|
||||
productCategoryIds: []
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
productSpus.value = []
|
||||
}
|
||||
|
||||
/** 获得商品范围 */
|
||||
@ -363,8 +351,6 @@ const getProductScope = async () => {
|
||||
case PromotionProductScopeEnum.SPU.scope:
|
||||
// 设置商品编号
|
||||
formData.value.productSpuIds = formData.value.productScopeValues
|
||||
// 获得商品列表
|
||||
productSpus.value = await ProductSpuApi.getSpuDetailList(formData.value.productScopeValues)
|
||||
break
|
||||
case PromotionProductScopeEnum.CATEGORY.scope:
|
||||
await nextTick(() => {
|
||||
@ -397,47 +383,6 @@ function setProductScopeValues(data: CouponTemplateApi.CouponTemplateVO) {
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -219,6 +219,8 @@ import { TradeSummaryRespVO, TradeTrendSummaryRespVO } from '@/api/mall/statisti
|
||||
import { calculateRelativeRate, fenToYuan } from '@/utils'
|
||||
import download from '@/utils/download'
|
||||
import { CardTitle } from '@/components/Card'
|
||||
import * as DateUtil from '@/utils/formatTime'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
/** 交易统计 */
|
||||
defineOptions({ name: 'TradeStatistics' })
|
||||
@ -289,6 +291,13 @@ const lineChartOptions = reactive<EChartsOption>({
|
||||
/** 处理交易状况查询 */
|
||||
const getTradeTrendData = async () => {
|
||||
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()])
|
||||
trendLoading.value = false
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user