初次对接
This commit is contained in:
@@ -1,142 +1,268 @@
|
||||
<template>
|
||||
<div class="system-user-container layout-padding">
|
||||
<el-card class="layout-padding-auto" shadow="hover">
|
||||
<avue-crud
|
||||
<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"
|
||||
@selection-change="selectionChange"
|
||||
@search-change="searchChange"
|
||||
@search-reset="resetChange"
|
||||
:table-loading="state.loading"
|
||||
>
|
||||
<template #menu-left>
|
||||
<div style="display: flex;">
|
||||
<div class="menu-left">
|
||||
<span >已选中 <span style="color: #3edc95; font-size: 18px">{{ state.selectedData.length }}</span> 条数据</span >
|
||||
<template #fBillNo="{ row }">{{row.fBillNo}}</template>
|
||||
<template #fDate="{ row }">{{row.fDate}}</template>
|
||||
<template #fCancelStatus="{ row }">{{row.fCancelStatus === 'A' ? '未关闭' : '已关闭'}} </template>
|
||||
<template #materialName="{ row }">
|
||||
<el-tooltip :content="row.materialName" placement="top">
|
||||
<div class="multi-line-omit">{{ row.materialName }}</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template #chengNuoJiaoQi="{ row }">
|
||||
<el-date-picker
|
||||
v-model="row.chengNuoJiaoQi"
|
||||
type="date"
|
||||
placeholder="日期"
|
||||
size="small"
|
||||
style="width: 115px"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="batchSetChengNuoJiaoQiFun([{id:row.id,newTime:row.chengNuoJiaoQi}])"
|
||||
/>
|
||||
</template>
|
||||
<template #newChengNuoJiaoQi="{ row }">
|
||||
<el-date-picker
|
||||
v-model="row.newChengNuoJiaoQi"
|
||||
type="date"
|
||||
placeholder="日期"
|
||||
size="small"
|
||||
style="width: 130px"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="batchSetNewChengNuoJiaoQiFun([{id:row.id,newTime:row.newChengNuoJiaoQi}])"
|
||||
/>
|
||||
</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-select placeholder="业务状态" size="default" style="width: 240px" v-model="state.formData.fmrpCloseStatus">
|
||||
<el-option v-for="item in state.option.column[2].dicData" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</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>
|
||||
<div class="selectItem" style="flex: 1">
|
||||
<el-button type="primary" size="default" @click="selectFun">搜索</el-button>
|
||||
<el-button size="default" @click="resetFun">重置</el-button>
|
||||
<div class="piliang">
|
||||
<el-button type="primary" size="small" @click="state.selectedDataShow = true">
|
||||
<span>已选中 {{ state.selectedData.length }} 条数据，去查看</span>
|
||||
</el-button>
|
||||
<el-date-picker
|
||||
v-model="state.chengNuoJiaoQiP"
|
||||
type="date"
|
||||
placeholder="批量修改选中承诺日期"
|
||||
size="small"
|
||||
style="width: 190px; margin-left: 12px"
|
||||
@change="chengNuoJiaoQiPFun('0')"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="state.newChengNuoJiaoQiP"
|
||||
type="date"
|
||||
placeholder="批量修改选中承诺最新交期"
|
||||
size="small"
|
||||
style="width: 190px; margin-left: 12px"
|
||||
@change="chengNuoJiaoQiPFun('1')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-button style="margin-left: 16px" type="primary" @click="selectedDataShowFun" >生成送货单</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-card>
|
||||
<selectedData :showes="state.selectedDataShow" :listData="state.selectedData" @generateDocuments="generateDocumentsFun"/>
|
||||
<!-- <receipt :showes="state.receiptShow"/>-->
|
||||
</div>
|
||||
</template>
|
||||
<template #menu="{ row }">
|
||||
<el-button type="text" icon="el-icon-pie-chart" @click="toPurchaseDetails(row)">查看</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-card>
|
||||
<selectedData ref="selectedDataRef" :showes="state.selectedDataShow" :listData="state.selectedData" @generateDocuments="generateDocumentsFun" @close="state.selectedDataShow = false"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {reactive, onMounted, nextTick, computed} from 'vue';
|
||||
import { ArrowRight } from '@element-plus/icons-vue';
|
||||
import selectedData from './selectedData.vue'
|
||||
import receipt from './receipt.vue'
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import {listApi} from "/@/api/list";
|
||||
import { useRoute } from 'vue-router'
|
||||
import {reactive, onMounted, computed, nextTick, ref} from 'vue';
|
||||
import { useRouter,useRoute } from 'vue-router';
|
||||
import { listApi } from '../../api/list/index';
|
||||
// import { useI18n } from 'vue-i18n';
|
||||
import SelectedData from '/@/views/mssPurchaseOrder/selectedData.vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const selectedDataRef = ref()
|
||||
// const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const route = useRoute()
|
||||
const { locale, t } = useI18n();
|
||||
// 定义变量内容
|
||||
const state = reactive({
|
||||
page: {
|
||||
total: 1000,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
option: {
|
||||
tip: false,
|
||||
selection: true,
|
||||
index: true,
|
||||
menu: false,
|
||||
menuWidth: 150,
|
||||
border: true,
|
||||
delBtn: false,
|
||||
editBtn: false,
|
||||
align: 'center',
|
||||
searchLabelWidth: 130,
|
||||
searchMenuSpan: 6,
|
||||
addBtn: false,
|
||||
column: [
|
||||
{ label: 'PO号', prop: 'fBillNo', width: 150},
|
||||
{ label: computed(() => t('message.list.PurchaseDate')), prop: 'fDate', width: 150,type: 'datetime', searchSpan: 6,searchRange: true,},
|
||||
{ label: '关闭状态', prop: 'hangzhuangtai', width: 150 },
|
||||
{ label: '物料编码', prop: 'wuliaobinama', width: 150 },
|
||||
{ label: '物料名称', prop: 'wuliaomingcheng', width: 150 },
|
||||
{ label: '采购单位', prop: 'caigoudanwei', width: 150 },
|
||||
{ label: '采购数量', prop: 'caigoushuliang', width: 150 },
|
||||
{ label: '交货日期', prop: 'jioahuiriqi', width: 150 },
|
||||
{ label: '业务状态', prop: 'yewuzhuangtai', width: 150},
|
||||
{ label: '累计收料数量', prop: 'ljslsl', width: 150 },
|
||||
{ label: '剩余收料数量', prop: 'syslsl', width: 150 },
|
||||
{ label: '供应商承诺交期', prop: 'gyscnjq', width: 150 },
|
||||
{ label: '供应商承诺最新交期', prop: 'gyscnzxjq', width: 150 },
|
||||
// { label: computed(() => t('message.list.MaterialCode')), prop: 'materialCode', width: 200 },
|
||||
// { label: computed(() => t('message.list.MaterialName')), prop: 'materialName', width: 200 },
|
||||
// { label: computed(() => t('message.list.Specification')), prop: 'specificationModel', width: 200 },
|
||||
// { label: computed(() => t('message.list.PurchaseUnit')), prop: 'FUnitId', width: 200 },
|
||||
// { label: '采购数量', prop: 'qty', width: 200 },
|
||||
// { label: '处理中数量', prop: 'processingQty', width: 200 },
|
||||
// { label: '已发货数量', prop: 'sendedQty', width: 200 },
|
||||
// { label: '未发货数量', prop: 'notSendQty', width: 200 },
|
||||
// { label: '本次发货数量', prop: 'nowSendQty', width: 200 },
|
||||
// { label: computed(() => t('message.list.UP')), prop: 'unitPrice', width: 200 },
|
||||
// { label:'价税合计(含税金额', prop: 'amount1', width: 200 },
|
||||
// { label: computed(() => t('message.list.TotalAmount')), prop: 'amount2', width: 200 },
|
||||
// { label: computed(() => t('message.list.AccumulatedReceiptQTY')), prop: 'FReceiveQty', width: 200 },
|
||||
// { label: computed(() => t('message.list.TaxAmount')), prop: 'taxAmount', width: 200 },
|
||||
// {
|
||||
// label: computed(() => t('message.list.CommittedDeliveryDate')),
|
||||
// prop: 'chengNuoJiaoQi',
|
||||
// width: 200,
|
||||
// type: 'datetime',
|
||||
// searchSpan: 12,
|
||||
// searchRange: true,
|
||||
// searchLabelWidth: 150,
|
||||
// },
|
||||
// {
|
||||
// label: computed(() => t('message.list.LatestCommittedDeliveryDate')),
|
||||
// prop: 'newChengNuoJiaoQi',
|
||||
// width: 200,
|
||||
// type: 'datetime',
|
||||
// searchSpan: 12,
|
||||
// searchRange: true,
|
||||
// searchLabelWidth: 150,
|
||||
// },
|
||||
// { label: computed(() => t('message.list.Comments2')), prop: 'remark', width: 200 },
|
||||
],
|
||||
},
|
||||
data: [],
|
||||
selectedData:[],
|
||||
page: {
|
||||
total: 1000,
|
||||
currentPage: 1,
|
||||
pageSize: 25,
|
||||
},
|
||||
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: 'PO号', prop: 'fBillNo', /*search: true,*/ searchSpan: 3, width: '125' },
|
||||
{ label: '采购日期', prop: 'fDate', /*search: true,*/ type: 'datetime', searchSpan: 6, searchRange: true },
|
||||
{
|
||||
label: '关闭状态',
|
||||
prop: 'fCancelStatus',
|
||||
dicData: [
|
||||
{ label: '未关闭', value: 'A' },
|
||||
{ label: '已关闭', value: 'B' },
|
||||
],
|
||||
width: '90',
|
||||
},
|
||||
{ label: '物料编码', prop: 'materialCode', width: '120' },
|
||||
{ label: '物料名称', prop: 'materialName', width: '240' },
|
||||
{ label: '采购单位', prop: 'unitName', width: '90' },
|
||||
{ label: '采购数量', prop: 'qty', width: '90' },
|
||||
{ label: '交货日期', prop: 'fDeliveryDate', width: '165' },
|
||||
{
|
||||
label: '业务状态',
|
||||
prop: 'fmrpCloseStatus' /*search: true,*/,
|
||||
searchSpan: 3,
|
||||
dicData: [
|
||||
{ label: '正常', value: 'A' },
|
||||
{ label: '业务关闭', value: 'B' },
|
||||
],
|
||||
width: '90',
|
||||
},
|
||||
{ label: '累计收料数量', prop: 'sendedQty', width: '110' },
|
||||
{ label: '剩余收料数量', prop: 'notSendQty' },
|
||||
{ label: '供应商承诺交期', prop: 'chengNuoJiaoQi', width: '140' },
|
||||
{ label: '供应商承诺最新交期', prop: 'newChengNuoJiaoQi', width: '160' },
|
||||
],
|
||||
},
|
||||
data: [],
|
||||
elDatePicker: '',
|
||||
formData: {
|
||||
fBillNo: '',
|
||||
fDateBegin: '',
|
||||
fDateEmd: '',
|
||||
fmrpCloseStatus: '',
|
||||
},
|
||||
selectedData: [],
|
||||
chengNuoJiaoQiP: '',
|
||||
newChengNuoJiaoQiP: '',
|
||||
selectedDataShow:false,
|
||||
receiptShow:false,
|
||||
loading:false,
|
||||
topId:''
|
||||
});
|
||||
const selectionChange = (list:any) => {
|
||||
nextTick( () => {
|
||||
state.selectedData = JSON.parse(JSON.stringify(list))
|
||||
})
|
||||
|
||||
const selectionChange = (list: any) => {
|
||||
state.selectedData = 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('请先选中数据');
|
||||
}
|
||||
};
|
||||
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 searchChange = (params:any, done:any) => {
|
||||
done()
|
||||
getList()
|
||||
}
|
||||
const resetChange = () => {
|
||||
|
||||
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 selectedDataShowFun = () => {
|
||||
state.selectedDataShow = !state.selectedDataShow
|
||||
}
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
state.topId = route.query.topId as string
|
||||
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 = 20;
|
||||
getList();
|
||||
};
|
||||
const resetFun = () => {
|
||||
state.page.currentPage = 1;
|
||||
state.page.pageSize = 20;
|
||||
state.elDatePicker = '';
|
||||
state.formData = {
|
||||
fBillNo: '',
|
||||
fDateBegin: '',
|
||||
fDateEmd: '',
|
||||
fmrpCloseStatus: '',
|
||||
};
|
||||
getList();
|
||||
};
|
||||
|
||||
const getList = () => {
|
||||
state.loading = true
|
||||
listApi().getPurchaseOrderItemList({
|
||||
fid:state.topId
|
||||
}).then((res:any) => {
|
||||
@@ -144,43 +270,114 @@ const getList = () => {
|
||||
state.data = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
state.topId = route.query.topId as string
|
||||
getList()
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.system-user-container {
|
||||
:deep(.el-card__body) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
:deep(.avue-crud__left) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
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;
|
||||
}
|
||||
|
||||
.system-user-container {
|
||||
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;
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-col) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.avue-crud__header) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.menu-left {
|
||||
//width: 340px;
|
||||
height: 40px;
|
||||
background-color: rgba(64, 159, 255, 0.18);
|
||||
border-radius: 8px;
|
||||
border: 2px solid #d9ecff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user