351 lines
9.2 KiB
Vue
Raw Normal View History

2025-03-21 09:20:29 +08:00
<template>
2025-04-03 01:06:09 +08:00
<div class="system-user-container layout-padding">
<el-card class="layout-padding-auto" shadow="hover">
<avue-crud
2025-03-27 23:36:30 +08:00
ref="crudRef"
:data="state.data"
:option="state.option"
v-model:page="state.page"
@on-load="onLoadFun"
2025-04-03 01:06:09 +08:00
@selection-change="selectionChange"
:table-loading="state.loading"
2025-03-27 23:36:30 +08:00
>
2025-04-03 01:06:09 +08:00
<template #deliveryDate="{ row }">{{ row.ifHidden === 0 ? row.deliveryDate : '' }}</template>
<template #purchaseOrderFBillNo="{ row }">{{ row.ifHidden === 0 ? row.purchaseOrderFBillNo : '' }}</template>
<template #sheet="{ row }">{{ row.ifHidden === 0 ? row.sheet : '' }}</template>
<template #fBillNo="{ row }">{{ row.ifHidden === 0 ? row.fBillNo : '' }}</template>
<template #materialName="{ row }">
<el-tooltip :content="row.materialName" placement="top">
<div class="multi-line-omit">{{ row.materialName }}</div>
</el-tooltip>
</template>
<template #supplierName="{ row }">
<el-tooltip :content="row.supplierName" placement="top">
<div class="multi-line-omit">{{ row.supplierName }}</div>
</el-tooltip>
</template>
<template #menu-left>
<div class="selectBoxes">
<div class="selectItem">
<el-input v-model="state.formData.fBillNo" style="width: 240px" placeholder="单据编号" size="default" />
</div>
<div class="selectItem">
<el-date-picker
v-model="state.elDatePicker"
style="width: 560px"
type="daterange"
range-separator="-"
start-placeholder="开始发货日期"
end-placeholder="发货结束日期"
size="default"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
@change="elDatePickerFun"
/>
</div>
<el-button type="primary" size="default" @click="selectFun">搜索</el-button>
<el-button size="default" @click="resetFun">重置</el-button>
<el-button type="primary" size="default" @click="state.selectedDataShow = true">
<span>已选中 {{ state.selectedData.length }} 条数据去打印</span>
</el-button>
</div>
</template>
<template #menu>
2025-03-21 09:20:29 +08:00
<div class="btnList">
2025-04-03 01:06:09 +08:00
<el-button type="text" @click="state.selectedDataShow = true">打印单据</el-button>
2025-03-21 09:20:29 +08:00
</div>
2025-04-03 01:06:09 +08:00
</template>
</avue-crud>
</el-card>
2025-03-21 09:20:29 +08:00
<selectedData :showes="state.selectedDataShow"/>
2025-04-03 01:06:09 +08:00
</div>
2025-03-21 09:20:29 +08:00
</template>
<script lang="ts" setup>
2025-04-03 01:06:09 +08:00
import { reactive, onMounted, computed, nextTick, ref } from 'vue';
import { useRouter } from 'vue-router';
import { listApi } from '../../api/list/index';
2025-03-24 16:46:34 +08:00
import { useI18n } from 'vue-i18n';
2025-04-03 01:06:09 +08:00
import SelectedData from '/@/views/materialReceiptNotice/selectedData.vue';
import { ElMessage } from 'element-plus';
2025-03-27 23:36:30 +08:00
const { t } = useI18n();
2025-04-03 01:06:09 +08:00
const router = useRouter();
2025-03-21 09:20:29 +08:00
// 定义变量内容
const state = reactive({
2025-04-03 01:06:09 +08:00
page: {
total: 1000,
currentPage: 1,
pageSize: 30,
},
option: {
height: '720',
tip: false,
index: false,
menuWidth: 120,
border: true,
delBtn: false,
editBtn: false,
align: 'center',
// searchLabelWidth:100,
selection: true,
searchMenuSpan: 3,
addBtn: false,
column: [
{
label: computed(() => t('message.list.ReceivingDate')),
prop: 'deliveryDate',
type: 'datetime',
searchSpan: 12,
searchRange: true,
width:'160'
},
{ label: '采购订单号', prop: 'purchaseOrderFBillNo',width:'120' },
{ label: '发货单号', prop: 'sheet',width:'135' },
{ label: '收料单号', prop: 'fBillNo',width:'120' },
{ label: '美塞斯批号', prop: 'mssSupplierLot',width:'90' },
{ label: '供应商批号', prop: 'fSupplierLot',width:'90' },
{ label: '物料编码', prop: 'materialCode',width:'120' },
{ label: '物料名称', prop: 'materialName' },
{ label: computed(() => t('message.list.PONumber2')), prop: 'purchaseOrderFBillNo',width:'110' },
{ label: computed(() => t('message.list.SupplierCode2')), prop: 'supplierId',width:'90' },
{ label: computed(() => t('message.list.SupplierName2')), prop: 'supplierName',width:'120' },
{ label: '累计收料数量', prop: 'sendedQty',width:'110' },
{ label: '发货数量', prop: 'qty',width:'80' },
{ label: '采购数量', prop: 'purchaseQty',width:'80' },
{ label: '采购单位', prop: 'unitName',width:'80' },
],
},
data: [],
elDatePicker: '',
formData: {
fBillNo: '',
fDateBegin: '',
fDateEmd: '',
fmrpCloseStatus: '',
},
selectedData: [],
chengNuoJiaoQiP: '',
newChengNuoJiaoQiP: '',
2025-04-08 00:14:08 +08:00
selectedDataShow: true,
2025-04-03 01:06:09 +08:00
loading: false,
2025-03-21 09:20:29 +08:00
});
2025-04-03 01:06:09 +08:00
const selectionChange = (list: any) => {
nextTick(() => {
state.selectedData = JSON.parse(JSON.stringify(list));
});
};
const chengNuoJiaoQiPFun = (e: string) => {
if (state.selectedData.length != 0) {
let arr: any = [];
if (e === '0') {
state.selectedData.forEach((item: any) => {
arr.push({ id: item.id, newTime: state.chengNuoJiaoQiP });
});
batchSetChengNuoJiaoQiFun(arr);
}
if (e === '1') {
state.selectedData.forEach((item: any) => {
arr.push({ id: item.id, newTime: state.newChengNuoJiaoQiP });
});
batchSetNewChengNuoJiaoQiFun(arr);
}
} else {
ElMessage.warning('请先选中数据');
2025-03-27 23:36:30 +08:00
}
2025-04-03 01:06:09 +08:00
};
const batchSetChengNuoJiaoQiFun = (arr: any) => {
listApi()
.batchSetChengNuoJiaoQi(arr)
.then((res: any) => {
if (res.resultCode === 0) {
ElMessage.success('操作成功');
getList();
state.chengNuoJiaoQiP = '';
}
if (res.resultCode === -1) {
ElMessage.success(res.errorMessage);
state.newChengNuoJiaoQiP = '';
}
});
};
const batchSetNewChengNuoJiaoQiFun = (arr: any) => {
listApi()
.batchSetNewChengNuoJiaoQi(arr)
.then((res: any) => {
if (res.resultCode === 0) {
ElMessage.success('操作成功');
getList();
}
if (res.resultCode === -1) {
ElMessage.success(res.errorMessage);
}
});
};
const generateDocumentsFun = () => {
state.selectedDataShow = false;
getList();
};
//跳转详情
const toPurchaseDetails = (item: any) => {
router.push({
path: '/purchaseDetails',
query: {
topId: item.fiD,
},
});
};
const elDatePickerFun = (val: any) => {
state.formData.fDateBegin = val[0];
state.formData.fDateEmd = val[1];
};
//接口数据处理
const selectFun = () => {
state.page.currentPage = 1;
state.page.pageSize = 30;
getList();
};
const resetFun = () => {
state.page.currentPage = 1;
state.page.pageSize = 20;
state.elDatePicker = '';
state.formData = {
fBillNo: '',
fDateBegin: '',
fDateEmd: '',
fmrpCloseStatus: '',
};
getList();
};
const onLoadFun = (e: any) => {
state.page.currentPage = e.currentPage;
state.page.pageSize = e.pageSize;
getList();
};
2025-03-27 23:36:30 +08:00
const getList = () => {
2025-04-03 01:06:09 +08:00
state.loading = true;
listApi()
.invoiceOrderGetPageList({
condition: state.formData,
pageSize: state.page.pageSize,
page: state.page.currentPage,
})
.then((res: any) => {
state.loading = false;
if (res.resultCode === 0) {
state.data = res.data.dataList;
state.page.total = res.data.total;
}
});
};
2025-03-21 09:20:29 +08:00
// 页面加载时
2025-04-03 01:06:09 +08:00
onMounted(() => {});
2025-03-21 09:20:29 +08:00
</script>
<style lang="scss" scoped>
2025-04-03 01:06:09 +08:00
:deep(.cell) {
padding: 0 8px !important;
}
:deep(.avue-crud__left) {
flex: 1;
}
:deep(.avue-crud__refreshBtn) {
display: none;
}
:deep(.avue-crud__gridBtn) {
display: none;
}
.piliang {
margin-left: 12px;
border: 1px solid #d5d5d5;
border-radius: 8px;
flex: 1;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 4px;
}
2025-03-21 09:20:29 +08:00
.system-user-container {
2025-04-03 01:06:09 +08:00
padding: 0 !important;
}
.multi-line-omit {
word-break: break-all; // 允许单词内自动换行,如果一个单词很长的话
text-overflow: ellipsis; // 溢出用省略号显示
overflow: hidden; // 超出的文本隐藏
display: -webkit-box; // 作为弹性伸缩盒子模型显示
-webkit-line-clamp: 1; // 显示的行
-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
}
.selectBoxes {
display: flex;
flex: 1;
.selectItem {
margin-right: 16px;
display: flex;
}
}
:deep(.avue-crud) {
height: 100%;
width: 100%;
}
:deep(.avue-crud--card) {
display: flex;
flex-direction: column;
flex: 1;
}
:deep(.avue-crud__body) {
flex: 1;
}
:deep(.el-table__header) {
height: 40px;
}
:deep(.el-card__body) {
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
padding: 0 !important;
2025-03-21 09:20:29 +08:00
}
2025-04-03 01:06:09 +08:00
:deep(.el-table__cell) {
padding: 0 !important;
//height: 56px !important;
}
:deep(.el-card) {
padding: 12px;
}
:deep(.el-form) {
flex: 1;
}
.system-user-container {
:deep(.el-card__body) {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
.el-table {
flex: 1;
}
2025-03-21 09:20:29 +08:00
}
}
2025-04-03 01:06:09 +08:00
:deep(.el-col) {
margin-bottom: 16px;
}
2025-03-21 09:20:29 +08:00
</style>