<template>
|
<div class="home-container">
|
<div style="height: 100%">
|
<el-row class="homeCard">
|
<div class="basic-line">
|
<span>在库状态：</span>
|
<el-select class="input-box" v-model="goodsDetailState.listQuery.searchParams.irStatus" placeholder="请选择在库状态" clearable filterable>
|
<el-option
|
v-for="item in goodsDetailState.irStatusList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="basic-line">
|
<span>rfid：</span>
|
<el-input class="input-box" v-model="goodsDetailState.listQuery.searchParams.rfid" placeholder="rfid" clearable> </el-input>
|
</div>
|
|
<div style="padding-bottom: 10px">
|
<el-button size="large" type="primary" class="ml10" v-throttle @click="refreshGoodsDetailData">
|
<el-icon>
|
<ele-Search />
|
</el-icon>
|
查询
|
</el-button>
|
</div>
|
</el-row>
|
<div class="homeCard">
|
<el-row class="cardTop">
|
<el-col :span="12" class="mainCardBtn">
|
<el-button type="primary" size="default" @click="openGoodsDetailAdd('新增入库','')">新增入库</el-button>
|
<el-button type="danger" size="default" @click="deleteBatchGoodsDetail('批量删除','')">批量删除</el-button>
|
<el-button type="warning" size="default" @click="checkInAndOut('批量出库','')">批量出库</el-button>
|
<!-- <el-button type="success" size="default" @click="checkInAndOut('批量重新入库','')">批量重新入库</el-button>-->
|
</el-col>
|
</el-row>
|
<div class="main-card">
|
<el-table
|
:data="goodsDetailState.goodsDetailData"
|
style="width: 100%" height="calc(100% - 100px)"
|
:header-cell-style="{ background: '#fafafa' }"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" width="55" />
|
<el-table-column prop="materialNo" label="物资编号" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="bigClassifyName" label="分类" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="depName" label="仓库/部门" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="name" label="物资名称" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="rfid" label="绑定RFID" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="consumableName" label="是否是耗材" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="validTypeName" label="保质期" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="irStatusName" label="当前状态" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="wareHousingTime" label="入库时间" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="deliveryTime" label="出库时间" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="validStatusName" label="有效" show-overflow-tooltip></el-table-column>
|
<el-table-column label="操作" width="250" align="center">
|
<template #default="scope">
|
<el-button size="small" text type="primary" :icon="Edit" @click="openGoodsDetailEdit('编辑', scope.row)">编辑</el-button>
|
<el-button v-if="scope.row.irStatus === 1" size="small" text type="success" :icon="Edit" @click="checkInAndOut('重新入库', scope.row)">重新入库</el-button>
|
<el-button v-if="scope.row.irStatus === 0" size="small" text type="warning" :icon="Edit" @click="checkInAndOut('单独出库', scope.row)">单独出库</el-button>
|
<el-button size="small" text type="danger" :icon="Delete" @click="deleteSingleGoodsDetail(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<br />
|
<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="goodsDetailState.listQuery.pageIndex" background v-model:page-size="goodsDetailState.listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="goodsDetailState.total" class="page-position"> </el-pagination>
|
</div>
|
</div>
|
</div>
|
<goods-detail-edit ref="goodsDetailEditRef" @refreshData="initGoodsDetailData"></goods-detail-edit>
|
<goods-detail-add ref="goodsDetailAddRef" @refreshData="initGoodsDetailData"></goods-detail-add>
|
<check-out ref="checkOutRef" @refreshGoodsDetail="initGoodsDetailData"></check-out>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import {onMounted, reactive, ref} from 'vue'
|
import { Edit, Delete, } from '@element-plus/icons-vue';
|
import {ElMessage, ElMessageBox} from "element-plus";
|
import {
|
GoodsDetailDataType,
|
GoodsDetailStateType
|
} from "/@/views/facilityManagement/goodsDetailManage/index";
|
import {goodsDetailApi} from "/@/api/facilityManagement/goodsDetailManage";
|
import { useRoute } from "vue-router";
|
import GoodsDetailEdit from './components/goodsDetailEdit.vue'
|
import CheckOut from "/@/views/facilityManagement/goodsDetailManage/components/checkOut.vue";
|
import GoodsDetailAdd from "/@/views/facilityManagement/goodsDetailManage/components/goodsDetailAdd.vue";
|
|
const route = useRoute()
|
const goodsDetailEditRef = ref()
|
const goodsDetailAddRef = ref()
|
const checkOutRef = ref()
|
|
const goodsDetailState = reactive<GoodsDetailStateType>({
|
goodsDetailData:[],
|
departmentList:[],
|
irStatusList:[{id: 0, name:'在库'}, {id: 1, name:'已出库'}],
|
listQuery:{
|
pageSize: 10,
|
pageIndex: 1,
|
searchParams: {
|
irStatus: null,
|
rfid: null,
|
smId: null
|
}
|
},
|
checkOutQuery: {
|
id: null,
|
claimantId: null,
|
},
|
checkInQuery: {
|
ids: [],
|
},
|
checkOutNames: '',
|
total:0,
|
})
|
|
const initGoodsDetailData = async () => {
|
let res = await goodsDetailApi().getGoodsDetailList(goodsDetailState.listQuery)
|
if(res.data.code === '200'){
|
goodsDetailState.goodsDetailData = res.data.data;
|
goodsDetailState.total = res.data.total;
|
}else{
|
ElMessage({
|
type:'warning',
|
message:res.data.msg
|
})
|
}
|
};
|
|
const openGoodsDetailEdit = (title: string, value: GoodsDetailDataType) => {
|
goodsDetailEditRef.value.openGoodsDetailEditDialog(title, value, goodsDetailState.departmentList)
|
};
|
|
const openGoodsDetailAdd = (title: string, value: GoodsDetailDataType) => {
|
goodsDetailAddRef.value.openGoodsDetailAddDialog(title, value, goodsDetailState.departmentList)
|
};
|
|
const checkInAndOut = (title: string, value:GoodsDetailDataType) => {
|
if(title === '重新入库'){
|
goodsDetailState.checkInQuery = {}
|
goodsDetailState.checkInQuery.id = value.id
|
ElMessageBox.confirm(`此操作将重新入库：“${value.name}”，是否继续?`, '提示', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(async () => {
|
let res = await goodsDetailApi().checkInOne(goodsDetailState.checkInQuery);
|
if (res.data.code === '200') {
|
ElMessage({
|
type: 'success',
|
duration: 2000,
|
message: '重新入库成功'
|
});
|
await initGoodsDetailData();
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
})
|
.catch(() => {});
|
}else if(title === '批量重新入库'){
|
if(goodsDetailState.checkInQuery.ids?.length){
|
ElMessageBox.confirm(`此操作将把所选中全部重新入库，是否继续?`, '提示', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(async () => {
|
let res = await goodsDetailApi().checkInMore(goodsDetailState.checkInQuery);
|
if (res.data.code === '200') {
|
ElMessage({
|
type: 'success',
|
duration: 2000,
|
message: '批量重新入库成功'
|
});
|
await initGoodsDetailData();
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
})
|
.catch(() => {});
|
}else{
|
ElMessage({
|
type:'warning',
|
message: '请选择要批量重新入库的物资'
|
})
|
}
|
}else if(title ==='单独出库'){
|
checkOutRef.value.openCheckOutDialog(title, value, [], null);
|
}else{
|
if(goodsDetailState.checkInQuery.ids?.length){
|
checkOutRef.value.openCheckOutDialog(title, null, goodsDetailState.checkInQuery.ids, goodsDetailState.checkOutNames);
|
}else{
|
ElMessage({
|
type:'warning',
|
message: '请选择要出库的物资'
|
})
|
}
|
}
|
}
|
|
const handleSelectionChange = (val: Array<GoodsDetailDataType>) => {
|
goodsDetailState.checkInQuery.ids = val.map((item) => {
|
return item.id;
|
}) as Array<number>;
|
goodsDetailState.checkOutNames = val.map((item) => {
|
return item.name
|
}).join(',')
|
};
|
|
const getGoodsByLevel = async () => {
|
let res = await goodsDetailApi().getGoodsListByLevel();
|
if (res.data.code === '200') {
|
goodsDetailState.departmentList = res.data.data;
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
};
|
|
const deleteSingleGoodsDetail = (row: any) => {
|
ElMessageBox.confirm(`此操作将永久删除该物资：“${row.name}”，是否继续?`, '提示', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(async () => {
|
let res = await goodsDetailApi().deleteSingleGoods({ id: row.id });
|
if (res.data.code === '200') {
|
ElMessage({
|
type: 'success',
|
duration: 2000,
|
message: '删除成功'
|
});
|
await initGoodsDetailData();
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
})
|
.catch(() => {});
|
};
|
|
const deleteBatchGoodsDetail = (row: any) => {
|
ElMessageBox.confirm(`此操作将永久删除这些物资，是否继续?`, '提示', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(async () => {
|
let res = await goodsDetailApi().deleteBatchGoods({ ids: goodsDetailState.checkInQuery.ids });
|
if (res.data.code === '200') {
|
ElMessage({
|
type: 'success',
|
duration: 2000,
|
message: '删除成功'
|
});
|
await initGoodsDetailData();
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
})
|
.catch(() => {});
|
};
|
|
const refreshGoodsDetailData = () => {
|
initGoodsDetailData();
|
};
|
// 分页改变
|
const onHandleSizeChange = (val: number) => {
|
goodsDetailState.listQuery.pageSize = val;
|
initGoodsDetailData();
|
};
|
// 分页改变
|
const onHandleCurrentChange = (val: number) => {
|
goodsDetailState.listQuery.pageIndex = val;
|
initGoodsDetailData();
|
};
|
|
// const getDepartmentData = async () => {
|
// let res = await departmentApi().getDepartmentList();
|
// if (res.data.code === '200') {
|
// goodsDetailState.departmentList = res.data.data;
|
// } else {
|
// ElMessage({
|
// type: 'warning',
|
// message: res.data.msg
|
// });
|
// }
|
// };
|
|
onMounted(() => {
|
goodsDetailState.listQuery.searchParams.smId = (Number(route.query.id) || null)
|
initGoodsDetailData();
|
// getDepartmentData();
|
getGoodsByLevel();
|
})
|
</script>
|
|
<style scoped lang="scss">
|
$homeNavLengh: 8;
|
.home-container {
|
height: calc(100vh - 144px);
|
box-sizing: border-box;
|
overflow: hidden;
|
.homeCard {
|
width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
background: #fff;
|
border-radius: 4px;
|
|
.main-card {
|
width: 100%;
|
height: 100%;
|
.cardTop {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
.mainCardBtn {
|
margin: 0;
|
}
|
}
|
.pageBtn {
|
height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: right;
|
|
.demo-pagination-block + .demo-pagination-block {
|
margin-top: 10px;
|
}
|
.demo-pagination-block .demonstration {
|
margin-bottom: 16px;
|
}
|
}
|
}
|
&:last-of-type {
|
height: calc(100% - 100px);
|
}
|
}
|
.el-row {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
.grid-content {
|
align-items: center;
|
min-height: 36px;
|
}
|
|
.topInfo {
|
display: flex;
|
align-items: center;
|
font-size: 16px;
|
font-weight: bold;
|
|
& > div {
|
white-space: nowrap;
|
margin-right: 20px;
|
}
|
}
|
}
|
}
|
.stepItem {
|
width: 100%;
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 30px;
|
margin-left: 30px;
|
padding-bottom: 30px;
|
border-left: 2px solid #ccc;
|
&:first-of-type {
|
margin-top: 30px;
|
}
|
&:last-of-type {
|
margin-bottom: 0;
|
border-left: none;
|
}
|
.stepNum {
|
width: 30px;
|
height: 30px;
|
border-radius: 15px;
|
box-sizing: border-box;
|
color: #333;
|
border: 1px solid #999;
|
line-height: 28px;
|
text-align: center;
|
margin-right: 10px;
|
margin-left: -16px;
|
margin-top: -30px;
|
}
|
.stepCard {
|
width: 100%;
|
margin-top: -30px;
|
|
.box-card {
|
width: 100%;
|
&:deep(.el-card__header) {
|
padding: 10px 15px;
|
}
|
.card-header {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
& > div:first-of-type {
|
margin-right: 80px;
|
font-size: 18px;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
&:hover .card-header {
|
color: #0098f5;
|
}
|
&:hover .stepNum {
|
border: 2px solid #0098f5;
|
color: #0098f5;
|
}
|
}
|
</style>
|
