feat: 自主项目新建部分样式修改

This commit is contained in:
cgd_mac 2021-12-04 21:56:33 +08:00
parent f9e51792e4
commit 9d6ba97e74
4 changed files with 208 additions and 170 deletions

View File

@ -55,7 +55,7 @@ export default {
},
type: {
type: String,
default: 'file' // img: , file:
default: 'img' // img: , file:
},
//
max: {

View File

@ -1,10 +1,9 @@
<template>
<!-- PageHeader 第二种使用方式 (v-slot) -->
<a-card :bordered="false" :title="title">
<a-steps class="steps" type="navigation" :current="currentTab">
<a-steps class="steps" :current="currentTab">
<a-step title="基本信息" />
<a-step title="选择单位" />
<!-- v-if="['2', '3', '4'].includes(form.trainWay)" -->
<a-step v-if="['2', '3', '4'].includes(form.trainWay)" title="选择课程" />
<a-step v-if="['2', '3', '4'].includes(form.trainWay)" title="选择人员" />
<a-step v-if="['2', '3', '4'].includes(form.trainWay)" title="组卷策略" />
@ -23,7 +22,13 @@
@executeSave="executeSave"
@executeIssue="executeIssue"
/>
<result v-if="currentTab === 5" :projectForm="form" @prevStep="prevStep" :projectSaveStatus="status" @close="close" />
<result
v-if="currentTab === 5"
:projectForm="form"
@prevStep="prevStep"
:projectSaveStatus="status"
@close="close"
/>
<!-- </keep-alive> -->
</div>
</a-card>
@ -48,13 +53,13 @@ export default {
Step3,
Step4,
step5,
result,
result
},
// - 访this
created() {
console.log('分步表单创建完成',this.$route)
console.log('分步表单创建完成', this.$route)
if (this.$route.query.projectId) {
getProjectDetail({ id: this.$route.query.projectId }).then((res) => {
getProjectDetail({ id: this.$route.query.projectId }).then(res => {
this.form = res.data
})
}
@ -65,16 +70,16 @@ export default {
data() {
return {
title: '',
currentTab: 0,
currentTab: 1,
sourcePath: '',
t: '',
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
sm: { span: 16 }
},
modalTitle: '新增项目',
visible: false,
@ -84,10 +89,10 @@ export default {
t: this.$route.query.t,
projectType: this.$route.query.t === 'sys' ? 0 : 1,
trainWay: '2',
totalScore: '100',
totalScore: '100'
},
result: true,
status: '',
status: ''
}
},
methods: {
@ -107,7 +112,7 @@ export default {
//
saveData() {
projectAdd(Object.assign({}, this.form)).then((res) => {
projectAdd(Object.assign({}, this.form)).then(res => {
if (res.code == 200) {
this.status = 'success'
this.currentTab = 5
@ -145,14 +150,14 @@ export default {
close() {
console.log('close------', this.$route.query.t)
this.$router.push({
path: '/project/list/'+this.$route.query.t,
path: '/project/list/' + this.$route.query.t,
query: {
t: this.$route.query.t,
queryParam: this.$route.query.projectQueryParam,
},
queryParam: this.$route.query.projectQueryParam
}
})
},
},
}
}
}
</script>
@ -161,4 +166,8 @@ export default {
max-width: 750px;
margin: 16px auto;
}
::v-deep .ant-btn + .ant-btn {
margin-left: 0px;
}
</style>

View File

@ -1,122 +1,136 @@
<template>
<a-card :bordered="false" title="项目基本信息">
<template slot="extra">
<div>
<a-card :bordered="false" title="项目基本信息">
<!-- <template slot="extra">
<a-button type="primary" size="default" @click="toNext">下一步</a-button>
</template>
<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 :span="24">
<a-form-model-item 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" />
</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>
<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-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-form-model-item>
</a-col>
<!-- 时间选择器 -->
<a-col :span="24">
<a-form-model-item v-if="['2', '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-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>
<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-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-form-model-item>
</a-col>
<!-- 时间选择器 -->
<a-col :span="24">
<a-form-model-item v-if="['2', '3', '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-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>
<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-col>
<!-- 时间选择器呢 -->
<a-col :span="24">
<a-form-model-item 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-form-model-item>
</a-col>
</a-col>
<!-- 时间选择器 -->
<a-col :span="24">
<a-form-model-item v-if="['2', '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 :span="24">
<a-form-model-item v-if="['2', '3', '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 :span="24">
<a-form-model-item v-if="['2', '3', '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>
<!-- <span> 补考次数: </span>
<!-- 考试次数 -->
<a-col :span="24">
<a-form-model-item v-if="['2', '3', '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>
<!-- <span> 补考次数: </span>
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
<a-input-number v-model="form.resitNumber" :min="0" style="width: 100%" />
</a-form-model-item>
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
<a-button type="primary" @click="randomResit"> 随机补考 </a-button>
</a-form-model-item> -->
</a-form-model-item>
</a-col>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="模拟考试" v-if="['2', '3', '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 :span="24">
<a-form-model-item label="模拟考试" v-if="['2', '3', '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">下一步</a-button>
<a-button type="default" size="default" @click="close">退出</a-button>
</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-form-model>
</a-card>
</a-form-model>
</a-card>
</div>
<!-- </page-header-wrapper> -->
<!-- <class-list ref="ClassList"></class-list> -->
</template>
@ -128,8 +142,8 @@ import { classList } from '@/api/project/class'
export default {
props: {
projectForm: {
type: Object,
},
type: Object
}
},
data() {
return {
@ -154,14 +168,14 @@ export default {
examSdate: [{ required: true, message: '请输入考试开始时间', trigger: 'change' }],
examEdate: [{ required: true, message: '请输入考试结束时间', trigger: 'change' }],
examNumber: [{ required: true, message: '请输入考试次数', trigger: 'blur' }],
mockExam: [{ required: true, message: '请选择是否允许模拟考试', trigger: 'change' }],
},
mockExam: [{ required: true, message: '请选择是否允许模拟考试', trigger: 'change' }]
}
}
},
components: {
dictGet,
ClassList,
classList,
classList
},
created(ClassList) {
console.log('第一个表单创建了')
@ -176,14 +190,14 @@ export default {
//,
fetchTemplateData() {
let formData = { type: 2 }
dictGet(formData).then((res) => {
dictGet(formData).then(res => {
console.log(res)
if (res.code == 200) {
const result = res.data
result.forEach((r) => {
result.forEach(r => {
this.personType.push({
value: r.value,
name: r.name,
name: r.name
})
})
}
@ -193,14 +207,14 @@ export default {
//
getTrainClass() {
let formData = { type: 1 }
dictGet(formData).then((res) => {
dictGet(formData).then(res => {
console.log(res)
if (res.code == 200) {
const result = res.data
result.forEach((r) => {
result.forEach(r => {
this.trainClass.push({
value: r.id,
name: r.name,
name: r.name
})
})
// console.log("222222222222222222222222222",this.trainClass)
@ -212,15 +226,15 @@ export default {
//from
toNext() {
// console.log('toNext', this.form)
this.$refs.form.validate((validate) => {
this.$refs.form.validate(validate => {
if (validate) {
this.$emit('nextStep', this.form)
}
})
},
}
},
destroyed() {
console.log('第一个表单销毁了')
},
}
}
</script>

View File

@ -1,28 +1,45 @@
<template>
<a-card :bordered="false" title="选择培训单位">
<template slot="extra">
<a-button type="primary" size="default" @click="toPrep">上一步</a-button>
</template>
<template slot="extra">
<a-button type="primary" v-if="['2', '3', '4'].includes(form.trainWay)" size="default" @click="toNext">下一步</a-button>
</template>
<template type="primary" v-if="form.trainWay === '1'" slot="extra">
<a-button size="default" @click="handleSubmit">保存</a-button>
</template>
<a-transfer class="tree-transfer" :data-source="dataSource" :target-keys="targetKeys" :render="(item) => item.title" :show-select-all="false" @change="onChange">
<template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }">
<a-tree v-if="direction === 'left'" blockNode checkable checkStrictly defaultExpandAll :checkedKeys="[...selectedKeys, ...targetKeys]" :treeData="treeData" @check="
(_, props) => {
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
}
" @select="
(_, props) => {
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
}
" />
</template>
</a-transfer>
</a-card>
<div>
<a-card :bordered="false" title="选择培训单位">
<a-transfer
class="tree-transfer"
:data-source="dataSource"
:target-keys="targetKeys"
:render="item => item.title"
:show-select-all="false"
@change="onChange"
>
<template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }">
<a-tree
v-if="direction === 'left'"
blockNode
checkable
checkStrictly
defaultExpandAll
:checkedKeys="[...selectedKeys, ...targetKeys]"
:treeData="treeData"
@check="
(_, props) => {
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
}
"
@select="
(_, props) => {
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
}
"
/>
</template>
</a-transfer>
</a-card>
<a-col :span="24" style="text-align: center;">
<a-button type="primary" size="default" @click="toPrep" style="margin-right: 8px;">上一步</a-button>
<a-button type="primary" v-if="['2', '3', '4'].includes(form.trainWay)" size="default" @click="toNext"
>下一步</a-button
>
<a-button v-if="form.trainWay === '1'" size="default" @click="handleSubmit">保存</a-button>
</a-col>
</div>
</template>
<script>
@ -47,7 +64,7 @@ const treeData = []
const transferDataSource = []
function flatten(list = []) {
list.forEach((item) => {
list.forEach(item => {
transferDataSource.push(item)
flatten(item.children)
})
@ -80,7 +97,7 @@ export default {
targetKeys: this.projectForm.unitIds || [],
dataSource: transferDataSource,
// treeData() {return handleTreeData(treeData, this.targetKeys)},
treeData: [],
treeData: []
}
},
// data
@ -99,16 +116,16 @@ export default {
},
//
getSourceList(orgType) {
orgList({ orgType: orgType || 1 }).then((res) => {
orgList({ orgType: orgType || 1 }).then(res => {
if (res.data) {
this.dataSource = []
res.data.forEach((item) => {
res.data.forEach(item => {
this.dataSource.push({
id: item.id,
key: item.id.toString(),
title: item.name,
children: [],
pid: item.pid,
pid: item.pid
})
})
console.log('dataSource', this.dataSource)
@ -140,7 +157,7 @@ export default {
} else {
this.$message.warning('请选择培训单位')
}
},
}
},
// - 访this
created() {
@ -150,23 +167,23 @@ export default {
},
// - 访DOM
mounted() { },
mounted() {},
// -
beforeCreate() { },
beforeCreate() {},
// -
beforeMount() { },
beforeMount() {},
// -
beforeUpdate() { },
beforeUpdate() {},
// -
updated() { },
updated() {},
// -
beforeDestroy() { },
beforeDestroy() {},
// -
destroyed() {
console.log('第2个表单销毁了')
},
// keep-alive
activated() { },
activated() {}
}
</script>
<style scoped>
@ -175,5 +192,3 @@ export default {
flex: none;
}
</style>