290 lines
10 KiB
Vue
290 lines
10 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 对话框(添加 / 修改) -->
|
||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" v-dialogDrag append-to-body>
|
||
<el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
|
||
<el-collapse v-model="activeNames">
|
||
<el-collapse-item title="学员课程情况" name="1">
|
||
<el-row>
|
||
<el-col span="12">
|
||
<el-form-item label="课程名称" prop="courseName">
|
||
<el-input :readonly="readonly" v-model="formData.courseName"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col span="12">
|
||
<el-form-item label="教练姓名" prop="coachName">
|
||
<el-input :readonly="readonly" v-model="formData.coachName"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col span="12">
|
||
<el-form-item label="学员姓名" prop="userName">
|
||
<el-input :readonly="readonly" v-model="formData.userName"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col span="12">
|
||
<el-form-item label="学员手机号" prop="userMobile">
|
||
<el-input :readonly="readonly" v-model="formData.userMobile"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col span="12">
|
||
<el-form-item label="科目" prop="subject">
|
||
<el-input :readonly="readonly" v-model="formData.subject"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col span="12">
|
||
<el-form-item label="考试次数" prop="examNum">
|
||
<el-input :readonly="readonly" v-model="formData.examNum"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col span="12">
|
||
<el-form-item label="当前状态" prop="status">
|
||
<el-select :disabled="readonly" v-model="formData.status" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in statusOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col span="12">
|
||
<el-form-item label="考试情况" prop="examStatus">
|
||
<el-select :disabled="readonly" v-model="formData.examStatus" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in examStatusOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col span="12">
|
||
<el-form-item label="考试分数" prop="examScore">
|
||
<el-input :readonly="readonly" v-model="formData.examScore"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col span="12">
|
||
<el-form-item label="考试时间" prop="examTime">
|
||
<el-date-picker :readonly="readonly" clearable v-model="formData.examTime" type="date" value-format="timestamp" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input type="textarea" :readonly="readonly" v-model="formData.remark" placeholder="请输入备注" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="证明材料" prop="images">
|
||
<image-upload v-model="formData.images"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-collapse-item>
|
||
<el-collapse-item title="财务审核" name="2">
|
||
<el-row>
|
||
<el-col :span="24">
|
||
|
||
<el-form-item label="是否通过" prop="financePass">
|
||
<el-select :disabled="readonly" v-model="formData.financePass" placeholder="待审核">
|
||
<el-option
|
||
v-for="item in financePassOption"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="审批意见" prop="financeRemark">
|
||
<el-input type="textarea" :readonly="readonly" v-model="formData.financeRemark" placeholder="请输入财务审核备注" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button v-if="!readonly" type="primary" @click="submitForm" :readonly="formLoading">审 核</el-button>
|
||
<el-button @click="dialogVisible = false">关 闭</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as processApi from '@/views/drivingSchool/process/api';
|
||
export default {
|
||
name: "processForm",
|
||
components: {
|
||
},
|
||
data() {
|
||
return {
|
||
readonly:true,
|
||
// 弹出层标题
|
||
dialogTitle: "",
|
||
// 是否显示弹出层
|
||
dialogVisible: false,
|
||
activeNames: ['1','2'],
|
||
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||
formLoading: false,
|
||
statusOptions:[
|
||
{
|
||
value:'0',
|
||
label:'未完成'
|
||
},
|
||
{
|
||
value:'1',
|
||
label:'训练中'
|
||
},
|
||
{
|
||
value:'2',
|
||
label:'已完成'
|
||
}
|
||
],
|
||
examStatusOptions:[
|
||
{
|
||
value:null,
|
||
label:'未送考'
|
||
},{
|
||
value:'1',
|
||
label:'已通过'
|
||
},{
|
||
value:'9',
|
||
label:'已送考'
|
||
},{
|
||
value:'0',
|
||
label:'未通过'
|
||
}
|
||
],
|
||
financePassOption:[
|
||
{
|
||
value:false,
|
||
label:'未通过'
|
||
},
|
||
{
|
||
value:true,
|
||
label:'通过'
|
||
},
|
||
],
|
||
// 表单参数
|
||
formData: {
|
||
courseId: undefined,
|
||
courseName: undefined,
|
||
userId: undefined,
|
||
userName: undefined,
|
||
userMobile: undefined,
|
||
coachId: undefined,
|
||
coachName: undefined,
|
||
subject: undefined,
|
||
examNum: undefined,
|
||
status: undefined,
|
||
examStatus: undefined,
|
||
examScore: undefined,
|
||
images: undefined,
|
||
examTime: undefined,
|
||
remark: undefined,
|
||
trainTime: undefined,
|
||
financePass: undefined,
|
||
financeRemark: undefined,
|
||
},
|
||
// 表单校验
|
||
formRules: {
|
||
// userId: [{ required: true, message: '用户（学员）ID不能为空', trigger: 'blur' }],
|
||
// userName: [{ required: true, message: '用户（学员）姓名不能为空', trigger: 'blur' }],
|
||
// userMobile: [{ required: true, message: '学员手机号不能为空', trigger: 'blur' }],
|
||
// coachId: [{ required: true, message: '教练ID不能为空', trigger: 'blur' }],
|
||
// examNum: [{ required: true, message: '考试次数（第一次考试为1，第二次为2...）不能为空', trigger: 'blur' }],
|
||
// status: [{ required: true, message: '当前状态（0-未开始;1-训练中；2-已完成）不能为空', trigger: 'blur' }],
|
||
// examStatus: [{ required: true, message: '考试是否合格（0未通过；1已通过;null 未考试）不能为空', trigger: 'blur' }],
|
||
// examScore: [{ required: true, message: '考试分数不能为空', trigger: 'blur' }],
|
||
// images: [{ required: true, message: '图片证明材料不能为空', trigger: 'blur' }],
|
||
// examTime: [{ required: true, message: '考试时间不能为空', trigger: 'blur' }],
|
||
// remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
|
||
// trainTime: [{ required: true, message: '本科目累计训练时长不能为空', trigger: 'blur' }],
|
||
financePass: [{ required: true, message: '财务审核是否通过不能为空', trigger: 'blur' }],
|
||
financeRemark: [{ required: true, message: '财务审核备注不能为空', trigger: 'blur' }],
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
/** 打开弹窗 */
|
||
async open(id,readonly) {
|
||
this.dialogVisible = true;
|
||
this.readonly = readonly
|
||
this.reset();
|
||
// 修改时，设置数据
|
||
if (id) {
|
||
this.formLoading = true;
|
||
try {
|
||
const res = await processApi.getprocess(id);
|
||
this.formData = res.data;
|
||
this.title = "修改驾校-学员课程进度";
|
||
} finally {
|
||
this.formLoading = false;
|
||
}
|
||
}
|
||
this.title = "新增驾校-学员课程进度";
|
||
},
|
||
/** 提交按钮 */
|
||
async submitForm() {
|
||
// 校验主表
|
||
await this.$refs["formRef"].validate();
|
||
this.formLoading = true;
|
||
try {
|
||
const data = this.formData;
|
||
// 添加的提交
|
||
await processApi.checkProcess(data);
|
||
this.$modal.msgSuccess("审核成功");
|
||
this.dialogVisible = false;
|
||
this.$emit('success');
|
||
} finally {
|
||
this.formLoading = false;
|
||
}
|
||
},
|
||
/** 表单重置 */
|
||
reset() {
|
||
this.formData = {
|
||
courseId: undefined,
|
||
courseName: undefined,
|
||
userId: undefined,
|
||
userName: undefined,
|
||
userMobile: undefined,
|
||
coachId: undefined,
|
||
coachName: undefined,
|
||
subject: undefined,
|
||
examNum: undefined,
|
||
status: undefined,
|
||
examStatus: undefined,
|
||
examScore: undefined,
|
||
images: undefined,
|
||
examTime: undefined,
|
||
remark: undefined,
|
||
trainTime: undefined,
|
||
financePass: undefined,
|
||
financeRemark: undefined,
|
||
};
|
||
this.resetForm("formRef");
|
||
}
|
||
}
|
||
};
|
||
</script>
|