119 lines
3.5 KiB
Vue
Raw Normal View History

2025-03-21 09:20:29 +08:00
<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>
<div class="btnList">
<el-button type="text" icon="el-icon-pie-chart" @click="toPurchaseDetails">查看详情</el-button>
<el-button type="text" icon="el-icon-pie-chart" @click="state.selectedDataShow = true">查看单据</el-button>
</div>
</template>
</avue-crud>
</el-card>
<selectedData :showes="state.selectedDataShow"/>
</div>
</template>
<script lang="ts" setup>
2025-03-24 16:46:34 +08:00
import { reactive, onMounted,computed } from 'vue';
2025-03-21 09:20:29 +08:00
import { useRouter } from 'vue-router'
2025-03-24 16:46:34 +08:00
import { useI18n } from 'vue-i18n';
2025-03-21 09:20:29 +08:00
import selectedData from './selectedData.vue'
const router = useRouter()
2025-03-24 16:46:34 +08:00
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { locale, t } = useI18n();
2025-03-21 09:20:29 +08:00
// 定义变量内容
const state = reactive({
page: {
total: 1000,
currentPage: 1,
pageSize: 10,
},
option: {
index: false,
menuWidth: 150,
border: true,
delBtn: false,
editBtn: false,
align: 'center',
2025-03-24 16:46:34 +08:00
searchLabelWidth:120,
2025-03-21 09:20:29 +08:00
searchMenuSpan:6,
addBtn:false,
column: [
2025-03-24 16:46:34 +08:00
{ label: computed(() => t('message.list.PONumber2')), prop: 'FBillNo', width: 200,search: true },
{ label: computed(() => t('message.list.SupplierCode2')), prop: 'FSupplierId', width: 200,search: true },
{ label: computed(() => t('message.list.SupplierName2')), prop: 'FSupplyName', width: 200,search: true },
{ label: computed(() => t('message.list.Buyer2')), prop: 'FPurchaserId', width: 200,search: true },
{ label: computed(() => t('message.list.ReceiveOrg')), prop: 'FStockOrgId', width: 200,search: true },
{ label: computed(() => t('message.list.BusinessType')), prop: 'FBillTypeID', width: 200,search: true },
{ label: computed(() => t('message.list.OrderCreator')), prop: 'FCreatorId', width: 200,search: true },
{ label: computed(() => t('message.list.DocStatus2')), prop: 'FDocumentStatus', width: 200,search: true },
{ label: computed(() => t('message.list.ReceivingDate')), prop: 'FDate', width: 200,search: true,type: 'datetime', searchSpan: 12,searchRange: true,},
{ label: computed(() => t('message.list.Comments3')), prop: 'FRemarks', width: 200 },
2025-03-21 09:20:29 +08:00
],
},
data: [
{
FBillNo: '005828',
FSupplierId: '005828',
FSupplyName: '美塞斯',
FPurchaserId: '采购甲',
FStockOrgId: '不知道',
FBillTypeID:'111',
FCreatorId: '制单人甲',
FDate: '2050/10/31',
FDocumentStatus: '已验收',
FRemarks: '数据是假的',
},
],
selectedDataShow:false
});
const toPurchaseDetails = () => {
router.push({
path: '/materialReceiptNoticePurchaseDetails',
})
}
// 页面加载时
onMounted(() => {
for (let i = 0; i < 9; i++){
state.data.push({
FBillNo: '005828',
FSupplierId: '005828',
FSupplyName: '美塞斯',
FPurchaserId: '采购甲',
FStockOrgId: '不知道',
FBillTypeID:'111',
FCreatorId: '制单人甲',
FDate: '2050/10/31',
FDocumentStatus: '已验收',
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;
}
.btnList{
:deep(.el-button){
margin-left: 0!important;
}
}
</style>