248 lines
9.6 KiB
Vue
248 lines
9.6 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-option value="4">已结束</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.projectName=null,queryParam.status=null,queryParam.status=null,queryParam.startDate=null,queryParam.endDate= null,queryParam.trainWay= null)">重置</a-button>
|
|
</a-space>
|
|
<br />
|
|
<a-space class="table-operator" direction="horizontal">
|
|
<a-button v-if="hasPerm(power.add) && queryParam.type != 'model' " 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-popconfirm title="是否发布?" @confirm="() => handledRelease(record)">
|
|
<a v-if="hasPerm(power.release) && record.status == '1' && record.projectType != 0" href="javascript:;">发布</a>
|
|
</a-popconfirm>
|
|
<!-- <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') && hasPerm(power.release) && record.status == '1' && record.projectType != 0 " />
|
|
<a v-if="hasPerm('project:list') " href="javascript:;" @click="getDetail(record)">详情</a>
|
|
<a-divider type="vertical" v-if="hasPerm(power.edit) && hasPerm('project:list') && ['1'].includes(record.status) && (record.projectType != 0 || queryParam.type != 'model')" />
|
|
<a v-if="hasPerm(power.edit) && ['1'].includes(record.status) && (record.projectType != 0 || queryParam.type != 'model') " href="javascript:;" @click="handledCreate(record)">修改</a>
|
|
<a-divider type="vertical" v-if="hasPerm(power.del) && hasPerm('project:list') && ['1'].includes(record.status) && (record.projectType != 0 || queryParam.type != 'model') " />
|
|
<a-popconfirm title="是否删除?" @confirm="() => handleDelete(record)">
|
|
<a v-if="hasPerm(power.del) && ['1'].includes(record.status) && (record.projectType != 0 || queryParam.type != 'model') " href="javascript:;">删除</a>
|
|
</a-popconfirm>
|
|
<a-divider type="vertical" v-if="queryParam.type == 'model'" />
|
|
<a v-if="queryParam.type == 'model'" href="javascript:;" @click="handledCreate(record)">编辑后发布到自主项目</a>
|
|
</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: '项目状态',
|
|
key: 'status',
|
|
dataIndex: 'status',
|
|
customRender: (text, record, index) => {
|
|
//项目状态 1-未发布 2-未开始 3-进行中 4-已完成
|
|
if (text == 1) {
|
|
return '未发布'
|
|
}
|
|
if (text == 2) {
|
|
return '未开始'
|
|
}
|
|
if (text == 3) {
|
|
return '进行中'
|
|
}
|
|
if (text == 4) {
|
|
return '已结束'
|
|
}
|
|
},
|
|
},
|
|
{ title: '创建人员', key: 'createBy', dataIndex: 'createBy' },
|
|
{ title: '创建时间', key: 'createDate', dataIndex: 'createDate' },
|
|
{
|
|
title: '操作',
|
|
width: 200,
|
|
key: 'action',
|
|
align: 'center',
|
|
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) {
|
|
console.log('变更路由:',path)
|
|
var arr = []
|
|
if (path) {
|
|
arr = path.split('/')
|
|
} else {
|
|
arr = this.$route.path.split('/')
|
|
}
|
|
let str = arr[arr.length - 1]
|
|
this.queryParam.type = str
|
|
|
|
/** 控制表格列的显示 */
|
|
if (str === 'sys' || str === 'model') {
|
|
let c = this.columns;
|
|
// console.log('columns-------c', c)
|
|
// let d = c.filter(item => {return item.key != 'startDate'})
|
|
// let e = d.filter(item => {return item.key != 'personNum'})
|
|
// let f = e.filter(item => {return item.key != 'status'})
|
|
|
|
c = c.filter(item => {return item.key != 'startDate'})
|
|
// c = c.filter(item => {return item.key != 'personNum'})
|
|
c = c.filter(item => {return item.key != 'status'})
|
|
|
|
this.columns = c
|
|
console.log('columns-------', this.columns)
|
|
}
|
|
|
|
//系统推荐权限
|
|
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>
|
|
|
|
|
|
|
|
|