<template> <div class="app-content" style="height: 76vh;overflow: auto;"> <a-spin :spinning="loading" style="width: 100%;height: 100%;"> <div class="page-card"> <a-tabs type="card" hideAdd size="small" @change="callback"> <a-tab-pane :key="item.key" :tab="item.title" v-for="(item) in tabsData"> </a-tab-pane> </a-tabs> </div> <div class="page-content"> <task-edit v-model="value" @close="closeWindow" @load="onLoad" ref="taskCreate" :tabsData.sync="tabsData" /> </div> <div class="page-footer"> <a-button type="primary" @click="save" v-if="tabsData[0].isShow">保 存</a-button> <a-button type="primary" style="margin-left: 40px" @click="submit" v-if="tabsData[0].isShow">完成填写</a-button> </div> </a-spin> </div> </template> <script> import taskEdit from "@/views/report/task/components/taskEdit" export default { name: "taskCreate", components: { taskEdit, }, data () { return { loading: false, tabsData: [ { title: '填报信息', key: '0', isShow: true }, { title: '项目组主要成员及单位', key: '1', isShow: true }, { title: '项目主要实施内容和目标', key: '2', isShow: true }, { title: '申请书正文', key: '3', isShow: true }, { title: '经费预算及设备明细', key: '4', isShow: true }, { title: '项目实施阶段及任务', key: '5', isShow: true }, { title: '项目课题设置', key: '6', isShow: true }, { title: '绩效目标表', key: '7', isShow: true }, { title: '附件信息', key: '8', isShow: true }, ], } }, props: { value: { type: String, default: () => { return null } }, }, created () { }, methods: { save () { this.$refs.taskCreate.save() }, submit () { this.$refs.taskCreate.submit() }, closeWindow (value) { this.$emit('close', value) }, onLoad (value) { this.loading = value }, callback (key) { var index = parseInt(key) this.tabsData.forEach(e => { e.isShow = false }) this.tabsData[index].isShow = true; }, }, } </script> <style scoped lang="less"> ::v-deep .ant-spin-container { width: 100%; height: 100%; } ::-webkit-scrollbar { width: 8px; height: 6px; } .page-card { width: 100%; height: 50px; overflow: auto; } .page-content { width: 100%; height: calc(100% - 90px); overflow: auto; } .page-footer { width: 100%; height: 40px; line-height: 40px; background: rgb(248, 248, 248); text-align: center; } </style>