<template>
|
<div class="location-page">
|
<a-card>
|
<a-space style="margin-bottom: 16px">
|
<a-button type="primary" @click="handleAdd">
|
<template #icon><plus-outlined /></template>
|
新增货位
|
</a-button>
|
<a-input-search
|
v-model:value="searchText"
|
placeholder="搜索货位编码"
|
style="width: 200px"
|
@search="handleSearch"
|
/>
|
</a-space>
|
|
<a-table
|
:columns="columns"
|
:data-source="dataSource"
|
:loading="loading"
|
:pagination="pagination"
|
@change="handleTableChange"
|
row-key="Id"
|
>
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'LocationStatus'">
|
<a-tag :color="record.LocationStatus === 1 ? 'green' : 'orange'">
|
{{ record.LocationStatus === 1 ? '空闲' : '占用' }}
|
</a-tag>
|
</template>
|
<template v-else-if="column.key === 'Enable'">
|
<a-tag :color="record.Enable === 1 ? 'green' : 'red'">
|
{{ record.Enable === 1 ? '启用' : '禁用' }}
|
</a-tag>
|
</template>
|
<template v-else-if="column.key === 'action'">
|
<a-space>
|
<a @click="handleEdit(record)">编辑</a>
|
<a-divider type="vertical" />
|
<a-popconfirm title="确定要删除吗？" @confirm="handleDelete(record)">
|
<a style="color: red">删除</a>
|
</a-popconfirm>
|
</a-space>
|
</template>
|
</template>
|
</a-table>
|
</a-card>
|
|
<a-modal
|
v-model:open="modalVisible"
|
:title="modalTitle"
|
@ok="handleModalOk"
|
@cancel="handleModalCancel"
|
>
|
<a-form
|
ref="formRef"
|
:model="formState"
|
:rules="rules"
|
:label-col="{ span: 6 }"
|
:wrapper-col="{ span: 16 }"
|
>
|
<a-form-item label="货位编码" name="LocationCode">
|
<a-input v-model:value="formState.LocationCode" />
|
</a-form-item>
|
<a-form-item label="货位名称" name="LocationName">
|
<a-input v-model:value="formState.LocationName" />
|
</a-form-item>
|
<a-form-item label="仓库编码" name="WarehouseCode">
|
<a-input v-model:value="formState.WarehouseCode" />
|
</a-form-item>
|
<a-form-item label="货位类型" name="LocationType">
|
<a-input v-model:value="formState.LocationType" />
|
</a-form-item>
|
<a-form-item label="状态" name="Enable">
|
<a-select v-model:value="formState.Enable">
|
<a-select-option :value="1">启用</a-select-option>
|
<a-select-option :value="0">禁用</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive, onMounted } from 'vue';
|
import { message } from 'ant-design-vue';
|
import { PlusOutlined } from '@ant-design/icons-vue';
|
import {
|
getLocationList,
|
addLocation,
|
updateLocation,
|
deleteLocation,
|
} from '../../../api/basic';
|
import type { LocationInfo } from '../../../types/common';
|
|
const columns = [
|
{ title: '货位编码', dataIndex: 'LocationCode', key: 'LocationCode' },
|
{ title: '货位名称', dataIndex: 'LocationName', key: 'LocationName' },
|
{ title: '仓库编码', dataIndex: 'WarehouseCode', key: 'WarehouseCode' },
|
{ title: '货位类型', dataIndex: 'LocationType', key: 'LocationType' },
|
{ title: '货位状态', dataIndex: 'LocationStatus', key: 'LocationStatus' },
|
{ title: '状态', dataIndex: 'Enable', key: 'Enable' },
|
{ title: '创建时间', dataIndex: 'CreateDate', key: 'CreateDate' },
|
{ title: '操作', key: 'action', width: 150 },
|
];
|
|
const dataSource = ref<LocationInfo[]>([]);
|
const loading = ref(false);
|
const searchText = ref('');
|
const pagination = reactive({
|
current: 1,
|
pageSize: 20,
|
total: 0,
|
showSizeChanger: true,
|
showTotal: (total: number) => `共 ${total} 条`,
|
});
|
|
const modalVisible = ref(false);
|
const modalTitle = ref('新增货位');
|
const formRef = ref();
|
const formState = reactive<Partial<LocationInfo>>({
|
LocationCode: '',
|
LocationName: '',
|
WarehouseCode: '',
|
LocationType: '',
|
Enable: 1,
|
});
|
|
const rules = {
|
LocationCode: [{ required: true, message: '请输入货位编码', trigger: 'blur' }],
|
LocationName: [{ required: true, message: '请输入货位名称', trigger: 'blur' }],
|
WarehouseCode: [{ required: true, message: '请输入仓库编码', trigger: 'blur' }],
|
};
|
|
onMounted(() => {
|
fetchData();
|
});
|
|
async function fetchData() {
|
loading.value = true;
|
try {
|
const res = await getLocationList({
|
page: pagination.current,
|
rows: pagination.pageSize,
|
sort: 'CreateDate',
|
order: 'desc',
|
wheres: searchText.value
|
? [{ name: 'LocationCode', value: searchText.value, displayType: 'like' }]
|
: [],
|
});
|
if (res.status && res.data) {
|
dataSource.value = res.data.rows || [];
|
pagination.total = res.data.total || 0;
|
}
|
} catch (error) {
|
console.error('Fetch data error:', error);
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
function handleTableChange(pag: any) {
|
pagination.current = pag.current;
|
pagination.pageSize = pag.pageSize;
|
fetchData();
|
}
|
|
function handleSearch() {
|
pagination.current = 1;
|
fetchData();
|
}
|
|
function handleAdd() {
|
modalTitle.value = '新增货位';
|
Object.assign(formState, {
|
Id: undefined,
|
LocationCode: '',
|
LocationName: '',
|
WarehouseCode: '',
|
LocationType: '',
|
Enable: 1,
|
});
|
modalVisible.value = true;
|
}
|
|
function handleEdit(record: LocationInfo) {
|
modalTitle.value = '编辑货位';
|
Object.assign(formState, record);
|
modalVisible.value = true;
|
}
|
|
async function handleModalOk() {
|
try {
|
await formRef.value.validate();
|
const api = formState.Id ? updateLocation : addLocation;
|
const res = await api(formState);
|
if (res.status) {
|
message.success(formState.Id ? '更新成功' : '新增成功');
|
modalVisible.value = false;
|
fetchData();
|
}
|
} catch (error) {
|
console.error('Save error:', error);
|
}
|
}
|
|
function handleModalCancel() {
|
modalVisible.value = false;
|
formRef.value?.resetFields();
|
}
|
|
async function handleDelete(record: LocationInfo) {
|
try {
|
const res = await deleteLocation([record.Id]);
|
if (res.status) {
|
message.success('删除成功');
|
fetchData();
|
}
|
} catch (error) {
|
console.error('Delete error:', error);
|
}
|
}
|
</script>
|
|
<style scoped>
|
.location-page {
|
padding: 0;
|
}
|
</style>
|
