新增资库区
This commit is contained in:
WUSIJIAN
67
src/api/assets/zone/index.ts
Normal file
67
src/api/assets/zone/index.ts
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
import { newService } from '/@/utils/request';
|
||||||
|
|
||||||
|
// 库区查询参数
|
||||||
|
export interface ZoneQueryParams {
|
||||||
|
keyword?: string;
|
||||||
|
warehouseId?: string;
|
||||||
|
status?: string;
|
||||||
|
pageNum?: number;
|
||||||
|
pageSize?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 库区数据接口
|
||||||
|
export interface ZoneData {
|
||||||
|
id?: string;
|
||||||
|
zoneName: string;
|
||||||
|
zoneCode?: string;
|
||||||
|
zoneType?: string;
|
||||||
|
warehouseId: string;
|
||||||
|
capacity?: number;
|
||||||
|
status?: number;
|
||||||
|
remark?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取库区列表
|
||||||
|
export function listZones(params?: ZoneQueryParams) {
|
||||||
|
return newService({
|
||||||
|
url: '/assets/zone/listZones',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取库区详情
|
||||||
|
export function getZone(id: string) {
|
||||||
|
return newService({
|
||||||
|
url: '/assets/zone/getZone',
|
||||||
|
method: 'get',
|
||||||
|
params: { id },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建库区
|
||||||
|
export function createZone(data: ZoneData) {
|
||||||
|
return newService({
|
||||||
|
url: '/assets/zone/createZone',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新库区
|
||||||
|
export function updateZone(data: ZoneData) {
|
||||||
|
return newService({
|
||||||
|
url: '/assets/zone/updateZone',
|
||||||
|
method: 'put',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除库区
|
||||||
|
export function deleteZone(id: string) {
|
||||||
|
return newService({
|
||||||
|
url: '/assets/zone/deleteZone',
|
||||||
|
method: 'delete',
|
||||||
|
params: { id },
|
||||||
|
});
|
||||||
|
}
|
||||||
209
src/views/assets/zone/component/editZone.vue
Normal file
209
src/views/assets/zone/component/editZone.vue
Normal file
@@ -0,0 +1,209 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
:title="isEdit ? '修改库区' : '新增库区'"
|
||||||
|
v-model="isShowDialog"
|
||||||
|
width="600px"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
@close="onCancel"
|
||||||
|
>
|
||||||
|
<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="库区名称" prop="zoneName">
|
||||||
|
<el-input v-model="ruleForm.zoneName" placeholder="请输入库区名称" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="库区编码" prop="zoneCode">
|
||||||
|
<el-input v-model="ruleForm.zoneCode" placeholder="请输入库区编码" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="所属仓库" prop="warehouseId">
|
||||||
|
<el-select v-model="ruleForm.warehouseId" placeholder="请选择仓库" clearable style="width: 100%">
|
||||||
|
<el-option v-for="item in warehouseOptions" :key="item.id" :label="item.warehouseName" :value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="库区类型" prop="zoneType">
|
||||||
|
<el-select v-model="ruleForm.zoneType" placeholder="请选择库区类型" clearable style="width: 100%">
|
||||||
|
<el-option label="存储区" value="存储区" />
|
||||||
|
<el-option label="拣货区" value="拣货区" />
|
||||||
|
<el-option label="暂存区" value="暂存区" />
|
||||||
|
<el-option label="退货区" value="退货区" />
|
||||||
|
<el-option label="发货区" value="发货区" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="容量" prop="capacity">
|
||||||
|
<el-input-number v-model="ruleForm.capacity" :min="0" placeholder="请输入容量" style="width: 100%" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-radio-group v-model="ruleForm.status">
|
||||||
|
<el-radio :value="1">启用</el-radio>
|
||||||
|
<el-radio :value="0">禁用</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="ruleForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="onCancel">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="onSubmit" :loading="submitLoading">{{ isEdit ? '修 改' : '添 加' }}</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'editZone',
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive } from 'vue';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
import type { FormInstance, FormRules } from 'element-plus';
|
||||||
|
import { createZone, updateZone, getZone } from '/@/api/assets/zone';
|
||||||
|
|
||||||
|
// 定义props
|
||||||
|
defineProps<{
|
||||||
|
warehouseOptions: any[];
|
||||||
|
}>();
|
||||||
|
|
||||||
|
// 定义事件
|
||||||
|
const emit = defineEmits(['getZoneList']);
|
||||||
|
|
||||||
|
// 表单ref
|
||||||
|
const formRef = ref<FormInstance>();
|
||||||
|
|
||||||
|
// 弹窗状态
|
||||||
|
const isShowDialog = ref(false);
|
||||||
|
const isEdit = ref(false);
|
||||||
|
const submitLoading = ref(false);
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const ruleForm = reactive({
|
||||||
|
id: '',
|
||||||
|
zoneName: '',
|
||||||
|
zoneCode: '',
|
||||||
|
zoneType: '',
|
||||||
|
warehouseId: '',
|
||||||
|
capacity: 0,
|
||||||
|
status: 1,
|
||||||
|
remark: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 表单验证规则
|
||||||
|
const rules = reactive<FormRules>({
|
||||||
|
zoneName: [{ required: true, message: '请输入库区名称', trigger: 'blur' }],
|
||||||
|
warehouseId: [{ required: true, message: '请选择所属仓库', trigger: 'change' }],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
|
const resetForm = () => {
|
||||||
|
ruleForm.id = '';
|
||||||
|
ruleForm.zoneName = '';
|
||||||
|
ruleForm.zoneCode = '';
|
||||||
|
ruleForm.zoneType = '';
|
||||||
|
ruleForm.warehouseId = '';
|
||||||
|
ruleForm.capacity = 0;
|
||||||
|
ruleForm.status = 1;
|
||||||
|
ruleForm.remark = '';
|
||||||
|
};
|
||||||
|
|
||||||
|
// 打开弹窗
|
||||||
|
const openDialog = async (row?: any) => {
|
||||||
|
resetForm();
|
||||||
|
isEdit.value = !!row;
|
||||||
|
|
||||||
|
if (row) {
|
||||||
|
try {
|
||||||
|
const res: any = await getZone(row.id);
|
||||||
|
const data = res.data;
|
||||||
|
ruleForm.id = data.id || '';
|
||||||
|
ruleForm.zoneName = data.zoneName || '';
|
||||||
|
ruleForm.zoneCode = data.zoneCode || '';
|
||||||
|
ruleForm.zoneType = data.zoneType || '';
|
||||||
|
ruleForm.warehouseId = data.warehouseId || '';
|
||||||
|
ruleForm.capacity = data.capacity || 0;
|
||||||
|
ruleForm.status = (data.status === '1' || data.status === 1 || data.status === true) ? 1 : 0;
|
||||||
|
ruleForm.remark = data.remark || '';
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取库区详情失败:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
isShowDialog.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 取消
|
||||||
|
const onCancel = () => {
|
||||||
|
isShowDialog.value = false;
|
||||||
|
formRef.value?.resetFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 提交
|
||||||
|
const onSubmit = async () => {
|
||||||
|
const form = formRef.value;
|
||||||
|
if (!form) return;
|
||||||
|
|
||||||
|
form.validate(async (valid: boolean) => {
|
||||||
|
if (valid) {
|
||||||
|
submitLoading.value = true;
|
||||||
|
try {
|
||||||
|
const data = {
|
||||||
|
id: ruleForm.id || undefined,
|
||||||
|
zoneName: ruleForm.zoneName,
|
||||||
|
zoneCode: ruleForm.zoneCode,
|
||||||
|
zoneType: ruleForm.zoneType,
|
||||||
|
warehouseId: ruleForm.warehouseId,
|
||||||
|
capacity: ruleForm.capacity,
|
||||||
|
status: ruleForm.status,
|
||||||
|
remark: ruleForm.remark,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isEdit.value) {
|
||||||
|
await updateZone(data);
|
||||||
|
ElMessage.success('修改成功');
|
||||||
|
} else {
|
||||||
|
await createZone(data);
|
||||||
|
ElMessage.success('添加成功');
|
||||||
|
}
|
||||||
|
|
||||||
|
isShowDialog.value = false;
|
||||||
|
emit('getZoneList');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('提交失败:', error);
|
||||||
|
} finally {
|
||||||
|
submitLoading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 暴露方法
|
||||||
|
defineExpose({
|
||||||
|
openDialog,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
</style>
|
||||||
200
src/views/assets/zone/index.vue
Normal file
200
src/views/assets/zone/index.vue
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
<template>
|
||||||
|
<div class="assets-zone-page">
|
||||||
|
<div class="assets-zone-container">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<div class="assets-zone-search mb15">
|
||||||
|
<el-form :inline="true" :model="tableData.param">
|
||||||
|
<el-form-item label="库区名称">
|
||||||
|
<el-input size="default" v-model="tableData.param.keyword" placeholder="请输入库区名称" clearable style="width: 200px" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="所属仓库">
|
||||||
|
<el-select size="default" v-model="tableData.param.warehouseId" placeholder="请选择仓库" clearable style="width: 180px">
|
||||||
|
<el-option v-for="item in warehouseOptions" :key="item.id" :label="item.warehouseName" :value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态">
|
||||||
|
<el-select size="default" v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 120px">
|
||||||
|
<el-option label="启用" value="1" />
|
||||||
|
<el-option label="禁用" value="0" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button size="default" type="primary" @click="getZoneList">
|
||||||
|
<el-icon><ele-Search /></el-icon>
|
||||||
|
查询
|
||||||
|
</el-button>
|
||||||
|
<el-button size="default" @click="onResetQuery">
|
||||||
|
<el-icon><ele-Refresh /></el-icon>
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
<el-button size="default" type="success" @click="onOpenAdd">
|
||||||
|
<el-icon><ele-Plus /></el-icon>
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading" border>
|
||||||
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||||
|
<el-table-column prop="zoneName" label="库区名称" min-width="150" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="zoneCode" label="库区编码" width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="zoneType" label="库区类型" width="100" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="warehouseName" label="所属仓库" width="150" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="capacity" label="容量" width="100" align="center" />
|
||||||
|
<el-table-column prop="status" label="状态" width="100" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag :type="scope.row.status == '1' || scope.row.status === 1 ? 'success' : 'danger'">
|
||||||
|
{{ scope.row.status == '1' || scope.row.status === 1 ? '启用' : '禁用' }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="createdAt" label="创建时间" width="170" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="150" fixed="right" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button size="small" text type="primary" @click="onEdit(scope.row)">修改</el-button>
|
||||||
|
<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="mt15" style="text-align: right">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="tableData.param.pageNum"
|
||||||
|
v-model:page-size="tableData.param.pageSize"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
:total="tableData.total"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="onSizeChange"
|
||||||
|
@current-change="onCurrentChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
<EditZone ref="editZoneRef" :warehouseOptions="warehouseOptions" @getZoneList="getZoneList" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'assetsZone',
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||||
|
import { listZones, deleteZone } from '/@/api/assets/zone';
|
||||||
|
import { listWarehouses } from '/@/api/assets/warehouse';
|
||||||
|
import EditZone from './component/editZone.vue';
|
||||||
|
|
||||||
|
// 表格数据
|
||||||
|
const tableData = reactive({
|
||||||
|
data: [] as any[],
|
||||||
|
total: 0,
|
||||||
|
loading: false,
|
||||||
|
param: {
|
||||||
|
keyword: '',
|
||||||
|
warehouseId: '',
|
||||||
|
status: undefined as string | undefined,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 仓库选项
|
||||||
|
const warehouseOptions = ref<any[]>([]);
|
||||||
|
|
||||||
|
// 编辑弹窗ref
|
||||||
|
const editZoneRef = ref();
|
||||||
|
|
||||||
|
// 获取仓库列表
|
||||||
|
const getWarehouseOptions = async () => {
|
||||||
|
try {
|
||||||
|
const res: any = await listWarehouses({ pageNum: 1, pageSize: 1000 });
|
||||||
|
warehouseOptions.value = res.data?.list || [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取仓库列表失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取库区列表
|
||||||
|
const getZoneList = async () => {
|
||||||
|
tableData.loading = true;
|
||||||
|
try {
|
||||||
|
const res: any = await listZones(tableData.param);
|
||||||
|
tableData.data = res.data?.list || [];
|
||||||
|
tableData.total = res.data?.total || 0;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取库区列表失败:', error);
|
||||||
|
} finally {
|
||||||
|
tableData.loading = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置查询
|
||||||
|
const onResetQuery = () => {
|
||||||
|
tableData.param.keyword = '';
|
||||||
|
tableData.param.warehouseId = '';
|
||||||
|
tableData.param.status = undefined;
|
||||||
|
tableData.param.pageNum = 1;
|
||||||
|
getZoneList();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 打开新增弹窗
|
||||||
|
const onOpenAdd = () => {
|
||||||
|
editZoneRef.value.openDialog();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 打开编辑弹窗
|
||||||
|
const onEdit = (row: any) => {
|
||||||
|
editZoneRef.value.openDialog(row);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除库区
|
||||||
|
const onRowDel = (row: any) => {
|
||||||
|
ElMessageBox.confirm(`确定要删除库区【${row.zoneName}】吗？`, '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}).then(async () => {
|
||||||
|
try {
|
||||||
|
await deleteZone(row.id);
|
||||||
|
ElMessage.success('删除成功');
|
||||||
|
getZoneList();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('删除失败:', error);
|
||||||
|
}
|
||||||
|
}).catch(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分页大小改变
|
||||||
|
const onSizeChange = (size: number) => {
|
||||||
|
tableData.param.pageSize = size;
|
||||||
|
getZoneList();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 当前页改变
|
||||||
|
const onCurrentChange = (page: number) => {
|
||||||
|
tableData.param.pageNum = page;
|
||||||
|
getZoneList();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 页面加载时获取数据
|
||||||
|
onMounted(() => {
|
||||||
|
getWarehouseOptions();
|
||||||
|
getZoneList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.assets-zone-page {
|
||||||
|
padding: 15px;
|
||||||
|
.assets-zone-container {
|
||||||
|
.assets-zone-search {
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user