processFinishManage.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  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" v-model="searchForm.name" placeholder="请输入" clearable />
  13. </a-form-item>
  14. </a-col>
  15. <a-col :md="6" :sm="8">
  16. <a-form-item label="标识Key" prop="name">
  17. <a-input type="text" v-model="searchForm.key" placeholder="请输入" clearable />
  18. </a-form-item>
  19. </a-col>
  20. <a-col :md="6" :sm="8">
  21. <a-form-item label="结束时间">
  22. <a-range-picker
  23. v-model="selectDate"
  24. format="YYYY-MM-DD"
  25. clearable
  26. @change="selectDateRange"
  27. ></a-range-picker>
  28. </a-form-item>
  29. </a-col>
  30. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  31. <a-col :md="6" :sm="12">
  32. <a-button @click="handleSearch" type="primary" icon="search">搜索</a-button>
  33. <a-button @click="handleReset" style="margin-left: 10px;">重置</a-button>
  34. </a-col>
  35. </span>
  36. </a-row>
  37. </a-form>
  38. </div>
  39. <a-row>
  40. <a-table
  41. :scroll="{x:1680}"
  42. bordered
  43. :loading="loading"
  44. rowKey="id"
  45. :dataSource="data"
  46. :pagination="ipagination"
  47. @change="handleTableChange"
  48. ref="table"
  49. >
  50. <a-table-column title="#" :width="50" fixed="left">
  51. <template slot-scope="t,r,i">
  52. <span>{{i+1}}</span>
  53. </template>
  54. </a-table-column>
  55. <a-table-column title="流程实例ID" data-index="id" :width="150" fixed="left">
  56. <template slot-scope="t,r,i">
  57. <span>{{t}}</span>
  58. </template>
  59. </a-table-column>
  60. <a-table-column title="流程名称" data-index="name" :width="150" fixed="left">
  61. <template slot-scope="t,r,i">
  62. <span>{{t}}</span>
  63. </template>
  64. </a-table-column>
  65. <a-table-column
  66. title="申请人"
  67. data-index="applyer"
  68. :ellipsis="true"
  69. :width="150"
  70. fixed="left"
  71. >
  72. <template slot-scope="t,r,i">
  73. <span>{{t}}</span>
  74. </template>
  75. </a-table-column>
  76. <a-table-column title="标识Key" data-index="key" :width="150">
  77. <template slot-scope="t,r,i">
  78. <span>{{t}}</span>
  79. </template>
  80. </a-table-column>
  81. <a-table-column title="版本" data-index="version" :width="80">
  82. <template slot-scope="t,r,i">
  83. <span>v.{{t}}</span>
  84. </template>
  85. </a-table-column>
  86. <a-table-column
  87. title="审批结果"
  88. data-index="result"
  89. :width="150"
  90. key="result"
  91. :sorter="(a,b)=>a.result - b.result"
  92. >
  93. <template slot-scope="t,r,i">
  94. <span v-if="t==4" style="color: #999999">发起人撤回</span>
  95. <span v-else-if="t==5" style="color: orange">已删除</span>
  96. <span v-else-if="t==2" style="color: green">已通过</span>
  97. <span v-else-if="t==3" style="color: red">已驳回</span>
  98. <span v-else>未知</span>
  99. </template>
  100. </a-table-column>
  101. <a-table-column title="原因详情" data-index="deleteReason" :width="150">
  102. <template slot-scope="t,r,i">
  103. <j-ellipsis :value="t" :length="10"></j-ellipsis>
  104. </template>
  105. </a-table-column>
  106. <a-table-column
  107. title="总耗时"
  108. data-index="duration"
  109. :width="100"
  110. key="duration"
  111. :sorter="(a,b)=>a.duration - b.duration"
  112. >
  113. <template slot-scope="t,r,i">
  114. <span>{{millsToTime(t)}}</span>
  115. </template>
  116. </a-table-column>
  117. <a-table-column title="开始时间" data-index="startTime" :width="150">
  118. <template slot-scope="t,r,i">
  119. <span>{{t}}</span>
  120. </template>
  121. </a-table-column>
  122. <a-table-column title="结束时间" data-index="endTime" :width="150">
  123. <template slot-scope="t,r,i">
  124. <span>{{t}}</span>
  125. </template>
  126. </a-table-column>
  127. <a-table-column title="操作" data-index :width="250" fixed="right">
  128. <template slot-scope="t,r,i">
  129. <a href="javascript:void(0);" style="color: green;" @click="history(r)">审批历史</a>
  130. <a-divider type="vertical" />
  131. <a href="javascript:void(0);" style="color: blue;" @click="detail(r)">表单数据</a>
  132. <a-divider type="vertical" />
  133. <a-popconfirm title="确定删除吗?" @confirm="() => remove(r)">
  134. <a style="color: red;">删除</a>
  135. </a-popconfirm>
  136. </template>
  137. </a-table-column>
  138. </a-table>
  139. </a-row>
  140. </a-card>
  141. <!---->
  142. <a-modal
  143. title="审批历史"
  144. v-model="modalLsVisible"
  145. :mask-closable="false"
  146. :width="'80%'"
  147. :footer="null"
  148. >
  149. <div v-if="modalLsVisible">
  150. <component :is="historicDetail" :procInstId="procInstId"></component>
  151. </div>
  152. </a-modal>
  153. <!--流程表单-->
  154. <a-modal
  155. :title="lcModa.title"
  156. v-model="lcModa.visible"
  157. :footer="null"
  158. :maskClosable="false"
  159. width="80%"
  160. >
  161. <k-form-build
  162. v-if="lcModa.visible"
  163. :defaultValue="defaultValue"
  164. :value="jsonData"
  165. ref="kfb"
  166. disabled
  167. />
  168. </a-modal>
  169. </div>
  170. </template>
  171. <script>
  172. import { activitiMixin } from './mixins/activitiMixin'
  173. import { JeecgListMixin } from '../../mixins/JeecgListMixin'
  174. import { deleteAction, getAction, downFile, postAction } from '@/api/manage'
  175. export default {
  176. mixins: [JeecgListMixin, activitiMixin],
  177. name: 'process-finish-manage',
  178. data() {
  179. return {
  180. jsonData: {},
  181. defaultValue: {},
  182. modalLsVisible: false,
  183. procInstId: '',
  184. lcModa: {
  185. title: '',
  186. disabled: false,
  187. visible: false,
  188. formComponent: null,
  189. isNew: false,
  190. },
  191. openSearch: true,
  192. openTip: true,
  193. loading: true, // 表单加载状态
  194. selectCount: 0, // 多选计数
  195. selectList: [], // 多选数据
  196. selectDate: null, // 选择日期绑定modal
  197. searchForm: {
  198. // 搜索框对应data对象
  199. name: '',
  200. key: '',
  201. pageNumber: 1, // 当前页数
  202. pageSize: 10, // 页面大小
  203. },
  204. data: [], // 表单数据
  205. total: 0, // 表单数据总数
  206. deleteId: '',
  207. url: {
  208. getFinishedProcess: '/actProcessIns/getFinishedProcess',
  209. delHistoricIns: '/actProcessIns/delHistoricInsByIds/',
  210. },
  211. }
  212. },
  213. methods: {
  214. loadData() {},
  215. init() {
  216. this.getDataList()
  217. },
  218. selectDateRange(v) {
  219. this.searchForm.startDate = null
  220. this.searchForm.endDate = null
  221. if (v[0]) {
  222. this.searchForm.startDate = v[0].format('YYYY-MM-DD')
  223. }
  224. if (v[1]) {
  225. this.searchForm.endDate = v[1].format('YYYY-MM-DD')
  226. }
  227. },
  228. getDataList() {
  229. this.loading = true
  230. this.getAction(this.url.getFinishedProcess, this.searchForm).then((res) => {
  231. this.loading = false
  232. if (res.success) {
  233. this.data = res.result
  234. } else {
  235. this.$message.error(res.message)
  236. }
  237. })
  238. },
  239. handleSearch() {
  240. this.searchForm.pageNumber = 1
  241. this.searchForm.pageSize = 10
  242. this.getDataList()
  243. },
  244. handleReset() {
  245. this.selectDate = null
  246. this.searchForm = {}
  247. this.searchForm.pageNumber = 1
  248. this.searchForm.pageSize = 10
  249. // 重新加载数据
  250. this.getDataList()
  251. },
  252. handelCancel() {
  253. this.modalVisible = false
  254. },
  255. detail(r) {
  256. // if (!r.routeName) {
  257. // this.$message.warning('该流程信息未配置表单,请联系开发人员!')
  258. // return
  259. // }
  260. getAction('/ctop/actCustomForm/queryById', { id: r.tableId }).then((res) => {
  261. if (res.success) {
  262. this.jsonData = JSON.parse(res.result.text)
  263. if (this.jsonData) {
  264. this.$nextTick(() => {
  265. this.defaultValue = JSON.parse(r.tableName)
  266. this.$refs.kfb.setData(this.defaultValue)
  267. })
  268. }
  269. } else {
  270. this.jsonData = {}
  271. this.$message.warning('该流程信息未配置表单,请联系开发人员!')
  272. return
  273. }
  274. })
  275. this.lcModa.disabled = true
  276. this.lcModa.title = '查看流程业务信息:' + r.name
  277. this.lcModa.formComponent = this.getFormComponent(r.routeName).component
  278. this.lcModa.processData = r
  279. this.lcModa.isNew = false
  280. this.lcModa.visible = true
  281. },
  282. history(v) {
  283. if (!v.id) {
  284. this.$message.error('流程实例ID不存在')
  285. return
  286. }
  287. this.procInstId = v.id
  288. this.modalLsVisible = true
  289. },
  290. remove(v) {
  291. this.postFormAction(this.url.delHistoricIns + v.id).then((res) => {
  292. if (res.success) {
  293. this.$message.success('操作成功')
  294. this.getDataList()
  295. } else {
  296. this.$message.error(res.message)
  297. }
  298. })
  299. },
  300. },
  301. mounted() {
  302. this.init()
  303. },
  304. watch: {},
  305. }
  306. </script>