maxcess-synergy-admin/src/views/mssPurchaseOrder/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">
				<template #menu>
					<el-button type="text" icon="el-icon-pie-chart" @click="toPurchaseDetails">查看</el-button>
				</template>
			</avue-crud>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
import {reactive, onMounted, computed} from 'vue';
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n();
const router = useRouter()

// 定义变量内容
const state = reactive({
	page: {
		total: 1000,
		currentPage: 1,
		pageSize: 10,
	},
	option: {
		index: false,
		menuWidth: 150,
		border: true,
		delBtn: false,
		editBtn: false,
		align: 'center',
    searchLabelWidth:130,
    searchMenuSpan:6,
    addBtn:false,
		column: [
			{ label: computed(() => t('message.list.PONumber')), prop: 'FBillNo', width: 200,search: true },
			{ label: computed(() => t('message.list.SupplierCode')), prop: 'FSupplierId', width: 200,search: true },
			{ label: computed(() => t('message.list.SupplierName')), prop: 'FSupplyName', width: 200,search: true },
			{ label: computed(() => t('message.list.Buyer')), prop: 'FPurchaserId', width: 200,search: true },
			{ label: computed(() => t('message.list.SettlementMode')), prop: 'FSettleModeId', width: 200,search: true },
			{ label: computed(() => t('message.list.Currency')), prop: 'FSettleCurrId', width: 200,search: true },
			{ label: computed(() => t('message.list.PaymentTerms')), prop: 'FPayConditionId', width: 200,search: true },
			{ label: computed(() => t('message.list.ExchangeRateType')), prop: 'FExchangeTypeId', width: 200 },
			{ label: computed(() => t('message.list.ExchangeRate')), prop: 'FExchangeRate', width: 200 },
			{ label: computed(() => t('message.list.OrderCreater')), prop: 'FCreatorId', width: 200,search: true },
			{ label: computed(() => t('message.list.DocStatus')), prop: 'FDocumentStatus', width: 200,search: true },
			{ label: computed(() => t('message.list.PurchaseDate')), prop: 'FDate', width: 200,search: true,type: 'datetime', searchSpan: 12,searchRange: true,},
			{ label: computed(() => t('message.list.Comments')), prop: 'FRemarks', width: 200 },
		],
	},
	data: [
		{
			FBillNo: '005828',
			FSupplierId: '005828',
			FSupplyName: '美塞斯',
			FPurchaserId: '采购甲',
			FSettleModeId: '金砖支付系统结算',
			FSettleCurrId: 'RMB',
			FPayConditionId: '到付',
			FExchangeTypeId: '亚洲汇率',
			FExchangeRate: '1:20',
      FCreatorId: '制单人甲',
			FDocumentStatus: '已验收',
			FDate: '2050/10/31',
			FRemarks: '数据是假的',
		},

	],
});
const toPurchaseDetails = () => {
  router.push({
    path: '/purchaseDetails',
  })
}
// 页面加载时
onMounted(() => {
  for (let i = 0; i < 9; i++){
    state.data.push({
      FBillNo: '005828',
      FSupplierId: '005828',
      FSupplyName: '美塞斯',
      FPurchaserId: '采购甲',
      FSettleModeId: '金砖支付系统结算',
      FSettleCurrId: 'RMB',
      FPayConditionId: '到付',
      FExchangeTypeId: '亚洲汇率',
      FExchangeRate: '1:20',
      FCreatorId: '制单人甲',
      FDocumentStatus: '已验收',
      FDate: '2050/10/31',
      FRemarks: '数据是假的',
    })
  }
});
</script>

<style lang="scss" scoped>
.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>