161 lines
3.3 KiB
Vue
161 lines
3.3 KiB
Vue
<template>
|
|
<PageWrapper>
|
|
<a-card>
|
|
<a-tabs :animated="false">
|
|
<template v-for="item in achieveList" :key="item.key">
|
|
<a-tab-pane>
|
|
<template #tab>
|
|
<span> {{ item.name }}</span>
|
|
</template>
|
|
</a-tab-pane>
|
|
</template>
|
|
</a-tabs>
|
|
<div class="flex justify-between">
|
|
<ADatePicker
|
|
mode="year"
|
|
v-model:value="yearValue"
|
|
format="YYYY"
|
|
:open="yearShow"
|
|
@openChange="handleOpenChange"
|
|
@panelChange="handlePanelChange"
|
|
valueFormat="YYYY"
|
|
/>
|
|
<a-button>新增</a-button>
|
|
</div>
|
|
<BasicTable class="p0 mt-4" @register="registerTable" />
|
|
</a-card>
|
|
</PageWrapper>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from 'vue'
|
|
import { Tabs, Card, DatePicker, Button } from 'ant-design-vue'
|
|
import { PageWrapper } from '/@/components/Page'
|
|
import { BasicTable, useTable, BasicColumn } from '/@/components/Table'
|
|
// import { Moment } from 'moment';
|
|
export interface TabItem {
|
|
key: string
|
|
name: string
|
|
}
|
|
const achieveList: TabItem[] = [
|
|
{
|
|
key: '1',
|
|
name: '水稻',
|
|
},
|
|
{
|
|
key: '2',
|
|
name: '耙耙柑',
|
|
},
|
|
{
|
|
key: '3',
|
|
name: '活草鱼',
|
|
},
|
|
{
|
|
key: '4',
|
|
name: '生猪',
|
|
},
|
|
{
|
|
key: '5',
|
|
name: '稻虾',
|
|
},
|
|
{
|
|
key: '6',
|
|
name: '乌鱼',
|
|
},
|
|
{
|
|
key: '7',
|
|
name: '鲈鱼',
|
|
},
|
|
{
|
|
key: '8',
|
|
name: '爱媛',
|
|
},
|
|
]
|
|
const columns: BasicColumn[] = [
|
|
{
|
|
title: '基地',
|
|
dataIndex: 'roleName',
|
|
},
|
|
{
|
|
title: '时间',
|
|
dataIndex: 'roleValue',
|
|
},
|
|
{
|
|
title: '录入时间',
|
|
dataIndex: 'orderNo',
|
|
},
|
|
{
|
|
title: '录入人员',
|
|
dataIndex: 'createTime',
|
|
},
|
|
{
|
|
title: '总产量（斤）',
|
|
dataIndex: 'createTime2',
|
|
},
|
|
{
|
|
title: '种养殖面积（亩）',
|
|
dataIndex: 'createTime3',
|
|
},
|
|
{
|
|
title: '产值（元）',
|
|
dataIndex: 'createTime4',
|
|
},
|
|
]
|
|
export default defineComponent({
|
|
components: {
|
|
[Tabs.name]: Tabs,
|
|
[Tabs.TabPane.name]: Tabs.TabPane,
|
|
[Card.name]: Card,
|
|
[DatePicker.name]: DatePicker,
|
|
[Button.name]: Button,
|
|
PageWrapper,
|
|
BasicTable,
|
|
},
|
|
setup() {
|
|
const yearShow = ref<boolean>(false)
|
|
const yearValue = ref()
|
|
|
|
const [registerTable, { reload }] = useTable({
|
|
// api: getRoleListByPage,
|
|
columns,
|
|
useSearchForm: false,
|
|
showTableSetting: false,
|
|
bordered: true,
|
|
showIndexColumn: false,
|
|
actionColumn: {
|
|
width: 80,
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
slots: { customRender: 'action' },
|
|
fixed: undefined,
|
|
},
|
|
})
|
|
|
|
const handleOpenChange = (open: boolean) => {
|
|
yearShow.value = open
|
|
}
|
|
const handlePanelChange = (e) => {
|
|
yearShow.value = false
|
|
yearValue.value = e
|
|
console.log(e.format('YYYY'))
|
|
}
|
|
return {
|
|
yearShow,
|
|
yearValue,
|
|
achieveList,
|
|
registerTable,
|
|
handleOpenChange,
|
|
handlePanelChange,
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.p0 {
|
|
.ant-table-wrapper {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
</style>
|