processInsManage.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  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. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  21. <a-col :md="6" :sm="12">
  22. <a-button @click="handleSearch" type="primary" icon="search">搜索</a-button>
  23. <a-button @click="handleReset" style="margin-left: 10px;">重置</a-button>
  24. </a-col>
  25. </span>
  26. </a-row>
  27. </a-form>
  28. </div>
  29. <a-row>
  30. <a-table
  31. :scroll="scroll"
  32. bordered
  33. :loading="loading"
  34. rowKey="id"
  35. :dataSource="data"
  36. :pagination="ipagination"
  37. @change="handleTableChange"
  38. ref="table"
  39. >
  40. <a-table-column title="#" :width="50">
  41. <template slot-scope="t,r,i">
  42. <span>{{i+1}}</span>
  43. </template>
  44. </a-table-column>
  45. <a-table-column title="流程实例ID" data-index="id" :width="150">
  46. <template slot-scope="t,r,i">
  47. <span>{{t}}</span>
  48. </template>
  49. </a-table-column>
  50. <a-table-column title="流程名称" data-index="name" :width="150">
  51. <template slot-scope="t,r,i">
  52. <span>{{t}}</span>
  53. </template>
  54. </a-table-column>
  55. <a-table-column title="申请人" data-index="applyer" :width="100">
  56. <template slot-scope="t,r,i">
  57. <span>{{t}}</span>
  58. </template>
  59. </a-table-column>
  60. <a-table-column title="标识Key" data-index="key" :width="150">
  61. <template slot-scope="t,r,i">
  62. <span>{{t}}</span>
  63. </template>
  64. </a-table-column>
  65. <a-table-column title="版本" data-index="version" :width="150">
  66. <template slot-scope="t,r,i">
  67. <span>v.{{t}}</span>
  68. </template>
  69. </a-table-column>
  70. <a-table-column title="当前环节" data-index="currTaskName" :width="150">
  71. <template slot-scope="t,r,i">
  72. <span>{{t}}</span>
  73. </template>
  74. </a-table-column>
  75. <a-table-column
  76. title="状态"
  77. data-index="isSuspended"
  78. :width="110"
  79. key="isSuspended"
  80. :sorter="(a,b)=>Boolean(a.isSuspended)?0:1 - Boolean(b.isSuspended)?0:1"
  81. >
  82. <template slot-scope="t,r,i">
  83. <span v-if="t" style="color: red">已挂起</span>
  84. <span v-else style="color: #2f54eb">已激活</span>
  85. </template>
  86. </a-table-column>
  87. <a-table-column title="操作" data-index="action">
  88. <template slot-scope="t,r,i">
  89. <template v-if="r.isSuspended">
  90. <a href="javascript:void(0);" style="color: green;" @click="editStatus(1,r)">激活</a>
  91. <a-divider type="vertical" />
  92. </template>
  93. <template v-else>
  94. <a href="javascript:void(0);" style="color: orange;" @click="editStatus(0,r)">挂起</a>
  95. <a-divider type="vertical" />
  96. </template>
  97. <a href="javascript:void(0);" style="color: blue;" @click="history(r)">审批详情</a>
  98. <a-divider type="vertical" />
  99. <a href="javascript:void(0);" style="color: #999;" @click="detail(r)">表单数据</a>
  100. <a-divider type="vertical" />
  101. <a-popconfirm title="确定删除吗?" @confirm="() => remove(r)">
  102. <a style="color: red;">删除</a>
  103. </a-popconfirm>
  104. </template>
  105. </a-table-column>
  106. </a-table>
  107. </a-row>
  108. </a-card>
  109. <a-modal
  110. :title="modalTitle"
  111. v-model="modalVisible"
  112. :mask-closable="false"
  113. :width="500"
  114. :styles="{top: '30px'}"
  115. >
  116. <a-form ref="form" :model="form" :label-width="70" :rules="formValidate">
  117. <a-form-item label="删除原因" prop="reason">
  118. <a-input type="textarea" v-model="form.reason" :rows="4" />
  119. </a-form-item>
  120. </a-form>
  121. <div slot="footer">
  122. <a-button type="text" @click="handelCancel">取消</a-button>
  123. <a-button type="primary" :loading="submitLoading" @click="handelSubmit">提交</a-button>
  124. </div>
  125. </a-modal>
  126. <!---->
  127. <a-modal
  128. title="审批历史"
  129. v-model="modalLsVisible"
  130. :mask-closable="false"
  131. :width="'80%'"
  132. :footer="null"
  133. >
  134. <div v-if="modalLsVisible">
  135. <component :is="historicDetail" :procInstId="procInstId"></component>
  136. </div>
  137. </a-modal>
  138. <!--流程表单-->
  139. <a-modal
  140. :title="lcModa.title"
  141. v-model="lcModa.visible"
  142. :footer="null"
  143. :maskClosable="false"
  144. width="80%"
  145. >
  146. <k-form-build
  147. v-if="lcModa.visible"
  148. :defaultValue="defaultValue"
  149. :value="jsonData"
  150. ref="kfb"
  151. disabled
  152. />
  153. </a-modal>
  154. </div>
  155. </template>
  156. <script>
  157. import { activitiMixin } from './mixins/activitiMixin'
  158. import { JeecgListMixin } from '../../mixins/JeecgListMixin'
  159. export default {
  160. mixins: [activitiMixin, JeecgListMixin],
  161. name: 'process-ins-manage',
  162. data() {
  163. return {
  164. jsonData: {},
  165. defaultValue: {},
  166. openSearch: true,
  167. openTip: true,
  168. loading: true, // 表单加载状态
  169. selectCount: 0, // 多选计数
  170. selectList: [], // 多选数据
  171. searchForm: {
  172. // 搜索框对应data对象
  173. name: '',
  174. key: '',
  175. pageNumber: 1, // 当前页数
  176. pageSize: 10, // 页面大小
  177. },
  178. modalType: 0, // 添加或编辑标识
  179. modalVisible: false, // 添加或编辑显示
  180. modalTitle: '', // 添加或编辑标题
  181. form: {
  182. // 添加或编辑表单对象初始化数据
  183. reason: '',
  184. },
  185. formValidate: {
  186. // 表单验证规则
  187. },
  188. submitLoading: false, // 添加或编辑提交状态
  189. data: [], // 表单数据
  190. total: 0, // 表单数据总数
  191. deleteId: '',
  192. url: {
  193. getRunningProcess: '/actProcessIns/getRunningProcess',
  194. deleteProcessIns: '/actProcessIns/delInsByIds/',
  195. updateInsStatus: '/actProcessIns/updateInsStatus/',
  196. },
  197. modalLsVisible: false,
  198. procInstId: '',
  199. lcModa: {
  200. title: '',
  201. disabled: false,
  202. visible: false,
  203. formComponent: null,
  204. isNew: false,
  205. },
  206. }
  207. },
  208. methods: {
  209. loadData() {},
  210. init() {
  211. this.getDataList()
  212. },
  213. getDataList() {
  214. this.loading = true
  215. this.getAction(this.url.getRunningProcess, this.searchForm).then((res) => {
  216. this.loading = false
  217. if (res.success) {
  218. this.data = res.result
  219. } else {
  220. this.$message.error(res.message)
  221. }
  222. })
  223. },
  224. handleSearch() {
  225. this.searchForm.pageNumber = 1
  226. this.searchForm.pageSize = 10
  227. this.getDataList()
  228. },
  229. handleReset() {
  230. this.searchForm = {}
  231. this.searchForm.pageNumber = 1
  232. this.searchForm.pageSize = 10
  233. // 重新加载数据
  234. this.getDataList()
  235. },
  236. handelCancel() {
  237. this.modalVisible = false
  238. },
  239. handelSubmit() {
  240. this.submitLoading = true
  241. this.postFormAction(this.url.deleteProcessIns + this.deleteId, this.form).then((res) => {
  242. this.submitLoading = false
  243. if (res.success) {
  244. this.$message.success('操作成功')
  245. this.modalVisible = false
  246. this.getDataList()
  247. } else {
  248. this.$message.error(res.message)
  249. }
  250. })
  251. },
  252. editStatus(status, v) {
  253. let operation = ''
  254. if (status == 0) {
  255. operation = '暂停挂起'
  256. } else {
  257. operation = '激活运行'
  258. }
  259. this.$confirm({
  260. title: '确认' + operation,
  261. content: `您确认要${operation}流程实例${v.name}?`,
  262. loading: true,
  263. onOk: () => {
  264. let params = {
  265. status: status,
  266. id: v.id,
  267. }
  268. this.postFormAction(this.url.updateInsStatus, params).then((res) => {
  269. if (res.success) {
  270. this.$message.success('操作成功')
  271. this.getDataList()
  272. } else {
  273. this.$message.error(res.message)
  274. }
  275. })
  276. },
  277. })
  278. },
  279. detail(r) {
  280. this.getAction('/ctop/actCustomForm/queryById', { id: r.tableId }).then((res) => {
  281. if (res.success) {
  282. this.jsonData = JSON.parse(res.result.text)
  283. if (this.jsonData) {
  284. this.$nextTick(() => {
  285. this.defaultValue = JSON.parse(r.tableName)
  286. this.$refs.kfb.setData(this.defaultValue)
  287. })
  288. }
  289. } else {
  290. this.jsonData = {}
  291. this.$message.warning('该流程信息未配置表单,请联系开发人员!')
  292. return
  293. }
  294. })
  295. this.lcModa.disabled = true
  296. this.lcModa.title = '查看流程业务信息:' + r.name
  297. this.lcModa.formComponent = this.getFormComponent(r.routeName).component
  298. this.lcModa.processData = r
  299. this.lcModa.isNew = false
  300. this.lcModa.visible = true
  301. },
  302. history(v) {
  303. if (!v.procInstId) {
  304. this.$message.error('流程实例ID不存在')
  305. return
  306. }
  307. this.procInstId = v.procInstId
  308. this.modalLsVisible = true
  309. },
  310. remove(v) {
  311. this.modalTitle = `确认删除流程 ${v.name}`
  312. // 单个删除
  313. this.deleteId = v.id
  314. this.modalType = 0
  315. this.modalVisible = true
  316. },
  317. handleTableChange(pagination, filters, sorter) {
  318. //分页、排序、筛选变化时触发
  319. //TODO 筛选
  320. if (Object.keys(sorter).length > 0) {
  321. this.isorter.column = sorter.field
  322. this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
  323. }
  324. this.ipagination = pagination
  325. // this.loadData();
  326. },
  327. },
  328. mounted() {
  329. this.init()
  330. },
  331. watch: {},
  332. }
  333. </script>