|
|
|
|
@ -3,12 +3,13 @@
|
|
|
|
|
<el-dialog title="创建报名表单" :show-close="false" :visible.sync="dialogVisible" :fullscreen="true" :modal='false'>
|
|
|
|
|
<template v-slot:title>
|
|
|
|
|
<div style="display: flex;align-items: center;justify-content: space-between;font-size: 26px;">
|
|
|
|
|
<div style="display: flex;align-items: center;">
|
|
|
|
|
<div style="width:300px">创建报名表单</div>
|
|
|
|
|
<el-select v-model="hasCourseId" @change="changeCourse" placeholder="请选择课程表单" clearable style="width: 100%;">
|
|
|
|
|
<el-option v-for="item in hasCourseList" :key="item.id" :label="item.name" :value="item.id">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<div style="display: flex;align-items: center;">
|
|
|
|
|
<div style="width:300px">创建报名表单</div>
|
|
|
|
|
<el-select v-model="hasCourseId" @change="changeCourse" placeholder="请选择课程表单" clearable
|
|
|
|
|
style="width: 100%;">
|
|
|
|
|
<el-option v-for="item in hasCourseList" :key="item.id" :label="item.name" :value="item.id">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="cursor: pointer;">
|
|
|
|
|
<Button type="primary" @click="dialogVisible = false">完成并关闭</Button>
|
|
|
|
|
@ -41,16 +42,15 @@
|
|
|
|
|
" v-for="(i, index) in defaultFormList">
|
|
|
|
|
<el-input :placeholder="i.help?i.help:'表单字段'" :disabled="true"></el-input>
|
|
|
|
|
</el-form-item> -->
|
|
|
|
|
<draggable :value="formList" group="items" @change="changeHandler"
|
|
|
|
|
style="width:100%">
|
|
|
|
|
<el-form-item style="flex-basis: 100%;" :label="i.name || '字段名称'" :required="
|
|
|
|
|
i.rule ? !!i.rule.includes('required') : false
|
|
|
|
|
" v-for="(i, index) in formList" @click.native="selectPick(i, index)">
|
|
|
|
|
<formSlotRender :config="i" :index="index"></formSlotRender>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<draggable :value="formList" group="items" @change="changeHandler" style="width:100%">
|
|
|
|
|
<el-form-item style="flex-basis: 100%;" :label="i.name || '字段名称'" :required="
|
|
|
|
|
i.rule ? !!i.rule.includes('required') : false
|
|
|
|
|
" v-for="(i, index) in formList" @click.native="selectPick(i, index)">
|
|
|
|
|
<formSlotRender :config="i" :index="index"></formSlotRender>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</draggable>
|
|
|
|
|
<!-- <el-divider>选填字段</el-divider> -->
|
|
|
|
|
<!-- <el-form-item style="flex-basis: 100%;" :label="i.name" :required="
|
|
|
|
|
<!-- <el-form-item style="flex-basis: 100%;" :label="i.name" :required="
|
|
|
|
|
i.rule ? !!i.rule.includes('required') : false
|
|
|
|
|
" v-for="(i, index) in selectFormList"
|
|
|
|
|
@click.native="selectPick(i, index)">
|
|
|
|
|
@ -80,17 +80,15 @@
|
|
|
|
|
</template>
|
|
|
|
|
</Split>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<!-- -->
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="提示"
|
|
|
|
|
:visible.sync="showTips"
|
|
|
|
|
width="30%">
|
|
|
|
|
<div style="padding: 30px;font-size: 24px;text-indent: 2em;">是否确认克隆<span style="color:red">{{hasCourseName}}</span>的报名表单,克隆后将<span style="color:red">覆盖原有课程的报名表单</span>,请谨慎操作。</div>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="showTips = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="copyForms">确 定</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<!-- -->
|
|
|
|
|
<el-dialog title="提示" :visible.sync="showTips" width="30%">
|
|
|
|
|
<div style="padding: 30px;font-size: 24px;text-indent: 2em;">是否确认克隆<span
|
|
|
|
|
style="color:red">{{hasCourseName}}</span>的报名表单,克隆后将<span style="color:red">覆盖原有课程的报名表单</span>,请谨慎操作。</div>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="showTips = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="copyForms">确 定</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -105,11 +103,12 @@
|
|
|
|
|
import {
|
|
|
|
|
index,
|
|
|
|
|
save,
|
|
|
|
|
destroy,
|
|
|
|
|
destroy,
|
|
|
|
|
cloneForm
|
|
|
|
|
} from "@/api/course/form";
|
|
|
|
|
import {
|
|
|
|
|
index as courseIndex
|
|
|
|
|
} from "@/api/course/form";
|
|
|
|
|
import {
|
|
|
|
|
index as courseIndex,
|
|
|
|
|
show as courseShow
|
|
|
|
|
} from "@/api/course/index.js"
|
|
|
|
|
import {
|
|
|
|
|
deepCopy
|
|
|
|
|
@ -124,19 +123,19 @@
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
course_id: "",
|
|
|
|
|
course_signs_count:0,
|
|
|
|
|
course_id: "",
|
|
|
|
|
course_signs_count: 0,
|
|
|
|
|
select: {
|
|
|
|
|
page: 1,
|
|
|
|
|
page_size: 999,
|
|
|
|
|
sort_name: 'sort',
|
|
|
|
|
sort_type: 'ASC'
|
|
|
|
|
},
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
showTips:false,
|
|
|
|
|
hasCourseId:'',
|
|
|
|
|
hasCourseName:'',
|
|
|
|
|
hasCourseList:[],
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
showTips: false,
|
|
|
|
|
hasCourseId: '',
|
|
|
|
|
hasCourseName: '',
|
|
|
|
|
hasCourseList: [],
|
|
|
|
|
formList: [],
|
|
|
|
|
types: [],
|
|
|
|
|
rules: {},
|
|
|
|
|
@ -148,53 +147,63 @@
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getConfig()
|
|
|
|
|
this.getConfig()
|
|
|
|
|
this.getCourseList()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 获取有 自定义表单的 课程
|
|
|
|
|
async getCourseList(){
|
|
|
|
|
const res = await courseIndex({
|
|
|
|
|
page:1,
|
|
|
|
|
page_size:999,
|
|
|
|
|
has_course_forms:1,
|
|
|
|
|
sort_name:'id',
|
|
|
|
|
sort_type:'ASC',
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
this.hasCourseList = res.data.filter((item)=>{return item.id!=this.course_id})
|
|
|
|
|
},
|
|
|
|
|
changeCourse(e){
|
|
|
|
|
console.log("course-e",e)
|
|
|
|
|
if(this.course_signs_count>0){
|
|
|
|
|
this.$message({
|
|
|
|
|
type:'warning',
|
|
|
|
|
duration:4000,
|
|
|
|
|
message:'当前课程已有人员报名,不可进行报名表单克隆操作'
|
|
|
|
|
})
|
|
|
|
|
// this.$Message.warning("当前课程已有人员报名,不可进行报名表单克隆操作")
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if(e){
|
|
|
|
|
this.hasCourseList.map(item=>{
|
|
|
|
|
if(item.id===e){
|
|
|
|
|
this.hasCourseId = e
|
|
|
|
|
this.hasCourseName = item.name
|
|
|
|
|
this.showTips = true
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 复制表单数据
|
|
|
|
|
copyForms(){
|
|
|
|
|
cloneForm({
|
|
|
|
|
from_course_id:this.hasCourseId,
|
|
|
|
|
to_course_id:this.course_id
|
|
|
|
|
}).then(res=>{
|
|
|
|
|
this.$Message.success('克隆成功')
|
|
|
|
|
this.showTips = false
|
|
|
|
|
this.getFormList()
|
|
|
|
|
})
|
|
|
|
|
methods: {
|
|
|
|
|
// 获取有 自定义表单的 课程
|
|
|
|
|
async getCourseList() {
|
|
|
|
|
const res = await courseIndex({
|
|
|
|
|
page: 1,
|
|
|
|
|
page_size: 999,
|
|
|
|
|
has_course_forms: 1,
|
|
|
|
|
sort_name: 'id',
|
|
|
|
|
sort_type: 'ASC',
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
this.hasCourseList = res.data.filter((item) => {
|
|
|
|
|
return item.id != this.course_id
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
changeCourse(e) {
|
|
|
|
|
console.log("course-e", e)
|
|
|
|
|
if (e) {
|
|
|
|
|
this.getDetail(e)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getDetail(e) {
|
|
|
|
|
courseShow({
|
|
|
|
|
id: this.course_id,
|
|
|
|
|
}).then(res => {
|
|
|
|
|
// this.course_signs_count = res.course_signs_count
|
|
|
|
|
if (this.course_signs_count > 0) {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'warning',
|
|
|
|
|
duration: 4000,
|
|
|
|
|
message: '当前课程已有人员报名,不可进行报名表单克隆操作'
|
|
|
|
|
})
|
|
|
|
|
// this.$Message.warning("当前课程已有人员报名,不可进行报名表单克隆操作")
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.hasCourseList.map(item => {
|
|
|
|
|
if (item.id === e) {
|
|
|
|
|
this.hasCourseId = e
|
|
|
|
|
this.hasCourseName = item.name
|
|
|
|
|
this.showTips = true
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 复制表单数据
|
|
|
|
|
copyForms() {
|
|
|
|
|
cloneForm({
|
|
|
|
|
from_course_id: this.hasCourseId,
|
|
|
|
|
to_course_id: this.course_id
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.$Message.success('克隆成功')
|
|
|
|
|
this.showTips = false
|
|
|
|
|
this.getFormList()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//获取 左侧 formitem类型
|
|
|
|
|
async getConfig() {
|
|
|
|
|
@ -220,9 +229,9 @@
|
|
|
|
|
})
|
|
|
|
|
this.formList = res.data
|
|
|
|
|
// this.updateObjects(this.selectFormList, this.formList)
|
|
|
|
|
// let _arr = this.removeMatchingItems(this.selectFormList, this.formList)
|
|
|
|
|
// this.formList.push(..._arr)
|
|
|
|
|
// this.selectFormList = _arr
|
|
|
|
|
// let _arr = this.removeMatchingItems(this.selectFormList, this.formList)
|
|
|
|
|
// this.formList.push(..._arr)
|
|
|
|
|
// this.selectFormList = _arr
|
|
|
|
|
// console.log("_arr",_arr)
|
|
|
|
|
console.log("this.selectFormList", this.selectFormList, this.formList)
|
|
|
|
|
|
|
|
|
|
@ -282,13 +291,13 @@
|
|
|
|
|
newIndex,
|
|
|
|
|
oldIndex
|
|
|
|
|
} = e.moved;
|
|
|
|
|
element.sort = newIndex;
|
|
|
|
|
console.log(element)
|
|
|
|
|
if(element.id){
|
|
|
|
|
this.saveSelect(element)
|
|
|
|
|
}else{
|
|
|
|
|
this.formList.splice(oldIndex, 1);
|
|
|
|
|
this.formList.splice(newIndex, 0, element);
|
|
|
|
|
element.sort = newIndex;
|
|
|
|
|
console.log(element)
|
|
|
|
|
if (element.id) {
|
|
|
|
|
this.saveSelect(element)
|
|
|
|
|
} else {
|
|
|
|
|
this.formList.splice(oldIndex, 1);
|
|
|
|
|
this.formList.splice(newIndex, 0, element);
|
|
|
|
|
}
|
|
|
|
|
// if (element) {
|
|
|
|
|
|
|
|
|
|
@ -299,7 +308,7 @@
|
|
|
|
|
// 选中的 表单数据
|
|
|
|
|
selectPick(i, index) {
|
|
|
|
|
this.$refs.editPane.selectedIndex = index
|
|
|
|
|
this.$refs.editPane.selectedForm = deepCopy(i)
|
|
|
|
|
this.$refs.editPane.selectedForm = deepCopy(i)
|
|
|
|
|
this.$refs.editPane.formList = deepCopy(this.formList)
|
|
|
|
|
this.$refs.editPane.showForm = true
|
|
|
|
|
},
|
|
|
|
|
@ -349,9 +358,9 @@
|
|
|
|
|
if (newval) {
|
|
|
|
|
this.getFormList()
|
|
|
|
|
} else {
|
|
|
|
|
this.course_id = ''
|
|
|
|
|
this.course_signs_count = 0
|
|
|
|
|
this.hasCourseId = ''
|
|
|
|
|
this.course_id = ''
|
|
|
|
|
this.course_signs_count = 0
|
|
|
|
|
this.hasCourseId = ''
|
|
|
|
|
this.hasCourseName = ''
|
|
|
|
|
this.selectFormList.map(item => {
|
|
|
|
|
item.is_open = false
|
|
|
|
|
|