|
|
@@ -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" name="ProductCategory">
|
|
|
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>
|
YunaiV