vue2-client 1.22.7 → 1.22.8

package/src/pages/WorkflowDetail/WorkFlowDemo4.vue

@@ -0,0 +1,127 @@
+<template>
+  <a-card :bordered="false">
+    <a-tabs default-active-key="1" @change="changeTab">
+      <a-tab-pane key="1" tab="待办">
+        <x-form-table
+          title="站点工单(待办)"
+          ref="xFormTable"
+          queryParamsName="teleProcessCRUD"
+          :fixed-query-form="{
+            wo_f_department_id: currUser.depids,
+          }"
+          serviceName="af-telephone"
+          @toDeal="toDetail"
+          @updateInfo="updateInfo"
+          @transfer="transfer"
+          @toFinish="toFinish"
+        >
+        </x-form-table>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="已办">
+        <x-form-table
+          title="站点工单(已办)"
+          ref="xFormTableDone"
+          queryParamsName="teleProcessDoneCRUD"
+          :fixed-query-form="{
+            wo_f_department_id: currUser.depids,
+          }"
+          serviceName="af-telephone"
+          @action="toView"
+          @reminder="toReminder"
+        >
+        </x-form-table>
+      </a-tab-pane>
+    </a-tabs>
+    <WorkflowDetail
+      ref="workFlow"
+      @preClick="preClick"
+      @success="success"
+      @nextClick="nextClick"
+      @x-form-item-emit-func="handleFormItemEvent"
+    >
+    </WorkflowDetail>
+  </a-card>
+</template>
+
+<script>
+import WorkflowDetail from '@vue2-client/pages/WorkflowDetail/WorkflowDetail.vue'
+import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
+import { mapState } from 'vuex'
+import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
+
+export default {
+  name: 'Telephone',
+  components: {
+    XFormTable,
+    WorkflowDetail,
+    XAddNativeForm
+  },
+  // 透传给子组件的方法（目前XFormTable接了）
+  provide () {
+    return {
+      generalFunction: {}
+    }
+  },
+  data () {
+    return {
+      // 当前工单id
+      currentWorkOrderId: '',
+      // 提交加载动画
+      confirmLoading: false,
+      chargeVisible: false,
+      // 环节人员信息
+      chargePerson: {},
+      chargePersonOptions: [],
+      transferData: {
+        optionsValue: '',
+        remark: ''
+      },
+      record: {},
+      define: {},
+      // 是否展示催单结案弹窗
+      showReminder: false,
+      // 弹窗类型 催单/ 结案
+      modelType: ''
+    }
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+  },
+  methods: {
+    changeTab (key) {
+      console.log('切换tab', key)
+      if (key === '1') {
+        this.$refs.xFormTable.refreshTable(true)
+      } else if (key === '2') {
+        this.$refs.xFormTableDone.refreshTable(true)
+      }
+    },
+    success () {
+      console.log('完工')
+    },
+    toDetail (record) {
+      // 修改第一步的工单
+      if (record.ws_f_step_id === 1 && record.w_f_state === 0) {
+        console.log('进入工单详情')
+        if (record.w_f_workflow_define_name === '报修单处理流程') {
+          this.$refs.dealOrUpdate.dealOrUpdate(record, '处理工单')
+        } else if (record.w_f_workflow_define_name === '投诉单处理流程') {
+          this.$refs.dealComplaint.dealComplaintOrder(record)
+        } else if (record.w_f_workflow_define_name === '咨询单处理流程') {
+          this.$refs.dealConsultation.dealConsultationOrder(record)
+        } else {
+          this.$message.warn('未知流程类型')
+        }
+      } else {
+        // 记录流程节点名称
+        this.currentWorkOrderId = record.wo_id
+        // 进入流程详情
+        this.$refs.workFlow.init({
+          workflowId: record.wo_f_workflow_id,
+          stepId: record.ws_f_step_id
+        })
+      }
+    },
+  }
+}
+</script>