114 lines
3.1 KiB
Vue
114 lines
3.1 KiB
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 } from 'vue';
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
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:100,
|
||
|
|
searchMenuSpan:6,
|
||
|
|
addBtn:false,
|
||
|
|
column: [
|
||
|
|
{ label: '单据编号', prop: 'FBillNo', width: 200,search: true },
|
||
|
|
{ label: '供应商代码', prop: 'FSupplierId', width: 200,search: true },
|
||
|
|
{ label: '供应商名称', prop: 'FSupplyName', width: 200,search: true },
|
||
|
|
{ label: '采购员', prop: 'FPurchaserId', width: 200,search: true },
|
||
|
|
{ label: '结算方式', prop: 'FSettleModeId', width: 200,search: true },
|
||
|
|
{ label: '结算币别', prop: 'FSettleCurrId', width: 200,search: true },
|
||
|
|
{ label: '付款条件', prop: 'FPayConditionId', width: 200,search: true },
|
||
|
|
{ label: '汇率类型', prop: 'FExchangeTypeId', width: 200 },
|
||
|
|
{ label: '汇率', prop: 'FExchangeRate', width: 200 },
|
||
|
|
{ label: '制单人', prop: 'FCreatorId', width: 200,search: true },
|
||
|
|
{ label: '单据状态', prop: 'FDocumentStatus', width: 200,search: true },
|
||
|
|
{ label: '采购日期', prop: 'FDate', width: 200,search: true,type: 'datetime', searchSpan: 12,searchRange: true,},
|
||
|
|
{ label: '备注', 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>
|