<template>
|
<div class="system-add-menu-container">
|
<el-dialog :title="returnAndWatchState.title" :close-on-click-modal="false" v-model="returnAndWatchState.showReturnAndWatchDialog" width="50%">
|
<el-tabs class="active" v-model="returnAndWatchState.activeName">
|
<el-tab-pane label="未归还" name="noReturn">
|
<el-table
|
:data="returnAndWatchState.noReturnData"
|
border fit highlight-current-row lazy
|
:header-cell-style="{ background: '#fafafa' }"
|
style="width: 100%"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column v-if="returnAndWatchState.ifShow === true" type="selection" width="55"/>
|
<el-table-column prop="materialName" label="物资名称" show-overflow-tooltip align="center"/>
|
<el-table-column prop="smdId" label="物资编号" show-overflow-tooltip align="center"/>
|
<el-table-column prop="materialStatus" label="物资状态" show-overflow-tooltip align="center">
|
<template #default="scope">
|
<span>
|
{{ filterMaterialStatus(scope.row.materialStatus) }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="备注" show-overflow-tooltip align="center"/>
|
<el-table-column label="操作" width="150" align="center">
|
<template #default="scope">
|
<el-button size="small" v-if="returnAndWatchState.ifShow === true" text type="danger" :icon="Delete" @click="invalidDeal(scope.row)">无效处理</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="padding-top: 20px" align="center">
|
<span>
|
<el-button type="primary" v-if="returnAndWatchState.ifShow === true" @click="returnConfirm" v-throttle size="default">归 还</el-button>
|
</span>
|
</div>
|
|
</el-tab-pane>
|
<el-tab-pane label="已归还" name="return">
|
<el-table
|
:data="returnAndWatchState.returnData"
|
border fit highlight-current-row lazy
|
:header-cell-style="{ background: '#fafafa' }"
|
style="width: 100%">
|
<el-table-column prop="materialName" label="物资名称" show-overflow-tooltip align="center"/>
|
<el-table-column prop="smdId" label="物资编号" show-overflow-tooltip align="center"/>
|
<el-table-column prop="materialStatus" label="物资状态" show-overflow-tooltip align="center">
|
<template #default="scope">
|
<span>
|
{{ filterMaterialStatus(scope.row.materialStatus) }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="备注" show-overflow-tooltip align="center"/>
|
</el-table>
|
</el-tab-pane>
|
<el-tab-pane label="耗材" name="Invalid">
|
<el-table
|
:data="returnAndWatchState.invalidData"
|
border fit highlight-current-row lazy
|
:header-cell-style="{ background: '#fafafa' }"
|
style="width: 100%">
|
<el-table-column prop="materialName" label="物资名称" show-overflow-tooltip align="center"/>
|
<el-table-column prop="smdId" label="物资编号" show-overflow-tooltip align="center"/>
|
<el-table-column prop="materialStatus" label="物资状态" show-overflow-tooltip align="center">
|
<template #default="scope">
|
<span>
|
{{ filterMaterialStatus(scope.row.materialStatus) }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="备注" show-overflow-tooltip align="center"/>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</el-dialog>
|
<invalid-deal-dialog ref="invalidDealDialogRef" @refreshInvalidDeal="refreshInvalidDeal"></invalid-deal-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import {computed, nextTick, onMounted, reactive, ref, toRefs, watch} from 'vue'
|
import { Edit, Delete, } from '@element-plus/icons-vue';
|
import {
|
claimReturnDataType, InvalidDealFormType,
|
materialType,
|
ReturnAndWatchType
|
} from "/@/views/facilityManagement/claimReturnRecords/index";
|
import {ElMessage, ElMessageBox} from "element-plus";
|
import {claimReturnRecordsApi} from "/@/api/facilityManagement/claimReturnRecords";
|
import InvalidDealDialog from './invalidDealDialog.vue'
|
|
const invalidDealDialogRef = ref()
|
|
const returnAndWatchState = reactive<ReturnAndWatchType>({
|
title: '',
|
ifShow: false,
|
goodsClassifyTitle: '',
|
showReturnAndWatchDialog: false,
|
activeName: 'noReturn',
|
goodsClassifyForm: {
|
id: null,
|
materialClassifyName: '',
|
parentId: null,
|
},
|
goodsClassifyRules: {
|
|
},
|
returnData: [],
|
noReturnData: [],
|
invalidData: [],
|
returnFormList: {
|
receiveBaseId: null,
|
materialList: []
|
},
|
reasonList:[
|
{id: 0, name:'完好'},
|
{id: 1, name:'损坏'},
|
{id: 2, name:'丢失'},
|
{id: 3, name:'过期'},
|
{id: 4, name:'其他'}
|
]
|
});
|
|
const openReturnAndWatchDialog = (title: string, value: claimReturnDataType ) => {
|
returnAndWatchState.showReturnAndWatchDialog = true;
|
returnAndWatchState.returnFormList.receiveBaseId = value.id;
|
if(title === '归还'){
|
returnAndWatchState.ifShow = true;
|
returnAndWatchState.title = '归还记录';
|
returnAndWatchState.returnData = value.materialList.filter(item => item.revertStatus === 0);
|
returnAndWatchState.noReturnData = JSON.parse(JSON.stringify(value.materialList.filter(item => item.revertStatus === 1)));
|
returnAndWatchState.invalidData = value.materialList.filter(item => item.revertStatus !== 0 && item.revertStatus !== 1);
|
}else {
|
returnAndWatchState.ifShow = false;
|
returnAndWatchState.title = '查看物资';
|
returnAndWatchState.returnData = value.materialList.filter(item => item.revertStatus === 0);
|
returnAndWatchState.noReturnData = value.materialList.filter(item => item.revertStatus === 1);
|
returnAndWatchState.invalidData = value.materialList.filter(item => item.revertStatus !== 0 && item.revertStatus !== 1);
|
}
|
};
|
|
const returnConfirm = () => {
|
if(returnAndWatchState.returnFormList.materialList.length > 0){
|
ElMessageBox.confirm(`此操作将把所选中物资全部归还，是否继续?`, '提示', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(async () => {
|
let res = await claimReturnRecordsApi().returnGoods(returnAndWatchState.returnFormList);
|
if (res.data.code === '200') {
|
ElMessage({
|
type: 'success',
|
duration: 2000,
|
message: '物资归还成功'
|
});
|
await refreshReturnTableData()
|
emit('refreshReturnData')
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
})
|
.catch(() => {});
|
}else{
|
ElMessage({
|
type:'warning',
|
message: '请选择要归还的物资'
|
})
|
}
|
};
|
|
const refreshReturnTableData = async () => {
|
let res = await claimReturnRecordsApi().refreshReturnAndNoReturn({id: returnAndWatchState.returnFormList.receiveBaseId})
|
if(res.data.code === '200'){
|
returnAndWatchState.returnData = res.data.data.materialList.filter((item: materialType) => item.revertStatus === 0);
|
returnAndWatchState.noReturnData = res.data.data.materialList.filter((item: materialType) => item.revertStatus === 1);
|
returnAndWatchState.invalidData = res.data.data.materialList.filter((item: materialType) => item.revertStatus !== 0 && item.revertStatus !== 1);
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
|
const invalidDeal = (value: materialType) => {
|
invalidDealDialogRef.value.openInvalidDealDialog(value)
|
};
|
|
const refreshInvalidDeal = (value: InvalidDealFormType) => {
|
let returnDataNum = returnAndWatchState.noReturnData.findIndex(item => item.id == value.id)
|
returnAndWatchState.noReturnData[returnDataNum].materialStatus = value.reason as number
|
returnAndWatchState.noReturnData[returnDataNum].remark = value.remark as string
|
for(let i in returnAndWatchState.returnFormList.materialList){
|
if(returnAndWatchState.returnFormList.materialList[i].receiveId === value.id){
|
returnAndWatchState.returnFormList.materialList[i] = {
|
receiveId: value.id,
|
materialStatus: value.reason,
|
remark: value.remark,
|
}
|
}
|
}
|
};
|
|
const handleSelectionChange = (val: materialType []) => {
|
returnAndWatchState.returnFormList.materialList = val.map((item: materialType) => {
|
return {
|
receiveId: item.id,
|
materialStatus: item.materialStatus,
|
remark: item.remark,
|
}
|
})
|
};
|
|
const filterMaterialStatus = (value: number) => {
|
return returnAndWatchState.reasonList.find(item => item.id === value)?.name
|
};
|
|
const emit = defineEmits(['refreshReturnData']);
|
|
defineExpose({
|
openReturnAndWatchDialog,
|
});
|
|
|
</script>
|
|
<style scoped>
|
/*:deep(.el-overlay .el-overlay-dialog .el-dialog .el-dialog__body) {*/
|
/* padding-bottom: 20px !important;*/
|
/*}*/
|
:deep(.el-table .big-row) {
|
font-size: 16px !important;
|
font-weight: 700;
|
}
|
|
</style>
|
