myProcess.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617
  1. <template>
  2. <!-- 我的流程主页 -->
  3. <div class="myProcess">
  4. <el-row class="handle-box labeldom" style="margin-bottom: 10px">
  5. <el-col :span="22">
  6. <el-tabs v-model="activeName" @tab-click="handleClick()">
  7. <el-tab-pane label="待办事项" name="待办事项" />
  8. <el-tab-pane label="已办事项" name="已办事项" />
  9. <el-tab-pane label="我的申请" name="我的申请" />
  10. <el-tab-pane label="抄送事项" name="抄送事项" />
  11. <el-tab-pane label="委托待办事项" name="委托待办事项" />
  12. <el-tab-pane label="我的委托" name="我的委托" />
  13. </el-tabs>
  14. </el-col>
  15. <el-col :span="2">
  16. <el-dropdown
  17. class="statistic_base"
  18. :append-to-body="true"
  19. :modal-append-to-body="true"
  20. custom-class="tagdialog"
  21. style="float:right"
  22. trigger="click"
  23. >
  24. <span class="el-dropdown-link">
  25. 流程发起<i
  26. class="el-icon-arrow-down el-icon--right"
  27. />
  28. </span>
  29. <el-dropdown-menu slot="dropdown">
  30. <el-dropdown-item
  31. v-for="(item, index) in dropdownList"
  32. :key="index"
  33. @click.native="openDianlog(item.ref)"
  34. >
  35. {{ item.name }}
  36. </el-dropdown-item>
  37. </el-dropdown-menu>
  38. </el-dropdown>
  39. </el-col>
  40. <el-form
  41. ref="elForm"
  42. :model="search"
  43. :rules="rules"
  44. label-width="100px"
  45. size="medium"
  46. >
  47. <el-col :span="6">
  48. <el-form-item label="流程名称" prop="field101">
  49. <el-input
  50. v-model="search.field101"
  51. :style="{ width: '100%' }"
  52. clearable
  53. placeholder="请输入流程名称"
  54. />
  55. </el-form-item>
  56. </el-col>
  57. <el-col :span="6">
  58. <el-form-item label="主题" prop="field102">
  59. <el-input
  60. v-model="search.field102"
  61. :style="{ width: '100%' }"
  62. clearable
  63. placeholder="请输入主题"
  64. />
  65. </el-form-item>
  66. </el-col>
  67. <el-col v-if="this.activeName != '我的申请'" :span="6">
  68. <el-form-item label="发起人" prop="field103">
  69. <el-input
  70. v-model="search.field103"
  71. :style="{ width: '100%' }"
  72. clearable
  73. placeholder="请输入发起人"
  74. />
  75. </el-form-item>
  76. </el-col>
  77. <el-col :span="6">
  78. <el-form-item size="large">
  79. <el-button
  80. class="ch-button-warning"
  81. plain
  82. size="small"
  83. @click="handleReset()"
  84. ><i class="el-icon-aim" />&nbsp;重置
  85. </el-button>
  86. <el-button
  87. class="ch-button"
  88. size="small"
  89. @click="handleSearch()"
  90. ><i class="el-icon-search" />&nbsp;搜索
  91. </el-button>
  92. </el-form-item>
  93. </el-col>
  94. </el-form>
  95. </el-row>
  96. <el-row class="handle-box">
  97. <el-col :span="24">
  98. <el-table
  99. v-loading="loading"
  100. :data="tableData"
  101. row-class-name="g_table_row"
  102. stripe
  103. style="width: 100%"
  104. >
  105. <el-table-column type="index" width="60" />
  106. <el-table-column label="流程名称" prop="flowName" />
  107. <el-table-column label="主题" prop="applyTheme">
  108. <template slot-scope="scope">
  109. <a
  110. v-if="activeName=='我的申请'||'我的委托'||'抄送事项'"
  111. style="color: #1890ff"
  112. @click="openDetailsDialog(scope.row.flowType,scope.row)"
  113. >
  114. {{ scope.row.applyTheme }}
  115. </a>
  116. <span v-else>
  117. {{ scope.row.applyTheme }}
  118. </span>
  119. </template>
  120. </el-table-column>
  121. <el-table-column label="发起人" prop="applyUserName" />
  122. <el-table-column label="所在部门" prop="applyDeptName" />
  123. <el-table-column label="发起时间" prop="createdAt">
  124. <template slot-scope="scope">
  125. {{ $common.transTime(scope.row.createdAt) }}
  126. <!-- {{ (row.createdAt) }}-->
  127. </template>
  128. </el-table-column>
  129. <el-table-column label="当前流转状态" prop="flowStatusString" />
  130. <el-table-column label="审核结果" prop="auditResultString" />
  131. <el-table-column align="center" fixed="right" header-align="center" label="操作" width="250px">
  132. <template scope="scope">
  133. <el-button
  134. v-if="activeName=='我的申请'&& (scope.row.flowStatusString=='已撤回'||scope.row.flowStatusString=='退回发起人')"
  135. :disabled="scope.row.returnStatus==1"
  136. size="mini"
  137. @click="applyAgain(scope.row,scope.row.flowType)"
  138. >
  139. <!-- -->
  140. 重新发起
  141. </el-button>
  142. <el-button
  143. v-if="activeName=='我的申请'&&scope.row.flowStatusString!='已撤回'&&scope.row.flowStatusString!='已结束'&&scope.row.flowStatusString!='退回发起人'"
  144. size="mini"
  145. @click="recallApply(scope.row,scope.row,scope.row.flowType)"
  146. >
  147. 撤回
  148. </el-button>
  149. <el-button
  150. v-if="activeName=='待办事项'||activeName=='委托待办事项'"
  151. :disabled="scope.row.flowStatusString=='已撤回'"
  152. size="mini"
  153. type="primary"
  154. @click="handleAudit(scope.row,scope.row.flowType)"
  155. >审核
  156. </el-button>
  157. <el-button
  158. v-if="activeName=='待办事项'"
  159. size="mini"
  160. type="primary"
  161. @click="openChangeClientDialog(scope.row)"
  162. >委托办理
  163. </el-button>
  164. </template>
  165. </el-table-column>
  166. </el-table>
  167. <div class="table-page">
  168. <el-pagination
  169. :current-page.sync="currentPage"
  170. :page-size="pageSize"
  171. :total="allpage"
  172. background
  173. layout="total, prev, pager, next"
  174. @current-change="handleCurrentChange"
  175. />
  176. </div>
  177. </el-col>
  178. <!-- <el-image-->
  179. <!-- :src="$constant.BASE_URI-->
  180. <!-- +'/ActController/readByPid?processInstanceId='-->
  181. <!-- + 65001 " fit="scale-down"/>-->
  182. </el-row>
  183. <!-- <apply-cost ref="applyCsot" @getData="getData()" />-->
  184. <!-- <apply-holiday ref="applyHoliday" @getData="getData()" />-->
  185. <!-- <apply-pay ref="applyPay" @getData="getData()" />-->
  186. <!-- <apply-pay-confirm ref="applyPayConfirm" @getData="getData()" />-->
  187. <!-- <apply-cost-confirm ref="applyCostConfirm" @getData="getData()" />-->
  188. <!-- <apply-holiday-confirm ref="applyHolidayConfirm" @getData="getData()" />-->
  189. <change-client ref="changeClient" @getData="getData" />
  190. <!-- <apply-again-cost ref="applyAgainCost" @getData="getData" />-->
  191. <!-- <apply-pay-details ref="applyPayDetails" @getData="getData" />-->
  192. <!-- <apply-again-pay ref="applyAgainPay" @getData="getData" />-->
  193. <!-- <apply-cost-details ref="applyCostDetails" />-->
  194. <!-- <holiday-details ref="holidayDetails" @getData="getData" />-->
  195. <!-- <apply-again-holiday ref="applyAgainHoliday" @getData="getData" />-->
  196. <apply-add-work ref="applyAddWork" @getData="getData()" />
  197. <apply-add-work-confirm ref="applyAddWorkConfirm" @getData="getData()" />
  198. <apply-add-work-detail ref="applyAddWorkDetail" />
  199. <apply-again-add-work ref="applyAgainAddWork" @getData="getData()" />
  200. <apply-payment ref="applyPayment" @getData="getData()" />
  201. <apply-payment-confirm ref="applyPaymentConfirm" @getData="getData()" />
  202. <apply-payment-detail ref="applyPaymentDetail" />
  203. <apply-again-payment ref="applyAgainPayment" @getData="getData()" />
  204. <el-dialog
  205. :close-on-click-modal="false"
  206. :close-on-press-escape="false"
  207. :title="purchaseTitle"
  208. :visible.sync="purchaseVisible"
  209. top="50px"
  210. width="75%"
  211. @close="closePurchase"
  212. >
  213. <apply-purchase v-if="purchaseVisible" ref="applyPurchase" @closeDialog="closePurchase" />
  214. </el-dialog>
  215. </div>
  216. </template>
  217. <script>
  218. import applyHoliday from '@/views/workflow/components/myProcess/applyHoliday.vue'
  219. // import applyCost from '@/views/workflow/components/myProcess/applyCost.vue'
  220. import applyAgainCost from '@/views/workflow/components/myProcess/applyAgainCost.vue'
  221. import applyPay from '@/views/workflow/components/myProcess/applyPay.vue'
  222. import changeClient from '@/views/workflow/components/myProcess/changeClient.vue'
  223. import applyAgainPay from '@/views/workflow/components/myProcess/applyAgainPay.vue'
  224. import applyAgainHoliday from '@/views/workflow/components/myProcess/applyAgainHoliday.vue'
  225. import applyAgainAddWork from '@/views/workflow/components/myProcess/applyAgainAddWork.vue'
  226. import applyHolidayConfirm from '@/views/workflow/components/myProcess/applyHolidayConfirm.vue'
  227. // import applyCostConfirm from '@/views/workflow/components/myProcess/applyCostConfirm.vue'
  228. import applyPayConfirm from '@/views/workflow/components/myProcess/applyPayConfirm.vue'
  229. import applyAddWorkConfirm from '@/views/workflow/components/myProcess/applyAddWorkConfirm.vue'
  230. import applyAddWork from '@/views/workflow/components/myProcess/applyAddWork.vue'
  231. import applyAddWorkDetail from '@/views/workflow/components/myProcess/applyAddWorkDetail.vue'
  232. import applyPaymentConfirm from '@/views/workflow/components/myProcess/applyPaymentConfirm.vue'
  233. import applyPayment from '@/views/workflow/components/myProcess/applyPayment.vue'
  234. import applyPaymentDetail from '@/views/workflow/components/myProcess/applyPaymentDetail.vue'
  235. import applyAgainPayment from '@/views/workflow/components/myProcess/applyAgainPayment.vue'
  236. import applyPayDetails from '@/views/workflow/components/myProcess/applyPayDetails.vue'
  237. // import applyCostDetails from '@/views/workflow/components/myProcess/applyCostDetails.vue'
  238. import holidayDetails from '@/views/workflow/components/myProcess/holidayDetails.vue'
  239. import ApplyPurchase from '@/views/workflow/components/myProcess/applyPurchase.vue'
  240. export default {
  241. components: {
  242. applyPaymentConfirm,
  243. applyPayment,
  244. applyPaymentDetail,
  245. applyAgainPayment,
  246. ApplyPurchase,
  247. applyAgainAddWork,
  248. applyAddWork,
  249. // applyCostDetails,
  250. applyHoliday,
  251. // applyCost,
  252. applyAgainCost,
  253. applyAgainPay,
  254. applyPay,
  255. applyPayConfirm,
  256. // applyCostConfirm,
  257. applyHolidayConfirm,
  258. changeClient,
  259. applyPayDetails,
  260. holidayDetails,
  261. applyAgainHoliday, applyAddWorkConfirm, applyAddWorkDetail
  262. },
  263. data() {
  264. return {
  265. // 查询数据的内容
  266. search: {},
  267. dropdownList: [
  268. // { name: '请假申请单', ref: 'applyHoliday' },
  269. // { name: '费用报支申请', ref: 'applyCsot' },
  270. // { name: '付款申请单', ref: 'applyPay' },
  271. // { name: '加班申请单', ref: 'applyAddWork' },
  272. { name: '付款流程', ref: 'applyPayment' }
  273. // { name: '采购申请', ref: 'applyPurchase' }
  274. // {name: '付款审核', ref: 'applyPayConfirm'},
  275. // {name: '请假审核', ref: 'applyHolidayConfirm'}
  276. ],
  277. activeName: '待办事项',
  278. // 通用字典项
  279. AUDIT_TYPE: [],
  280. dc_map: {},
  281. // 列表相关
  282. cusName: '',
  283. auditStatus: '',
  284. auditType: '',
  285. proName: '',
  286. applyBy: '',
  287. tableData: [],
  288. loading: false,
  289. UserData: [
  290. { label: '审批中', value: '审批中' },
  291. { label: '已通过', value: '已通过' },
  292. { label: '已拒绝', value: '已拒绝' },
  293. { label: '已退回', value: '已退回' }
  294. ],
  295. UserMap: {},
  296. // 分页
  297. currentPage: 1,
  298. allpage: 0,
  299. pageSize: 12,
  300. // 弹框相关
  301. currAuditId: '',
  302. dialogVisible: false,
  303. dialogTitle: '新增',
  304. isAdd: true,
  305. detailList: [],
  306. rules: {},
  307. purchaseTitle: '',
  308. purchaseVisible: false
  309. }
  310. },
  311. mounted() {
  312. const _this = this
  313. if (this.$route.query && this.$route.query.activeName) {
  314. this.activeName = this.$route.query.activeName
  315. }
  316. _this.getData()
  317. },
  318. methods: {
  319. handleCurrentChange: function(val) {
  320. this.currentPage = val
  321. this.getData()
  322. },
  323. openChangeClientDialog(row) {
  324. this.$refs.changeClient.setVisible(true, row)
  325. },
  326. handleAudit(row, type) {
  327. switch (type) {
  328. case 'payment' :
  329. this.$refs.applyPaymentConfirm.setVisible(true, row)
  330. break
  331. case 'use_money' :
  332. // this.$refs.applyCostConfirm.setVisible(true, row)
  333. break
  334. case 'paymen' :
  335. this.$refs.applyPayConfirm.setVisible(true, row)
  336. break
  337. case 'off_work' :
  338. this.$refs.applyHolidayConfirm.setVisible(true, row)
  339. break
  340. case 'add_work' :
  341. this.$refs.applyAddWorkConfirm.setVisible(true, row)
  342. break
  343. case 'purchase_work' :
  344. this.purchaseVisible = true
  345. this.purchaseTitle = '采购申请-审核'
  346. this.$nextTick(() => {
  347. this.$refs.applyPurchase.initData(row.formId, true, false, false, row)
  348. })
  349. break
  350. }
  351. },
  352. openDetailsDialog(type, row) {
  353. switch (type) {
  354. case 'payment' :
  355. this.$refs.applyPaymentDetail.setVisible(true, row)
  356. break
  357. case 'use_money' :
  358. this.$refs.applyCostDetails.setVisible(true, row)
  359. break
  360. case 'paymen' :
  361. this.$refs.applyPayDetails.setVisible(true, row)
  362. break
  363. case 'off_work':
  364. this.$refs.holidayDetails.setVisible(true, row)
  365. break
  366. case 'add_work':
  367. this.$refs.applyAddWorkDetail.setVisible(true, row)
  368. break
  369. case 'purchase_work' :
  370. this.purchaseVisible = true
  371. this.purchaseTitle = '采购申请-详情'
  372. this.$nextTick(() => {
  373. this.$refs.applyPurchase.initData(row.formId, false, true, false, row)
  374. })
  375. break
  376. }
  377. },
  378. applyAgain(row, type) {
  379. switch (type) {
  380. case 'use_money' :
  381. this.$refs.applyAgainCost.setVisible(true, row)
  382. break
  383. case 'paymen' :
  384. this.$refs.applyAgainPay.setVisible(true, row)
  385. break
  386. case 'payment' :
  387. this.$refs.applyAgainPayment.setVisible(true, row)
  388. break
  389. case 'off_work':
  390. this.$refs.applyAgainHoliday.setVisible(true, row)
  391. break
  392. case 'add_work':
  393. this.$refs.applyAgainAddWork.setVisible(true, row)
  394. break
  395. case 'purchase_work':
  396. this.purchaseVisible = true
  397. this.purchaseTitle = '采购申请-重新发起'
  398. this.$nextTick(() => {
  399. this.$refs.applyPurchase.initData(row.formId, false, false, true, row)
  400. })
  401. break
  402. }
  403. },
  404. recallApply: function(row, type) {
  405. const _this = this
  406. _this.$confirm('该流程已经在审核中,撤回后原审核内容将作废确认撤回吗?', '提示', {
  407. confirmButtonText: '确定',
  408. cancelButtonText: '取消',
  409. type: 'warning'
  410. }).then(function() {
  411. const deleting = _this.$notify({
  412. title: '正在撤回,请稍等',
  413. type: 'warning'
  414. })
  415. const postData = {
  416. flowMainid: row.id
  417. }
  418. console.log('row', row)
  419. if (row.flowType === 'off_work') { // 请假申请的时候要单独调请假时期的接口
  420. _this.baseRequest2('ApplyOffWorkController', 'recallApply', postData).then(res => {
  421. if (res.data.code === 200) {
  422. _this.getData()
  423. deleting.close()
  424. _this.$notify({
  425. title: '撤回成功',
  426. type: 'info'
  427. })
  428. } else {
  429. deleting.close()
  430. _this.dialogVisible = false
  431. _this.$notify({
  432. title: '撤回失败',
  433. type: 'info'
  434. })
  435. }
  436. }).catch((err) => {
  437. deleting.close()
  438. _this.$alert(err)
  439. })
  440. } else {
  441. _this.baseRequest2('FlowMainController', 'recallApply', postData).then(res => {
  442. if (res.data.code === 200) {
  443. _this.getData()
  444. deleting.close()
  445. _this.$notify({
  446. title: '撤回成功',
  447. type: 'info'
  448. })
  449. } else {
  450. deleting.close()
  451. _this.dialogVisible = false
  452. _this.$notify({
  453. title: '撤回失败',
  454. type: 'info'
  455. })
  456. }
  457. }).catch((err) => {
  458. deleting.close()
  459. _this.$alert(err)
  460. })
  461. }
  462. }).catch(function(error) {
  463. console.error(error)
  464. })
  465. },
  466. // 初始化获取数据
  467. getData() {
  468. const _this = this
  469. const postData = {
  470. applyUserName: _this.search.field103, // 申请人名称
  471. applyTheme: _this.search.field102, // 主题名称
  472. flowName: _this.search.field101, // 流程名称
  473. auditUser: this.$common.currUser() ? this.$common.currUser().id : '',
  474. pageNum: _this.currentPage,
  475. pageSize: _this.pageSize
  476. }
  477. let url = ''
  478. if (_this.activeName === '待办事项') {
  479. url = 'toDolisAndEntrusttByInfo'
  480. } else if (_this.activeName === '已办事项') {
  481. url = 'hasDolistByInfo'
  482. } else if (_this.activeName === '我的申请') {
  483. url = 'myApplylistByInfo'
  484. } else if (_this.activeName === '抄送事项') {
  485. url = 'cclistByInfo'
  486. } else if (_this.activeName === '委托待办事项') {
  487. url = 'entrustToDolistByInfo'
  488. } else if (_this.activeName === '我的委托') {
  489. url = 'myEntrustlistByInfo'
  490. }
  491. _this.baseRequest1(url, postData).then(res => {
  492. if (res.data) {
  493. _this.tableData = []
  494. res.data.rows.forEach(item => {
  495. _this.tableData.push(_this.getItemJson(item))
  496. })
  497. _this.allpage = res.data.total
  498. } else {
  499. _this.tableData = []
  500. }
  501. })
  502. },
  503. getItemJson: function(item) {
  504. item.xxx = '111'
  505. return item
  506. },
  507. handleSearch: function() {
  508. this.getData()
  509. },
  510. handleReset: function() {
  511. for (const i in this.search) {
  512. if (i !== 'pageNum' && i !== 'pageSize') {
  513. this.search[i] = ''
  514. }
  515. }
  516. this.handleSearch()
  517. },
  518. // 打开流程发起菜单
  519. openDianlog(ref) {
  520. if (ref === 'applyPurchase') {
  521. this.purchaseVisible = true
  522. this.purchaseTitle = '采购申请'
  523. this.$nextTick(() => {
  524. this.$refs.applyPurchase.initData('', false, false)
  525. })
  526. } else {
  527. this.$refs[ref].setVisible(true)
  528. }
  529. },
  530. handleClick(tab, event) {
  531. this.getData()
  532. },
  533. closePurchase(refresh) {
  534. this.purchaseVisible = false
  535. if (refresh) {
  536. this.getData()
  537. }
  538. },
  539. // 请求封装,继承类中调用,必须存在
  540. baseRequest1(opUrl, postData) {
  541. return this.$channel.globleRequest('FlowMainController', opUrl, postData, 'project task')
  542. },
  543. baseRequest2(controller, opUrl, postData) {
  544. return this.$channel.globleRequest(controller, opUrl, postData, 'project task')
  545. }
  546. }
  547. }
  548. </script>
  549. <style lang="scss">
  550. .holidayRow {
  551. .el-select {
  552. width: 100%;
  553. }
  554. }
  555. .myProcess{
  556. .el-dropdown-menu{
  557. background: #CCCCCC;
  558. background-color:#cccccc ;
  559. }
  560. }
  561. .el-dropdown-link {
  562. cursor: pointer;
  563. color: rgba(39, 78, 219, 1);
  564. }
  565. .demonstration {
  566. display: block;
  567. color: #8492a6;
  568. font-size: 14px;
  569. margin-bottom: 20px;
  570. }
  571. .labeldom {
  572. .el-tabs__nav-wrap::after {
  573. background: none;
  574. }
  575. }
  576. .w200px {
  577. width: 200px;
  578. }
  579. </style>
  580. <style scoped>
  581. .ch-input .el-input__inner {
  582. border-radius: 0px;
  583. border-color: #32323a;
  584. }
  585. .ch-input-size {
  586. width: 150px;
  587. }
  588. .ch-button {
  589. borderund-color: #32323a;
  590. color: #fff;
  591. }
  592. .ch-button-warning {
  593. margin-left: 10px;
  594. border-radius: 0px;
  595. border-color: #E75B5B;
  596. background-color: #E75B5B;
  597. color: #fff;
  598. }
  599. </style>