parent
464fe953ad
commit
6e604f9e07
@ -37,58 +37,38 @@ const include = [
|
||||
'element-plus/es',
|
||||
'element-plus/es/locale/lang/zh-cn',
|
||||
'element-plus/es/locale/lang/en',
|
||||
'element-plus/es/components/backtop/style/css',
|
||||
'element-plus/es/components/form/style/css',
|
||||
'element-plus/es/components/radio-group/style/css',
|
||||
'element-plus/es/components/radio/style/css',
|
||||
'element-plus/es/components/checkbox/style/css',
|
||||
'element-plus/es/components/checkbox-group/style/css',
|
||||
'element-plus/es/components/switch/style/css',
|
||||
'element-plus/es/components/time-picker/style/css',
|
||||
'element-plus/es/components/date-picker/style/css',
|
||||
'element-plus/es/components/descriptions/style/css',
|
||||
'element-plus/es/components/descriptions-item/style/css',
|
||||
'element-plus/es/components/link/style/css',
|
||||
'element-plus/es/components/tooltip/style/css',
|
||||
'element-plus/es/components/drawer/style/css',
|
||||
'element-plus/es/components/dialog/style/css',
|
||||
'element-plus/es/components/checkbox-button/style/css',
|
||||
'element-plus/es/components/option-group/style/css',
|
||||
'element-plus/es/components/radio-button/style/css',
|
||||
'element-plus/es/components/cascader/style/css',
|
||||
'element-plus/es/components/color-picker/style/css',
|
||||
'element-plus/es/components/input-number/style/css',
|
||||
'element-plus/es/components/rate/style/css',
|
||||
'element-plus/es/components/select-v2/style/css',
|
||||
'element-plus/es/components/tree-select/style/css',
|
||||
'element-plus/es/components/slider/style/css',
|
||||
'element-plus/es/components/time-select/style/css',
|
||||
'element-plus/es/components/autocomplete/style/css',
|
||||
'element-plus/es/components/image-viewer/style/css',
|
||||
'element-plus/es/components/upload/style/css',
|
||||
'element-plus/es/components/col/style/css',
|
||||
'element-plus/es/components/form-item/style/css',
|
||||
'element-plus/es/components/alert/style/css',
|
||||
'element-plus/es/components/breadcrumb/style/css',
|
||||
'element-plus/es/components/select/style/css',
|
||||
'element-plus/es/components/input/style/css',
|
||||
'element-plus/es/components/breadcrumb-item/style/css',
|
||||
'element-plus/es/components/tag/style/css',
|
||||
'element-plus/es/components/pagination/style/css',
|
||||
'element-plus/es/components/table/style/css',
|
||||
'element-plus/es/components/table-v2/style/css',
|
||||
'element-plus/es/components/table-column/style/css',
|
||||
'element-plus/es/components/card/style/css',
|
||||
'element-plus/es/components/row/style/css',
|
||||
'element-plus/es/components/button/style/css',
|
||||
'element-plus/es/components/menu/style/css',
|
||||
'element-plus/es/components/sub-menu/style/css',
|
||||
'element-plus/es/components/menu-item/style/css',
|
||||
'element-plus/es/components/option/style/css',
|
||||
'element-plus/es/components/dropdown/style/css',
|
||||
'element-plus/es/components/dropdown-menu/style/css',
|
||||
'element-plus/es/components/dropdown-item/style/css',
|
||||
'element-plus/es/components/skeleton/style/css',
|
||||
'element-plus/es/components/backtop/style/index',
|
||||
'element-plus/es/components/form/style/index',
|
||||
'element-plus/es/components/radio-group/style/index',
|
||||
'element-plus/es/components/radio/style/index',
|
||||
'element-plus/es/components/checkbox/style/index',
|
||||
'element-plus/es/components/checkbox-group/style/index',
|
||||
'element-plus/es/components/switch/style/index',
|
||||
'element-plus/es/components/time-picker/style/index',
|
||||
'element-plus/es/components/date-picker/style/index',
|
||||
'element-plus/es/components/col/style/index',
|
||||
'element-plus/es/components/form-item/style/index',
|
||||
'element-plus/es/components/alert/style/index',
|
||||
'element-plus/es/components/breadcrumb/style/index',
|
||||
'element-plus/es/components/select/style/index',
|
||||
'element-plus/es/components/input/style/index',
|
||||
'element-plus/es/components/breadcrumb-item/style/index',
|
||||
'element-plus/es/components/tag/style/index',
|
||||
'element-plus/es/components/pagination/style/index',
|
||||
'element-plus/es/components/table/style/index',
|
||||
'element-plus/es/components/table-column/style/index',
|
||||
'element-plus/es/components/card/style/index',
|
||||
'element-plus/es/components/row/style/index',
|
||||
'element-plus/es/components/button/style/index',
|
||||
'element-plus/es/components/menu/style/index',
|
||||
'element-plus/es/components/sub-menu/style/index',
|
||||
'element-plus/es/components/menu-item/style/index',
|
||||
'element-plus/es/components/option/style/index',
|
||||
'element-plus/es/components/dropdown/style/index',
|
||||
'element-plus/es/components/dropdown-menu/style/index',
|
||||
'element-plus/es/components/dropdown-item/style/index',
|
||||
'element-plus/es/components/skeleton/style/index',
|
||||
|
||||
'element-plus/es/components/skeleton/style/css',
|
||||
'element-plus/es/components/backtop/style/css',
|
||||
'element-plus/es/components/menu/style/css',
|
||||
@ -102,12 +82,20 @@ const include = [
|
||||
'element-plus/es/components/breadcrumb/style/css',
|
||||
'element-plus/es/components/breadcrumb-item/style/css',
|
||||
'element-plus/es/components/image/style/css',
|
||||
'element-plus/es/components/collapse-transition/style/css',
|
||||
'element-plus/es/components/timeline/style/css',
|
||||
'element-plus/es/components/timeline-item/style/css',
|
||||
'element-plus/es/components/collapse/style/css',
|
||||
'element-plus/es/components/collapse-item/style/css',
|
||||
'element-plus/es/components/button-group/style/css'
|
||||
'element-plus/es/components/tag/style/css',
|
||||
'element-plus/es/components/dialog/style/css',
|
||||
'element-plus/es/components/form/style/css',
|
||||
'element-plus/es/components/form-item/style/css',
|
||||
'element-plus/es/components/card/style/css',
|
||||
'element-plus/es/components/tooltip/style/css',
|
||||
'element-plus/es/components/radio-group/style/css',
|
||||
'element-plus/es/components/radio/style/css',
|
||||
'element-plus/es/components/input-number/style/css',
|
||||
'element-plus/es/components/tree-select/style/css',
|
||||
'element-plus/es/components/drawer/style/css',
|
||||
'element-plus/es/components/image-viewer/style/css',
|
||||
'element-plus/es/components/upload/style/css',
|
||||
'element-plus/es/components/switch/style/css'
|
||||
]
|
||||
|
||||
const exclude = ['@iconify/json']
|
||||
|
@ -17,17 +17,17 @@ export interface CategoryVO {
|
||||
*/
|
||||
name: string
|
||||
/**
|
||||
* 分类图片
|
||||
* 移动端分类图
|
||||
*/
|
||||
picUrl: string
|
||||
/**
|
||||
* PC 端分类图
|
||||
*/
|
||||
bigPicUrl?: string
|
||||
/**
|
||||
* 分类排序
|
||||
*/
|
||||
sort?: number
|
||||
/**
|
||||
* 分类描述
|
||||
*/
|
||||
description?: string
|
||||
sort: number
|
||||
/**
|
||||
* 开启状态
|
||||
*/
|
||||
|
@ -4,27 +4,30 @@
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="80px"
|
||||
label-width="120px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="上级分类" prop="parentId">
|
||||
<el-tree-select
|
||||
v-model="formData.parentId"
|
||||
:data="categoryTree"
|
||||
:props="{ label: 'name', value: 'id' }"
|
||||
:render-after-expand="false"
|
||||
placeholder="请选择上级分类"
|
||||
check-strictly
|
||||
default-expand-all
|
||||
/>
|
||||
<el-select v-model="formData.parentId" placeholder="请选择上级分类">
|
||||
<el-option :key="0" label="顶级分类" :value="0" />
|
||||
<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="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入分类名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类图片" prop="picUrl">
|
||||
<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>
|
||||
<div style="font-size: 10px" class="pl-10px">推荐 180x180 图片分辨率</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="PC 端分类图" prop="bigPicUrl">
|
||||
<UploadImg v-model="formData.bigPicUrl" :limit="1" :is-show-tip="false" />
|
||||
<div style="font-size: 10px" class="pl-10px">推荐 468x340 图片分辨率</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" controls-position="right" :min="0" />
|
||||
@ -40,9 +43,6 @@
|
||||
</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>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
@ -53,7 +53,6 @@
|
||||
<script setup lang="ts">
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
import { handleTree } from '@/utils/tree'
|
||||
import * as ProductCategoryApi from '@/api/mall/product/category'
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
@ -66,8 +65,8 @@ const formData = ref({
|
||||
id: undefined,
|
||||
name: '',
|
||||
picUrl: '',
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
description: ''
|
||||
bigPicUrl: '',
|
||||
status: CommonStatusEnum.ENABLE
|
||||
})
|
||||
const formRules = reactive({
|
||||
parentId: [{ required: true, message: '请选择上级分类', trigger: 'blur' }],
|
||||
@ -77,7 +76,7 @@ const formRules = reactive({
|
||||
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
const categoryTree = ref<any[]>([]) // 分类树
|
||||
const categoryList = ref<any[]>([]) // 分类树
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
@ -95,7 +94,7 @@ const open = async (type: string, id?: number) => {
|
||||
}
|
||||
}
|
||||
// 获得分类树
|
||||
await getTree()
|
||||
categoryList.value = await ProductCategoryApi.getCategoryList({ parentId: 0 })
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
|
||||
|
||||
@ -131,17 +130,9 @@ const resetForm = () => {
|
||||
id: undefined,
|
||||
name: '',
|
||||
picUrl: '',
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
description: ''
|
||||
bigPicUrl: '',
|
||||
status: CommonStatusEnum.ENABLE
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
/** 获得分类树 */
|
||||
const getTree = async () => {
|
||||
const data = await ProductCategoryApi.getCategoryList({})
|
||||
const tree = handleTree(data, 'id', 'parentId')
|
||||
const menu = { id: 0, name: '顶级分类', children: tree }
|
||||
categoryTree.value = [menu]
|
||||
}
|
||||
</script>
|
||||
|
@ -36,9 +36,9 @@
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" row-key="id" default-expand-all>
|
||||
<el-table-column label="分类名称" prop="name" sortable />
|
||||
<el-table-column label="分类图片" align="center" prop="picUrl">
|
||||
<el-table-column label="移动端分类图" align="center" prop="picUrl">
|
||||
<template #default="scope">
|
||||
<img v-if="scope.row.picUrl" :src="scope.row.picUrl" alt="分类图片" class="h-100px" />
|
||||
<img v-if="scope.row.picUrl" :src="scope.row.picUrl" alt="移动端分类图" class="h-100px" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="分类排序" align="center" prop="sort" />
|
||||
|
Loading…
Reference in New Issue
Block a user