完成修改 商品页面
This commit is contained in:
aaron
parent
a3a6fb1d05
commit
cc8b00446c
@ -174,6 +174,103 @@
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<!-- 修改商品模态框 -->
|
||||
<a-modal
|
||||
v-model:visible="editModalVisible"
|
||||
title="修改商品"
|
||||
:confirmLoading="editLoading"
|
||||
width="600px"
|
||||
@cancel="handleEditCancel"
|
||||
>
|
||||
<template #footer>
|
||||
<a-space>
|
||||
<a-button @click="handleEditCancel">取消</a-button>
|
||||
<a-button type="primary" :loading="editLoading" @click="handleEditSubmit">
|
||||
保存
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<a-form
|
||||
ref="editFormRef"
|
||||
:model="editFormState"
|
||||
:rules="rules"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 16 }"
|
||||
>
|
||||
<a-form-item label="商品名称" name="name" required>
|
||||
<a-input v-model:value="editFormState.name" placeholder="请输入商品名称" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="商品图片" name="image_url" required>
|
||||
<div class="upload-wrapper">
|
||||
<div v-if="editFormState.image_url" class="image-preview">
|
||||
<img :src="editFormState.image_url" alt="商品图片" />
|
||||
<div class="image-actions">
|
||||
<a-button type="link" danger @click="handleEditRemoveImage">删除</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<a-upload
|
||||
v-else
|
||||
name="files"
|
||||
:customRequest="handleEditUpload"
|
||||
:show-upload-list="false"
|
||||
accept="image/*"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined />
|
||||
上传图片
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="商品原价" name="product_price" required>
|
||||
<a-input-number
|
||||
v-model:value="editFormState.product_price"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
style="width: 100%"
|
||||
placeholder="请输入商品原价"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="销售价格" name="sale_price" required>
|
||||
<a-input-number
|
||||
v-model:value="editFormState.sale_price"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
style="width: 100%"
|
||||
placeholder="请输入销售价格"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="结算价格" name="settlement_amount" required>
|
||||
<a-input-number
|
||||
v-model:value="editFormState.settlement_amount"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
style="width: 100%"
|
||||
placeholder="请输入结算价格"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="标签" name="tags">
|
||||
<a-input v-model:value="editFormState.tags" placeholder="多个标签用逗号分隔" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="最高抵扣消费金" name="max_deduct_points" required>
|
||||
<a-input-number
|
||||
v-model:value="editFormState.max_deduct_points"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
style="width: 100%"
|
||||
placeholder="请输入最高抵扣消费金"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
@ -327,10 +424,103 @@ export default defineComponent({
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 修改商品
|
||||
// 修改商品相关
|
||||
const editModalVisible = ref(false)
|
||||
const editLoading = ref(false)
|
||||
const editFormRef = ref(null)
|
||||
const currentEditId = ref(null)
|
||||
|
||||
const editFormState = ref({
|
||||
name: '',
|
||||
image_url: '',
|
||||
product_price: null,
|
||||
sale_price: null,
|
||||
settlement_amount: null,
|
||||
tags: '',
|
||||
max_deduct_points: null
|
||||
})
|
||||
|
||||
// 显示修改模态框
|
||||
const handleEdit = (record) => {
|
||||
// TODO: 实现商品修改功能
|
||||
console.log('修改商品:', record)
|
||||
currentEditId.value = record.id
|
||||
editFormState.value = {
|
||||
name: record.name,
|
||||
image_url: record.image_url,
|
||||
product_price: record.product_price,
|
||||
sale_price: record.sale_price,
|
||||
settlement_amount: record.settlement_amount,
|
||||
tags: record.tags,
|
||||
max_deduct_points: record.max_deduct_points
|
||||
}
|
||||
editModalVisible.value = true
|
||||
}
|
||||
|
||||
// 处理修改图片上传
|
||||
const handleEditUpload = async ({ file, onSuccess, onError }) => {
|
||||
const formData = new FormData()
|
||||
formData.append('files', file)
|
||||
|
||||
try {
|
||||
const res = await request.post('/api/upload/images', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
|
||||
if (res.code === 200 && res.data && res.data.urls && res.data.urls.length > 0) {
|
||||
editFormState.value.image_url = res.data.urls[0]
|
||||
onSuccess()
|
||||
message.success('上传成功')
|
||||
} else {
|
||||
throw new Error('上传失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传图片失败:', error)
|
||||
message.error('上传失败')
|
||||
onError()
|
||||
}
|
||||
}
|
||||
|
||||
// 删除修改图片
|
||||
const handleEditRemoveImage = () => {
|
||||
editFormState.value.image_url = ''
|
||||
}
|
||||
|
||||
// 提交修改
|
||||
const handleEditSubmit = () => {
|
||||
editFormRef.value.validate().then(async () => {
|
||||
try {
|
||||
editLoading.value = true
|
||||
const res = await request.put(`/api/merchant/product/${currentEditId.value}`, editFormState.value)
|
||||
if (res.code === 200) {
|
||||
message.success('修改成功')
|
||||
editModalVisible.value = false
|
||||
fetchData()
|
||||
} else {
|
||||
throw new Error(res.message || '修改失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('修改商品失败:', error)
|
||||
message.error(error.message || '修改失败')
|
||||
} finally {
|
||||
editLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 取消修改
|
||||
const handleEditCancel = () => {
|
||||
editFormRef.value?.resetFields()
|
||||
editFormState.value = {
|
||||
name: '',
|
||||
image_url: '',
|
||||
product_price: null,
|
||||
sale_price: null,
|
||||
settlement_amount: null,
|
||||
tags: '',
|
||||
max_deduct_points: null
|
||||
}
|
||||
editModalVisible.value = false
|
||||
}
|
||||
|
||||
// 添加商品相关
|
||||
@ -456,7 +646,15 @@ export default defineComponent({
|
||||
handleUpload,
|
||||
handleRemoveImage,
|
||||
handleAdd,
|
||||
handleCancel
|
||||
handleCancel,
|
||||
editModalVisible,
|
||||
editLoading,
|
||||
editFormRef,
|
||||
editFormState,
|
||||
handleEditUpload,
|
||||
handleEditRemoveImage,
|
||||
handleEditSubmit,
|
||||
handleEditCancel
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user