224 lines
7.8 KiB
Vue
224 lines
7.8 KiB
Vue
<template>
|
|
<a-card :bordered="false" title="项目管理">
|
|
<a-space direction="vertical" style="width: 100%">
|
|
<a-space direction="horizontal">
|
|
项目名:
|
|
<a-input v-model="queryParam.projectName" style="width: 100%" />
|
|
项目状态:
|
|
<a-select v-model="queryParam.status" placeholder="请选择" default-value="null" style="width: 120px">
|
|
<a-select-option value="null">全部</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-date-picker v-model="queryParam.startDate" style="width: 100%" placeholder="请输入开始时间" valueFormat="YYYY-MM-DD HH:mm:ss" />
|
|
结束时间:
|
|
<a-date-picker v-model="queryParam.endDate" style="width: 100%" placeholder="请输入结束时间" valueFormat="YYYY-MM-DD HH:mm:ss" />
|
|
培训方式:
|
|
<a-select v-model="queryParam.trainWay" placeholder="请选择" default-value="null" style="width: 120px">
|
|
<a-select-option value="null">全部</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-option value="4">培训-练习-考试</a-select-option>
|
|
</a-select>
|
|
|
|
<a-button type="primary" icon="search" @click="$refs.table.refresh(true)">查询</a-button>
|
|
<a-button icon="redo" @click="() => (queryParam = {})">重置</a-button>
|
|
</a-space>
|
|
|
|
<a-space class="table-operator" direction="horizontal">
|
|
<a-button v-if="hasPerm(power.add)" type="primary" icon="plus" @click="handledCreate">新增项目</a-button>
|
|
</a-space>
|
|
|
|
<s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" :pageNum="Number(this.$route.query.projectPageNum) || 1">
|
|
<span slot="serial" slot-scope="text, record, index">
|
|
{{ index + 1 }}
|
|
</span>
|
|
<span slot="action" slot-scope="text, record">
|
|
<template>
|
|
<a v-if="hasPerm(power.release) && record.status == '1'" href="javascript:;" @click="handledRelease(record)">发布</a>
|
|
<a-divider type="vertical" v-if="hasPerm(power.edit) && hasPerm('project:list')" />
|
|
<a v-if="hasPerm('project:list')" href="javascript:;" @click="getDetail(record)">详情</a>
|
|
<a-divider type="vertical" v-if="hasPerm(power.edit) && hasPerm('project:list')" />
|
|
<a v-if="hasPerm(power.edit)" href="javascript:;" @click="handledCreate(record)">修改</a>
|
|
<a-divider type="vertical" v-if="hasPerm(power.del) && hasPerm('project:list')" />
|
|
<a-popconfirm title="是否删除?" @confirm="() => handleDelete(record)">
|
|
<a v-if="hasPerm(power.del)" href="javascript:;">删除</a>
|
|
</a-popconfirm>
|
|
</template>
|
|
</span>
|
|
</s-table>
|
|
</a-space>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { STable } from '@/components'
|
|
import { getProjectList,releaseProject,projectDel } from '@/api/project/project'
|
|
|
|
export default {
|
|
components: {
|
|
STable,
|
|
},
|
|
data() {
|
|
return {
|
|
power: {
|
|
add: '',
|
|
del: '',
|
|
edit: '',
|
|
release: '',
|
|
},
|
|
// 查询参数
|
|
queryParam: {
|
|
projectName: null,
|
|
status: null,
|
|
startDate: null,
|
|
endDate: null,
|
|
trainWay: null,
|
|
type: '',
|
|
},
|
|
// 表头
|
|
columns: [
|
|
{ title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
|
|
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
|
|
{
|
|
title: '时间',
|
|
dataIndex: 'startDate',
|
|
key: 'startDate',
|
|
customRender: (text, record, index) => {
|
|
return record.startDate + ' - ' + record.endDate
|
|
},
|
|
},
|
|
{ title: '人数', key: 'personNum', dataIndex: 'personNum', customRender: (text) => text + '人' },
|
|
{ title: '项目类型', dataIndex: 'trainType', key: 'trainType',customRender: (text, record, index) => {
|
|
//项目类型
|
|
if (text == 1) {
|
|
return '必修课'
|
|
}
|
|
if (text == 2) {
|
|
return '选修课'
|
|
}
|
|
},
|
|
},
|
|
{
|
|
title: '项目状态',
|
|
dataIndex: 'status',
|
|
customRender: (text, record, index) => {
|
|
//项目状态 1-未发布 2-未开始 3-进行中 4-已完成 5-已中止
|
|
if (text == 1) {
|
|
return '未发布'
|
|
}
|
|
if (text == 2) {
|
|
return '未开始'
|
|
}
|
|
if (text == 3) {
|
|
return '进行中'
|
|
}
|
|
if (text == 4) {
|
|
return '已完成'
|
|
}
|
|
if (text == 5) {
|
|
return '已中止'
|
|
}
|
|
},
|
|
},
|
|
{ title: '创建人员', key: 'createBy', dataIndex: 'createBy' },
|
|
{ title: '创建时间', key: 'createDate', dataIndex: 'createDate' },
|
|
{
|
|
title: '操作',
|
|
width: 200,
|
|
align: 'right',
|
|
scopedSlots: { customRender: 'action' },
|
|
},
|
|
],
|
|
|
|
// 加载数据方法 必须为 Promise 对象
|
|
loadData: (parameter) => {
|
|
return getProjectList(Object.assign(parameter, this.queryParam)).then((res) => {
|
|
return res
|
|
})
|
|
},
|
|
}
|
|
},
|
|
//生命周期 - 创建完成
|
|
created() {
|
|
this.changeType()
|
|
},
|
|
//生命周期 - 销毁完成
|
|
destroyed() { },
|
|
// 监控data中的数据变化
|
|
watch: {
|
|
$route(to, from) { //to是前往的路由 from是去往的路由 同一个组件只会渲染一次
|
|
this.changeType(to.path)
|
|
this.$refs.table.refresh(true)
|
|
},
|
|
},
|
|
methods: {
|
|
//发布项目
|
|
handledRelease(record){
|
|
releaseProject({id: record.id}).then((res) => {
|
|
if(res.code == 200){
|
|
this.$message.success('项目:'+record.projectName+' 发布成功!');
|
|
this.$refs.table.refresh(false);
|
|
}
|
|
})
|
|
},
|
|
//编辑时获取详情
|
|
getDetail(record) {
|
|
this.$router.push({
|
|
path: '/project/detail',
|
|
query: {
|
|
id: record.id, //自主项目还是系统项目，控制路由跳转
|
|
t: this.queryParam.type,
|
|
projectId: record.id, //项目id
|
|
projectPageNum: this.$refs.table.localPagination.current, //当前页
|
|
},
|
|
})
|
|
},
|
|
// 增
|
|
handledCreate(record) {
|
|
this.$router.push({
|
|
path: '/project/projectStepForm',
|
|
query: {
|
|
t: this.queryParam.type, //自主项目还是系统项目，控制路由跳转
|
|
projectId: record.id, //项目id
|
|
projectPageNum: this.$refs.table.localPagination.current, //当前页
|
|
},
|
|
})
|
|
},
|
|
handleDelete(record){
|
|
projectDel({id:record.id}).then((res) => {
|
|
if(res.code == 200){
|
|
this.$message.success('删除成功')
|
|
this.$refs.table.refresh(false);
|
|
}else{
|
|
this.$message.success('删除失败')
|
|
}
|
|
})
|
|
},
|
|
//变更类型
|
|
changeType(path) {
|
|
var arr = []
|
|
if (path) {
|
|
arr = path.split('/')
|
|
} else {
|
|
arr = this.$route.path.split('/')
|
|
}
|
|
let str = arr[arr.length - 1]
|
|
this.queryParam.type = str
|
|
//权限
|
|
str === 'sys' ? this.power.add = 'project:sys:add' : this.power.add = 'project:add'
|
|
str === 'sys' ? this.power.del = 'project:sys:del' : this.power.del = 'project:del'
|
|
str === 'sys' ? this.power.edit = 'project:sys:edit' : this.power.edit = 'project:edit'
|
|
str === 'sys' ? this.power.release = 'project:sys:release' : this.power.release = 'project:release'
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
|