root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增：产品详情页面

Browse Source
This commit is contained in:
anhaohao 2024-01-11 17:51:45 +08:00
parent a5d6d18b6a
commit 4f89eb6ba9
8 changed files with 253 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/crm/product/index.ts
View File

@ -41,3 +41,8 @@ export const deleteProduct = async (id: number) => {
export const exportProduct = async (params) => {
return await request.download({url: `/crm/product/export-excel`, params})
}
// 查询产品操作日志
export const getOperateLogPage = async (params: any) => {
return await request.get({url: '/crm/product/operate-log-page', params})
}

10
src/router/modules/remaining.ts
View File

@ -517,6 +517,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
hidden: true
},
component: () => import('@/views/crm/contact/detail/index.vue')
},
{
path: 'product/detail/:id',
name: 'CrmProductDetail',
meta: {
title: '产品详情',
noCache: true,
hidden: true
},
component: () => import('@/views/crm/product/detail/index.vue')
}
]
}

71
src/views/crm/product/ProductDetail.vue
View File

@ -1,71 +0,0 @@
<template>
<Dialog v-model="dialogVisible" :max-height="500" :scroll="true" title="产品详情">
<el-descriptions :column="1" border>
<el-descriptions-item label="产品名称">
{{ detailData.name }}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ formatDate(detailData.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="状态">
<dict-tag :type="DICT_TYPE.CRM_PRODUCT_STATUS" :value="detailData.status" />
</el-descriptions-item>
<el-descriptions-item label="产品分类">
{{ productCategoryList?.find((c) => c.id === detailData.categoryId)?.name }}
</el-descriptions-item>
<el-descriptions-item label="产品编码">
{{ detailData.no }}
</el-descriptions-item>
<el-descriptions-item label="产品描述">
{{ detailData.description }}
</el-descriptions-item>
<el-descriptions-item label="负责人">
{{ detailData.ownerUserId }}
</el-descriptions-item>
<el-descriptions-item label="单位">
<dict-tag :type="DICT_TYPE.PRODUCT_UNIT" :value="detailData.unit" />
</el-descriptions-item>
<el-descriptions-item label="价格">
{{ fenToYuan(detailData.price) }}元
</el-descriptions-item>
</el-descriptions>
</Dialog>
</template>
<script setup lang="ts">
// TODO 芋艿：统一改成，独立 tab
import { DICT_TYPE } from '@/utils/dict'
import * as ProductCategoryApi from '@/api/crm/product/productCategory'
import * as ProductApi from '@/api/crm/product'
import { formatDate } from '@/utils/formatTime'
import { fenToYuan } from '@/utils'
import { getSimpleUserList, UserVO } from '@/api/system/user'
defineOptions({ name: 'CrmProductDetail' })
const { t } = useI18n() // 国际化
const dialogVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false) // 表单的加载中
const detailData = ref() // 详情数据
/** 打开弹窗 */
const open = async (data: ProductApi.ProductVO) => {
dialogVisible.value = true
// 设置数据
detailLoading.value = true
try {
detailData.value = data
} finally {
detailLoading.value = false
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const productCategoryList = ref([]) // 产品分类树
const userList = ref<UserVO[]>([]) // 系统用户
onMounted(async () => {
productCategoryList.value = await ProductCategoryApi.getProductCategoryList({})
userList.value = await getSimpleUserList()
})
</script>

2
src/views/crm/product/ProductForm.vue
View File

@ -149,7 +149,7 @@ const open = async (type: string, id?: number) => {
formLoading.value = true
try {
formData.value = await ProductApi.getProduct(id)
formData.value.price = fenToYuan(formData.value.price)
formData.value.price = Number(fenToYuan(formData.value.price))
} finally {
formLoading.value = false
}

56
src/views/crm/product/detail/ProductDetailsHeader.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<div>
<div class="flex items-start justify-between">
<div>
<el-col>
<el-row>
<span class="text-xl font-bold">{{ product.name }}</span>
</el-row>
</el-col>
</div>
<div>
<!-- 右上：按钮 -->
<el-button @click="openForm('update', product.id)" v-hasPermi="['crm:product:update']">
编辑
</el-button>
</div>
</div>
</div>
<ContentWrap class="mt-10px">
<el-descriptions :column="5" direction="vertical">
<el-descriptions-item label="产品类别">
{{ productCategoryList?.find((c) => c.id === product.categoryId)?.name }}
</el-descriptions-item>
<el-descriptions-item label="产品单位">
<dict-tag :type="DICT_TYPE.PRODUCT_UNIT" :value="product.unit"/>
</el-descriptions-item>
<el-descriptions-item label="产品价格">{{ fenToYuan(product.price) }}元</el-descriptions-item>
<el-descriptions-item label="产品编码">{{ product.no }}</el-descriptions-item>
</el-descriptions>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<ProductForm ref="formRef" @success="emit('refresh')"/>
</template>
<script setup lang="ts">
import ProductForm from '@/views/crm/product/ProductForm.vue'
import {DICT_TYPE} from "@/utils/dict";
import {fenToYuan} from "@/utils";
import * as ProductApi from "@/api/crm/product";
import * as ProductCategoryApi from '@/api/crm/product/productCategory'
//操作修改
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
const {product} = defineProps<{ product: ProductApi.ProductVO }>()
const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
/** 初始化 */
const productCategoryList = ref([]) // 产品分类树
onMounted(async () => {
productCategoryList.value = await ProductCategoryApi.getProductCategoryList({})
})
</script>

45
src/views/crm/product/detail/ProductDetailsInfo.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<ContentWrap>
<el-collapse v-model="activeNames">
<el-collapse-item name="basicInfo">
<template #title>
<span class="text-base font-bold">基本信息</span>
</template>
<el-descriptions :column="4">
<el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
<el-descriptions-item label="产品编码">{{ product.no }}</el-descriptions-item>
<el-descriptions-item label="价格">{{ fenToYuan(product.price) }}元</el-descriptions-item>
<el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
<el-descriptions-item label="产品类型">
{{ productCategoryList?.find((c) => c.id === product.categoryId)?.name }}
</el-descriptions-item>
<el-descriptions-item label="是否上下架">
<dict-tag :type="DICT_TYPE.CRM_PRODUCT_STATUS" :value="product.status"/>
</el-descriptions-item>
<el-descriptions-item label="单位">
<dict-tag :type="DICT_TYPE.PRODUCT_UNIT" :value="product.unit"/>
</el-descriptions-item>
</el-descriptions>
</el-collapse-item>
</el-collapse>
</ContentWrap>
</template>
<script setup lang="ts">
import {DICT_TYPE} from '@/utils/dict'
import * as ProductApi from '@/api/crm/product'
import {fenToYuan} from '@/utils'
import * as ProductCategoryApi from '@/api/crm/product/productCategory'
const {product} = defineProps<{
product: ProductApi.ProductVO
}>()
// 展示的折叠面板
const activeNames = ref(['basicInfo'])
/** 初始化 */
const productCategoryList = ref([]) // 产品分类树
onMounted(async () => {
productCategoryList.value = await ProductCategoryApi.getProductCategoryList({})
})
</script>

64
src/views/crm/product/detail/index.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<ProductDetailsHeader :product="product" :loading="loading" @refresh="getProductData(id)"/>
<el-col>
<el-tabs>
<el-tab-pane label="详细资料">
<ProductDetailsInfo :product="product"/>
</el-tab-pane>
<el-tab-pane label="操作日志">
<OperateLogV2 :log-list="logList"/>
</el-tab-pane>
</el-tabs>
</el-col>
</template>
<script setup lang="ts">
import {useTagsViewStore} from '@/store/modules/tagsView'
import {OperateLogV2VO} from '@/api/system/operatelog'
import * as ProductApi from '@/api/crm/product'
import ProductDetailsHeader from '@/views/crm/product/detail/ProductDetailsHeader.vue'
import ProductDetailsInfo from '@/views/crm/product/detail/ProductDetailsInfo.vue'
defineOptions({name: 'CrmProductDetail'})
const route = useRoute()
const id = Number(route.params.id) // 编号
const loading = ref(true) // 加载中
const product = ref<ProductApi.ProductVO>({} as ProductApi.ProductVO) // 详情
/** 获取详情 */
const getProductData = async (id: number) => {
loading.value = true
try {
product.value = await ProductApi.getProduct(id)
await getOperateLog(id)
} finally {
loading.value = false
}
}
/**
* 获取操作日志
*/
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
const getOperateLog = async (productId: number) => {
if (!productId) {
return
}
const data = await ProductApi.getOperateLogPage({
bizId: productId
})
logList.value = data.list
}
/** 初始化 */
const {delView} = useTagsViewStore() // 视图操作
const {currentRoute} = useRouter() // 路由
onMounted(async () => {
if (!id) {
ElMessage.warning('参数错误，产品不能为空！')
delView(unref(currentRoute))
return
}
await getProductData(id)
})
</script>

59
src/views/crm/product/index.vue
View File

@ -28,10 +28,17 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px"/>
搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px"/>
重置
</el-button>
<el-button type="primary" @click="openForm('create')" v-hasPermi="['crm:product:create']">
<Icon icon="ep:plus" class="mr-5px" /> 新增
<Icon icon="ep:plus" class="mr-5px"/>
新增
</el-button>
<el-button
type="success"
@ -40,7 +47,8 @@
:loading="exportLoading"
v-hasPermi="['crm:product:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
<Icon icon="ep:download" class="mr-5px"/>
导出
</el-button>
</el-form-item>
</el-form>
@ -49,8 +57,14 @@
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="产品名称" align="center" prop="name" />
<el-table-column label="产品类型" align="center" prop="categoryName" />
<el-table-column label="产品名称" align="center" prop="name" width="160">
<template #default="scope">
<el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
{{ scope.row.name }}
</el-link>
</template>
</el-table-column>
<el-table-column label="产品类型" align="center" prop="categoryName" width="160"/>
<el-table-column label="产品单位" align="center" prop="unit">
<template #default="scope">
<dict-tag :type="DICT_TYPE.PRODUCT_UNIT" :value="scope.row.unit"/>
@ -85,16 +99,8 @@
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center" width="160">
<el-table-column label="操作" align="center" fixed="right" width="160">
<template #default="scope">
<el-button
v-hasPermi="['crm:product:query']"
link
type="primary"
@click="openDetail(scope.row)"
>
详情
</el-button>
<el-button
link
type="primary"
@ -125,8 +131,6 @@
<!-- 表单弹窗：添加/修改 -->
<ProductForm ref="formRef" @success="getList"/>
<!-- 表单弹窗：详情 -->
<ProductDetail ref="detailRef" @success="getList" />
</template>
<script setup lang="ts">
@ -135,7 +139,6 @@ import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as ProductApi from '@/api/crm/product'
import ProductForm from './ProductForm.vue'
import ProductDetail from './ProductDetail.vue'
import {fenToYuanFormat} from '@/utils/formatter'
defineOptions({name: 'CrmProduct'})
@ -184,10 +187,11 @@ const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 详情操作 */
const detailRef = ref()
const openDetail = (data: ProductApi.ProductVO) => {
detailRef.value.open(data)
/** 打开详情 */
const {currentRoute, push} = useRouter()
const openDetail = (id: number) => {
push({name: 'CrmProductDetail', params: {id}})
}
/** 删除按钮操作 */
@ -200,7 +204,8 @@ const handleDelete = async (id: number) => {
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
} catch {
}
}
/** 导出按钮操作 */
@ -218,6 +223,14 @@ const handleExport = async () => {
}
}
/** 监听路由变化更新列表 */
watch(
() => currentRoute.value,
() => {
getList()
}
)
/** 初始化 **/
onMounted(async () => {
await getList()