detail.vue 1.74 KB
<template>
    <div class="app-container">
        <section class="qg-container">
        <h4 class="qg-container__title">详情</h4>
        <el-form :model="bookInfo" class="qg-edit-form" label-width="120px">
       <el-form-item label="书本编号" prop="code">
         {{ bookInfo.code || '--' }}
      </el-form-item>
       <el-form-item label="书本名称" prop="name">
         {{ bookInfo.name || '--' }}
      </el-form-item>
       <el-form-item label="书本介绍" prop="introduce">
         {{ bookInfo.introduce || '--' }}
      </el-form-item>
       <el-form-item label="书本排序" prop="showorder">
           <span v-if="typeof bookInfo.showorder === 'number'">
             {{ bookInfo.showorder }}
           </span>
           <span v-else> -- </span>
      </el-form-item>
            <el-form-item>
              <el-button @click="goBack">返回</el-button>
  			</el-form-item>
        </el-form>
        </section>
    </div>
</template>
                    
<script>
    import {book} from '@/api/moudles/xieyunhui/book';
  	import {componentsData} from './config.js'
  	
    export default {
        name:'BookDetail',
        data() {
            const id = this.$route.query.id;
            return {
                componentsData,
                id,
                bookInfo: {}
            };
        },
        created() {
            if (this.id) {
                this.book(this.id);
            }
        },
        methods: {
            book(id) {
                book(id).then(response => {
      				if (response.data) {
                      	this.bookInfo = response.data;
                    }
                });
            },
            goBack() {
                 this.$router.back();
            }
        }
    };
</script>