lynn
1 year ago
parent
6da7cc8eca
commit
42ea639bb4
@ -0,0 +1,30 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取库房列表
|
||||
export function getWarehouseTypeList(data) {
|
||||
return request({
|
||||
url: '/api/admin/warehouse/index',
|
||||
method: 'post',
|
||||
data,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除库房
|
||||
export function destroyWarehouseType(id) {
|
||||
return request({
|
||||
url: '/api/admin/warehouse/destroy?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增或更新库房
|
||||
export function saveWarehouseType(data) {
|
||||
return request({
|
||||
url: '/api/admin/warehouse/save',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<div class="table-page-container">
|
||||
<div ref="lxHeader">
|
||||
<lx-header icon="md-apps" text="库房管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<slot>
|
||||
<div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
|
||||
<Input v-model="select.keyword" style="width: 200px;margin-right: 10px;" placeholder="库房名称" />
|
||||
<Select v-model="select.type" style="width: 200px;margin-right: 10px;" placeholder="仓库类型">
|
||||
<Option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.name }}</Option>
|
||||
</Select>
|
||||
<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>
|
||||
</Select>
|
||||
<Button type="primary" @click="getWarehouseList">查询</Button>
|
||||
<Button type="primary" style="margin-left: 10px;" @click="$refs.addWarehouse.open('add')">添加</Button>
|
||||
<!-- <Button icon="ios-add" type="primary" style="margin-left: 10px;"
|
||||
@click="$refs['imports'].show()">导入</Button> -->
|
||||
</div>
|
||||
</slot>
|
||||
</lx-header>
|
||||
</div>
|
||||
|
||||
<div class="table-flex-content">
|
||||
<xy-table :list="list" :total="total" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
|
||||
:table-item="table" size="medium" :height="tableHeight" style="border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08); width: 100%;">
|
||||
<template v-slot:btns>
|
||||
<el-table-column label="操作" align="center" min-width="140" header-align="center" class-name="table-col-action">
|
||||
<template slot-scope="scope">
|
||||
<div style="display: flex; gap: 8px; justify-content: center;">
|
||||
<Button type="primary" size="small" style="border-radius: 6px;" @click="$refs.addWarehouse.open('editor', scope.row)">编辑</Button>
|
||||
<Button type="primary" style="margin-left: 0; border-radius: 6px;" size="small" ghost @click="delRow(scope.row.id)">删除</Button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</xy-table>
|
||||
<AddWarehouse ref="addWarehouse" :warehouseList="list" @refresh="getWarehouseList"></AddWarehouse>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
destroy
|
||||
} from "@/api/system/baseForm.js"
|
||||
import { getWarehouseTypeList, destroyWarehouseType } from '@/api/system/warehouse'
|
||||
import { getStorehouseTypeList } from '@/api/system/storehouseType'
|
||||
import AddWarehouse from './components/addWarehouse.vue'
|
||||
import {
|
||||
getparameteritem
|
||||
} from "@/api/system/dictionary.js"
|
||||
export default {
|
||||
components: {
|
||||
AddWarehouse,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
select: {
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
keyword: '',
|
||||
type: '',
|
||||
name: '',
|
||||
table_name: 'materialstorages',
|
||||
area:''
|
||||
},
|
||||
typeList: [],
|
||||
nameList: [],
|
||||
areaList:[],
|
||||
total: 0,
|
||||
list: [],
|
||||
table: [{
|
||||
label: '序号',
|
||||
type: 'index',
|
||||
width: 60,
|
||||
}, {
|
||||
label: '仓库类型',
|
||||
prop: 'type_name',
|
||||
minWidth: 120
|
||||
}, {
|
||||
label: '仓库名称',
|
||||
prop: 'warehouse_name',
|
||||
minWidth: 120
|
||||
}, {
|
||||
label: '库房名称',
|
||||
prop: 'name',
|
||||
minWidth: 120
|
||||
}, {
|
||||
label: '备注',
|
||||
prop: 'remark',
|
||||
minWidth: 200,
|
||||
}, {
|
||||
label: '创建日期',
|
||||
prop: 'created_at',
|
||||
minWidth: 120,
|
||||
formatter: (cell, data, value) => {
|
||||
return value ? value.substring(0, 10) : ''
|
||||
}
|
||||
}],
|
||||
tableHeight: 550 // 默认高度
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getWarehouseList()
|
||||
this.getTypeList()
|
||||
},
|
||||
mounted() {
|
||||
this.calcTableHeight();
|
||||
window.addEventListener('resize', this.calcTableHeight);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calcTableHeight);
|
||||
},
|
||||
methods: {
|
||||
async getTypeList() {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('page', 1);
|
||||
formData.append('page_size', 1000);
|
||||
const res = await getStorehouseTypeList(formData);
|
||||
this.typeList = res.data;
|
||||
} catch (e) {
|
||||
this.$message.error('获取仓库类型列表失败');
|
||||
}
|
||||
},
|
||||
async getWarehouseList() {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('page', this.select.page);
|
||||
formData.append('page_size', this.select.page_size);
|
||||
|
||||
// 添加筛选条件
|
||||
if (this.select.keyword) {
|
||||
formData.append('filter[0][key]', 'name');
|
||||
formData.append('filter[0][op]', 'like');
|
||||
formData.append('filter[0][value]', this.select.keyword);
|
||||
}
|
||||
if (this.select.type) {
|
||||
formData.append('filter[1][key]', 'type_id');
|
||||
formData.append('filter[1][op]', 'eq');
|
||||
formData.append('filter[1][value]', this.select.type);
|
||||
}
|
||||
if (this.select.name) {
|
||||
formData.append('filter[2][key]', 'warehouse_id');
|
||||
formData.append('filter[2][op]', 'eq');
|
||||
formData.append('filter[2][value]', this.select.name);
|
||||
}
|
||||
|
||||
const res = await getWarehouseTypeList(formData);
|
||||
this.list = res.data;
|
||||
this.total = res.total;
|
||||
} catch (e) {
|
||||
this.$message.error('获取库房列表失败');
|
||||
}
|
||||
},
|
||||
pageChange(e) {
|
||||
this.select.page = e
|
||||
this.getWarehouseList()
|
||||
},
|
||||
pageSizeChange(e){
|
||||
this.select.page_size = e
|
||||
this.getWarehouseList()
|
||||
},
|
||||
delRow(id) {
|
||||
if (id) {
|
||||
this.$confirm('确认要删除该库房吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
await destroyWarehouseType(id);
|
||||
this.$message.success('删除成功');
|
||||
this.getWarehouseList();
|
||||
} catch (e) {
|
||||
this.$message.error('删除失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
calcTableHeight() {
|
||||
const header = this.$refs.lxHeader ? this.$refs.lxHeader.offsetHeight : 0;
|
||||
const windowHeight = window.innerHeight;
|
||||
const minTableHeight = 600; // 至少能展示一页数据
|
||||
this.tableHeight = Math.max(windowHeight - header - 100, minTableHeight);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.table-page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
.table-flex-content {
|
||||
flex: 1 1 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
.el-table th {
|
||||
background: #f5f7fa !important;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
}
|
||||
.el-table td {
|
||||
font-size: 14px;
|
||||
height: 48px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 让操作列自动填充剩余空间 */
|
||||
.table-col-action {
|
||||
flex: 1 !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue