handle.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437
  1. <template>
  2. <div class="app-container">
  3. <div v-if="isLoadingStatus" />
  4. <div v-else>
  5. <el-card class="box-card">
  6. <div class="text item">
  7. <el-steps v-if="currentNode.clazz !== undefined && currentNode.clazz !== null && currentNode.clazz !== ''" :active="activeIndex" finish-status="success">
  8. <template v-for="(item, index) in nodeStepList">
  9. <el-step
  10. v-if="item.isHideNode === false ||
  11. item.isHideNode === undefined ||
  12. item.isHideNode == null ||
  13. item.id === processStructureValue.workOrder.current_state"
  14. :key="index"
  15. :title="item.label"
  16. />
  17. </template>
  18. </el-steps>
  19. <div v-else>
  20. <el-alert
  21. show-icon
  22. title="未找到当前工单流程信息,请确认当前工单绑定的流程是否存在。"
  23. type="warning"
  24. />
  25. </div>
  26. </div>
  27. </el-card>
  28. <el-alert
  29. v-if="activeIndex !== nodeStepList.length && processStructureValue.workOrder.is_end===1"
  30. style="margin-top: 15px"
  31. :title="alertMessage"
  32. type="error"
  33. :closable="false"
  34. />
  35. <el-card class="box-card" style="margin-top: 15px">
  36. <div slot="header" class="clearfix">
  37. <span>公共信息</span>
  38. </div>
  39. <div class="text item">
  40. <el-form label-width="100px">
  41. <el-row>
  42. <el-col :span="12">
  43. <el-form-item label="标题:" style="margin-bottom: 5px">
  44. <span>{{ processStructureValue.workOrder.title }}</span>
  45. </el-form-item>
  46. </el-col>
  47. <el-col :span="12">
  48. <el-form-item label="优先级:" style="margin-bottom: 0">
  49. <span v-if="processStructureValue.workOrder.priority===2">
  50. <el-tag type="warning">紧急</el-tag>
  51. </span>
  52. <span v-else-if="processStructureValue.workOrder.priority===3">
  53. <el-tag type="danger">非常紧急</el-tag>
  54. </span>
  55. <span v-else>
  56. <el-tag type="success">一般</el-tag>
  57. </span>
  58. </el-form-item>
  59. </el-col>
  60. </el-row>
  61. </el-form>
  62. </div>
  63. </el-card>
  64. <el-card class="box-card" style="margin-top: 15px;">
  65. <div slot="header" class="clearfix">
  66. <span>表单信息</span>
  67. </div>
  68. <div class="text item">
  69. <template v-for="(tplItem, tplIndex) in processStructureValue.tpls">
  70. <fm-generate-form
  71. v-show="currentNode.hideTpls===undefined ||
  72. currentNode.hideTpls===null ||
  73. currentNode.hideTpls.indexOf(tplItem.form_structure.id)===-1"
  74. :key="tplIndex"
  75. :ref="'generateForm-'+tplItem.id"
  76. :preview="(currentNode.hideTpls!==undefined &&
  77. currentNode.hideTpls!==null &&
  78. currentNode.hideTpls.indexOf(tplItem.form_structure.id)!==-1) ||
  79. (currentNode.writeTpls===undefined ||
  80. currentNode.writeTpls===null ||
  81. currentNode.writeTpls.indexOf(tplItem.form_structure.id)===-1)||
  82. (isActiveProcessing && currentNode.activeOrder)?true:false"
  83. :remote="remoteFunc"
  84. :value="tplItem.form_data"
  85. :data="tplItem.form_structure"
  86. :organ-list="organList"
  87. />
  88. </template>
  89. </div>
  90. <div v-if="processStructureValue.userAuthority">
  91. <hr style="background-color: #d9d9d9; border:0; height:1px; margin-bottom: 15px">
  92. <el-form ref="dataFrom" label-position="left" :model="dataList" label-width="150">
  93. <el-form-item label="备注信息" prop="remarks" :rules="[{ required: true, message: '请输入备注信息', trigger: 'blur' }]">
  94. <el-input
  95. v-model="dataList.remarks"
  96. type="textarea"
  97. placeholder="请输入备注信息"
  98. maxlength="200"
  99. :autosize="{ minRows: 3, maxRows: 99}"
  100. show-word-limit
  101. />
  102. </el-form-item>
  103. <div class="text item" style="text-align: center;margin-top:18px">
  104. <el-button
  105. v-for="(item, index) in btn_group"
  106. :key="index"
  107. :type="item.className"
  108. @click="submitAction(item)" >{{ item.labelShow }}</el-button>
  109. <!-- 拒绝按钮内置 -->
  110. <el-button
  111. v-if="endNodeDetail.id"
  112. type="danger"
  113. @click="submitAction(endNodeDetail)" >{{ endNodeDetail.label }}</el-button>
  114. <!-- <div
  115. v-if="isActiveProcessing && currentNode.activeOrder"
  116. >
  117. <el-button
  118. v-permisaction="['process:list:handle:active']"
  119. type="primary"
  120. @click="activeOrderActive"
  121. >
  122. 主动接单
  123. </el-button>
  124. </div>
  125. <div v-else> -->
  126. <!-- <template v-for="(item, index) in processStructureValue.edges">
  127. <el-button
  128. v-if="processStructureValue.workOrder.is_end===0 && item.source===currentNode.id"
  129. :key="index"
  130. type="primary"
  131. @click="submitAction(item)"
  132. >
  133. {{ item.label }}
  134. </el-button>
  135. </template> -->
  136. <!-- </div> -->
  137. </div>
  138. </el-form>
  139. </div>
  140. </el-card>
  141. <el-card class="box-card" style="margin-top: 15px">
  142. <div slot="header" class="clearfix">
  143. <span>工单流转历史</span>
  144. </div>
  145. <div class="text item">
  146. <el-table
  147. :data="circulationHistoryList"
  148. border
  149. style="width: 100%"
  150. >
  151. <el-table-column
  152. prop="state"
  153. label="节点"
  154. />
  155. <el-table-column
  156. prop="circulation"
  157. label="流转"
  158. />
  159. <el-table-column
  160. prop="processor"
  161. label="处理人"
  162. />
  163. <el-table-column
  164. prop="create_time"
  165. label="处理时间"
  166. />
  167. <el-table-column
  168. prop="remarks"
  169. label="备注"
  170. />
  171. </el-table>
  172. </div>
  173. </el-card>
  174. </div>
  175. </div>
  176. </template>
  177. <script>
  178. import Vue from 'vue'
  179. import {
  180. GenerateForm
  181. } from '@/components/VueFormMaking'
  182. import 'form-making/dist/FormMaking.css'
  183. Vue.component(GenerateForm.name, GenerateForm)
  184. import {
  185. processStructure,
  186. handleWorkOrder,
  187. activeOrder,
  188. asyncPlayLog,
  189. queryUserInfo,
  190. queryAllOrgan
  191. } from '@/api/process/work-order'
  192. import { listUser } from '@/api/system/sysuser'
  193. import { mapGetters } from 'vuex'
  194. export default {
  195. data() {
  196. return {
  197. isLoadingStatus: true,
  198. currentNode: {
  199. hideTpls: null,
  200. writeTpls: null
  201. },
  202. isActiveProcessing: false,
  203. tpls: [],
  204. organList: [],
  205. dataList: {
  206. remarks: '', // 备注信息
  207. },
  208. alertMessage: '',
  209. nodeStepList: [],
  210. circulationHistoryList: [],
  211. activeIndex: 0,
  212. processStructureValue: {
  213. workOrder: { title: '' }
  214. },
  215. endNodeDetail: {}, // 结束结节信息
  216. ruleForm: {
  217. title: '',
  218. process: '',
  219. classify: '',
  220. state_id: '',
  221. state: '',
  222. source_state: '',
  223. processor: '',
  224. process_method: '',
  225. tpls: [],
  226. tasks: []
  227. },
  228. userId: null,
  229. tenantId: 1,
  230. btn_group: [],
  231. is_end: 0, // 是否结束
  232. remoteFunc: {
  233. // 获取用户列表
  234. userList(resolve) {
  235. listUser({
  236. pageSize: 999999
  237. }).then(response => {
  238. const options = response.data.list
  239. resolve(options)
  240. })
  241. }
  242. }
  243. }
  244. },
  245. computed: {
  246. ...mapGetters([
  247. 'userId'
  248. ])
  249. },
  250. async created() {
  251. await this.getUserInfo()
  252. this.getAllOrgan()
  253. this.getProcessNodeList()
  254. },
  255. methods: {
  256. async getUserInfo() {
  257. await queryUserInfo().then(res => {
  258. console.log(res)
  259. if(res.code == 200) {
  260. this.userId = res.data.id
  261. this.tenantId = res.data.tenantId
  262. } else {
  263. this.$message.error(res.data)
  264. }
  265. })
  266. },
  267. getProcessNodeList() {
  268. processStructure({
  269. processId: this.$route.query.processId,
  270. workOrderId: this.$route.query.workOrderId,
  271. userId: this.userId
  272. }).then(response => {
  273. this.isActiveProcessing = false
  274. this.processStructureValue = response.data
  275. this.circulationHistoryList = this.processStructureValue.circulationHistory
  276. // 获取当前展示节点列表
  277. this.nodeStepList = []
  278. if(this.processStructureValue.nodes) {
  279. for (var i = 0; i < this.processStructureValue.nodes.length; i++) {
  280. if (this.processStructureValue.nodes[i].id === this.processStructureValue.workOrder.current_state) {
  281. // 当前节点
  282. this.nodeStepList.push(this.processStructureValue.nodes[i])
  283. this.activeIndex = this.nodeStepList.length - 1
  284. if (i + 1 === this.processStructureValue.nodes.length) {
  285. this.activeIndex = this.nodeStepList.length
  286. }
  287. this.currentNode = this.processStructureValue.nodes[i]
  288. } else if (!this.processStructureValue.nodes[i].isHideNode) {
  289. // 非隐藏节点
  290. this.nodeStepList.push(this.processStructureValue.nodes[i])
  291. }
  292. }
  293. }
  294. // 如果回退到初始节点则可编辑。
  295. if (this.activeIndex === 0 && this.currentNode.clazz === 'start') {
  296. this.currentNode.writeTpls = []
  297. for (var tplTmp of this.processStructureValue.tpls) {
  298. this.currentNode.writeTpls.push(tplTmp.form_structure.id)
  299. }
  300. }
  301. // 判断是否需要主动处理
  302. for (var stateValue of this.processStructureValue.workOrder.state) {
  303. if (this.processStructureValue.workOrder.current_state === stateValue.id && stateValue.processor.length > 1) {
  304. this.isActiveProcessing = true
  305. break
  306. }
  307. }
  308. const nodes = this.processStructureValue.nodes
  309. for (var i = 0; i < nodes.length; i++) {
  310. // 判断节点里面是否有结束节点,而且一个流程里面只能有一个结束结点,
  311. if(nodes[i].clazz == 'end') {
  312. this.endNodeDetail = JSON.parse(JSON.stringify(nodes[i]))
  313. this.endNodeDetail.target = nodes[i].id
  314. this.endNodeDetail.flowProperties = 0 // 拒绝属性
  315. this.endNodeDetail.label = '拒绝'
  316. }
  317. }
  318. let psv = response.data.edges || []
  319. let btn_group = []
  320. psv.forEach(item => {
  321. // 过滤其它类型的操作
  322. if(this.processStructureValue.workOrder.is_end===0 && item.source===this.currentNode.id && item.flowProperties == 1) {
  323. if(item.flowProperties == 1) {
  324. item.className = 'primary'
  325. item.labelShow = '同意'
  326. } else if(item.flowProperties == 0) {
  327. item.className = 'danger'
  328. } else if(item.flowProperties == 2) {
  329. item.className = 'primary'
  330. }
  331. btn_group.push(item)
  332. } else {
  333. item.className = 'primary'
  334. }
  335. })
  336. this.btn_group = btn_group
  337. this.isLoadingStatus = false
  338. this.getAlertMessage()
  339. })
  340. },
  341. submitAction(item) {
  342. var promiseList = []
  343. this.tpls = []
  344. for (var tpl of this.processStructureValue.tpls) {
  345. this.tpls.push({
  346. tplDataId: tpl.id,
  347. tplId: tpl.form_structure.id
  348. })
  349. promiseList.push(this.$refs['generateForm-' + tpl.id][0].getData())
  350. }
  351. this.$refs['dataFrom'].validate(_ => {
  352. if(_) {
  353. Promise.all(promiseList).then(values => {
  354. for (var tplDataIndex in this.tpls) {
  355. this.tpls[tplDataIndex].tplValue = values[tplDataIndex]
  356. }
  357. handleWorkOrder({
  358. tasks: this.processStructureValue.process.task,
  359. source_state: this.processStructureValue.workOrder.current_state,
  360. target_state: item.target,
  361. circulation: item.label,
  362. flow_properties: item.flowProperties === undefined ? 2 : parseInt(item.flowProperties),
  363. work_order_id: parseInt(this.$route.query.workOrderId),
  364. remarks: this.dataList.remarks,
  365. tpls: this.tpls
  366. }).then(async (response) => {
  367. if (response.code === 200) {
  368. // this.$router.push({ name: 'upcoming' })
  369. await asyncPlayLog({ workOrderId: parseInt(this.$route.query.workOrderId) })
  370. // window.location.reload()
  371. this.getProcessNodeList()
  372. }
  373. })
  374. })
  375. }
  376. })
  377. },
  378. // 获取提示消息
  379. getAlertMessage() {
  380. if (this.processStructureValue.workOrder.is_end === 1) {
  381. this.alertMessage = '当前工单已结束。'
  382. }
  383. },
  384. activeOrderActive() {
  385. var jsonData = [{
  386. id: this.nodeStepList[this.activeIndex].id,
  387. label: this.nodeStepList[this.activeIndex].label,
  388. process_method: 'person',
  389. processor: [this.userId]
  390. }]
  391. activeOrder(jsonData, this.$route.query.workOrderId).then(() => {
  392. this.getProcessNodeList()
  393. })
  394. },
  395. getAllOrgan() {
  396. queryAllOrgan({ tenantId: this.tenantId }).then(res => {
  397. if (res.code == 200) {
  398. const result = res.data;
  399. const filterOrganId = [36, 39, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 52, 54, 55, 56]
  400. let tempOrgan = []
  401. // 过滤不会显示的分部
  402. result.forEach(item => {
  403. if (!filterOrganId.includes(item.id)) {
  404. tempOrgan.push(item)
  405. }
  406. })
  407. this.organList = tempOrgan
  408. }
  409. })
  410. }
  411. }
  412. }
  413. </script>
  414. <style lang="scss" scoped>
  415. /deep/ .el-step__title {
  416. font-size: 14px;
  417. line-height: 1.3;
  418. width: 80%;
  419. padding-top: 10px;
  420. }
  421. </style>