OldMyTodo.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <div class="page-header-index-wide">
  3. <a-row :gutter="24">
  4. <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
  5. <a-card title="我的待办" :bordered="false">
  6. <a-row :gutter="24">
  7. <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
  8. <a-table
  9. :scroll="scroll"
  10. bordered
  11. :loading="loading"
  12. rowKey="id"
  13. :dataSource="data"
  14. :pagination="ipagination"
  15. @change="handleTableChange"
  16. ref="table"
  17. size="small"
  18. >
  19. <a-table-column title="#" :width="50">
  20. <template slot-scope="t, r, i">
  21. <span>{{ i + 1 }}</span>
  22. </template>
  23. </a-table-column>
  24. <a-table-column title="任务名称" data-index="name" :width="150" align="center">
  25. <template slot-scope="t">
  26. <span>{{ t }}</span>
  27. </template>
  28. </a-table-column>
  29. <a-table-column title="所属流程" data-index="processName" :width="150" align="center">
  30. <template slot-scope="t">
  31. <span>{{ t }}</span>
  32. </template>
  33. </a-table-column>
  34. <a-table-column title="委托代办人" data-index="owner" align="center" :width="150">
  35. <template slot-scope="t">
  36. <span>{{ t }}</span>
  37. </template>
  38. </a-table-column>
  39. <a-table-column title="流程发起人" data-index="applyer" :width="150" align="center">
  40. <template slot-scope="t">
  41. <span>{{ t }}</span>
  42. </template>
  43. </a-table-column>
  44. <a-table-column
  45. title="优先级"
  46. data-index="priority"
  47. :width="110"
  48. align="center"
  49. key="so"
  50. :sorter="(a, b) => a.priority - b.priority"
  51. >
  52. <template slot-scope="t">
  53. <span v-if="t == 0" style="color: green;">普通</span>
  54. <span v-else-if="t == 1" style="color: orange;">重要</span>
  55. <span v-else-if="t == 2" style="color: red;">紧急</span>
  56. <span v-else style="color: #999;">无</span>
  57. </template>
  58. </a-table-column>
  59. <a-table-column
  60. title="状态"
  61. data-index="isSuspended"
  62. :width="100"
  63. align="center"
  64. key="z"
  65. :sorter="(a, b) => (Boolean(a.isSuspended) ? 0 : 1 - Boolean(b.isSuspended) ? 0 : 1)"
  66. >
  67. <template slot-scope="t">
  68. <span v-if="!Boolean(t)" style="color: green;">已激活</span>
  69. <span v-if="Boolean(t)" style="color: orange;">已挂起</span>
  70. </template>
  71. </a-table-column>
  72. <a-table-column title="创建时间" data-index="createTime" :width="200" align="center">
  73. <template slot-scope="t">
  74. <span>{{ t }}</span>
  75. </template>
  76. </a-table-column>
  77. <a-table-column title="操作" data-index align="center" :width="100">
  78. <!-- <template slot-scope="t,r,i">
  79. <a href="javascript:void(0);" @click="detail(r)" style="color: blue">申请详情</a>
  80. <a-divider type="vertical" />
  81. <span v-if="Boolean(r.isSuspended)" style="cursor: no-drop;color: #999999;" title="流程已被挂起,无法操作!">
  82. 通过 <a-divider type="vertical" />
  83. 驳回 <a-divider type="vertical" />
  84. 委托 <a-divider type="vertical" />
  85. </span>
  86. <span v-else>
  87. <a href="javascript:void(0);" @click="passTask(r)" style="color: green">通过</a>
  88. <a-divider type="vertical" />
  89. <a href="javascript:void(0);" @click="backTask(r)" style="color: orange">驳回</a>
  90. <a-divider type="vertical" />
  91. <a href="javascript:void(0);" @click="delegateTask(r)" style="color: #00A0E9">委托</a>
  92. <a-divider type="vertical" />
  93. </span>
  94. <a href="javascript:void(0);" @click="history(r)" style="color: #217dbb">历史</a>
  95. </template>-->
  96. <template slot-scope="t, r, i">
  97. <a href="javascript:void(0);" @click="toDealWith()" style="color: blue">去处理</a>
  98. </template>
  99. </a-table-column>
  100. </a-table>
  101. </a-col>
  102. </a-row>
  103. </a-card>
  104. </a-col>
  105. </a-row>
  106. </div>
  107. </template>
  108. <script>
  109. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  110. import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
  111. import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
  112. export default {
  113. name: 'MyToDo',
  114. data () {
  115. return {
  116. data: [], // 表单数据
  117. total: 0, // 表单数据总数
  118. ipagination: {
  119. current: 1,
  120. pageSize: 5,
  121. pageSizeOptions: ['10', '20', '30'],
  122. showTotal: (total, range) => {
  123. return range[0] + '-' + range[1] + ' 共' + total + '条'
  124. },
  125. showQuickJumper: true,
  126. showSizeChanger: true,
  127. total: 0
  128. }
  129. }
  130. },
  131. created () {
  132. this.getDataList()
  133. },
  134. computed: {
  135. scroll: function () {
  136. var width = window.innerWidth
  137. // ant-table
  138. let $antTable = window.document.getElementsByClassName('ant-table')
  139. if ($antTable[0]) {
  140. width = $antTable[0].clientWidth
  141. }
  142. console.log('$antTable', $antTable)
  143. return {
  144. // x:'max-content',
  145. x: 1160,
  146. y: window.innerHeight / 2
  147. }
  148. },
  149. innerHeight: function () {
  150. var innerHeight = window.innerHeight
  151. return innerHeight
  152. }
  153. },
  154. methods: {
  155. getDataList () {
  156. this.loading = true
  157. this.postFormAction('/actTask/todoList', {}).then(res => {
  158. this.loading = false
  159. if (res.success) {
  160. this.data = res.result || []
  161. this.total = this.data.leading
  162. }
  163. })
  164. },
  165. handleTableChange (pagination, filters, sorter) {
  166. // 分页、排序、筛选变化时触发
  167. if (Object.keys(sorter).length > 0) {
  168. this.isorter.column = sorter.field
  169. this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
  170. }
  171. this.ipagination = pagination
  172. // this.loadData();
  173. },
  174. // 去处理按钮
  175. toDealWith () {
  176. this.$router.push({ path: '/activiti/todoManage' })
  177. }
  178. }
  179. }
  180. </script>