|
|
@ -1,7 +1,7 @@ |
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
import { reactive, useTemplateRef } from "vue"; |
|
|
import { reactive, ref, useTemplateRef } from "vue"; |
|
|
import { ElButton } from "element-plus"; |
|
|
import { ElButton } from "element-plus"; |
|
|
import { Delete, Search } from "@element-plus/icons-vue"; |
|
|
import { Delete, Search, Plus } from "@element-plus/icons-vue"; |
|
|
import DataForm from "@/components/data-form/DataForm.vue"; |
|
|
import DataForm from "@/components/data-form/DataForm.vue"; |
|
|
import type { FormField } from "@/components/data-form/DataFormTypes.ts"; |
|
|
import type { FormField } from "@/components/data-form/DataFormTypes.ts"; |
|
|
import { AgGridVue } from "ag-grid-vue3"; |
|
|
import { AgGridVue } from "ag-grid-vue3"; |
|
|
@ -16,7 +16,7 @@ interface ComponentProps { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 读取组件 props 属性 |
|
|
// 读取组件 props 属性 |
|
|
const props = withDefaults(defineProps<ComponentProps>(), {}); |
|
|
const props = withDefaults(defineProps<ComponentProps>(), {}) |
|
|
|
|
|
|
|
|
// 定义 State 类型 |
|
|
// 定义 State 类型 |
|
|
interface ComponentState { |
|
|
interface ComponentState { |
|
|
@ -29,8 +29,8 @@ interface ComponentState { |
|
|
const state = reactive<ComponentState>({ |
|
|
const state = reactive<ComponentState>({ |
|
|
loading: false, |
|
|
loading: false, |
|
|
queryData: {}, |
|
|
queryData: {}, |
|
|
grid1Data: [], |
|
|
grid1Data: [] |
|
|
}); |
|
|
}) |
|
|
|
|
|
|
|
|
// 定义 Data 类型 |
|
|
// 定义 Data 类型 |
|
|
interface ComponentData { |
|
|
interface ComponentData { |
|
|
@ -113,28 +113,83 @@ const data: ComponentData = { |
|
|
const grid = useTemplateRef<InstanceType<typeof AgGridVue>>("gridRef"); |
|
|
const grid = useTemplateRef<InstanceType<typeof AgGridVue>>("gridRef"); |
|
|
|
|
|
|
|
|
function reload() { |
|
|
function reload() { |
|
|
data.api.paginationGoToPage(0); |
|
|
data.api.paginationGoToPage(0) |
|
|
data.api.setServerSideDatasource({ getRows: serverSideDatasource }); |
|
|
data.api.setServerSideDatasource({ getRows: serverSideDatasource }) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function serverSideDatasource(params: IServerSideGetRowsParams) { |
|
|
function serverSideDatasource(params: IServerSideGetRowsParams) { |
|
|
const { startRow, endRow } = params.request; |
|
|
const { startRow, endRow } = params.request |
|
|
console.log("startRow, endRow ", params.request); |
|
|
console.log('startRow, endRow ', params.request) |
|
|
const pageSize = endRow - startRow; |
|
|
const pageSize = endRow - startRow |
|
|
const pageNo = Math.floor(startRow / pageSize) + 1; |
|
|
const pageNo = Math.floor(startRow / pageSize) + 1 |
|
|
state.loading = true; |
|
|
state.loading = true |
|
|
Request.request.get<PageData>( |
|
|
Request.request.get<PageData>( |
|
|
"/api/workbench/DeviceManager@queryInvLpn", |
|
|
'/api/workbench/DeviceManager@queryInvLpn', |
|
|
{ |
|
|
{ |
|
|
params: { |
|
|
params: { |
|
|
...state.queryData, |
|
|
...state.queryData, |
|
|
pageSize, |
|
|
pageSize, |
|
|
pageNo, |
|
|
pageNo |
|
|
}, |
|
|
} |
|
|
}, |
|
|
} |
|
|
).then(page => { |
|
|
).then(page => { |
|
|
params.success({ rowData: page.records, rowCount: page.total }) |
|
|
params.success({ rowData: page.records, rowCount: page.total }) |
|
|
}).finally(() => state.loading = false); |
|
|
}).finally(() => state.loading = false) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const lpnList = ref([]) |
|
|
|
|
|
const locationList = ref([]) |
|
|
|
|
|
const addInvDialogVisible = ref(false) |
|
|
|
|
|
const addInvForm = reactive({ |
|
|
|
|
|
env_id: 10, |
|
|
|
|
|
lpn: '', |
|
|
|
|
|
loc_code: '', |
|
|
|
|
|
layer_index: 0, |
|
|
|
|
|
qty: 0 |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
function showInvDialog() { |
|
|
|
|
|
addInvDialogVisible.value = true |
|
|
|
|
|
addInvForm.env_id = 10 |
|
|
|
|
|
addInvForm.lpn = '' |
|
|
|
|
|
addInvForm.loc_code = '' |
|
|
|
|
|
addInvForm.layer_index = 0 |
|
|
|
|
|
addInvForm.qty = 0 |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function addInvCommit() { |
|
|
|
|
|
system.showLoading() |
|
|
|
|
|
Request.request.post('/api/workbench/LccController@addInvCommit', |
|
|
|
|
|
addInvForm |
|
|
|
|
|
|
|
|
|
|
|
).then(res => { |
|
|
|
|
|
if (res.success) { |
|
|
|
|
|
addInvDialogVisible.value = false |
|
|
|
|
|
system.msg('添加成功', 'success') |
|
|
|
|
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
system.showErrorDialog(res.msg) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}).finally(() => { |
|
|
|
|
|
system.clearLoading() |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function getLpnLocations() { |
|
|
|
|
|
Request.request.post('/api/workbench/LccController@getLpnLocations', |
|
|
|
|
|
addInvForm |
|
|
|
|
|
).then(res => { |
|
|
|
|
|
if (res.success) { |
|
|
|
|
|
addInvDialogVisible.value = false |
|
|
|
|
|
lpnList.value = res.data.lpnList |
|
|
|
|
|
locationList.value = res.data.locationList |
|
|
|
|
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
system.showErrorDialog(res.msg) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function delInvLpn() { |
|
|
function delInvLpn() { |
|
|
@ -155,7 +210,8 @@ function delInvLpn() { |
|
|
<template> |
|
|
<template> |
|
|
<div class="common-layout dashboard flex-column-container"> |
|
|
<div class="common-layout dashboard flex-column-container"> |
|
|
<div class="flex-item-fixed toolbar"> |
|
|
<div class="flex-item-fixed toolbar"> |
|
|
<ElButton :icon="Search" :loading="state.loading" @click="reload" type="warning" plain>查询</ElButton> |
|
|
<ElButton :icon="Search" :loading="state.loading" @click="reload" type="primary" plain>查询</ElButton> |
|
|
|
|
|
<ElButton :icon="Plus" :loading="state.loading" @click="showInvDialog" type="warning" plain>添加库存</ElButton> |
|
|
<ElButton :icon="Delete" @click="delInvLpn" type="danger" plain>删除</ElButton> |
|
|
<ElButton :icon="Delete" @click="delInvLpn" type="danger" plain>删除</ElButton> |
|
|
</div> |
|
|
</div> |
|
|
<DataForm |
|
|
<DataForm |
|
|
@ -174,6 +230,50 @@ function delInvLpn() { |
|
|
v-bind="{...data.gridSetting}" |
|
|
v-bind="{...data.gridSetting}" |
|
|
> |
|
|
> |
|
|
</AgGridVue> |
|
|
</AgGridVue> |
|
|
|
|
|
<!-- 编写一个添加库存的对话框,字段是: |
|
|
|
|
|
env_id 下拉框,数值是: 10=物理环境,13=虚拟环境1 |
|
|
|
|
|
lpn 容器编码,下拉框,下拉框取值是 /api/workbench/LccController@getContainerList, 他的返回是 { lpn:string, container_type:string } |
|
|
|
|
|
loc_code 货位编码 ,下拉框,下拉框取值是 /api/workbench/LccController@getLocCodeList, 他的返回值是 { loc_code:string, rack:string, bay:number, level:number, cell:number } |
|
|
|
|
|
保存按钮,点击后,发送一个请求,请求地址是 /api/workbench/LccController@addInv, 参数是 { env_id:number, lpn:string, loc_code:string } |
|
|
|
|
|
|
|
|
|
|
|
AJAX 请求,取值方式是: |
|
|
|
|
|
Request.request.post('/api/workbench/LccController@xxx', { |
|
|
|
|
|
env_id: envId |
|
|
|
|
|
}) |
|
|
|
|
|
/lpn/ --> |
|
|
|
|
|
<el-dialog title="添加库存" v-model="addInvDialogVisible" |
|
|
|
|
|
@opened="getLpnLocations"> |
|
|
|
|
|
<el-form ref="addInvForm" :model="addInvForm" label-width="80px"> |
|
|
|
|
|
<el-form-item label="环境"> |
|
|
|
|
|
<el-select v-model="addInvForm.env_id" placeholder="请选择"> |
|
|
|
|
|
<el-option label="物理环境" :value="10" /> |
|
|
|
|
|
<el-option label="虚拟环境" :value="13" /> |
|
|
|
|
|
</el-select> |
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
<el-form-item label="容器编码"> |
|
|
|
|
|
<el-select v-model="addInvForm.lpn" placeholder="请选择"> |
|
|
|
|
|
<el-option v-for="item in lpnList" :key="item.lpn" :label="item.lpn" :value="item.lpn"> |
|
|
|
|
|
</el-option> |
|
|
|
|
|
</el-select> |
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
<el-form-item label="货位编码"> |
|
|
|
|
|
<el-select v-model="addInvForm.loc_code" placeholder="请选择"> |
|
|
|
|
|
<el-option v-for="item in locationList" :key="item.id" :label="item.location" :value="item.location"> |
|
|
|
|
|
</el-option> |
|
|
|
|
|
</el-select> |
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
<el-form-item label="数量"> |
|
|
|
|
|
<el-input v-model="addInvForm.qty" placeholder="请输入数量"></el-input> |
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
<el-form-item label="码垛层数"> |
|
|
|
|
|
<el-input v-model="addInvForm.layer_index" placeholder="请输入数量"></el-input> |
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
</el-form> |
|
|
|
|
|
<template #footer> |
|
|
|
|
|
<el-button @click="addInvDialogVisible = false">取消</el-button> |
|
|
|
|
|
<el-button type="primary" @click="addInvCommit">确定</el-button> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-dialog> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
@ -181,6 +281,7 @@ function delInvLpn() { |
|
|
.dashboard { |
|
|
.dashboard { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.query-form { |
|
|
.query-form { |
|
|
height: unset; |
|
|
height: unset; |
|
|
} |
|
|
} |
|
|
|