applyHome.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <template>
  2. <a-card :bordered="false">
  3. <!--流程申请选择-->
  4. <a-input-search style="margin-bottom: 10px;margin-right:10px;width: 200px" v-model="searchProcessKey"
  5. placeholder="输入流程名称" @search="onSearchProcess" />
  6. <a-button @click="onSearchProcess(searchProcessKey)" type="primary">查询</a-button>
  7. <a-button @click="onSearchProcess('')">重置</a-button>
  8. <a-button @click="handleToApplyList" type="primary" style="float: right;">前往我的申请列表</a-button>
  9. <a-empty description="无流程可供选择" v-if="activeKeyAll.length==0" />
  10. <div v-else>
  11. <a-collapse v-model="activeKey">
  12. <a-collapse-panel v-for="(value, index) in activeKeyAll" :header="filterDictText(dictOptions,value)||'未分类'"
  13. :key="value">
  14. <a-list :grid="{ gutter: 10,column:4}" :dataSource="processDataMap[value]">
  15. <a-list-item slot="renderItem" slot-scope="item">
  16. <a-card>
  17. <div slot="title">
  18. <a-row>
  19. <a-col span="12" :title="item.name">{{item.name}} </a-col>
  20. <a-col span="12" style="text-align: right;">
  21. <a href="javascript:void (0)" @click="chooseProcess(item)">发起申请</a>
  22. </a-col>
  23. </a-row>
  24. </div>
  25. <b>版本:</b>v.{{item.version}}
  26. <br />
  27. <b>说明:</b>{{item.description}}
  28. </a-card>
  29. </a-list-item>
  30. </a-list>
  31. </a-collapse-panel>
  32. </a-collapse>
  33. </div>
  34. <!--流程表单-->
  35. <a-modal :title="lcModa.title" v-model="lcModa.visible" :footer="null" :maskClosable="false" width="80%">
  36. <component :disabled="lcModa.disabled" v-if="lcModa.visible" :is="lcModa.formComponent"
  37. :processData="lcModa.processData" :isNew="lcModa.isNew" @afterSubmit="afterSub"
  38. @close="lcModa.visible=false,lcModa.disabled = false"></component>
  39. </a-modal>
  40. </a-card>
  41. </template>
  42. <script>
  43. import {
  44. activitiMixin
  45. } from '@/views/activiti/mixins/activitiMixin'
  46. import JEllipsis from '@/components/jeecg/JEllipsis'
  47. import JTreeSelect from '@/components/jeecg/JTreeSelect'
  48. import {
  49. initDictOptions,
  50. filterDictText
  51. } from '@/components/dict/JDictSelectUtil'
  52. import historicDetail from '@/views/activiti/historicDetail'
  53. export default {
  54. name: "applyHome",
  55. mixins: [activitiMixin],
  56. components: {
  57. JEllipsis,
  58. JTreeSelect,
  59. historicDetail
  60. },
  61. data() {
  62. return {
  63. typeList: ["input", "textarea", "number", "select", "checkbox", "radio", "date", "time", "rate", "slider",
  64. "uploadFile", "uploadImg", "switch", "button", "text", "card", "grid", "table"
  65. ],//"alert","html", "divider",
  66. description: '所有',
  67. dictOptions: [],
  68. url: {
  69. getProcessDataList: "/activiti_process/listData",
  70. getFirstNode: '/actProcessIns/getFirstNode',
  71. applyBusiness: '/actBusiness/apply',
  72. },
  73. // 查询条件
  74. queryParam: {
  75. createTimeRange: [],
  76. keyWord: '',
  77. },
  78. // 表头
  79. labelCol: {
  80. xs: {
  81. span: 4
  82. },
  83. sm: {
  84. span: 4
  85. },
  86. },
  87. wrapperCol: {
  88. xs: {
  89. span: 20
  90. },
  91. sm: {
  92. span: 20
  93. },
  94. },
  95. processModalVisible: null,
  96. activeKeyAll: [],
  97. activeKey: [],
  98. processDataMap: {},
  99. searchProcessKey: null,
  100. addApplyLoading: false,
  101. lcModa: {
  102. title: '',
  103. disabled: false,
  104. visible: false,
  105. formComponent: null,
  106. isNew: false
  107. },
  108. }
  109. },
  110. computed: {},
  111. mounted() {
  112. this.initDictConfig()
  113. this.getProcessList()
  114. },
  115. methods: {
  116. saveJson(json) {
  117. console.log(json)
  118. },
  119. initDictConfig() {
  120. //初始化字典 - 流程分类
  121. initDictOptions('bpm_process_type').then((res) => {
  122. if (res.success) {
  123. this.dictOptions = res.result;
  124. }
  125. });
  126. },
  127. filterDictText(dictOptions, text) {
  128. if (dictOptions instanceof Array) {
  129. for (let dictItem of dictOptions) {
  130. if (text === dictItem.value) {
  131. return dictItem.text
  132. }
  133. }
  134. }
  135. return text || text == 'null' ? '' : text
  136. },
  137. /*加载流程列表*/
  138. getProcessList() {
  139. this.addApplyLoading = true;
  140. this.getAction(this.url.getProcessDataList, {
  141. status: 1,
  142. roles: true
  143. }).then(res => {
  144. this.activeKeyAll = [];
  145. if (res.success) {
  146. var result = res.result || [];
  147. if (result.length > 0) {
  148. let searchProcessKey = this.searchProcessKey;
  149. if (searchProcessKey) { //过滤条件
  150. result = _.filter(result, function (o) {
  151. return o.name.indexOf(searchProcessKey) > -1;
  152. });
  153. }
  154. this.processDataMap = _.groupBy(result, 'categoryId');
  155. for (const categoryId in this.processDataMap) {
  156. this.activeKeyAll.push(categoryId)
  157. }
  158. this.activeKey = this.activeKeyAll;
  159. }
  160. this.processModalVisible = true;
  161. } else {
  162. this.$message.warning(res.message)
  163. }
  164. }).finally(() => this.addApplyLoading = false);
  165. },
  166. onSearchProcess(value) {
  167. this.searchProcessKey = value;
  168. this.getProcessList()
  169. },
  170. chooseProcess(v) {
  171. if (!v.routeName) {
  172. this.$message.warning(
  173. "该流程信息未配置表单,请联系开发人员!"
  174. );
  175. return;
  176. }
  177. this.lcModa.formComponent = this.getFormComponent(v.routeName).component;
  178. this.lcModa.title = '发起流程:' + v.name;
  179. this.lcModa.isNew = true;
  180. this.lcModa.processData = v;
  181. this.lcModa.visible = true;
  182. console.log("发起", v)
  183. },
  184. /*提交成功申请后*/
  185. afterSub(formData) {
  186. this.lcModa.visible = false;
  187. this.$message("请前往我的申请列表提交审批!")
  188. },
  189. /*前往我的申请页面*/
  190. handleToApplyList() {
  191. this.$router.push({
  192. path: '/activiti/applyList'
  193. })
  194. }
  195. }
  196. }
  197. </script>
  198. <style scoped>
  199. @import '~@assets/less/common.less';
  200. </style>