ThreeGamesFrontEnd/src/views/user/add.vue

<template>
  <div class="app-container">
    <el-form ref="loginForm" :model="rateForm" :rules="rateRules" label-width="160px" class="customer-form" size="mini">

      <el-form-item label="用戶名" prop="nickname">
        <el-input v-model="rateForm.nickname" />
      </el-form-item>
      <el-form-item label="登錄密碼" prop="password">
        <el-input v-model="rateForm.password" />
      </el-form-item>
      <el-form-item label="禁止登出" prop="password">
        <el-switch
          v-model="rateForm.loginOut"
          active-color="#13ce66"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
<!--      <el-form-item label="性別" prop="">-->
<!--        <el-radio-group v-model="rateForm.gender">-->
<!--          <el-radio :label="1">男</el-radio>-->
<!--          <el-radio :label="2">女</el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
      <el-form-item label="測試週期">
        <el-date-picker
          v-model="rateForm.period"
          type="daterange"
          range-separator="至"
          start-placeholder="開始日期"
          end-placeholder="結束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
        />
      </el-form-item>
      <el-form-item label="量表提示時間">
        <el-time-picker
          v-model="rateForm.scaleTime"
          placeholder="量表提示時間"
          value-format="HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="數字顯示時長" prop="showTime">
        <el-input v-model="rateForm.showTime" type="number">
          <template slot="append">ms</template>
        </el-input>
      </el-form-item>
      <el-form-item label="數字交換間隔" prop="hideTime">
        <el-input v-model="rateForm.hideTime" type="number">
          <template slot="append">ms</template>
        </el-input>
      </el-form-item>
      <el-form-item label="正確數字出現次數" prop="correct">
        <el-input v-model="rateForm.correct" type="number" />
      </el-form-item>
      <el-form-item label="隨機數字出現次數" prop="supporting">
        <el-input v-model="rateForm.supporting" type="number" />
      </el-form-item>
      <el-form-item label="遊戲練習結束進入測試的時長" prop="practice">
        <el-input v-model="rateForm.practice" type="number">
          <template slot="append">ms</template>
        </el-input>
      </el-form-item>
      <el-form-item label="遊戲前練習正確數字出現次數" prop="practice">
        <el-input v-model="rateForm.exerciseRight" type="number" />
      </el-form-item>
      <el-form-item label="練習數字出現的次數" prop="practice">
        <el-input v-model="rateForm.exercise" type="number" />
      </el-form-item>
      <el-form-item label="游戏版本">
        <el-checkbox-group v-model="rateForm.versions">
          <el-checkbox label="A" style="margin-right: 10px" />
          <el-checkbox label="B" style="margin-right: 10px" />
          <el-checkbox label="C" style="margin-right: 10px" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="遊戲時間段" style="width: 800px">
        <el-row v-for="(items, index) in gameConfigs" :key="index" style="display: flex;align-items: center">
          <div />
          <el-time-select
            v-model="items.startTime"
            size="mini"
            placeholder="遊戲時間段"
            style="width: 150px"
            :picker-options="{
              start: '00:00',
              step: '00:01:00',
              end: '23:59',
              minTime: index > 0 ? gameConfigs[index-1].endTime : null,
            }"
          />
          <el-time-select
            v-model="items.endTime"
            size="mini"
            placeholder="遊戲時間段"
            style="width: 150px"
            :picker-options="{
              step: '00:01:00',
              minTime: items.startTime,
              start: '00:00',
              end: '23:59'
            }"
          />
          <div>
            <i class="el-icon-circle-plus" @click="addConfig()" />
            <i v-if="gameConfigs.length !== 1" class="el-icon-remove a_style" @click="deleteConfig(index)" />
          </div>
        </el-row>
      </el-form-item>
    </el-form>
    <el-button size="small" type="primary" @click="addUser">添加</el-button>
  </div>
</template>

<script>
import { add } from '@/api/user'
import { Message } from 'element-ui'

export default {
  name: 'Add',
  data() {
    return {
      rateForm: {
        versions: []
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      rateRules: {
        nickname: [{ required: true, message: '請添加名字', trigger: 'blur' }],
        password: [
          { required: true, min: 6, max: 7, message: '6位密碼', trigger: 'blur' },
          { required: true, pattern: /^[0-9a-zA-Z]*$/, message: '數字和字符', trigger: 'blur' }
        ]
      },
      options: [],
      gameConfigs: [{}]
    }
  },
  created() {
  },
  methods: {
    addUser() {
      this.rateForm.scaleStart = this.rateForm.period[0]
      this.rateForm.scaleEnd = this.rateForm.period[1]
      this.rateForm.version = this.rateForm.versions.join(',')
      this.rateForm.configs = JSON.stringify(this.gameConfigs)
      add(this.rateForm).then(response => {
        Message({
          message: '添加成功',
          type: 'success',
          duration: 2 * 1000
        })
        if (response.code === 200) {
          this.$router.go(-1)
        }
      })
    },
    addConfig() {
      this.gameConfigs.push({ versions: [] })
    },
    deleteConfig(index) {
      this.gameConfigs.splice(index, 1)
    }
  }
}
</script>

<style scoped>
  .customer-form{
    width: 500px;
  }
</style>