<template>
|
<div>
|
<!-- 操作按钮区域 -->
|
<div class="table-operator">
|
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
<a-button @click="batchDel" v-if="selectedRowKeys.length > 0" ghost type="primary" icon="delete"
|
>批量删除
|
</a-button>
|
</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">{{
|
linkList.length
|
}}</a
|
>
|
|
<i class="anticon anticon-info-circle ant-alert-icon"></i>已完成 <a style="font-weight: 600">{{
|
projectProgress[0]
|
}}</a
|
>
|
已完成 <a-progress style="width: 100px;" :percent="projectProgress[1]" size="small" status="active" />
|
|
</div>
|
|
<a-table
|
bordered
|
:scroll="{ x: 1500 }"
|
:defaultExpandAllRows="true"
|
:columns="columns"
|
size="small"
|
:pagination="false"
|
:dataSource="dataSource"
|
:loading="loading"
|
:expandedRowKeys="expandedRowKeys"
|
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
@expandedRowsChange="handleExpandedRowsChange"
|
:rowClassName="getRowClassname"
|
>
|
<span slot="action" slot-scope="text, record">
|
<a @click="handleEdit(record)">编辑</a>
|
|
<a-divider type="vertical" />
|
<a-dropdown>
|
<a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
|
<a-menu slot="overlay">
|
<a-menu-item>
|
<a href="javascript:;" @click="handleDetail(record)">详情</a>
|
</a-menu-item>
|
<a-menu-item>
|
<a href="javascript:;" @click="handleAddSub(record)">添加下级</a>
|
</a-menu-item>
|
<a-menu-item>
|
<a href="javascript:;" @click="handleDataRule(record)">数据规则</a>
|
</a-menu-item>
|
|
<a-menu-item>
|
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
<a>删除</a>
|
</a-popconfirm>
|
</a-menu-item>
|
</a-menu>
|
</a-dropdown>
|
</span>
|
<span slot="esContent8" slot-scope="text">
|
<j-ellipsis :value="getDictText(text)" :length="8" />
|
</span>
|
<!-- 字符串超长截取省略号显示 -->
|
<span slot="url" slot-scope="text">
|
<j-ellipsis :value="text" :length="25" />
|
</span>
|
<!-- 字符串超长截取省略号显示-->
|
<span slot="component" slot-scope="text">
|
<j-ellipsis :value="text" :length="10" />
|
</span>
|
</a-table>
|
</div>
|
<!-- table区域-end -->
|
|
<link-modal ref="modalForm" :projectId="projectId" @ok="modalFormOk"></link-modal>
|
</div>
|
</template>
|
|
<script>
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import LinkModal from '@views/pro/modules/linkModal'
|
import { initDictOptions, filterMultiDictText } from '@/components/dict/JDictSelectUtil'
|
|
export default {
|
name: 'LinkListComponent',
|
components: { LinkModal },
|
mixins: [JeecgListMixin],
|
props: {
|
projectId: {
|
type: String
|
}
|
},
|
watch: {
|
'dataSource': function (val) {
|
this.$emit('success',val)
|
this.getTreeList(val)
|
}
|
},
|
data() {
|
return {
|
model: {
|
/* xmmc: '2132 注塑成型质量监测系统',
|
xmbh: 'XLB-NO001',
|
xmfzr: 'zhagnxiao',
|
bgrq: '2022-01-01',
|
xmmb: '该项目在已有模腔压力传感器基础上，开发一套完整的模腔运行时内部参数实时检测系统，可扩展和注塑机联动功能，实时监各质量参数，根据数据库模型辨别不良产品，给出自动分拣信号，并记录上传和保存报表。\n' +
|
'1）第一阶段：完成竞品的分析，建立初步的软件架构，实现基于PC机的测试版软件； \n' +
|
'2）第二阶段：基于测试版软件和模腔压力传感器完成相关测试，积累分析数据，建立数据分析模型，制定正式第一代基于工控机系统的方案；\n' +
|
'3）第三阶段：完成2套基于工控机的完整模腔运行质量监测系统的设计和调试；',
|
kssj: '2022-01-01',
|
jssj: '2022-01-01',
|
sysj: '100'*/
|
|
},
|
linkList:[],
|
userDictOptions: [],
|
expandAll:true, //默认展开所有行
|
queryParam: {
|
pro: this.projectId
|
},
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 6 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
},
|
confirmLoading: false,
|
columns: [
|
{
|
width: 200,
|
title: '序号',
|
dataIndex: 'sxh',
|
key: 'sxh'
|
},
|
{
|
width: 300,
|
title: '项目环节',
|
dataIndex: 'xmhj',
|
key: 'xmhj',
|
},
|
{
|
title: '起始时间',
|
dataIndex: 'qssj',
|
key: 'qssj'
|
},
|
{
|
title: '预计完成时间',
|
dataIndex: 'yjwcsj',
|
key: 'yjwcsj'
|
},
|
{
|
width: 80,
|
title: '持续时间',
|
dataIndex: 'cxsj',
|
key: 'cxsj'
|
},
|
{
|
title: '实际完成时间',
|
dataIndex: 'sjwcsj',
|
key: 'sjwcsj'
|
},
|
{
|
title: '完成进度',
|
dataIndex: 'wcjd',
|
key: 'wcjd',
|
customRender: (val) => {
|
if (!val || val== 0 ) {
|
return '未完成'
|
} else {
|
return '已完成'
|
}
|
}
|
},
|
{
|
title: '资源名称',
|
dataIndex: 'zymc',
|
key: 'zymc',
|
scopedSlots: { customRender: 'esContent8' },
|
|
},
|
{
|
title: '排序',
|
dataIndex: 'sortNo',
|
key: 'sortNo'
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
fixed: 'right',
|
scopedSlots: { customRender: 'action' },
|
align: 'center',
|
width: 150
|
}
|
],
|
url: {
|
list: 'pro/project/linkList',
|
delete: 'pro/project/deleteLink',
|
deleteBatch: 'pro/project/deleteLinkBatch'
|
}
|
}
|
},
|
methods: {
|
getDictText(text) {
|
return filterMultiDictText(this.userDictOptions['username'], text)
|
},
|
initDictConfig() {
|
//初始化字典 - 性别
|
initDictOptions('sys_user,realname,username').then((res) => {
|
console.info(res)
|
if (res.success) {
|
this.$set(this.userDictOptions, 'username', res.result)
|
}
|
})
|
|
},
|
handleAdd() {
|
this.$refs.modalForm.add()
|
this.$refs.modalForm.title = '新增'
|
this.$refs.modalForm.disableEdit = false
|
this.$refs.modalForm.disableSubmit = false
|
},
|
handleEdit: function(record) {
|
this.$refs.modalForm.edit(record)
|
this.$refs.modalForm.title = '编辑'
|
this.$refs.modalForm.disableEdit = true
|
this.$refs.modalForm.disableSubmit = false
|
},
|
handleAddSub(record) {
|
this.$refs.modalForm.title = '添加子菜单'
|
this.$refs.modalForm.disableSubmit = false
|
this.$refs.modalForm.disableEdit = true
|
this.$refs.modalForm.edit({ 'pid': record.id, pro: this.projectId, leaf: true, menuType: 1 })
|
},
|
handleDataRule(record) {
|
this.$message.error('开发中！')
|
},
|
handleExpandedRowsChange(expandedRows) {
|
this.expandedRowKeys = expandedRows
|
},
|
getRowClassname(record){
|
//已完成修改背景颜色
|
if(record.wcjd == 1){
|
return "row-custom-bg"
|
}
|
},
|
getTreeList(data) {
|
let result = []
|
for (let i = 0; i < data.length; i++) {
|
result.push(data[i])
|
if (data[i].children) {
|
const children1 = data[i].children
|
for (let j = 0; j < children1.length; j++) {
|
result.push(children1[j])
|
if (children1[j].children) {
|
const children2 = children1[j].children
|
for (let k = 0; k < children2.length; k++) {
|
result.push(children2[k])
|
|
if (children2[k].children) {
|
const children3 = children2[k].children
|
for (let l = 0; l < children3.length; l++) {
|
result.push(children3[l])
|
|
if (children3[l].children) {
|
const children4 = children3[l].children
|
for (let m = 0; m < children4.length; m++) {
|
result.push(children4[m])
|
}
|
}
|
}
|
}
|
|
}
|
}
|
}
|
}
|
}
|
this.linkList = result
|
},
|
|
},
|
computed:{
|
projectProgress() {
|
let array = []
|
|
let okList = this.linkList.filter((i) => i.wcjd === 1)
|
let ok = okList.length
|
array[0] = ok
|
if (this.linkList.length > 0 && ok > 0) {
|
let p = (ok / this.linkList.length) * 100.0
|
array[1] = Number(p.toFixed(1))
|
}else {
|
array[1] = 0
|
}
|
|
return array
|
},
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
|
/deep/ .row-custom-bg{
|
background: #f4f4f4;
|
color: #bababa;
|
}
|
|
.ant-table-tbody > tr > td {
|
padding: 0px 0px !important;
|
}
|
.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td {
|
padding: 0px 0px !important;
|
}
|
.ant-table-tbody .ant-table-row .ant-table-row-level-0 {
|
padding: 0px 0px;
|
height: 30px;
|
}
|
</style>
|
