maxcess-synergy-admin/src/views/materialReceiptNotice/index.vue

<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"
				: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(row)" />
					</div>
				</template>
        <template #deliveryDate="{ row }">{{ row.ifHidden === 0 ? row.deliveryDate : '' }}</template>
				<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="t('message.index.deliveryNote')" size="default" />
						</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>
						<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>
						<el-button type="primary" size="default" @click="state.selectedDataShow = true">
							<span>{{ t('message.index.selected') }} {{ state.selectedData.length }} {{ t('message.index.items') }}，{{ t('message.index.print') }}</span>
						</el-button>
					</div>
				</template>
        <template #print="{ row }">
          <div class="btnList">
            <el-button type="text" @click="barCodeFunDataRow(row)">{{ t('message.index.print') }}</el-button>
          </div>
        </template>
        <template #deleteText="{ row }">
          <div class="btnList">
            <el-button v-if="row.ifHidden === 0" type="text" @click="invoiceOrderDeleteOrderFun(row)">{{ t('message.index.deleteText') }}</el-button>
          </div>
        </template>
				<template #menu="{ row }">
					<div class="btnList">
						<el-button type="text" @click="barCodeFunDataRow(row)">{{ t('message.index.print') }}</el-button>
						<el-button v-if="row.ifHidden === 0" type="text" @click="invoiceOrderDeleteOrderFun(row)">{{ t('message.index.deleteText') }}</el-button>
					</div>
				</template>
			</avue-crud>
		</el-card>
		<selectedData
			:listData="state.selectedData"
			:showes="state.selectedDataShow"
			@close="
				() => {
					state.selectedDataShow = false;
				}
			"
		/>
    <barCode :showes="state.barCodeShow" :data="state.barCodeItem" @close="() => { state.barCodeShow = false }"/>
	</div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, computed, nextTick, ref } from 'vue';
import { listApi } from '../../api/list/index';
import { useI18n } from 'vue-i18n';
import SelectedData from '/@/views/materialReceiptNotice/selectedData.vue';
import barCode from './barCode.vue'
import {ElMessage, ElMessageBox} from "element-plus";
const { t } = useI18n();
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: false,
		searchMenuSpan: 3,
		addBtn: false,
    menu:false,
		column: [
			{ label: '', prop: 'checkboxBox', width: 35 },
			{ label: computed(()=> t('message.index.deliveryDate')), prop: 'deliveryDate' },
			{ label: computed(()=> t('message.index.deliveryDate')), prop: 'sheet', width: '135' },
			{ label: computed(()=> t('message.index.maxcessLot')), prop: 'mssSupplierLot' },
			{ label: computed(()=> t('message.index.supplierLot')), prop: 'fSupplierLot' },
			{ label: computed(()=> t('message.index.partNumber')), prop: 'materialCode', width: '120' },
			{ label: computed(()=> t('message.index.materialName')), prop: 'materialName' },
			{ label: computed(() => t('message.index.supplierCode')), prop: 'supplierId', width: '90' },
			{ label: computed(() => t('message.index.supplierName')), prop: 'supplierName', width: '120' },
			{ label: computed(() => t('message.index.receivedQTY')), prop: 'sendedQty', width: '110' },
			{ label: computed(() => t('message.index.deliveryQTY')), prop: 'qty' },
			{ label: computed(() => t('message.index.POQTY')), prop: 'purchaseQty' },
			{ label: computed(() => t('message.index.unit')), prop: 'unitName' },
			{ label: computed(() => t('message.index.print')), prop: 'print',width: 80 },
			{ label: computed(() => t('message.index.deleteText')), prop: 'deleteText',width: 80 },
		],
	},
	data: [],
	elDatePicker: '',
	formData: {
		sheet: '',
		fDateBegin: '',
		fDateEmd: '',
		fmrpCloseStatus: '',
	},
	selectedData: [],
	chengNuoJiaoQiP: '',
	newChengNuoJiaoQiP: '',
	selectedDataShow: false,
	loading: false,
  barCodeShow:false,
  barCodeItem: {}
});
const elDatePickerFun = (val: any) => {
  state.formData.fDateBegin = val[0];
  state.formData.fDateEmd = val[1];
};
const invoiceOrderDeleteOrderFun = (row) => {
  ElMessageBox({
    closeOnClickModal: false,
    closeOnPressEscape: false,
    title: t('message.index.prompt'),
    message: t('message.index.scqd'),
    confirmButtonText: t('message.index.confirm'),
    cancelButtonText: t('message.user.logOutCancel'),
    showCancelButton: true,
    buttonSize: 'default',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true;
        listApi().invoiceOrderDeleteOrder({id:row.id}).then((res:any) => {
          done()
          getList()
          if(res.resultCode === 0){
            ElMessage.success(t('message.index.success'))

          }
        })
      } else {
        done();
      }
    },
  });

}
const selectionChange = (row: any) => {
	if (row.checkboxBox == '1') {
		state.data.forEach((item: any) => {
			if (item.id !== row.id) {
				item.checkboxBox = '0';
			}
		});
		listApi()
			.invoiceOrderGetPageList({
				condition: {
					sheet: row.sheet,
					fDateBegin: '',
					fDateEmd: '',
					fmrpCloseStatus: '',
				},
				pageSize: 1000000,
				page: 1,
			})
			.then((res: any) => {
				state.loading = false;
				if (res.resultCode === 0) {
					state.selectedData = res.data.dataList;
				}
			});
	} else {
		state.selectedData = [];
	}
};
const barCodeFunDataRow = (row) => {
  state.barCodeItem = row
  state.barCodeShow = true
}
//接口数据处理
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 = {
		sheet: '',
		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()
		.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(() => {});
</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;
}

:deep(.avue-crud__left) {
	flex: 1;
}

:deep(.el-button--text) {
	padding: 0 !important;
	height: auto !important;
}

: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;
}
</style>