初次对接
This commit is contained in:
@@ -26,8 +26,18 @@
|
||||
<div class="item item3">
|
||||
<VueQr style="width: 150px; height: 150px" :text="state.pageData.f_VHUB_Text" :size="150"></VueQr>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<avue-crud ref="crudRef" :data="props.data" :option="state.option"></avue-crud>
|
||||
<div class="shuming">
|
||||
<div class="nameText">送货人：</div>
|
||||
<div class="dateTime">
|
||||
<span>年</span>
|
||||
<span>月</span>
|
||||
<span>日</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -42,22 +52,7 @@ const props = defineProps({
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
watch(
|
||||
() => props.data,
|
||||
(newData) => {
|
||||
// console.log(JSON.parse(JSON.stringify(newData)))
|
||||
let arr = []
|
||||
arr = JSON.parse(JSON.stringify(newData))
|
||||
// console.log(arr.length)
|
||||
// debugger
|
||||
if(arr.length !== 0){
|
||||
state.pageData.fBillNo = arr[0].fBillNo
|
||||
state.pageData.supplierName = arr[0].supplierName
|
||||
state.pageData.deliveryDate = arr[0].deliveryDate
|
||||
state.pageData.f_VHUB_Text = arr[0].f_VHUB_Text
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const state = reactive({
|
||||
pageData: {
|
||||
fBillNo: '',
|
||||
@@ -90,12 +85,41 @@ const state = reactive({
|
||||
],
|
||||
},
|
||||
});
|
||||
watch(
|
||||
() => props.data,
|
||||
(newData) => {
|
||||
let arr = [];
|
||||
arr = JSON.parse(JSON.stringify(newData));
|
||||
if (arr.length !== 0) {
|
||||
state.pageData.fBillNo = arr[0].fBillNo;
|
||||
state.pageData.supplierName = arr[0].supplierName;
|
||||
state.pageData.deliveryDate = arr[0].deliveryDate;
|
||||
state.pageData.f_VHUB_Text = arr[0].f_VHUB_Text;
|
||||
}
|
||||
},
|
||||
{ immediate: true,deep:true }
|
||||
);
|
||||
defineExpose({
|
||||
orderPrintingRef,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.shuming{
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
.nameText{
|
||||
margin-right: 120px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
.dateTime{
|
||||
margin-right: 50px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.dateTime > span{
|
||||
margin-left: 42px;
|
||||
}
|
||||
:deep(.el-table__inner-wrapper) {
|
||||
box-sizing: border-box;
|
||||
//border: 1px solid black;
|
||||
|
||||
@@ -1,296 +1,293 @@
|
||||
<template>
|
||||
<div class="system-user-container layout-padding">
|
||||
<el-card class="layout-padding-auto" shadow="hover">
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
:data="state.data"
|
||||
:option="state.option"
|
||||
v-model:page="state.page"
|
||||
@on-load="onLoadFun"
|
||||
@selection-change="selectionChange"
|
||||
:table-loading="state.loading"
|
||||
>
|
||||
<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.purchaseOrderFBillNo" 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 class="system-user-container layout-padding">
|
||||
<el-card class="layout-padding-auto" shadow="hover">
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
:data="state.data"
|
||||
:option="state.option"
|
||||
v-model:page="state.page"
|
||||
@on-load="onLoadFun"
|
||||
:table-loading="state.loading"
|
||||
>
|
||||
<template #checkboxBox="{ row }">
|
||||
<div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center">
|
||||
<el-checkbox v-if="row.ifHidden === 0" v-model="row.checkboxBox" true-value="1" false-value="0" @change="selectionChange"/>
|
||||
</div>
|
||||
</template>
|
||||
<template #menu>
|
||||
<div class="btnList">
|
||||
<el-button type="text" @click="state.selectedDataShow = true">打印条码</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-card>
|
||||
<selectedData :listData="state.selectedData" :showes="state.selectedDataShow" @close="() => {state.selectedDataShow = false}"/>
|
||||
</div>
|
||||
<template #sheet="{ row }">{{ row.ifHidden === 0 ? row.sheet : '' }}</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.sheet" style="width: 240px" placeholder="发货单号" size="default" />
|
||||
</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>
|
||||
<div class="btnList">
|
||||
<el-button type="text" @click="state.selectedDataShow = true">打印条码</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-card>
|
||||
<selectedData
|
||||
:listData="state.selectedData"
|
||||
:showes="state.selectedDataShow"
|
||||
@close="
|
||||
() => {
|
||||
state.selectedDataShow = false;
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, onMounted, computed, nextTick } from 'vue';
|
||||
// import { useRouter } from 'vue-router';
|
||||
import { reactive, onMounted, computed, nextTick, ref } from 'vue';
|
||||
import { listApi } from '../../api/list/index';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import SelectedData from '/@/views/materialReceiptNotice/selectedData.vue';
|
||||
// import { ElMessage } from 'element-plus';
|
||||
|
||||
const { t } = useI18n();
|
||||
// const router = useRouter();
|
||||
const crudRef = ref();
|
||||
// 定义变量内容
|
||||
const state = reactive({
|
||||
page: {
|
||||
total: 1000,
|
||||
currentPage: 1,
|
||||
pageSize: 30,
|
||||
},
|
||||
option: {
|
||||
height: computed(() => window.innerHeight - (window.innerHeight * 0.25) + '') ,
|
||||
tip: false,
|
||||
index: false,
|
||||
menuWidth: 120,
|
||||
border: true,
|
||||
delBtn: false,
|
||||
editBtn: false,
|
||||
align: 'center',
|
||||
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:'110' },
|
||||
{ label: '美塞斯批号', prop: 'mssSupplierLot',width:'90' },
|
||||
{ label: '供应商批号', prop: 'fSupplierLot',width:'90' },
|
||||
{ label: '物料编码', prop: 'materialCode',width:'120' },
|
||||
{ label: '物料名称', prop: 'materialName' },
|
||||
|
||||
{ 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: {
|
||||
purchaseOrderFBillNo: '',
|
||||
fDateBegin: '',
|
||||
fDateEmd: '',
|
||||
fmrpCloseStatus: '',
|
||||
},
|
||||
selectedData: [],
|
||||
chengNuoJiaoQiP: '',
|
||||
newChengNuoJiaoQiP: '',
|
||||
selectedDataShow: false,
|
||||
loading: false,
|
||||
page: {
|
||||
total: 1000,
|
||||
currentPage: 1,
|
||||
pageSize: 30,
|
||||
},
|
||||
option: {
|
||||
height: computed(() => window.innerHeight - window.innerHeight * 0.25 + ''),
|
||||
tip: false,
|
||||
index: false,
|
||||
menuWidth: 120,
|
||||
border: true,
|
||||
delBtn: false,
|
||||
editBtn: false,
|
||||
align: 'center',
|
||||
selection: false,
|
||||
searchMenuSpan: 3,
|
||||
addBtn: false,
|
||||
column: [
|
||||
{ label: '', prop: 'checkboxBox',width: 35 },
|
||||
{ label: '发货单号', prop: 'sheet', width: '135' },
|
||||
{ label: '美塞斯批号', prop: 'mssSupplierLot' },
|
||||
{ label: '供应商批号', prop: 'fSupplierLot' },
|
||||
{ label: '物料编码', prop: 'materialCode', width: '120' },
|
||||
{ label: '物料名称', prop: 'materialName' },
|
||||
{ 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' },
|
||||
{ label: '采购数量', prop: 'purchaseQty' },
|
||||
{ label: '采购单位', prop: 'unitName' },
|
||||
],
|
||||
},
|
||||
data: [],
|
||||
elDatePicker: '',
|
||||
formData: {
|
||||
sheet: '',
|
||||
fDateBegin: '',
|
||||
fDateEmd: '',
|
||||
fmrpCloseStatus: '',
|
||||
},
|
||||
selectedData: [],
|
||||
chengNuoJiaoQiP: '',
|
||||
newChengNuoJiaoQiP: '',
|
||||
selectedDataShow: false,
|
||||
loading: false,
|
||||
});
|
||||
const selectionChange = (list: any) => {
|
||||
nextTick(() => {
|
||||
state.selectedData = JSON.parse(JSON.stringify(list));
|
||||
});
|
||||
const selectionChange = () => {
|
||||
let ids: any = [];
|
||||
let arr: any = []
|
||||
state.data.forEach((item:any) => {
|
||||
if(item.checkboxBox === '1'){
|
||||
arr.push(item)
|
||||
}
|
||||
})
|
||||
state.selectedData = arr
|
||||
};
|
||||
|
||||
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();
|
||||
state.page.currentPage = 1;
|
||||
state.page.pageSize = 30;
|
||||
getList();
|
||||
};
|
||||
const resetFun = () => {
|
||||
state.page.currentPage = 1;
|
||||
state.page.pageSize = 30;
|
||||
state.elDatePicker = '';
|
||||
state.formData = {
|
||||
purchaseOrderFBillNo: '',
|
||||
fDateBegin: '',
|
||||
fDateEmd: '',
|
||||
fmrpCloseStatus: '',
|
||||
};
|
||||
getList();
|
||||
state.page.currentPage = 1;
|
||||
state.page.pageSize = 30;
|
||||
state.elDatePicker = '';
|
||||
state.formData = {
|
||||
sheet: '',
|
||||
fDateBegin: '',
|
||||
fDateEmd: '',
|
||||
fmrpCloseStatus: '',
|
||||
};
|
||||
getList();
|
||||
};
|
||||
const onLoadFun = (e: any) => {
|
||||
state.page.currentPage = e.currentPage;
|
||||
state.page.pageSize = e.pageSize;
|
||||
getList();
|
||||
state.page.currentPage = e.currentPage;
|
||||
state.page.pageSize = e.pageSize;
|
||||
getList();
|
||||
};
|
||||
const getList = () => {
|
||||
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;
|
||||
}
|
||||
});
|
||||
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.data.forEach((item:any) => {
|
||||
item.checkboxBox = '0'
|
||||
})
|
||||
state.page.total = res.data.total;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
// console.log(window.innerHeight - 400)
|
||||
});
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//.el-checkbox__inner:nth-child(1){
|
||||
// display: none;
|
||||
//}
|
||||
:deep(.el-checkbox--default):nth-child(0) {
|
||||
display: none !important;
|
||||
}
|
||||
:deep(.el-checkbox){
|
||||
height: 15px !important;
|
||||
}
|
||||
:deep(.cell) {
|
||||
padding: 0 8px !important;
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
|
||||
:deep(.avue-crud__left) {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
:deep(.el-button--text){
|
||||
padding: 0 !important;
|
||||
height: auto !important;
|
||||
|
||||
:deep(.el-button--text) {
|
||||
padding: 0 !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
:deep(.avue-crud__refreshBtn) {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.avue-crud__gridBtn) {
|
||||
display: none;
|
||||
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;
|
||||
margin-left: 12px;
|
||||
border: 1px solid #d5d5d5;
|
||||
border-radius: 8px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.system-user-container {
|
||||
padding: 0 !important;
|
||||
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; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||||
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;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
.selectItem {
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
}
|
||||
.selectItem {
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.avue-crud) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.avue-crud--card) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:deep(.avue-crud__body) {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:deep(.el-table__header) {
|
||||
height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
overflow: hidden !important;
|
||||
padding: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
overflow: hidden !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__cell) {
|
||||
padding: 0 !important;
|
||||
//height: 56px !important;
|
||||
padding: 0 !important;
|
||||
//height: 56px !important;
|
||||
}
|
||||
|
||||
:deep(.el-card) {
|
||||
padding: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
:deep(.el-form) {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.system-user-container {
|
||||
:deep(.el-card__body) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
:deep(.el-card__body) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-col) {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user