crowd-test-service-frontend/src/pages/DetailPage/ResourceDetail.vue

<template>
  <div class="create-container">
    <div class="create-body" v-loading="loading">
      <el-form :model="resource" label-width="12%" class="demo">
        <el-form-item label="资源名称" prop="name">
          <span>{{resource.name}}</span>
        </el-form-item>
        <el-form-item label="资源图标" prop="photo">
          <!--          <span  class="badge">{{resource.photo}}</span>-->
          <img :src="resource.photo" style="width: 50px; height: 50px;"/>
        </el-form-item>
        <el-form-item label="资源描述" prop="description" v-if="!description">
          <span>{{resource.description}}</span>
        </el-form-item>
        <el-form-item label="类型" prop="type" v-if="!type">
          <span>{{resource.type}}</span>
        </el-form-item>

        <el-form-item label="使用场景" prop="scene" v-if="!scene">
          <span>{{resource.scene}}</span>
        </el-form-item>
        <el-form-item label="收费标准" prop="standard" v-if="!standard">
          <span>{{resource.standard}}{{resource.unit}}</span>
        </el-form-item>
        <el-form-item label="注册日期" prop="startTime" v-if="!startTime">
          <span>{{$moment(resource.startTime).format("YYYY-MM-DD HH:mm:ss")}}</span>
        </el-form-item>

        <el-form-item label="数量" prop="quantity">
          <span>{{resource.quantity}}</span>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <span class="badge">{{resource.state}}</span>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <span>{{resource.unitWork}}</span>
        </el-form-item>

        <el-form-item label="其他说明" prop="remarks" v-if="!remarks">
          <span>{{resource.remarks}}</span>
        </el-form-item>
        <el-form-item>
          <div class="btn btn-medium" @click="back()">返回</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
    import Http from '@/js/http.js'
    import Apis from '@/js/api.js'
    import {notify} from '@/constants/index'
    import {getAllReportTypes, storageGet} from '@/js/index'

    export default {
        name: 'ResourceDetail',
        components: {},
        data() {
            return {
                user: {},
                loading: false,
                type: 0,
                code: 0,
                resource: {
                    name: '',
                    photo: '',
                    type: '',
                    quantity: 0,
                    state: 0,
                    unit: '',
                    description:'',
                    standard:'',
                    startTime:'',
                    scene:'',
                    remarks:'',
                    unitWork:'',
                },
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {
            init() {
                this.code = this.$route.params.id
                this.loadData()
            },
            back() {
                this.$router.go(-1);
            },
            loadData() {
                this.showLoading()
                Http.get(Apis.RESOURCE.GET_DETAIL.replace('{code}', this.code)).then((res) => {
                    console.log(res)
                    this.resource.name = res.data.name
                    this.resource.photo = res.data.photoUrl
                    this.resource.type = res.data.type
                    this.resource.state = res.data.state
                    this.resource.quantity = res.data.quantity
                    this.resource.unit = res.data.unit
                    this.resource.description = res.data.description
                    this.resource.standard = res.data.standard
                    this.resource.startTime = res.data.startTime
                    this.resource.scene = res.data.scene
                    this.resource.remarks = res.data.remarks
                    this.resource.unitWork = res.data.unitWork
                    this.hideLoading()
                }).catch((error) => {
                    this.hideLoading()
                    notify('error', '打开详情失败:' + error.data)
                })
            },
            setUserInfo() {
                this.user = storageGet('user')
            },
            showLoading() {
                this.loading = true
            },
            hideLoading() {
                this.loading = false
            }
        },
        watch: {
            resourceType(val) {
                this.resourceType = val
            }
        }
    }
</script>

<style>
  .demo {
    font-size: 32px;
  }

  .el-form-item {
    max-height: 120px !important;
  }
</style>