项目Form调整

This commit is contained in:
Yjhon 2022-03-08 17:41:07 +08:00
parent 52d859a60b
commit bca3a82c78
4 changed files with 138 additions and 72 deletions

View File

@ -3,7 +3,7 @@
<a-card :bordered="false" :title="title"> <a-card :bordered="false" :title="title">
<a-steps class="steps" :current="currentTab"> <a-steps class="steps" :current="currentTab">
<a-step title="基本信息" /> <a-step title="基本信息" />
<a-step title="选择单位" /> <!-- <a-step title="选择单位" /> -->
<a-step title="选择课程" /> <a-step title="选择课程" />
<a-step title="选择人员" /> <a-step title="选择人员" />
<a-step v-if="['2', '4'].includes(form.trainWay)" title="组卷策略" /> <a-step v-if="['2', '4'].includes(form.trainWay)" title="组卷策略" />
@ -12,11 +12,11 @@
<div class="content"> <div class="content">
<!-- <keep-alive exclude="result"> --> <!-- <keep-alive exclude="result"> -->
<step1 v-if="currentTab === 0" :projectForm="form" @nextStep="nextStep" @close="close" @setFormType="setFormType"/> <step1 v-if="currentTab === 0" :projectForm="form" @nextStep="nextStep" @close="close" @setFormType="setFormType"/>
<step2 v-if="currentTab === 1" :projectForm="form" @nextStep="nextStep" @prevStep="prevStep" @executeSave="executeSave"/> <!-- <step2 v-if="currentTab === 1" :projectForm="form" @nextStep="nextStep" @prevStep="prevStep" @executeSave="executeSave"/> -->
<step3 v-if="currentTab === 2" :projectForm="form" :courseChange="courseChange" @nextStep="nextStep" @prevStep="prevStep" /> <step3 v-if="currentTab === 1" :projectForm="form" :courseChange="courseChange" @nextStep="nextStep" @prevStep="prevStep" />
<step4 v-if="currentTab === 3" :projectForm="form" @nextStep="nextStep" @prevStep="prevStep" /> <step4 v-if="currentTab === 2" :projectForm="form" @nextStep="nextStep" @prevStep="prevStep" @executeSave="executeSave" @executeIssue="executeIssue" />
<step5 v-if="currentTab === 4" :projectForm="form" @prevStep="prevStep" @executeSave="executeSave" @executeIssue="executeIssue" /> <step5 v-if="currentTab === 3" :projectForm="form" @prevStep="prevStep" @executeSave="executeSave" @executeIssue="executeIssue" />
<result v-if="currentTab === 5" :projectForm="form" @prevStep="prevStep" :projectSaveStatus="status" @close="close" /> <result v-if="currentTab === 4" :projectForm="form" @prevStep="prevStep" :projectSaveStatus="status" @close="close" />
<!-- </keep-alive> --> <!-- </keep-alive> -->
</div> </div>
</a-card> </a-card>
@ -25,7 +25,7 @@
<script> <script>
// //
import Step1 from './form/ProjectForm' import Step1 from './form/ProjectForm'
import Step2 from './form/ProjectUnitSelect' // import Step2 from './form/ProjectUnitSelect'
import Step3 from './form/ProjectCourseList' import Step3 from './form/ProjectCourseList'
import Step4 from './form/ProjectPersonForm' import Step4 from './form/ProjectPersonForm'
import step5 from './form/ProjectTestPaperFormationStrategy' import step5 from './form/ProjectTestPaperFormationStrategy'
@ -37,7 +37,7 @@ import { projectAdd, getProjectDetail } from '@/api/project/project'
export default { export default {
components: { components: {
Step1, Step1,
Step2, // Step2,
Step3, Step3,
Step4, Step4,
step5, step5,
@ -119,8 +119,12 @@ export default {
if (childValue) { if (childValue) {
this.form = childValue this.form = childValue
} }
if(['1','3'].includes(childValue.trainWay) && this.currentTab == 2){
this.currentTab += 2
} else {
this.currentTab += 1 this.currentTab += 1
} }
}
console.log('ProjectStepForm表单数据', this.form) console.log('ProjectStepForm表单数据', this.form)
}, },
// //

View File

@ -2,7 +2,7 @@
<a-card class="coures" :bordered="false" title="项目课程信息"> <a-card class="coures" :bordered="false" title="项目课程信息">
<a-space direction="vertical" style="width: 100%"> <a-space direction="vertical" style="width: 100%">
<a-space direction="horizontal"> <a-space direction="horizontal">
<span>总课时{{ form.totalCourseHours }}H , 总学时要求{{ form.totalLearnHours }}H , 总题目数量{{ form.totalTopicNumber }} </span> <span>总课时{{ form.totalCourseHours }} , 总学时要求{{ form.totalLearnHours }} , 总题目数量{{ form.totalTopicNumber }} </span>
课程名: 课程名:
<a-input v-model="queryParam.courseName" style="width: 100%" /> <a-input v-model="queryParam.courseName" style="width: 100%" />
<a-button type="primary" icon="search" @click="$refs.table.refresh(true)">查询</a-button> <a-button type="primary" icon="search" @click="$refs.table.refresh(true)">查询</a-button>
@ -109,8 +109,8 @@ export default {
{ title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } }, { title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
{ title: '课程编号', dataIndex: 'courseCode', key: 'courseCode' }, { title: '课程编号', dataIndex: 'courseCode', key: 'courseCode' },
{ title: '课程名称', dataIndex: 'courseName', key: 'courseName' }, { title: '课程名称', dataIndex: 'courseName', key: 'courseName' },
{ title: '课时', dataIndex: 'courseHours', key: 'courseHours', customRender: (text) => text + 'H' }, { title: '课时', dataIndex: 'courseHours', key: 'courseHours' }, // customRender: (text) => text + 'H'
{ title: '学时要求', dataIndex: 'learnHours', key: 'learnHours', customRender: (text) => text + 'H' }, { title: '学时要求', dataIndex: 'learnHours', key: 'learnHours' }, //, customRender: (text) => text + 'H'
{ title: '题量', dataIndex: 'topicNumber', key: 'topicNumber' }, { title: '题量', dataIndex: 'topicNumber', key: 'topicNumber' },
{ title: '操作', width: 200, align: 'center', scopedSlots: { customRender: 'action' } }, { title: '操作', width: 200, align: 'center', scopedSlots: { customRender: 'action' } },
], // ], //

View File

@ -43,13 +43,13 @@
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="24"> <!-- <a-col :span="24">
<a-form-model-item label="人员类型" prop="personType"> <a-form-model-item label="人员类型" prop="personType">
<a-select v-model="form.personType" placeholder="--请选择--"> <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-option v-for="item in personType" :key="item.value"> {{ item.name }} </a-select-option>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col> -->
<!-- 时间选择器呢 --> <!-- 时间选择器呢 -->
<a-col :span="24"> <a-col :span="24">
<a-form-model-item v-if="['1', '3' ,'4'].includes(form.trainWay)" label="培训时间" style="margin-bottom: 0"> <a-form-model-item v-if="['1', '3' ,'4'].includes(form.trainWay)" label="培训时间" style="margin-bottom: 0">
@ -151,7 +151,7 @@ export default {
trainClass: [{ required: true, message: '请选择培训分类', trigger: 'blur' }], trainClass: [{ required: true, message: '请选择培训分类', trigger: 'blur' }],
trainType: [{ required: true, message: '请选择培训类型', trigger: 'blur' }], trainType: [{ required: true, message: '请选择培训类型', trigger: 'blur' }],
trainWay: [{ required: true, message: '请选择培训方式', trigger: 'biur' }], trainWay: [{ required: true, message: '请选择培训方式', trigger: 'biur' }],
personType: [{ required: true, message: '请选择人员类型', trigger: 'blur' }], // personType: [{ required: true, message: '', trigger: 'blur' }],
trainSdate: [{ required: true, message: '请输入培训开始时间', trigger: 'change' }], trainSdate: [{ required: true, message: '请输入培训开始时间', trigger: 'change' }],
trainEdate: [{ required: true, message: '请输入培训结束时间', trigger: 'change' }], trainEdate: [{ required: true, message: '请输入培训结束时间', trigger: 'change' }],
practiceSdate: [{ required: true, message: '请输入练习开始时间', trigger: 'change' }], practiceSdate: [{ required: true, message: '请输入练习开始时间', trigger: 'change' }],
@ -175,7 +175,7 @@ export default {
this.$emit('setFormType',this.form.trainWay) this.$emit('setFormType',this.form.trainWay)
}) })
} }
this.fetchTemplateData() // this.fetchTemplateData()
this.getTrainClass() this.getTrainClass()
}, },
methods: { methods: {
@ -184,21 +184,21 @@ export default {
this.$emit('close') this.$emit('close')
}, },
// //
fetchTemplateData() { // fetchTemplateData() {
let formData = { dictionaryCode:'0005'} // let formData = { dictionaryCode:'0005'}
dictionaryDropDown(formData).then(res => { // dictionaryDropDown(formData).then(res => {
console.log(res) // console.log(res)
if (res.code == 200) { // if (res.code == 200) {
const result = res.data // const result = res.data
result.forEach(r => { // result.forEach(r => {
this.personType.push({ // this.personType.push({
value: r.value, // value: r.value,
name: r.name // name: r.name
}) // })
}) // })
} // }
}) // })
}, // },
// //
getTrainClass() { getTrainClass() {

View File

@ -8,15 +8,13 @@
</template> --> </template> -->
<a-row type="flex" justify="center" align="top"> <a-row type="flex" justify="center" align="top">
<a-col :span="4" id="tree"> <a-col :span="4" id="tree">
<a-page-header title="单位列表" sub-title="" /> <a-menu v-model="menuKey" mode="horizontal" @select="menuChack">
<a-menu-item key="unit">部门列表</a-menu-item>
<a-menu-item key="group">项目列表</a-menu-item>
</a-menu>
<div v-if="this.orgTree != ''"> <div v-if="this.orgTree != ''">
<a-tree <a-tree :treeData="orgTree" v-if="orgTree.length" @select="onSelect" :defaultExpandAll="false"
:treeData="orgTree" :defaultExpandedKeys="expandedKeys" :replaceFields="replaceFields" :defaultSelectedKeys="defaultSelectedKeys" showLine="true">
v-if="orgTree.length"
@select="onSelect"
:defaultExpandAll="false"
:defaultExpandedKeys="expandedKeys"
:replaceFields="replaceFields">
<a-icon slot="switcherIcon" type="down" /> <a-icon slot="switcherIcon" type="down" />
</a-tree> </a-tree>
</div> </div>
@ -29,19 +27,19 @@
<a-form-item label="姓名"> <a-form-item label="姓名">
<a-input v-model="queryParam.name" placeholder="请输入姓名" /> <a-input v-model="queryParam.name" placeholder="请输入姓名" />
</a-form-item> </a-form-item>
<a-form-item label="人员类型"> <!-- <a-form-item label="人员类型">
<a-select default-value="0" style="width: 120px"> <a-select default-value="0" style="width: 120px">
<a-select-option value="0"> - - </a-select-option> <a-select-option value="0"> - - </a-select-option>
<a-select-option value="1"> </a-select-option> <a-select-option value="1"> </a-select-option>
<a-select-option value="2"> </a-select-option> <a-select-option value="2"> </a-select-option>
<a-select-option value="3"> </a-select-option> <a-select-option value="3"> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item> -->
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button> <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
<a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button> <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
</a-row> </a-row>
</a-form> </a-form>
<s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id" :rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows, onChange: onSelectChange }"> <s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id" :rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows, onChange: onSelectChange, onSelect: tableOnSelect ,onSelectAll: tableAllSelected }">
<span slot="serial" slot-scope="text, record, index"> <span slot="serial" slot-scope="text, record, index">
{{ index + 1 }} {{ index + 1 }}
</span> </span>
@ -59,7 +57,9 @@
</a-row> </a-row>
<a-col :span="24" style="text-align: center;"> <a-col :span="24" style="text-align: center;">
<a-button type="primary" size="default" @click="toPrev" style="margin-right: 8px;">上一步</a-button> <a-button type="primary" size="default" @click="toPrev" style="margin-right: 8px;">上一步</a-button>
<a-button type="primary" size="default" @click="toNext">下一步</a-button> <a-button v-if="['2','4'].includes(form.trainWay)" type="primary" size="default" @click="toNext">下一步</a-button>
<a-button v-if="['1','3'].includes(form.trainWay)" type="primary" size="default" @click="toSaveOrIssue('save')" style="margin-right: 8px;">保存</a-button>
<a-button v-if="['1','3'].includes(form.trainWay)" type="primary" size="default" @click="toSaveOrIssue('issue')">发布</a-button>
</a-col> </a-col>
</a-card> </a-card>
</template> </template>
@ -84,16 +84,17 @@ export default {
type: Object type: Object
} }
}, },
data () { data() {
// //
return { return {
form: this.projectForm, form: this.projectForm,
// //
queryParam: { orgType: 1 }, queryParam: { orgType: 1 },
menuKey: ['unit'], //
replaceFields: { children: 'children', title: 'name', key: 'id', value: 'id' }, replaceFields: { children: 'children', title: 'name', key: 'id', value: 'id' },
expandedKeys: [], expandedKeys: [],
defaultSelectedKeys:[], //treekey
autoExpandParent: true, autoExpandParent: true,
expandedKeys: [],
selectedRowKeys: [], selectedRowKeys: [],
selectedRows: this.projectForm.projectPersonLists || [], selectedRows: this.projectForm.projectPersonLists || [],
orgTree: [], orgTree: [],
@ -114,7 +115,7 @@ export default {
}, },
// data // data
computed: { computed: {
hasSelected () { hasSelected() {
return this.selectedRowKeys.length > 0 return this.selectedRowKeys.length > 0
} }
}, },
@ -123,7 +124,7 @@ export default {
// //
methods: { methods: {
// //
toNext () { toNext() {
this.form.projectPersonLists = this.selectedRows this.form.projectPersonLists = this.selectedRows
this.form.personIds = this.selectedRowKeys this.form.personIds = this.selectedRowKeys
if (this.form.personIds.length > 0) { if (this.form.personIds.length > 0) {
@ -133,34 +134,91 @@ export default {
} }
}, },
// //
toPrev () { toPrev() {
this.form.projectPersonLists = this.selectedRows this.form.projectPersonLists = this.selectedRows
this.form.personIds = this.selectedRowKeys this.form.personIds = this.selectedRowKeys
this.$emit('prevStep', this.form) this.$emit('prevStep', this.form)
}, },
// &&
toSaveOrIssue(type) {
this.form.projectPersonLists = this.selectedRows
this.form.personIds = this.selectedRowKeys
console.log('toSaveOrIssue - type', type)
if (this.form.personIds.length > 0) {
console.log('进来了')
if (type != 'issue') {
console.log('save')
this.form.projectStatus = 1
this.$emit('executeSave', this.form)
} else {
console.log('issue')
this.form.projectStatus = 2
this.$emit('executeIssue', this.form)
}
} else {
this.$message.warning('培训人员不能为空')
}
},
/** 切换table后触发 */
menuChack() {
if (this.menuKey == 'unit') {
this.orgType = 2 //
} else {
this.orgType = 1 //
}
this.defaultSelectedKeys = [];
this.queryParam.orgType = this.orgType;
this.queryParam.orgId = null;
this.getOrgTree();
this.$refs.table.refresh();
},
/** 表格行选中后触发 */ /** 表格行选中后触发 */
onSelectChange (selectedRowKeys, selectedRows) { onSelectChange(selectedRowKeys, selectedRows) {
console.log('selectedRowKeys changed: ', selectedRowKeys) console.log('selectedRowKeys changed: ', selectedRowKeys)
console.log('选择的表格数据 : ', selectedRows) console.log('选择的表格数据 : ', selectedRows)
this.selectedRowKeys = this.uniqueKeys([...this.selectedRowKeys, ...selectedRowKeys]) this.selectedRowKeys = this.uniqueKeys([...this.selectedRowKeys, ...selectedRowKeys])
this.selectedRows = this.unique([...this.selectedRows, ...selectedRows]) this.selectedRows = this.unique([...this.selectedRows, ...selectedRows])
}, },
/** table取消勾选 */
tableOnSelect(record, selected, selectedRows, nativeEvent) {
if (!selected) { //
let keys = this.selectedRowKeys.filter(item => item != record.id);
let rows = this.selectedRows.filter(item => item.id != record.id);
this.selectedRows = rows;
this.selectedRowKeys = keys;
}
},
/** table取消全选 */
tableAllSelected(selected, selectedRows, changeRows) {
if (!selected) { //
let exKeys = changeRows.map(value => { return value.id })
let keys = this.selectedRowKeys.filter(item => { return !exKeys.includes(item) });
let rows = this.selectedRows.filter(item => { return !exKeys.includes(item.id) });
this.selectedRows = rows;
this.selectedRowKeys = keys;
}
},
// //
unique (arr) { unique(arr) {
const res = new Map() const res = new Map()
return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1)) return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
}, },
// key // key
uniqueKeys (arr) { uniqueKeys(arr) {
const res = new Map() const res = new Map()
return arr.filter((arr) => !res.has(arr) && res.set(arr, 1)) return arr.filter((arr) => !res.has(arr) && res.set(arr, 1))
}, },
// //
changeList (item) { changeList(item) {
console.log('列表点击删除列表项 : ', item) console.log('列表点击删除列表项 : ', item)
this.selectedRows = this.selectedRows.filter(function (i) { this.selectedRows = this.selectedRows.filter(function (i) {
return i.id != item.item.id return i.id != item.item.id
@ -171,13 +229,13 @@ export default {
}, },
// //
removeAllSelece () { removeAllSelece() {
this.selectedRowKeys = [] this.selectedRowKeys = []
this.selectedRows = [] this.selectedRows = []
}, },
// //
onSelect (selectedKey, info) { onSelect(selectedKey, info) {
console.log('selected', selectedKey, info) console.log('selected', selectedKey, info)
this.queryParam.orgId = selectedKey.toString() this.queryParam.orgId = selectedKey.toString()
this.orgId = selectedKey.toString() this.orgId = selectedKey.toString()
@ -185,13 +243,13 @@ export default {
}, },
// 使 // 使
onExpand (expandedKeys) { onExpand(expandedKeys) {
this.expandedKeys = expandedKeys this.expandedKeys = expandedKeys
this.autoExpandParent = false this.autoExpandParent = false
}, },
// //
initPersonList () { initPersonList() {
if (this.form.projectPersonLists) { if (this.form.projectPersonLists) {
this.selectedRowKeys = [], this.selectedRowKeys = [],
this.form.projectPersonLists.forEach(element => { this.form.projectPersonLists.forEach(element => {
@ -204,43 +262,47 @@ export default {
/** /**
* 获取到机构树展开顶级下树节点考虑到后期数据量变大不建议全部展开 * 获取到机构树展开顶级下树节点考虑到后期数据量变大不建议全部展开
*/ */
async getOrgTree () { async getOrgTree() {
await orgList({ orgType: this.orgType }).then((res) => { await orgList({ orgType: this.orgType }).then((res) => {
this.treeLoading = false this.treeLoading = false
if (!res.code === 200 || !res.data.length) { // if (!res.code === 200 || !res.data.length) {
return // return
} // }
this.expandedKeys = [] this.expandedKeys = []
this.orgTree = listToTree(res.data, [], rootParentId) this.orgTree = listToTree(res.data, [], rootParentId)
this.orgId = this.orgTree[0].id this.orgId = this.orgTree[0].id
// //
this.orgTree.forEach(item => { this.orgTree.forEach(item => {
if(this.defaultSelectedKeys.length < 1) {
this.defaultSelectedKeys.push(item.id)
console.log('this.defaultSelectedKeys',this.defaultSelectedKeys)
}
this.expandedKeys.push(item.id) this.expandedKeys.push(item.id)
}) })
}) })
} }
}, },
// - 访this // - 访this
created () { created() {
this.getOrgTree() this.getOrgTree()
this.initPersonList() this.initPersonList()
}, },
// - 访DOM // - 访DOM
mounted () { }, mounted() { },
// - // -
beforeCreate () { }, beforeCreate() { },
// - // -
beforeMount () { }, beforeMount() { },
// - // -
beforeUpdate () { }, beforeUpdate() { },
// - // -
updated () { }, updated() { },
// - // -
beforeDestroy () { }, beforeDestroy() { },
// - // -
destroyed () { }, destroyed() { },
// keep-alive // keep-alive
activated () { } activated() { }
} }
</script> </script>
<style scoped> <style scoped>