培训计划调整
This commit is contained in:
Yjhon
parent
8f4387f5cc
commit
f189ea1453
|
|
@ -0,0 +1,13 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const trainPlanAPI = {
|
||||
add: '/trainPlan/add',
|
||||
}
|
||||
|
||||
export function trainPlanAdd(params) {
|
||||
return request({
|
||||
url: trainPlanAPI.add,
|
||||
method: 'post',
|
||||
data: params
|
||||
})
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<a-col :span="4" id="tree">
|
||||
<a-menu v-model="menuKey" mode="horizontal" @select="menuChack">
|
||||
<a-menu-item key="sys">系统课程</a-menu-item>
|
||||
<a-menu-item key="self" >自主课程</a-menu-item>
|
||||
<a-menu-item key="self">自主课程</a-menu-item>
|
||||
<!-- :disabled="tabDis" -->
|
||||
</a-menu>
|
||||
<!-- :defaultExpandedKeys="defaultExpandedKeys" -->
|
||||
|
|
@ -32,7 +32,9 @@
|
|||
</a-row>
|
||||
</a-form>
|
||||
<!-- 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 }">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,177 @@
|
|||
<template>
|
||||
<a-card :bordered="false" title="培训计划">
|
||||
<a-form-model ref="form" :rules="rules" :model="form" :layout="'horizontal'">
|
||||
<a-form-model-item label="培训计划名称" prop="name">
|
||||
<a-input v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="培训计划年度" prop="year">
|
||||
<a-select v-model="form.year" placeholder="--请选择--" defaultValue=''>
|
||||
<a-select-option v-for="entity in years" :key="Number(entity)"> {{ entity }}年度 </a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-button type="primary" size="default" icon="plus" @click="showDrawer" style="margin-right: 8px;">选择项目</a-button>
|
||||
<a-table v-if="selectedRows.length > 0" rowKey="id" :columns="columns" :data-source="selectedRows" :pagination="false"></a-table>
|
||||
<a-form-model-item label="备注">
|
||||
<a-input v-model="form.remark" type="textarea" />
|
||||
</a-form-model-item>
|
||||
<a-col :span="24" style="text-align: center;">
|
||||
<a-button type="primary" size="default" @click="handleSave" style="margin-right: 8px;">保存</a-button>
|
||||
<a-button type="danger" size="default" @click="showConfirm">关闭</a-button>
|
||||
</a-col>
|
||||
</a-form-model>
|
||||
|
||||
<a-drawer title="选择项目" placement="right" :width="800" :closable="false" :visible="visible" :after-visible-change="afterVisibleChange" @close="onClose">
|
||||
<s-table ref="table" size="default" rowKey="id" :columns="columns" :rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows,onChange: onSelectChange, onSelect: tableOnSelect ,onSelectAll: tableAllSelected }" :data="loadData" :pageNum="Number(this.$route.query.projectPageNum) || 1">
|
||||
</s-table>
|
||||
</a-drawer>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
||||
// 例如：import 《组件名称》 from '《组件路径》'
|
||||
import { STable } from '@/components'
|
||||
import { getProjectList } from '@/api/project/project'
|
||||
import { trainPlanAdd } from '@/api/trainplan';
|
||||
|
||||
export default {
|
||||
// import引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
components: { STable },
|
||||
props: {},
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {};
|
||||
return {
|
||||
queryParam: {
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
total: 10,
|
||||
visible: false,
|
||||
years: [],
|
||||
form: {
|
||||
name: '',
|
||||
year: Number,
|
||||
projectIds: [],
|
||||
status: 1, //未发布
|
||||
},
|
||||
rowSelection: {},
|
||||
selectedRows: [],
|
||||
selectedRowKeys: [],
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入培训计划名称', trigger: 'blur' }],
|
||||
year: [{ required: true, message: '请选择培训计划年度', trigger: 'change' }],
|
||||
},
|
||||
columns: [
|
||||
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
|
||||
{ title: '创建人', dataIndex: 'createBy', key: 'createBy' },
|
||||
{ title: '创建时间', dataIndex: 'createDate', key: 'createDate' }
|
||||
],
|
||||
loadData: (parameter) => {
|
||||
return getProjectList(Object.assign(parameter, this.queryParam)).then((res) => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
};
|
||||
},
|
||||
// 计算属性 类似于data概念
|
||||
computed: {},
|
||||
// 监控data中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
methods: {
|
||||
|
||||
// TODO 保存计划的方法
|
||||
handleSave() {
|
||||
this.form.projectIds = this.selectedRowKeys;
|
||||
this.$refs.form.validate(validate => {
|
||||
if (validate) {
|
||||
if (this.form.projectIds.length > 0) {
|
||||
console.log('form', this.form)
|
||||
trainPlanAdd(Object.assign({}, this.form)).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$router.push({
|
||||
path: '/trainPlan/list/'+this.$route.query.t,
|
||||
query: {
|
||||
t: this.queryParam.type, //自主项目还是系统项目，控制路由跳转
|
||||
trainPlanPageNum: this.$route.query.trainPlanPageNum, //当前页
|
||||
},
|
||||
})
|
||||
} else{
|
||||
this.$message.error('保存失败！')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('项目不能为空，请选择项目后重新提交！')
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/** 提示框 START */
|
||||
showConfirm() {
|
||||
this.$confirm({
|
||||
title: '提示',
|
||||
content: h => <span style="color:red;font-size:15px;">关闭后当前未保存的数据将丢失! 确认关闭吗?</span>,
|
||||
onOk() { console.log('OK'); },
|
||||
onCancel() { console.log('Cancel'); },
|
||||
class: 'test',
|
||||
});
|
||||
},
|
||||
/** 提示框 END */
|
||||
|
||||
/** TABLE START */
|
||||
/** 表格行选中后触发 */
|
||||
onSelectChange(selectedRowKeys, selectedRows) {
|
||||
console.log('selectedRowKeys changed: ', selectedRowKeys)
|
||||
console.log('选择的表格数据 : ', selectedRows)
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
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;
|
||||
}
|
||||
},
|
||||
/** TABLE END */
|
||||
|
||||
/** 抽屉使用的方法 ---start */
|
||||
afterVisibleChange(val) {
|
||||
console.log('visible', val);
|
||||
},
|
||||
showDrawer() {
|
||||
this.visible = true;
|
||||
},
|
||||
onClose() {
|
||||
this.visible = false;
|
||||
},
|
||||
/** 抽屉使用的方法 ---end */
|
||||
|
||||
/** 初始化年度 */
|
||||
initYears() {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
this.years.push(new Date().getFullYear() - 2 + i);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 生命周期 - 创建完成（可以访问当前this实例）
|
||||
created() { },
|
||||
created() { this.initYears() },
|
||||
// 生命周期 - 挂载完成（可以访问DOM元素）
|
||||
mounted() { },
|
||||
// 生命周期 - 创建之前
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export default {
|
|||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
title: '',
|
||||
title: '培训计划列表',
|
||||
queryParam: {
|
||||
name: '',
|
||||
year: '',
|
||||
|
|
@ -94,12 +94,25 @@ export default {
|
|||
// 监控data中的数据变化
|
||||
watch: {
|
||||
$route(to, from) { //to是前往的路由 from是去往的路由 同一个组件只会渲染一次
|
||||
console.log("监控到变化")
|
||||
this.changeType(to.path)
|
||||
this.$refs.table.refresh(true)
|
||||
},
|
||||
},
|
||||
// 方法集合
|
||||
methods: {
|
||||
// 增改
|
||||
handledCreate(record) {
|
||||
console.log(this.queryParam)
|
||||
this.$router.push({
|
||||
path: '/project/trainPlan/TrainPlanForm',
|
||||
query: {
|
||||
t: this.queryParam.type, //自主项目还是系统项目，控制路由跳转
|
||||
trainPlanId: record.id, //项目id
|
||||
trainPlanPageNum: this.$refs.table.localPagination.current, //当前页
|
||||
},
|
||||
})
|
||||
},
|
||||
//变更类型
|
||||
changeType(path) {
|
||||
console.log('变更路由:', path)
|
||||
|
|
@ -111,28 +124,31 @@ export default {
|
|||
}
|
||||
let str = arr[arr.length - 1]
|
||||
this.queryParam.type = str
|
||||
str == 'year' ? this.title='年度培训计划列表' : this.title='单位培训计划列表'
|
||||
str == 'year' ? this.title = '年度培训计划列表' : this.title = '单位培训计划列表'
|
||||
},
|
||||
// 生命周期 - 创建完成（可以访问当前this实例）
|
||||
created() { this.changeType(this.$route.path) },
|
||||
// 生命周期 - 挂载完成（可以访问DOM元素）
|
||||
mounted() { },
|
||||
// 生命周期 - 创建之前
|
||||
beforeCreate() { },
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() { },
|
||||
// 生命周期 - 更新之前
|
||||
beforeUpdate() { },
|
||||
// 生命周期 - 更新之后
|
||||
updated() { },
|
||||
// 生命周期 - 销毁之前
|
||||
beforeDestroy() { },
|
||||
// 生命周期 - 销毁完成
|
||||
destroyed() { },
|
||||
// 如果页面有keep-alive缓存功能，这个函数会触发
|
||||
activated() { }
|
||||
}
|
||||
},
|
||||
// 生命周期 - 创建完成（可以访问当前this实例）
|
||||
created() {
|
||||
this.changeType(this.$route.path)
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问DOM元素）
|
||||
mounted() { },
|
||||
// 生命周期 - 创建之前
|
||||
beforeCreate() { },
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() { },
|
||||
// 生命周期 - 更新之前
|
||||
beforeUpdate() { },
|
||||
// 生命周期 - 更新之后
|
||||
updated() { },
|
||||
// 生命周期 - 销毁之前
|
||||
beforeDestroy() { },
|
||||
// 生命周期 - 销毁完成
|
||||
destroyed() { },
|
||||
// 如果页面有keep-alive缓存功能，这个函数会触发
|
||||
activated() { }
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
Loading…
Reference in New Issue