任务中心相关代码

applications/dee-task-center/src/api/message/message.js

+import { post, get, del, put, downloadZip } from '../../utils/http'
+
+// 获取消息
+export function getMessage(params) {
+  // return post('/Notify/search', params)
+  return post('/Notify/searchNotify', params)
+}
+// 消息详情
+export function msgDetail(params) {
+  return get(`/Notify/${params}`)
+}
+// 修改消息状态
+export function setMsgStatus(params) {
+  return post('/Notify/findMessage', params, true)
+}
+// 删除消息
+export function deleteMsgs(params) {
+  return del('/Notify/', params)
+}
+// 获取模板
+export function getTemplate(params, userAction) {
+  return post('/Templates/search', params, userAction)
+}
+// 单个模板查询
+export function getTemplateDetail(id) {
+  return get(`/Templates/${id}`)
+}
+// 新增模板
+export function addTemplate(params) {
+  return post('/Templates/', params, true)
+}
+// 编辑模板
+export function editTemplate(params) {
+  return put('/Templates/', params, true)
+}
+// 删除模板
+export function deleteTemplate(params) {
+  return del('/Templates/', params)
+}
+// 导出模板
+export function exportMsgTemp(params) {
+  return downloadZip('/Templates/DxBaseExport', params)
+}
+// 获取邮件
+export function getMail(params) {
+  return post('/MailServerConfig/search', params)
+}
+// 新增邮件
+export function addMail(params) {
+  return post('/MailServerConfig/', params, true)
+}
+// 删除邮件
+export function deleteMail(params) {
+  return del('/MailServerConfig/', params)
+}
+// 导出邮件
+export function exportMailService(params) {
+  return downloadZip('/MailServerConfig/DxBaseExport', params)
+}
+// 发送管理列表
+export function getDeliverys(params) {
+  return post('/DeliveryManager/search', params)
+}
+// 发送管理删除
+export function deleteDeliverys(params) {
+  return del('/DeliveryManager/', params)
+}
+// 发送管理新增
+export function addDelivery(params) {
+  // return post('/DeliveryManager/', params)
+  return post(`/DeliveryManager/saveDelivery/`, params, true)
+}
+// 发送管理编辑
+export function editDelivery(params) {
+  return put('/DeliveryManager/', params)
+}
+// 查看发送管理详情
+export function deliveryDetail(params) {
+  // return get(`/DeliveryManager/${params}`)
+  return get(`/DeliveryManager/detail/${params}`)
+}
+// 发送消息
+export function sendDelivery(params) {
+  return post('/DeliveryManager/sendEvent', params, true)
+}
+// 发送记录列表
+export function getSendRecord(params) {
+  return post('/SendRecord/search', params)
+}
+// 查看发送记录详情
+export function sendRecordDetail(params) {
+  // return get(`/SendRecord/${params}`)
+  return get(`/SendRecord/detail/${params}`)
+}
+// 删除发送记录
+export function deleteSendRecord(params) {
+  return del('/SendRecord/', params)
+}
+// 获取异常处理
+export function getException(params) {
+  return post('/ExceptionHandle/search', params)
+}
+// 异常处理的重新发送
+export function reSendNotify(params) {
+  return post('/ExceptionHandle/reSendNotify', params, true)
+}
+// 邮件服务器配置列表
+export function getServerConfig(params) {
+  return post('/MailServerConfig/search', params)
+}
+// 邮件服务器配置删除
+export function deleteServerConfig(params) {
+  return del('/MailServerConfig/', params)
+}
+// 新增邮件服务器配置
+export function addServerConfig(params) {
+  return post('/MailServerConfig/', params, true)
+}
+// 编辑邮件服务器配置
+export function editServerConfig(params) {
+  return put('/MailServerConfig/', params)
+}
+// 邮件服务器-发送测试
+export function sendMailTest(params) {
+  return post('/MailServerConfig/sendMailTest', params, true)
+}
+// 系统公告
+export function SystemMessage(params) {
+  return post('/Announce/search', params)
+}
+// 公告详情
+
+export function noticeDetail(params) {
+  return get(`/Announce/${params}`)
+}
+// 查询所有app
+export function getAllApp(params) {
+  return post('/DxApplication/search', params)
+}
+

applications/dee-task-center/src/api/message/user.js

+import { post, get } from '../../utils/http'
+// 查询所有用户列表
+export function getAllUsers(params) {
+  return post('/DxUserInfo/find/recursion', params)
+}
+// 查询用户
+export function getUsersByAccount(params) {
+  return get('/DxUserInfo/byAccount', params)
+}

applications/dee-task-center/src/business-components/tabCom/redesignatePerson.vue

@@ -83,6 +83,7 @@ export default {
     onDialogOpen() {
       const basicInfo = this.$utils._get(this.basicData, 'basicInfo') || null
       basicInfo && this.initData()
+      console.log('basicInfo弹框中', basicInfo)
     },
     handleClose() {
       this.editForm = {
@@ -105,8 +106,16 @@ export default {
       const taskKey = this.$utils._get(this.basicData, 'basicInfo.taskDefinitionKey')
       if (!(procDefId && procInstId && taskKey)) return
       // 查询委派配置数据
+      console.log('procDefId, procInstId, taskKey, this.typeEnum', procDefId)
+      console.log('procDefId, procInstId', procInstId)
+
+      console.log(' taskKey', taskKey)
+
+      console.log(' this.typeEnum', this.typeEnum)
+
       const res = await getDelegateUserScope(procDefId, procInstId, taskKey, this.typeEnum)
       this.delegateInfo = res.items
+      console.log('delegateInfo委派信息', this.delegateInfo)
       this.delegateInfo.includeCurrentUser = this.delegateInfo.includeCurrentUser !== false
       this.delegateInfo.includeChildOrg = this.delegateInfo.includeChildOrg !== false
       this.editFormData[0].data = []

applications/dee-task-center/src/business-components/tabCom/task-detail.vue

@@ -185,8 +185,8 @@ export default {
   },
   props: {
     id: {
-      type: String,
-      default: ''
+      type: [String, Number],
+      default: () => ''
     },
     processInstanceId: {
       type: String,
@@ -623,9 +623,10 @@ export default {
           // 定义addExaminationflag，subExaminationFlag，最终值为true时显示按钮，false时不显示按钮
           let addExaminationFlag = false
           let subExaminationFlag = false
-          let delegateTaskFlag = false
+          // let delegateTaskFlag = false
           // 当模板中配置了加签减签时，addExaminationflag，subExaminationFlag的值变为true，显示按钮
           const operationInfo = res.items.operationInfo
+          console.log('res.items.operationInfo', res.items.operationInfo)
           if (operationInfo) {
             operationInfo.forEach(x => {
               if (x.name === 'signAddTask') {
@@ -635,7 +636,7 @@ export default {
                 subExaminationFlag = true
               }
               if (x.name === 'delegateTask') {
-                delegateTaskFlag = true
+                // delegateTaskFlag = true
               }
             })
           }
@@ -657,6 +658,10 @@ export default {
           // 获取PBO
           getInstancePbo(instanceId).then(res => {
             const businessObject = res.items
+            console.log('basicInfo.state', basicInfo.state)
+            console.log('basicInfo.endTime', basicInfo.endTime)
+            console.log('basicInfo.assignee', basicInfo.assignee)
+            console.log("basicInfo.assignee.split(',').indexOf(localStorage.getItem('userId')) > -1", basicInfo.assignee.split(',').indexOf(localStorage.getItem('userId')) > -1)
             const canDeal = basicInfo.state !== 'BE_RECEIVED' && !basicInfo.endTime && (basicInfo.assignee && basicInfo.assignee.split(',').indexOf(localStorage.getItem('userId')) > -1)
             // 任务详情插入流程信息变量
             basicInfo.processInstVO = this.processInstVO
@@ -668,6 +673,7 @@ export default {
               this.typeName = businessObject.subTypeName
             }
             this.$set(this.basicData, 'canDeal', canDeal)
+            console.log('this.basicData看看这个里面有没有canDeal', this.basicData, canDeal)
             this.modelName = businessObject && businessObject.dxClassname ? this.$utils.getModelName4dxClassName(businessObject.dxClassname) : ''
             if (this.layoutId && businessObject && businessObject.subTypeName) {
               this.pageData = {
@@ -683,7 +689,7 @@ export default {
             // this.initTabs('3', 'xform')
             }
             if (this.basicData.canDeal) {
-              if (delegateTaskFlag) {
+              // if (delegateTaskFlag) {
               this.tools.push({
                 name: '委派',
                 icon: '/icons/b-assign.png',
@@ -693,7 +699,7 @@ export default {
                   }
                 }
               })
-              }
+              // }
               // 满足减签按钮显示条件时，将减签按钮加入
               if (subExaminationFlag) {
                 this.tools.unshift({

applications/dee-task-center/src/routes.js

@@ -12,24 +12,30 @@ export default [
     redirect: '/task-center',
     meta: { title: '任务中心', icon: 'example' },
     children: [
+      // {
+      //   path: 'index',
+      //   name: 'home',
+      //   component: () => import('@/views/workflow/task-center/home'),
+      //   meta: { title: '我的任务' }
+      // },
+      // {
+      //   path: 'task',
+      //   name: 'task',
+      //   component: () => import('@/views/workflow/task-center/task'),
+      //   meta: { title: '任务查询' }
+      // },
       {
         path: 'index',
-        name: 'home',
-        component: () => import('@/views/workflow/task-center/home'),
-        meta: { title: '我的任务' }
-      },
-      {
-        path: 'task',
-        name: 'task',
-        component: () => import('@/views/workflow/task-center/task'),
-        meta: { title: '任务查询' }
-      },
-      {
-        path: 'newhome',
         name: 'newhome',
         component: () => import('@/views/workflow/task-center/newhome'),
         meta: { title: '新的任务中心' }
       },
+      {
+        path: '/message',
+        name: 'message',
+        component: () => import('@/views/workflow/task-center/message'),
+        meta: { title: '消息详情' }
+      },
       {
         path: 'process',
         name: 'process',

applications/dee-task-center/src/utils/auth.js

-import Cookies from 'js-cookie'
-
-const TokenKey = 'vue_admin_template_token'
-
-export function getToken() {
-  return Cookies.get(TokenKey)
-}
-
-export function setToken(token) {
-  return Cookies.set(TokenKey, token)
-}
-
-export function removeToken() {
-  return Cookies.remove(TokenKey)
-}

applications/dee-task-center/src/views/workflow/task-center/message/index.vue

+<template>
+  <div class="msg-detail-com">
+    <div v-if="message" class="content">
+      <div class="sub-title">消息详情</div>
+      <div class="title">消息标题：{{ message.title }}</div>
+      <div v-show="showObjFlag" style="margin-bottom:35px">消息对象：<span class="link" @click="goDetail">{{ taskTitle || message.title }}</span></div>
+      <div class="info">
+        <div class="info-title">消息内容：</div>
+        <div class="info-content" v-html="message.content" />
+      </div>
+      <div v-if="formSetting" class="info">
+        <div class="info-title">消息详情：</div>
+        <component
+          :is="formSetting.componentName"
+          v-if="formSetting && formSetting.componentType && formSetting.componentType === 'globalComponents'"
+          :basic-data="businessObject"
+        />
+        <dee-as-com
+          v-else-if="formSetting && formSetting.componentType"
+          :lay-config="formSetting.componentType === 'privateComponent' ? {
+            component: {
+              registrationType: 'custom',
+              codeApp: formSetting.serverName,
+              codePath: formSetting.selfComponentPath
+            }
+          } : {typeName: formSetting.model,
+               layKey: formSetting.layoutKey}"
+          :basic-data="businessObject"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { msgDetail, getTemplateDetail } from '@/api/message/message'
+export default {
+  components: {},
+  props: {
+    // id: {
+    //   type: Number,
+    //   default: 0
+    // }
+  },
+  data() {
+    return {
+      message: null,
+      showObjFlag: false,
+      taskTitle: '',
+      formSetting: null,
+      businessObject: null,
+      id: 0
+    }
+  },
+  computed: {
+
+  },
+  // watch: {
+  //   id: {
+  //     immediate: true,
+  //     handler: function(val) {
+
+  //     }
+  //   }
+  // },
+  mounted: function() {
+    this.id = this.$route.query.id
+    if (this.id) {
+      this.getDetail()
+    }
+  },
+  methods: {
+    getDetail() {
+      msgDetail(this.id).then(res => {
+        this.message = res.items
+        this.businessObject = JSON.parse(res.items.businessObject)
+        res.items.templateId && this.getTemplate(res.items.templateId)
+      })
+    },
+    getTemplate(id) {
+      getTemplateDetail(id).then(res => {
+        this.showObjFlag = res.items.showObjFlag
+        const businessObject = JSON.parse(this.message.businessObject)
+        this.taskTitle = [businessObject.subTypeDisplayName, businessObject.number, businessObject.name, businessObject.displayVersion].filter(m => {
+          return !(['null', 'undefined'].includes(typeof m) || m === '')
+        }).join('-')
+
+        this.formSetting = res.items.templateConfig ? JSON.parse(res.items.templateConfig) : null
+      })
+    },
+    goDetail() {
+      if (!this.message.businessObject) {
+        return
+      }
+      const businessObject = JSON.parse(this.message.businessObject)
+      let modelName = businessObject ? businessObject.dxClassname : ''
+      modelName = this.$utils.getModelName4dxClassName(modelName)
+      this.$utils.toObjectDetail(businessObject.id, businessObject.subTypeName, this.message.title, modelName)
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+.msg-detail-com{
+  height: 100%;
+  background: #fff;
+  color: #333;
+  overflow: auto;
+  .sub-title{
+    margin-bottom: 20px;
+  }
+
+  .content{
+     padding-left: 25px;
+     font-size: 15px ;
+    .title{
+      margin: 0 0 35px;
+      }
+     .info{
+      .info-title{
+        padding-bottom: 30px;
+      }
+      .info-content{
+        padding-left: 50px;
+        margin-bottom: 30px;
+      }
+     }
+  }
+}
+</style>

applications/dee-task-center/src/views/workflow/task-center/newhome/components/DistributeTable.vue

+<template>
+  <div class="task-table-page">
+    <dee-table
+      class="taskTable"
+      :options="options"
+      selection-row
+      :columns="tableColums"
+      :data="tableData"
+      :pagination="pagination"
+      :index-row="{
+        title: '序号',
+        align: 'center',
+        width: '70'
+      }"
+      @row-click="selectedRow"
+      @selection-change="getSelectionList"
+    >
+      <dee-tools slot="header" :tools="taskTools" mode="normal" />
+    </dee-table>
+  </div>
+</template>
+
+<script>
+// 流程任务树我发起的流程
+export default {
+  name: 'ProgressPlanTable',
+  components: {},
+  data() {
+    return {
+      taskTools: [
+        {
+          type: 'icon',
+          name: '刷新',
+          icon: '/icons/c-delete.png',
+          handler: {
+            click: () => {
+
+            }
+          }
+        }
+      ],
+      // 列表
+      tableColums: [
+        { title: '项目代号', key: 'name', align: 'center', minWidth: 180, component: {
+          render: (h, params) => {
+            return h('div', [
+              h('span', {
+                class: 'link-style',
+                on: {
+                  click: () => {
+                    // this.itemData = params
+                    // this.lookDetail()
+                  }
+                }
+              }, params.name)
+            ])
+          }
+        }},
+        { title: '显示名称', key: 'ownerName', align: 'center', minWidth: 140 },
+        { title: '业务对象', key: 'ownerName', align: 'center', minWidth: 140 },
+        { title: '业务对象类型', key: 'gmtCreate', align: 'center', minWidth: 180 },
+        { title: '分发类型', key: 'gmtFinished', align: 'center', Width: 180 },
+        { title: '分发时间', key: 'gmtFinished', align: 'center', Width: 180 },
+        { title: '分发人', key: 'gmtFinished', align: 'center', Width: 180 },
+        { title: '要求回复日期', key: 'gmtFinished', align: 'center', Width: 180 },
+        { title: '状态', key: 'gmtFinished', align: 'center', Width: 180 },
+        { title: '执行期限', key: 'gmtFinished', align: 'center', Width: 180 }
+      ],
+      tableData: [],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+        pageSizes: [10, 20, 50]
+      },
+      options: {}
+    }
+  },
+  created() {
+  },
+  mounted() {
+    // this.setOptions()
+    // this.getSelfList()
+    // this.getList()
+  },
+  methods: {
+    getSelectionList() {}
+
+  }
+}
+</script>
+
+  <style lang="scss">
+  .task-table-page {
+    height:100%;
+    .flex-s{
+      display: flex;
+      justify-content: space-between;
+    }
+    .dee-table{
+      height: 100%;
+      .dee-table-body {
+        height: calc(100% - 110px) !important;
+      }
+    }
+  }
+  </style>

applications/dee-task-center/src/views/workflow/task-center/newhome/components/ICMPlanTable.vue

+<template>
+  <div class="ICMTask-list-page">
+    <div class="ICMTask-table">
+      <dee-table
+        ref="ICMTaskTable"
+        :columns="tableColums"
+        :index-row="indexRow"
+        :data="tableData"
+        :options="tableOption"
+        :pagination="pagination"
+        :selection-row="selectionRow"
+        @pagination-current-change="paginationCurrentChange"
+        @pagination-size-change="handleSizeChange"
+        @selection-change="selectionChange"
+      >
+        <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
+      </dee-table>
+    </div>
+    <!-- <div v-if="ifShow" class="detail-content">
+      <img class="down-pic" src="/icons/d-down.png" @click="handleCloseDetail">
+      <task-detail :id="itemData.id" is-check-task-state :process-instance-id="itemData.processInstanceId" @reload="reload" />
+    </div>-->
+  </div>
+</template>
+
+<script>
+// import { getInstancePbo } from '@/api/workflow/userSettings.js'
+// import TaskDetail from '@/business-components/tabCom/task-detail'
+import { post } from '@/utils/http'
+export default {
+  name: 'ICMTaskTable',
+  // components: { TaskDetail },
+
+  props: {
+    initdata: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      itemData: null,
+      ifShow: false,
+      // type: '',
+      tableData: [],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+        pageSizes: [10, 20, 50]
+      },
+      tableOption: {
+        height: 'calc(100vh - 240px)'
+      },
+      indexRow: {
+        title: '序号',
+        align: 'center',
+        width: '70'
+      },
+      selectionRow: [],
+      taskState: 'Complete'
+    }
+  },
+  computed: {
+    tools() {
+    // 公共的工具项
+      const commonTools = [
+        {
+          type: 'icon',
+          name: '刷新',
+          icon: '/icons/b-fresh.png',
+          handler: {
+            click: () => {
+              this.getTableData(this.taskState)
+            }
+          }
+        }
+      ]
+
+      // 完成状态下的工具项
+      if (this.taskState === 'Complete') {
+        return commonTools
+      }
+
+      // 未完成状态下的工具项
+      const additionalTools = [
+        {
+          type: 'icon',
+          name: '委派',
+          icon: '/icons/b-assign.png',
+          handler: {
+            click: () => {
+            // 委派逻辑
+            }
+          }
+        },
+        {
+          type: 'icon',
+          name: '关闭接口',
+          icon: '/icons/b-assign.png',
+          handler: {
+            click: () => {
+            // 委派逻辑
+            }
+          }
+        }
+      ]
+
+      return [...commonTools, ...additionalTools]
+    },
+    tableColums() {
+      const commonColums = [
+        { title: '项目代号', key: 'name', align: 'center', minWidth: 180 },
+        { title: '计划编号', key: 'planNumber', align: 'center', minWidth: 140 },
+        { title: '发布方', key: 'publisher', align: 'center', minWidth: 140 },
+        { title: '接收方', key: 'acceptor', align: 'center', minWidth: 180 },
+        { title: '接口类型', key: 'interfaceType', align: 'center', Width: 180 },
+        { title: '是否关键接口', key: 'keyInterface', align: 'center', Width: 180 },
+        { title: '是否里程碑接口', key: 'milestoneInterface', align: 'center', Width: 180 },
+        { title: '计划打开日期', key: 'planOpenDate', align: 'center', Width: 180 },
+        { title: '计划关闭日期', key: 'planCloseDate', align: 'center', Width: 180 },
+        { title: '实际打开日期', key: 'actualOpenDate', align: 'center', Width: 180 },
+        { title: '状态', key: 'state', align: 'center', Width: 180 },
+        { title: '任务创建者', key: 'creator.userName', align: 'center', Width: 180 }
+      ]
+      const addUnfinishedColums = [{
+        title: '执行期限',
+        key: 'costTimeInMillis',
+        align: 'center',
+        minWidth: 180
+      }]
+      const addCompleteColums = [
+        {
+          title: '处理时间',
+          key: 'actualCompleteTime',
+          align: 'center',
+          minWidth: 180
+        }
+      ]
+      return this.taskState === 'Complete' ? [...commonColums, ...addCompleteColums] : [...commonColums, ...addUnfinishedColums]
+    }
+  },
+  watch: {
+    'initdata.state': {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val) {
+          this.taskState = val
+          this.getTableData(val)
+        }
+      }
+    }
+  },
+  created() {
+    // this.getTableData()
+  },
+  mounted: function() {
+    console.log('initdata', this.initdata)
+  },
+  methods: {
+    getTableData(state) {
+      console.log('请求中的state', state)
+      const searchItem = state === 'Complete' ? (
+        {
+          fieldName: 'state',
+          operator: 'EQ',
+          value: 'Complete' // 已完成
+        }
+      )
+        : (
+          {
+            fieldName: 'state',
+            operator: 'EQ',
+            value: 'unfinished' // 未完成
+          })
+
+      const params = {
+        pageFrom: this.pagination.currentPage,
+        pageSize: this.pagination.pageSize,
+        // openProps 这个是要展开的信息，如果不展开，那么拿到的就是null
+        searchItems: {
+          // 'children': [{
+          //   'items': children,
+          //   'operator': 'AND'
+          // }
+
+          // ],
+          items: [
+            searchItem
+          ],
+          operator: 'AND'
+        },
+        sortItem: [
+          {
+            fieldName: 'modifyTime',
+            sortOrder: 'asc'
+          }
+        ]
+      }
+      post('/ExtICMExternalInterfacePlan/search', params).then((res) => {
+        if (res.items.content) {
+          this.tableData = res.items.content.map((item) => {
+            item.show = true
+            return item
+          })
+          this.pagination.total = res.items.totalElements
+        }
+      })
+    },
+    selectionChange(val) {
+      this.selectionRow = val
+      console.log('this.selectionRow', this.selectionRow)
+    },
+    paginationCurrentChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this.getTableData(this.taskState)
+    },
+    handleSizeChange(pageSize) {
+      this.pagination.pageSize = pageSize
+      this.pagination.currentPage = 1
+      this.getTableData(this.taskState)
+    },
+    handleCloseDetail() {
+      this.ifShow = null
+    },
+    reload() {
+      this.getTableData(this.taskState)
+      this.handleCloseDetail()
+    },
+    goToDeatil(params) {
+      this.$router.push({
+        path: `/configured-page/cd/${params.subTypeName}/defaultInfo/${params.id}`,
+        query: { title: (params.name || params.id) + '详情' }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ICMTask-list-page {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .ICMTask-table{
+    padding: 14px;
+    margin-bottom: 6px;
+    overflow:auto
+
+  }
+  a {
+    color: blue;
+  }
+
+  .link-style {
+    color: #2a75ce;
+    cursor: pointer;
+  }
+  .detail-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    right: 0;
+    border-top: 1px solid #ddd;
+    background: #fff;
+    z-index: 10;
+    overflow: auto;
+
+    .down-pic {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      z-index: 100;
+      margin: 0 auto;
+      cursor: pointer;
+    }
+  }
+}
+</style>

applications/dee-task-center/src/views/workflow/task-center/newhome/components/IEDPlanTable.vue

+<template>
+  <div class="IEDTask-list-page">
+    <div class="IEDTask-table">
+      <dee-table
+        ref="IEDTaskTable"
+        :columns="tableColums"
+        :index-row="indexRow"
+        :data="tableData"
+        :options="tableOption"
+        :pagination="pagination"
+        :selection-row="selectionRow"
+        @pagination-current-change="paginationCurrentChange"
+        @pagination-size-change="handleSizeChange"
+        @selection-change="selectionChange"
+      >
+        <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
+      </dee-table>
+    </div>
+    <!-- <div v-if="ifShow" class="detail-content">
+      <img class="down-pic" src="/icons/d-down.png" @click="handleCloseDetail">
+      <task-detail :id="itemData.id" is-check-task-state :process-instance-id="itemData.processInstanceId" @reload="reload" />
+    </div>-->
+  </div>
+</template>
+
+<script>
+// import { getInstancePbo } from '@/api/workflow/userSettings.js'
+// import TaskDetail from '@/business-components/tabCom/task-detail'
+import { post, get } from '@/utils/http'
+export default {
+  name: 'IEDTaskTable',
+  // components: { TaskDetail },
+
+  props: {
+    initdata: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      itemData: null,
+      ifShow: false,
+      // type: '',
+      tableData: [],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+        pageSizes: [10, 20, 50]
+      },
+      tableOption: {
+        height: 'calc(100vh - 240px)'
+      },
+      indexRow: {
+        title: '序号',
+        align: 'center',
+        width: '70'
+      },
+      selectionRow: [],
+      taskState: 'Complete'
+    }
+  },
+  computed: {
+    tools() {
+    // 公共的工具项
+      const commonTools = [
+        {
+          type: 'icon',
+          name: '刷新',
+          icon: '/icons/b-fresh.png',
+          handler: {
+            click: () => {
+              this.getTableData(this.taskState)
+            }
+          }
+        }
+      ]
+      // 未完成状态下的工具项
+      const additionalTools = [
+        {
+          type: 'icon',
+          name: '委派',
+          icon: '/icons/b-assign.png',
+          handler: {
+            click: () => {
+            // 委派逻辑
+            }
+          }
+        },
+        {
+          type: 'icon',
+          name: '提交',
+          icon: '/icons/c-delete.png',
+          handler: {
+            click: () => {
+            // 提交逻辑
+            }
+          }
+        },
+        {
+          type: 'icon',
+          name: '导出模板',
+          icon: '/icons/c-export.png',
+          handler: {
+            click: () => {
+            // 导出模板逻辑
+              this.planTemplateDownload()
+            }
+          }
+        },
+        {
+          type: 'icon',
+          name: '批量编辑',
+          icon: '/icons/c-design.png',
+          handler: {
+            click: () => {
+            // 批量编辑逻辑
+              this.batchEdit()
+            }
+          }
+        }
+      ]
+
+      // 完成状态下的工具项
+      if (this.taskState === 'Complete') {
+        return commonTools
+      } else {
+        return [...commonTools, ...additionalTools]
+      }
+    },
+    tableColums() {
+      const commonColums = [
+        {
+          title: '项目代号',
+          key: 'projectCode',
+          align: 'center',
+          minWidth: 180
+        },
+        {
+          title: '文件编号',
+          key: 'fileNumber',
+          align: 'center',
+          minWidth: 140,
+          component: {
+            render: (h, params) => {
+              return h('div', [
+                h(
+                  'span',
+                  {
+                    class: 'link-style',
+                    on: {
+                      click: () => {
+                        this.goToDeatil(params)
+                      }
+                    }
+                  },
+                  params.fileNumber
+                )
+              ])
+            }
+          }
+        },
+        { title: '文件代号', key: 'fileCode', align: 'center', minWidth: 140 },
+        { title: '编码', key: 'systemNumber', align: 'center', minWidth: 180 },
+        { title: '文件名称', key: 'fileName', align: 'center', minWidth: 180 },
+        { title: '文件类型', key: 'fileType', align: 'center', minWidth: 180 },
+        { title: '版本', key: 'displayVersion', align: 'center', Width: 180 },
+        {
+          title: '文件分类',
+          key: 'fileClassify',
+          align: 'center',
+          minWidth: 180
+        },
+        {
+          title: '节点审核时间',
+          key: 'auditTime',
+          align: 'center',
+          minWidth: 180
+        },
+        {
+          title: '文件要求提交时间',
+          key: 'fileSubmitTime',
+          align: 'center',
+          minWidth: 180
+        },
+        { title: '状态', key: 'state', align: 'center', Width: 180,
+          formatter(row, column) {
+            return row.state === 'Complete' ? '已完成' : '未完成'
+          }
+        },
+        {
+          title: '任务创建者',
+          key: 'creator.userName',
+          align: 'center',
+          minWidth: 180
+        }
+      ]
+      const addUnfinishedColums = [{
+        title: '执行期限',
+        key: 'costTimeInMillis',
+        align: 'center',
+        minWidth: 180
+      }]
+      const addCompleteColums = [
+        {
+          title: '处理时间',
+          key: 'actualCompleteTime',
+          align: 'center',
+          minWidth: 180
+        }
+      ]
+      return this.taskState === 'Complete' ? [...commonColums, ...addCompleteColums] : [...commonColums, ...addUnfinishedColums]
+    }
+  },
+  watch: {
+    'initdata.state': {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        // console.log('类型', val)
+        this.taskState = val
+        this.getTableData(val)
+      }
+    }
+  },
+  created() {
+    // this.getTableData()
+  },
+  mounted: function() {
+    console.log('initdata', this.initdata)
+  },
+  methods: {
+    getTableData(state) {
+      console.log('请求中的state', state)
+      const searchItem = state === 'Complete' ? (
+        {
+          fieldName: 'state',
+          operator: 'EQ',
+          value: 'Complete' // 已完成
+        }
+      )
+        : (
+          {
+            fieldName: 'state',
+            operator: 'EQ',
+            value: 'unfinished' // 未完成
+          })
+
+      const params = {
+        pageFrom: this.pagination.currentPage,
+        pageSize: this.pagination.pageSize,
+        // openProps 这个是要展开的信息，如果不展开，那么拿到的就是null
+        searchItems: {
+          // 'children': [{
+          //   'items': children,
+          //   'operator': 'AND'
+          // }
+
+          // ],
+          items: [
+            searchItem
+          ],
+          operator: 'AND'
+        },
+        sortItem: [
+          {
+            fieldName: 'modifyTime',
+            sortOrder: 'asc'
+          }
+        ]
+      }
+      post('/ExtIEDPlan/search', params).then((res) => {
+        if (res.items.content) {
+          this.tableData = res.items.content.map((item) => {
+            item.show = true
+            return item
+          })
+          this.pagination.total = res.items.totalElements
+        }
+      })
+    },
+    selectionChange(val) {
+      this.selectionRow = val
+      console.log('this.selectionRow', this.selectionRow)
+    },
+    paginationCurrentChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this.getTableData(this.taskState)
+    },
+    handleSizeChange(pageSize) {
+      this.pagination.pageSize = pageSize
+      this.pagination.currentPage = 1
+      this.getTableData(this.taskState)
+    },
+    handleCloseDetail() {
+      this.ifShow = null
+    },
+    reload() {
+      this.getTableData()
+      this.handleCloseDetail(this.taskState)
+    },
+    goToDeatil(params) {
+      this.$router.push({
+        path: `/configured-page/cd/${params.subTypeName}/defaultInfo/${params.id}`,
+        query: { title: (params.name || params.id) + '详情' }
+      })
+    },
+    planTemplateDownload() {
+      get('/ExtFileTemplateManager/planTemplateDownload?fileType=2').then(res => {
+        this.$utils.showMessageSuccess('下载模板成功')
+      })
+    },
+    batchEdit() {
+      const ids = this.selectionRow.map(r => r.id).join(',')
+      console.log('ids', ids)
+      get(`/ExtIEDPlan/exportIEDPlan?ids=${ids}`).then(res => {
+        this.$utils.showMessageSuccess('操作成功')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.IEDTask-list-page {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  a {
+    color: blue;
+  }
+.IEDTask-table{
+  padding: 14px;
+    margin-bottom: 6px;
+    overflow:auto
+}
+  .link-style {
+    color: #2a75ce;
+    cursor: pointer;
+  }
+  .detail-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    right: 0;
+    border-top: 1px solid #ddd;
+    background: #fff;
+    z-index: 10;
+    overflow: auto;
+
+    .down-pic {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      z-index: 100;
+      margin: 0 auto;
+      cursor: pointer;
+    }
+  }
+}
+</style>

applications/dee-task-center/src/views/workflow/task-center/newhome/components/MessageTable.vue

+<template>
+  <div class="message-list-page page-wrap">
+    <!-- <dee-search-server
+      v-model="searchFormData"
+      :form-data="seachForm"
+      class="mpb0"
+      @search="getTableData"
+    /> -->
+
+    <dee-table
+      ref="messageTable"
+      :columns="tableColums"
+      :index-row="indexRow"
+      :data="tableData"
+      :options="tableOption"
+      :pagination="pagination"
+      :selection-row="selectionRow"
+      @pagination-current-change="paginationCurrentChange"
+      @pagination-size-change="handleSizeChange"
+      @selection-change="selectionChange"
+    >
+      <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
+    </dee-table>
+    <!-- <div class="message-detail">
+      <msgDetail :message-id="messageId" />
+    </div> -->
+  </div>
+</template>
+
+<script>
+// import msgDetail from './msgDetail.vue'
+import { setMsgStatus } from '@/api/message/message'
+import { post } from '@/utils/http'
+export default {
+  name: 'MagList',
+  // components: { msgDetail },
+  props: {
+    initdata: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  data() {
+    return {
+      // seachForm: [
+      //   {
+      //     key: 'title',
+      //     title: '标题',
+      //     component: {
+      //       name: 'el-input',
+      //       placeholder: '',
+      //       clearable: true
+      //     }
+      //   },
+      //   {
+      //     key: 'state',
+      //     title: '状态',
+      //     component: {
+      //       name: 'el-select',
+      //       options: [{
+      //         label: '未读',
+      //         value: 0
+      //       }, {
+      //         label: '已读',
+      //         value: 1
+      //       }]
+      //     }
+      //   },
+      //   {
+      //     key: 'time',
+      //     title: '发送时间',
+      //     component: {
+      //       name: 'el-date-picker',
+      //       clearable: true,
+      //       rangeSeparator: '至',
+      //       valueFormat: 'yyyy-MM-dd HH:mm:ss',
+      //       startPlaceholder: '开始日期',
+      //       endPlaceholder: '结束日期'
+      //     },
+      //     type: 'datetimerange'
+      //   }
+      // ],
+      // searchFormData: {
+      //   title: '',
+      //   state: '',
+      //   time: ''
+      // },
+      tableData: [],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+        pageSizes: [10, 20, 50]
+      },
+      tableOption: {
+        height: 'calc(100vh - 240px)'
+      },
+      indexRow: {
+        title: '序号',
+        align: 'center',
+        width: '70'
+      },
+      tableColums: [
+        {
+          title: '消息标题', key: '', align: 'center', width: '150', component: {
+            render: (h, params) => {
+              return h('div', [
+                h('span', {
+                  class: 'link-style',
+                  on: {
+                    click: () => {
+                      this.linkToMsgDetail(params)
+                    }
+                  }
+                }, params.title || '/')
+              ])
+            }
+          }
+        },
+        {
+          title: '业务对象', key: 'state', align: 'center', formatter(row, column) {
+            const businessObject = JSON.parse(row.businessObject)
+            return [businessObject.subTypeDisplayName, businessObject.number, businessObject.name, businessObject.displayVersion].filter(m => {
+              return !(['null', 'undefined'].includes(typeof m) || m === '')
+            }).join('-')
+          }
+        },
+        { title: '消息内容', key: 'content', align: 'center', minWidth: '150' },
+        { title: '接收时间', key: 'sendTime', align: 'center', width: '160' }
+
+      ],
+      selectionRow: [],
+      messageState: ''
+    }
+  },
+  computed: {
+    tools() {
+      const commonTools = [
+        {
+          type: 'icon',
+          name: '刷新',
+          icon: '/icons/b-fresh.png',
+          handler: {
+            click: () => {
+              this.getTableData(this.messageState)
+            }
+          }
+        }
+      ]
+      // 未读状态下的工具项
+      const additionalTools = [
+        {
+          name: '批量处理',
+          icon: '/icons/c-design.png',
+          handler: {
+            click: () => {
+              // /Notify/recursions
+              if (this.selectionRow.length) {
+                this.batchReadMessage()
+              } else {
+                // this.$utils.showMessageError('请先选择数据项')
+              }
+            }
+          }
+        }
+      ]
+
+      // 已读状态下的工具项
+      if (this.messageState === 1) {
+        return commonTools
+      } else {
+        return [...commonTools, ...additionalTools]
+      }
+    }
+  },
+  watch: {
+    'initdata.state': {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        // console.log('类型', val)
+        if (val) {
+          this.messageState = val === 'unread' ? 0 : 1
+          this.getTableData(this.messageState)
+        }
+      }
+    }
+  },
+  created() {
+    // this.getTableData()
+  },
+  mounted: function() {
+    this.$nextTick(function() {
+    })
+  },
+  methods: {
+    linkToMsgDetail(item) {
+      setMsgStatus(item).then(res => {
+        this.$router.push({
+          path: `/dee-task-center/workflow/task-center/message`,
+          query: { id: item.id, title: `消息详情` }
+        })
+      })
+    },
+    getTableData(state) {
+      const params = {
+        pageFrom: this.pagination.currentPage,
+        pageSize: this.pagination.pageSize,
+        searchItems: {
+          'items': [
+            {
+              fieldName: 'receiver',
+              operator: 'EQ',
+              value: localStorage.getItem('userId')
+            },
+            { fieldName: 'state', operator: 'EQ', value: state }
+          ],
+          'operator': 'AND'
+        },
+        'sortItem': [{ 'fieldName': 'sendTime', 'sortOrder': 'desc' }]
+      }
+      post('/Notify/searchNotify', params).then(res => {
+        this.tableData = res.items.content.map(item => {
+          item.show = true
+          return item
+        })
+        this.pagination.total = res.items.totalElements
+      })
+    },
+    batchReadMessage() {
+      const params = this.selectionRow.map(r => {
+        return {
+          'id': r.id,
+          'state': 1,
+          'operator': 'MODIFY'
+        }
+      })
+      console.log('params', params)
+      post('Notify/recursions', params).then(res => {
+        this.$utils.showMessageError('批量操作成功！')
+        this.getTableData(this.messageState)
+      })
+    },
+    selectionChange(val) {
+      this.selectionRow = val
+    },
+    paginationCurrentChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this.getTableData(this.messageState)
+    },
+    handleSizeChange(pageSize) {
+      this.pagination.pageSize = pageSize
+      this.pagination.currentPage = 1
+      this.getTableData(this.messageState)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.message-list-page {
+  a {
+    color: blue
+  }
+
+  .link-style {
+    color: #2a75ce;
+    cursor: pointer;
+  }
+}
+</style>

applications/dee-task-center/src/views/workflow/task-center/newhome/components/MyProcessPlanTable.vue

+<!-- 我发起的流程任务 -->
+<template>
+  <div class="processTask-list-page ">
+
+    <div class="processTask-table">
+      <dee-table
+        ref="processTaskTable"
+        :columns="tableColums"
+        :index-row="indexRow"
+        :data="tableData"
+        :options="tableOption"
+        :pagination="pagination"
+        :selection-row="selectionRow"
+        @pagination-current-change="paginationCurrentChange"
+        @pagination-size-change="handleSizeChange"
+        @selection-change="selectionChange"
+      >
+        <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
+      </dee-table>
+      <dee-drawer
+        title="流程信息"
+        :dialog-visible.sync="drawerDialogVisible"
+      >
+        <processInfo :click-item="clickItem" />
+      </dee-drawer>
+    </div>
+  </div>
+
+</template>
+
+<script>
+// import { getInstancePbo } from '@/api/workflow/userSettings.js'
+// import TaskDetail from '@/business-components/tabCom/task-detail'
+import { post } from '@/utils/http'
+import processInfo from '../../task/components/processInfo.vue'
+export default {
+  name: 'MyProcessTaskTable',
+  components: { processInfo },
+
+  props: {
+    initdata: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      itemData: null,
+      drawerDialogVisible: false,
+      clickItem: null,
+      ifShow: false,
+      tableData: [],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+        pageSizes: [10, 20, 50]
+      },
+      tableOption: {
+        height: 'calc(100vh - 240px)'
+      },
+      indexRow: {
+        title: '序号',
+        align: 'center',
+        width: '70'
+      },
+      // tableColums: [
+      //   { title: '项目代号', key: 'name', align: 'center', minWidth: 180 },
+      //   { title: '当前节点', key: 'taskName', align: 'center', minWidth: 140,
+      //     formatter(row, column) {
+      //       return row.gmtFinished ? '结束' : row.taskName
+      //     }
+      //   },
+      //   { title: '业务对象', key: 'taskTitle', align: 'center', minWidth: 140,
+      //     component: {
+      //       render: (h, params) => {
+      //         return h('div', [
+      //           h('span', {
+      //             class: 'link-style',
+      //             on: {
+      //               click: () => {
+      //                 console.log('params', params)
+      //                 getInstancePbo(params.id).then(res => {
+      //                   const pbo = res.items
+      //                   if (pbo) {
+      //                     let modelName = pbo.dxClassname.split('.').splice(-1)[0]
+      //                     modelName = this.$utils.getModelName4dxClassName(modelName)
+      //                     const title = `${pbo.subTypeDisplayName}_ ${pbo.number}_${pbo.name}`
+      //                     this.$utils.toObjectDetail(pbo.id, pbo.subTypeName, title, modelName)
+      //                   }
+      //                 })
+      //                 // this.$router.push({
+      //                 //   path: `/configured-page/cd/${params.subTypeName}/defaultInfo/${params.id}`,
+      //                 //   query: { title: (params.name || params.id) + '详情' }
+      //                 // })
+      //               }
+      //             }
+      //           }, params.name)
+      //         ])
+      //       }
+      //     }
+      //   },
+      //   { title: '业务对象类型', key: 'gmtCreate', align: 'center', minWidth: 180 },
+      //   { title: '当前环节办理人', key: 'assignName', align: 'center', Width: 180 },
+      //   { title: '流程启动时间', key: 'gmtCreate', align: 'center', Width: 180 },
+      //   { title: '流程完成时间', key: 'gmtFinished', align: 'center', Width: 180 }
+
+      // ],
+      selectionRow: [],
+      taskState: ''
+    }
+  },
+  computed: {
+    tools() {
+    // 公共的工具项
+      const commonTools = [
+        {
+          type: 'icon',
+          name: '刷新',
+          icon: '/icons/b-fresh.png',
+          handler: {
+            click: () => {
+              this.getTableData(this.taskState)
+            }
+          }
+        }
+      ]
+
+      // 完成状态下的工具项
+      if (this.taskState === 'FINISHED') {
+        return commonTools
+      }
+      // 未完成状态下的工具项
+      const additionalTools = [
+        // {
+        //   type: 'icon',
+        //   name: '委派',
+        //   icon: '/icons/b-assign.png',
+        //   handler: {
+        //     click: () => {
+        //     // 委派逻辑
+        //     }
+        //   }
+        // }
+      ]
+
+      return [...commonTools, ...additionalTools]
+    },
+    tableColums() {
+      const commonColums = [
+        { title: '项目代号', key: 'projectCode', align: 'center', minWidth: 180 },
+        { title: '当前节点', key: 'taskName', align: 'center', minWidth: 140,
+          // formatter(row, column) {
+          //   return
+          // },
+          component: {
+            render: (h, params) => {
+              return h('div', [
+                h('span', {
+                  class: 'link-style',
+                  on: {
+                    click: () => {
+                      this.gotoTaskDeatil(params)
+
+                      // this.detailTitle = ''
+                      // if (this.operate === 3) {
+                      //   this.dealUnreadTask(params.id)
+                      // }
+                    }
+                  }
+                }, params.gmtFinished ? '结束' : params.taskName || '/')
+              ])
+            }
+          }
+        },
+        { title: '业务对象', key: 'name', align: 'center', minWidth: 140 },
+        { title: '业务对象类型', key: 'category', align: 'center', minWidth: 180 },
+        { title: '当前环节办理人', key: 'assignName', align: 'center', Width: 180 }
+      ]
+      const addUnfinishedColums = [{ title: '流程启动时间', key: 'gmtCreate', align: 'center', Width: 180 }]
+      const addCompleteColums = [
+        { title: '流程完成时间', key: 'gmtFinished', align: 'center', Width: 180 }
+      ]
+      return this.taskState === 'FINISHED' ? [...commonColums, ...addCompleteColums] : [...commonColums, ...addUnfinishedColums]
+    }
+  },
+  watch: {
+    'initdata.state': {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        console.log('类型', val)
+        this.taskState = val
+        this.getTableData(val)
+        // const
+        // const url = val ? `/workflow/task/${val}` : '/workflow/task/'
+        // this.getTableData(url)
+      }
+    }
+  },
+  created() {
+    // this.getTableData()
+  },
+  mounted: function() {
+    console.log('initdata', this.initdata)
+  },
+  methods: {
+
+    getTableData(state) {
+      const params = {
+        checkOwnerSignAddFlag: true,
+        needCurActInfo: true,
+        startedUserId: localStorage.getItem('userId'),
+        page: this.pagination.currentPage,
+        size: this.pagination.pageSize,
+        state: state
+      }
+      post('/workflow/inst?', params).then((res) => {
+        if (res.items.content) {
+          this.tableData = res.items.content.map(item => {
+            item.show = true
+            return item
+          })
+          this.tableData.forEach((item, index) => {
+            this.$set(this.tableData, index, item)
+          })
+          // this.$set(this.tableData, data)
+          // this.tableData = data
+          this.pagination.total = res.items.totalElements
+        }
+      })
+    },
+    selectionChange(val) {
+      this.selectionRow = val
+    },
+    paginationCurrentChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this.getTableData(this.taskState)
+    },
+    handleSizeChange(pageSize) {
+      this.pagination.pageSize = pageSize
+      this.pagination.currentPage = 1
+      this.getTableData(this.taskState)
+    },
+    handleCloseDetail() {
+      this.ifShow = null
+    },
+    reload() {
+      this.getTableData(this.taskState)
+      this.handleCloseDetail()
+    },
+    gotoTaskDeatil(params) {
+      this.clickItem = JSON.parse(JSON.stringify(params))
+      this.drawerDialogVisible = true
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.processTask-list-page{
+
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  a{
+    color: blue
+  }
+  .link-style{
+    color: #2A75CE;
+    cursor:pointer;
+  }
+  .processTask-table{
+    padding: 14px;
+    margin-bottom: 6px;
+    overflow:auto
+
+  }
+  .detail-content{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    right: 0;
+    border-top: 1px solid #ddd;
+    background: #Fff;
+    z-index: 10;
+    overflow: auto;
+    .down-pic{
+      position: absolute;
+      left:0;
+      right: 0;
+      top: 0;
+      z-index: 100;
+      margin:0 auto;
+      cursor: pointer;
+    }
+  }
+
+}
+</style>

applications/dee-task-center/src/views/workflow/task-center/newhome/components/ProcessTaskTable.vue

+<!--  流程任务 -->
+<template>
+  <div class="processTask-list-page ">
+    <div class="processTask-table">
+
+      <!-- <dee-fold-pane
+        :min-percent="30"
+        :default-percent="60"
+        split="horizontal"
+      /> -->
+      <dee-table
+        ref="processTaskTable"
+        :columns="tableColums"
+        :index-row="indexRow"
+        :data="tableData"
+        :options="tableOption"
+        :pagination="pagination"
+        :selection-row="selectionRow"
+        @pagination-current-change="paginationCurrentChange"
+        @pagination-size-change="handleSizeChange"
+        @selection-change="selectionChange"
+      >
+        <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
+      </dee-table>
+    </div>
+    <div v-if="ifShow" class="detail-content">
+      <img class="down-pic" src="/icons/d-down.png" @click="handleCloseDetail">
+      <task-detail :id="itemData.id" is-check-task-state :process-instance-id="itemData.processInstanceId" @reload="reload" />
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+// import { getInstancePbo } from '@/api/workflow/userSettings.js'
+import TaskDetail from '@/business-components/tabCom/task-detail'
+import { post } from '@/utils/http'
+export default {
+  name: 'ProcessTaskTable',
+  components: { TaskDetail },
+
+  props: {
+    initdata: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      itemData: null,
+      ifShow: false,
+      tableData: [],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+        pageSizes: [10, 20, 50]
+      },
+      tableOption: {
+        height: 'calc(100vh - 240px)'
+      },
+      indexRow: {
+        title: '序号',
+        align: 'center',
+        width: '70'
+      },
+      selectionRow: [],
+      taskState: ''
+    }
+  },
+  computed: {
+    tools() {
+    // 公共的工具项
+      const commonTools = [
+        {
+          type: 'icon',
+          name: '刷新',
+          icon: '/icons/b-fresh.png',
+          handler: {
+            click: () => {
+              this.getTableData(this.taskState)
+            }
+          }
+        }
+      ]
+
+      // 完成状态下的工具项
+      if (this.taskState === 'finished') {
+        return commonTools
+      }
+      // 未完成状态下的工具项
+      const additionalTools = [
+        // {
+        //   type: 'icon',
+        //   name: '委派',
+        //   icon: '/icons/b-assign.png',
+        //   handler: {
+        //     click: () => {
+        //     // 委派逻辑
+        //     }
+        //   }
+        // }
+      ]
+
+      return [...commonTools, ...additionalTools]
+    },
+    tableColums() {
+      const commonColums = [
+        { title: '项目代号', key: 'projectCode', align: 'center', minWidth: 180 },
+        {
+          title: '任务名称', key: '', align: 'center', minWidth: 140,
+          component: {
+            render: (h, params) => {
+              return h('div', [
+                h('span', {
+                  class: 'link-style',
+                  on: {
+                    click: () => {
+                      this.gotoTaskDeatil(params)
+
+                      // this.detailTitle = ''
+                      // if (this.operate === 3) {
+                      //   this.dealUnreadTask(params.id)
+                      // }
+                    }
+                  }
+                }, params.name || '/')
+              ])
+            }
+          }
+        },
+        { title: '业务对象', key: 'taskTitle', align: 'center', minWidth: 140
+          // component: {
+          //   render: (h, params) => {
+          //     return h('div', [
+          //       h('span', {
+          //         class: 'link-style',
+          //         on: {
+          //           click: () => {
+          //             getInstancePbo(params.id).then(res => {
+          //               const pbo = res.items
+          //               console.log('pbo', pbo)
+          //               // if (pbo) {
+          //               //   let modelName = pbo.dxClassname.split('.').splice(-1)[0]
+          //               //   modelName = this.$utils.getModelName4dxClassName(modelName)
+          //               //   const title = `${pbo.subTypeDisplayName}_ ${pbo.number}_${pbo.name}`
+          //               //   this.$utils.toObjectDetail(pbo.id, pbo.subTypeName, title, modelName)
+          //               // }
+          //             })
+          //           }
+          //         }
+          //       }, params.taskTitle || '/')
+          //     ])
+          //   }
+          // }
+        },
+        { title: '接收时间', key: 'startTime', align: 'center', minWidth: 180 },
+        { title: '业务对象类型', key: 'name', align: 'center', minWidth: 140, formatter(row, column) {
+          let nodeType = ''
+          switch (row.nodeType) {
+            case 'SINGLE':
+              nodeType = '单人活动'
+              break
+            case 'MULTI_SINGLE_CLAIM':
+              nodeType = '多人单一以领取为准'
+              break
+            case 'MULTI_SINGLE_COMPLETE':
+              nodeType = '多人单一以完成为准'
+              break
+            case 'MULTI_PARALLEL_OVER_PERCENT':
+              nodeType = '多人并行'
+              break
+            case 'MULTI_PARALLEL_OVER_COUNT':
+              nodeType = '多人并行'
+              break
+            case 'MULTI_SEQUENCE':
+              nodeType = '多人顺序'
+          }
+          return nodeType
+        } },
+        {
+          title: '状态', key: 'state', align: 'center', Width: 180,
+          formatter(row, column) {
+            return row.state === 'COMPLETE' ? '已完成' : '进行中'
+          }
+        },
+        { title: '任务创建者', key: 'creator.userName', align: 'center', Width: 180 }
+
+      ]
+      const addUnfinishedColums = [
+        {
+          title: '执行期限(d)', key: 'costTimeInMillis', align: 'center', formatter(row, column) {
+            const costTimeInMillis = row.costTimeInMillis
+            if (!costTimeInMillis) return '/'
+
+            const costTimeInHours = costTimeInMillis / 3600 / 1000 / 24
+            return costTimeInHours
+          }
+        },
+        {
+          title: '超时(d)', key: 'expireTimeInMillis', align: 'center',
+          component: {
+            render(h, params) {
+              const expireTimeInMillis = params.expireTimeInMillis
+              let str = '/'
+              let color = ''
+              if (expireTimeInMillis) {
+                const expireTimeInHours = expireTimeInMillis / 3600 / 1000 / 24
+                str = expireTimeInHours ? (expireTimeInHours > 0 ? `逾期` : `剩余`) + ` ${Math.abs(expireTimeInHours.toFixed(1))}` : '/'
+                color = expireTimeInHours > 0 ? 'red' : ''
+              }
+              return h('span',
+                { style: { color }}, str)
+            }
+          }
+        }
+      ]
+      const addCompleteColums = [
+        { title: '完成时间',
+          key: 'endTime',
+          align: 'center',
+          minWidth: 180 }
+      ]
+      return this.taskState === 'finished' ? [...commonColums, ...addCompleteColums] : [...commonColums, ...addUnfinishedColums]
+    }
+  },
+  watch: {
+    'initdata.state': {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val) {
+          this.taskState = val
+          this.getTableData(val)
+        }
+      }
+    }
+
+  },
+  created() {
+
+  },
+  mounted: function() {
+    // this.getTableData()
+    console.log('initdata', this.initdata)
+  },
+  methods: {
+
+    getTableData(state) {
+      const url = state ? `/workflow/task/${state}` : '/workflow/task/'
+      const params = {
+        assignee: localStorage.getItem('userId'),
+        page: this.pagination.currentPage,
+        size: this.pagination.pageSize
+      }
+      post(url, params).then((res) => {
+        if (res.items.content) {
+          this.tableData = res.items.content.map(item => {
+            item.show = true
+            return item
+          })
+          console.log('this.tableData', this.tableData)
+          this.pagination.total = res.items.totalElements
+        }
+      })
+    },
+    selectionChange(val) {
+      this.selectionRow = val
+    },
+    paginationCurrentChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this.getTableData(this.taskState)
+    },
+    handleSizeChange(pageSize) {
+      this.pagination.pageSize = pageSize
+      this.pagination.currentPage = 1
+      this.getTableData(this.taskState)
+    },
+    handleCloseDetail() {
+      this.ifShow = null
+    },
+    reload() {
+      this.getTableData(this.taskState)
+      this.handleCloseDetail()
+    },
+    gotoTaskDeatil(params) {
+      this.itemData = params
+      this.ifShow = true
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.processTask-list-page{
+
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  a{
+    color: blue
+  }
+  .link-style{
+    color: #2A75CE;
+    cursor:pointer;
+  }
+  .processTask-table{
+    padding: 14px;
+    margin-bottom: 6px;
+  //  overflow:auto
+
+  }
+  .detail-content{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    right: 0;
+    border-top: 1px solid #ddd;
+    background: #Fff;
+    z-index: 10;
+    overflow: auto;
+    .down-pic{
+      position: absolute;
+      left:0;
+      right: 0;
+      top: 0;
+      z-index: 100;
+      margin:0 auto;
+      cursor: pointer;
+    }
+  }
+
+}
+</style>

applications/dee-task-center/src/views/workflow/task-center/newhome/components/ProgressPlanTable.vue

+<!-- 进度计划 -->
+<template>
+  <div class="ProgressTask-list-page">
+    <div class="ProgressTask-table">
+      <dee-table
+        ref="ProgressTaskTable"
+        :columns="tableColums"
+        :index-row="indexRow"
+        :data="tableData"
+        :options="tableOption"
+        :pagination="pagination"
+        :selection-row="selectionRow"
+        @pagination-current-change="paginationCurrentChange"
+        @pagination-size-change="handleSizeChange"
+        @selection-change="selectionChange"
+      >
+        <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
+      </dee-table>
+    </div>
+    <!-- <div v-if="ifShow" class="detail-content">
+      <img class="down-pic" src="/icons/d-down.png" @click="handleCloseDetail">
+      <task-detail :id="itemData.id" is-check-task-state :process-instance-id="itemData.processInstanceId" @reload="reload" />
+    </div>-->
+  </div>
+</template>
+
+<script>
+// import { getInstancePbo } from '@/api/workflow/userSettings.js'
+// import TaskDetail from '@/business-components/tabCom/task-detail'
+import { post, get } from '@/utils/http'
+export default {
+  name: 'ProgressTaskTable',
+  // components: { TaskDetail },
+
+  props: {
+    initdata: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      itemData: null,
+      ifShow: false,
+      // type: '',
+      tableData: [],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+        pageSizes: [10, 20, 50]
+      },
+      tableOption: {
+        height: 'calc(100vh - 240px)'
+      },
+      indexRow: {
+        title: '序号',
+        align: 'center',
+        width: '70'
+      },
+      selectionRow: [],
+      taskState: 'Complete'
+    }
+  },
+  computed: {
+    tools() {
+    // 公共的工具项
+      const commonTools = [
+        {
+          type: 'icon',
+          name: '刷新',
+          icon: '/icons/b-fresh.png',
+          handler: {
+            click: () => {
+              this.getTableData(this.taskState)
+            }
+          }
+        }
+      ]
+      // 未完成状态下的工具项
+      const additionalTools = [
+        {
+          type: 'icon',
+          name: '委派',
+          icon: '/icons/b-assign.png',
+          handler: {
+            click: () => {
+            // 委派逻辑
+            }
+          }
+        }
+      ]
+
+      // 完成状态下的工具项
+      if (this.taskState === 'Complete') {
+        return commonTools
+      } else {
+        return [...commonTools, ...additionalTools]
+      }
+    },
+    tableColums() {
+      const commonColums = [
+        {
+          title: '项目代号',
+          key: 'projectCode',
+          align: 'center',
+          minWidth: 180
+        },
+        {
+          title: '文件编号',
+          key: 'fileNumber',
+          align: 'center',
+          minWidth: 140,
+          component: {
+            render: (h, params) => {
+              return h('div', [
+                h(
+                  'span',
+                  {
+                    class: 'link-style',
+                    on: {
+                      click: () => {
+                        this.goToDeatil(params)
+                      }
+                    }
+                  },
+                  params.fileNumber
+                )
+              ])
+            }
+          }
+        },
+        { title: '文件代号', key: 'fileCode', align: 'center', minWidth: 140 },
+        { title: '编码', key: 'systemNumber', align: 'center', minWidth: 180 },
+        { title: '文件名称', key: 'fileName', align: 'center', minWidth: 180 },
+        { title: '文件类型', key: 'fileType', align: 'center', minWidth: 180 },
+        { title: '版本', key: 'displayVersion', align: 'center', Width: 180 },
+        {
+          title: '文件分类',
+          key: 'fileClassify',
+          align: 'center',
+          minWidth: 180
+        },
+        {
+          title: '节点审核时间',
+          key: 'auditTime',
+          align: 'center',
+          minWidth: 180
+        },
+        {
+          title: '文件要求提交时间',
+          key: 'fileSubmitTime',
+          align: 'center',
+          minWidth: 180
+        },
+        { title: '状态', key: 'state', align: 'center', Width: 180,
+          formatter(row, column) {
+            return row.state === 'Complete' ? '已完成' : '未完成'
+          }
+        },
+        {
+          title: '任务创建者',
+          key: 'creator.userName',
+          align: 'center',
+          minWidth: 180
+        }
+      ]
+      const addUnfinishedColums = [{
+        title: '执行期限',
+        key: 'costTimeInMillis',
+        align: 'center',
+        minWidth: 180
+      }]
+      const addCompleteColums = [
+        {
+          title: '处理时间',
+          key: 'actualCompleteTime',
+          align: 'center',
+          minWidth: 180
+        }
+      ]
+      return this.taskState === 'Complete' ? [...commonColums, ...addCompleteColums] : [...commonColums, ...addUnfinishedColums]
+    }
+  },
+  watch: {
+    'initdata.state': {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        // console.log('类型', val)
+        this.taskState = val
+        if (val) {
+          this.getTableData(val)
+        }
+      }
+    }
+  },
+  created() {
+    // this.getTableData()
+  },
+  mounted: function() {
+    console.log('initdata', this.initdata)
+  },
+  methods: {
+    getTableData(state) {
+      console.log('请求中的state', state)
+      const searchItem = state === 'Complete' ? (
+        {
+          fieldName: 'state',
+          operator: 'EQ',
+          value: 'Complete' // 已完成
+        }
+      )
+        : (
+          {
+            fieldName: 'state',
+            operator: 'EQ',
+            value: 'unfinished' // 未完成
+          })
+
+      const params = {
+        pageFrom: this.pagination.currentPage,
+        pageSize: this.pagination.pageSize,
+        // openProps 这个是要展开的信息，如果不展开，那么拿到的就是null
+        searchItems: {
+          items: [
+            searchItem
+          ],
+          operator: 'AND'
+        },
+        sortItem: [
+          {
+            fieldName: 'modifyTime',
+            sortOrder: 'asc'
+          }
+        ]
+      }
+      post('/ExtPlan/search', params).then((res) => {
+        if (res.items.content) {
+          this.tableData = res.items.content.map((item) => {
+            item.show = true
+            return item
+          })
+          this.pagination.total = res.items.totalElements
+        }
+      })
+    },
+    selectionChange(val) {
+      this.selectionRow = val
+      console.log('this.selectionRow', this.selectionRow)
+    },
+    paginationCurrentChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this.getTableData(this.taskState)
+    },
+    handleSizeChange(pageSize) {
+      this.pagination.pageSize = pageSize
+      this.pagination.currentPage = 1
+      this.getTableData(this.taskState)
+    },
+    handleCloseDetail() {
+      this.ifShow = null
+    },
+    reload() {
+      this.getTableData(this.taskState)
+      this.handleCloseDetail()
+    },
+    goToDeatil(params) {
+      this.$router.push({
+        path: `/configured-page/cd/${params.subTypeName}/defaultInfo/${params.id}`,
+        query: { title: (params.name || params.id) + '详情' }
+      })
+    },
+    planTemplateDownload() {
+      get('/ExtFileTemplateManager/planTemplateDownload?fileType=2').then(res => {
+        this.$utils.showMessageSuccess('下载模板成功')
+      })
+    },
+    batchEdit() {
+      const ids = this.selectionRow.map(r => r.id).join(',')
+      console.log('ids', ids)
+      get(`/ExtIEDPlan/exportIEDPlan?ids=${ids}`).then(res => {
+        this.$utils.showMessageSuccess('操作成功')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ProgressTask-list-page {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  a {
+    color: blue;
+  }
+.ProgressTask-table{
+  padding: 14px;
+    margin-bottom: 6px;
+    overflow:auto
+}
+  .link-style {
+    color: #2a75ce;
+    cursor: pointer;
+  }
+  .detail-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    right: 0;
+    border-top: 1px solid #ddd;
+    background: #fff;
+    z-index: 10;
+    overflow: auto;
+
+    .down-pic {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      z-index: 100;
+      margin: 0 auto;
+      cursor: pointer;
+    }
+  }
+}
+</style>

applications/dee-task-center/src/views/workflow/task-center/newhome/components/PuchasePlanTable.vue

+<template>
+  <div class="PuchaseTask-list-page">
+    <div class="PuchaseTask-table">
+      <dee-table
+        ref="PuchaseTaskTable"
+        :columns="tableColums"
+        :index-row="indexRow"
+        :data="tableData"
+        :options="tableOption"
+        :pagination="pagination"
+        :selection-row="selectionRow"
+        @pagination-current-change="paginationCurrentChange"
+        @pagination-size-change="handleSizeChange"
+        @selection-change="selectionChange"
+      >
+        <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
+      </dee-table>
+    </div>
+    <div v-if="ifShow" class="detail-content">
+      <img class="down-pic" src="/icons/d-down.png" @click="handleCloseDetail">
+      <task-detail :id="itemData.id" is-check-task-state :process-instance-id="itemData.processInstanceId" @reload="reload" />
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getInstancePbo } from '@/api/workflow/userSettings.js'
+import TaskDetail from '@/business-components/tabCom/task-detail'
+import { post } from '@/utils/http'
+export default {
+  name: 'PuchaseTaskTable',
+  components: { TaskDetail },
+
+  props: {
+    initdata: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      itemData: null,
+      ifShow: false,
+      // type: '',
+      tableData: [],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+        pageSizes: [10, 20, 50]
+      },
+      tableOption: {
+        height: 'calc(100vh - 240px)'
+      },
+      indexRow: {
+        title: '序号',
+        align: 'center',
+        width: '70'
+      },
+      selectionRow: [],
+      taskState: 'Complete'
+    }
+  },
+  computed: {
+    tools() {
+    // 公共的工具项
+      const commonTools = [
+        {
+          type: 'icon',
+          name: '刷新',
+          icon: '/icons/b-fresh.png',
+          handler: {
+            click: () => {
+              this.getTableData()
+            }
+          }
+        }
+      ]
+
+      // 完成状态下的工具项
+      if (this.taskState === 'Complete') {
+        return commonTools
+      }
+
+      // 未完成状态下的工具项
+      const additionalTools = [
+        {
+          type: 'icon',
+          name: '委派',
+          icon: '/icons/b-assign.png',
+          handler: {
+            click: () => {
+            // 委派逻辑
+            }
+          }
+        }
+      ]
+
+      return [...commonTools, ...additionalTools]
+    },
+    tableColums() {
+      const commonColums = [
+        { title: '项目代号', key: 'name', align: 'center', minWidth: 180 },
+        { title: '计划编号', key: 'planCode', align: 'center', minWidth: 140,
+          component: {
+            render: (h, params) => {
+              return h('div', [
+                h(
+                  'span',
+                  {
+                    class: 'link-style',
+                    on: {
+                      click: () => {
+                        // 完成
+                        if (this.taskState === 'outsourceProjectName') {
+                          this.goToDeatil(params)
+                        } else {
+                          this.gotoTaskDetail(params)
+                        }
+                      }
+                    }
+                  },
+                  params.planCode
+                )
+              ])
+            }
+          }
+        },
+        { title: '外协（外购）项目名称', key: 'outsourceProjectName', align: 'center', minWidth: 140 },
+        { title: '采购技术文件负责人', key: 'purDesignFileManager', align: 'center', minWidth: 180 },
+        { title: '采购技术文件提交时间', key: 'purDesignFileSubmitTime', align: 'center', Width: 180 },
+        { title: '合同签订时间', key: 'contractSigningTime', align: 'center', Width: 180 },
+        { title: '接收时间', key: 'contractDeliveryTime', align: 'center', Width: 180 },
+        { title: '预算(万元)', key: 'purchaseBudget', align: 'center', Width: 180 },
+        { title: '状态', key: 'state', align: 'center', Width: 180,
+          formatter(row, column) {
+            return row.state === 'Complete' ? '已完成' : '技术文件待提交'
+          }
+        },
+        { title: '任务创建者', key: 'creator.userName', align: 'center', Width: 180 }
+      ]
+      const addUnfinishedColums = [{
+        title: '执行期限',
+        key: 'costTimeInMillis',
+        align: 'center',
+        minWidth: 180
+      }]
+      const addCompleteColums = [
+        {
+          title: '处理时间',
+          key: 'actualCompleteTime',
+          align: 'center',
+          minWidth: 180
+        }
+      ]
+      return this.taskState === 'Complete' ? [...commonColums, ...addCompleteColums] : [...commonColums, ...addUnfinishedColums]
+    }
+  },
+  watch: {
+    'initdata.state': {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        this.taskState = val
+        this.getTableData(val)
+      }
+    }
+  },
+  created() {
+    // this.getTableData()
+  },
+  mounted: function() {
+    console.log('initdata', this.initdata)
+  },
+  methods: {
+    getTableData(state) {
+      console.log('请求中的state', state)
+      const searchItem = state === 'Complete' ? (
+        {
+          fieldName: 'state',
+          operator: 'EQ',
+          value: 'Complete' // 已完成
+        }
+      )
+        : (
+          {
+            fieldName: 'state',
+            operator: 'EQ',
+            value: 'TechFilePendingSubmit' // 未完成
+          })
+
+      const params = {
+        pageFrom: this.pagination.currentPage,
+        pageSize: this.pagination.pageSize,
+        // openProps 这个是要展开的信息，如果不展开，那么拿到的就是null
+        searchItems: {
+          // 'children': [{
+          //   'items': children,
+          //   'operator': 'AND'
+          // }
+
+          // ],
+          items: [
+            searchItem
+          ],
+          operator: 'AND'
+        },
+        sortItem: [
+          {
+            fieldName: 'modifyTime',
+            sortOrder: 'asc'
+          }
+        ]
+      }
+      post('/ExtPuchasePlanAttribute/search', params).then((res) => {
+        if (res.items.content) {
+          this.tableData = res.items.content.map((item) => {
+            item.show = true
+            return item
+          })
+          this.pagination.total = res.items.totalElements
+        }
+      })
+    },
+    selectionChange(val) {
+      this.selectionRow = val
+      console.log('this.selectionRow', this.selectionRow)
+    },
+    paginationCurrentChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this.getTableData()
+    },
+    handleSizeChange(pageSize) {
+      this.pagination.pageSize = pageSize
+      this.pagination.currentPage = 1
+      this.getTableData()
+    },
+    handleCloseDetail() {
+      this.ifShow = null
+    },
+    reload() {
+      this.getTableData()
+      this.handleCloseDetail()
+    },
+    goToDeatil(params) {
+      this.$router.push({
+        path: `/configured-page/cd/${params.subTypeName}/defaultInfo/${params.id}`,
+        query: { title: (params.name || params.id) + '详情' }
+      })
+    },
+    gotoTaskDetail(params) {
+      this.itemData = params
+      console.log('params', params)
+      this.ifShow = true
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.PuchaseTask-list-page {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .PuchaseTask-table{
+    padding: 14px;
+    margin-bottom: 6px;
+    overflow:auto
+
+  }
+  a {
+    color: blue;
+  }
+
+  .link-style {
+    color: #2a75ce;
+    cursor: pointer;
+  }
+  .detail-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    right: 0;
+    border-top: 1px solid #ddd;
+    background: #fff;
+    z-index: 10;
+    overflow: auto;
+
+    .down-pic {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      z-index: 100;
+      margin: 0 auto;
+      cursor: pointer;
+    }
+  }
+}
+</style>

applications/dee-task-center/src/views/workflow/task-center/newhome/index.vue

 <template>
-  <div class="task-table-page">
-    <dee-table
-      class="taskTable"
-      :options="options"
-      selection-row
-      :columns="tableColums"
-      :data="tableData"
-      :pagination="pagination"
-      :index-row="{
-        title: '序号',
-        align: 'center',
-        width: '70'
-      }"
-      @row-click="selectedRow"
-      @selection-change="getSelectionList"
+  <div ref="tabPanel" class="task-page-dx">
+    <dee-fold-pane
+      :min-percent="5"
+      :max-percent="30"
+      :default-percent="22"
+      split="vertical"
+      class="detail-pane"
     >
-      <dee-tools slot="header" :tools="taskTools" mode="normal" />
-    </dee-table>
+      <template #paneL>
+        <div class="task-tree">
+          <el-tree
+            ref="tree"
+            class="PlanTreeMenu-main"
+            node-key="pageKey"
+            :data="treeData"
+            empty-text="暂无数据"
+            :highlight-current="true"
+            :expand-on-click-node="false"
+            :props="defaultProps"
+            default-expand-all
+            @node-click="nodeClick"
+          >
+            <div slot-scope="{node, data}" class="PlanTreeMenu-node hover-visible">
+              <div :title="node.label" class="PlanTreeMenu-label" :class="{'disabled-node': node.disabled}">
+                <div class="flex-start">
+                  <img v-if="data.icon" width="21px" height="21px" :src="data.icon" alt="">
+                  <span v-if="node.label" class="change-text">
+                    {{ node.label }}
+                  </span>
+                </div>
+
+              </div>
+            </div>
+          </el-tree>
+        </div>
+      </template>
+      <template #paneR>
+        <div class="right-panel">
+          <ProcessTaskTable v-if="initdata.componentName==='ProcessTaskTable'" :initdata="initdata" />
+          <MyProcessTaskTable v-if="initdata.componentName==='MyProcessTaskTable'" :initdata="initdata" />
+          <IEDTaskTable v-if="initdata.componentName==='IEDTaskTable'" :initdata="initdata" />
+          <PuchaseTaskTable v-if="initdata.componentName==='PuchaseTaskTable'" :initdata="initdata" />
+          <ICMTaskTable v-if="initdata.componentName==='ICMTaskTable'" :initdata="initdata" />
+          <ProgressTaskTable v-if="initdata.componentName==='ProgressTaskTable'" :initdata="initdata" />
+          <MagList v-if="initdata.componentName==='MeaasgeTable'" :initdata="initdata" />
+        </div>
+      </template>
+    </dee-fold-pane>
   </div>
 </template>
 
-<script>
-// 流程任务树我发起的流程
+<script >
+import ProcessTaskTable from './components/ProcessTaskTable.vue'
+import MyProcessTaskTable from './components/MyProcessPlanTable.vue'
+import IEDTaskTable from './components/IEDPlanTable.vue'
+import PuchaseTaskTable from './components/PuchasePlanTable.vue'
+import ICMTaskTable from './components/ICMPlanTable.vue'
+import ProgressTaskTable from './components/ProgressPlanTable.vue'
+import MagList from './components/MessageTable.vue'
+import view from './view.js'
 export default {
-  name: 'ProgressPlanTable',
-  components: {},
+  name: 'NewTask',
+  components: { MagList, ProcessTaskTable, MyProcessTaskTable, IEDTaskTable, PuchaseTaskTable, ICMTaskTable, ProgressTaskTable },
+  mixins: [view],
+
   data() {
     return {
-      taskTools: [
-        {
-          type: 'icon',
-          name: '刷新',
-          icon: '/icons/c-delete.png',
-          handler: {
-            click: () => {
-
-            }
-          }
+      permissionObj: {},
+      defaultProps: {
+        children: 'children',
+        label: 'name'
       },
-        {
-          type: 'icon',
-          name: '委派',
-          icon: '/icons/c-delete.png',
-          handler: {
-            click: () => {
-
+      initdata: {
+        componentName: 'ProcessTaskTable'
       }
     }
-        }
-      ],
-      // 列表
-      tableColums: [
-        { title: '项目代号', key: 'name', align: 'center', minWidth: 180, component: {
-          render: (h, params) => {
-            return h('div', [
-              h('span', {
-                class: 'link-style',
-                on: {
-                  click: () => {
-                    // this.itemData = params
-                    // this.lookDetail()
-                  }
-                }
-              }, params.name)
-            ])
-          }
-        }},
-        { title: '计划编号', key: 'ownerName', align: 'center', minWidth: 140 },
-        { title: '外协（外购）项目名称', key: 'ownerName', align: 'center', minWidth: 140 },
-        { title: '采购技术文件负责人', key: 'gmtCreate', align: 'center', minWidth: 180 },
-        { title: '采购技术文件提交时间', key: 'gmtFinished', align: 'center', Width: 180 },
-        { title: '合同签订时间', key: 'gmtFinished', align: 'center', Width: 180 },
-        { title: '接收时间', key: 'gmtFinished', align: 'center', Width: 180 },
-        { title: '预算(万元)', key: 'gmtFinished', align: 'center', Width: 180 },
-        { title: '状态', key: 'gmtFinished', align: 'center', Width: 180 },
-        { title: '任务创建者', key: 'gmtFinished', align: 'center', Width: 180 },
-        { title: '执行期限', key: 'gmtFinished', align: 'center', Width: 180 },
-        { title: '处理时间', key: 'gmtFinished', align: 'center', Width: 180 }
-      ],
-      tableData: [],
-      pagination: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0,
-        pageSizes: [10, 20, 50]
   },
-      options: {}
-    }
+  computed: {
   },
-  created() {
+  watch: {
   },
   mounted() {
-    // this.setOptions()
-    // this.getSelfList()
-    // this.getList()
+    this.initTreeData()
   },
   methods: {
-    getSelectionList() {}
-
+    // 判断是否显示按钮`
+    initTreeData() {
+      this.nodeClick(this.treeData[0].children[0])
+    },
+    nodeClick(data) {
+      console.log('data点击了', data)
+      if (data.ifClick === false) {
+        event.stopPropagation() // 阻止事件冒泡
+      } else {
+        this.initdata = data
+      }
+    }
   }
 }
+
 </script>
 
-<style lang="scss">
-.task-table-page {
-  height:100%;
-  .flex-s{
+  <style lang="scss">
+  .task-page-dx{
+    width: 100%;
+    height: calc(100% - 14px);
+    position: relative;
+    .task-tree{
+         height: 100%;
+         box-sizing: border-box;
+         padding: 0!important;
+         background-color:white;
+         overflow: hidden;
+        .title{
+          padding: 0 8px;
+          height: 40px;
+          line-height: 40px;
+          font-size: 16px;
+          font-weight: bold;
+          border-bottom: 1px solid #DBE2E5;
+        }
+        .PlanTreeMenu-main{
+          padding:16px 0 ;
+          height: calc(100% - 40px);
+          overflow: auto;
+        }
+        .PlanTreeMenu-label{
+          display: flex;
+          justify-content: space-between;
+          font-size:14px;
+          img{
+            display: block;
+          }
+        }
+        .tree-btn-box{
+          margin-left: 6px;
+        }
+        .search-form-box{
+          padding:0px;
+        }
+        .search-form-box .dee-search-form .el-form-item__label {
+          text-align: center;
+        }
+        .search-form-box .search-box-item {
+          width: 100%;
+        }
+        .dee-search-form{
+
+          &>div{
+             padding-bottom: 8px !important;
+          }
+        }
+
+        .dee-search-form{
+          border-bottom: 1px solid #dcdfe6;
+        }
+        .dee-search-form{
+          margin-bottom: 0px !important;
+          margin-top: 20px;
+          // padding-bottom: 20px;
+          .dee-form-item{
+            width: 100%;
+          }
+
+        }
+        .search-box-btn{
+          display: none;
+        }
+        .searchBtn{
+          display: none !important;
+        }
+        .el-tree{
+          background-color: transparent;
+        }
+          .el-scrollbar .el-scrollbar__wrap {
+              overflow-x: hidden;
+          }
+          .el-tree>.el-tree-node {
+              min-width: 100%;
+              display:inline-block;
+          }
+          .el-tree-node__content {
+            align-self: baseline;
+          }
+
+        .el-tree-node__content{
+          padding:1px 8px;
+          &:hover{
+            .PlanTreeMenu-btn{
+              display: block;
+              visibility: visible;
+            }
+          }
+        }
+        .el-tree-node__expand-icon{
+          font-size: 16px;
+        }
+        .PlanTreeMenu-btn_item{
+          width: 18px;
+          height: 18px;
+          border: none;
+          background-color: transparent;
+          background-size:100% 100%;
+          border-radius: 0;
+          outline:none;
+          cursor: pointer;
+          // &:hover{
+          //   // border-top: 1px solid transparent;
+          // }
+          &.btn-add{
+            background-image: url("/icons/c-add.png");
+          }
+          &.btn-edit{
+            background-image: url("/icons/c-edit.png");
+          }
+          &.btn-delete{
+            background-image: url("/icons/c-creatbackups.png");
+          }
+        }
+
+        &-node{
+          width: 100%;
           display: flex;
+          flex-direction:row;
+          align-items: center;
           justify-content: space-between;
+          flex: 1;
+          box-sizing: border-box;
+          overflow: hidden;
+        }
+        &-label{
+          flex: 1;
+          overflow: hidden;
+          white-space:nowrap;
+          text-overflow:ellipsis;
+          display: flex;
+          align-items: center;
+          color:#424141;
+          font-weight: 500;
+          img{
+            margin-right: 6px;
           }
-  .dee-table{
+        }
+        &-btn{
+          // display: none;
+          visibility: hidden;
+          // width: 180px;
+          text-align: right;
+
+          button {
+            margin-left: 8px;
+          }
+
+      }
+      }
+      .right-panel{
         height: 100%;
-    .dee-table-body {
-      height: calc(100% - 110px) !important;
+        background-color: #fff;
       }
+
   }
-}
-</style>
+  </style>

applications/dee-task-center/src/views/workflow/task-center/newhome/view.js

@@ -2,53 +2,46 @@ export default {
   props: {},
   data() {
     return {
-      projectMenus: [
+      treeData: [
         {
           name: '流程任务',
           icon: '/icons/dee-project/plan.png',
-          componentType: 'formConfig',
-          formConfigType: 'page',
-          pageKey: '22c90a9f-0907-49ea-8f8d-d5234e93e0e6',
+          componentName: 'ProcessTaskTable',
+          ifClick: false,
+          state: '',
           children: [
             {
               name: '待处理',
-              componentName: 'PlanTeam',
+              componentName: 'ProcessTaskTable',
               icon: '/icons/dee-project/team.png',
-              componentType: 'formConfig',
-              formConfigType: 'page',
-              pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+              state: 'todo'
             },
             {
               name: '已完成',
-              componentName: 'PlanTeam',
+              componentName: 'ProcessTaskTable',
               icon: '/icons/dee-project/team.png',
-              componentType: 'formConfig',
-              formConfigType: 'page',
-              pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+              state: 'finished'
             },
             {
+              // /workflow/inst?
               name: '我发起的流程',
-              componentName: 'PlanTeam',
+              componentName: 'MyProcessTaskTable',
               icon: '/icons/dee-project/team.png',
-              componentType: 'formConfig',
-              formConfigType: 'page',
-              pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f',
+              state: '',
               children: [
                 {
+                  // state: "RUNNING"
                   name: '未完成',
-                  componentName: 'PlanTeam',
+                  componentName: 'MyProcessTaskTable',
                   icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  state: 'RUNNING'
                 },
                 {
+                  // state: "FINISHED"
                   name: '已完成',
-                  componentName: 'PlanTeam',
+                  componentName: 'MyProcessTaskTable',
                   icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  state: 'FINISHED'
                 }
               ]
             }
@@ -56,93 +49,72 @@ export default {
         },
         {
           name: '计划任务',
-          componentName: 'PlanTeam',
+          // componentName: 'PlanTeam',
+          ifClick: false,
           icon: '/icons/dee-project/team.png',
-          componentType: 'formConfig',
-          formConfigType: 'page',
-          pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f',
+          // type: 'All',
           children: [
             {
               name: '待处理',
-              componentName: 'PlanTeam',
+              ifClick: false,
               icon: '/icons/dee-project/team.png',
-              componentType: 'formConfig',
-              formConfigType: 'page',
-              pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f',
               children: [
                 {
                   name: '设计文件',
-                  componentName: 'PlanTeam',
+                  componentName: 'IEDTaskTable',
                   icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  state: 'unfinished'
                 },
                 {
                   name: '外部接口',
-                  componentName: 'PlanTeam',
+                  componentName: 'ICMTaskTable',
                   icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  state: 'unfinished'
                 },
                 {
                   name: '进度计划',
-                  componentName: 'PlanTeam',
+                  componentName: 'ProgressTaskTable',
                   icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  state: 'unfinished'
                 },
                 {
                   name: '采购计划',
-                  componentName: 'PlanTeam',
+                  componentName: 'PuchaseTaskTable',
                   icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  state: 'unfinished'
                 }
               ]
             },
             {
               name: '已完成',
-              componentName: 'PlanTeam',
+              ifClick: false,
+              // componentName: 'PlanTeam',
               icon: '/icons/dee-project/team.png',
-              componentType: 'formConfig',
-              formConfigType: 'page',
-              pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f',
+              // state: 'finished',
               children: [
                 {
                   name: '设计文件',
-                  componentName: 'PlanTeam',
+                  componentName: 'IEDTaskTable',
                   icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  state: 'Complete'
                 },
                 {
                   name: '外部接口',
-                  componentName: 'PlanTeam',
+                  componentName: 'ICMTaskTable',
                   icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  state: 'Complete'
                 },
                 {
                   name: '进度计划',
-                  componentName: 'PlanTeam',
+                  componentName: 'ProgressTaskTable',
                   icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  state: 'Complete'
                 },
                 {
                   name: '采购计划',
-                  componentName: 'PlanTeam',
+                  componentName: 'PuchaseTaskTable',
                   icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  state: 'Complete'
                 }
               ]
             }
@@ -151,41 +123,28 @@ export default {
         {
           name: '分发任务',
           icon: '/icons/dee-project/baseline.png',
-          componentType: 'formConfig',
-          formConfigType: 'page',
-          pageKey: 'b893b248-6993-4f21-bc56-d543be6f6f45',
+          componentName: 'DistributeTable',
           children: [
             {
               name: '待处理',
               componentName: 'PlanTeam',
               icon: '/icons/dee-project/team.png',
-              componentType: 'formConfig',
-              formConfigType: 'page',
-              pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f',
+              type: 'Pending',
               children: [
                 {
                   name: '主办',
                   componentName: 'PlanTeam',
-                  icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  icon: '/icons/dee-project/team.png'
                 },
                 {
                   name: '参办',
                   componentName: 'PlanTeam',
-                  icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  icon: '/icons/dee-project/team.png'
                 },
                 {
                   name: '阅知',
                   componentName: 'PlanTeam',
-                  icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  icon: '/icons/dee-project/team.png'
                 }
               ]
             },
@@ -193,59 +152,41 @@ export default {
               name: '已完成',
               componentName: 'PlanTeam',
               icon: '/icons/dee-project/team.png',
-              componentType: 'formConfig',
-              formConfigType: 'page',
-              pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f',
+              type: 'Done',
               children: [
                 {
                   name: '主办',
                   componentName: 'PlanTeam',
-                  icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  icon: '/icons/dee-project/team.png'
                 },
                 {
                   name: '参办',
                   componentName: 'PlanTeam',
-                  icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  icon: '/icons/dee-project/team.png'
                 },
                 {
                   name: '阅知',
                   componentName: 'PlanTeam',
-                  icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  icon: '/icons/dee-project/team.png'
                 }
               ]
             },
             {
               name: '我发起的分发',
-              componentName: 'PlanTeam',
+              componentName: 'DistributeTable',
               icon: '/icons/dee-project/team.png',
-              componentType: 'formConfig',
-              formConfigType: 'page',
-              pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f',
               children: [
                 {
                   name: '未完成',
                   componentName: 'PlanTeam',
                   icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  type: 'noFinish'
                 },
                 {
                   name: '已完成',
                   componentName: 'PlanTeam',
                   icon: '/icons/dee-project/team.png',
-                  componentType: 'formConfig',
-                  formConfigType: 'page',
-                  pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+                  type: 'finished'
                 }
               ]
             }
@@ -254,25 +195,20 @@ export default {
         {
           name: '消息',
           icon: '/icons/dee-project/baseline.png',
-          componentType: 'formConfig',
-          formConfigType: 'page',
-          pageKey: 'fe0b5925-0b7f-42bd-adbc-8ecb738013a0',
+          // componentName: 'MeaasgeTable',
+          ifClick: false,
           children: [
             {
               name: '未读',
-              componentName: 'PlanTeam',
+              componentName: 'MeaasgeTable',
               icon: '/icons/dee-project/team.png',
-              componentType: 'formConfig',
-              formConfigType: 'page',
-              pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+              state: 'unread'
             },
             {
               name: '已阅',
-              componentName: 'PlanTeam',
+              componentName: 'MeaasgeTable',
               icon: '/icons/dee-project/team.png',
-              componentType: 'formConfig',
-              formConfigType: 'page',
-              pageKey: 'f8e17790-5ab7-4c33-b6a1-33f07f87051f'
+              state: 'read'
             }
           ]
         }