crmeb/admin/src/views/cm/meeting/room/cmmeetingroom-add-and-update.vue

<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
  <el-dialog
      :title="!dataForm.id ? '添加' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visible">
    <!-- 新增和修改表单 -->
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="会议室名称" prop="roomName">
            <el-input v-model="dataForm.roomName" placeholder="会议室名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="会议室位置" prop="roomLocation">
            <el-input v-model="dataForm.roomLocation" placeholder="会议室位置"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="容纳人数" prop="capacity">
            <el-input-number v-model="dataForm.capacity" placeholder="容纳人数" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总座位数" prop="totalSeats">
            <el-input-number v-model="dataForm.totalSeats" placeholder="总座位数" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="固定座位数" prop="fixedSeats">
            <el-input-number v-model="dataForm.fixedSeats" placeholder="固定座位数" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="可移动座位数" prop="movableSeats">
            <el-input-number v-model="dataForm.movableSeats" placeholder="可移动座位数" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="座位布局类型" prop="seatLayout">
            <el-input v-model="dataForm.seatLayout" placeholder="座位布局类型"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="配套设备" prop="equipmentConfig">
            <el-input v-model="dataForm.equipmentConfig" placeholder="配套设备"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="收费标准" prop="chargeStandard">
            <el-input v-model="dataForm.chargeStandard" placeholder="收费标准"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="可预约时间段" prop="reserveTimeRange">
            <el-input v-model="dataForm.reserveTimeRange" placeholder="可预约时间段"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="会议室状态" prop="roomStatus">
            <el-input v-model="dataForm.roomStatus" placeholder="会议室状态"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="文件id" prop="fileId">
        <el-input v-model="dataForm.fileId" placeholder="文件id"></el-input>
      </el-form-item>
      <el-form-item label="会议室描述" prop="description">
        <el-input v-model="dataForm.description" placeholder="会议室描述"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import * as api from '@/api/cmmeetingroom.js'
  export default {
    dicts: ['room_status','seat_layout'],
    data () {
      return {
        visible: false,
        dataForm: {
          id: 0,
          roomName: '' ,
          roomLocation: '' ,
          capacity: '' ,
          totalSeats: '' ,
          fixedSeats: '' ,
          movableSeats: '' ,
          seatLayout: '' ,
          equipmentConfig: '' ,
          chargeStandard: '' ,
          reserveTimeRange: '' ,
          fileId: '' ,
          roomStatus: '' ,
          description: '' ,
          remark: '' ,
        },
        dataRule: {
          roomName: [
            { required: true, message: '会议室名称  为必填项', trigger: 'blur' }
          ],
          // roomLocation: [
          //   { required: true, message: '会议室位置  为必填项', trigger: 'blur' }
          // ],
          // capacity: [
          //   { required: true, message: '容纳人数  为必填项', trigger: 'blur' }
          // ],
          // totalSeats: [
          //   { required: true, message: '总座位数  为必填项', trigger: 'blur' }
          // ],
          // fixedSeats: [
          //   { required: true, message: '固定座位数  为必填项', trigger: 'blur' }
          // ],
          // movableSeats: [
          //   { required: true, message: '可移动座位数  为必填项', trigger: 'blur' }
          // ],
          // seatLayout: [
          //   { required: true, message: '座位布局类型（圆桌式/剧院式/课桌式等）  为必填项', trigger: 'blur' }
          // ],
          // equipmentConfig: [
          //   { required: true, message: '配套设备  为必填项', trigger: 'blur' }
          // ],
          // chargeStandard: [
          //   { required: true, message: '收费标准  为必填项', trigger: 'blur' }
          // ],
          // reserveTimeRange: [
          //   { required: true, message: '可预约时间段  为必填项', trigger: 'blur' }
          // ],
          // fileId: [
          //   { required: true, message: '文件id  为必填项', trigger: 'blur' }
          // ],
          roomStatus: [
            { required: true, message: '会议室状态  为必填项', trigger: 'blur' }
          ],
          // description: [
          //   { required: true, message: '会议室描述  为必填项', trigger: 'blur' }
          // ],
          // remark: [
          //   { required: true, message: '备注  为必填项', trigger: 'blur' }
          // ],
        }
      }
    },
    methods: {
      init (id) { // 初始化表单验证规则
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(function() {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            api.cmmeetingroomDetailApi(id).then(function(res) {
              this.dataForm = res;
            }.bind(this))
          }
        }.bind(this))
      },
      // 表单数据提交
      dataSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.dataForm.id) {
              api.cmmeetingroomUpdateApi(this.dataForm).then(function(res) {
                this.$message.success('保存成功')
                this.visible = false
                this.$emit('refreshDataList')
              }.bind(this));
            } else {
              api.cmmeetingroomCreateApi(this.dataForm).then(function(res) {
                this.$message.success('新增成功')
                this.visible = false
                this.$emit('refreshDataList')
              }.bind(this));
            }
          }
        })
      }
    }
  }
</script>