welfare-admin/src/views/project/ProjectForm.vue

<template>
  <page-header-wrapper :title="新增项目">
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :layout="vertical">
      <a-form-model-item label="项目名称">
        <a-input v-model="form.projectName" v-decorator="[
            'projectName',
            {
              rules: [{ required: true, message: '项目名称为必填' }],
            },
          ]"/>
      </a-form-model-item>
      <a-form-model-item label="培训种类">
        <a-select v-model="form.trainClass" placeholder="--请选择--">
          <a-select-option value="shanghai"> Zone one </a-select-option>
          <a-select-option value="beijing"> Zone two </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="培训类型">
        <a-select v-model="form.trainType" placeholder="--请选择--">
          <a-select-option value="1"> 必修课 </a-select-option>
          <a-select-option value="2"> 选修课 </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="培训方式">
        <a-select v-model="form.trainWay" placeholder="--请选择--">
          <a-select-option value="1"> 培训 </a-select-option>
          <a-select-option value="2"> 考试 </a-select-option>
          <a-select-option value="3"> 培训-练习 </a-select-option>
          <a-select-option value="4"> 培训-练习-考试 </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="人员类型">
        <a-select v-model="form.personType" placeholder="--请选择--">
          <a-select-option v-for="item in personType" :key="item.id"> {{ item.name }} </a-select-option>
        </a-select>
      </a-form-model-item>
      <!-- 时间选择器呢 -->
      <a-form-item label="培训时间" style="margin-bottom: 0">
        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-date-picker v-model="form.trainSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
        </a-form-item>
        <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-date-picker v-model="form.trainEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
        </a-form-item>
      </a-form-item>
      <!-- 时间选择器 -->
      <a-form-item v-if="['2', '3', '4'].includes(form.trainWay)" label="练习时间" style="margin-bottom: 0">
        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-date-picker v-model="form.practiceSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
        </a-form-item>
        <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-date-picker v-model="form.practiceEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
        </a-form-item>
      </a-form-item>
      <!-- 时间选择器 -->
      <a-form-item v-if="['2', '3', '4'].includes(form.trainWay)" label="考试时间" style="margin-bottom: 0">
        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-date-picker v-model="form.examSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
        </a-form-item>
        <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
          <a-date-picker v-model="form.examEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
        </a-form-item>
      </a-form-item>

      <!-- 考试次数 -->
      <a-form-item v-if="['2', '3', '4'].includes(form.trainWay)" label="考试次数" style="margin-bottom: 0">
        <a-form-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
          <a-input-number v-model="form.examNumber" :min="0" style="width: 100%" />
        </a-form-item>
        <span> 补考次数: </span>
        <a-form-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
          <a-input-number v-model="form.resitNumber" :min="0" style="width: 100%" />
        </a-form-item>
        <a-form-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
          <a-button type="primary" @click="javascript;"> 随机补考 </a-button>
        </a-form-item>
      </a-form-item>

      <a-form-model-item label="模拟考试" v-if="['2', '3', '4'].includes(form.trainWay)">
        <a-radio-group v-model="form.mockExam">
          <a-radio value="1"> 允许 </a-radio>
          <a-radio value="0"> 不允许 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="备注">
        <a-input v-model="form.remark" type="textarea" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="toNext"> 下一步 </a-button>
        <a-button style="margin-left: 10px"> 取消 </a-button>
      </a-form-model-item>
    </a-form-model>
  </page-header-wrapper>
</template>
<script>
import {getPersonType} from '@/api/project/project'

export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        projectName: '',
      },
    }
  },
  components: {
      getPersonType,
  },
  created: {
    
  },
  methods: {
    //获取字典值
    getPersonType() {
      return getPersonType(Object.assign(parameter)).then((res) => {
        return res
      })
    },

    //下一步，跳转页面带上from对象
    toNext() {
      console.log('toNext', this.form)
    },
  },
}
</script>