主管催办

src/views/platform/office/supervisorNotice/detail/group-type.vue

@@ -0,0 +1,317 @@
+<template>
+  <div :style="{height:height+'px'}" class="pendingManage-module">
+    <ibps-crud
+      ref="crud"
+      :style="{ marginLeft: width+'px' }"
+      :height="height"
+      :data="listData"
+      :toolbars="listConfig.toolbars"
+      :search-form="listConfig.searchForm"
+      :pk-key="pkKey"
+      :columns="listConfig.columns"
+      :pagination="pagination"
+      :loading="loading"
+      :index-row="false"
+      @action-event="handleAction"
+      @sort-change="handleSortChange"
+      @column-link-click="handleLinkClick"
+      @pagination-change="handlePaginationChange"
+	    :contorlLength = "true"
+    >
+      <template slot="procDefIdSelect">
+        <bpm-definition-selector
+          v-model="procDefIdSelect"
+          style="width:200px;display:block;"
+          value-key="defKey"
+          is-super
+          :multiple="false"
+          @input="getProcDefId"
+          @callback="data => formId= data.id"
+        />
+      </template>
+      <template slot="subject" slot-scope="scope">
+        <el-badge v-if="scope.row.remindTimes>0" :value="scope.row.remindTimes" class="item">
+          <el-link type="primary" :underline="false" @click="handleLinkClick(scope.row)">
+            {{ scope.row.subject }}
+          </el-link>
+        </el-badge>
+        <el-link v-else type="primary" :underline="false" @click="handleLinkClick(scope.row)">
+          {{ scope.row.subject }}
+        </el-link>
+      </template>
+    </ibps-crud>
+    <bpmn-formrender
+      :visible="dialogFormVisible"
+      :task-id="taskId"
+      @callback="search"
+      @close="visible => dialogFormVisible = visible"
+    />
+    <!-- 转办 -->
+    <delegate
+      :task-id="taskId"
+      :title="title"
+      :visible="delegateVisible"
+      @callback="search"
+      @close="visible => delegateVisible = visible"
+    />
+    <!-- 批量审批 -->
+    <approve-dialog
+      :visible="approveDialogVisible"
+      :title="title"
+      :task-id="taskId"
+      :action="action"
+      @callback="search"
+      @close="visible => approveDialogVisible = visible"
+    />
+  </div>
+</template>
+<script>
+import { pending4Group } from '@/api/platform/office/bpmReceived'
+import { batchSuspendProcess, batchRecoverProcess } from '@/api/platform/bpmn/bpmTask'
+import ActionUtils from '@/utils/action'
+import BpmDefinitionSelector from '@/business/platform/bpmn/definition/selector'
+import BpmnFormrender from '@/business/platform/bpmn/form/dialog'
+import Delegate from '@/business/platform/bpmn/task-change/edit'
+import ApproveDialog from '@/business/platform/bpmn/form-ext/approve'
+
+export default {
+  components: {
+    BpmDefinitionSelector,
+    Delegate,
+    ApproveDialog,
+    BpmnFormrender
+  },
+  props: {
+    id: String,
+    height: Number
+  },
+  data() {
+    return {
+      width: 200,
+      // height: document.clientHeight,
+      dialogFormVisible: false, // 弹窗
+      approveDialogVisible: false, // 批量审批
+      delegateVisible: false,
+      action: '',
+      taskId: '', // 编辑dialog需要使用
+      title: '',
+      pkKey: 'id', // 主键  如果主键不是pk需要传主键
+      typeId: '',
+      loading: false,
+      listData: [],
+      listConfig: {
+        // 工具栏
+        toolbars: [
+          { key: 'search' },
+          {
+            key: 'agree',
+            label: '同意',
+            icon: 'ibps-icon-check-square-o'
+          },
+          {
+            key: 'stop',
+            label: '终止',
+            icon: 'ibps-icon-ioxhost'
+          },
+          {
+            key: 'suspend',
+            label: '挂起',
+            icon: 'ibps-icon-ioxhost '
+          },
+          {
+            key: 'recover',
+            label: '恢复',
+            icon: 'ibps-icon-ioxhost '
+          }
+        ],
+        // 查询条件
+        searchForm: {
+          forms: [
+            { prop: 'Q^subject_^SL', name: 'Q^temp.subject_^SL', label: '请求标题', link: 'dialog', labelWidth: 80, itemWidth: 200 },
+            // { prop: 'Q^creatorId^S',  label: '创建人', labelWidth: 80, itemWidth: 200, fieldType: 'slot', slotName: 'searchFormCreator' },
+            { prop: 'Q^proc_def_key_^S', name: 'Q^temp.proc_def_key_^S', label: '流程名称', fieldType: 'slot', slotName: 'procDefIdSelect', labelWidth: 80, itemWidth: 200 },
+            {
+              prop: ['Q^create_time_^DL', 'Q^create_time_^DG'],
+              name: ['Q^temp.create_time_^DL', 'Q^temp.create_time_^DG'],
+              label: '创建时间',
+              fieldType: 'daterange',
+              labelWidth: 80
+            }
+          ]
+        },
+        // 表格字段配置
+        columns: [
+          { prop: 'subject', label: '请求标题', slotName: 'subject' },
+          { prop: 'procDefName', label: '流程名称', width: 120 },
+          { prop: 'name', label: '当前节点', width: 120 },
+          { prop: 'createTime', label: '创建时间', width: 140 }
+        ]
+      },
+      pagination: {},
+      sorts: {},
+      procDefIdSelect: ''
+
+    }
+  },
+  // created() {
+  //   this.loadData()
+  // },
+  methods: {
+    getProcDefId(data) {
+      this.procDefIdSelect = data
+    },
+    /**
+     * 加载数据
+     */
+    loadData(id) {
+      this.loading = true
+      pending4Group(this.getFormatParams(id)).then(response => {
+        ActionUtils.handleListData(this, response.data)
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    /**
+     * 获取格式化参数
+     */
+    getFormatParams(id) {
+      const params = this.$refs['crud'] ? this.$refs['crud'].getSearcFormData() : {}
+      if (this.$utils.isNotEmpty(this.procDefIdSelect)) {
+        params['Q^temp.proc_def_key_^S'] = this.procDefIdSelect
+      }
+      if (this.$utils.isNotEmpty(id)) {
+        params['Q^temp.TYPE_ID_^S'] = id
+      }
+      return ActionUtils.formatParams(
+        params,
+        this.pagination,
+        this.sorts)
+    },
+    /**
+     * 处理分页事件
+     */
+    handlePaginationChange(page) {
+      ActionUtils.setPagination(this.pagination, page)
+      this.loadData()
+    },
+    /**
+     * 处理排序
+     */
+    handleSortChange(sort) {
+      ActionUtils.setSorts(this.sorts, sort)
+      this.loadData()
+    },
+    search() {
+      this.loadData()
+    },
+    /**
+     * 重置查询条件
+     */
+    reset() {
+      this.$refs['crud'].handleReset()
+    },
+    /**
+     * 点击表格
+     */
+    handleLinkClick(data, columns) {
+      this.taskId = data.taskId || ''
+      this.dialogFormVisible = true
+    },
+    /**
+     * 处理按钮事件
+     */
+    handleAction(command, position, selection, data) {
+      switch (command) {
+        case 'search':// 查询
+          ActionUtils.setFirstPagination(this.pagination)
+          this.search()
+          break
+        case 'stop': // 终止
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleBatchApprove(ids, 'stop')
+            this.title = '批量终止流程'
+          }).catch(() => { })
+          break
+        case 'agree': // 同意
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleBatchApprove(ids, 'agree')
+            this.title = '批量同意审批'
+          }).catch(() => { })
+          break
+        case 'suspend': // 挂起
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleSuspend(ids)
+          }).catch(() => { })
+          break
+        case 'recover': // 恢复
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleRecover(ids)
+          }).catch(() => { })
+          break
+        case 'delegate': // 转办
+          ActionUtils.selectedRecord(selection).then((id) => {
+            this.title = '任务转办'
+            this.handleDelegate(id)
+          }).catch(() => { })
+          break
+        default:
+          break
+      }
+    },
+    /**
+     * 处理批量审批
+     */
+    handleBatchApprove(id = '', action = 'agree') {
+      this.taskId = id
+      this.action = action
+      this.approveDialogVisible = true
+    },
+    /**
+     * 批量挂起任务
+     */
+    handleSuspend(ids) {
+      this.$confirm('确认批量挂起流程任务？', '信息').then(() => {
+        batchSuspendProcess({ taskIds: ids }).then(() => {
+          ActionUtils.successMessage('挂起流程任务成功')
+          this.search()
+        }).catch(err => {
+          console.error(err)
+        })
+      })
+    },
+    /**
+     * 批量挂起任务
+     */
+    handleRecover(ids) {
+      this.$confirm('确认批量恢复流程任务？', '信息').then(() => {
+        batchRecoverProcess({ taskIds: ids }).then(() => {
+          ActionUtils.successMessage('恢复流程任务成功')
+          this.search()
+        }).catch(err => {
+          console.error(err)
+        })
+      })
+    },
+    handleDelegate(id) {
+      this.taskId = id
+      this.delegateVisible = true
+    }
+  }
+}
+</script>
+<style lang="scss">
+.pendingManage-module{
+  .cell{
+    overflow:initial !important;
+  }
+  .el-badge{
+    margin:10px 0 0 10px;
+  }
+  .el-badge__content.is-fixed{
+    top: 0;
+    left: -40px;
+    right: auto;
+  }
+}
+</style>

src/views/platform/office/supervisorNotice/detail/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="main-container">
+    <el-tabs
+      v-model="activeName"
+      @tab-click="handleTabClick"
+    >
+     <user-type 
+       ref="user-type"
+      :id = "id"
+      :height="height"
+      />
+      <!-- <el-tab-pane label="用户类型" name="user-type">
+        <user-type ref="user-type" :height="height-(height/11)" />
+      </el-tab-pane>
+      <el-tab-pane label="组织下所属人" name="org-belong">
+        <org-belong ref="org-belong" :height="height-(height/11)" />
+      </el-tab-pane>
+      <el-tab-pane label="组织负责人" name="org-principal">
+        <org-principal ref="org-principal" :height="height-(height/11)" />
+      </el-tab-pane>
+      <el-tab-pane label="角色下所属人" name="role-belong">
+        <role-belong ref="role-belong" :height="height-(height/11)" />
+      </el-tab-pane>
+      <el-tab-pane label="岗位下所属人" name="post-belong">
+        <post-belong ref="post-belong" :height="height-(height/11)" />
+      </el-tab-pane>
+      <el-tab-pane label="用户组所属人" name="group-type">
+        <group-type ref="group-type" :height="height-(height/11)" />
+      </el-tab-pane> -->
+    </el-tabs>
+  </div>
+</template>
+<script>
+// 组件
+// import FixHeight from '@/mixins/height'
+import userType from './user-type'
+import orgBelong from './org-belong'
+import orgPrincipal from './org-principal'
+import roleBelong from './role-belong'
+import postBelong from './post-belong'
+import groupType from './group-type'
+export default {
+  components: {
+    userType,
+    orgBelong,
+    orgPrincipal,
+    roleBelong,
+    postBelong,
+    groupType
+  },
+  // mixins: [FixHeight],
+  props: {
+    id: {
+      type: [String, Number]
+    },
+    height: Number,
+    orgName: String,
+    isAuth: {
+      type: Boolean,
+      default: false
+    },
+    rowHandle: {
+      type: Boolean,
+      default: false
+    },
+    rightsArr: {
+      type: Array,
+      default: () => []
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    },
+    showTree: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      activeName: 'user-type',
+      rootName: {
+        name: 'user-type'
+      }
+    }
+  },
+  watch: {
+    activeName: {
+      handler: function(val, oldVal) {
+        this.rootName.name = val
+      },
+      deep: true,
+      immediate: true
+    },
+    id: {
+      handler: function(val, oldVal) {
+        if (this.$utils.isNotEmpty(val)) {
+          this.handleTabClick(this.rootName)
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.handleTabClick(this.rootName)
+  },
+  methods: {
+    handleTabClick(tab) {
+      switch (tab.name) {
+        case 'user-type':
+          this.$refs['user-type'].loadData(this.id)
+          break
+        case 'org-belong':
+          this.$refs['org-belong'].loadData(this.id)
+          break
+        case 'org-principal':
+          this.$refs['org-principal'].loadData(this.id)
+          break
+        case 'role-belong':
+          this.$refs['role-belong'].loadData(this.id)
+          break
+        case 'post-belong':
+          this.$refs['post-belong'].loadData(this.id)
+          break
+        case 'group-type':
+          this.$refs['group-type'].loadData(this.id)
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-tabs >>> .el-tabs__header{margin: 0px;}
+</style>

src/views/platform/office/supervisorNotice/detail/org-belong.vue

@@ -0,0 +1,317 @@
+<template>
+  <div :style="{height:height+'px'}" class="pendingManage-module">
+    <ibps-crud
+      ref="crud"
+      :style="{ marginLeft: width+'px' }"
+      :height="height"
+      :data="listData"
+      :toolbars="listConfig.toolbars"
+      :search-form="listConfig.searchForm"
+      :pk-key="pkKey"
+      :columns="listConfig.columns"
+      :pagination="pagination"
+      :loading="loading"
+      :index-row="false"
+      @action-event="handleAction"
+      @sort-change="handleSortChange"
+      @pagination-change="handlePaginationChange"
+      :contorlLength = "true"
+    >
+      <template slot="procDefIdSelect">
+        <bpm-definition-selector
+          v-model="procDefIdSelect"
+          style="width:200px;display:block;"
+          value-key="defKey"
+          is-super
+          :multiple="false"
+          @input="getProcDefId"
+          @callback="data => formId= data.id"
+        />
+      </template>
+      <template slot="subject" slot-scope="scope">
+        <el-badge v-if="scope.row.remindTimes>0" :value="scope.row.remindTimes" class="item">
+          <el-link type="primary" :underline="false" @click="handleLinkClick(scope.row)">
+            {{ scope.row.subject }}
+          </el-link>
+        </el-badge>
+        <el-link v-else type="primary" :underline="false" @click="handleLinkClick(scope.row)">
+          {{ scope.row.subject }}
+        </el-link>
+      </template>
+    </ibps-crud>
+    <bpmn-formrender
+      :visible="dialogFormVisible"
+      :task-id="taskId"
+      @callback="search"
+      @close="visible => dialogFormVisible = visible"
+    />
+    <!-- 转办 -->
+    <delegate
+      :task-id="taskId"
+      :title="title"
+      :visible="delegateVisible"
+      @callback="search"
+      @close="visible => delegateVisible = visible"
+    />
+    <!-- 批量审批 -->
+    <approve-dialog
+      :visible="approveDialogVisible"
+      :title="title"
+      :task-id="taskId"
+      :action="action"
+      @callback="search"
+      @close="visible => approveDialogVisible = visible"
+    />
+  </div>
+</template>
+<script>
+import { pending4Org } from '@/api/platform/office/bpmReceived'
+import { batchSuspendProcess, batchRecoverProcess } from '@/api/platform/bpmn/bpmTask'
+import ActionUtils from '@/utils/action'
+import BpmDefinitionSelector from '@/business/platform/bpmn/definition/selector'
+import BpmnFormrender from '@/business/platform/bpmn/form/dialog'
+import Delegate from '@/business/platform/bpmn/task-change/edit'
+import ApproveDialog from '@/business/platform/bpmn/form-ext/approve'
+
+export default {
+  components: {
+    BpmDefinitionSelector,
+    Delegate,
+    ApproveDialog,
+    BpmnFormrender
+  },
+  props: {
+    id: String,
+    height: Number
+  },
+  data() {
+    return {
+      width: 200,
+      // height: document.clientHeight,
+      dialogFormVisible: false, // 弹窗
+      approveDialogVisible: false, // 批量审批
+      delegateVisible: false,
+      action: '',
+      taskId: '', // 编辑dialog需要使用
+      title: '',
+      pkKey: 'id', // 主键  如果主键不是pk需要传主键
+      typeId: '',
+      loading: false,
+      listData: [],
+      listConfig: {
+        // 工具栏
+        toolbars: [
+          { key: 'search' },
+          {
+            key: 'agree',
+            label: '同意',
+            icon: 'ibps-icon-check-square-o'
+          },
+          {
+            key: 'stop',
+            label: '终止',
+            icon: 'ibps-icon-ioxhost'
+          },
+          {
+            key: 'suspend',
+            label: '挂起',
+            icon: 'ibps-icon-ioxhost '
+          },
+          {
+            key: 'recover',
+            label: '恢复',
+            icon: 'ibps-icon-ioxhost '
+          }
+        ],
+        // 查询条件
+        searchForm: {
+          forms: [
+            { prop: 'Q^subject_^SL', name: 'Q^temp.subject_^SL', label: '请求标题', link: 'dialog', labelWidth: 80, itemWidth: 200 },
+            // { prop: 'Q^creatorId^S',  label: '创建人', labelWidth: 80, itemWidth: 200, fieldType: 'slot', slotName: 'searchFormCreator' },
+            { prop: 'Q^proc_def_key_^S', name: 'Q^temp.proc_def_key_^S', label: '流程名称', fieldType: 'slot', slotName: 'procDefIdSelect', labelWidth: 80, itemWidth: 200 },
+            {
+              prop: ['Q^create_time_^DL', 'Q^create_time_^DG'],
+              name: ['Q^temp.create_time_^DL', 'Q^temp.create_time_^DG'],
+              label: '创建时间',
+              fieldType: 'daterange',
+              labelWidth: 80
+            }
+          ]
+        },
+        // 表格字段配置
+        columns: [
+          { prop: 'subject', label: '请求标题', slotName: 'subject' },
+          { prop: 'procDefName', label: '流程名称', width: 120 },
+          { prop: 'name', label: '当前节点', width: 120 },
+          { prop: 'createTime', label: '创建时间', width: 140 },
+          { prop: 'ownerName', label: '所属人', width: 150 }
+        ]
+      },
+      pagination: {},
+      sorts: {},
+      procDefIdSelect: ''
+
+    }
+  },
+  // created() {
+  //   this.loadData()
+  // },
+  methods: {
+    getProcDefId(data) {
+      this.procDefIdSelect = data
+    },
+    /**
+     * 加载数据
+     */
+    loadData(id) {
+      this.loading = true
+      pending4Org(this.getFormatParams(id)).then(response => {
+        ActionUtils.handleListData(this, response.data)
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    /**
+     * 获取格式化参数
+     */
+    getFormatParams(id) {
+      const params = this.$refs['crud'] ? this.$refs['crud'].getSearcFormData() : {}
+      if (this.$utils.isNotEmpty(this.procDefIdSelect)) {
+        params['Q^temp.proc_def_key_^S'] = this.procDefIdSelect
+      }
+      if (this.$utils.isNotEmpty(id)) {
+        params['Q^temp.TYPE_ID_^S'] = id
+      }
+      return ActionUtils.formatParams(
+        params,
+        this.pagination,
+        this.sorts)
+    },
+    /**
+     * 处理分页事件
+     */
+    handlePaginationChange(page) {
+      ActionUtils.setPagination(this.pagination, page)
+      this.loadData()
+    },
+    /**
+     * 处理排序
+     */
+    handleSortChange(sort) {
+      ActionUtils.setSorts(this.sorts, sort)
+      this.loadData()
+    },
+    search() {
+      this.loadData()
+    },
+    /**
+     * 重置查询条件
+     */
+    reset() {
+      this.$refs['crud'].handleReset()
+    },
+    /**
+     * 点击表格
+     */
+    handleLinkClick(data, columns) {
+      this.taskId = data.taskId || ''
+      this.dialogFormVisible = true
+    },
+    /**
+     * 处理按钮事件
+     */
+    handleAction(command, position, selection, data) {
+      switch (command) {
+        case 'search':// 查询
+          ActionUtils.setFirstPagination(this.pagination)
+          this.search()
+          break
+        case 'stop': // 终止
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleBatchApprove(ids, 'stop')
+            this.title = '批量终止流程'
+          }).catch(() => { })
+          break
+        case 'agree': // 同意
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleBatchApprove(ids, 'agree')
+            this.title = '批量同意审批'
+          }).catch(() => { })
+          break
+        case 'suspend': // 挂起
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleSuspend(ids)
+          }).catch(() => { })
+          break
+        case 'recover': // 恢复
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleRecover(ids)
+          }).catch(() => { })
+          break
+        case 'delegate': // 转办
+          ActionUtils.selectedRecord(selection).then((id) => {
+            this.title = '任务转办'
+            this.handleDelegate(id)
+          }).catch(() => { })
+          break
+        default:
+          break
+      }
+    },
+    /**
+     * 处理批量审批
+     */
+    handleBatchApprove(id = '', action = 'agree') {
+      this.taskId = id
+      this.action = action
+      this.approveDialogVisible = true
+    },
+    /**
+     * 批量挂起任务
+     */
+    handleSuspend(ids) {
+      this.$confirm('确认批量挂起流程任务？', '信息').then(() => {
+        batchSuspendProcess({ taskIds: ids }).then(() => {
+          ActionUtils.successMessage('挂起流程任务成功')
+          this.search()
+        }).catch(err => {
+          console.error(err)
+        })
+      })
+    },
+    /**
+     * 批量挂起任务
+     */
+    handleRecover(ids) {
+      this.$confirm('确认批量恢复流程任务？', '信息').then(() => {
+        batchRecoverProcess({ taskIds: ids }).then(() => {
+          ActionUtils.successMessage('恢复流程任务成功')
+          this.search()
+        }).catch(err => {
+          console.error(err)
+        })
+      })
+    },
+    handleDelegate(id) {
+      this.taskId = id
+      this.delegateVisible = true
+    }
+  }
+}
+</script>
+<style lang="scss">
+.pendingManage-module{
+  .cell{
+    overflow:initial !important;
+  }
+  .el-badge{
+    margin:10px 0 0 10px;
+  }
+  .el-badge__content.is-fixed{
+    top: 0;
+    left: -40px;
+    right: auto;
+  }
+}
+</style>

src/views/platform/office/supervisorNotice/detail/org-principal.vue

@@ -0,0 +1,317 @@
+<template>
+  <div :style="{height:height+'px'}" class="pendingManage-module">
+    <ibps-crud
+      ref="crud"
+      :style="{ marginLeft: width+'px' }"
+      :height="height"
+      :data="listData"
+      :toolbars="listConfig.toolbars"
+      :search-form="listConfig.searchForm"
+      :pk-key="pkKey"
+      :columns="listConfig.columns"
+      :pagination="pagination"
+      :loading="loading"
+      :index-row="false"
+      @action-event="handleAction"
+      @sort-change="handleSortChange"
+      @pagination-change="handlePaginationChange"
+      :contorlLength = "true"
+    >
+      <template slot="procDefIdSelect">
+        <bpm-definition-selector
+          v-model="procDefIdSelect"
+          style="width:200px;display:block;"
+          value-key="defKey"
+          is-super
+          :multiple="false"
+          @input="getProcDefId"
+          @callback="data => formId= data.id"
+        />
+      </template>
+      <template slot="subject" slot-scope="scope">
+        <el-badge v-if="scope.row.remindTimes>0" :value="scope.row.remindTimes" class="item">
+          <el-link type="primary" :underline="false" @click="handleLinkClick(scope.row)">
+            {{ scope.row.subject }}
+          </el-link>
+        </el-badge>
+        <el-link v-else type="primary" :underline="false" @click="handleLinkClick(scope.row)">
+          {{ scope.row.subject }}
+        </el-link>
+      </template>
+    </ibps-crud>
+    <bpmn-formrender
+      :visible="dialogFormVisible"
+      :task-id="taskId"
+      @callback="search"
+      @close="visible => dialogFormVisible = visible"
+    />
+    <!-- 转办 -->
+    <delegate
+      :task-id="taskId"
+      :title="title"
+      :visible="delegateVisible"
+      @callback="search"
+      @close="visible => delegateVisible = visible"
+    />
+    <!-- 批量审批 -->
+    <approve-dialog
+      :visible="approveDialogVisible"
+      :title="title"
+      :task-id="taskId"
+      :action="action"
+      @callback="search"
+      @close="visible => approveDialogVisible = visible"
+    />
+  </div>
+</template>
+<script>
+import { pending4OrgManager } from '@/api/platform/office/bpmReceived'
+import { batchSuspendProcess, batchRecoverProcess } from '@/api/platform/bpmn/bpmTask'
+import ActionUtils from '@/utils/action'
+import BpmDefinitionSelector from '@/business/platform/bpmn/definition/selector'
+import BpmnFormrender from '@/business/platform/bpmn/form/dialog'
+import Delegate from '@/business/platform/bpmn/task-change/edit'
+import ApproveDialog from '@/business/platform/bpmn/form-ext/approve'
+
+export default {
+  components: {
+    BpmDefinitionSelector,
+    Delegate,
+    ApproveDialog,
+    BpmnFormrender
+  },
+  props: {
+    id: String,
+    height: Number
+  },
+  data() {
+    return {
+      width: 200,
+      // height: document.clientHeight,
+      dialogFormVisible: false, // 弹窗
+      approveDialogVisible: false, // 批量审批
+      delegateVisible: false,
+      action: '',
+      taskId: '', // 编辑dialog需要使用
+      title: '',
+      pkKey: 'id', // 主键  如果主键不是pk需要传主键
+      typeId: '',
+      loading: false,
+      listData: [],
+      listConfig: {
+        // 工具栏
+        toolbars: [
+          { key: 'search' },
+          {
+            key: 'agree',
+            label: '同意',
+            icon: 'ibps-icon-check-square-o'
+          },
+          {
+            key: 'stop',
+            label: '终止',
+            icon: 'ibps-icon-ioxhost'
+          },
+          {
+            key: 'suspend',
+            label: '挂起',
+            icon: 'ibps-icon-ioxhost '
+          },
+          {
+            key: 'recover',
+            label: '恢复',
+            icon: 'ibps-icon-ioxhost '
+          }
+        ],
+        // 查询条件
+        searchForm: {
+          forms: [
+            { prop: 'Q^subject_^SL', name: 'Q^temp.subject_^SL', label: '请求标题', link: 'dialog', labelWidth: 80, itemWidth: 200 },
+            // { prop: 'Q^creatorId^S',  label: '创建人', labelWidth: 80, itemWidth: 200, fieldType: 'slot', slotName: 'searchFormCreator' },
+            { prop: 'Q^proc_def_key_^S', name: 'Q^temp.proc_def_key_^S', label: '流程名称', fieldType: 'slot', slotName: 'procDefIdSelect', labelWidth: 80, itemWidth: 200 },
+            {
+              prop: ['Q^create_time_^DL', 'Q^create_time_^DG'],
+              name: ['Q^temp.create_time_^DL', 'Q^temp.create_time_^DG'],
+              label: '创建时间',
+              fieldType: 'daterange',
+              labelWidth: 80
+            }
+          ]
+        },
+        // 表格字段配置
+        columns: [
+          { prop: 'subject', label: '请求标题', slotName: 'subject' },
+          { prop: 'procDefName', label: '流程名称', width: 120 },
+          { prop: 'name', label: '当前节点', width: 120 },
+          { prop: 'createTime', label: '创建时间', width: 140 },
+          { prop: 'ownerName', label: '所属人', width: 150 }
+        ]
+      },
+      pagination: {},
+      sorts: {},
+      procDefIdSelect: ''
+
+    }
+  },
+  // created() {
+  //   this.loadData()
+  // },
+  methods: {
+    getProcDefId(data) {
+      this.procDefIdSelect = data
+    },
+    /**
+     * 加载数据
+     */
+    loadData(id) {
+      this.loading = true
+      pending4OrgManager(this.getFormatParams(id)).then(response => {
+        ActionUtils.handleListData(this, response.data)
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    /**
+     * 获取格式化参数
+     */
+    getFormatParams(id) {
+      const params = this.$refs['crud'] ? this.$refs['crud'].getSearcFormData() : {}
+      if (this.$utils.isNotEmpty(this.procDefIdSelect)) {
+        params['Q^temp.proc_def_key_^S'] = this.procDefIdSelect
+      }
+      if (this.$utils.isNotEmpty(id)) {
+        params['Q^temp.TYPE_ID_^S'] = id
+      }
+      return ActionUtils.formatParams(
+        params,
+        this.pagination,
+        this.sorts)
+    },
+    /**
+     * 处理分页事件
+     */
+    handlePaginationChange(page) {
+      ActionUtils.setPagination(this.pagination, page)
+      this.loadData()
+    },
+    /**
+     * 处理排序
+     */
+    handleSortChange(sort) {
+      ActionUtils.setSorts(this.sorts, sort)
+      this.loadData()
+    },
+    search() {
+      this.loadData()
+    },
+    /**
+     * 重置查询条件
+     */
+    reset() {
+      this.$refs['crud'].handleReset()
+    },
+    /**
+     * 点击表格
+     */
+    handleLinkClick(data, columns) {
+      this.taskId = data.taskId || ''
+      this.dialogFormVisible = true
+    },
+    /**
+     * 处理按钮事件
+     */
+    handleAction(command, position, selection, data) {
+      switch (command) {
+        case 'search':// 查询
+          ActionUtils.setFirstPagination(this.pagination)
+          this.search()
+          break
+        case 'stop': // 终止
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleBatchApprove(ids, 'stop')
+            this.title = '批量终止流程'
+          }).catch(() => { })
+          break
+        case 'agree': // 同意
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleBatchApprove(ids, 'agree')
+            this.title = '批量同意审批'
+          }).catch(() => { })
+          break
+        case 'suspend': // 挂起
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleSuspend(ids)
+          }).catch(() => { })
+          break
+        case 'recover': // 恢复
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleRecover(ids)
+          }).catch(() => { })
+          break
+        case 'delegate': // 转办
+          ActionUtils.selectedRecord(selection).then((id) => {
+            this.title = '任务转办'
+            this.handleDelegate(id)
+          }).catch(() => { })
+          break
+        default:
+          break
+      }
+    },
+    /**
+     * 处理批量审批
+     */
+    handleBatchApprove(id = '', action = 'agree') {
+      this.taskId = id
+      this.action = action
+      this.approveDialogVisible = true
+    },
+    /**
+     * 批量挂起任务
+     */
+    handleSuspend(ids) {
+      this.$confirm('确认批量挂起流程任务？', '信息').then(() => {
+        batchSuspendProcess({ taskIds: ids }).then(() => {
+          ActionUtils.successMessage('挂起流程任务成功')
+          this.search()
+        }).catch(err => {
+          console.error(err)
+        })
+      })
+    },
+    /**
+     * 批量挂起任务
+     */
+    handleRecover(ids) {
+      this.$confirm('确认批量恢复流程任务？', '信息').then(() => {
+        batchRecoverProcess({ taskIds: ids }).then(() => {
+          ActionUtils.successMessage('恢复流程任务成功')
+          this.search()
+        }).catch(err => {
+          console.error(err)
+        })
+      })
+    },
+    handleDelegate(id) {
+      this.taskId = id
+      this.delegateVisible = true
+    }
+  }
+}
+</script>
+<style lang="scss">
+.pendingManage-module{
+  .cell{
+    overflow:initial !important;
+  }
+  .el-badge{
+    margin:10px 0 0 10px;
+  }
+  .el-badge__content.is-fixed{
+    top: 0;
+    left: -40px;
+    right: auto;
+  }
+}
+</style>

src/views/platform/office/supervisorNotice/detail/post-belong.vue

@@ -0,0 +1,318 @@
+<template>
+  <div :style="{height:height+'px'}" class="pendingManage-module">
+    <ibps-crud
+      ref="crud"
+      :style="{ marginLeft: width+'px' }"
+      :height="height"
+      :data="listData"
+      :toolbars="listConfig.toolbars"
+      :search-form="listConfig.searchForm"
+      :pk-key="pkKey"
+      :columns="listConfig.columns"
+      :pagination="pagination"
+      :loading="loading"
+      :index-row="false"
+      @action-event="handleAction"
+      @sort-change="handleSortChange"
+      @column-link-click="handleLinkClick"
+      @pagination-change="handlePaginationChange"
+      :contorlLength = "true"
+    >
+      <template slot="procDefIdSelect">
+        <bpm-definition-selector
+          v-model="procDefIdSelect"
+          style="width:200px;display:block;"
+          value-key="defKey"
+          is-super
+          :multiple="false"
+          @input="getProcDefId"
+          @callback="data => formId= data.id"
+        />
+      </template>
+      <template slot="subject" slot-scope="scope">
+        <el-badge v-if="scope.row.remindTimes>0" :value="scope.row.remindTimes" class="item">
+          <el-link type="primary" :underline="false" @click="handleLinkClick(scope.row)">
+            {{ scope.row.subject }}
+          </el-link>
+        </el-badge>
+        <el-link v-else type="primary" :underline="false" @click="handleLinkClick(scope.row)">
+          {{ scope.row.subject }}
+        </el-link>
+      </template>
+    </ibps-crud>
+    <bpmn-formrender
+      :visible="dialogFormVisible"
+      :task-id="taskId"
+      @callback="search"
+      @close="visible => dialogFormVisible = visible"
+    />
+    <!-- 转办 -->
+    <delegate
+      :task-id="taskId"
+      :title="title"
+      :visible="delegateVisible"
+      @callback="search"
+      @close="visible => delegateVisible = visible"
+    />
+    <!-- 批量审批 -->
+    <approve-dialog
+      :visible="approveDialogVisible"
+      :title="title"
+      :task-id="taskId"
+      :action="action"
+      @callback="search"
+      @close="visible => approveDialogVisible = visible"
+    />
+  </div>
+</template>
+<script>
+import { pending4Position } from '@/api/platform/office/bpmReceived'
+import { batchSuspendProcess, batchRecoverProcess } from '@/api/platform/bpmn/bpmTask'
+import ActionUtils from '@/utils/action'
+import BpmDefinitionSelector from '@/business/platform/bpmn/definition/selector'
+import BpmnFormrender from '@/business/platform/bpmn/form/dialog'
+import Delegate from '@/business/platform/bpmn/task-change/edit'
+import ApproveDialog from '@/business/platform/bpmn/form-ext/approve'
+
+export default {
+  components: {
+    BpmDefinitionSelector,
+    Delegate,
+    ApproveDialog,
+    BpmnFormrender
+  },
+  props: {
+    id: String,
+    height: Number
+  },
+  data() {
+    return {
+      width: 200,
+      // height: document.clientHeight,
+      dialogFormVisible: false, // 弹窗
+      approveDialogVisible: false, // 批量审批
+      delegateVisible: false,
+      action: '',
+      taskId: '', // 编辑dialog需要使用
+      title: '',
+      pkKey: 'id', // 主键  如果主键不是pk需要传主键
+      typeId: '',
+      loading: false,
+      listData: [],
+      listConfig: {
+        // 工具栏
+        toolbars: [
+          { key: 'search' },
+          {
+            key: 'agree',
+            label: '同意',
+            icon: 'ibps-icon-check-square-o'
+          },
+          {
+            key: 'stop',
+            label: '终止',
+            icon: 'ibps-icon-ioxhost'
+          },
+          {
+            key: 'suspend',
+            label: '挂起',
+            icon: 'ibps-icon-ioxhost '
+          },
+          {
+            key: 'recover',
+            label: '恢复',
+            icon: 'ibps-icon-ioxhost '
+          }
+        ],
+        // 查询条件
+        searchForm: {
+          forms: [
+            { prop: 'Q^subject_^SL', name: 'Q^temp.subject_^SL', label: '请求标题', link: 'dialog', labelWidth: 80, itemWidth: 200 },
+            // { prop: 'Q^creatorId^S',  label: '创建人', labelWidth: 80, itemWidth: 200, fieldType: 'slot', slotName: 'searchFormCreator' },
+            { prop: 'Q^proc_def_key_^S', name: 'Q^temp.proc_def_key_^S', label: '流程名称', fieldType: 'slot', slotName: 'procDefIdSelect', labelWidth: 80, itemWidth: 200 },
+            {
+              prop: ['Q^create_time_^DL', 'Q^create_time_^DG'],
+              name: ['Q^temp.create_time_^DL', 'Q^temp.create_time_^DG'],
+              label: '创建时间',
+              fieldType: 'daterange',
+              labelWidth: 80
+            }
+          ]
+        },
+        // 表格字段配置
+        columns: [
+          { prop: 'subject', label: '请求标题', slotName: 'subject' },
+          { prop: 'procDefName', label: '流程名称', width: 120 },
+          { prop: 'name', label: '当前节点', width: 120 },
+          { prop: 'createTime', label: '创建时间', width: 140 },
+          { prop: 'ownerName', label: '所属人', width: 150 }
+        ]
+      },
+      pagination: {},
+      sorts: {},
+      procDefIdSelect: ''
+
+    }
+  },
+  // created() {
+  //   this.loadData()
+  // },
+  methods: {
+    getProcDefId(data) {
+      this.procDefIdSelect = data
+    },
+    /**
+     * 加载数据
+     */
+    loadData(id) {
+      this.loading = true
+      pending4Position(this.getFormatParams(id)).then(response => {
+        ActionUtils.handleListData(this, response.data)
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    /**
+     * 获取格式化参数
+     */
+    getFormatParams(id) {
+      const params = this.$refs['crud'] ? this.$refs['crud'].getSearcFormData() : {}
+      if (this.$utils.isNotEmpty(this.procDefIdSelect)) {
+        params['Q^temp.proc_def_key_^S'] = this.procDefIdSelect
+      }
+      if (this.$utils.isNotEmpty(id)) {
+        params['Q^temp.TYPE_ID_^S'] = id
+      }
+      return ActionUtils.formatParams(
+        params,
+        this.pagination,
+        this.sorts)
+    },
+    /**
+     * 处理分页事件
+     */
+    handlePaginationChange(page) {
+      ActionUtils.setPagination(this.pagination, page)
+      this.loadData()
+    },
+    /**
+     * 处理排序
+     */
+    handleSortChange(sort) {
+      ActionUtils.setSorts(this.sorts, sort)
+      this.loadData()
+    },
+    search() {
+      this.loadData()
+    },
+    /**
+     * 重置查询条件
+     */
+    reset() {
+      this.$refs['crud'].handleReset()
+    },
+    /**
+     * 点击表格
+     */
+    handleLinkClick(data, columns) {
+      this.taskId = data.taskId || ''
+      this.dialogFormVisible = true
+    },
+    /**
+     * 处理按钮事件
+     */
+    handleAction(command, position, selection, data) {
+      switch (command) {
+        case 'search':// 查询
+          ActionUtils.setFirstPagination(this.pagination)
+          this.search()
+          break
+        case 'stop': // 终止
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleBatchApprove(ids, 'stop')
+            this.title = '批量终止流程'
+          }).catch(() => { })
+          break
+        case 'agree': // 同意
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleBatchApprove(ids, 'agree')
+            this.title = '批量同意审批'
+          }).catch(() => { })
+          break
+        case 'suspend': // 挂起
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleSuspend(ids)
+          }).catch(() => { })
+          break
+        case 'recover': // 恢复
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleRecover(ids)
+          }).catch(() => { })
+          break
+        case 'delegate': // 转办
+          ActionUtils.selectedRecord(selection).then((id) => {
+            this.title = '任务转办'
+            this.handleDelegate(id)
+          }).catch(() => { })
+          break
+        default:
+          break
+      }
+    },
+    /**
+     * 处理批量审批
+     */
+    handleBatchApprove(id = '', action = 'agree') {
+      this.taskId = id
+      this.action = action
+      this.approveDialogVisible = true
+    },
+    /**
+     * 批量挂起任务
+     */
+    handleSuspend(ids) {
+      this.$confirm('确认批量挂起流程任务？', '信息').then(() => {
+        batchSuspendProcess({ taskIds: ids }).then(() => {
+          ActionUtils.successMessage('挂起流程任务成功')
+          this.search()
+        }).catch(err => {
+          console.error(err)
+        })
+      })
+    },
+    /**
+     * 批量挂起任务
+     */
+    handleRecover(ids) {
+      this.$confirm('确认批量恢复流程任务？', '信息').then(() => {
+        batchRecoverProcess({ taskIds: ids }).then(() => {
+          ActionUtils.successMessage('恢复流程任务成功')
+          this.search()
+        }).catch(err => {
+          console.error(err)
+        })
+      })
+    },
+    handleDelegate(id) {
+      this.taskId = id
+      this.delegateVisible = true
+    }
+  }
+}
+</script>
+<style lang="scss">
+.pendingManage-module{
+  .cell{
+    overflow:initial !important;
+  }
+  .el-badge{
+    margin:10px 0 0 10px;
+  }
+  .el-badge__content.is-fixed{
+    top: 0;
+    left: -40px;
+    right: auto;
+  }
+}
+</style>

src/views/platform/office/supervisorNotice/detail/role-belong.vue

@@ -0,0 +1,318 @@
+<template>
+  <div :style="{height:height+'px'}" class="pendingManage-module">
+    <ibps-crud
+      ref="crud"
+      :style="{ marginLeft: width+'px' }"
+      :height="height"
+      :data="listData"
+      :toolbars="listConfig.toolbars"
+      :search-form="listConfig.searchForm"
+      :pk-key="pkKey"
+      :columns="listConfig.columns"
+      :pagination="pagination"
+      :loading="loading"
+      :index-row="false"
+      @action-event="handleAction"
+      @sort-change="handleSortChange"
+      @column-link-click="handleLinkClick"
+      @pagination-change="handlePaginationChange"
+      :contorlLength = "true"
+    >
+      <template slot="procDefIdSelect">
+        <bpm-definition-selector
+          v-model="procDefIdSelect"
+          style="width:200px;display:block;"
+          value-key="defKey"
+          is-super
+          :multiple="false"
+          @input="getProcDefId"
+          @callback="data => formId= data.id"
+        />
+      </template>
+      <template slot="subject" slot-scope="scope">
+        <el-badge v-if="scope.row.remindTimes>0" :value="scope.row.remindTimes" class="item">
+          <el-link type="primary" :underline="false" @click="handleLinkClick(scope.row)">
+            {{ scope.row.subject }}
+          </el-link>
+        </el-badge>
+        <el-link v-else type="primary" :underline="false" @click="handleLinkClick(scope.row)">
+          {{ scope.row.subject }}
+        </el-link>
+      </template>
+    </ibps-crud>
+    <bpmn-formrender
+      :visible="dialogFormVisible"
+      :task-id="taskId"
+      @callback="search"
+      @close="visible => dialogFormVisible = visible"
+    />
+    <!-- 转办 -->
+    <delegate
+      :task-id="taskId"
+      :title="title"
+      :visible="delegateVisible"
+      @callback="search"
+      @close="visible => delegateVisible = visible"
+    />
+    <!-- 批量审批 -->
+    <approve-dialog
+      :visible="approveDialogVisible"
+      :title="title"
+      :task-id="taskId"
+      :action="action"
+      @callback="search"
+      @close="visible => approveDialogVisible = visible"
+    />
+  </div>
+</template>
+<script>
+import { pending4Role } from '@/api/platform/office/bpmReceived'
+import { batchSuspendProcess, batchRecoverProcess } from '@/api/platform/bpmn/bpmTask'
+import ActionUtils from '@/utils/action'
+import BpmDefinitionSelector from '@/business/platform/bpmn/definition/selector'
+import BpmnFormrender from '@/business/platform/bpmn/form/dialog'
+import Delegate from '@/business/platform/bpmn/task-change/edit'
+import ApproveDialog from '@/business/platform/bpmn/form-ext/approve'
+
+export default {
+  components: {
+    BpmDefinitionSelector,
+    Delegate,
+    ApproveDialog,
+    BpmnFormrender
+  },
+  props: {
+    id: String,
+    height: Number
+  },
+  data() {
+    return {
+      width: 200,
+      // height: document.clientHeight,
+      dialogFormVisible: false, // 弹窗
+      approveDialogVisible: false, // 批量审批
+      delegateVisible: false,
+      action: '',
+      taskId: '', // 编辑dialog需要使用
+      title: '',
+      pkKey: 'id', // 主键  如果主键不是pk需要传主键
+      typeId: '',
+      loading: false,
+      listData: [],
+      listConfig: {
+        // 工具栏
+        toolbars: [
+          { key: 'search' },
+          {
+            key: 'agree',
+            label: '同意',
+            icon: 'ibps-icon-check-square-o'
+          },
+          {
+            key: 'stop',
+            label: '终止',
+            icon: 'ibps-icon-ioxhost'
+          },
+          {
+            key: 'suspend',
+            label: '挂起',
+            icon: 'ibps-icon-ioxhost '
+          },
+          {
+            key: 'recover',
+            label: '恢复',
+            icon: 'ibps-icon-ioxhost '
+          }
+        ],
+        // 查询条件
+        searchForm: {
+          forms: [
+            { prop: 'Q^subject_^SL', name: 'Q^temp.subject_^SL', label: '请求标题', link: 'dialog', labelWidth: 80, itemWidth: 200 },
+            // { prop: 'Q^creatorId^S',  label: '创建人', labelWidth: 80, itemWidth: 200, fieldType: 'slot', slotName: 'searchFormCreator' },
+            { prop: 'Q^proc_def_key_^S', name: 'Q^temp.proc_def_key_^S', label: '流程名称', fieldType: 'slot', slotName: 'procDefIdSelect', labelWidth: 80, itemWidth: 200 },
+            {
+              prop: ['Q^create_time_^DL', 'Q^create_time_^DG'],
+              name: ['Q^temp.create_time_^DL', 'Q^temp.create_time_^DG'],
+              label: '创建时间',
+              fieldType: 'daterange',
+              labelWidth: 80
+            }
+          ]
+        },
+        // 表格字段配置
+        columns: [
+          { prop: 'subject', label: '请求标题', slotName: 'subject' },
+          { prop: 'procDefName', label: '流程名称', width: 120 },
+          { prop: 'name', label: '当前节点', width: 120 },
+          { prop: 'createTime', label: '创建时间', width: 140 },
+          { prop: 'ownerName', label: '所属人', width: 150 }
+        ]
+      },
+      pagination: {},
+      sorts: {},
+      procDefIdSelect: ''
+
+    }
+  },
+  // created() {
+  //   this.loadData()
+  // },
+  methods: {
+    getProcDefId(data) {
+      this.procDefIdSelect = data
+    },
+    /**
+     * 加载数据
+     */
+    loadData(id) {
+      this.loading = true
+      pending4Role(this.getFormatParams(id)).then(response => {
+        ActionUtils.handleListData(this, response.data)
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    /**
+     * 获取格式化参数
+     */
+    getFormatParams(id) {
+      const params = this.$refs['crud'] ? this.$refs['crud'].getSearcFormData() : {}
+      if (this.$utils.isNotEmpty(this.procDefIdSelect)) {
+        params['Q^temp.proc_def_key_^S'] = this.procDefIdSelect
+      }
+      if (this.$utils.isNotEmpty(id)) {
+        params['Q^temp.TYPE_ID_^S'] = id
+      }
+      return ActionUtils.formatParams(
+        params,
+        this.pagination,
+        this.sorts)
+    },
+    /**
+     * 处理分页事件
+     */
+    handlePaginationChange(page) {
+      ActionUtils.setPagination(this.pagination, page)
+      this.loadData()
+    },
+    /**
+     * 处理排序
+     */
+    handleSortChange(sort) {
+      ActionUtils.setSorts(this.sorts, sort)
+      this.loadData()
+    },
+    search() {
+      this.loadData()
+    },
+    /**
+     * 重置查询条件
+     */
+    reset() {
+      this.$refs['crud'].handleReset()
+    },
+    /**
+     * 点击表格
+     */
+    handleLinkClick(data, columns) {
+      this.taskId = data.taskId || ''
+      this.dialogFormVisible = true
+    },
+    /**
+     * 处理按钮事件
+     */
+    handleAction(command, position, selection, data) {
+      switch (command) {
+        case 'search':// 查询
+          ActionUtils.setFirstPagination(this.pagination)
+          this.search()
+          break
+        case 'stop': // 终止
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleBatchApprove(ids, 'stop')
+            this.title = '批量终止流程'
+          }).catch(() => { })
+          break
+        case 'agree': // 同意
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleBatchApprove(ids, 'agree')
+            this.title = '批量同意审批'
+          }).catch(() => { })
+          break
+        case 'suspend': // 挂起
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleSuspend(ids)
+          }).catch(() => { })
+          break
+        case 'recover': // 恢复
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleRecover(ids)
+          }).catch(() => { })
+          break
+        case 'delegate': // 转办
+          ActionUtils.selectedRecord(selection).then((id) => {
+            this.title = '任务转办'
+            this.handleDelegate(id)
+          }).catch(() => { })
+          break
+        default:
+          break
+      }
+    },
+    /**
+     * 处理批量审批
+     */
+    handleBatchApprove(id = '', action = 'agree') {
+      this.taskId = id
+      this.action = action
+      this.approveDialogVisible = true
+    },
+    /**
+     * 批量挂起任务
+     */
+    handleSuspend(ids) {
+      this.$confirm('确认批量挂起流程任务？', '信息').then(() => {
+        batchSuspendProcess({ taskIds: ids }).then(() => {
+          ActionUtils.successMessage('挂起流程任务成功')
+          this.search()
+        }).catch(err => {
+          console.error(err)
+        })
+      })
+    },
+    /**
+     * 批量挂起任务
+     */
+    handleRecover(ids) {
+      this.$confirm('确认批量恢复流程任务？', '信息').then(() => {
+        batchRecoverProcess({ taskIds: ids }).then(() => {
+          ActionUtils.successMessage('恢复流程任务成功')
+          this.search()
+        }).catch(err => {
+          console.error(err)
+        })
+      })
+    },
+    handleDelegate(id) {
+      this.taskId = id
+      this.delegateVisible = true
+    }
+  }
+}
+</script>
+<style lang="scss">
+.pendingManage-module{
+  .cell{
+    overflow:initial !important;
+  }
+  .el-badge{
+    margin:10px 0 0 10px;
+  }
+  .el-badge__content.is-fixed{
+    top: 0;
+    left: -40px;
+    right: auto;
+  }
+}
+</style>

src/views/platform/office/supervisorNotice/detail/user-type.vue

@@ -0,0 +1,467 @@
+<template>
+  <div :style="{height:(height-50)+'px'}" >
+    <ibps-crud
+      ref="crud"
+      :height="height"
+      :data="listData"
+      :toolbars="listConfig.toolbars"
+      :search-form="listConfig.searchForm"
+      :pk-key="pkKey"
+      :columns="listConfig.columns"
+      :pagination="pagination"
+      :loading="loading"
+      :displayField="title"
+      :index-row="false"
+      @action-event="handleAction"
+      @sort-change="handleSortChange"
+      @pagination-change="handlePaginationChange"
+       @column-link-click="handleLinkClick"
+	    :contorlLength = "true"
+    >
+      <template slot="procDefIdSelect">
+        <bpm-definition-selector
+          v-model="procDefIdSelect"
+          style="width:200px;display:block;"
+          value-key="defKey"
+          is-super
+          :multiple="false"
+          @input="getProcDefId"
+          @callback="data => formId= data.id"
+        />
+      </template>
+    <!--  <template slot="subject" slot-scope="scope">
+        <el-badge v-if="scope.row.remindTimes>0" :value="scope.row.remindTimes" class="item">
+          <el-link type="primary" :underline="false" @click="handleLinkClick(scope.row)">
+            {{ scope.row.subject }}
+          </el-link>
+        </el-badge>
+        <el-link v-else type="primary" :underline="false" @click="handleLinkClick(scope.row)">
+          {{ scope.row.subject }}
+        </el-link>
+      </template> -->
+    </ibps-crud>
+    <bpmn-formrender
+      :visible="dialogFormVisible"
+      :task-id="taskId"
+      @callback="search"
+      :title="flowName"
+      @close="visible => dialogFormVisible = visible"
+    />
+    <delegate
+      :task-id="taskId"
+      :title="title"
+      :visible="delegateVisible"
+      @callback="search"
+      @close="visible => delegateVisible = visible"
+    />
+    <approve-dialog
+      :visible="approveDialogVisible"
+      :title="title"
+      :task-id="taskId"
+      :action="action"
+      @callback="search"
+      @close="visible => approveDialogVisible = visible"
+    />
+  </div>
+</template>
+<script>
+import { pending } from '@/api/platform/office/bpmReceived'
+import { pending4User } from '@/api/platform/office/bpmReceived'
+import { batchSuspendProcess, batchRecoverProcess } from '@/api/platform/bpmn/bpmTask'
+import ActionUtils from '@/utils/action'
+import BpmDefinitionSelector from '@/business/platform/bpmn/definition/selector'
+import BpmnFormrender from '@/business/platform/bpmn/form/dialog'
+import Delegate from '@/business/platform/bpmn/task-change/edit'
+import ApproveDialog from '@/business/platform/bpmn/form-ext/approve'
+import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
+
+export default {
+  components: {
+    BpmDefinitionSelector,
+    Delegate,
+    ApproveDialog,
+    BpmnFormrender,
+  },
+  props: {
+    id: String,
+    height:Number,
+  },
+  data() {
+    return {
+      width: 220,
+      title: '主管催办列表',
+      createText: '创建表单',
+      query: '',
+      copyDialogFormVisible: false,
+      rightsDialogFormVisible: false,
+      formbuilderDialogVisible: false,
+      formrenderDialogVisible: false,
+      importFormVisible: false,
+      formPrintDialogVisible: false,
+      defId: '', // 编辑dialog需要使用
+      statusOptions: [],
+      editId: '',
+      formKey: '',
+      searchField: '',
+      searchName: 'Q^subject_^SL',
+      dialogFormVisible: false, // 弹窗
+      flowName:'',
+      taskId: '', // 编辑dialog需要使用
+      stautusOptions: [],
+      pkKey: 'id', // 主键  如果主键不是pk需要传主键
+      typeId: '',
+      loading: false,
+      listData: [],
+      approveDialogVisible: false, // 批量审批
+      delegateVisible: false,
+      action: '',
+      listConfig: {
+        // 工具栏
+        toolbars: [
+          { key: 'search' },
+          {
+            key: 'duanxinTZ',
+            label: '发送短信通知',
+            icon: 'ibps-icon-check-square-o'
+          },
+          {
+            key: 'pingtaiTZ',
+            label: '发送平台通知',
+            color: '#dcdfe6',
+            icon: 'ibps-icon-ioxhost'
+          }
+        ],
+        // 查询条件
+        searchForm: {
+          forms: [
+            { prop: 'Q^subject_^SL', name: 'Q^temp.subject_^SL', label: '事务名称', link: 'dialog', labelWidth: 80, itemWidth: 150 },
+            {
+              prop: ['Q^create_time_^DL', 'Q^create_time_^DG'],
+              name: ['Q^temp.create_time_^DL', 'Q^temp.create_time_^DG'],
+              label: '创建时间',
+              fieldType: 'daterange',
+              labelWidth: 80
+            }
+          ]
+        },
+        // 表格字段配置
+        columns: [
+       //   { prop: 'subject', label: '事务名称', slotName: 'subject',width:400 },
+          { prop: 'ren_wu_ming_cheng', label: '事务名称', link: 'dialog', width:250 },
+          // { prop: 'procDefName', label: '事务类型', width: 150 },
+          { prop: 'zhuang_tai_', label: '事务状态', width: 150 },
+          { prop: 'ren_wu_kai_shi_sh', label: '创建时间', width: 140 },
+          // { prop: 'forwardBy', label: '任务提交人', width: 100 },
+          { prop: 'bian_men_', label: '发起部门', width: 100 },
+          { prop: 'chu_li_ren_', label: '处理人'},
+          { prop: 'chu_li_ren_dian_h', label: '处理电话'}
+        ]
+      },
+      pagination: {},
+      sorts: {},
+      procDefIdSelect: '',
+      groupOrgG: ['1017183192769101824','1069626796795756544'],
+      // groupOrgP: ['1017183098200129536','990914314816716800','','',''],
+    }
+  },
+  methods: {
+    getProcDefId(data) {
+      this.procDefIdSelect = data
+    },
+    /**
+     * 加载数据
+     */
+    loadData(id) {
+      this.loading = true
+      // if(groupOrgG.includes(this.$store.getters)){
+        this.getPending(id)
+      // }
+      console.log(this.$store.getters.userInfo)
+    },
+    /**
+     * 获取格式化参数
+     */
+    getFormatParams(id,index) {
+      const params = this.$refs['crud'] ? this.$refs['crud'].getSearcFormData() : {}
+      if (this.$utils.isNotEmpty(this.procDefIdSelect)) {
+        params['Q^temp.proc_def_key_^S'] = this.procDefIdSelect
+      }
+      if (this.$utils.isNotEmpty(id)) {
+        params['Q^temp.TYPE_ID_^S'] = id
+      }
+      if(index===0){
+        return ActionUtils.formatParams(
+          params,
+          this.pagination1,
+          this.sorts)
+      }else{
+        return ActionUtils.formatParams(
+          params,
+          this.pagination,
+          this.sorts)
+      }
+      
+    },
+    getPending(id){
+      pending(this.getFormatParams(id,0)).then(response => {
+        let {dataResult, pageResult} = response.data
+        if (dataResult && dataResult.length) {
+            let instList = []
+            dataResult.forEach(item => {
+                instList.push(item.bpmnInstId)
+            })
+            let sql = `select * from ibps_party_employee`
+            curdPost('sql', sql).then(res => {
+                const data = res.variables && res.variables.data
+                dataResult.forEach((item, index) => {
+                  let ownid = ''
+                  let mobliephone = ''
+                  let arrName = item.ownerName.split(',')
+                  console.log(item,index,'ddddddwww')
+                  for (let i = 0; i < arrName.length; i++) {
+                    for (let j = 0; j < data.length; j++) {
+                      if(arrName[i] == data[j].NAME_){
+                        if(ownid === ''){
+                          ownid = data[j].ID_
+                          mobliephone = data[j].MOBILE_
+                        }else if(ownid != '' && mobliephone === ''){
+                          ownid = ownid + ',' + data[j].ID_
+                          mobliephone =data[j].MOBILE_
+                        }else{
+                          ownid = ownid + ',' + data[j].ID_
+                          mobliephone = mobliephone + ',' + data[j].MOBILE_
+                        }
+                      }
+                    }
+                  }
+                  item.ownerId = ownid
+                  item.mobile = mobliephone
+                })
+                let d = []
+                
+                d = dataResult.reduce((item, next) => {  
+                    let ti = {}
+                    ti["ren_wu_ming_cheng"] = next.subject.split('(')[0] //任务名称
+                    ti["chu_li_ren_"] = next.ownerName  //处理人
+                    ti["ren_wu_kai_shi_sh"] = next.createTime //任务开始时间
+                    ti["shu_ju_id_"] = next.id  //数据主键回填状态时使用的关联字段
+                    ti["zhuang_tai_"] = "待"+next.name //状态
+                    ti["chu_li_ren_dian_h"] = next.mobile //电话
+                    ti["bian_zhi_shi_jian_"] = next.createTime
+                    ti["bian_men_"] = next.startDept
+                    item.push(ti)
+                    // hash[next.id] ? '' : hash[next.id] = true && item.push(next)
+                    return item
+                }, [])
+                // console.log(data,d,'sdsdsdsdsddssd');
+                let sql1 = `select id_,ren_wu_ming_cheng,chu_li_ren_,bu_men_,ren_wu_kai_shi_sh,zhuang_tai_,shu_ju_id_ as id,zhu_guan_,zhu_guan_dian_hua,zi_biao_id_,chu_li_ren_dian_h,type_,names_,mobile_,code_  from t_zgrwtxb ORDER BY ren_wu_kai_shi_sh DESC`
+                curdPost('sql', sql1).then(res1 => {
+                    const data1 = {dataResult:d,pageResult: null}
+                    ActionUtils.handleListData(this, data1)
+                    
+                })
+            })
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    /**
+     * 处理分页事件
+     */
+    handlePaginationChange(page) {
+      ActionUtils.setPagination(this.pagination, page)
+      this.loadData()
+    },
+    /**
+     * 处理排序
+     */
+    handleSortChange(sort) {
+      ActionUtils.setSorts(this.sorts, sort)
+      this.loadData()
+    },
+    search() {
+      this.loadData()
+    },
+    /**
+     * 重置查询条件
+     */
+    reset() {
+      this.$refs['crud'].handleReset()
+    },
+    /**
+     * 点击表格
+     */
+    handleLinkClick(data, columns) {
+      this.taskId = data.taskId || ''
+      this.flowName = data.name
+      this.dialogFormVisible = true
+    },
+    /**
+     * 处理按钮事件
+     */
+    handleAction(command, position, selection, data) {
+      switch (command) {
+        case 'search':// 查询
+          ActionUtils.setFirstPagination(this.pagination)
+          this.search()
+          break
+        case 'add':// 添加
+          this.handleEdit()
+          break
+        case 'edit':// 编辑
+          this.handleEdit(selection,data)
+          break
+        case 'stop': // 反对
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleBatchApprove(ids, 'stop')
+            this.title = '批量终止流程'
+          }).catch(() => { })
+          break
+        case 'agree': // 同意
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleBatchApprove(ids, 'agree')
+            this.title = '批量同意审批'
+          }).catch(() => { })
+          break
+        case 'suspend': // 挂起
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleSuspend(ids)
+          }).catch(() => { })
+          break
+        case 'recover': // 恢复
+          ActionUtils.selectedMultiRecord(selection).then((ids) => {
+            this.handleRecover(ids)
+          }).catch(() => { })
+          break
+        case 'delegate': // 转办
+          ActionUtils.selectedRecord(selection).then((id) => {
+            this.title = '任务转办'
+            this.handleDelegate(id)
+          }).catch(() => { })
+          break
+        case 'duanxinTZ':
+          console.log(command, position, selection, data,'duanxin')
+          if (data == null || data == '') {
+                // template.$message.warning("请先选择需要提醒的任务，再点击提醒按钮！！！")
+            } else {
+                console.log(data)
+                let list = []
+                // let dataBoo = data.some(item => item.zhuang_tai_ == '已完成')
+                // console.log(data,'qwqwqwqwqw')
+                // if (dataBoo) {
+                //     return template.$message.warning("选择项目中包含已完成项目")
+                // }
+                // let initTime = new Date(initTimeStr).getTime(); // 转时间戳
+                let changeTime = new Date().valueOf() + 3 * 24 * 60 * 60 * 1000
+                let month = new Date(changeTime).getMonth() + 1 + ''; // 改变后日期月份
+                let changeTimeStr = new Date(changeTime).getFullYear() + "-";  // 改变后日期年份
+                month = month.length == 1 ? "0" + month : month; // 改变后日期月份是否加 0
+                changeTimeStr += month + "-"; // 改变后日期年份 + 月份
+                let day = new Date(changeTime).getDate() + ""; // 改变后日期天数
+                day = day.length == 1 ? "0" + day : day; // 改变后日期天数是否加 0
+                changeTimeStr += day; // 改变后日期
+                data.forEach(item => {
+                    let obj = JSON.parse(JSON.stringify(item))
+                    obj.chu_li_ren_ = ''
+                    obj.yu_ji_wan_cheng_s = changeTimeStr
+                    list.push(obj)
+                })
+                let send = {}
+                send["list"] = list
+                let sendData = JSON.stringify(send)
+                //调用后台接口
+                curdPost('sendmessages', sendData).then(response => {
+                    if (response.state == 200) {
+                        // template.$message.success("短信已发送!")
+                        console.log('sswswswrfrfrffr')
+                    } else (
+                        // template.$message.warning("发送失败")
+                        console.log('22222')
+
+                    )
+                })
+            }
+          break
+        case 'pintaiTZ':
+          console.log(command, position, selection, data,'pingtai')
+          break
+        default:
+          break
+      }
+    },
+      /**
+     * 编辑
+     */
+    handleEdit(id,data) {
+      this.taskId = id
+      this.flowName = data.name
+      this.dialogFormVisible = true
+    },
+    /**
+     * 处理批量审批
+     */
+    handleBatchApprove(id = '', action = 'agree') {
+      this.taskId = id
+      this.action = action
+      this.approveDialogVisible = true
+    },
+    /**
+     * 批量挂起任务
+     */
+    handleSuspend(ids) {
+      this.$confirm('确认批量挂起流程任务？', '信息').then(() => {
+        batchSuspendProcess({ taskIds: ids }).then(() => {
+          ActionUtils.successMessage('挂起流程任务成功')
+          this.search()
+        }).catch(err => {
+          console.error(err)
+        })
+      })
+    },
+    /**
+     * 批量挂起任务
+     */
+    handleRecover(ids) {
+      this.$confirm('确认批量恢复流程任务？', '信息').then(() => {
+        batchRecoverProcess({ taskIds: ids }).then(() => {
+          ActionUtils.successMessage('恢复流程任务成功')
+          this.search()
+        }).catch(err => {
+          console.error(err)
+        })
+      })
+    },
+    handleDelegate(id) {
+      this.taskId = id
+      this.delegateVisible = true
+    }
+  }
+}
+</script>
+<style lang="scss">
+.pendingManage-module{
+  .cell{
+    overflow:initial !important;
+  }
+  .el-badge{
+    margin:10px 0 0 10px;
+  }
+  .el-badge__content.is-fixed{
+    top: 0;
+    left: -40px;
+    right: auto;
+  }
+}
+</style>
+<style scoped>
+.ibps-layout >>>  .container-component{
+    position: absolute;
+    top: 0px;
+    right: 0;
+    bottom: 0px;
+    left: 220px!important;}
+.ibps-card-list-container >>> .ibps-card-list--picture-card{display: block;}
+.ibps-card-list-container >>> .ibps-card-list{padding-top: 10px!important;}
+</style>

src/views/platform/office/supervisorNotice/notice.vue

@@ -0,0 +1,97 @@
+<template>
+  <ibps-layout ref="layout">
+    <div slot="west">
+      <!-- <ibps-type-tree
+        :width="width"
+        :height="height"
+        title="任务分类"
+        ref = "typeTree"
+        category-key="FLOW_TYPE"
+        @node-click="handleNodeClick"
+        @expand-collapse="handleExpandCollapse"
+      /> -->
+      <ibps-container
+        class="page padding-page"
+      >
+        <detail :id="typeId" :height="height" />
+      </ibps-container>
+    </div>
+  </ibps-layout>
+</template>
+<script>
+import TreeUtils from '@/utils/tree'
+import FixHeight from '@/mixins/height'
+
+import IbpsTypeTree from '@/business/platform/cat/type/tree'
+import Detail from './detail'
+
+export default {
+  components: {
+    Detail,
+    IbpsTypeTree
+  },
+  mixins: [FixHeight],
+  data() {
+    return {
+      typeId: '',
+      show: '',
+      rightsArr: ['join', 'delete'],
+      rowHandle: true,
+      width: 230,
+      height: document.clientHeight,
+      orgName: '',
+      loading: false,
+      orgTreeData: []
+    }
+  },
+  methods: {
+    toTree(data) {
+      return TreeUtils.transformToTreeFormat(data, {
+        idKey: 'id',
+        pIdKey: 'parentId',
+        childrenKey: 'children'
+      })
+    },
+    // 查询
+    search() {
+      this.$refs.tree.refreshNode(this.parentId)
+    },
+    // 返回右明细模块未显示
+    successCallback(rtn) {
+      if (rtn) {
+        this.typeId = ''
+        this.show = 'no'
+      }
+    },
+    // 添加 编辑
+    handleEdit(id = '') {
+      this.show = 'edit'
+      this.typeId = id
+    },
+    // 树点击
+    handleNodeClick(typeId) {
+      this.typeId = typeId
+      this.show = 'detail'
+    },
+    handleExpandCollapse(isExpand) {
+      this.width = isExpand ? 230 : 30
+    }
+  }
+}
+</script>
+<style lang="scss" >
+.padding-page{
+  .container-component{
+    margin-left:0 !important;
+  }
+}
+// .org-tree-move-node-dialog{
+//   .el-dialog__body{
+//      height:  calc(50vh - 95px) !important;
+//   }
+// }
+</style>
+<style scoped>
+.page  >>> .ibps-container-full__body{padding:0  0  10px  0!important;}
+
+</style>