253 lines
9.1 KiB
Vue
253 lines
9.1 KiB
Vue
<template>
|
||
<a-card :bordered="false" :title="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" :disabled="disabled" />
|
||
</a-form-model-item>
|
||
<a-form-model-item label="培训计划年度" prop="year">
|
||
<a-select v-model="form.year" placeholder="--请选择--" :disabled="disabled">
|
||
<a-select-option v-for="entity in years" :key="entity"> {{ entity }}年度 </a-select-option>
|
||
</a-select>
|
||
</a-form-model-item>
|
||
<a-button v-if="!disabled" 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">
|
||
<span slot="serial" slot-scope="text, record, index">
|
||
{{ index + 1 }}
|
||
</span>
|
||
</a-table>
|
||
<a-form-model-item label="备注">
|
||
<a-input v-model="form.remark" type="textarea" :disabled="disabled" />
|
||
</a-form-model-item>
|
||
<a-col :span="24" style="text-align: center;">
|
||
<a-button v-if="!disabled" 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, trainPlanGet } from '@/api/trainplan';
|
||
|
||
export default {
|
||
// import引入的组件需要注入到对象中才能使用
|
||
components: { STable },
|
||
props: {},
|
||
data() {
|
||
// 这里存放数据
|
||
return {
|
||
disabled: false,
|
||
title: '年度培训计划',
|
||
queryParam: {
|
||
pageNum: 1,
|
||
pageSize: 20
|
||
},
|
||
total: 10,
|
||
visible: false,
|
||
years: [],
|
||
form: {
|
||
type: 2, //默认年度计划
|
||
name: '',
|
||
year: '',
|
||
projectIds: [],
|
||
status: 1, //未发布
|
||
},
|
||
selectedRows: [],
|
||
selectedRowKeys: [],
|
||
rules: {
|
||
name: [{ required: true, message: '请输入培训计划名称', trigger: 'blur' }],
|
||
year: [{ required: true, message: '请选择培训计划年度', trigger: 'change' }],
|
||
},
|
||
wayEmun:['培训','考试','培训-练习','培训-练习-考试'],
|
||
columns: [
|
||
{ title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
|
||
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
|
||
{ title: '项目类型', key: 'trainWay', dataIndex: 'trainWay',customRender: (text, record, index) => { return this.wayEmun[Number(text)-1] } },
|
||
{ 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: {
|
||
|
||
// 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.$notification['success']({
|
||
message: '保存成功',
|
||
description:
|
||
'稍后返回列表页面',
|
||
});
|
||
setTimeout(() => {
|
||
this.$router.push({
|
||
path: '/trainPlan/list/' + this.$route.query.t,
|
||
query: {
|
||
t: this.queryParam.type, //自主项目还是系统项目，控制路由跳转
|
||
trainPlanPageNum: this.$route.query.trainPlanPageNum, //当前页
|
||
},
|
||
})
|
||
}, 1200)
|
||
|
||
} else {
|
||
this.$message.error('保存失败！')
|
||
}
|
||
})
|
||
} else {
|
||
this.$message.warning('项目不能为空，请选择项目后重新提交！')
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
|
||
/** 提示框 START */
|
||
showConfirm() {
|
||
let _this = this;
|
||
if (this.disabled) {
|
||
console.log('------1--------')
|
||
_this.$router.push({
|
||
path: '/trainPlan/list/' + _this.$route.query.t,
|
||
query: {
|
||
trainPlanPageNum: _this.$route.query.trainPlanPageNum, //当前页
|
||
},
|
||
});
|
||
} else {
|
||
console.log('------2--------')
|
||
this.$confirm({
|
||
title: '提示',
|
||
content: h => <span style="color:red;font-size:15px;">关闭后当前未保存的数据将丢失! 确认关闭吗?</span>,
|
||
onOk() {
|
||
_this.$router.push({
|
||
path: '/trainPlan/list/' + _this.$route.query.t,
|
||
query: {
|
||
trainPlanPageNum: _this.$route.query.trainPlanPageNum, //当前页
|
||
},
|
||
});
|
||
},
|
||
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);
|
||
}
|
||
console.log('YEARS', this.years)
|
||
}
|
||
},
|
||
// 生命周期 - 创建完成（可以访问当前this实例）
|
||
created() {
|
||
let id = this.$route.query.trainPlanId;
|
||
|
||
this.initYears();
|
||
if (id) {
|
||
trainPlanGet({ id: id }).then((res) => {
|
||
this.form = res.data;
|
||
this.selectedRows = res.data.projects;
|
||
this.selectedRowKeys = res.data.projectIds;
|
||
this.disabled = this.$route.query.showDetail === 'true' ? true : false;
|
||
this.columns = this.columns.filter(item => { return item.key != 'createBy' })
|
||
this.columns = this.columns.filter(item => { return item.key != 'createDate' })
|
||
|
||
this.columns.push({title:'参与人数',dataIndex:'signCount',key:'signCount'});
|
||
})
|
||
}
|
||
if (this.$route.query.t != 'year') {
|
||
this.queryParam.type = 3; //修改为单位培训计划
|
||
this.form.type = 3;
|
||
this.title = '单位培训计划'
|
||
}
|
||
},
|
||
// 生命周期 - 挂载完成（可以访问DOM元素）
|
||
mounted() { },
|
||
// 生命周期 - 创建之前
|
||
beforeCreate() { },
|
||
// 生命周期 - 挂载之前
|
||
beforeMount() { },
|
||
// 生命周期 - 更新之前
|
||
beforeUpdate() { },
|
||
// 生命周期 - 更新之后
|
||
updated() { },
|
||
// 生命周期 - 销毁之前
|
||
beforeDestroy() { },
|
||
// 生命周期 - 销毁完成
|
||
destroyed() { },
|
||
// 如果页面有keep-alive缓存功能，这个函数会触发
|
||
activated() { }
|
||
};
|
||
|
||
</script>
|
||
<style scoped>
|
||
</style> |