verifyModal.vue 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <a-modal
  3. centered
  4. :footer="null"
  5. :maskClosable="false"
  6. title="费用报销单审核进度"
  7. v-model="isShow"
  8. @cancle="isShow=false"
  9. width="50%">
  10. <p>说明:以下信息来自钉钉</p>
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <s-table
  13. class="sTable fixPagination"
  14. ref="table"
  15. size="small"
  16. :rowKey="(record) => record.id"
  17. :columns="columns"
  18. :data="loadData"
  19. :scroll="{ y: 500 }"
  20. :showPagination="false"
  21. :defaultLoadData="true"
  22. bordered>
  23. </s-table>
  24. </a-spin>
  25. </a-modal>
  26. </template>
  27. <script>
  28. import { STable } from '@/components'
  29. import { getProcessInstance } from '@/api/expenseManagement'
  30. export default {
  31. name: 'VerifyModal',
  32. components: { STable },
  33. props: {
  34. openModal: {
  35. type: Boolean,
  36. default: false
  37. },
  38. itemSn: {
  39. type: [Number, String],
  40. default: ''
  41. }
  42. },
  43. data () {
  44. return {
  45. spinning: false,
  46. isShow: this.openModal,
  47. columns: [{ title: '序号', dataIndex: 'no', width: '8%', align: 'center' },
  48. { title: '人员姓名', width: '12%', dataIndex: 'userName', align: 'center', customRender: function (text) { return text || '--' } },
  49. { title: '人员类型', dataIndex: 'userType', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  50. { title: '状态', dataIndex: 'state', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  51. { title: '审批意见', dataIndex: 'remark', width: '20%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  52. { title: '附件', dataIndex: 'hasAttachments', width: '20%', align: 'center', customRender: function (text) { return text != '0' ? '请在钉钉中查看附件内容' : '--' } },
  53. { title: '操作时间', dataIndex: 'date', width: '20%', align: 'center', customRender: function (text) { return text || '--' } }],
  54. // 加载数据方法 必须为 Promise 对象
  55. loadData: parameter => {
  56. this.spinning = true
  57. delete parameter.tableId
  58. delete parameter.index
  59. return getProcessInstance({ businessType: 'EXPENSES', businessSn: this.itemSn }).then(res => {
  60. let data
  61. if (res.status == 200) {
  62. data = res.data
  63. const no = 0
  64. for (var i = 0; i < data.length; i++) {
  65. data[i].no = no + i + 1
  66. }
  67. this.disabled = false
  68. }
  69. this.spinning = false
  70. return data
  71. })
  72. }
  73. }
  74. },
  75. watch: {
  76. openModal (nVal, oVal) {
  77. this.isShow = nVal
  78. },
  79. isShow (nVal, oVal) {
  80. if (!nVal) {
  81. this.$emit('close')
  82. this.$refs.table.clearTable()
  83. } else {
  84. this.$nextTick(() => {
  85. this.$refs.table.refresh()
  86. })
  87. }
  88. },
  89. itemSn (nVal, oVal) {
  90. }
  91. }
  92. }
  93. </script>
  94. <style>
  95. </style>