!82 商品分类管理

Merge pull request !82 from 孔思宇/feat/mall-product-category
This commit is contained in:
芋道源码 2023-04-01 14:49:58 +00:00 committed by Gitee
commit 59c44d9819
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
4 changed files with 390 additions and 0 deletions

View File

@ -0,0 +1,60 @@
import request from '@/config/axios'
/**
*
*/
export interface CategoryVO {
/**
*
*/
id?: number
/**
*
*/
parentId?: number
/**
*
*/
name: string
/**
*
*/
picUrl: string
/**
*
*/
sort?: number
/**
*
*/
description?: string
/**
*
*/
status: number
}
// 创建商品分类
export const createCategory = (data: CategoryVO) => {
return request.post({ url: '/product/category/create', data })
}
// 更新商品分类
export const updateCategory = (data: CategoryVO) => {
return request.put({ url: '/product/category/update', data })
}
// 删除商品分类
export const deleteCategory = (id: number) => {
return request.delete({ url: `/product/category/delete?id=${id}` })
}
// 获得商品分类
export const getCategory = (id: number) => {
return request.get({ url: `/product/category/get?id=${id}` })
}
// 获得商品分类列表
export const getCategoryList = (params: any) => {
return request.get({ url: '/product/category/list', params })
}

View File

@ -0,0 +1,149 @@
<template>
<Dialog :title="modelTitle" v-model="modelVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="80px"
v-loading="formLoading"
>
<el-form-item label="上级分类" prop="parentId">
<el-tree-select
v-model="formData.parentId"
:data="parentCategoryOptions"
check-strictly
:render-after-expand="false"
placeholder="上级分类"
:props="{ label: 'name', value: 'id' }"
default-expand-all
/>
</el-form-item>
<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" :limit="1" :is-show-tip="false" />
<div v-if="formData.parentId === 0" style="font-size: 10px">推荐 200x100 图片分辨率</div>
<div v-else style="font-size: 10px">推荐 100x100 图片分辨率</div>
</el-form-item>
<el-form-item label="分类排序" prop="sort">
<el-input-number v-model="formData.sort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="开启状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="parseInt(dict.value)"
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="分类描述">
<el-input v-model="formData.description" type="textarea" placeholder="请输入分类描述" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="submitForm" type="primary" :disabled="formLoading"> </el-button>
<el-button @click="modelVisible = false"> </el-button>
</div>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import * as ProductCategoryApi from '@/api/mall/product/category'
import { handleTree } from '@/utils/tree'
const { t } = useI18n() //
const message = useMessage() //
const modelVisible = ref(false) //
const modelTitle = ref('') //
const formLoading = ref(false) // 12
const formType = ref('') // create - update -
const defaultFormData: ProductCategoryApi.CategoryVO = {
id: undefined,
name: '',
picUrl: '',
status: 0,
description: ''
}
const formData = ref({ ...defaultFormData })
const formRules = reactive({
parentId: [{ required: true, message: '请选择上级分类', trigger: 'blur' }],
name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
picUrl: [{ required: true, message: '分类图片不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '分类排序不能为空', trigger: 'blur' }],
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
})
const formRef = ref() // Ref
const list = ref([])
const parentCategoryOptions = ref<any[]>([])
/** 打开弹窗 */
const openModal = async (type: string, id?: number) => {
modelVisible.value = true
modelTitle.value = t('action.' + type)
formType.value = type
resetForm()
getList()
//
if (id) {
formLoading.value = true
try {
formData.value = await ProductCategoryApi.getCategory(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ openModal }) // openModal
//
const getList = async () => {
try {
const data = await ProductCategoryApi.getCategoryList({})
list.value = data
const tree = handleTree(data, 'id', 'parentId')
const menu = { id: 0, name: '顶级分类', children: tree }
parentCategoryOptions.value = [menu]
} finally {
}
}
/** 提交表单 */
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 ProductCategoryApi.CategoryVO
if (formType.value === 'create') {
await ProductCategoryApi.createCategory(data)
message.success(t('common.createSuccess'))
} else {
await ProductCategoryApi.updateCategory(data)
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
//
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = { ...defaultFormData }
formRef.value?.resetFields()
}
</script>

View File

@ -0,0 +1,137 @@
<template>
<content-wrap>
<!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
<el-form-item label="分类名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入分类名称"
clearable
@keyup.enter="handleQuery"
/>
</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 type="primary" @click="openModal('create')" v-hasPermi="['infra:config:create']">
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
<!-- 列表 -->
<el-table v-loading="loading" :data="list" align="center" default-expand-all row-key="id">
<el-table-column label="分类名称" prop="name" sortable />
<el-table-column label="分类图片" align="center" prop="picUrl">
<template #default="scope">
<img
v-if="scope.row.picUrl"
:src="scope.row.picUrl"
alt="分类图片"
style="height: 100px"
/>
</template>
</el-table-column>
<el-table-column label="分类排序" align="center" prop="sort" />
<el-table-column label="开启状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openModal('update', scope.row.id)"
v-hasPermi="['infra:config:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['infra:config:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</content-wrap>
<!-- 表单弹窗添加/修改 -->
<config-form ref="modalRef" @success="getList" />
</template>
<script setup lang="ts" name="Config">
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as ProductCategoryApi from '@/api/mall/product/category'
import ConfigForm from './form.vue'
import { handleTree } from '@/utils/tree'
const message = useMessage() //
const { t } = useI18n() //
const loading = ref(true) //
const list = ref<any[]>([]) //
const queryParams = reactive({
name: undefined
})
const queryFormRef = ref() //
/** 查询参数列表 */
const getList = async () => {
loading.value = true
try {
const data = await ProductCategoryApi.getCategoryList(queryParams)
list.value = handleTree(data, 'id', 'parentId')
console.info(list)
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const modalRef = ref()
const openModal = (type: string, id?: number) => {
modalRef.value.openModal(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
//
await message.delConfirm()
//
await ProductCategoryApi.deleteCategory(id)
message.success(t('common.delSuccess'))
//
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>

View File

@ -0,0 +1,44 @@
export const parseTime = (time) => {
if (!time) {
return null
}
const format = '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time
.replace(new RegExp(/-/gm), '/')
.replace('T', ' ')
.replace(new RegExp(/\.[\d]{3}/gm), '')
}
if (typeof time === 'number' && time.toString().length === 10) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}