<template>
|
<a-card :bordered='false'>
|
<!-- 查询区域 -->
|
<div class='table-page-search-wrapper'>
|
<a-form layout='inline' @keyup.enter.native='searchQuery'>
|
<a-row :gutter='24'>
|
<a-col :md='6' :sm='8'>
|
<a-form-item label='项目名称'>
|
<j-input placeholder='请输入项目名称' v-model='queryParam.xmmc'></j-input>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md='6' :sm='8'>
|
<a-form-item label='项目负责组'>
|
<j-search-select-tag
|
placeholder='请选择负责组别'
|
v-model='queryParam.xmfzz'
|
dict='sys_depart,depart_name,id'
|
:pageSize='1000'
|
:async='true'>
|
</j-search-select-tag>
|
</a-form-item>
|
</a-col>
|
|
<template v-if='toggleSearchStatus'></template>
|
<a-col :md='6' :sm='8'>
|
<span style='float: left; overflow: hidden' class='table-page-search-submitButtons'>
|
<a-button type='primary' @click='searchQuery' icon='search'>查询</a-button>
|
<a-button type='primary' @click='searchReset' icon='reload' style='margin-left: 8px'>重置</a-button>
|
<!-- <a @click="handleToggleSearch" style="margin-left: 8px">
|
{{ toggleSearchStatus ? '收起' : '展开' }}
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
|
</a> -->
|
</span>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
|
<!-- 操作按钮区域 -->
|
<div class='table-operator'>
|
<!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
|
<!-- <a-button type="primary" icon="download" @click="handleExportXls('PMO')">导出</a-button> -->
|
|
<!-- <a-dropdown v-if="selectedRowKeys.length > 0">
|
<a-menu slot="overlay">
|
<a-menu-item key="1" @click="batchDel">
|
<a-icon type="delete" />
|
删除
|
</a-menu-item>
|
</a-menu>
|
<a-button style="margin-left: 8px">
|
批量操作
|
<a-icon type="down" />
|
</a-button>
|
</a-dropdown> -->
|
</div>
|
|
<!-- table区域-begin -->
|
<div>
|
<!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
|
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
|
<a style="font-weight: 600">{{ selectedRowKeys.length }}</a
|
>项
|
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
</div> -->
|
|
<a-table
|
ref='table'
|
size='middle'
|
rowKey='id'
|
:columns='columns'
|
:dataSource='dataSource'
|
:pagination='ipagination'
|
:loading='loading'
|
@change='handleTableChange'
|
>
|
<!-- 字符串超长截取省略号显示-->
|
<span slot='esContent' slot-scope='text'>
|
<j-ellipsis :value='text' :length='12' />
|
</span>
|
|
<span slot='custom' slot-scope='text, record, index'>
|
|
<img v-if='isLeader(text)' :src="require('../../assets/pro/leader.png')" />
|
<img v-else-if='text' :src="require('../../assets/pro/person.png')" />
|
|
</span>
|
|
<template slot='flowRate' slot-scope='text, record, index'>
|
<a-progress
|
:strokeColor='getPercentColor(record.wcjd)'
|
:format='getPercentFormat'
|
:percent='record.wcjd ? record.wcjd : 0'
|
style='width: 120px'
|
/>
|
</template>
|
|
|
<span slot="tags" slot-scope="tags">
|
<a-tag :color="'green'" >
|
正常
|
</a-tag>
|
</span>
|
|
<span slot="fzrTags" slot-scope="xmfzr">
|
<a v-for='i in splitUser(xmfzr)' :color="'orange'" :key='i' >
|
{{ getRealDictText(i) }}
|
</a>
|
</span>
|
|
<span slot="userTags" slot-scope="user">
|
<a v-for='i in splitUser(user)' :color="'blue'" :key='i' >
|
{{ getRealDictText(i) }}
|
</a>
|
</span>
|
|
<span slot='action' slot-scope='text, record'>
|
<template v-if='inner'>
|
<a @click='openKb(record)'>项目看板</a>
|
|
<a-divider type='vertical' />
|
</template>
|
<template v-else>
|
<a @click='openBoard(record)'>项目明细</a>
|
|
<a-divider type='vertical' />
|
</template>
|
<a-dropdown>
|
<a class='ant-dropdown-link'>更多 <a-icon type='down' /></a>
|
<a-menu slot='overlay'>
|
<a-menu-item>
|
<a @click='showTimeLine(record)'>时间轴</a>
|
</a-menu-item>
|
</a-menu>
|
</a-dropdown>
|
</span>
|
</a-table>
|
</div>
|
<!-- table区域-end -->
|
|
<!-- 表单区域 -->
|
<time-line ref='timeLine'></time-line>
|
|
</a-card>
|
</template>
|
|
<script>
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import JDictSelectTag from '@/components/dict/JDictSelectTag'
|
import { initDictOptions, filterMultiDictText } from '@/components/dict/JDictSelectUtil'
|
import TimeLine from './modules/TimeLine.vue'
|
|
export default {
|
name: 'PMO',
|
mixins: [JeecgListMixin],
|
components: {
|
JDictSelectTag,
|
TimeLine
|
},
|
props: {
|
// 是否作为内嵌组件 （首页看板使用）
|
inner: {
|
type: Boolean,
|
default: false
|
}
|
|
},
|
watch: {
|
extSource(newVal) {
|
if (newVal.length === 0) {
|
|
} else {
|
|
}
|
}
|
},
|
|
data() {
|
return {
|
description: 'PMO',
|
userDictOptions: [],//用户职务
|
userRealDictOptions: [],//用户真实姓名
|
disableMixinCreated:true,
|
extSort: false,
|
tableWidth: 0,
|
// 表头
|
columns: [{
|
title: '序号',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 50,
|
align: 'center',
|
fixed: 'left',
|
customRender: function(t, r, index) {
|
return parseInt(index) + 1
|
}
|
},{
|
title: '项目',
|
width: 200,
|
fixed: 'left',
|
dataIndex: 'xmmc',
|
sorter: true,
|
scopedSlots: { customRender: 'esContent' }
|
},{
|
title: '进度',
|
width: 200,
|
align: 'center',
|
fixed: 'left',
|
dataIndex: 'wcjd',
|
scopedSlots: { customRender: 'flowRate' },
|
sorter: true
|
},{
|
title: '开始日期',
|
width: 120,
|
align: 'center',
|
fixed: 'left',
|
dataIndex: 'ksrq',
|
sorter: true
|
},{
|
title: '结束日期',
|
width: 120,
|
align: 'center',
|
fixed: 'left',
|
dataIndex: 'jsrq',
|
sorter: true
|
},{
|
title: '状态',
|
width: 120,
|
align: 'center',
|
fixed: 'left',
|
scopedSlots: { customRender: 'tags' },
|
sorter: true
|
},{
|
title: '项目负责人',
|
dataIndex: 'xmfzr',
|
width: 200,
|
align: 'center',
|
scopedSlots: { customRender: 'fzrTags' }
|
}
|
,{
|
title: '项目成员',
|
dataIndex: 'xmcy',
|
align: 'center',
|
scopedSlots: { customRender: 'userTags' }
|
},{
|
title: '操作',
|
dataIndex: 'action',
|
align: 'center',
|
width: 150,
|
fixed: 'right',
|
scopedSlots: { customRender: 'action' }
|
}
|
|
|
],
|
url: {
|
list: '/pro/pmo/list',
|
exportXlsUrl: '/pro/project/exportXls'
|
}
|
}
|
},
|
computed: {},
|
created() {
|
this.loadData()
|
this.initDictConfig()
|
this.$forceUpdate()
|
},
|
|
methods: {
|
//TODO 优化权限
|
isLeader(text) {
|
if (text && this.getPostDictText(text).indexOf('工程') != -1) {
|
return true
|
} else if (text && this.getPostDictText(text).indexOf('经理') != -1) {
|
return true
|
} else {
|
return false
|
}
|
|
|
},
|
|
|
initDictConfig() {
|
//初始化字典 - 性别
|
initDictOptions('sys_user,post,username').then((res) => {
|
if (res.success) {
|
this.$set(this.userDictOptions, 'username', res.result)
|
}
|
}),
|
initDictOptions('sys_user,realname,username').then((res) => {
|
if (res.success) {
|
this.$set(this.userRealDictOptions, 'username', res.result)
|
}
|
})
|
|
},
|
splitUser(userStr){
|
if(userStr) return userStr.split(',')
|
else return []
|
},
|
getRealDictText(text) {
|
return filterMultiDictText(this.userRealDictOptions['username'], text)
|
},
|
getPostDictText(text) {
|
return filterMultiDictText(this.userDictOptions['username'], text)
|
},
|
openKb(record) {
|
//this.$refs.boardModal.show(record)
|
/*this.$router.push({ path: '/pro/board', query: { id: record.id } })
|
console.info(this.$router)
|
console.info(this.$route)*/
|
|
this.$router.push({ name: 'kb-projectDetail', params: { id: record.id } })
|
|
|
},
|
openBoard(record) {
|
//this.$refs.boardModal.show(record)
|
/*this.$router.push({ path: '/pro/board', query: { id: record.id } })
|
console.info(this.$router)
|
console.info(this.$route)*/
|
|
this.$router.push({ name: 'pro-board', params: { id: record.id } })
|
|
|
},
|
showTimeLine(record) {
|
this.$refs.timeLine.edit(record)
|
},
|
getPercentColor(value) {
|
let p = Number(value)
|
if (!p) {
|
p = 0
|
}
|
if (p >= 90 && p < 100) {
|
return 'rgb(244, 240, 89)'
|
} else if (p >= 100) {
|
return 'green'
|
} else {
|
return 'rgb(16, 142, 233)'
|
}
|
},
|
getPercentFormat(value) {
|
if (value == 100) {
|
return '完成'
|
} else {
|
return value + '%'
|
}
|
}
|
}
|
}
|
</script>
|
<style lang='less' scoped>
|
@import '~@assets/less/common.less';
|
|
/deep/ .ant-table-header-column {
|
//display: block;
|
//width: 10px;
|
}
|
</style>
|
