admin123
/
shop-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(单元格管理): 新增主板ID字段并优化单元格表单布局 

在单元格管理和编辑功能中，新增了主板ID字段，并调整了表单布局以提升用户体验。同时，将单元格表单从对话框改为抽屉式布局，便于操作和查看。
This commit is contained in:
dzq 2025-05-21 11:33:21 +08:00
parent ba7b027c7b
commit a742b56413
7 changed files with 128 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/cabinet/cabinet-cell.ts
View File

@ -44,6 +44,10 @@ export interface AddCabinetCellCommand {
cellNo: number;
/** 针脚序号 */
pinNo: number;
/**
* 关联主板ID
*/
mainboardId: number;
/** 格口类型（1小格 2中格 3大格 4超大格） */
cellType: number;
/** 使用状态（1空闲 2已占用） */

84
src/views/cabinet/cabinet-cell/cell-edit-modal.vue
View File

@ -9,6 +9,7 @@ import type { FormRules } from 'element-plus';
export interface FormDTO {
cellId?: number;
cabinetId: number;
mainboardId: number;
cellNo: number;
pinNo: number;
cellType: number;
@ -27,11 +28,12 @@ const props = defineProps({
}
});
const emit = defineEmits(["update:visible", "refresh"]);
const emit = defineEmits(["update:modelValue", "refresh"]);
const formRef = ref();
const formData = reactive<FormDTO>({
cabinetId: null,
mainboardId: null,
cellNo: null,
pinNo: null,
cellType: 1,
@ -44,6 +46,10 @@ const rules = reactive<FormRules>({
{ required: true, message: "柜体ID必填", trigger: "blur" },
{ type: 'number', message: '必须为数字类型' }
],
mainboardId: [
{ required: true, message: "主板ID必填", trigger: "blur" },
{ type: 'number', message: '必须为数字类型' }
],
cellNo: [
{ required: true, message: "单元格号必填", trigger: "blur" },
{ type: 'number', message: '必须为数字类型' }
@ -77,7 +83,7 @@ const handleConfirm = async () => {
const closeDialog = () => {
formRef.value.resetFields();
emit("update:visible", false);
emit('update:modelValue', false);
};
watch(() => props.row, (val) => {
@ -88,49 +94,49 @@ watch(() => props.row, (val) => {
</script>
<template>
<el-dialog title="编辑单元格" :model-value="visible" width="600px" @close="closeDialog">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="柜体ID" prop="cabinetId">
<el-input v-model.number="formData.cabinetId" placeholder="请输入柜体ID" />
</el-form-item>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="柜体ID" prop="cabinetId">
<el-input v-model.number="formData.cabinetId" placeholder="请输入柜体ID" />
</el-form-item>
<el-form-item label="单元格号" prop="cellNo">
<el-input v-model.number="formData.cellNo" placeholder="请输入单元格号" />
</el-form-item>
<el-form-item label="主板ID" prop="mainboardId">
<el-input v-model.number="formData.mainboardId" placeholder="请输入主板ID" />
</el-form-item>
<el-form-item label="针脚号" prop="pinNo">
<el-input v-model.number="formData.pinNo" placeholder="请输入针脚号" />
</el-form-item>
<el-form-item label="单元格号" prop="cellNo">
<el-input v-model.number="formData.cellNo" placeholder="请输入单元格号" />
</el-form-item>
<el-form-item label="单元格类型" prop="cellType">
<el-select v-model="formData.cellType" placeholder="请选择类型">
<el-option label="小格" :value="1" />
<el-option label="中格" :value="2" />
<el-option label="大格" :value="3" />
<el-option label="超大格" :value="4" />
</el-select>
</el-form-item>
<el-form-item label="针脚号" prop="pinNo">
<el-input v-model.number="formData.pinNo" placeholder="请输入针脚号" />
</el-form-item>
<el-form-item label="使用状态" prop="usageStatus">
<el-select v-model="formData.usageStatus" placeholder="请选择状态">
<el-option label="空闲" :value="1" />
<el-option label="已占用" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="单元格类型" prop="cellType">
<el-select v-model="formData.cellType" placeholder="请选择类型">
<el-option label="小格" :value="1" />
<el-option label="中格" :value="2" />
<el-option label="大格" :value="3" />
<el-option label="超大格" :value="4" />
</el-select>
</el-form-item>
<el-form-item label="可用状态" prop="availableStatus">
<el-select v-model="formData.availableStatus" placeholder="请选择状态">
<el-option label="正常" :value="1" />
<el-option label="故障" :value="2" />
</el-select>
</el-form-item>
</el-form>
<el-form-item label="使用状态" prop="usageStatus">
<el-select v-model="formData.usageStatus" placeholder="请选择状态">
<el-option label="空闲" :value="1" />
<el-option label="已占用" :value="2" />
</el-select>
</el-form-item>
<template #footer>
<el-button @click="closeDialog">取消</el-button>
<el-form-item label="可用状态" prop="availableStatus">
<el-select v-model="formData.availableStatus" placeholder="请选择状态">
<el-option label="正常" :value="1" />
<el-option label="故障" :value="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
确认
提交
</el-button>
</template>
</el-dialog>
</el-form-item>
</el-form>
</template>

80
src/views/cabinet/cabinet-cell/cell-form-modal.vue
View File

@ -8,6 +8,7 @@ import type { FormRules } from 'element-plus';
export interface FormDTO {
cabinetId: number;
mainboardId: number;
cellNo: number;
pinNo: number;
cellType: number;
@ -28,11 +29,12 @@ const props = defineProps({
(window as any).cellProps = props;
const emit = defineEmits(["update:visible", "refresh"]);
const emit = defineEmits(["update:modelValue", "refresh"]);
const formRef = ref();
const formData = reactive<FormDTO>({
cabinetId: props.initialCabinetId,
mainboardId: null,
cellNo: null,
pinNo: null,
cellType: 1,
@ -42,6 +44,10 @@ const formData = reactive<FormDTO>({
const rules = reactive<FormRules>({
cabinetId: [],
mainboardId: [
{ required: true, message: "主板ID必填", trigger: "blur" },
{ type: 'number', message: '必须为数字类型' }
],
cellNo: [
{ required: true, message: "单元格号必填", trigger: "blur" },
{ type: 'number', message: '必须为数字类型' }
@ -76,52 +82,50 @@ const handleConfirm = async () => {
const closeDialog = () => {
formRef.value.resetFields();
emit("update:visible", false);
emit("update:modelValue", false);
};
</script>
<template>
<el-dialog title="新增单元格" :model-value="visible" width="600px" @close="closeDialog">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="主板ID" prop="mainboardId">
<el-input v-model.number="formData.mainboardId" placeholder="请输入主板ID" />
</el-form-item>
<el-form-item label="单元格号" prop="cellNo">
<el-input v-model.number="formData.cellNo" placeholder="请输入单元格号" />
</el-form-item>
<el-form-item label="单元格号" prop="cellNo">
<el-input v-model.number="formData.cellNo" placeholder="请输入单元格号" />
</el-form-item>
<el-form-item label="针脚号" prop="pinNo">
<el-input v-model.number="formData.pinNo" placeholder="请输入针脚号" />
</el-form-item>
<el-form-item label="针脚号" prop="pinNo">
<el-input v-model.number="formData.pinNo" placeholder="请输入针脚号" />
</el-form-item>
<el-form-item label="单元格类型" prop="cellType">
<el-select v-model="formData.cellType" placeholder="请选择类型">
<el-option label="小格" :value="1" />
<el-option label="中格" :value="2" />
<el-option label="大格" :value="3" />
<el-option label="超大格" :value="4" />
</el-select>
</el-form-item>
<el-form-item label="单元格类型" prop="cellType">
<el-select v-model="formData.cellType" placeholder="请选择类型">
<el-option label="小格" :value="1" />
<el-option label="中格" :value="2" />
<el-option label="大格" :value="3" />
<el-option label="超大格" :value="4" />
</el-select>
</el-form-item>
<el-form-item label="使用状态" prop="usageStatus">
<el-select v-model="formData.usageStatus" placeholder="请选择状态">
<el-option label="空闲" :value="1" />
<el-option label="已占用" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="使用状态" prop="usageStatus">
<el-select v-model="formData.usageStatus" placeholder="请选择状态">
<el-option label="空闲" :value="1" />
<el-option label="已占用" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="可用状态" prop="availableStatus">
<el-select v-model="formData.availableStatus" placeholder="请选择状态">
<el-option label="正常" :value="1" />
<el-option label="故障" :value="2" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="closeDialog">取消</el-button>
<el-form-item label="可用状态" prop="availableStatus">
<el-select v-model="formData.availableStatus" placeholder="请选择状态">
<el-option label="正常" :value="1" />
<el-option label="故障" :value="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
确认
提交
</el-button>
</template>
</el-dialog>
</el-form-item>
</el-form>
</template>

9
src/views/cabinet/cabinet-cell/index.vue
View File

@ -279,9 +279,12 @@ const switchCellType = (cellType: number) => {
:page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
@size-change="onSizeChange" @current-change="onCurrentChange" />
</PureTableBar>
<cell-form-modal v-model:visible="modalVisible" :initial-cabinet-id="searchFormParams.cabinetId"
@refresh="getList" />
<cell-edit-modal v-model:visible="editVisible" :row="currentRow" @refresh="getList" />
<el-drawer v-model="modalVisible" title="新增单元格" size="30%">
<cell-form-modal :initial-cabinet-id="searchFormParams.cabinetId" @refresh="getList" />
</el-drawer>
<el-drawer v-model="editVisible" title="编辑单元格" size="30%">
<cell-edit-modal :row="currentRow" @refresh="getList" />
</el-drawer>
</div>
</div>
</template>

32
src/views/cabinet/smart-cabinet-card/detail.vue
View File

@ -16,6 +16,8 @@ import Delete from "@iconify-icons/ep/delete";
import AddFill from "@iconify-icons/ri/add-circle-line";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import CellFormModal from "@/views/cabinet/cabinet-cell/cell-form-modal.vue";
import CellEditModal from "@/views/cabinet/cabinet-cell/cell-edit-modal.vue";
import { getGoodsInfo } from "@/api/shop/goods";
import { CabinetMainboardDTO, deleteMainboard, getMainboardList, updateMainboard } from "@/api/cabinet/mainboards";
@ -25,6 +27,7 @@ defineOptions({
const router = useRouter();
const route = useRoute();
const currentCell = ref<CabinetCellDTO>();
const cabinetInfo = ref<SmartCabinetDTO>({
cabinetName: "",
cabinetType: 0,
@ -53,6 +56,8 @@ const cellPagination = ref({
});
const goodsConfigVisible = ref(false);
const currentCellId = ref<number>();
const cellFormVisible = ref(false);
const cellEditVisible = ref(false);
function handleConfigure(row: CabinetCellDTO) {
currentCellId.value = row.cellId;
@ -109,6 +114,11 @@ async function handleClearGoods(row: CabinetCellDTO) {
}
}
function handleEditCell(row: CabinetCellDTO) {
currentCell.value = row;
cellEditVisible.value = true;
}
async function fetchCabinetDetail() {
try {
loading.value = true;
@ -286,13 +296,19 @@ onMounted(() => {
</el-descriptions>
<div class="cell-details" v-if="activeTab === 'cells'">
<div style="display: flex; justify-content: flex-end; margin-bottom: 16px;">
<el-button type="primary" :size="'small'" :icon="useRenderIcon(AddFill)" @click="cellFormVisible = true">
新增格口
</el-button>
</div>
<el-table v-loading="loading" :data="cellList" border>
<el-table-column label="格口ID" prop="cellId" width="80" />
<el-table-column label="格口号" prop="cellNo" width="80" />
<el-table-column label="针脚号" prop="pinNo" width="80" />
<el-table-column label="商品图片" width="120">
<template #default="{ row }">
<el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" fit="cover" class="rounded" width="60"
height="60" />
<el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" :preview-teleported="true"
:hide-on-click-modal="true" fit="cover" class="rounded" width="60" height="60" />
</template>
</el-table-column>
<el-table-column label="商品名称">
@ -325,6 +341,10 @@ onMounted(() => {
<el-button type="success" link :icon="useRenderIcon(AddFill)" @click="handleConfigure(row)">
配置商品
</el-button>
<el-button type="primary" link :icon="useRenderIcon(EditPen)" @click="handleEditCell(row)">
编辑格口
</el-button>
<el-button v-if="row.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"
@click="handleStockConfig(row)">
配置库存
@ -370,6 +390,12 @@ onMounted(() => {
<el-drawer v-model="goodsConfigVisible" title="配置商品" size="50%" direction="rtl">
<CabinetGoodsConfigModal v-model="goodsConfigVisible" :cell-id="currentCellId" @refresh="fetchCellList" />
</el-drawer>
<el-drawer v-model="cellFormVisible" title="新增格口" size="30%" direction="rtl">
<CellFormModal v-model="cellFormVisible" :initial-cabinet-id="cabinetId" @refresh="fetchCellList" />
</el-drawer>
<el-drawer v-model="cellEditVisible" title="编辑格口" size="30%" direction="rtl">
<CellEditModal v-model="cellEditVisible" :row="currentCell" @refresh="fetchCellList" />
</el-drawer>
</div>
</div>
</template>
@ -418,7 +444,7 @@ onMounted(() => {
}
.tab-header {
margin-bottom: 20px;
margin-bottom: 0px;
}
}
</style>

2
src/views/user/ab98/detail.vue
View File

@ -214,7 +214,7 @@ onMounted(() => {
}
.tab-header {
margin-bottom: 20px;
margin-bottom: 0px;
}
.order-item {

2
src/views/user/qy/detail.vue
View File

@ -222,7 +222,7 @@ async function handleModifyBalance(row: QyUserDTO) {
}
.tab-header {
margin-bottom: 20px;
margin-bottom: 0px;
}
}
</style>