wangyifang
/
patrol-wzgl-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成库房管理

Browse Source
master
lynn 7 months ago
parent 89c9c06392
commit 6004011f49
2 changed files with 114 additions and 46 deletions
Show Stats Download Patch File Download Diff File

94
src/views/storages/components/addWarehouse.vue
Unescape View File

@ -8,7 +8,7 @@
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>仓库类型： <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>仓库类型：
</div> </div>
<div class="xy-table-item-content"> <div class="xy-table-item-content">
<Select v-model="form.type_id" style="width:500px;" placeholder="请选择仓库类型"> <Select v-model="form.type_id" style="width:500px;" placeholder="请选择仓库类型" @on-change="handleTypeChange">
<Option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.name }}</Option> <Option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.name }}</Option>
</Select> </Select>
</div> </div>
@ -20,8 +20,8 @@
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>仓库名称： <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>仓库名称：
</div> </div>
<div class="xy-table-item-content"> <div class="xy-table-item-content">
<Select v-model="form.warehouse_id" style="width:500px;" placeholder="请选择仓库名称"> <Select v-model="form.warehouse_id" style="width:500px;" placeholder="请选择仓库名称" :loading="loading">
<Option v-for="item in warehouseList" :key="item.id" :value="item.id">{{ item.name }}</Option> <Option v-for="item in warehouseList" :key="item.id" :value="item.id">{{ item.cangkumingcheng }}</Option>
</Select> </Select>
</div> </div>
</div> </div>
@ -32,17 +32,7 @@
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>库房名称： <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>库房名称：
</div> </div>
<div class="xy-table-item-content"> <div class="xy-table-item-content">
<el-input style="width:500px; font-size:18px;" v-model="form.name" placeholder="请输入库房名称"></el-input> <Input v-model="form.name" style="width:500px;" placeholder="请输入库房名称" />
</div>
</div>
</template>
<template v-slot:beizhu>
<div class="xy-table-item type-dialog-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>备注：
</div>
<div class="xy-table-item-content">
<el-input style="width:500px; font-size:18px;" v-model="form.beizhu" placeholder="请输入备注"></el-input>
</div> </div>
</div> </div>
</template> </template>
@ -53,6 +43,7 @@
<script> <script>
import { saveWarehouseType } from '@/api/system/warehouse' import { saveWarehouseType } from '@/api/system/warehouse'
import { getStorehouseTypeList } from '@/api/system/storehouseType' import { getStorehouseTypeList } from '@/api/system/storehouseType'
import { index } from '@/api/system/baseForm'
import { Message } from 'element-ui' import { Message } from 'element-ui'
export default { export default {
props: { props: {
@ -67,11 +58,12 @@ export default {
type: 'add', type: 'add',
id: '', id: '',
typeList: [], typeList: [],
warehouseList: [],
loading: false,
form: { form: {
type_id: '', type_id: '',
warehouse_id: '', warehouse_id: '',
name: '', name: ''
beizhu: ''
}, },
rules: { rules: {
type_id: [{ required: true, message: '请选择仓库类型' }], type_id: [{ required: true, message: '请选择仓库类型' }],
@ -95,6 +87,29 @@ export default {
Message.error('获取仓库类型列表失败'); Message.error('获取仓库类型列表失败');
} }
}, },
async getWarehouseListByType(typeId) {
try {
this.loading = true;
const res = await index({
table_name: 'materialstorages',
filter: [{
key: 'storehouses_id',
op: 'eq',
value: typeId
}]
});
this.warehouseList = res.data;
} catch (e) {
Message.error('获取仓库列表失败');
} finally {
this.loading = false;
}
},
handleTypeChange(typeId) {
this.form.type_id = typeId;
this.form.warehouse_id = ''; // 清空仓库名称选择
this.getWarehouseListByType(typeId);
},
open(type = 'add', row = null) { open(type = 'add', row = null) {
this.type = type; this.type = type;
this.isShow = true; this.isShow = true;
@ -105,28 +120,27 @@ export default {
}); });
if (type === 'editor' && row) { if (type === 'editor' && row) {
this.id = row.id; this.id = row.id;
Object.assign(this.form, { // 设置仓库类型和仓库名称
type_id: row.type_id || '', this.form.type_id = row.materialstorages.storehouse.id;
warehouse_id: row.warehouse_id || '', this.form.warehouse_id = row.materialstorages.id;
name: row.name || '', this.form.name = row.name || '';
beizhu: row.remark || ''
}); // 根据已有的type_id获取对应的仓库列表
this.getWarehouseListByType(row.materialstorages.storehouse.id);
} else { } else {
this.id = ''; this.id = '';
Object.assign(this.form, { Object.assign(this.form, {
type_id: '', type_id: '',
warehouse_id: '', warehouse_id: '',
name: '', name: ''
beizhu: ''
}); });
} }
}, },
submit() { submit() {
const params = { const params = {
type_id: this.form.type_id, type_id: this.form.type_id,
warehouse_id: this.form.warehouse_id, materialstorages_id: this.form.warehouse_id,
name: this.form.name, name: this.form.name
remark: this.form.beizhu
}; };
if (this.type === 'editor') { if (this.type === 'editor') {
params.id = this.id; params.id = this.id;
@ -146,17 +160,22 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep .xy-table-item-label { ::v-deep .xy-table-item-label {
min-width: 120px !important; min-width: 140px !important;
width: 140px !important;
font-size: 16px; font-size: 16px;
text-align: right; text-align: right;
padding-right: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
} }
.type-dialog-item { .type-dialog-item {
margin-bottom: 28px; margin-bottom: 28px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
} }
.xy-table-item-content { .xy-table-item-content {
flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -168,4 +187,21 @@ export default {
font-size: 15px; font-size: 15px;
padding: 8px 24px; padding: 8px 24px;
} }
::v-deep .ivu-select,
::v-deep .ivu-input-wrapper {
width: 500px;
}
::v-deep .xy-dialog-form-item {
margin-bottom: 0;
position: relative;
}
::v-deep .xy-dialog-form-item .ivu-form-item-error-tip {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 510px;
margin-left: 10px;
line-height: 1;
padding-top: 0;
}
</style> </style>

66
src/views/storages/warehouse.vue
Unescape View File

@ -5,14 +5,15 @@
<slot> <slot>
<div style="display: flex;justify-content: flex-start;flex-wrap: wrap;"> <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
<Input v-model="select.keyword" style="width: 200px;margin-right: 10px;" placeholder="库房名称" /> <Input v-model="select.keyword" style="width: 200px;margin-right: 10px;" placeholder="库房名称" />
<Select v-model="select.type" style="width: 200px;margin-right: 10px;" placeholder="仓库类型"> <Select v-model="select.type" @on-change="handleTypeChange" style="width: 200px;margin-right: 10px;" placeholder="仓库类型">
<Option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.name }}</Option> <Option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.name }}</Option>
</Select> </Select>
<Select v-model="select.name" style="width: 200px;margin-right: 10px;" placeholder="仓库名称"> <Select v-model="select.name" style="width: 200px;margin-right: 10px;" placeholder="仓库名称">
<Option v-for="item in nameList" :key="item.id" :value="item.id">{{ item.name }}</Option> <Option v-for="item in nameList" :key="item.id" :value="item.id">{{ item.cangkumingcheng }}</Option>
</Select> </Select>
<Button type="primary" @click="getWarehouseList">查询</Button> <Button type="primary" @click="resetSelect">重置</Button>
<Button type="primary" style="margin-left: 10px;" @click="$refs.addWarehouse.open('add')">添加</Button> <Button type="primary" style="margin-left: 8px;" @click="getWarehouseList">查询</Button>
<Button type="primary" style="margin-left: 8px;" @click="$refs.addWarehouse.open('add')">添加</Button>
<!-- <Button icon="ios-add" type="primary" style="margin-left: 10px;" <!-- <Button icon="ios-add" type="primary" style="margin-left: 10px;"
@click="$refs['imports'].show()">导入</Button> --> @click="$refs['imports'].show()">导入</Button> -->
</div> </div>
@ -41,7 +42,8 @@
<script> <script>
import { import {
destroy destroy,
index
} from "@/api/system/baseForm.js" } from "@/api/system/baseForm.js"
import { getWarehouseTypeList, destroyWarehouseType } from '@/api/system/warehouse' import { getWarehouseTypeList, destroyWarehouseType } from '@/api/system/warehouse'
import { getStorehouseTypeList } from '@/api/system/storehouseType' import { getStorehouseTypeList } from '@/api/system/storehouseType'
@ -75,20 +77,16 @@
width: 60, width: 60,
}, { }, {
label: '仓库类型', label: '仓库类型',
prop: 'type_name', prop: 'materialstorages.storehouse.name',
minWidth: 120 minWidth: 120
}, { }, {
label: '仓库名称', label: '仓库名称',
prop: 'warehouse_name', prop: 'materialstorages.cangkumingcheng',
minWidth: 120 minWidth: 120
}, { }, {
label: '库房名称', label: '库房名称',
prop: 'name', prop: 'name',
minWidth: 120 minWidth: 120
}, {
label: '备注',
prop: 'remark',
minWidth: 200,
}, { }, {
label: '创建日期', label: '创建日期',
prop: 'created_at', prop: 'created_at',
@ -123,11 +121,32 @@
this.$message.error('获取仓库类型列表失败'); this.$message.error('获取仓库类型列表失败');
} }
}, },
async getWarehouseListByType(typeId) {
try {
const res = await index({
table_name: 'materialstorages',
filter: [{
key: 'storehouses_id',
op: 'eq',
value: typeId
}]
});
this.nameList = res.data;
} catch (e) {
this.$message.error('获取仓库列表失败');
}
},
handleTypeChange(typeId) {
this.select.type = typeId;
this.select.name = ''; // 清空仓库名称选择
this.getWarehouseListByType(typeId);
},
async getWarehouseList() { async getWarehouseList() {
try { try {
const formData = new FormData(); const formData = new FormData();
formData.append('page', this.select.page); formData.append('page', this.select.page);
formData.append('page_size', this.select.page_size); formData.append('page_size', this.select.page_size);
formData.append('show_relation', 'materialstorages.storehouse');
// 添加筛选条件 // 添加筛选条件
if (this.select.keyword) { if (this.select.keyword) {
@ -135,15 +154,15 @@
formData.append('filter[0][op]', 'like'); formData.append('filter[0][op]', 'like');
formData.append('filter[0][value]', this.select.keyword); formData.append('filter[0][value]', this.select.keyword);
} }
if (this.select.type) { if (this.select.type) {
formData.append('filter[1][key]', 'type_id'); formData.append('storehouses_id', this.select.type);
formData.append('filter[1][op]', 'eq');
formData.append('filter[1][value]', this.select.type);
} }
if (this.select.name) { if (this.select.name) {
formData.append('filter[2][key]', 'warehouse_id'); formData.append('filter[0][key]', 'materialstorages_id');
formData.append('filter[2][op]', 'eq'); formData.append('filter[0][op]', 'eq');
formData.append('filter[2][value]', this.select.name); formData.append('filter[0][value]', this.select.name);
} }
const res = await getWarehouseTypeList(formData); const res = await getWarehouseTypeList(formData);
@ -184,6 +203,19 @@
const minTableHeight = 600; // 至少能展示一页数据 const minTableHeight = 600; // 至少能展示一页数据
this.tableHeight = Math.max(windowHeight - header - 100, minTableHeight); this.tableHeight = Math.max(windowHeight - header - 100, minTableHeight);
}, },
resetSelect() {
this.select = {
page: 1,
page_size: 10,
keyword: '',
type: '',
name: '',
table_name: 'materialstorages',
area: ''
};
this.nameList = [];
this.getWarehouseList();
},
} }
} }
</script> </script>

Write Preview
Loading…
Cancel
Save