项目Form调整
This commit is contained in:
parent
52d859a60b
commit
bca3a82c78
|
@ -3,7 +3,7 @@
|
|||
<a-card :bordered="false" :title="title">
|
||||
<a-steps class="steps" :current="currentTab">
|
||||
<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="组卷策略" />
|
||||
|
@ -12,11 +12,11 @@
|
|||
<div class="content">
|
||||
<!-- <keep-alive exclude="result"> -->
|
||||
<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"/>
|
||||
<step3 v-if="currentTab === 2" :projectForm="form" :courseChange="courseChange" @nextStep="nextStep" @prevStep="prevStep" />
|
||||
<step4 v-if="currentTab === 3" :projectForm="form" @nextStep="nextStep" @prevStep="prevStep" />
|
||||
<step5 v-if="currentTab === 4" :projectForm="form" @prevStep="prevStep" @executeSave="executeSave" @executeIssue="executeIssue" />
|
||||
<result v-if="currentTab === 5" :projectForm="form" @prevStep="prevStep" :projectSaveStatus="status" @close="close" />
|
||||
<!-- <step2 v-if="currentTab === 1" :projectForm="form" @nextStep="nextStep" @prevStep="prevStep" @executeSave="executeSave"/> -->
|
||||
<step3 v-if="currentTab === 1" :projectForm="form" :courseChange="courseChange" @nextStep="nextStep" @prevStep="prevStep" />
|
||||
<step4 v-if="currentTab === 2" :projectForm="form" @nextStep="nextStep" @prevStep="prevStep" @executeSave="executeSave" @executeIssue="executeIssue" />
|
||||
<step5 v-if="currentTab === 3" :projectForm="form" @prevStep="prevStep" @executeSave="executeSave" @executeIssue="executeIssue" />
|
||||
<result v-if="currentTab === 4" :projectForm="form" @prevStep="prevStep" :projectSaveStatus="status" @close="close" />
|
||||
<!-- </keep-alive> -->
|
||||
</div>
|
||||
</a-card>
|
||||
|
@ -25,7 +25,7 @@
|
|||
<script>
|
||||
//页面
|
||||
import Step1 from './form/ProjectForm'
|
||||
import Step2 from './form/ProjectUnitSelect'
|
||||
// import Step2 from './form/ProjectUnitSelect'
|
||||
import Step3 from './form/ProjectCourseList'
|
||||
import Step4 from './form/ProjectPersonForm'
|
||||
import step5 from './form/ProjectTestPaperFormationStrategy'
|
||||
|
@ -37,7 +37,7 @@ import { projectAdd, getProjectDetail } from '@/api/project/project'
|
|||
export default {
|
||||
components: {
|
||||
Step1,
|
||||
Step2,
|
||||
// Step2,
|
||||
Step3,
|
||||
Step4,
|
||||
step5,
|
||||
|
@ -119,7 +119,11 @@ export default {
|
|||
if (childValue) {
|
||||
this.form = childValue
|
||||
}
|
||||
this.currentTab += 1
|
||||
if(['1','3'].includes(childValue.trainWay) && this.currentTab == 2){
|
||||
this.currentTab += 2
|
||||
} else {
|
||||
this.currentTab += 1
|
||||
}
|
||||
}
|
||||
console.log('ProjectStepForm表单数据', this.form)
|
||||
},
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<a-card class="coures" :bordered="false" title="项目课程信息">
|
||||
<a-space direction="vertical" style="width: 100%">
|
||||
<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-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: '课程编号', dataIndex: 'courseCode', key: 'courseCode' },
|
||||
{ title: '课程名称', dataIndex: 'courseName', key: 'courseName' },
|
||||
{ title: '课时', dataIndex: 'courseHours', key: 'courseHours', customRender: (text) => text + 'H' },
|
||||
{ title: '学时要求', dataIndex: 'learnHours', key: 'learnHours', customRender: (text) => text + 'H' },
|
||||
{ title: '课时', dataIndex: 'courseHours', key: 'courseHours' }, // customRender: (text) => text + 'H'
|
||||
{ title: '学时要求', dataIndex: 'learnHours', key: 'learnHours' }, //, customRender: (text) => text + 'H'
|
||||
{ title: '题量', dataIndex: 'topicNumber', key: 'topicNumber' },
|
||||
{ title: '操作', width: 200, align: 'center', scopedSlots: { customRender: 'action' } },
|
||||
], // 表头
|
||||
|
|
|
@ -43,13 +43,13 @@
|
|||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<!-- <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> -->
|
||||
<!-- 时间选择器呢 -->
|
||||
<a-col :span="24">
|
||||
<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' }],
|
||||
trainType: [{ required: true, message: '请选择培训类型', trigger: 'blur' }],
|
||||
trainWay: [{ required: true, message: '请选择培训方式', trigger: 'biur' }],
|
||||
personType: [{ required: true, message: '请选择人员类型', trigger: 'blur' }],
|
||||
// personType: [{ required: true, message: '请选择人员类型', trigger: 'blur' }],
|
||||
trainSdate: [{ required: true, message: '请输入培训开始时间', trigger: 'change' }],
|
||||
trainEdate: [{ required: true, message: '请输入培训结束时间', trigger: 'change' }],
|
||||
practiceSdate: [{ required: true, message: '请输入练习开始时间', trigger: 'change' }],
|
||||
|
@ -175,7 +175,7 @@ export default {
|
|||
this.$emit('setFormType',this.form.trainWay)
|
||||
})
|
||||
}
|
||||
this.fetchTemplateData()
|
||||
// this.fetchTemplateData()
|
||||
this.getTrainClass()
|
||||
},
|
||||
methods: {
|
||||
|
@ -184,21 +184,21 @@ export default {
|
|||
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
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 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() {
|
||||
|
|
|
@ -8,15 +8,13 @@
|
|||
</template> -->
|
||||
<a-row type="flex" justify="center" align="top">
|
||||
<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 != ''">
|
||||
<a-tree
|
||||
:treeData="orgTree"
|
||||
v-if="orgTree.length"
|
||||
@select="onSelect"
|
||||
:defaultExpandAll="false"
|
||||
:defaultExpandedKeys="expandedKeys"
|
||||
:replaceFields="replaceFields">
|
||||
<a-tree :treeData="orgTree" v-if="orgTree.length" @select="onSelect" :defaultExpandAll="false"
|
||||
:defaultExpandedKeys="expandedKeys" :replaceFields="replaceFields" :defaultSelectedKeys="defaultSelectedKeys" showLine="true">
|
||||
<a-icon slot="switcherIcon" type="down" />
|
||||
</a-tree>
|
||||
</div>
|
||||
|
@ -29,19 +27,19 @@
|
|||
<a-form-item label="姓名">
|
||||
<a-input v-model="queryParam.name" placeholder="请输入姓名" />
|
||||
</a-form-item>
|
||||
<a-form-item label="人员类型">
|
||||
<!-- <a-form-item label="人员类型">
|
||||
<a-select default-value="0" style="width: 120px">
|
||||
<a-select-option value="0"> - 全 部 - </a-select-option>
|
||||
<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>
|
||||
</a-form-item>
|
||||
</a-form-item> -->
|
||||
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
|
||||
</a-row>
|
||||
</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">
|
||||
{{ index + 1 }}
|
||||
</span>
|
||||
|
@ -59,7 +57,9 @@
|
|||
</a-row>
|
||||
<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="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-card>
|
||||
</template>
|
||||
|
@ -84,16 +84,17 @@ export default {
|
|||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
form: this.projectForm,
|
||||
// 查询参数
|
||||
queryParam: { orgType: 1 },
|
||||
menuKey: ['unit'], //默认选择部门列表
|
||||
replaceFields: { children: 'children', title: 'name', key: 'id', value: 'id' },
|
||||
expandedKeys: [],
|
||||
defaultSelectedKeys:[], //tree默认选中的key
|
||||
autoExpandParent: true,
|
||||
expandedKeys: [],
|
||||
selectedRowKeys: [],
|
||||
selectedRows: this.projectForm.projectPersonLists || [],
|
||||
orgTree: [],
|
||||
|
@ -114,7 +115,7 @@ export default {
|
|||
},
|
||||
// 计算属性 类似于data概念
|
||||
computed: {
|
||||
hasSelected () {
|
||||
hasSelected() {
|
||||
return this.selectedRowKeys.length > 0
|
||||
}
|
||||
},
|
||||
|
@ -123,7 +124,7 @@ export default {
|
|||
// 方法集合
|
||||
methods: {
|
||||
// 下一步
|
||||
toNext () {
|
||||
toNext() {
|
||||
this.form.projectPersonLists = this.selectedRows
|
||||
this.form.personIds = this.selectedRowKeys
|
||||
if (this.form.personIds.length > 0) {
|
||||
|
@ -133,34 +134,91 @@ export default {
|
|||
}
|
||||
},
|
||||
// 上一步
|
||||
toPrev () {
|
||||
toPrev() {
|
||||
this.form.projectPersonLists = this.selectedRows
|
||||
this.form.personIds = this.selectedRowKeys
|
||||
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('选择的表格数据 : ', selectedRows)
|
||||
this.selectedRowKeys = this.uniqueKeys([...this.selectedRowKeys, ...selectedRowKeys])
|
||||
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()
|
||||
return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
|
||||
},
|
||||
|
||||
// key去重
|
||||
uniqueKeys (arr) {
|
||||
uniqueKeys(arr) {
|
||||
const res = new Map()
|
||||
return arr.filter((arr) => !res.has(arr) && res.set(arr, 1))
|
||||
},
|
||||
|
||||
// 列表点击删除列表项
|
||||
changeList (item) {
|
||||
changeList(item) {
|
||||
console.log('列表点击删除列表项 : ', item)
|
||||
this.selectedRows = this.selectedRows.filter(function (i) {
|
||||
return i.id != item.item.id
|
||||
|
@ -171,13 +229,13 @@ export default {
|
|||
},
|
||||
|
||||
// 清空选择
|
||||
removeAllSelece () {
|
||||
removeAllSelece() {
|
||||
this.selectedRowKeys = []
|
||||
this.selectedRows = []
|
||||
},
|
||||
|
||||
// 选中后触发
|
||||
onSelect (selectedKey, info) {
|
||||
onSelect(selectedKey, info) {
|
||||
console.log('selected', selectedKey, info)
|
||||
this.queryParam.orgId = selectedKey.toString()
|
||||
this.orgId = selectedKey.toString()
|
||||
|
@ -185,18 +243,18 @@ export default {
|
|||
},
|
||||
|
||||
// 树使用的方法
|
||||
onExpand (expandedKeys) {
|
||||
onExpand(expandedKeys) {
|
||||
this.expandedKeys = expandedKeys
|
||||
this.autoExpandParent = false
|
||||
},
|
||||
|
||||
// 编辑时初始化人员列表初始化
|
||||
initPersonList () {
|
||||
initPersonList() {
|
||||
if (this.form.projectPersonLists) {
|
||||
this.selectedRowKeys = [],
|
||||
this.form.projectPersonLists.forEach(element => {
|
||||
this.selectedRowKeys.push(element.id)
|
||||
})
|
||||
this.form.projectPersonLists.forEach(element => {
|
||||
this.selectedRowKeys.push(element.id)
|
||||
})
|
||||
console.log('初始化的值', this.selectedRowKeys)
|
||||
}
|
||||
},
|
||||
|
@ -204,43 +262,47 @@ export default {
|
|||
/**
|
||||
* 获取到机构树,展开顶级下树节点,考虑到后期数据量变大,不建议全部展开
|
||||
*/
|
||||
async getOrgTree () {
|
||||
async getOrgTree() {
|
||||
await orgList({ orgType: this.orgType }).then((res) => {
|
||||
this.treeLoading = false
|
||||
if (!res.code === 200 || !res.data.length) {
|
||||
return
|
||||
}
|
||||
// if (!res.code === 200 || !res.data.length) {
|
||||
// return
|
||||
// }
|
||||
this.expandedKeys = []
|
||||
this.orgTree = listToTree(res.data, [], rootParentId)
|
||||
this.orgId = this.orgTree[0].id
|
||||
// 默认展开
|
||||
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实例)
|
||||
created () {
|
||||
created() {
|
||||
this.getOrgTree()
|
||||
this.initPersonList()
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问DOM元素)
|
||||
mounted () { },
|
||||
mounted() { },
|
||||
// 生命周期 - 创建之前
|
||||
beforeCreate () { },
|
||||
beforeCreate() { },
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount () { },
|
||||
beforeMount() { },
|
||||
// 生命周期 - 更新之前
|
||||
beforeUpdate () { },
|
||||
beforeUpdate() { },
|
||||
// 生命周期 - 更新之后
|
||||
updated () { },
|
||||
updated() { },
|
||||
// 生命周期 - 销毁之前
|
||||
beforeDestroy () { },
|
||||
beforeDestroy() { },
|
||||
// 生命周期 - 销毁完成
|
||||
destroyed () { },
|
||||
destroyed() { },
|
||||
// 如果页面有keep-alive缓存功能,这个函数会触发
|
||||
activated () { }
|
||||
activated() { }
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
|
Loading…
Reference in New Issue