diff --git a/src/api/mall/product/spu.ts b/src/api/mall/product/spu.ts index c78bef47..5cc4d8fe 100644 --- a/src/api/mall/product/spu.ts +++ b/src/api/mall/product/spu.ts @@ -104,5 +104,5 @@ export const exportSpu = async (params) => { // 获得商品 SPU 精简列表 export const getSpuSimpleList = async () => { - return request.get({ url: '/product/spu/get-simple-list' }) + return request.get({ url: '/product/spu/list-all-simple' }) } diff --git a/src/api/mall/promotion/article/index.ts b/src/api/mall/promotion/article/index.ts new file mode 100644 index 00000000..c2941d05 --- /dev/null +++ b/src/api/mall/promotion/article/index.ts @@ -0,0 +1,47 @@ +import request from '@/config/axios' + +export interface ArticleVO { + id: number + categoryId: number + title: string + author: string + picUrl: string + introduction: string + browseCount: string + sort: number + status: number + spuId: number + recommendHot: boolean + recommendBanner: boolean + content: string +} + +// 查询文章管理列表 +export const getArticlePage = async (params) => { + return await request.get({ url: `/promotion/article/page`, params }) +} + +// 查询文章管理详情 +export const getArticle = async (id: number) => { + return await request.get({ url: `/promotion/article/get?id=` + id }) +} + +// 新增文章管理 +export const createArticle = async (data: ArticleVO) => { + return await request.post({ url: `/promotion/article/create`, data }) +} + +// 修改文章管理 +export const updateArticle = async (data: ArticleVO) => { + return await request.put({ url: `/promotion/article/update`, data }) +} + +// 删除文章管理 +export const deleteArticle = async (id: number) => { + return await request.delete({ url: `/promotion/article/delete?id=` + id }) +} + +// 导出文章管理 Excel +export const exportArticle = async (params) => { + return await request.download({ url: `/promotion/article/export-excel`, params }) +} diff --git a/src/api/mall/promotion/articleCategory/index.ts b/src/api/mall/promotion/articleCategory/index.ts new file mode 100644 index 00000000..2950d759 --- /dev/null +++ b/src/api/mall/promotion/articleCategory/index.ts @@ -0,0 +1,44 @@ +import request from '@/config/axios' + +export interface ArticleCategoryVO { + id: number + name: string + picUrl: string + status: number + sort: number +} + +// 查询文章分类列表 +export const getArticleCategoryPage = async (params) => { + return await request.get({ url: `/promotion/article-category/page`, params }) +} + +// 查询文章分类精简信息列表 +export const getSimpleArticleCategoryList = async () => { + return await request.get({ url: `/promotion/article-category/list-all-simple` }) +} + +// 查询文章分类详情 +export const getArticleCategory = async (id: number) => { + return await request.get({ url: `/promotion/article-category/get?id=` + id }) +} + +// 新增文章分类 +export const createArticleCategory = async (data: ArticleCategoryVO) => { + return await request.post({ url: `/promotion/article-category/create`, data }) +} + +// 修改文章分类 +export const updateArticleCategory = async (data: ArticleCategoryVO) => { + return await request.put({ url: `/promotion/article-category/update`, data }) +} + +// 删除文章分类 +export const deleteArticleCategory = async (id: number) => { + return await request.delete({ url: `/promotion/article-category/delete?id=` + id }) +} + +// 导出文章分类 Excel +export const exportArticleCategory = async (params) => { + return await request.download({ url: `/promotion/article-category/export-excel`, params }) +} diff --git a/src/views/mall/promotion/article/ArticleForm.vue b/src/views/mall/promotion/article/ArticleForm.vue new file mode 100644 index 00000000..36fc1340 --- /dev/null +++ b/src/views/mall/promotion/article/ArticleForm.vue @@ -0,0 +1,236 @@ +<template> + <Dialog v-model="dialogVisible" :title="dialogTitle" width="70%"> + <el-form + ref="formRef" + v-loading="formLoading" + :model="formData" + :rules="formRules" + label-width="110px" + > + <el-row> + <el-col :span="12"> + <el-form-item label="文章分类" prop="categoryId"> + <el-select v-model="formData.categoryId" placeholder="请选择"> + <el-option + v-for="item in categoryList" + :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="title"> + <el-input v-model="formData.title" placeholder="请输入文章标题" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="文章作者" prop="author"> + <el-input v-model="formData.author" placeholder="请输入文章作者" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="文章简介" prop="introduction"> + <el-input v-model="formData.introduction" placeholder="请输入文章简介" /> + </el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="文章封面" prop="picUrl"> + <UploadImg v-model="formData.picUrl" height="80px" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="浏览次数" prop="browseCount"> + <el-input-number + v-model="formData.browseCount" + :min="0" + clearable + controls-position="right" + /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="排序" prop="sort"> + <el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="状态" prop="status"> + <el-radio-group v-model="formData.status"> + <el-radio + v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" + :key="dict.value" + :label="dict.value" + > + {{ dict.label }} + </el-radio> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="商品关联" prop="spuId"> + <el-select v-model="formData.spuId" placeholder="请选择"> + <el-option + v-for="item in spuList" + :key="item.id" + :label="item.name" + :value="item.id" + /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="是否热门" prop="recommendHot"> + <el-radio-group v-model="formData.recommendHot"> + <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-col :span="12"> + <el-form-item label="是否轮播图" prop="recommendBanner"> + <el-radio-group v-model="formData.recommendBanner"> + <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-col :span="24"> + <el-form-item label="文章内容"> + <Editor v-model="formData.content" height="150px" /> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> + <el-button @click="dialogVisible = false">取 消</el-button> + </template> + </Dialog> +</template> +<script lang="ts" setup> +import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict' +import * as ArticleApi from '@/api/mall/promotion/article' +import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory' +import * as ProductSpuApi from '@/api/mall/product/spu' + +defineOptions({ name: 'PromotionArticleForm' }) + +const { t } = useI18n() // 国际化 +const message = useMessage() // 消息弹窗 + +const dialogVisible = ref(false) // 弹窗的是否展示 +const dialogTitle = ref('') // 弹窗的标题 +const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用 +const formType = ref('') // 表单的类型:create - 新增;update - 修改 +const formData = ref({ + id: undefined, + categoryId: undefined, + title: undefined, + author: undefined, + picUrl: undefined, + introduction: undefined, + browseCount: 0, + sort: 0, + status: 0, + spuId: undefined, + recommendHot: false, + recommendBanner: false, + content: undefined +}) +const formRules = reactive({ + categoryId: [{ required: true, message: '分类id不能为空', trigger: 'blur' }], + title: [{ required: true, message: '文章标题不能为空', trigger: 'blur' }], + picUrl: [{ required: true, message: '文章封面图片地址不能为空', trigger: 'blur' }], + sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }], + status: [{ required: true, message: '状态不能为空', trigger: 'blur' }], + spuId: [{ required: true, message: '商品关联id不能为空', trigger: 'blur' }], + recommendHot: [{ required: true, message: '是否热门(小程序)不能为空', trigger: 'blur' }], + recommendBanner: [{ required: true, message: '是否轮播图(小程序)不能为空', trigger: 'blur' }], + content: [{ required: true, message: '文章内容不能为空', trigger: 'blur' }] +}) +const formRef = ref() // 表单 Ref + +/** 打开弹窗 */ +const open = async (type: string, id?: number) => { + dialogVisible.value = true + dialogTitle.value = t('action.' + type) + formType.value = type + resetForm() + // 修改时,设置数据 + if (id) { + formLoading.value = true + try { + formData.value = await ArticleApi.getArticle(id) + } finally { + formLoading.value = false + } + } +} +defineExpose({ open }) // 提供 open 方法,用于打开弹窗 + +/** 提交表单 */ +const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调 +const submitForm = async () => { + // 校验表单 + if (!formRef) return + const valid = await formRef.value.validate() + if (!valid) return + // 提交请求 + formLoading.value = true + try { + const data = formData.value as unknown as ArticleApi.ArticleVO + if (formType.value === 'create') { + await ArticleApi.createArticle(data) + message.success(t('common.createSuccess')) + } else { + await ArticleApi.updateArticle(data) + message.success(t('common.updateSuccess')) + } + dialogVisible.value = false + // 发送操作成功的事件 + emit('success') + } finally { + formLoading.value = false + } +} + +/** 重置表单 */ +const resetForm = () => { + formData.value = { + id: undefined, + categoryId: undefined, + title: undefined, + author: undefined, + picUrl: undefined, + introduction: undefined, + browseCount: 0, + sort: 0, + status: 0, + spuId: undefined, + recommendHot: false, + recommendBanner: false, + content: undefined + } + formRef.value?.resetFields() +} + +const categoryList = ref<ArticleCategoryApi.ArticleCategoryVO[]>([]) +const spuList = ref<ProductSpuApi.Spu[]>([]) +onMounted(async () => { + categoryList.value = + (await ArticleCategoryApi.getSimpleArticleCategoryList()) as ArticleCategoryApi.ArticleCategoryVO[] + spuList.value = (await ProductSpuApi.getSpuSimpleList()) as ProductSpuApi.Spu[] +}) +</script> diff --git a/src/views/mall/promotion/article/category/ArticleCategoryForm.vue b/src/views/mall/promotion/article/category/ArticleCategoryForm.vue new file mode 100644 index 00000000..39b1fc0f --- /dev/null +++ b/src/views/mall/promotion/article/category/ArticleCategoryForm.vue @@ -0,0 +1,119 @@ +<template> + <Dialog v-model="dialogVisible" :title="dialogTitle"> + <el-form + ref="formRef" + v-loading="formLoading" + :model="formData" + :rules="formRules" + label-width="100px" + > + <el-form-item label="分类名称" prop="name"> + <el-input v-model="formData.name" placeholder="请输入分类名称" /> + </el-form-item> + <el-form-item label="图标地址" prop="picUrl"> + <UploadImg v-model="formData.picUrl" height="80px" /> + </el-form-item> + <el-form-item label="状态" prop="status"> + <el-radio-group v-model="formData.status"> + <el-radio + v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" + :key="dict.value" + :label="dict.value" + > + {{ dict.label }} + </el-radio> + </el-radio-group> + </el-form-item> + <el-form-item label="排序" prop="sort"> + <el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" /> + </el-form-item> + </el-form> + <template #footer> + <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> + <el-button @click="dialogVisible = false">取 消</el-button> + </template> + </Dialog> +</template> +<script lang="ts" setup> +import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' +import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory' + +defineOptions({ name: 'PromotionArticleCategoryForm' }) + +const { t } = useI18n() // 国际化 +const message = useMessage() // 消息弹窗 + +const dialogVisible = ref(false) // 弹窗的是否展示 +const dialogTitle = ref('') // 弹窗的标题 +const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用 +const formType = ref('') // 表单的类型:create - 新增;update - 修改 +const formData = ref({ + id: undefined, + name: undefined, + picUrl: undefined, + status: undefined, + sort: undefined +}) +const formRules = reactive({ + name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }], + status: [{ required: true, message: '状态不能为空', trigger: 'blur' }], + sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }] +}) +const formRef = ref() // 表单 Ref + +/** 打开弹窗 */ +const open = async (type: string, id?: number) => { + dialogVisible.value = true + dialogTitle.value = t('action.' + type) + formType.value = type + resetForm() + // 修改时,设置数据 + if (id) { + formLoading.value = true + try { + formData.value = await ArticleCategoryApi.getArticleCategory(id) + } finally { + formLoading.value = false + } + } +} +defineExpose({ open }) // 提供 open 方法,用于打开弹窗 + +/** 提交表单 */ +const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调 +const submitForm = async () => { + // 校验表单 + if (!formRef) return + const valid = await formRef.value.validate() + if (!valid) return + // 提交请求 + formLoading.value = true + try { + const data = formData.value as unknown as ArticleCategoryApi.ArticleCategoryVO + if (formType.value === 'create') { + await ArticleCategoryApi.createArticleCategory(data) + message.success(t('common.createSuccess')) + } else { + await ArticleCategoryApi.updateArticleCategory(data) + message.success(t('common.updateSuccess')) + } + dialogVisible.value = false + // 发送操作成功的事件 + emit('success') + } finally { + formLoading.value = false + } +} + +/** 重置表单 */ +const resetForm = () => { + formData.value = { + id: undefined, + name: undefined, + picUrl: undefined, + status: undefined, + sort: undefined + } + formRef.value?.resetFields() +} +</script> diff --git a/src/views/mall/promotion/article/category/index.vue b/src/views/mall/promotion/article/category/index.vue new file mode 100644 index 00000000..32d385c3 --- /dev/null +++ b/src/views/mall/promotion/article/category/index.vue @@ -0,0 +1,225 @@ +<template> + <ContentWrap> + <!-- 搜索工作栏 --> + <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" + clearable + placeholder="请输入分类名称" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="状态" prop="status"> + <el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="请选择状态"> + <el-option + v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" + :key="dict.value" + :label="dict.label" + :value="dict.value" + /> + </el-select> + </el-form-item> + <el-form-item label="创建时间" prop="createTime"> + <el-date-picker + v-model="queryParams.createTime" + :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" + class="!w-240px" + end-placeholder="结束日期" + start-placeholder="开始日期" + type="daterange" + value-format="YYYY-MM-DD HH:mm:ss" + /> + </el-form-item> + <el-form-item> + <el-button @click="handleQuery"> + <Icon class="mr-5px" icon="ep:search" /> + 搜索 + </el-button> + <el-button @click="resetQuery"> + <Icon class="mr-5px" icon="ep:refresh" /> + 重置 + </el-button> + <el-button + v-hasPermi="['promotion:article-category:create']" + plain + type="primary" + @click="openForm('create')" + > + <Icon class="mr-5px" icon="ep:plus" /> + 新增 + </el-button> + <el-button + v-hasPermi="['promotion:article-category:export']" + :loading="exportLoading" + plain + type="success" + @click="handleExport" + > + <Icon class="mr-5px" icon="ep:download" /> + 导出 + </el-button> + </el-form-item> + </el-form> + </ContentWrap> + + <!-- 列表 --> + <ContentWrap> + <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true"> + <el-table-column align="center" label="编号" prop="id" /> + <el-table-column align="center" label="分类名称" prop="name" /> + <el-table-column label="分类图图" min-width="80"> + <template #default="{ row }"> + <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" /> + </template> + </el-table-column> + <el-table-column align="center" label="状态" prop="status"> + <template #default="scope"> + <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" /> + </template> + </el-table-column> + <el-table-column align="center" label="排序" prop="sort" /> + <el-table-column + :formatter="dateFormatter" + align="center" + label="创建时间" + prop="createTime" + width="180px" + /> + <el-table-column align="center" label="操作"> + <template #default="scope"> + <el-button + v-hasPermi="['promotion:article-category:update']" + link + type="primary" + @click="openForm('update', scope.row.id)" + > + 编辑 + </el-button> + <el-button + v-hasPermi="['promotion:article-category:delete']" + link + type="danger" + @click="handleDelete(scope.row.id)" + > + 删除 + </el-button> + </template> + </el-table-column> + </el-table> + <!-- 分页 --> + <Pagination + v-model:limit="queryParams.pageSize" + v-model:page="queryParams.pageNo" + :total="total" + @pagination="getList" + /> + </ContentWrap> + + <!-- 表单弹窗:添加/修改 --> + <ArticleCategoryForm ref="formRef" @success="getList" /> +</template> + +<script lang="ts" setup> +import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' +import { dateFormatter } from '@/utils/formatTime' +import download from '@/utils/download' +import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory' +import ArticleCategoryForm from './ArticleCategoryForm.vue' +import { createImageViewer } from '@/components/ImageViewer' + +defineOptions({ name: 'PromotionArticleCategory' }) + +const message = useMessage() // 消息弹窗 +const { t } = useI18n() // 国际化 + +const loading = ref(true) // 列表的加载中 +const total = ref(0) // 列表的总页数 +const list = ref([]) // 列表的数据 +const queryParams = reactive({ + pageNo: 1, + pageSize: 10, + name: null, + status: null, + createTime: [] +}) +const queryFormRef = ref() // 搜索的表单 +const exportLoading = ref(false) // 导出的加载中 + +/** 分类图预览 */ +const imagePreview = (imgUrl: string) => { + createImageViewer({ + urlList: [imgUrl] + }) +} + +/** 查询列表 */ +const getList = async () => { + loading.value = true + try { + const data = await ArticleCategoryApi.getArticleCategoryPage(queryParams) + list.value = data.list + total.value = data.total + } finally { + loading.value = false + } +} + +/** 搜索按钮操作 */ +const handleQuery = () => { + queryParams.pageNo = 1 + getList() +} + +/** 重置按钮操作 */ +const resetQuery = () => { + queryFormRef.value.resetFields() + handleQuery() +} + +/** 添加/修改操作 */ +const formRef = ref() +const openForm = (type: string, id?: number) => { + formRef.value.open(type, id) +} + +/** 删除按钮操作 */ +const handleDelete = async (id: number) => { + try { + // 删除的二次确认 + await message.delConfirm() + // 发起删除 + await ArticleCategoryApi.deleteArticleCategory(id) + message.success(t('common.delSuccess')) + // 刷新列表 + await getList() + } catch {} +} + +/** 导出按钮操作 */ +const handleExport = async () => { + try { + // 导出的二次确认 + await message.exportConfirm() + // 发起导出 + exportLoading.value = true + const data = await ArticleCategoryApi.exportArticleCategory(queryParams) + download.excel(data, '分类.xls') + } catch { + } finally { + exportLoading.value = false + } +} + +/** 初始化 **/ +onMounted(() => { + getList() +}) +</script> diff --git a/src/views/mall/promotion/article/index.vue b/src/views/mall/promotion/article/index.vue new file mode 100644 index 00000000..7f5f4b70 --- /dev/null +++ b/src/views/mall/promotion/article/index.vue @@ -0,0 +1,321 @@ +<template> + <ContentWrap> + <!-- 搜索工作栏 --> + <el-form + ref="queryFormRef" + :inline="true" + :model="queryParams" + class="-mb-15px" + label-width="80px" + > + <el-form-item label="文章分类" prop="categoryId"> + <el-select + v-model="queryParams.categoryId" + class="!w-240px" + placeholder="全部" + @keyup.enter="handleQuery" + > + <el-option + v-for="item in categoryList" + :key="item.id" + :label="item.name" + :value="item.id" + /> + </el-select> + </el-form-item> + <el-form-item label="文章标题" prop="title"> + <el-input + v-model="queryParams.title" + class="!w-240px" + clearable + placeholder="请输入文章标题" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="文章作者" prop="author"> + <el-input + v-model="queryParams.author" + class="!w-240px" + clearable + placeholder="请输入文章作者" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="状态" prop="status"> + <el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="请选择状态"> + <el-option + v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" + :key="dict.value" + :label="dict.label" + :value="dict.value" + /> + </el-select> + </el-form-item> + <el-form-item label="关联商品" prop="spuId"> + <el-select + v-model="queryParams.spuId" + class="!w-240px" + placeholder="全部" + @keyup.enter="handleQuery" + > + <el-option v-for="item in spuList" :key="item.id" :label="item.name" :value="item.id" /> + </el-select> + </el-form-item> + <el-form-item label="热门" prop="recommendHot"> + <el-select v-model="queryParams.recommendHot" class="!w-240px" clearable placeholder="全部"> + <el-option + v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" + :key="dict.value" + :label="dict.label" + :value="dict.value" + /> + </el-select> + </el-form-item> + <el-form-item label="轮播图" prop="recommendBanner"> + <el-select + v-model="queryParams.recommendBanner" + class="!w-240px" + clearable + placeholder="全部" + > + <el-option + v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" + :key="dict.value" + :label="dict.label" + :value="dict.value" + /> + </el-select> + </el-form-item> + <el-form-item label="创建时间" prop="createTime"> + <el-date-picker + v-model="queryParams.createTime" + :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" + class="!w-240px" + end-placeholder="结束日期" + start-placeholder="开始日期" + type="daterange" + value-format="YYYY-MM-DD HH:mm:ss" + /> + </el-form-item> + <el-form-item> + <el-button @click="handleQuery"> + <Icon class="mr-5px" icon="ep:search" /> + 搜索 + </el-button> + <el-button @click="resetQuery"> + <Icon class="mr-5px" icon="ep:refresh" /> + 重置 + </el-button> + <el-button + v-hasPermi="['promotion:article:create']" + plain + type="primary" + @click="openForm('create')" + > + <Icon class="mr-5px" icon="ep:plus" /> + 新增 + </el-button> + <el-button + v-hasPermi="['promotion:article:export']" + :loading="exportLoading" + plain + type="success" + @click="handleExport" + > + <Icon class="mr-5px" icon="ep:download" /> + 导出 + </el-button> + </el-form-item> + </el-form> + </ContentWrap> + + <!-- 列表 --> + <ContentWrap> + <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true"> + <el-table-column align="center" label="文章分类" prop="categoryId"> + <template #default="scope"> + {{ categoryList.find((item) => item.id === scope.row.categoryId)?.name }} + </template> + </el-table-column> + <el-table-column align="center" label="关联商品" prop="spuId" width="300"> + <template #default="scope"> + <el-image + :preview-src-list="[spuList.find((item) => item.id === scope.row.spuId)?.picUrl]" + :src="spuList.find((item) => item.id === scope.row.spuId)?.picUrl" + class="mr-[10px] h-40px w-40px v-middle" + preview-teleported + /> + {{ spuList.find((item) => item.id === scope.row.spuId)?.name }} + </template> + </el-table-column> + <el-table-column align="center" label="文章标题" prop="title" /> + <el-table-column align="center" label="文章作者" prop="author" /> + <el-table-column align="center" label="文章封面" prop="picUrl"> + <template #default="{ row }"> + <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" /> + </template> + </el-table-column> + <el-table-column align="center" label="文章简介" prop="introduction" /> + <el-table-column align="center" label="浏览次数" prop="browseCount" /> + <el-table-column align="center" label="排序" prop="sort" /> + <el-table-column align="center" label="状态" prop="status"> + <template #default="scope"> + <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" /> + </template> + </el-table-column> + <el-table-column align="center" label="热门" prop="recommendHot"> + <template #default="scope"> + <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.recommendHot" /> + </template> + </el-table-column> + <el-table-column align="center" label="轮播图" prop="recommendBanner"> + <template #default="scope"> + <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.recommendBanner" /> + </template> + </el-table-column> + <el-table-column + :formatter="dateFormatter" + align="center" + label="创建时间" + prop="createTime" + width="180px" + /> + <el-table-column align="center" fixed="right" label="操作" width="120"> + <template #default="scope"> + <el-button + v-hasPermi="['promotion:article:update']" + link + type="primary" + @click="openForm('update', scope.row.id)" + > + 编辑 + </el-button> + <el-button + v-hasPermi="['promotion:article:delete']" + link + type="danger" + @click="handleDelete(scope.row.id)" + > + 删除 + </el-button> + </template> + </el-table-column> + </el-table> + <!-- 分页 --> + <Pagination + v-model:limit="queryParams.pageSize" + v-model:page="queryParams.pageNo" + :total="total" + @pagination="getList" + /> + </ContentWrap> + + <!-- 表单弹窗:添加/修改 --> + <ArticleForm ref="formRef" @success="getList" /> +</template> + +<script lang="ts" setup> +import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict' +import { dateFormatter } from '@/utils/formatTime' +import download from '@/utils/download' +import * as ArticleApi from '@/api/mall/promotion/article' +import ArticleForm from './ArticleForm.vue' +import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory' +import * as ProductSpuApi from '@/api/mall/product/spu' +import { createImageViewer } from '@/components/ImageViewer' + +defineOptions({ name: 'PromotionArticle' }) + +const message = useMessage() // 消息弹窗 +const { t } = useI18n() // 国际化 + +const loading = ref(true) // 列表的加载中 +const total = ref(0) // 列表的总页数 +const list = ref([]) // 列表的数据 +const queryParams = reactive({ + pageNo: 1, + pageSize: 10, + categoryId: undefined, + spuId: undefined, + title: null, + author: null, + status: undefined, + recommendHot: undefined, + recommendBanner: undefined, + createTime: [] +}) +const queryFormRef = ref() // 搜索的表单 +const exportLoading = ref(false) // 导出的加载中 +/** 文章封面预览 */ +const imagePreview = (imgUrl: string) => { + createImageViewer({ + urlList: [imgUrl] + }) +} +/** 查询列表 */ +const getList = async () => { + loading.value = true + try { + const data = await ArticleApi.getArticlePage(queryParams) + list.value = data.list + total.value = data.total + } finally { + loading.value = false + } +} + +/** 搜索按钮操作 */ +const handleQuery = () => { + queryParams.pageNo = 1 + getList() +} + +/** 重置按钮操作 */ +const resetQuery = () => { + queryFormRef.value.resetFields() + handleQuery() +} + +/** 添加/修改操作 */ +const formRef = ref() +const openForm = (type: string, id?: number) => { + formRef.value.open(type, id) +} + +/** 删除按钮操作 */ +const handleDelete = async (id: number) => { + try { + // 删除的二次确认 + await message.delConfirm() + // 发起删除 + await ArticleApi.deleteArticle(id) + message.success(t('common.delSuccess')) + // 刷新列表 + await getList() + } catch {} +} + +/** 导出按钮操作 */ +const handleExport = async () => { + try { + // 导出的二次确认 + await message.exportConfirm() + // 发起导出 + exportLoading.value = true + const data = await ArticleApi.exportArticle(queryParams) + download.excel(data, '文章管理.xls') + } catch { + } finally { + exportLoading.value = false + } +} + +const categoryList = ref<ArticleCategoryApi.ArticleCategoryVO[]>([]) +const spuList = ref<ProductSpuApi.Spu[]>([]) +onMounted(async () => { + await getList() + categoryList.value = + (await ArticleCategoryApi.getSimpleArticleCategoryList()) as ArticleCategoryApi.ArticleCategoryVO[] + spuList.value = (await ProductSpuApi.getSpuSimpleList()) as ProductSpuApi.Spu[] +}) +</script>