todoManage.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603
  1. <style lang="less">
  2. @import '~@assets/less/common.less';
  3. </style>
  4. <template>
  5. <div class="search">
  6. <a-card>
  7. <div class="table-page-search-wrapper">
  8. <a-form layout="inline" @keyup.enter.native="handleSearch">
  9. <a-row :gutter="24">
  10. <a-col :md="6" :sm="8">
  11. <a-form-item label="任务名称" prop="name">
  12. <a-input type="text" allowClear v-model="searchForm.name" placeholder="请输入" />
  13. </a-form-item>
  14. </a-col>
  15. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  16. <a-col :md="6" :sm="12">
  17. <a-button type="primary" style="left: 10px" @click="handleSearch" icon="search">查询</a-button>
  18. <a-button
  19. type="primary"
  20. @click="handleReset"
  21. icon="reload"
  22. style="margin-left: 8px;left: 10px"
  23. >重置</a-button>
  24. </a-col>
  25. </span>
  26. </a-row>
  27. </a-form>
  28. </div>
  29. <!--<a-row class="operation">
  30. <a-button @click="passAll" icon="md-checkmark-circle-outline">批量通过</a-button>
  31. <a-button @click="backAll" icon="md-close">批量驳回</a-button>
  32. <a-button @click="getDataList" icon="md-refresh">刷新</a-button>
  33. </a-row>-->
  34. <a-row>
  35. <a-table
  36. bordered
  37. :loading="loading"
  38. rowKey="id"
  39. :dataSource="data"
  40. :pagination="ipagination"
  41. @change="handleTableChange"
  42. ref="table"
  43. >
  44. <a-table-column title="#" :width="50">
  45. <template slot-scope="t,r,i">
  46. <span>{{i+1}}</span>
  47. </template>
  48. </a-table-column>
  49. <a-table-column title="任务名称" data-index="name" :width="150" align="center">
  50. <template slot-scope="t">
  51. <span>{{t}}</span>
  52. </template>
  53. </a-table-column>
  54. <a-table-column title="所属流程" data-index="processName" :width="150" align="center">
  55. <template slot-scope="t">
  56. <span>{{t}}</span>
  57. </template>
  58. </a-table-column>
  59. <a-table-column title="委托代办人" data-index="owner" align="center" :width="150">
  60. <template slot-scope="t">
  61. <span>{{t}}</span>
  62. </template>
  63. </a-table-column>
  64. <a-table-column title="流程发起人" data-index="applyer" :width="150" align="center">
  65. <template slot-scope="t">
  66. <span>{{t}}</span>
  67. </template>
  68. </a-table-column>
  69. <a-table-column
  70. title="优先级"
  71. data-index="priority"
  72. :width="110"
  73. align="center"
  74. key="so"
  75. :sorter="(a,b)=>a.priority - b.priority"
  76. >
  77. <template slot-scope="t">
  78. <span v-if="t==0" style="color: green;">普通</span>
  79. <span v-else-if="t==1" style="color: orange;">重要</span>
  80. <span v-else-if="t==2" style="color: red;">紧急</span>
  81. <span v-else style="color: #999;">无</span>
  82. </template>
  83. </a-table-column>
  84. <a-table-column
  85. title="状态"
  86. data-index="isSuspended"
  87. :width="100"
  88. align="center"
  89. key="z"
  90. :sorter="(a,b)=>Boolean(a.isSuspended)?0:1 - Boolean(b.isSuspended)?0:1"
  91. >
  92. <template slot-scope="t">
  93. <span v-if="!Boolean(t)" style="color: green;">已激活</span>
  94. <span v-if="Boolean(t)" style="color: orange;">已挂起</span>
  95. </template>
  96. </a-table-column>
  97. <a-table-column title="创建时间" data-index="createTime" :width="200" align="center">
  98. <template slot-scope="t">
  99. <span>{{t}}</span>
  100. </template>
  101. </a-table-column>
  102. <a-table-column title="操作" data-index align="center">
  103. <template slot-scope="t,r,i">
  104. <a href="javascript:void(0);" @click="detail(r)" style="color: blue">申请详情</a>
  105. <a-divider type="vertical" />
  106. <span
  107. v-if="Boolean(r.isSuspended)"
  108. style="cursor: no-drop;color: #999999;"
  109. title="流程已被挂起,无法操作!"
  110. >
  111. 通过
  112. <a-divider type="vertical" />驳回
  113. <a-divider type="vertical" />委托
  114. <a-divider type="vertical" />
  115. </span>
  116. <span v-else>
  117. <a href="javascript:void(0);" @click="passTask(r)" style="color: green">通过</a>
  118. <a-divider type="vertical" />
  119. <a href="javascript:void(0);" @click="backTask(r)" style="color: orange">驳回</a>
  120. <a-divider type="vertical" />
  121. <a href="javascript:void(0);" @click="delegateTask(r)" style="color: #00A0E9">委托</a>
  122. <a-divider type="vertical" />
  123. </span>
  124. <a href="javascript:void(0);" @click="history(r)" style="color: #217dbb">历史</a>
  125. </template>
  126. </a-table-column>
  127. </a-table>
  128. </a-row>
  129. </a-card>
  130. <!---->
  131. <a-modal
  132. title="审批历史"
  133. v-model="modalLsVisible"
  134. :mask-closable="false"
  135. :width="'80%'"
  136. :footer="null"
  137. >
  138. <div v-if="modalLsVisible">
  139. <component :is="historicDetail" :procInstId="procInstId"></component>
  140. </div>
  141. </a-modal>
  142. <!--流程表单-->
  143. <a-modal
  144. :title="lcModa.title"
  145. v-model="lcModa.visible"
  146. :footer="null"
  147. :maskClosable="false"
  148. width="80%"
  149. >
  150. <k-form-build
  151. v-if="lcModa.visible"
  152. :defaultValue="defaultValue"
  153. :value="jsonData"
  154. ref="kfb"
  155. disabled
  156. />
  157. </a-modal>
  158. <!-- 审批操作 -->
  159. <a-modal :title="modalTaskTitle" v-model="modalTaskVisible" :mask-closable="false" :width="500">
  160. <div v-if="modalTaskVisible">
  161. <a-form ref="form" :model="form" :label-width="85" :rules="formValidate">
  162. <a-form-item label="审批意见" prop="reason">
  163. <a-input type="textarea" v-model="form.comment" :rows="4" />
  164. </a-form-item>
  165. <a-form-item label="下一审批人" prop="assignees" v-show="showAssign" :error="error">
  166. <a-select
  167. v-model="form.assignees"
  168. placeholder="请选择"
  169. allowClear
  170. mode="multiple"
  171. :loading="userLoading"
  172. >
  173. <a-select-option
  174. v-for="(item, i) in assigneeList"
  175. :key="i"
  176. :value="item.id"
  177. >{{item.username}}</a-select-option>
  178. </a-select>
  179. </a-form-item>
  180. <a-form-item label="下一审批人" v-show="isGateway">
  181. <span>分支网关处暂不支持自定义选择下一审批人,将发送给下一节点所有人</span>
  182. </a-form-item>
  183. <div v-show="form.type==1">
  184. <a-form-item label="驳回至">
  185. <a-select v-model="form.backTaskKey" :loading="backLoading" @change="changeBackTask">
  186. <a-select-option
  187. v-for="(item, i) in backList"
  188. :key="i"
  189. :value="item.key"
  190. >{{item.name}}</a-select-option>
  191. </a-select>
  192. </a-form-item>
  193. <a-form-item
  194. label="指定原节点审批人"
  195. prop="assignees"
  196. v-show="form.backTaskKey!=-1"
  197. :error="error"
  198. >
  199. <a-select
  200. v-model="form.assignees"
  201. placeholder="请选择"
  202. allowClear
  203. mode="multiple"
  204. :loading="userLoading"
  205. >
  206. <a-select-option
  207. v-for="(item, i) in assigneeList"
  208. :key="i"
  209. :value="item.id"
  210. >{{item.username}}</a-select-option>
  211. </a-select>
  212. </a-form-item>
  213. </div>
  214. <a-form-item label="选择委托人" prop="userId" :error="error" v-show="form.type==2">
  215. <JSelectUserByDep v-model="form.userId" :multi="false"></JSelectUserByDep>
  216. </a-form-item>
  217. <a-form-item label="消息通知">
  218. <a-checkbox v-model="form.sendMessage">站内消息通知</a-checkbox>
  219. <a-checkbox v-model="form.sendSms" disabled>短信通知</a-checkbox>
  220. <a-checkbox v-model="form.sendEmail" disabled>邮件通知</a-checkbox>
  221. </a-form-item>
  222. </a-form>
  223. </div>
  224. <div slot="footer">
  225. <a-button type="text" @click="modalTaskVisible=false">取消</a-button>
  226. <a-button type="primary" :loading="submitLoading" @click="handelSubmit">提交</a-button>
  227. </div>
  228. </a-modal>
  229. </div>
  230. </template>
  231. <script>
  232. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  233. import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
  234. import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
  235. export default {
  236. name: 'todo-manage',
  237. mixins: [activitiMixin, JeecgListMixin],
  238. components: { JSelectUserByDep },
  239. data() {
  240. return {
  241. jsonData: {},
  242. defaultValue: {},
  243. openSearch: true,
  244. openTip: true,
  245. loading: true, // 表单加载状态
  246. modalTaskVisible: false,
  247. userLoading: false,
  248. backLoading: false,
  249. selectCount: 0, // 多选计数
  250. selectList: [], // 多选数据
  251. assigneeList: [],
  252. backList: [
  253. {
  254. key: '-1',
  255. name: '发起人',
  256. },
  257. ],
  258. error: '',
  259. showAssign: false,
  260. searchForm: {
  261. // 搜索框对应data对象
  262. name: '',
  263. },
  264. modalTaskTitle: '',
  265. modalTitle: '', // 添加或编辑标题
  266. form: {
  267. id: '',
  268. userId: '',
  269. procInstId: '',
  270. comment: '',
  271. type: 0,
  272. assignees: [],
  273. backTaskKey: '-1',
  274. sendMessage: true,
  275. sendSms: false,
  276. sendEmail: false,
  277. },
  278. formValidate: {
  279. // 表单验证规则
  280. },
  281. submitLoading: false, // 添加或编辑提交状态
  282. data: [], // 表单数据
  283. total: 0, // 表单数据总数
  284. dictPriority: [],
  285. isGateway: false,
  286. lcModa: {
  287. title: '',
  288. disabled: false,
  289. visible: false,
  290. formComponent: null,
  291. isNew: false,
  292. },
  293. url: {
  294. todoList: '/actTask/todoList',
  295. pass: '/actTask/pass',
  296. back: '/actTask/back',
  297. backToTask: '/actTask/backToTask',
  298. delegate: '/actTask/delegate',
  299. getNextNode: '/activiti_process/getNextNode',
  300. getNode: '/activiti_process/getNode/',
  301. getBackList: '/actTask/getBackList/',
  302. passAll: '/actTask/passAll/',
  303. backAll: '/actTask/backAll/',
  304. },
  305. /*历史*/
  306. modalLsVisible: false,
  307. procInstId: '',
  308. }
  309. },
  310. mounted() {
  311. this.init()
  312. },
  313. methods: {
  314. init() {
  315. this.getDataList()
  316. },
  317. loadData() {},
  318. getDataList() {
  319. this.loading = true
  320. this.postFormAction(this.url.todoList, this.searchForm).then((res) => {
  321. this.loading = false
  322. if (res.success) {
  323. this.data = res.result || []
  324. this.total = this.data.leading
  325. }
  326. })
  327. },
  328. handleTableChange(pagination, filters, sorter) {
  329. //分页、排序、筛选变化时触发
  330. if (Object.keys(sorter).length > 0) {
  331. this.isorter.column = sorter.field
  332. this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
  333. }
  334. this.ipagination = pagination
  335. // this.loadData();
  336. },
  337. handleSearch() {
  338. this.getDataList()
  339. },
  340. handleReset() {
  341. this.searchForm = {}
  342. // 重新加载数据
  343. this.getDataList()
  344. },
  345. showSelect(e) {
  346. this.selectList = e
  347. this.selectCount = e.length
  348. },
  349. clearSelectAll() {
  350. this.$refs.table.selectAll(false)
  351. },
  352. handelSubmit() {
  353. // console.log("提交")
  354. this.submitLoading = true
  355. var formData = Object.assign({}, this.form)
  356. formData.assignees = formData.assignees.join(',')
  357. if (formData.type == 0) {
  358. // 通过
  359. if (this.showAssign && formData.assignees.length < 1) {
  360. this.$message.error('请至少选择一个审批人')
  361. this.submitLoading = false
  362. return
  363. } else {
  364. this.error = ''
  365. }
  366. this.postFormAction(this.url.pass, formData).then((res) => {
  367. this.submitLoading = false
  368. if (res.success) {
  369. this.$message.success('操作成功')
  370. this.modalTaskVisible = false
  371. this.getDataList()
  372. }
  373. })
  374. } else if (formData.type == 1) {
  375. // 驳回
  376. if (formData.backTaskKey == '-1') {
  377. // 驳回至发起人
  378. this.postFormAction(this.url.back, formData).then((res) => {
  379. this.submitLoading = false
  380. if (res.success) {
  381. this.$message.success('操作成功')
  382. this.modalTaskVisible = false
  383. this.getDataList()
  384. }
  385. })
  386. } else {
  387. // 自定义驳回
  388. if (formData.backTaskKey != '-1' && formData.assignees.length < 1) {
  389. this.$message.error('请至少选择一个审批人')
  390. this.submitLoading = false
  391. return
  392. } else {
  393. this.error = ''
  394. }
  395. this.postFormAction(this.url.backToTask, formData).then((res) => {
  396. this.submitLoading = false
  397. if (res.success) {
  398. this.$message.success('操作成功')
  399. this.modalTaskVisible = false
  400. this.getDataList()
  401. }
  402. })
  403. }
  404. } else if (formData.type == 2) {
  405. // 委托
  406. if (!formData.userId) {
  407. this.$message.error('请选择一委托人')
  408. this.submitLoading = false
  409. return
  410. } else {
  411. this.error = ''
  412. }
  413. this.postFormAction(this.url.delegate, formData).then((res) => {
  414. this.submitLoading = false
  415. if (res.success) {
  416. this.$message.success('操作成功')
  417. this.modalTaskVisible = false
  418. this.getDataList()
  419. }
  420. })
  421. }
  422. },
  423. detail(r) {
  424. this.getAction('/ctop/actCustomForm/queryById', { id: r.tableId }).then((res) => {
  425. if (res.success) {
  426. this.jsonData = JSON.parse(res.result.text)
  427. if (this.jsonData) {
  428. this.$nextTick(() => {
  429. this.defaultValue = JSON.parse(r.tableName)
  430. this.$refs.kfb.setData(this.defaultValue)
  431. })
  432. }
  433. } else {
  434. this.jsonData = {}
  435. this.$message.warning('该流程信息未配置表单,请联系开发人员!')
  436. return
  437. }
  438. })
  439. this.lcModa.disabled = true
  440. this.lcModa.title = '查看流程业务信息:' + r.processName
  441. this.lcModa.formComponent = this.getFormComponent(r.routeName).component
  442. this.lcModa.processData = r
  443. this.lcModa.isNew = false
  444. this.lcModa.visible = true
  445. },
  446. passTask(v) {
  447. this.modalTaskTitle = '审批通过'
  448. this.form.id = v.id
  449. this.form.procInstId = v.procInstId
  450. this.form.priority = v.priority
  451. this.form.type = 0
  452. this.modalTaskVisible = true
  453. this.userLoading = true
  454. this.getAction(this.url.getNextNode, { procDefId: v.procDefId, currActId: v.key }).then((res) => {
  455. this.userLoading = false
  456. if (res.success) {
  457. if (res.result.type == 3 || res.result.type == 4) {
  458. this.isGateway = true
  459. this.showAssign = false
  460. this.error = ''
  461. return
  462. }
  463. this.isGateway = false
  464. if (res.result.users && res.result.users.length > 0) {
  465. this.error = ''
  466. this.assigneeList = res.result.users
  467. // 默认勾选
  468. let ids = []
  469. res.result.users.forEach((e) => {
  470. ids.push(e.username)
  471. })
  472. this.form.assignees = ids
  473. this.showAssign = true
  474. } else {
  475. this.form.assignees = []
  476. this.showAssign = false
  477. }
  478. }
  479. })
  480. },
  481. changeBackTask(v) {
  482. if (v == '-1') {
  483. return
  484. }
  485. this.userLoading = true
  486. this.getAction(this.url.getNode + v).then((res) => {
  487. this.userLoading = false
  488. if (res.success) {
  489. if (res.result.users && res.result.users.length > 0) {
  490. this.assigneeList = res.result.users
  491. // 默认勾选
  492. let ids = []
  493. res.result.users.forEach((e) => {
  494. ids.push(e.username)
  495. })
  496. this.form.assignees = ids
  497. }
  498. }
  499. })
  500. },
  501. backTask(v) {
  502. this.modalTaskTitle = '审批驳回'
  503. this.form.id = v.id
  504. this.form.procInstId = v.procInstId
  505. this.form.procDefId = v.procDefId
  506. this.form.priority = v.priority
  507. this.form.type = 1
  508. this.showAssign = false
  509. this.modalTaskVisible = true
  510. // 获取可驳回节点
  511. this.backList = [
  512. {
  513. key: '-1',
  514. name: '发起人',
  515. },
  516. ]
  517. this.form.backTaskKey = '-1'
  518. this.backLoading = true
  519. this.getAction(this.url.getBackList + v.procInstId).then((res) => {
  520. this.backLoading = false
  521. if (res.success) {
  522. res.result.forEach((e) => {
  523. this.backList.push(e)
  524. })
  525. }
  526. })
  527. },
  528. delegateTask(v) {
  529. this.modalTaskTitle = '委托他人代办'
  530. this.form.id = v.id
  531. this.form.procInstId = v.procInstId
  532. this.form.type = 2
  533. this.showAssign = false
  534. this.modalTaskVisible = true
  535. },
  536. history(v) {
  537. if (!v.procInstId) {
  538. this.$message.error('流程实例ID不存在')
  539. return
  540. }
  541. this.procInstId = v.procInstId
  542. this.modalLsVisible = true
  543. },
  544. passAll() {
  545. if (this.selectCount <= 0) {
  546. this.$message.warning('您还未选择要通过的数据')
  547. return
  548. }
  549. // 批量通过
  550. this.modalVisible = true
  551. this.$confirm({
  552. title: '确认通过',
  553. content: '您确认要通过所选的 ' + this.selectCount + ' 条数据? 注意:将默认分配给节点设定的所有可审批用户',
  554. loading: true,
  555. onOk: () => {
  556. let ids = ''
  557. this.selectList.forEach(function (e) {
  558. ids += e.id + ','
  559. })
  560. ids = ids.substring(0, ids.length - 1)
  561. this.postFormAction(this.url.passAll, { ids: ids }).then((res) => {
  562. if (res.success) {
  563. this.$message.success('操作成功')
  564. this.modalVisible = false
  565. this.clearSelectAll()
  566. this.getDataList()
  567. }
  568. })
  569. },
  570. })
  571. },
  572. backAll() {
  573. if (this.selectCount <= 0) {
  574. this.$message.warning('您还未选择要驳回的数据')
  575. return
  576. }
  577. // 批量驳回
  578. this.modalVisible = true
  579. this.$confirm({
  580. title: '确认驳回',
  581. content: '您确认要驳回所选的 ' + this.selectCount + ' 条数据? 注意:所有流程将驳回至发起人',
  582. loading: true,
  583. onOk: () => {
  584. let procInstIds = ''
  585. this.selectList.forEach(function (e) {
  586. procInstIds += e.procInstId + ','
  587. })
  588. procInstIds = procInstIds.substring(0, procInstIds.length - 1)
  589. this.postFormAction(this.url.backAll, { procInstIds: procInstIds }).then((res) => {
  590. if (res.success) {
  591. this.$message.success('操作成功')
  592. this.modalVisible = false
  593. this.clearSelectAll()
  594. this.getDataList()
  595. }
  596. })
  597. },
  598. })
  599. },
  600. },
  601. }
  602. </script>