mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-07-20 05:45:08 +08:00
Merge remote-tracking branch 'yudao/master' into dhb52_master
This commit is contained in:
dhb52
@ -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 }
|
||||
|
||||
@ -1,170 +1,131 @@
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible" :width="800">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="130px"
|
||||
v-loading="formLoading"
|
||||
:inline="true"
|
||||
>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="ownerUserId">
|
||||
<el-select
|
||||
v-model="ownerUserList"
|
||||
placeholder="请选择负责人"
|
||||
multiple
|
||||
value-key="id"
|
||||
lable-key="nickname"
|
||||
@click="openOwerForm('open')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in ownerUserList"
|
||||
:key="item.id"
|
||||
:label="item.nickname"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- TODO 芋艿：封装成一个组件 -->
|
||||
<el-form-item label="客户名称" prop="customerName">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
:width="600"
|
||||
trigger="click"
|
||||
:teleported="false"
|
||||
:visible="showCustomer"
|
||||
:offset="10"
|
||||
>
|
||||
<template #reference>
|
||||
<el-input
|
||||
placeholder="请选择"
|
||||
@click="openCustomerSelect"
|
||||
v-model="formData.customerName"
|
||||
/>
|
||||
</template>
|
||||
<el-table :data="list" ref="multipleTableRef" @select="handleSelectionChange">
|
||||
<el-table-column label="选择" type="selection" width="55" />
|
||||
<el-table-column width="100" property="id" label="编号" />
|
||||
<el-table-column width="150" property="name" label="客户名称" />
|
||||
<el-table-column label="客户来源" align="center" prop="source" width="100">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="scope.row.source" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="客户等级" align="center" prop="level" width="120">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
layout="sizes, prev, pager, next"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="10" :offset="13">
|
||||
<el-button @click="selectCustomer">确认</el-button>
|
||||
<el-button @click="showCustomer = false">取消</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-select v-model="formData.sex" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<el-input v-model="formData.mobile" placeholder="请输入手机号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="座机" prop="telephone">
|
||||
<el-input v-model="formData.telephone" placeholder="请输入座机" style="width: 215px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="formData.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
<el-form-item label="QQ" prop="qq">
|
||||
<el-input v-model="formData.qq" placeholder="请输入QQ" style="width: 215px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="微信" prop="webchat">
|
||||
<el-input v-model="formData.webchat" placeholder="请输入微信" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下次联系时间" prop="nextTime">
|
||||
<el-date-picker
|
||||
v-model="formData.nextTime"
|
||||
type="date"
|
||||
value-format="x"
|
||||
placeholder="选择下次联系时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="address">
|
||||
<el-input v-model="formData.address" placeholder="请输入地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="直属上级" prop="parentId">
|
||||
<el-select v-model="formData.parentId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in allContactList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
:disabled="item.id == formData.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="职位" prop="post">
|
||||
<el-input v-model="formData.post" placeholder="请输入职位" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否关键决策人" prop="policyMakers" style="width: 400px">
|
||||
<el-radio-group v-model="formData.policyMakers">
|
||||
<el-radio
|
||||
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formData.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible" :width="820">
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="110px" v-loading="formLoading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input input-style="width:190px;" v-model="formData.name" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="负责人" prop="ownerUserId">
|
||||
<el-select v-model="formData.ownerUserId" placeholder="请选择负责人" value-key="id" lable-key="nickname">
|
||||
<el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户名称" prop="customerName">
|
||||
<el-select v-model="formData.customerId" placeholder="请选择客户" value-key="id" lable-key="name">
|
||||
<el-option v-for="item in customerList" :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="sex">
|
||||
<el-select v-model="formData.sex" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)" :key="dict.value"
|
||||
:label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<el-input input-style="width:190px;" v-model="formData.mobile" placeholder="请输入手机号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="座机" prop="telephone">
|
||||
<el-input v-model="formData.telephone" placeholder="请输入座机" style="width: 215px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input input-style="width:190px;" v-model="formData.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="QQ" prop="qq">
|
||||
<el-input v-model="formData.qq" placeholder="请输入QQ" style="width: 215px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="微信" prop="wechat">
|
||||
<el-input input-style="width:190px;" v-model="formData.wechat" placeholder="请输入微信" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12"> <el-form-item label="下次联系时间" prop="nextTime">
|
||||
<el-date-picker v-model="formData.nextTime" type="date" value-format="x" placeholder="选择下次联系时间" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所在地" prop="areaId">
|
||||
<el-tree-select
|
||||
v-model="formData.areaId" :data="areaList" :props="defaultProps"
|
||||
:render-after-expand="true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="地址" prop="address">
|
||||
<el-input input-style="width:190px;" v-model="formData.address" placeholder="请输入地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row><el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="直属上级" prop="parentId">
|
||||
<el-select v-model="formData.parentId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in allContactList" :key="item.id" :label="item.name" :value="item.id"
|
||||
:disabled="item.id == formData.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12"> <el-form-item label="职位" prop="post">
|
||||
<el-input input-style="width:190px;" v-model="formData.post" placeholder="请输入职位" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row><el-row>
|
||||
<el-col :span="12"><el-form-item label="是否关键决策人" prop="master" style="width: 400px">
|
||||
<el-radio-group v-model="formData.master">
|
||||
<el-radio
|
||||
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" :key="dict.value"
|
||||
:label="dict.value">
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24"><el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formData.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
<OwerSelect
|
||||
ref="owerRef"
|
||||
@confirmOwerSelect="owerSelectValue"
|
||||
:initOwerUser="formData.ownerUserId"
|
||||
/>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import * as ContactApi from '@/api/crm/contact'
|
||||
import { DICT_TYPE, getIntDictOptions, getBoolDictOptions } from '@/utils/dict'
|
||||
import OwerSelect from './OwerSelect.vue'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import * as CustomerApi from '@/api/crm/customer'
|
||||
import { ElTable } from 'element-plus'
|
||||
import * as AreaApi from '@/api/system/area'
|
||||
import { defaultProps } from '@/utils/tree'
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
@ -172,6 +133,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const areaList = ref([]) // 地区列表
|
||||
const formData = ref({
|
||||
nextTime: undefined,
|
||||
mobile: undefined,
|
||||
@ -188,21 +150,10 @@ const formData = ref({
|
||||
name: undefined,
|
||||
post: undefined,
|
||||
qq: undefined,
|
||||
webchat: undefined,
|
||||
wechat: undefined,
|
||||
sex: undefined,
|
||||
policyMakers: undefined
|
||||
})
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const total = ref(0) // 列表的总页数
|
||||
const list = ref([]) // 列表的数据
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
mobile: null,
|
||||
industryId: null,
|
||||
level: null,
|
||||
source: null
|
||||
master: false,
|
||||
areaId: undefined
|
||||
})
|
||||
const formRules = reactive({
|
||||
name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
|
||||
@ -212,56 +163,33 @@ const formRules = reactive({
|
||||
const formRef = ref() // 表单 Ref
|
||||
const ownerUserList = ref<any[]>([])
|
||||
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
|
||||
|
||||
const customerList = ref<CustomerApi.CustomerVO[]>([]) // 客户列表
|
||||
const allContactList = ref([]) // 所有联系人列表
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
allContactList.value = await ContactApi.simpleAlllist()
|
||||
resetForm()
|
||||
allContactList.value = await ContactApi.simpleAllList()
|
||||
userList.value = await UserApi.getSimpleUserList()
|
||||
customerList.value = await CustomerApi.queryAllList()
|
||||
areaList.value = await AreaApi.getAreaTree()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await ContactApi.getContact(id)
|
||||
userList.value = await UserApi.getSimpleUserList()
|
||||
await gotOwnerUser(formData.value.ownerUserId)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await CustomerApi.getCustomerPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const gotOwnerUser = (owerUserId: any) => {
|
||||
if (owerUserId !== null) {
|
||||
owerUserId.split(',').forEach((item: string) => {
|
||||
userList.value.find((user: { id: any }) => {
|
||||
if (user.id == item) {
|
||||
ownerUserList.value.push(user)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
owerSelectValue(ownerUserList)
|
||||
// owerSelectValue(ownerUserList)
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
const valid = await formRef.value.validate()
|
||||
@ -302,52 +230,11 @@ const resetForm = () => {
|
||||
name: undefined,
|
||||
post: undefined,
|
||||
qq: undefined,
|
||||
webchat: undefined,
|
||||
wechat: undefined,
|
||||
sex: undefined,
|
||||
policyMakers: undefined
|
||||
master: false
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
ownerUserList.value = []
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
// TODO @zyna：owner？拼写要注意哈；
|
||||
const owerRef = ref()
|
||||
const openOwerForm = (type: string) => {
|
||||
owerRef.value.open(type, ownerUserList.value)
|
||||
}
|
||||
const owerSelectValue = (value) => {
|
||||
ownerUserList.value = value.value
|
||||
formData.value.ownerUserId = undefined
|
||||
value.value.forEach((item, index) => {
|
||||
if (index != 0) {
|
||||
formData.value.ownerUserId = formData.value.ownerUserId + ',' + item.id
|
||||
} else {
|
||||
formData.value.ownerUserId = item.id
|
||||
}
|
||||
})
|
||||
}
|
||||
// 选择客户
|
||||
const showCustomer = ref(false)
|
||||
const openCustomerSelect = () => {
|
||||
showCustomer.value = !showCustomer.value
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
|
||||
const multipleSelection = ref()
|
||||
const handleSelectionChange = ({}, row) => {
|
||||
multipleSelection.value = row
|
||||
multipleTableRef.value!.clearSelection()
|
||||
multipleTableRef.value!.toggleRowSelection(row, undefined)
|
||||
}
|
||||
const selectCustomer = () => {
|
||||
formData.value.customerId = multipleSelection.value.id
|
||||
formData.value.customerName = multipleSelection.value.name
|
||||
showCustomer.value = !showCustomer.value
|
||||
}
|
||||
const allContactList = ref([]) // 所有联系人列表
|
||||
onMounted(async () => {
|
||||
allContactList.value = await ContactApi.simpleAlllist()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
<!--
|
||||
* @Author: zyna
|
||||
* @Date: 2023-11-26 10:39:46
|
||||
* @LastEditTime: 2023-11-26 20:43:43
|
||||
* @FilePath: \yudao-ui-admin-vue3\src\views\crm\contact\detail\ContactDetails.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item name="basicInfo">
|
||||
@ -24,14 +31,17 @@
|
||||
{{ contact.qq }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="微信">
|
||||
{{ contact.webchat }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="详细地址">
|
||||
{{ contact.address }}
|
||||
{{ contact.wechat }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="下次联系时间">
|
||||
{{ contact.nextTime ? formatDate(contact.nextTime) : '空' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="所在地">
|
||||
{{ contact.areaName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="详细地址">
|
||||
{{ contact.address }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="性别">
|
||||
<dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="contact.sex" />
|
||||
</el-descriptions-item>
|
||||
@ -46,7 +56,7 @@
|
||||
</template>
|
||||
<el-descriptions :column="2">
|
||||
<el-descriptions-item label="负责人">
|
||||
{{ gotOwnerUser(contact.ownerUserId) }}
|
||||
{{ contact.ownerUserName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建人">
|
||||
{{ contact.creatorName }}
|
||||
@ -66,29 +76,9 @@
|
||||
import * as ContactApi from '@/api/crm/contact'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
const { contact } = defineProps<{ contact: ContactApi.ContactVO }>()
|
||||
|
||||
// 展示的折叠面板
|
||||
const activeNames = ref(['basicInfo', 'systemInfo'])
|
||||
const gotOwnerUser = (owerUserId: string) => {
|
||||
let ownerName = ''
|
||||
if (owerUserId !== null && owerUserId != undefined) {
|
||||
owerUserId.split(',').forEach((item: string, index: number) => {
|
||||
if (index != 0) {
|
||||
ownerName =
|
||||
ownerName + ',' + userList.value.find((user: { id: any }) => user.id == item)?.nickname
|
||||
} else {
|
||||
ownerName = userList.value.find((user: { id: any }) => user.id == item)?.nickname || ''
|
||||
}
|
||||
})
|
||||
}
|
||||
return ownerName
|
||||
}
|
||||
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
userList.value = await UserApi.getSimpleUserList()
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@ -63,33 +63,18 @@
|
||||
<!-- TODO wanwan：这个 tab 拉满哈，可以更好看； -->
|
||||
<el-col :span="18">
|
||||
<el-tabs>
|
||||
<el-tab-pane label="详细资料">
|
||||
<el-tab-pane label="基本信息">
|
||||
<!-- TODO wanwan：这个 ml-2 是不是可以优化下，不要整个左移，而是里面的内容有个几 px 的偏移，不顶在框里 -->
|
||||
<ContactDetails class="ml-2" :contact="contact" />
|
||||
</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>
|
||||
<!-- TODO wanwan 以下标签上的数量需要接口统计返回 -->
|
||||
<el-tab-pane label="客户" lazy>
|
||||
<template #label> 客户<el-badge :value="12" class="item" type="primary" /> </template>
|
||||
客户
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="团队成员" lazy>
|
||||
<template #label> 团队成员<el-badge :value="2" class="item" type="primary" /> </template>
|
||||
团队成员
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="跟进记录" lazy> 跟进记录</el-tab-pane>
|
||||
<el-tab-pane label="商机" lazy> 商机</el-tab-pane>
|
||||
<el-tab-pane label="合同" lazy>
|
||||
<template #label> 合同<el-badge :value="3" class="item" type="primary" /> </template>
|
||||
合同
|
||||
<el-tab-pane label="附件" lazy> 附件</el-tab-pane>
|
||||
<!-- TODO wanwan 以下标签上的数量需要接口统计返回 -->
|
||||
<el-tab-pane label="操作记录" lazy>
|
||||
<template #label> 操作记录<el-badge :value="12" class="item" type="primary" /> </template>
|
||||
操作记录
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="回款" lazy>
|
||||
<template #label> 回款<el-badge :value="4" class="item" type="primary" /> </template>
|
||||
回款
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="回访" lazy> 回访</el-tab-pane>
|
||||
<el-tab-pane label="发票" lazy> 发票</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
|
||||
|
||||
@ -55,9 +55,9 @@
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="微信" prop="webchat">
|
||||
<el-form-item label="微信" prop="wechat">
|
||||
<el-input
|
||||
v-model="queryParams.webchat"
|
||||
v-model="queryParams.wechat"
|
||||
placeholder="请输入微信"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
@ -109,20 +109,16 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="职位" align="center" prop="post" />
|
||||
<el-table-column label="是否关键决策人" align="center" prop="policyMakers">
|
||||
<el-table-column label="是否关键决策人" align="center" prop="master">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.policyMakers" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="直属上级" align="center" prop="parentId">
|
||||
<template #default="scope">
|
||||
{{ allContactList.find((contact) => contact.id === scope.row.parentId)?.name }}
|
||||
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.master" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="直属上级" align="center" prop="parentName"/>
|
||||
<el-table-column label="手机号" align="center" prop="mobile" />
|
||||
<el-table-column label="座机" align="center" prop="telephone" />
|
||||
<el-table-column label="QQ" align="center" prop="qq" />
|
||||
<el-table-column label="微信" align="center" prop="webchat" />
|
||||
<el-table-column label="微信" align="center" prop="wechat" />
|
||||
<el-table-column label="邮箱" align="center" prop="email" />
|
||||
<el-table-column label="地址" align="center" prop="address" />
|
||||
<el-table-column
|
||||
@ -142,7 +138,7 @@
|
||||
/>
|
||||
<el-table-column label="负责人" align="center" prop="ownerUserId">
|
||||
<template #default="scope">
|
||||
{{ gotOwnerUser(scope.row.ownerUserId) }}
|
||||
{{ scope.row.ownerUserName}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="所属部门" align="center" prop="ownerUserId" /> -->
|
||||
@ -239,13 +235,12 @@ const queryParams = reactive({
|
||||
name: null,
|
||||
post: null,
|
||||
qq: null,
|
||||
webchat: null,
|
||||
wechat: null,
|
||||
sex: null,
|
||||
policyMakers: null
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
@ -305,35 +300,15 @@ const handleExport = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// TODO @zyna：这个负责人的读取，放在后端好点
|
||||
const gotOwnerUser = (owerUserId: string) => {
|
||||
let ownerName = ''
|
||||
if (owerUserId !== null) {
|
||||
owerUserId.split(',').forEach((item: string, index: number) => {
|
||||
if (index != 0) {
|
||||
ownerName =
|
||||
ownerName + ',' + userList.value.find((user: { id: any }) => user.id == item)?.nickname
|
||||
} else {
|
||||
ownerName = userList.value.find((user: { id: any }) => user.id == item)?.nickname || ''
|
||||
}
|
||||
})
|
||||
}
|
||||
return ownerName
|
||||
}
|
||||
|
||||
/** 打开客户详情 */
|
||||
const { push } = useRouter()
|
||||
const openDetail = (id: number) => {
|
||||
push({ name: 'CrmContactDetail', params: { id } })
|
||||
}
|
||||
|
||||
// TODO @zyna：这个上级的读取，放在后端读取，更合适；因为可能数据量比较大
|
||||
const allContactList = ref([]) //所有联系人列表
|
||||
const allCustomerList = ref([]) //客户列表
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
await getList()
|
||||
userList.value = await UserApi.getSimpleUserList()
|
||||
allContactList.value = await ContactApi.simpleAlllist()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -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()
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="flex">
|
||||
<!-- 左侧：建立连接、发送消息 -->
|
||||
<el-card :gutter="12" class="w-1/2" shadow="always">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
@ -11,28 +12,38 @@
|
||||
<el-tag :color="getTagColor">{{ status }}</el-tag>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
|
||||
<div class="flex">
|
||||
<el-input v-model="server" disabled>
|
||||
<template #prepend> 服务地址</template>
|
||||
<template #prepend>服务地址</template>
|
||||
</el-input>
|
||||
<el-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggle">
|
||||
<el-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggleConnectStatus">
|
||||
{{ getIsOpen ? '关闭连接' : '开启连接' }}
|
||||
</el-button>
|
||||
</div>
|
||||
<p class="mt-4 text-lg font-medium">设置</p>
|
||||
<p class="mt-4 text-lg font-medium">消息输入框</p>
|
||||
<hr class="my-4" />
|
||||
<el-input
|
||||
v-model="sendValue"
|
||||
v-model="sendText"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
:disabled="!getIsOpen"
|
||||
clearable
|
||||
type="textarea"
|
||||
placeholder="请输入你要发送的消息"
|
||||
/>
|
||||
<el-button :disabled="!getIsOpen" block class="mt-4" type="primary" @click="handlerSend">
|
||||
<el-select v-model="sendUserId" class="mt-4" placeholder="请选择发送人">
|
||||
<el-option key="" label="所有人" value="" />
|
||||
<el-option
|
||||
v-for="user in userList"
|
||||
:key="user.id"
|
||||
:label="user.nickname"
|
||||
:value="user.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button :disabled="!getIsOpen" block class="ml-2 mt-4" type="primary" @click="handlerSend">
|
||||
发送
|
||||
</el-button>
|
||||
</el-card>
|
||||
<!-- 右侧：消息记录 -->
|
||||
<el-card :gutter="12" class="w-1/2" shadow="always">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
@ -41,13 +52,13 @@
|
||||
</template>
|
||||
<div class="max-h-80 overflow-auto">
|
||||
<ul>
|
||||
<li v-for="item in getList" :key="item.time" class="mt-2">
|
||||
<li v-for="msg in messageList.reverse()" :key="msg.time" class="mt-2">
|
||||
<div class="flex items-center">
|
||||
<span class="text-primary mr-2 font-medium">收到消息:</span>
|
||||
<span>{{ formatDate(item.time) }}</span>
|
||||
<span>{{ formatDate(msg.time) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ item.res }}
|
||||
{{ msg.text }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -57,62 +68,113 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { useWebSocket } from '@vueuse/core'
|
||||
import { getAccessToken } from '@/utils/auth'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
|
||||
defineOptions({ name: 'InfraWebSocket' })
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const sendValue = ref('')
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const server = ref(
|
||||
(import.meta.env.VITE_BASE_URL + '/websocket/message').replace('http', 'ws') +
|
||||
'?userId=' +
|
||||
userStore.getUser.id
|
||||
)
|
||||
|
||||
const state = reactive({
|
||||
recordList: [] as { id: number; time: number; res: string }[]
|
||||
})
|
||||
(import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') + '?token=' + getAccessToken()
|
||||
) // WebSocket 服务地址
|
||||
const getIsOpen = computed(() => status.value === 'OPEN') // WebSocket 连接是否打开
|
||||
const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red')) // WebSocket 连接的展示颜色
|
||||
|
||||
/** 发起 WebSocket 连接 */
|
||||
const { status, data, send, close, open } = useWebSocket(server.value, {
|
||||
autoReconnect: false,
|
||||
heartbeat: true
|
||||
})
|
||||
|
||||
/** 监听接收到的数据 */
|
||||
const messageList = ref([] as { time: number; text: string }[]) // 消息列表
|
||||
watchEffect(() => {
|
||||
if (data.value) {
|
||||
try {
|
||||
const res = JSON.parse(data.value)
|
||||
state.recordList.push(res)
|
||||
} catch (error) {
|
||||
state.recordList.push({
|
||||
res: data.value,
|
||||
id: Math.ceil(Math.random() * 1000),
|
||||
if (!data.value) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
// 1. 收到心跳
|
||||
if (data.value === 'pong') {
|
||||
// state.recordList.push({
|
||||
// text: '【心跳】',
|
||||
// time: new Date().getTime()
|
||||
// })
|
||||
return
|
||||
}
|
||||
|
||||
// 2.1 解析 type 消息类型
|
||||
const jsonMessage = JSON.parse(data.value)
|
||||
const type = jsonMessage.type
|
||||
const content = JSON.parse(jsonMessage.content)
|
||||
if (!type) {
|
||||
message.error('未知的消息类型：' + data.value)
|
||||
return
|
||||
}
|
||||
// 2.2 消息类型：demo-message-receive
|
||||
if (type === 'demo-message-receive') {
|
||||
const single = content.single
|
||||
if (single) {
|
||||
messageList.value.push({
|
||||
text: `【单发】用户编号(${content.fromUserId})：${content.text}`,
|
||||
time: new Date().getTime()
|
||||
})
|
||||
} else {
|
||||
messageList.value.push({
|
||||
text: `【群发】用户编号(${content.fromUserId})：${content.text}`,
|
||||
time: new Date().getTime()
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
// 2.3 消息类型：notice-push
|
||||
if (type === 'notice-push') {
|
||||
messageList.value.push({
|
||||
text: `【系统通知】：${content.title}`,
|
||||
time: new Date().getTime()
|
||||
})
|
||||
return
|
||||
}
|
||||
message.error('未处理消息：' + data.value)
|
||||
} catch (error) {
|
||||
message.error('处理消息发生异常：' + data.value)
|
||||
console.error(error)
|
||||
}
|
||||
})
|
||||
|
||||
const getIsOpen = computed(() => status.value === 'OPEN')
|
||||
const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red'))
|
||||
|
||||
const getList = computed(() => {
|
||||
return [...state.recordList].reverse()
|
||||
})
|
||||
|
||||
function handlerSend() {
|
||||
send(sendValue.value)
|
||||
sendValue.value = ''
|
||||
/** 发送消息 */
|
||||
const sendText = ref('') // 发送内容
|
||||
const sendUserId = ref('') // 发送人
|
||||
const handlerSend = () => {
|
||||
// 1.1 先 JSON 化 message 消息内容
|
||||
const messageContent = JSON.stringify({
|
||||
text: sendText.value,
|
||||
toUserId: sendUserId.value
|
||||
})
|
||||
// 1.2 再 JSON 化整个消息
|
||||
const jsonMessage = JSON.stringify({
|
||||
type: 'demo-message-send',
|
||||
content: messageContent
|
||||
})
|
||||
// 2. 最后发送消息
|
||||
send(jsonMessage)
|
||||
sendText.value = ''
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
/** 切换 websocket 连接状态 */
|
||||
const toggleConnectStatus = () => {
|
||||
if (getIsOpen.value) {
|
||||
close()
|
||||
} else {
|
||||
open()
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
const userList = ref<any[]>([]) // 用户列表
|
||||
onMounted(async () => {
|
||||
// 获取用户列表
|
||||
userList.value = await UserApi.getSimpleUserList()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -87,6 +87,9 @@
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
<el-button link @click="handlePush(scope.row.id)" v-hasPermi="['system:notice:update']">
|
||||
推送
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -168,6 +171,17 @@ const handleDelete = async (id: number) => {
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 推送按钮操作 */
|
||||
const handlePush = async (id: number) => {
|
||||
try {
|
||||
// 推送的二次确认
|
||||
await message.confirm('是否推送所选中通知？')
|
||||
// 发起推送
|
||||
await NoticeApi.pushNotice(id)
|
||||
message.success(t('推送成功'))
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
|
||||
Reference in New Issue
Block a user