BookingService/frontend/src/views/room/RoomDetail.vue

<template>
  <page-layout :title="isEdit ? `${room.name} 房间编辑` : '新建房间'">
    <a-card>
      <a-col
        :xs="{span: 24}"
        :sm="{span: 20}"
        :xl="{span: 16}">
        <a-form
          id="form"
          ref="form"
          :form="form"
          @submit="handleSubmit">
          <a-form-item
            v-if="isEdit"
            label="ID"
            v-bind="layout">
            {{room.id}}
          </a-form-item>
          <a-form-item
            label="名称"
            v-bind="layout">
            <a-input
              type="text"
              v-decorator="[
                'name',
                {
                  rules: [{required: true, message: '请输入名称'}],
                  validateTrigger: 'blur',
                  initialValue: isEdit ? room.name : null
                }
               ]">
            </a-input>
          </a-form-item>
          <a-form-item
            v-if="!isEdit"
            label="座位数量"
            v-bind="layout">
            <a-input
              type="number"
              v-decorator="[
                'seat_count',
                {
                  rules: [
                    {required: true, message: '请输入座位数量'},
                    {min: 0, message: '请输入大于等于1的数量'}
                  ],
                  validateTrigger: 'blur'
                }
               ]">
            </a-input>
          </a-form-item>
          <a-form-item
            label="说明"
            v-bind="layout">
            <a-textarea
              type="text"
              :rows="4"
              v-decorator="[
                'description',
                {initialValue: isEdit ? room.description: ''}
               ]">
            </a-textarea>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSubmit" style="float: right">
              保存
            </a-button>
            <a-popconfirm
              v-if="isEdit"
              title="确定删除吗？"
              @confirm="handleDelete"
              style="float: right; margin: 0 8px 0 0;">
              <a-button type="danger">
                删除
              </a-button>
            </a-popconfirm>
            <a-button style="float: right; margin: 0 8px 0 0;" @click="$router.go(-1)">
              返回
            </a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-card>
  </page-layout>
</template>

<script>
  import api from '../../api/room'
  import PageLayout from '../../components/page/PageLayout'

  export default {
    name: 'RoomDetail',
    components: {
      PageLayout
    },
    props: {
      id: String,
    },
    data () {
      return {
        layout: {
          'label-col': { span: 6 },
          'wrapper-col': { span: 18 }
        },
        form: this.$form.createForm(this),
        room: {}
      }
    },
    mounted () {
      if (this.isEdit) {
        this.getData()
      }
    },
    methods: {
      getData () {
        api.getRoom(this.id)
          .then(data => {
            this.room = data
          })
      },
      handleSubmit (e) {
        e.preventDefault()
        this.form.validateFields((error, data) => {
            if (!error) {
              if (this.isEdit) {
                api.updateRoom(this.id, data)
                  .then(data => {
                    this.$notification.success({ message: '成功', description: '成功修改房间', key: 'SUCCESS' })
                    this.$router.push({ name: 'room' })
                  })
              } else {
                api.createRoom(data)
                  .then(data => {
                    this.$notification.success({ message: '成功', description: '成功新建房间', key: 'SUCCESS' })
                    this.$router.push({ name: 'room' })
                  })
              }
            }
          }
        )
      },
      handleDelete () {
        api.deleteRoom(this.id)
          .then(data => {
            this.$notification.success({ message: '成功', description: '成功删除房间', key: 'SUCCESS' })
            this.$router.push({ name: 'room' })
          })
      },
    },
    computed: {
      isEdit () {
        return this.$route.path.split('/').pop() === 'edit'
      }
    }
  }
</script>

<style scoped lang="less">

</style>