532 lines
14 KiB
Vue
532 lines
14 KiB
Vue
<template>
|
||
<div class="system-user-container layout-padding">
|
||
<el-card class="layout-padding-auto" shadow="hover">
|
||
<div class="selectBoxes">
|
||
<div class="selectItem">
|
||
<el-input v-model="state.formData.fBillNo" style="width: 12vw" :placeholder="t('message.index.DocNumber')" size="default" />
|
||
</div>
|
||
<div class="selectItem">
|
||
<el-select :placeholder="t('message.index.DocStatus')" size="default" style="width: 12vw" 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: 25vw"
|
||
type="daterange"
|
||
range-separator="-"
|
||
:start-placeholder="t('message.index.StartDate')"
|
||
:end-placeholder="t('message.index.EndDate')"
|
||
size="default"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
@change="elDatePickerFun"
|
||
/>
|
||
</div>
|
||
<div class="selectItem" style="margin-right: 0">
|
||
<el-button type="primary" size="default" @click="selectFun">{{ t('message.index.search') }}</el-button>
|
||
<el-button size="default" @click="resetFun">{{ t('message.index.reset') }}</el-button>
|
||
</div>
|
||
<div class="selectItem" style="flex: 1; margin-right: 0">
|
||
<div class="piliang">
|
||
<el-button type="primary" size="small" @click="state.selectedDataShow = true">
|
||
<span>{{ t('message.index.selected') }} {{ state.selectedData.length }} {{ t('message.index.items') }}，{{ t('message.index.proceed') }}</span>
|
||
</el-button>
|
||
<el-date-picker
|
||
v-model="state.chengNuoJiaoQiP"
|
||
type="date"
|
||
:placeholder="t('message.index.batchUpdateEarliestDeliveryDate')"
|
||
size="small"
|
||
style="width: 45%; margin-left: 12px"
|
||
@change="chengNuoJiaoQiPFun('0')"
|
||
/>
|
||
<el-date-picker
|
||
v-model="state.newChengNuoJiaoQiP"
|
||
type="date"
|
||
:placeholder="t('message.index.batchUpdateLatestDeliveryDate')"
|
||
size="small"
|
||
style="width: 45%; margin-left: 12px"
|
||
@change="chengNuoJiaoQiPFun('1')"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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 #fBillNo="{ row }">
|
||
<span v-if="row.ifHidden === 0" @click="toPurchaseDetails(row)" style="cursor: pointer; color: #409eff">{{ row.fBillNo }}</span>
|
||
</template>
|
||
<template #fDate="{ row }">{{ row.ifHidden === 0 ? row.fDate : '' }}</template>
|
||
<template #fCancelStatus="{ row }">
|
||
{{ row.ifHidden === 0 ? (row.fCancelStatus === 'A' ? t('message.index.closed') : t('message.index.unclosed')) : '' }}
|
||
</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="t('message.index.date')"
|
||
size="small"
|
||
style="width: 220px"
|
||
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="t('message.index.date')"
|
||
size="small"
|
||
style="width: 220px"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
@change="batchSetNewChengNuoJiaoQiFun([{ id: row.id, newTime: row.newChengNuoJiaoQi }])"
|
||
/>
|
||
</template>
|
||
<template #menu-left></template>
|
||
<template #menu="{ row }">
|
||
<el-button type="text" icon="el-icon-pie-chart" @click="toPurchaseDetails(row)">{{ t('message.index.view') }}</el-button>
|
||
</template>
|
||
</avue-crud>
|
||
</el-card>
|
||
<selectedData
|
||
ref="selectedDataRef"
|
||
:showes="state.selectedDataShow"
|
||
:listData="state.selectedData"
|
||
@generateDocuments="generateDocumentsFun"
|
||
@close="
|
||
() => {
|
||
state.selectedDataShow = false;
|
||
getList();
|
||
}
|
||
"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { reactive, onMounted, computed, nextTick, ref } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
import { listApi } from '../../api/list/index';
|
||
import { useI18n } from 'vue-i18n';
|
||
import SelectedData from '/@/views/mssPurchaseOrder/selectedData.vue';
|
||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||
// import { Session } from '/@/utils/storage';
|
||
|
||
const selectedDataRef = ref();
|
||
const { t } = useI18n();
|
||
const router = useRouter();
|
||
// 定义变量内容
|
||
const state = reactive({
|
||
page: {
|
||
total: 1000,
|
||
currentPage: 1,
|
||
pageSize: 30,
|
||
},
|
||
option: {
|
||
height: computed(() => window.innerHeight - window.innerHeight * 0.23 + ''),
|
||
tip: false,
|
||
index: true,
|
||
menu: true,
|
||
menuWidth: 85,
|
||
border: true,
|
||
delBtn: false,
|
||
editBtn: false,
|
||
align: 'center',
|
||
// searchLabelWidth:100,
|
||
selection: true,
|
||
reserveSelection: true,
|
||
searchMenuSpan: 3,
|
||
addBtn: false,
|
||
column: [
|
||
{ label: computed(() => t('message.index.DocNumber')), prop: 'fBillNo', searchSpan: 3, width: '125' },
|
||
{ label: computed(() => t('message.index.date')), prop: 'fDate', type: 'datetime', searchSpan: 6, searchRange: true },
|
||
{
|
||
label: computed(() => t('message.index.status')),
|
||
prop: 'fCancelStatus',
|
||
dicData: [
|
||
{ label: computed(() => t('message.index.closed')), value: 'A' },
|
||
{ label: computed(() => t('message.index.unclosed')), value: 'B' },
|
||
],
|
||
width: '90',
|
||
},
|
||
{ label: computed(() => t('message.index.partNumber')), prop: 'materialCode', width: '120' },
|
||
{ label: computed(() => t('message.index.materialName')), prop: 'materialName', width: '240' },
|
||
{ label: computed(() => t('message.index.specification')), prop: 'guige', width: '120' },
|
||
{ label: computed(() => t('message.index.unit')), prop: 'unitName', width: '90' },
|
||
{ label: computed(() => t('message.index.qty')), prop: 'qty', width: '90' },
|
||
{ label: computed(() => t('message.index.requestDate')), prop: 'fDeliveryDate', width: '165' },
|
||
{
|
||
label: computed(() => t('message.index.DocStatus')),
|
||
prop: 'fmrpCloseStatus',
|
||
searchSpan: 3,
|
||
dicData: [
|
||
{ label: computed(() => t('message.index.normal')), value: 'A' },
|
||
{ label: computed(() => t('message.index.closed')), value: 'B' },
|
||
],
|
||
width: '90',
|
||
},
|
||
{ label: computed(() => t('message.index.receivedQTY')), prop: 'sendedQty', width: '110' },
|
||
{ label: computed(() => t('message.index.unreceivedQTY')), prop: 'notSendQty', width: '110' },
|
||
{ label: computed(() => t('message.index.earliestDeliveryDate')), prop: 'chengNuoJiaoQi', width: '160' },
|
||
{ label: computed(() => t('message.index.latestDeliveryDate')), prop: 'newChengNuoJiaoQi', width: '160' },
|
||
],
|
||
},
|
||
data: [],
|
||
elDatePicker: '',
|
||
formData: {
|
||
fBillNo: '',
|
||
fDateBegin: '',
|
||
fDateEmd: '',
|
||
fmrpCloseStatus: '',
|
||
},
|
||
selectedData: [],
|
||
chengNuoJiaoQiP: '',
|
||
newChengNuoJiaoQiP: '',
|
||
selectedDataShow: false,
|
||
loading: false,
|
||
});
|
||
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 });
|
||
});
|
||
ElMessageBox({
|
||
closeOnClickModal: false,
|
||
closeOnPressEscape: false,
|
||
title: t('message.index.prompt'),
|
||
message: t('message.index.pleaseConfirmTheDateChange'),
|
||
confirmButtonText: t('message.user.logOutConfirm'),
|
||
cancelButtonText: t('message.user.logOutCancel'),
|
||
showCancelButton: true,
|
||
buttonSize: 'default',
|
||
beforeClose: (action, instance, done) => {
|
||
if (action === 'confirm') {
|
||
instance.confirmButtonLoading = true;
|
||
instance.confirmButtonText = '1';
|
||
listApi()
|
||
.batchSetChengNuoJiaoQi(arr)
|
||
.then((res: any) => {
|
||
done();
|
||
if (res.resultCode === 0) {
|
||
getList();
|
||
ElMessage.success(t('message.index.changedSuccessfully'));
|
||
}
|
||
if (res.resultCode === -1) {
|
||
getList();
|
||
ElMessage.success(res.errorMessage);
|
||
}
|
||
});
|
||
} else {
|
||
done();
|
||
}
|
||
},
|
||
});
|
||
}
|
||
if (e === '1') {
|
||
state.selectedData.forEach((item: any) => {
|
||
arr.push({ id: item.id, newTime: state.newChengNuoJiaoQiP });
|
||
});
|
||
ElMessageBox({
|
||
closeOnClickModal: false,
|
||
closeOnPressEscape: false,
|
||
title: t('message.index.prompt'),
|
||
message: t('message.index.pleaseConfirmTheDateChange'),
|
||
confirmButtonText: t('message.user.logOutConfirm'),
|
||
cancelButtonText: t('message.user.logOutCancel'),
|
||
showCancelButton: true,
|
||
buttonSize: 'default',
|
||
beforeClose: (action, instance, done) => {
|
||
if (action === 'confirm') {
|
||
instance.confirmButtonLoading = true;
|
||
listApi()
|
||
.batchSetNewChengNuoJiaoQi(arr)
|
||
.then((res: any) => {
|
||
done();
|
||
if (res.resultCode === 0) {
|
||
getList();
|
||
ElMessage.success(t('message.index.changedSuccessfully'));
|
||
}
|
||
if (res.resultCode === -1) {
|
||
getList();
|
||
ElMessage.success(res.errorMessage);
|
||
}
|
||
});
|
||
} else {
|
||
done();
|
||
}
|
||
},
|
||
});
|
||
}
|
||
} else {
|
||
ElMessage.warning(t('message.index.PleaseSelectItemsFirstly'));
|
||
}
|
||
};
|
||
const batchSetChengNuoJiaoQiFun = (arr: any) => {
|
||
ElMessageBox({
|
||
closeOnClickModal: false,
|
||
closeOnPressEscape: false,
|
||
title: t('message.index.prompt'),
|
||
message: t('message.index.pleaseConfirmTheDateChange'),
|
||
confirmButtonText: t('message.user.logOutConfirm'),
|
||
cancelButtonText: t('message.user.logOutCancel'),
|
||
showCancelButton: true,
|
||
buttonSize: 'default',
|
||
beforeClose: (action, instance, done) => {
|
||
if (action === 'confirm') {
|
||
instance.confirmButtonLoading = true;
|
||
listApi()
|
||
.batchSetChengNuoJiaoQi(arr)
|
||
.then((res: any) => {
|
||
done();
|
||
if (res.resultCode === 0) {
|
||
getList();
|
||
ElMessage.success(t('message.index.changedSuccessfully'));
|
||
}
|
||
if (res.resultCode === -1) {
|
||
getList();
|
||
ElMessage.success(res.errorMessage);
|
||
}
|
||
});
|
||
} else {
|
||
done();
|
||
}
|
||
},
|
||
});
|
||
};
|
||
const batchSetNewChengNuoJiaoQiFun = (arr: any) => {
|
||
ElMessageBox({
|
||
closeOnClickModal: false,
|
||
closeOnPressEscape: false,
|
||
title: t('message.index.prompt'),
|
||
message: t('message.index.pleaseConfirmTheDateChange'),
|
||
confirmButtonText: t('message.user.logOutConfirm'),
|
||
cancelButtonText: t('message.user.logOutCancel'),
|
||
showCancelButton: true,
|
||
buttonSize: 'default',
|
||
beforeClose: (action, instance, done) => {
|
||
if (action === 'confirm') {
|
||
instance.confirmButtonLoading = true;
|
||
listApi()
|
||
.batchSetNewChengNuoJiaoQi(arr)
|
||
.then((res: any) => {
|
||
done();
|
||
if (res.resultCode === 0) {
|
||
getList();
|
||
ElMessage.success(t('message.index.changedSuccessfully'));
|
||
}
|
||
if (res.resultCode === -1) {
|
||
getList();
|
||
ElMessage.success(res.errorMessage);
|
||
}
|
||
});
|
||
} else {
|
||
done();
|
||
}
|
||
},
|
||
});
|
||
};
|
||
const generateDocumentsFun = () => {
|
||
state.selectedDataShow = false;
|
||
getList();
|
||
};
|
||
//跳转详情
|
||
const toPurchaseDetails = (item: any) => {
|
||
router.push({
|
||
path: '/purchaseDetails',
|
||
query: {
|
||
fBillNo: item.fBillNo,
|
||
},
|
||
});
|
||
};
|
||
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 = 30;
|
||
state.elDatePicker = '';
|
||
state.formData = {
|
||
fBillNo: '',
|
||
fDateBegin: '',
|
||
fDateEmd: '',
|
||
fmrpCloseStatus: '',
|
||
};
|
||
getList();
|
||
};
|
||
const onLoadFun = (e: any) => {
|
||
state.page.currentPage = e.currentPage;
|
||
state.page.pageSize = e.pageSize;
|
||
getList();
|
||
};
|
||
const getList = () => {
|
||
state.loading = true;
|
||
listApi()
|
||
.getPageList({
|
||
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;
|
||
}
|
||
});
|
||
};
|
||
// 页面加载时
|
||
onMounted(() => {
|
||
console.log(window.innerHeight - window.innerHeight * 0.25 + '');
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.avue-crud__header) {
|
||
display: none;
|
||
}
|
||
|
||
:deep(.el-button--text) {
|
||
padding: 0 !important;
|
||
height: auto !important;
|
||
}
|
||
|
||
:deep(.avue-crud__pagination) {
|
||
padding: 0 12px !important;
|
||
}
|
||
|
||
:deep(.cell) {
|
||
padding: 0 !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;
|
||
}
|
||
|
||
.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-wrap: wrap;
|
||
|
||
.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;
|
||
}
|
||
</style>
|