117 lines
3.1 KiB
Vue
117 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
import { changeGoodsCellsStock, clearGoodsCells } from "@/api/cabinet/cabinet-cell";
|
|
import { getGoodsInfo } from "@/api/shop/goods";
|
|
|
|
const props = defineProps({
|
|
cellId: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
goodsId: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
goodsName: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
currentStock: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
coverImg: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
price: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['refresh', 'update:modelValue']);
|
|
const closeModal = () => {
|
|
emit('update:modelValue', false);
|
|
};
|
|
|
|
const stockInput = ref(props.currentStock);
|
|
const isEditing = ref(false);
|
|
|
|
async function handleStockChange() {
|
|
try {
|
|
const { data } = await getGoodsInfo(props.goodsId);
|
|
const remainingStock = data.stock - data.totalStock + props.currentStock;
|
|
|
|
if (stockInput.value > remainingStock) {
|
|
ElMessage.warning('分配数量不能超过剩余库存');
|
|
stockInput.value = remainingStock;
|
|
return;
|
|
}
|
|
|
|
await changeGoodsCellsStock(props.cellId, stockInput.value);
|
|
ElMessage.success('库存更新成功');
|
|
emit('refresh');
|
|
isEditing.value = false;
|
|
} catch (error) {
|
|
console.error('库存调整失败', error);
|
|
}
|
|
}
|
|
|
|
async function handleClearGoods() {
|
|
try {
|
|
await ElMessageBox.confirm(
|
|
`确认要下架${props.goodsName}吗？`,
|
|
'警告',
|
|
{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
|
|
);
|
|
await clearGoodsCells(props.cellId);
|
|
ElMessage.success('商品下架成功');
|
|
emit('refresh');
|
|
closeModal();
|
|
} catch (error) {
|
|
console.error('操作取消或失败', error);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="config-modal">
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="商品ID" >{{ props.goodsId }}</el-descriptions-item>
|
|
<el-descriptions-item label="商品名称">{{ props.goodsName }}</el-descriptions-item>
|
|
<el-descriptions-item label="商品图片">
|
|
<el-image :src="coverImg" style="width: 100px; height: 100px" fit="contain" />
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="价格">{{ price }}</el-descriptions-item>
|
|
<el-descriptions-item label="当前库存">
|
|
<el-input-number v-model="stockInput" :min="0" :max="1000" :disabled="!isEditing" class="stock-input" />
|
|
<el-button v-if="!isEditing" type="primary" size="small" @click="isEditing = true">修改</el-button>
|
|
<el-button v-if="isEditing" type="success" size="small" @click="handleStockChange">保存</el-button>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<div class="action-buttons">
|
|
<el-button type="danger" @click="handleClearGoods">
|
|
下架商品
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.config-modal {
|
|
padding: 20px;
|
|
}
|
|
|
|
.action-buttons {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.stock-input {
|
|
margin-right: 12px;
|
|
}
|
|
</style> |