277 lines
11 KiB
Vue
277 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<a-card :bordered="false" title="项目基本信息">
|
||
<!-- <template slot="extra">
|
||
<a-button type="primary" size="default" @click="toNext">下一步</a-button>
|
||
</template>
|
||
project/ProjectList /project/list/self
|
||
<template slot="extra">
|
||
<a-button type="primary" size="default" @click="close">退出</a-button>
|
||
</template> -->
|
||
<a-form-model ref="form" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" layout="horizontal">
|
||
<a-row :gutter="24">
|
||
<a-col :md="24" :sm="24">
|
||
<a-form-model-item label="项目名称" prop="projectName">
|
||
<a-input v-model="form.projectName" />
|
||
</a-form-model-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :md="24" :sm="24">
|
||
<a-form-model-item label="培训种类" prop="trainClass">
|
||
<a-select v-model="form.trainClass" placeholder="--请选择--">
|
||
<a-select-option v-for="entity in trainClass" :key="entity.value"> {{ entity.name }} </a-select-option>
|
||
</a-select>
|
||
<!-- <a-button type="primary" @click="$refs.classList.list()"> 新增种类 </a-button> -->
|
||
</a-form-model-item>
|
||
</a-col>
|
||
<a-col :span="24">
|
||
<a-form-model-item label="培训类型" prop="trainType">
|
||
<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-col>
|
||
<a-col :span="24">
|
||
<a-form-model-item label="培训方式" prop="trainWay">
|
||
<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-col>
|
||
<!-- <a-col :span="24">
|
||
<a-form-model-item label="人员类型" prop="personType">
|
||
<a-select v-model="form.personType" placeholder="--请选择--">
|
||
<a-select-option v-for="item in personType" :key="item.value"> {{ item.name }} </a-select-option>
|
||
</a-select>
|
||
</a-form-model-item>
|
||
</a-col> -->
|
||
<!-- 时间选择器呢 -->
|
||
<a-col v-if="form.projectType != 0" :span="24">
|
||
<a-form-model-item v-if="['1', '3' ,'4'].includes(form.trainWay)" label="培训时间" style="margin-bottom: 0">
|
||
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" prop="trainSdate">
|
||
<a-date-picker v-model="form.trainSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
|
||
</a-form-model-item>
|
||
<span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
|
||
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" prop="trainEdate">
|
||
<a-date-picker v-model="form.trainEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
|
||
</a-form-model-item>
|
||
</a-form-model-item>
|
||
</a-col>
|
||
<!-- 时间选择器 -->
|
||
<a-col v-if="form.projectType != 0" :span="24">
|
||
<a-form-model-item v-if="['3', '4'].includes(form.trainWay)" label="练习时间" style="margin-bottom: 0">
|
||
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" prop="practiceSdate">
|
||
<a-date-picker v-model="form.practiceSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
|
||
</a-form-model-item>
|
||
<span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
|
||
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" prop="practiceEdate">
|
||
<a-date-picker v-model="form.practiceEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
|
||
</a-form-model-item>
|
||
</a-form-model-item>
|
||
</a-col>
|
||
<!-- 时间选择器 -->
|
||
<a-col v-if="form.projectType != 0" :span="24">
|
||
<a-form-model-item v-if="['2', '4'].includes(form.trainWay)" label="考试时间" style="margin-bottom: 0">
|
||
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" prop="examSdate">
|
||
<a-date-picker v-model="form.examSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
|
||
</a-form-model-item>
|
||
<span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
|
||
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" prop="examEdate">
|
||
<a-date-picker v-model="form.examEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
|
||
</a-form-model-item>
|
||
</a-form-model-item>
|
||
</a-col>
|
||
|
||
<!-- 考试次数 -->
|
||
<a-col v-if="form.projectType != 0" :span="24">
|
||
<a-form-model-item v-if="['2', '4'].includes(form.trainWay)" label="考试次数" style="margin-bottom: 0">
|
||
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }" prop="examNumber">
|
||
<a-input-number v-model="form.examNumber" :min="0" style="width: 100%" />
|
||
</a-form-model-item>
|
||
</a-form-model-item>
|
||
</a-col>
|
||
|
||
<a-col v-if="form.projectType != 0" :span="24">
|
||
<a-form-model-item label="模拟考试" v-if="['2', '4'].includes(form.trainWay)" prop="mockExam">
|
||
<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-col>
|
||
<a-col :span="24">
|
||
<a-form-model-item label="备注">
|
||
<a-input v-model="form.remark" type="textarea" />
|
||
</a-form-model-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-col :span="24" style="text-align: center;">
|
||
<a-button type="primary" size="default" @click="toNext" style="margin-right: 8px;">下一步</a-button>
|
||
<a-button type="default" size="default" @click="close">退出</a-button>
|
||
</a-col>
|
||
</a-form-model>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { classList } from '@/api/project/class'
|
||
import { dictGet, getProjectDetail } from '@/api/project/project'
|
||
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
|
||
|
||
export default {
|
||
props: {
|
||
projectForm: {
|
||
type: Object
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
labelCol: { span: 4 },
|
||
wrapperCol: { span: 14 },
|
||
personType: [],
|
||
modalTitle: '新增项目',
|
||
visible: false,
|
||
confirmLoading: false,
|
||
trainClass: [],
|
||
form: this.projectForm,
|
||
rules: {
|
||
projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
|
||
trainClass: [{ required: true, message: '请选择培训分类', trigger: 'blur' }],
|
||
trainType: [{ required: true, message: '请选择培训类型', trigger: 'blur' }],
|
||
trainWay: [{ required: true, message: '请选择培训方式', trigger: 'biur' }],
|
||
// personType: [{ required: true, message: '请选择人员类型', trigger: 'blur' }],
|
||
trainSdate: [{ required: true, message: '请输入培训开始时间', trigger: 'change' }],
|
||
trainEdate: [{ required: true, message: '请输入培训结束时间', trigger: 'change' }],
|
||
practiceSdate: [{ required: true, message: '请输入练习开始时间', trigger: 'change' }],
|
||
practiceEdate: [{ required: true, message: '请输入练习结束时间', trigger: 'change' }],
|
||
examSdate: [{ required: true, message: '请输入考试开始时间', trigger: 'change' }],
|
||
examEdate: [{ required: true, message: '请输入考试结束时间', trigger: 'change' }],
|
||
examNumber: [{ required: true, message: '请输入考试次数', trigger: 'blur' }],
|
||
mockExam: [{ required: true, message: '请选择是否允许模拟考试', trigger: 'change' }]
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
dictGet,
|
||
classList
|
||
},
|
||
computed: {},
|
||
created(ClassList) {
|
||
console.log('第一个表单创建了')
|
||
if (this.$route.query.projectId && this.projectForm.stag == 0) {
|
||
getProjectDetail({ id: this.$route.query.projectId }).then(res => {
|
||
let form = res.data;
|
||
if (this.$route.query.t == 'model') {
|
||
console.log('form', form)
|
||
form.projectType = 1;
|
||
form.id = null;
|
||
}
|
||
this.form = form;
|
||
this.$emit('setFormType', this.form.trainWay)
|
||
})
|
||
}
|
||
// this.fetchTemplateData()
|
||
this.getTrainClass()
|
||
},
|
||
methods: {
|
||
close() {
|
||
console.log('Form返回list页面')
|
||
this.$emit('close')
|
||
},
|
||
//获取字典值，人员类型
|
||
// fetchTemplateData() {
|
||
// let formData = { dictionaryCode:'0005'}
|
||
// dictionaryDropDown(formData).then(res => {
|
||
// console.log(res)
|
||
// if (res.code == 200) {
|
||
// const result = res.data
|
||
// result.forEach(r => {
|
||
// this.personType.push({
|
||
// value: r.value,
|
||
// name: r.name
|
||
// })
|
||
// })
|
||
// }
|
||
// })
|
||
// },
|
||
|
||
//获取培训种类列表
|
||
getTrainClass() {
|
||
let formData = { type: 1 }
|
||
dictGet(formData).then(res => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
const result = res.data
|
||
result.forEach(r => {
|
||
this.trainClass.push({
|
||
value: r.id,
|
||
name: r.name
|
||
})
|
||
})
|
||
// console.log("222222222222222222222222222",this.trainClass)
|
||
}
|
||
})
|
||
},
|
||
|
||
/** 条件判断隐藏 */
|
||
condition() {
|
||
let f = this.form;
|
||
console.log('条件判断')
|
||
if (f.projectType == 0) {
|
||
f.trainSdate = null;
|
||
f.trainEdate = null;
|
||
f.practiceSdate = null;
|
||
f.practiceEdate = null;
|
||
f.examSdate = null;
|
||
f.examEdate = null;
|
||
f.examNumber = null;
|
||
f.mockExam = null;
|
||
} else {
|
||
if (f.trainWay == '1') {
|
||
f.practiceSdate = null;
|
||
f.practiceEdate = null;
|
||
f.examSdate = null;
|
||
f.examEdate = null;
|
||
f.examNumber = null;
|
||
f.mockExam = null;
|
||
}
|
||
if (f.trainWay == '2') {
|
||
f.practiceSdate = null;
|
||
f.practiceEdate = null;
|
||
f.trainSdate = null;
|
||
f.trainEdate = null;
|
||
}
|
||
if (f.trainWay == '3') {
|
||
f.examSdate = null;
|
||
f.examEdate = null;
|
||
f.examNumber = null;
|
||
f.mockExam = null;
|
||
}
|
||
}
|
||
this.form = f;
|
||
},
|
||
|
||
//跳转到下一页面
|
||
//下一步，跳转页面带上from对象
|
||
toNext() {
|
||
this.form.stag = 1;
|
||
this.condition();
|
||
this.$refs.form.validate(validate => {
|
||
if (validate) {
|
||
this.$emit('nextStep', this.form)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
destroyed() {
|
||
console.log('第一个表单销毁了')
|
||
}
|
||
|
||
}
|
||
</script>
|