Skip to content

Commit 841040b

Browse files
puhui999gitee-org
puhui999
authored and
gitee-org
committed
Merge branch 'dev' of gitee.com:yudaocode/yudao-ui-admin-vue3 into dev
Signed-off-by: puhui999 <[email protected]>
2 parents b2a91aa + 5f10efb commit 841040b

File tree

20 files changed

+2824
-189
lines changed

20 files changed

+2824
-189
lines changed

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,12 @@
2727
"lint:pretty": "pretty-quick --staged"
2828
},
2929
"dependencies": {
30-
"@form-create/designer": "^3.1.3",
31-
"@form-create/element-ui": "^3.1.18",
30+
"@element-plus/icons-vue": "^2.1.0",
31+
"@form-create/designer": "^3.1.0",
32+
"@form-create/element-ui": "^3.1.17",
3233
"@iconify/iconify": "^3.1.0",
3334
"@videojs-player/vue": "^1.0.0",
35+
"@vueup/vue-quill": "^1.1.1",
3436
"@vueuse/core": "^9.13.0",
3537
"@wangeditor/editor": "^5.1.23",
3638
"@wangeditor/editor-for-vue": "^5.1.10",

‎src/api/mall/product/brand.ts

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import request from '@/config/axios'
2+
3+
/**
4+
* 商品品牌
5+
*/
6+
export interface BrandVO {
7+
/**
8+
* 品牌编号
9+
*/
10+
id?: number
11+
/**
12+
* 品牌名称
13+
*/
14+
name: string
15+
/**
16+
* 品牌图片
17+
*/
18+
picUrl: string
19+
/**
20+
* 品牌排序
21+
*/
22+
sort?: number
23+
/**
24+
* 品牌描述
25+
*/
26+
description?: string
27+
/**
28+
* 开启状态
29+
*/
30+
status: number
31+
}
32+
33+
// 创建商品品牌
34+
export const createBrand = (data: BrandVO) => {
35+
return request.post({ url: '/product/brand/create', data })
36+
}
37+
38+
// 更新商品品牌
39+
export const updateBrand = (data: BrandVO) => {
40+
return request.put({ url: '/product/brand/update', data })
41+
}
42+
43+
// 删除商品品牌
44+
export const deleteBrand = (id: number) => {
45+
return request.delete({ url: `/product/brand/delete?id=${id}` })
46+
}
47+
48+
// 获得商品品牌
49+
export const getBrand = (id: number) => {
50+
return request.get({ url: `/product/brand/get?id=${id}` })
51+
}
52+
53+
// 获得商品品牌列表
54+
export const getBrandList = (params: any) => {
55+
return request.get({ url: '/product/brand/page', params })
56+
}

‎src/api/mp/mpuser/index.ts renamed to ‎src/api/mp/user/index.ts

File renamed without changes.

‎src/types/auto-components.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ declare module '@vue/runtime-core' {
5353
ElForm: typeof import('element-plus/es')['ElForm']
5454
ElFormItem: typeof import('element-plus/es')['ElFormItem']
5555
ElIcon: typeof import('element-plus/es')['ElIcon']
56+
ElImage: typeof import('element-plus/es')['ElImage']
5657
ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
5758
ElInput: typeof import('element-plus/es')['ElInput']
5859
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']

‎src/views/mall/product/brand/BrandForm.vue

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<template>
2+
<Dialog :title="dialogTitle" v-model="dialogVisible">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="80px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="品牌名称" prop="name">
11+
<el-input v-model="formData.name" placeholder="请输入品牌名称" />
12+
</el-form-item>
13+
<el-form-item label="品牌图片" prop="picUrl">
14+
<UploadImg v-model="formData.picUrl" :limit="1" :is-show-tip="false" />
15+
<div style="font-size: 10px">推荐 100x100 图片分辨率</div>
16+
</el-form-item>
17+
<el-form-item label="品牌排序" prop="sort">
18+
<el-input-number v-model="formData.sort" controls-position="right" :min="0" />
19+
</el-form-item>
20+
<el-form-item label="品牌描述">
21+
<el-input v-model="formData.description" type="textarea" placeholder="请输入品牌描述" />
22+
</el-form-item>
23+
</el-form>
24+
<template #footer>
25+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
26+
<el-button @click="dialogVisible = false">取 消</el-button>
27+
</template>
28+
</Dialog>
29+
</template>
30+
<script setup lang="ts" name="ProductBrand">
31+
import { CommonStatusEnum } from '@/utils/constants'
32+
import * as ProductBrandApi from '@/api/mall/product/brand'
33+
const { t } = useI18n() // 国际化
34+
const message = useMessage() // 消息弹窗
35+
36+
const dialogVisible = ref(false) // 弹窗的是否展示
37+
const dialogTitle = ref('') // 弹窗的标题
38+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
39+
const formType = ref('') // 表单的类型：create - 新增；update - 修改
40+
const formData = ref({
41+
id: undefined,
42+
name: '',
43+
picUrl: '',
44+
status: CommonStatusEnum.ENABLE,
45+
description: ''
46+
})
47+
const formRules = reactive({
48+
name: [{ required: true, message: '品牌名称不能为空', trigger: 'blur' }],
49+
picUrl: [{ required: true, message: '品牌图片不能为空', trigger: 'blur' }],
50+
sort: [{ required: true, message: '品牌排序不能为空', trigger: 'blur' }]
51+
})
52+
const formRef = ref() // 表单 Ref
53+
54+
/** 打开弹窗 */
55+
const open = async (type: string, id?: number) => {
56+
dialogVisible.value = true
57+
dialogTitle.value = t('action.' + type)
58+
formType.value = type
59+
resetForm()
60+
// 修改时，设置数据
61+
if (id) {
62+
formLoading.value = true
63+
try {
64+
formData.value = await ProductBrandApi.getBrand(id)
65+
} finally {
66+
formLoading.value = false
67+
}
68+
}
69+
}
70+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
71+
72+
/** 提交表单 */
73+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
74+
const submitForm = async () => {
75+
// 校验表单
76+
if (!formRef) return
77+
const valid = await formRef.value.validate()
78+
if (!valid) return
79+
// 提交请求
80+
formLoading.value = true
81+
try {
82+
const data = formData.value as ProductBrandApi.BrandVO
83+
if (formType.value === 'create') {
84+
await ProductBrandApi.createBrand(data)
85+
message.success(t('common.createSuccess'))
86+
} else {
87+
await ProductBrandApi.updateBrand(data)
88+
message.success(t('common.updateSuccess'))
89+
}
90+
dialogVisible.value = false
91+
// 发送操作成功的事件
92+
emit('success')
93+
} finally {
94+
formLoading.value = false
95+
}
96+
}
97+
98+
/** 重置表单 */
99+
const resetForm = () => {
100+
formData.value = {
101+
id: undefined,
102+
name: '',
103+
picUrl: '',
104+
status: CommonStatusEnum.ENABLE,
105+
description: ''
106+
}
107+
formRef.value?.resetFields()
108+
}
109+
</script>

‎src/views/mall/product/brand/index.vue

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
<template>
2+
<!-- 搜索工作栏 -->
3+
<ContentWrap>
4+
<el-form
5+
class="-mb-15px"
6+
:model="queryParams"
7+
ref="queryFormRef"
8+
:inline="true"
9+
label-width="68px"
10+
>
11+
<el-form-item label="品牌名称" prop="name">
12+
<el-input
13+
v-model="queryParams.name"
14+
placeholder="请输入品牌名称"
15+
clearable
16+
@keyup.enter="handleQuery"
17+
class="!w-240px"
18+
/>
19+
</el-form-item>
20+
<el-form-item label="状态" prop="status">
21+
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
22+
<el-option
23+
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
24+
:key="dict.value"
25+
:label="dict.label"
26+
:value="dict.value"
27+
/>
28+
</el-select>
29+
</el-form-item>
30+
<el-form-item label="创建时间" prop="createTime">
31+
<el-date-picker
32+
v-model="queryParams.createTime"
33+
value-format="YYYY-MM-DD HH:mm:ss"
34+
type="daterange"
35+
start-placeholder="开始日期"
36+
end-placeholder="结束日期"
37+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
38+
class="!w-240px"
39+
/>
40+
</el-form-item>
41+
<el-form-item>
42+
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
43+
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
44+
<el-button
45+
type="primary"
46+
plain
47+
@click="openForm('create')"
48+
v-hasPermi="['product:brand:create']"
49+
>
50+
<Icon icon="ep:plus" class="mr-5px" /> 新增
51+
</el-button>
52+
</el-form-item>
53+
</el-form>
54+
</ContentWrap>
55+
56+
<!-- 列表 -->
57+
<ContentWrap>
58+
<el-table v-loading="loading" :data="list" row-key="id" default-expand-all>
59+
<el-table-column label="品牌名称" prop="name" sortable />
60+
<el-table-column label="品牌图片" align="center" prop="picUrl">
61+
<template #default="scope">
62+
<img v-if="scope.row.picUrl" :src="scope.row.picUrl" alt="品牌图片" class="h-100px" />
63+
</template>
64+
</el-table-column>
65+
<el-table-column label="品牌排序" align="center" prop="sort" />
66+
<el-table-column label="开启状态" align="center" prop="status">
67+
<template #default="scope">
68+
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
69+
</template>
70+
</el-table-column>
71+
<el-table-column
72+
label="创建时间"
73+
align="center"
74+
prop="createTime"
75+
width="180"
76+
:formatter="dateFormatter"
77+
/>
78+
<el-table-column label="操作" align="center">
79+
<template #default="scope">
80+
<el-button
81+
link
82+
type="primary"
83+
@click="openForm('update', scope.row.id)"
84+
v-hasPermi="['product:brand:update']"
85+
>
86+
编辑
87+
</el-button>
88+
<el-button
89+
link
90+
type="danger"
91+
@click="handleDelete(scope.row.id)"
92+
v-hasPermi="['product:brand:delete']"
93+
>
94+
删除
95+
</el-button>
96+
</template>
97+
</el-table-column>
98+
</el-table>
99+
<!-- 分页 -->
100+
<Pagination
101+
:total="total"
102+
v-model:page="queryParams.pageNo"
103+
v-model:limit="queryParams.pageSize"
104+
@pagination="getList"
105+
/>
106+
</ContentWrap>
107+
108+
<!-- 表单弹窗：添加/修改 -->
109+
<BrandForm ref="formRef" @success="getList" />
110+
</template>
111+
<script setup lang="ts" name="ProductBrand">
112+
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
113+
import { dateFormatter } from '@/utils/formatTime'
114+
import * as ProductBrandApi from '@/api/mall/product/brand'
115+
import BrandForm from './BrandForm.vue'
116+
const message = useMessage() // 消息弹窗
117+
const { t } = useI18n() // 国际化
118+
119+
const loading = ref(true) // 列表的加载中
120+
const total = ref(0) // 列表的总页数
121+
const list = ref<any[]>([]) // 列表的数据
122+
const queryParams = reactive({
123+
pageNo: 1,
124+
pageSize: 10,
125+
name: undefined,
126+
status: undefined,
127+
createTime: []
128+
})
129+
const queryFormRef = ref() // 搜索的表单
130+
131+
/** 查询列表 */
132+
const getList = async () => {
133+
loading.value = true
134+
try {
135+
const data = await ProductBrandApi.getBrandList(queryParams)
136+
list.value = data.list
137+
total.value = data.total
138+
} finally {
139+
loading.value = false
140+
}
141+
}
142+
143+
/** 搜索按钮操作 */
144+
const handleQuery = () => {
145+
getList()
146+
}
147+
148+
/** 重置按钮操作 */
149+
const resetQuery = () => {
150+
queryFormRef.value.resetFields()
151+
handleQuery()
152+
}
153+
154+
/** 添加/修改操作 */
155+
const formRef = ref()
156+
const openForm = (type: string, id?: number) => {
157+
formRef.value.open(type, id)
158+
}
159+
160+
/** 删除按钮操作 */
161+
const handleDelete = async (id: number) => {
162+
try {
163+
// 删除的二次确认
164+
await message.delConfirm()
165+
// 发起删除
166+
await ProductBrandApi.deleteBrand(id)
167+
message.success(t('common.delSuccess'))
168+
// 刷新列表
169+
await getList()
170+
} catch {}
171+
}
172+
173+
/** 初始化 **/
174+
onMounted(() => {
175+
getList()
176+
})
177+
</script>

0 commit comments

Comments
 (0)