applyList.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 查询区域 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline" @keyup.enter.native="searchQuery">
  6. <a-row :gutter="24">
  7. <a-col :md="6" :sm="8">
  8. <a-form-item label="标题">
  9. <a-input placeholder="请输入搜索关键词" v-model="queryParam.title"></a-input>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="8">
  13. <a-form-item label="状态">
  14. <a-select v-model="queryParam.status" placeholder="请选择" :allowClear="true">
  15. <a-select-option value="0">草稿</a-select-option>
  16. <a-select-option value="1">处理中</a-select-option>
  17. <a-select-option value="2">已结束</a-select-option>
  18. <a-select-option value="3">已撤回</a-select-option>
  19. </a-select>
  20. </a-form-item>
  21. </a-col>
  22. <a-col :md="6" :sm="8">
  23. <a-form-item label="结果">
  24. <a-select v-model="queryParam.result" placeholder="请选择" :allowClear="true">
  25. <a-select-option value="0">未提交</a-select-option>
  26. <a-select-option value="1">处理中</a-select-option>
  27. <a-select-option value="2">通过</a-select-option>
  28. <a-select-option value="3">驳回</a-select-option>
  29. </a-select>
  30. </a-form-item>
  31. </a-col>
  32. <a-col :md="6" :sm="10">
  33. <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
  34. <a-range-picker
  35. style="width: 210px"
  36. v-model="queryParam.createTimeRange"
  37. format="YYYY-MM-DD"
  38. :placeholder="['开始时间', '结束时间']"
  39. @change="onDateChange"
  40. @ok="onDateOk"
  41. />
  42. </a-form-item>
  43. </a-col>
  44. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  45. <a-col :md="6" :sm="12">
  46. <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
  47. <a-button
  48. type="primary"
  49. @click="searchReset"
  50. icon="reload"
  51. style="margin-left: 8px;left: 10px"
  52. >重置</a-button>
  53. </a-col>
  54. </span>
  55. <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
  56. <a-col :md="12" :sm="12">
  57. <a-button
  58. type="primary"
  59. @click="addApply"
  60. :loading="addApplyLoading"
  61. style="left: 10px"
  62. icon="plus-circle"
  63. >发起申请</a-button>
  64. </a-col>
  65. </span>
  66. </a-row>
  67. </a-form>
  68. </div>
  69. <!-- table区域-begin -->
  70. <a-table
  71. bordered
  72. ref="table"
  73. size="middle"
  74. rowKey="id"
  75. :dataSource="dataSource"
  76. :pagination="ipagination"
  77. :loading="loading"
  78. @change="handleTableChange"
  79. >
  80. <a-table-column title="#" :width="50">
  81. <template slot-scope="t,r,i">
  82. <span>{{i+1}}</span>
  83. </template>
  84. </a-table-column>
  85. <a-table-column title="标题" data-index="title" :width="150" align="center">
  86. <template slot-scope="t,r,i">
  87. <span>{{t}}</span>
  88. </template>
  89. </a-table-column>
  90. <a-table-column title="所属流程" data-index="processName" :width="150" align="center">
  91. <template slot-scope="t,r,i">
  92. <span>{{t}}</span>
  93. </template>
  94. </a-table-column>
  95. <a-table-column title="当前审批环节" data-index="currTaskName" :width="150" align="center">
  96. <template slot-scope="t,r,i">
  97. <span>{{t}}</span>
  98. </template>
  99. </a-table-column>
  100. <a-table-column
  101. title="状态"
  102. data-index="status"
  103. :width="150"
  104. align="center"
  105. key="s"
  106. :sorter="(a,b)=>a.status - b.status"
  107. >
  108. <template slot-scope="t,r,i">
  109. <span :style="{color:getStatus(t).color}">{{getStatus(t).text}}</span>
  110. </template>
  111. </a-table-column>
  112. <a-table-column
  113. title="结果"
  114. data-index="result"
  115. :width="150"
  116. align="center"
  117. key="result"
  118. :sorter="(a,b)=>a.result - b.result"
  119. >
  120. <template slot-scope="t,r,i">
  121. <span :style="{color:getResult(t).color}">{{getResult(t).text}}</span>
  122. </template>
  123. </a-table-column>
  124. <a-table-column title="创建时间" data-index="createTime" :width="150" align="center">
  125. <template slot-scope="t,r,i">
  126. <span>{{t}}</span>
  127. </template>
  128. </a-table-column>
  129. <a-table-column title="提交申请时间" data-index="applyTime" :width="150" align="center">
  130. <template slot-scope="t,r,i">
  131. <span>{{t}}</span>
  132. </template>
  133. </a-table-column>
  134. <a-table-column title="操作" data-index align="center">
  135. <template slot-scope="t,r,i">
  136. <template v-if="r.status == 0">
  137. <a href="javascript:void(0);" style="color: #00A0E9" @click="apply(r)">提交申请</a>
  138. <a-divider type="vertical" />
  139. <a href="javascript:void(0);" @click="edit(r)" style="color: #000000">编辑</a>
  140. <a-divider type="vertical" />
  141. <a-popconfirm title="确定删除吗?" @confirm="() => remove(r)">
  142. <a href="javascript:void(0);" style="color: red">删除</a>
  143. </a-popconfirm>
  144. </template>
  145. <template v-else-if="r.status == 1">
  146. <a href="javascript:void(0);" @click="cancel(r)" style="color:#8000ff;">撤回</a>
  147. <a-divider type="vertical" />
  148. <a href="javascript:void(0);" @click="history(r)" style="color:blue;">查看进度</a>
  149. <a-divider type="vertical" />
  150. <a href="javascript:void(0);" @click="detail(r)" style="color:#999;">表单数据</a>
  151. </template>
  152. <template v-else-if="(r.status == 2 && r.result == 3) || r.status == 3">
  153. <a-popconfirm title="确定提交申请吗?" @confirm="() => apply(r)">
  154. <a href="javascript:void(0);" style="color:#00A0E9;">重新申请</a>
  155. </a-popconfirm>
  156. <a-divider type="vertical" />
  157. <a href="javascript:void(0);" @click="edit(r)" style="color:#000000;">编辑</a>
  158. <a-divider type="vertical" />
  159. <a href="javascript:void(0);" @click="history(r)" style="color:blue;">审批历史</a>
  160. </template>
  161. <template v-else>
  162. <a href="javascript:void(0);" @click="detail(r)" style="color:#999;">表单数据</a>
  163. <a-divider type="vertical" />
  164. <a href="javascript:void(0);" @click="history(r)" style="color:blue;">审批历史</a>
  165. </template>
  166. </template>
  167. </a-table-column>
  168. </a-table>
  169. <!-- table区域-end -->
  170. <!--流程申请选择-->
  171. <a-drawer
  172. title="选择流程"
  173. width="33%"
  174. placement="right"
  175. :closable="false"
  176. @close="processModalVisible = false"
  177. :visible="processModalVisible"
  178. >
  179. <a-empty description="无流程可供选择" v-if="activeKeyAll.length==0" />
  180. <div v-else>
  181. <a-input-search
  182. style="margin-bottom: 10px;width: 200px"
  183. placeholder="输入流程名称"
  184. @search="onSearchProcess"
  185. />
  186. <a-collapse v-model="activeKey">
  187. <a-collapse-panel
  188. v-for="(value, index) in activeKeyAll"
  189. :header="filterDictText(dictOptions,value)||'未分类'"
  190. :key="value"
  191. >
  192. <a-list :grid="{ gutter: 10,column:1}" :dataSource="processDataMap[value]">
  193. <a-list-item slot="renderItem" slot-scope="item">
  194. <a-card>
  195. <div slot="title">
  196. <a-row>
  197. <a-col span="12" :title="item.name">{{item.name}}</a-col>
  198. <a-col span="12" style="text-align: right;">
  199. <a href="javascript:void (0)" @click="chooseProcess(item)">发起申请</a>
  200. </a-col>
  201. </a-row>
  202. </div>
  203. <b>版本:</b>
  204. v.{{item.version}}
  205. <br />
  206. <b>说明:</b>
  207. {{item.description}}
  208. </a-card>
  209. </a-list-item>
  210. </a-list>
  211. </a-collapse-panel>
  212. </a-collapse>
  213. </div>
  214. </a-drawer>
  215. <!--流程表单-->
  216. <a-modal :title="lcModa.title" v-model="lcModa.visible" :maskClosable="false" width="80%">
  217. <!-- <component :disabled="lcModa.disabled" v-if="lcModa.visible" :is="lcModa.formComponent"
  218. :processData="lcModa.processData" :isNew = "lcModa.isNew"
  219. @afterSubmit="afterSub" @close="lcModa.visible=false,lcModa.disabled = false"></component>-->
  220. <template slot="footer">
  221. <a-button @click="lcModa.visible=false" :disabled="lcModa.isNew">关闭</a-button>
  222. <a-button key="back" @click="close" :disabled="lcModa.isNew">重置</a-button>
  223. <a-button
  224. key="submit"
  225. type="primary"
  226. @click="handleOkAll"
  227. :loading="loadingEdit"
  228. :disabled="lcModa.isNew"
  229. >提交</a-button>
  230. </template>
  231. <k-form-build
  232. v-if="lcModa.visible"
  233. :defaultValue="defaultValue"
  234. :value="jsonData"
  235. ref="kfb"
  236. :disabled="lcModa.isNew"
  237. />
  238. </a-modal>
  239. <!--提交申请表单-->
  240. <a-modal title="提交申请" v-model="modalVisible" :mask-closable="false" :width="500" :footer="null">
  241. <div v-if="modalVisible">
  242. <a-form-item label="选择审批人" v-show="showAssign">
  243. <a-select
  244. style="width: 100%"
  245. v-model="form.assignees"
  246. placeholder="请选择"
  247. mode="multiple"
  248. :allowClear="true"
  249. >
  250. <a-select-option
  251. v-for="(item, i) in assigneeList"
  252. :key="i"
  253. :value="item.username"
  254. >{{item.realname}}</a-select-option>
  255. </a-select>
  256. </a-form-item>
  257. <a-form-item label="下一审批人" v-show="isGateway">
  258. <a-alert type="info" showIcon message="分支网关处不支持自定义选择下一审批人,将自动下发给所有可审批人。">,将发送给下一节点所有人</a-alert>
  259. </a-form-item>
  260. <a-form-item label="优先级" prop="priority">
  261. <a-select
  262. v-model="form.priority"
  263. placeholder="请选择"
  264. :allowClear="true"
  265. style="width: 100%"
  266. >
  267. <a-select-option :value="0">普通</a-select-option>
  268. <a-select-option :value="1">重要</a-select-option>
  269. <a-select-option :value="2">紧急</a-select-option>
  270. </a-select>
  271. </a-form-item>
  272. <a-form-item label="消息通知">
  273. <a-checkbox v-model="form.sendMessage">站内消息通知</a-checkbox>
  274. <a-checkbox v-model="form.sendSms" disabled>短信通知</a-checkbox>
  275. <a-checkbox v-model="form.sendEmail" disabled>邮件通知</a-checkbox>
  276. </a-form-item>
  277. <div slot="footer">
  278. <a-button type="text" @click="modalVisible=false">取消</a-button>
  279. <div style="display:inline-block;width: 20px;"></div>
  280. <a-button type="primary" :disabled="submitLoading" @click="applySubmit">提交</a-button>
  281. </div>
  282. </div>
  283. </a-modal>
  284. <a-modal
  285. title="审批历史"
  286. v-model="modalLsVisible"
  287. :mask-closable="false"
  288. :width="'80%'"
  289. :footer="null"
  290. >
  291. <div v-if="modalLsVisible">
  292. <historicDetail :procInstId="procInstId"></historicDetail>
  293. </div>
  294. </a-modal>
  295. <a-modal title="确认撤回" v-model="modalCancelVisible" :mask-closable="false" :width="500">
  296. <a-form ref="delForm" v-model="cancelForm" :label-width="70" v-if="modalCancelVisible">
  297. <a-form-item label="撤回原因" prop="reason">
  298. <a-input type="textarea" v-model="cancelForm.reason" :rows="4" />
  299. </a-form-item>
  300. </a-form>
  301. <div slot="footer">
  302. <a-button type="text" @click="modalCancelVisible=false">取消</a-button>
  303. <a-button type="primary" :disabled="submitLoading" @click="handelSubmitCancel">提交</a-button>
  304. </div>
  305. </a-modal>
  306. </a-card>
  307. </template>
  308. <script>
  309. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  310. import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
  311. import { filterObj } from '@/utils/util'
  312. import JEllipsis from '@/components/jeecg/JEllipsis'
  313. import { deleteAction, getAction, downFile, postAction } from '@/api/manage'
  314. import pick from 'lodash.pick'
  315. import JTreeSelect from '@/components/jeecg/JTreeSelect'
  316. import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
  317. import historicDetail from '@/views/activiti/historicDetail'
  318. export default {
  319. name: 'applyList',
  320. mixins: [activitiMixin, JeecgListMixin],
  321. components: {
  322. JEllipsis,
  323. JTreeSelect,
  324. historicDetail,
  325. },
  326. data() {
  327. return {
  328. description: '我的申请',
  329. dictOptions: [],
  330. url: {
  331. list: '/actBusiness/listData',
  332. getProcessDataList: '/activiti_process/listData',
  333. delByIds: '/actBusiness/delByIds',
  334. getFirstNode: '/actProcessIns/getFirstNode',
  335. applyBusiness: '/actBusiness/apply',
  336. cancelApply: '/actBusiness/cancel',
  337. },
  338. // 查询条件
  339. queryParam: {
  340. createTimeRange: [],
  341. keyWord: '',
  342. },
  343. // 表头
  344. labelCol: {
  345. xs: { span: 4 },
  346. sm: { span: 4 },
  347. },
  348. wrapperCol: {
  349. xs: { span: 20 },
  350. sm: { span: 20 },
  351. },
  352. processModalVisible: null,
  353. activeKeyAll: [],
  354. activeKey: [],
  355. processDataMap: {},
  356. searchProcessKey: null,
  357. addApplyLoading: false,
  358. lcModa: {
  359. title: '',
  360. disabled: false,
  361. visible: false,
  362. formComponent: null,
  363. isNew: false,
  364. },
  365. form: {
  366. priority: 0,
  367. assignees: [],
  368. sendMessage: true,
  369. },
  370. modalVisible: false,
  371. showAssign: false,
  372. assigneeList: [],
  373. isGateway: false,
  374. dictPriority: [],
  375. submitLoading: false,
  376. error: '',
  377. /*审批历史*/
  378. modalLsVisible: false,
  379. procInstId: '',
  380. modalCancelVisible: false,
  381. cancelForm: {},
  382. jsonData: {},
  383. defaultValue: {},
  384. loadingEdit: false,
  385. loading: false,
  386. }
  387. },
  388. computed: {},
  389. methods: {
  390. handleOkAll() {
  391. this.loadingEdit = true
  392. var that = this
  393. this.$refs.kfb.getData().then((values) => {
  394. console.log('验证通过', values, this.lcModa.processData)
  395. var formData = {}
  396. formData.id = this.lcModa.processData.id
  397. formData.tableName = JSON.stringify(values)
  398. postAction('/actBusiness/update', formData)
  399. .then((res) => {
  400. if (res.success) {
  401. that.lcModa.visible = false
  402. that.$message.success('修改成功!')
  403. that.loadingEdit = false
  404. that.loadData(1)
  405. } else {
  406. that.$message.error(res.message)
  407. that.loadingEdit = false
  408. }
  409. })
  410. .finally(() => {
  411. that.loadingEdit = false
  412. })
  413. })
  414. },
  415. close() {
  416. this.$refs.kfb.reset()
  417. },
  418. initDictConfig() {
  419. //初始化字典 - 流程分类
  420. initDictOptions('bpm_process_type').then((res) => {
  421. if (res.success) {
  422. this.dictOptions = res.result
  423. }
  424. })
  425. },
  426. filterDictText(dictOptions, text) {
  427. if (dictOptions instanceof Array) {
  428. for (let dictItem of dictOptions) {
  429. if (text === dictItem.value) {
  430. return dictItem.text
  431. }
  432. }
  433. }
  434. return text || text == 'null' ? '' : text
  435. },
  436. getProcessList() {
  437. this.addApplyLoading = true
  438. this.postFormAction(this.url.getProcessDataList, { status: 1, roles: true })
  439. .then((res) => {
  440. this.activeKeyAll = []
  441. if (res.success) {
  442. var result = res.result || []
  443. if (result.length > 0) {
  444. let searchProcessKey = this.searchProcessKey
  445. if (searchProcessKey) {
  446. //过滤条件
  447. result = _.filter(result, function (o) {
  448. return o.name.indexOf(searchProcessKey) > -1
  449. })
  450. }
  451. this.processDataMap = _.groupBy(result, 'categoryId')
  452. for (const categoryId in this.processDataMap) {
  453. this.activeKeyAll.push(categoryId)
  454. }
  455. this.activeKey = this.activeKeyAll
  456. }
  457. this.processModalVisible = true
  458. } else {
  459. this.$message.warning(res.message)
  460. }
  461. })
  462. .finally(() => (this.addApplyLoading = false))
  463. },
  464. loadData(arg) {
  465. console.log('loadData')
  466. if (!this.url.list) {
  467. this.$message.error('请设置url.list属性!')
  468. return
  469. }
  470. //加载数据 若传入参数1则加载第一页的内容
  471. if (arg === 1) {
  472. this.ipagination.current = 1
  473. }
  474. var params = this.getQueryParams() //查询条件
  475. this.loading = true
  476. getAction(this.url.list, params).then((res) => {
  477. if (res.success) {
  478. let records = res.result || []
  479. this.dataSource = records
  480. this.ipagination.total = records.length
  481. }
  482. if (res.code === 510) {
  483. this.$message.warning(res.message)
  484. }
  485. this.loading = false
  486. })
  487. },
  488. getQueryParams() {
  489. var param = Object.assign({}, this.queryParam, this.isorter)
  490. delete param.createTimeRange // 时间参数不传递后台
  491. return filterObj(param)
  492. },
  493. // 重置
  494. searchReset() {
  495. var that = this
  496. var logType = that.queryParam.logType
  497. that.queryParam = {} //清空查询区域参数
  498. that.queryParam.logType = logType
  499. that.loadData(this.ipagination.current)
  500. },
  501. onDateChange: function (value, dateString) {
  502. console.log(dateString[0], dateString[1])
  503. this.queryParam.createTime_begin = dateString[0]
  504. this.queryParam.createTime_end = dateString[1]
  505. },
  506. onDateOk(value) {
  507. console.log(value)
  508. },
  509. getStatus(status) {
  510. let text = '未知',
  511. color = ''
  512. if (status == 0) {
  513. text = '草稿'
  514. color = 'default'
  515. } else if (status == 1) {
  516. text = '处理中'
  517. color = 'orange'
  518. } else if (status == 2) {
  519. text = '已结束'
  520. color = 'blue'
  521. } else if (status == 3) {
  522. text = '已撤回'
  523. color = 'magenta'
  524. }
  525. return { text: text, color: color }
  526. },
  527. getResult(result) {
  528. let text = '未知',
  529. color = ''
  530. if (result == 0) {
  531. text = '未提交'
  532. color = 'default'
  533. } else if (result == 1) {
  534. text = '处理中'
  535. color = 'orange'
  536. } else if (result == 2) {
  537. text = '已通过'
  538. color = 'green'
  539. } else if (result == 3) {
  540. text = '已驳回'
  541. color = 'red'
  542. }
  543. return { text: text, color: color }
  544. },
  545. apply(v) {
  546. if (!v.procDefId || v.procDefId == 'null') {
  547. this.$message.error('流程定义为空')
  548. return
  549. }
  550. this.form.id = v.id
  551. this.form.procDefId = v.procDefId
  552. this.form.title = v.title
  553. // 加载审批人
  554. this.getAction(this.url.getFirstNode, { procDefId: v.procDefId }).then((res) => {
  555. if (res.success) {
  556. if (res.result.type == 3 || res.result.type == 4) {
  557. this.isGateway = true
  558. this.modalVisible = true
  559. this.form.firstGateway = true
  560. this.showAssign = false
  561. this.error = ''
  562. return
  563. }
  564. this.form.firstGateway = false
  565. this.isGateway = false
  566. if (res.result.users && res.result.users.length > 0) {
  567. this.error = ''
  568. this.assigneeList = res.result.users
  569. // 默认勾选
  570. let ids = []
  571. res.result.users.forEach((e) => {
  572. ids.push(e.username)
  573. })
  574. this.form.assignees = ids
  575. this.showAssign = true
  576. } else {
  577. this.form.assignees = []
  578. this.showAssign = true
  579. this.error = '审批节点未分配候选审批人员,请联系管理员!'
  580. }
  581. if (this.error) {
  582. this.$message.error(this.error)
  583. return
  584. }
  585. this.modalVisible = true
  586. } else {
  587. this.$message.error(res.message)
  588. }
  589. })
  590. },
  591. applySubmit() {
  592. if (this.showAssign && this.form.assignees.length < 1) {
  593. this.error = '请至少选择一个审批人'
  594. this.$message.error(this.error)
  595. return
  596. } else {
  597. this.error = ''
  598. }
  599. this.submitLoading = true
  600. var params = Object.assign({}, this.form)
  601. params.assignees = params.assignees.join(',')
  602. this.postFormAction(this.url.applyBusiness, params)
  603. .then((res) => {
  604. if (res.success) {
  605. this.$message.success('操作成功')
  606. this.loadData()
  607. this.modalVisible = false
  608. } else {
  609. this.$message.error(res.message)
  610. }
  611. })
  612. .finally(() => (this.submitLoading = false))
  613. },
  614. edit(r, isView) {
  615. getAction('/ctop/actCustomForm/queryById', { id: r.tableId }).then((res) => {
  616. if (res.success) {
  617. this.jsonData = JSON.parse(res.result.text)
  618. if (this.jsonData) {
  619. this.$nextTick(() => {
  620. this.defaultValue = JSON.parse(r.tableName)
  621. this.$refs.kfb.setData(this.defaultValue)
  622. })
  623. }
  624. } else {
  625. this.jsonData = {}
  626. this.$message.warning('该流程信息未配置表单,请联系开发人员!')
  627. return
  628. }
  629. })
  630. // if (!r.routeName) {
  631. // this.$message.warning('该流程信息未配置表单,请联系开发人员!')
  632. // return
  633. // }
  634. isView = isView || false
  635. this.lcModa.disabled = isView
  636. this.lcModa.title = '修改流程业务信息:' + r.title
  637. this.loadingEdit = false
  638. if (isView) {
  639. this.lcModa.isNew = true
  640. this.lcModa.title = '查看流程业务信息:' + r.title
  641. } else {
  642. this.lcModa.isNew = false
  643. }
  644. this.lcModa.processData = r
  645. this.lcModa.visible = true
  646. },
  647. remove(r) {
  648. this.postFormAction(this.url.delByIds, { ids: r.id }).then((res) => {
  649. if (res.success) {
  650. this.$message.success(res.message)
  651. this.loadData()
  652. } else {
  653. this.$message.error(res.message)
  654. }
  655. })
  656. },
  657. cancel(v) {
  658. this.cancelForm.id = v.id
  659. this.cancelForm.procInstId = v.procInstId
  660. this.modalCancelVisible = true
  661. },
  662. handelSubmitCancel() {
  663. this.submitLoading = true
  664. this.postFormAction(this.url.cancelApply, this.cancelForm)
  665. .then((res) => {
  666. if (res.success) {
  667. this.$message.success('操作成功')
  668. this.loadData()
  669. this.modalCancelVisible = false
  670. } else {
  671. this.$message.error(res.message)
  672. }
  673. })
  674. .finally(() => (this.submitLoading = false))
  675. },
  676. history(v) {
  677. if (!v.procInstId) {
  678. this.$message.error('流程实例ID不存在')
  679. return
  680. }
  681. this.procInstId = v.procInstId
  682. this.modalLsVisible = true
  683. },
  684. detail(v) {
  685. this.edit(v, true)
  686. },
  687. handleTableChange(pagination, filters, sorter) {
  688. //分页、排序、筛选变化时触发
  689. //TODO 筛选
  690. if (Object.keys(sorter).length > 0) {
  691. this.isorter.column = sorter.field
  692. this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
  693. }
  694. this.ipagination = pagination
  695. // this.loadData();
  696. },
  697. addApply() {
  698. this.getProcessList()
  699. },
  700. onSearchProcess(value) {
  701. this.searchProcessKey = value
  702. this.getProcessList()
  703. },
  704. chooseProcess(v) {
  705. if (!v.routeName) {
  706. this.$message.warning('该流程信息未配置表单,请联系开发人员!')
  707. return
  708. }
  709. this.lcModa.formComponent = this.getFormComponent(v.routeName).component
  710. this.lcModa.title = '发起流程:' + v.name
  711. this.lcModa.isNew = true
  712. this.lcModa.processData = v
  713. this.lcModa.visible = true
  714. console.log('发起', v)
  715. },
  716. afterSub(formData) {
  717. this.lcModa.visible = false
  718. this.loadData()
  719. },
  720. },
  721. }
  722. </script>
  723. <style scoped>
  724. @import '~@assets/less/common.less';
  725. </style>