优化库位和库区管理的仓库选择交互,将下拉选择改为弹窗选择模式,新增库位必填字段验证,调整盘点管理导入功能从列表操作移至详情操作,优化查询条件从ID改为名称模糊查询
This commit is contained in:
WUSIJIAN
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<el-dialog title="选择仓库" v-model="isShowDialog" width="700px" :close-on-click-modal="false" @close="onCancel">
|
||||
<div class="search-box mb15">
|
||||
<el-input v-model="searchKeyword" placeholder="请输入关键词搜索" clearable style="width: 300px" @keyup.enter="onSearch">
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="onSearch" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading" border highlight-current-row @current-change="onCurrentChange">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="warehouseName" label="仓库名称" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="warehouseCode" label="编码" width="150" show-overflow-tooltip />
|
||||
</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="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel">取 消</el-button>
|
||||
<el-button type="primary" @click="onConfirm">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'selectWarehouseDialog',
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
import { listWarehouses } from '/@/api/assets/warehouse';
|
||||
|
||||
// 定义事件
|
||||
const emit = defineEmits(['confirm']);
|
||||
|
||||
// 弹窗状态
|
||||
const isShowDialog = ref(false);
|
||||
|
||||
// 搜索关键词
|
||||
const searchKeyword = ref('');
|
||||
|
||||
// 当前选中的行
|
||||
const currentRow = ref<any>(null);
|
||||
|
||||
// 表格数据
|
||||
const tableData = reactive({
|
||||
data: [] as any[],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
keyword: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
});
|
||||
|
||||
// 获取仓库列表
|
||||
const getWarehouseList = async () => {
|
||||
tableData.loading = true;
|
||||
try {
|
||||
tableData.param.keyword = searchKeyword.value;
|
||||
const res: any = await listWarehouses(tableData.param);
|
||||
tableData.data = res.data?.list || [];
|
||||
tableData.total = res.data?.total || 0;
|
||||
} catch (error) {
|
||||
console.error('获取仓库列表失败:', error);
|
||||
} finally {
|
||||
tableData.loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const onSearch = () => {
|
||||
tableData.param.pageNum = 1;
|
||||
getWarehouseList();
|
||||
};
|
||||
|
||||
// 表格行选中
|
||||
const onCurrentChange = (row: any) => {
|
||||
currentRow.value = row;
|
||||
};
|
||||
|
||||
// 分页大小改变
|
||||
const onSizeChange = (size: number) => {
|
||||
tableData.param.pageSize = size;
|
||||
getWarehouseList();
|
||||
};
|
||||
|
||||
// 当前页改变
|
||||
const onPageChange = (page: number) => {
|
||||
tableData.param.pageNum = page;
|
||||
getWarehouseList();
|
||||
};
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = () => {
|
||||
searchKeyword.value = '';
|
||||
currentRow.value = null;
|
||||
tableData.param.pageNum = 1;
|
||||
isShowDialog.value = true;
|
||||
getWarehouseList();
|
||||
};
|
||||
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
isShowDialog.value = false;
|
||||
};
|
||||
|
||||
// 确定
|
||||
const onConfirm = () => {
|
||||
if (currentRow.value) {
|
||||
emit('confirm', currentRow.value);
|
||||
}
|
||||
isShowDialog.value = false;
|
||||
};
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<el-dialog title="选择库区" v-model="isShowDialog" width="700px" :close-on-click-modal="false" @close="onCancel">
|
||||
<div class="search-box mb15">
|
||||
<el-input v-model="searchKeyword" placeholder="请输入关键词搜索" clearable style="width: 300px" @keyup.enter="onSearch">
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="onSearch" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading" border highlight-current-row @current-change="onCurrentChange">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="zoneName" label="库区名称" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="zoneCode" label="编码" width="150" show-overflow-tooltip />
|
||||
</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="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel">取 消</el-button>
|
||||
<el-button type="primary" @click="onConfirm">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'selectZoneDialog',
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
import { listZones } from '/@/api/assets/zone';
|
||||
|
||||
// 定义事件
|
||||
const emit = defineEmits(['confirm']);
|
||||
|
||||
// 弹窗状态
|
||||
const isShowDialog = ref(false);
|
||||
|
||||
// 搜索关键词
|
||||
const searchKeyword = ref('');
|
||||
|
||||
// 当前选中的行
|
||||
const currentRow = ref<any>(null);
|
||||
|
||||
// 仓库ID
|
||||
const warehouseId = ref('');
|
||||
|
||||
// 表格数据
|
||||
const tableData = reactive({
|
||||
data: [] as any[],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
keyword: '',
|
||||
warehouseId: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
});
|
||||
|
||||
// 获取库区列表
|
||||
const getZoneList = async () => {
|
||||
tableData.loading = true;
|
||||
try {
|
||||
tableData.param.keyword = searchKeyword.value;
|
||||
tableData.param.warehouseId = warehouseId.value;
|
||||
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 onSearch = () => {
|
||||
tableData.param.pageNum = 1;
|
||||
getZoneList();
|
||||
};
|
||||
|
||||
// 表格行选中
|
||||
const onCurrentChange = (row: any) => {
|
||||
currentRow.value = row;
|
||||
};
|
||||
|
||||
// 分页大小改变
|
||||
const onSizeChange = (size: number) => {
|
||||
tableData.param.pageSize = size;
|
||||
getZoneList();
|
||||
};
|
||||
|
||||
// 当前页改变
|
||||
const onPageChange = (page: number) => {
|
||||
tableData.param.pageNum = page;
|
||||
getZoneList();
|
||||
};
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (filterWarehouseId?: string) => {
|
||||
searchKeyword.value = '';
|
||||
currentRow.value = null;
|
||||
tableData.param.pageNum = 1;
|
||||
warehouseId.value = filterWarehouseId || '';
|
||||
isShowDialog.value = true;
|
||||
getZoneList();
|
||||
};
|
||||
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
isShowDialog.value = false;
|
||||
};
|
||||
|
||||
// 确定
|
||||
const onConfirm = () => {
|
||||
if (currentRow.value) {
|
||||
emit('confirm', currentRow.value);
|
||||
}
|
||||
isShowDialog.value = false;
|
||||
};
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user