优化仓库和库区管理功能,将状态字段类型从number改为string,移除编辑表单中的状态选择项,在列表页面将状态标签改为开关组件支持直接切换状态,新增updateWarehouseStatus和updateZoneStatus接口用于批量更新状态,同时在操作列新增日志按钮并集成操作日志对话框组件,在列表中添加修改时间列,优化查询参数将name改为keyword统一搜索字段命名
This commit is contained in:
77
src/api/assets/location/index.ts
Normal file
77
src/api/assets/location/index.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
import { newService } from '/@/utils/request';
|
||||
|
||||
// 库位查询参数
|
||||
export interface LocationQueryParams {
|
||||
keyword?: string;
|
||||
warehouseId?: string;
|
||||
zoneId?: string;
|
||||
status?: string;
|
||||
pageNum?: number;
|
||||
pageSize?: number;
|
||||
}
|
||||
|
||||
// 库位数据接口
|
||||
export interface LocationData {
|
||||
id?: string;
|
||||
locationName: string;
|
||||
locationCode?: string;
|
||||
locationType?: string;
|
||||
warehouseId?: string;
|
||||
zoneId: string;
|
||||
maxCapacity?: number;
|
||||
remark?: string;
|
||||
}
|
||||
|
||||
// 获取库位列表
|
||||
export function listLocations(params?: LocationQueryParams) {
|
||||
return newService({
|
||||
url: '/assets/location/listLocations',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取库位详情
|
||||
export function getLocation(id: string) {
|
||||
return newService({
|
||||
url: '/assets/location/getLocation',
|
||||
method: 'get',
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
|
||||
// 创建库位
|
||||
export function createLocation(data: LocationData) {
|
||||
return newService({
|
||||
url: '/assets/location/createLocation',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 更新库位
|
||||
export function updateLocation(data: LocationData) {
|
||||
return newService({
|
||||
url: '/assets/location/updateLocation',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除库位
|
||||
export function deleteLocation(id: string) {
|
||||
return newService({
|
||||
url: '/assets/location/deleteLocation',
|
||||
method: 'delete',
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
|
||||
// 更新库位状态
|
||||
export function updateLocationStatus(data: { id: string[]; status: string }) {
|
||||
return newService({
|
||||
url: '/assets/location/updateLocationStatus',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
}
|
||||
@@ -2,8 +2,8 @@ import { newService } from '/@/utils/request';
|
||||
|
||||
// 仓库查询参数
|
||||
export interface WarehouseQueryParams {
|
||||
name?: string;
|
||||
status?: number;
|
||||
keyword?: string;
|
||||
status?: string;
|
||||
pageNum?: number;
|
||||
pageSize?: number;
|
||||
}
|
||||
@@ -16,7 +16,7 @@ export interface WarehouseData {
|
||||
address?: string;
|
||||
contactPerson?: string;
|
||||
contactPhone?: string;
|
||||
status?: number;
|
||||
status?: string;
|
||||
remark?: string;
|
||||
}
|
||||
|
||||
@@ -64,3 +64,12 @@ export function deleteWarehouse(id: string) {
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
|
||||
// 更新仓库状态
|
||||
export function updateWarehouseStatus(data: { id: string[]; status: string }) {
|
||||
return newService({
|
||||
url: '/assets/warehouse/updateWarehouseStatus',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@ export interface ZoneData {
|
||||
zoneType?: string;
|
||||
warehouseId: string;
|
||||
capacity?: number;
|
||||
status?: number;
|
||||
status?: string;
|
||||
remark?: string;
|
||||
}
|
||||
|
||||
@@ -65,3 +65,12 @@ export function deleteZone(id: string) {
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
|
||||
// 更新库区状态
|
||||
export function updateZoneStatus(data: { id: string[]; status: string }) {
|
||||
return newService({
|
||||
url: '/assets/zone/updateZoneStatus',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
221
src/views/assets/location/component/editLocation.vue
Normal file
221
src/views/assets/location/component/editLocation.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<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="locationName">
|
||||
<el-input v-model="ruleForm.locationName" placeholder="请输入库位名称" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="库位编码" prop="locationCode">
|
||||
<el-input v-model="ruleForm.locationCode" 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%" @change="onWarehouseChange">
|
||||
<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="zoneId">
|
||||
<el-select v-model="ruleForm.zoneId" placeholder="请选择库区" clearable style="width: 100%">
|
||||
<el-option v-for="item in filteredZoneOptions" :key="item.id" :label="item.zoneName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="库位类型" prop="locationType">
|
||||
<el-select v-model="ruleForm.locationType" placeholder="请选择库位类型" clearable style="width: 100%">
|
||||
<el-option label="货架位" value="货架位" />
|
||||
<el-option label="地面位" value="地面位" />
|
||||
<el-option label="托盘位" value="托盘位" />
|
||||
<el-option label="悬挂位" value="悬挂位" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="最大容量" prop="maxCapacity">
|
||||
<el-input-number v-model="ruleForm.maxCapacity" :min="0" placeholder="请输入最大容量" style="width: 100%" />
|
||||
</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: 'editLocation',
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import type { FormInstance, FormRules } from 'element-plus';
|
||||
import { createLocation, updateLocation, getLocation } from '/@/api/assets/location';
|
||||
|
||||
// 定义props
|
||||
const props = defineProps<{
|
||||
warehouseOptions: any[];
|
||||
zoneOptions: any[];
|
||||
}>();
|
||||
|
||||
// 定义事件
|
||||
const emit = defineEmits(['getLocationList']);
|
||||
|
||||
// 表单ref
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
// 弹窗状态
|
||||
const isShowDialog = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const submitLoading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const ruleForm = reactive({
|
||||
id: '',
|
||||
locationName: '',
|
||||
locationCode: '',
|
||||
locationType: '',
|
||||
warehouseId: '',
|
||||
zoneId: '',
|
||||
maxCapacity: 0,
|
||||
remark: '',
|
||||
});
|
||||
|
||||
// 根据选中的仓库过滤库区选项
|
||||
const filteredZoneOptions = computed(() => {
|
||||
if (!ruleForm.warehouseId) {
|
||||
return props.zoneOptions;
|
||||
}
|
||||
return props.zoneOptions.filter((z: any) => z.warehouseId === ruleForm.warehouseId);
|
||||
});
|
||||
|
||||
// 仓库选择变化时清空库区选择
|
||||
const onWarehouseChange = () => {
|
||||
ruleForm.zoneId = '';
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<FormRules>({
|
||||
locationName: [{ required: true, message: '请输入库位名称', trigger: 'blur' }],
|
||||
zoneId: [{ required: true, message: '请选择所属库区', trigger: 'change' }],
|
||||
});
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
ruleForm.id = '';
|
||||
ruleForm.locationName = '';
|
||||
ruleForm.locationCode = '';
|
||||
ruleForm.locationType = '';
|
||||
ruleForm.warehouseId = '';
|
||||
ruleForm.zoneId = '';
|
||||
ruleForm.maxCapacity = 0;
|
||||
ruleForm.remark = '';
|
||||
};
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = async (row?: any) => {
|
||||
resetForm();
|
||||
isEdit.value = !!row;
|
||||
|
||||
if (row) {
|
||||
try {
|
||||
const res: any = await getLocation(row.id);
|
||||
const data = res.data;
|
||||
ruleForm.id = data.id || '';
|
||||
ruleForm.locationName = data.locationName || '';
|
||||
ruleForm.locationCode = data.locationCode || '';
|
||||
ruleForm.locationType = data.locationType || '';
|
||||
ruleForm.warehouseId = data.warehouseId || '';
|
||||
ruleForm.zoneId = data.zoneId || '';
|
||||
ruleForm.maxCapacity = data.maxCapacity || 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,
|
||||
locationName: ruleForm.locationName,
|
||||
locationCode: ruleForm.locationCode,
|
||||
locationType: ruleForm.locationType,
|
||||
warehouseId: ruleForm.warehouseId,
|
||||
zoneId: ruleForm.zoneId,
|
||||
maxCapacity: ruleForm.maxCapacity,
|
||||
remark: ruleForm.remark,
|
||||
};
|
||||
|
||||
if (isEdit.value) {
|
||||
await updateLocation(data);
|
||||
ElMessage.success('修改成功');
|
||||
} else {
|
||||
await createLocation(data);
|
||||
ElMessage.success('添加成功');
|
||||
}
|
||||
|
||||
isShowDialog.value = false;
|
||||
emit('getLocationList');
|
||||
} catch (error) {
|
||||
console.error('提交失败:', error);
|
||||
} finally {
|
||||
submitLoading.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
273
src/views/assets/location/index.vue
Normal file
273
src/views/assets/location/index.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="assets-location-page">
|
||||
<div class="assets-location-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="assets-location-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" @change="onWarehouseChange">
|
||||
<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.zoneId" placeholder="请选择库区" clearable style="width: 180px">
|
||||
<el-option v-for="item in filteredZoneOptions" :key="item.id" :label="item.zoneName" :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="enabled" />
|
||||
<el-option label="禁用" value="disabled" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" @click="getLocationList">
|
||||
<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="locationName" label="库位名称" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="locationCode" label="库位编码" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="locationType" label="库位类型" width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="warehouseName" label="所属仓库" width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="zoneName" label="所属库区" width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="maxCapacity" label="最大容量" width="100" align="center" />
|
||||
<el-table-column prop="status" label="状态" width="80" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.statusEnabled"
|
||||
inline-prompt
|
||||
active-text="启"
|
||||
inactive-text="停"
|
||||
@change="onStatusChange(scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" width="170" show-overflow-tooltip />
|
||||
<el-table-column prop="updatedAt" label="修改时间" width="170" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="180" 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="info" @click="onViewLog(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>
|
||||
<EditLocation ref="editLocationRef" :warehouseOptions="warehouseOptions" :zoneOptions="zoneOptions" @getLocationList="getLocationList" />
|
||||
<OperationLogDialog ref="operationLogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'assetsLocation',
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { listLocations, deleteLocation, updateLocationStatus } from '/@/api/assets/location';
|
||||
import { listWarehouses } from '/@/api/assets/warehouse';
|
||||
import { listZones } from '/@/api/assets/zone';
|
||||
import EditLocation from './component/editLocation.vue';
|
||||
import OperationLogDialog from '/@/views/assets/component/operationLogDialog.vue';
|
||||
|
||||
// 表格数据
|
||||
const tableData = reactive({
|
||||
data: [] as any[],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
keyword: '',
|
||||
warehouseId: '',
|
||||
zoneId: '',
|
||||
status: undefined as string | undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
});
|
||||
|
||||
// 仓库选项
|
||||
const warehouseOptions = ref<any[]>([]);
|
||||
// 库区选项
|
||||
const zoneOptions = ref<any[]>([]);
|
||||
|
||||
// 根据选中的仓库过滤库区选项
|
||||
const filteredZoneOptions = computed(() => {
|
||||
if (!tableData.param.warehouseId) {
|
||||
return zoneOptions.value;
|
||||
}
|
||||
return zoneOptions.value.filter((z: any) => z.warehouseId === tableData.param.warehouseId);
|
||||
});
|
||||
|
||||
// 编辑弹窗ref
|
||||
const editLocationRef = ref();
|
||||
// 日志弹窗ref
|
||||
const operationLogRef = 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 getZoneOptions = async () => {
|
||||
try {
|
||||
const res: any = await listZones({ pageNum: 1, pageSize: 1000 });
|
||||
zoneOptions.value = res.data?.list || [];
|
||||
} catch (error) {
|
||||
console.error('获取库区列表失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 仓库选择变化时清空库区选择
|
||||
const onWarehouseChange = () => {
|
||||
tableData.param.zoneId = '';
|
||||
};
|
||||
|
||||
// 获取库位列表
|
||||
const getLocationList = async () => {
|
||||
tableData.loading = true;
|
||||
try {
|
||||
const res: any = await listLocations(tableData.param);
|
||||
const list = res.data?.list || [];
|
||||
// 回填仓库名称和库区名称
|
||||
const warehouseMap = new Map(warehouseOptions.value.map((w: any) => [w.id, w.warehouseName]));
|
||||
const zoneMap = new Map(zoneOptions.value.map((z: any) => [z.id, z.zoneName]));
|
||||
tableData.data = list.map((item: any) => ({
|
||||
...item,
|
||||
warehouseName: item.warehouseName || warehouseMap.get(item.warehouseId) || '',
|
||||
zoneName: item.zoneName || zoneMap.get(item.zoneId) || '',
|
||||
statusEnabled: item.status === 'enabled',
|
||||
}));
|
||||
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.zoneId = '';
|
||||
tableData.param.status = undefined;
|
||||
tableData.param.pageNum = 1;
|
||||
getLocationList();
|
||||
};
|
||||
|
||||
// 打开新增弹窗
|
||||
const onOpenAdd = () => {
|
||||
editLocationRef.value.openDialog();
|
||||
};
|
||||
|
||||
// 打开编辑弹窗
|
||||
const onEdit = (row: any) => {
|
||||
editLocationRef.value.openDialog(row);
|
||||
};
|
||||
|
||||
// 状态切换
|
||||
const onStatusChange = async (row: any) => {
|
||||
const newStatus = row.statusEnabled ? 'enabled' : 'disabled';
|
||||
const statusText = row.statusEnabled ? '启用' : '禁用';
|
||||
try {
|
||||
await updateLocationStatus({ id: [row.id], status: newStatus });
|
||||
ElMessage.success(`${statusText}成功`);
|
||||
} catch (error) {
|
||||
console.error('状态更新失败:', error);
|
||||
// 失败时恢复原状态
|
||||
row.statusEnabled = !row.statusEnabled;
|
||||
}
|
||||
};
|
||||
|
||||
// 查看日志
|
||||
const onViewLog = (row: any) => {
|
||||
operationLogRef.value?.openDialog(row.id);
|
||||
};
|
||||
|
||||
// 删除库位
|
||||
const onRowDel = (row: any) => {
|
||||
ElMessageBox.confirm(`确定要删除库位【${row.locationName}】吗?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(async () => {
|
||||
try {
|
||||
await deleteLocation(row.id);
|
||||
ElMessage.success('删除成功');
|
||||
getLocationList();
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error);
|
||||
}
|
||||
}).catch(() => {});
|
||||
};
|
||||
|
||||
// 分页大小改变
|
||||
const onSizeChange = (size: number) => {
|
||||
tableData.param.pageSize = size;
|
||||
getLocationList();
|
||||
};
|
||||
|
||||
// 当前页改变
|
||||
const onCurrentChange = (page: number) => {
|
||||
tableData.param.pageNum = page;
|
||||
getLocationList();
|
||||
};
|
||||
|
||||
// 页面加载时获取数据
|
||||
onMounted(async () => {
|
||||
await Promise.all([getWarehouseOptions(), getZoneOptions()]);
|
||||
getLocationList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.assets-location-page {
|
||||
padding: 15px;
|
||||
.assets-location-container {
|
||||
.assets-location-search {
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -38,17 +38,7 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<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-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="ruleForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
||||
@@ -96,7 +86,6 @@ const ruleForm = reactive({
|
||||
address: '',
|
||||
contactPerson: '',
|
||||
contactPhone: '',
|
||||
status: 1,
|
||||
remark: '',
|
||||
});
|
||||
|
||||
@@ -113,7 +102,6 @@ const resetForm = () => {
|
||||
ruleForm.address = '';
|
||||
ruleForm.contactPerson = '';
|
||||
ruleForm.contactPhone = '';
|
||||
ruleForm.status = 1;
|
||||
ruleForm.remark = '';
|
||||
};
|
||||
|
||||
@@ -132,7 +120,6 @@ const openDialog = async (row?: any) => {
|
||||
ruleForm.address = data.address || '';
|
||||
ruleForm.contactPerson = data.contactPerson || '';
|
||||
ruleForm.contactPhone = data.contactPhone || '';
|
||||
ruleForm.status = (data.status === '1' || data.status === 1 || data.status === true) ? 1 : 0;
|
||||
ruleForm.remark = data.remark || '';
|
||||
} catch (error) {
|
||||
console.error('获取仓库详情失败:', error);
|
||||
@@ -164,7 +151,6 @@ const onSubmit = async () => {
|
||||
address: ruleForm.address,
|
||||
contactPerson: ruleForm.contactPerson,
|
||||
contactPhone: ruleForm.contactPhone,
|
||||
status: ruleForm.status,
|
||||
remark: ruleForm.remark,
|
||||
};
|
||||
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
</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-option label="启用" value="enabled" />
|
||||
<el-option label="禁用" value="disabled" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
@@ -36,17 +36,23 @@
|
||||
<el-table-column prop="address" label="仓库地址" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="contactPerson" label="联系人" width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="contactPhone" label="联系电话" width="130" show-overflow-tooltip />
|
||||
<el-table-column prop="status" label="状态" width="100" align="center">
|
||||
<el-table-column prop="status" label="状态" width="80" 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>
|
||||
<el-switch
|
||||
v-model="scope.row.statusEnabled"
|
||||
inline-prompt
|
||||
active-text="启"
|
||||
inactive-text="停"
|
||||
@change="onStatusChange(scope.row)"
|
||||
/>
|
||||
</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">
|
||||
<el-table-column prop="updatedAt" label="修改时间" width="170" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="180" 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="info" @click="onViewLog(scope.row)">日志</el-button>
|
||||
<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -66,6 +72,7 @@
|
||||
</el-card>
|
||||
</div>
|
||||
<EditWarehouse ref="editWarehouseRef" @getWarehouseList="getWarehouseList" />
|
||||
<OperationLogDialog ref="operationLogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -78,8 +85,9 @@ export default {
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { listWarehouses, deleteWarehouse } from '/@/api/assets/warehouse';
|
||||
import { listWarehouses, deleteWarehouse, updateWarehouseStatus } from '/@/api/assets/warehouse';
|
||||
import EditWarehouse from './component/editWarehouse.vue';
|
||||
import OperationLogDialog from '/@/views/assets/component/operationLogDialog.vue';
|
||||
|
||||
// 表格数据
|
||||
const tableData = reactive({
|
||||
@@ -88,7 +96,7 @@ const tableData = reactive({
|
||||
loading: false,
|
||||
param: {
|
||||
keyword: '',
|
||||
status: undefined as number | undefined,
|
||||
status: undefined as string | undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
@@ -96,13 +104,20 @@ const tableData = reactive({
|
||||
|
||||
// 编辑弹窗ref
|
||||
const editWarehouseRef = ref();
|
||||
// 日志弹窗ref
|
||||
const operationLogRef = ref();
|
||||
|
||||
// 获取仓库列表
|
||||
const getWarehouseList = async () => {
|
||||
tableData.loading = true;
|
||||
try {
|
||||
const res: any = await listWarehouses(tableData.param);
|
||||
tableData.data = res.data?.list || [];
|
||||
const list = res.data?.list || [];
|
||||
// 添加 statusEnabled 字段用于开关组件
|
||||
tableData.data = list.map((item: any) => ({
|
||||
...item,
|
||||
statusEnabled: item.status === 'enabled' || item.status === '1' || item.status === 1,
|
||||
}));
|
||||
tableData.total = res.data?.total || 0;
|
||||
} catch (error) {
|
||||
console.error('获取仓库列表失败:', error);
|
||||
@@ -129,6 +144,25 @@ const onEdit = (row: any) => {
|
||||
editWarehouseRef.value.openDialog(row);
|
||||
};
|
||||
|
||||
// 状态切换
|
||||
const onStatusChange = async (row: any) => {
|
||||
const newStatus = row.statusEnabled ? 'enabled' : 'disabled';
|
||||
const statusText = row.statusEnabled ? '启用' : '禁用';
|
||||
try {
|
||||
await updateWarehouseStatus({ id: [row.id], status: newStatus });
|
||||
ElMessage.success(`${statusText}成功`);
|
||||
} catch (error) {
|
||||
console.error('状态更新失败:', error);
|
||||
// 失败时恢复原状态
|
||||
row.statusEnabled = !row.statusEnabled;
|
||||
}
|
||||
};
|
||||
|
||||
// 查看日志
|
||||
const onViewLog = (row: any) => {
|
||||
operationLogRef.value?.openDialog(row.id);
|
||||
};
|
||||
|
||||
// 删除仓库
|
||||
const onRowDel = (row: any) => {
|
||||
ElMessageBox.confirm(`确定要删除仓库【${row.warehouseName}】吗?`, '提示', {
|
||||
|
||||
@@ -45,14 +45,6 @@
|
||||
<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">
|
||||
@@ -107,7 +99,6 @@ const ruleForm = reactive({
|
||||
zoneType: '',
|
||||
warehouseId: '',
|
||||
capacity: 0,
|
||||
status: 1,
|
||||
remark: '',
|
||||
});
|
||||
|
||||
@@ -125,7 +116,6 @@ const resetForm = () => {
|
||||
ruleForm.zoneType = '';
|
||||
ruleForm.warehouseId = '';
|
||||
ruleForm.capacity = 0;
|
||||
ruleForm.status = 1;
|
||||
ruleForm.remark = '';
|
||||
};
|
||||
|
||||
@@ -144,7 +134,6 @@ const openDialog = async (row?: any) => {
|
||||
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);
|
||||
@@ -176,7 +165,6 @@ const onSubmit = async () => {
|
||||
zoneType: ruleForm.zoneType,
|
||||
warehouseId: ruleForm.warehouseId,
|
||||
capacity: ruleForm.capacity,
|
||||
status: ruleForm.status,
|
||||
remark: ruleForm.remark,
|
||||
};
|
||||
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
</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-option label="启用" value="enabled" />
|
||||
<el-option label="禁用" value="disabled" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
@@ -41,17 +41,23 @@
|
||||
<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">
|
||||
<el-table-column prop="status" label="状态" width="80" 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>
|
||||
<el-switch
|
||||
v-model="scope.row.statusEnabled"
|
||||
inline-prompt
|
||||
active-text="启"
|
||||
inactive-text="停"
|
||||
@change="onStatusChange(scope.row)"
|
||||
/>
|
||||
</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">
|
||||
<el-table-column prop="updatedAt" label="修改时间" width="170" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="180" 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="info" @click="onViewLog(scope.row)">日志</el-button>
|
||||
<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -71,6 +77,7 @@
|
||||
</el-card>
|
||||
</div>
|
||||
<EditZone ref="editZoneRef" :warehouseOptions="warehouseOptions" @getZoneList="getZoneList" />
|
||||
<OperationLogDialog ref="operationLogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -83,9 +90,10 @@ export default {
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { listZones, deleteZone } from '/@/api/assets/zone';
|
||||
import { listZones, deleteZone, updateZoneStatus } from '/@/api/assets/zone';
|
||||
import { listWarehouses } from '/@/api/assets/warehouse';
|
||||
import EditZone from './component/editZone.vue';
|
||||
import OperationLogDialog from '/@/views/assets/component/operationLogDialog.vue';
|
||||
|
||||
// 表格数据
|
||||
const tableData = reactive({
|
||||
@@ -106,6 +114,8 @@ const warehouseOptions = ref<any[]>([]);
|
||||
|
||||
// 编辑弹窗ref
|
||||
const editZoneRef = ref();
|
||||
// 日志弹窗ref
|
||||
const operationLogRef = ref();
|
||||
|
||||
// 获取仓库列表
|
||||
const getWarehouseOptions = async () => {
|
||||
@@ -122,7 +132,14 @@ const getZoneList = async () => {
|
||||
tableData.loading = true;
|
||||
try {
|
||||
const res: any = await listZones(tableData.param);
|
||||
tableData.data = res.data?.list || [];
|
||||
const list = res.data?.list || [];
|
||||
// 后端未返回 warehouseName 时,用仓库选项回填展示
|
||||
const warehouseMap = new Map(warehouseOptions.value.map((w: any) => [w.id, w.warehouseName]));
|
||||
tableData.data = list.map((item: any) => ({
|
||||
...item,
|
||||
warehouseName: item.warehouseName || warehouseMap.get(item.warehouseId) || '',
|
||||
statusEnabled: item.status === 'enabled',
|
||||
}));
|
||||
tableData.total = res.data?.total || 0;
|
||||
} catch (error) {
|
||||
console.error('获取库区列表失败:', error);
|
||||
@@ -150,6 +167,25 @@ const onEdit = (row: any) => {
|
||||
editZoneRef.value.openDialog(row);
|
||||
};
|
||||
|
||||
// 状态切换
|
||||
const onStatusChange = async (row: any) => {
|
||||
const newStatus = row.statusEnabled ? 'enabled' : 'disabled';
|
||||
const statusText = row.statusEnabled ? '启用' : '禁用';
|
||||
try {
|
||||
await updateZoneStatus({ id: [row.id], status: newStatus });
|
||||
ElMessage.success(`${statusText}成功`);
|
||||
} catch (error) {
|
||||
console.error('状态更新失败:', error);
|
||||
// 失败时恢复原状态
|
||||
row.statusEnabled = !row.statusEnabled;
|
||||
}
|
||||
};
|
||||
|
||||
// 查看日志
|
||||
const onViewLog = (row: any) => {
|
||||
operationLogRef.value?.openDialog(row.id);
|
||||
};
|
||||
|
||||
// 删除库区
|
||||
const onRowDel = (row: any) => {
|
||||
ElMessageBox.confirm(`确定要删除库区【${row.zoneName}】吗?`, '提示', {
|
||||
|
||||
Reference in New Issue
Block a user