工单开发-APP

工单开发-APP

可跳转【小程序】、【H5页面】

需先注册工单

一、引入 pai-sp-mobile

1.安装【中台】pai-mp-ui 插件库

npm install @flyriselink/pai-mp-ui -S

2.安装 业务组件库

npm install @flyriselink/pai-sp-mobile -S

// main.js
import flyrise from "@flyriselink/pai-mp-ui";
import SPUI from "@flyriselink/pai-sp-mobile";

//pai工具$p
Vue.use(flyrise)

let { $p } = Vue.prototype

// SPUI框架
Vue.use(SPUI, {
    baseUrl: $p.tool.getBasePath(),
    token: () => {
        return $p.tool.getToken()
    },
});

3.引入组件

"easycom": {
    "autoscan": true,
    "custom": {
        "^sp-(.*)": "@flyriselink/pai-sp-mobile/components/sp-$1/sp-$1.vue"
    }
},

4.vue.config.js

module.exports = {
    transpileDependencies: ['@flyriselink/pai-mp-ui', '@flyriselink/pai-sp-mobile'],
    ...
}

二、工单上报

1、注意：上报的前提：

• ①、先注册工单，复制 orderKey
• ②、业务执行保存后，返回id
• ③、中台 entId != 档案 enterprise，需先转换

2、调用档案匹配组件

第3点的 enterpriseId 可以使用组件 <sp-enterprise-match /> 获取中台入驻企业的entId 在企业档案里的id

<sp-enterprise-match v-model="enterpriseId" :entId="entId" :parkId="parkId"/>

3、执行上报

this.$spui.workOrder.report({
  "bizId": "1234566666666666",
  "orderKey": "1494203921034514432",
  "parkId": "1433617920071446528",
  "title": "SP-UI上报工单标题",
  "enterpriseId": "1433617920071446529",
  "priority": 1
}) .then((res) => {
    uni.showToast({
        title: '上报成功',
    })
})

三、工单处理（流程记录、处理按钮）

与 WEB 不同：

• ①、是小程序之间进行跳转
• ②、分开【进度】与【办理】，需分别调用组件
• ③、办理时，一般同时调 <sp-work-order /> 与 <sp-work-order-record />

1.一般在【我的工单】小程序里，进行跳转到【业务小程序】，携带的参数：instanceId 与

2.APP处理时：

在表单里，使用【工单引擎组件】<sp-work-order />

<template>
    <sp-work-order
        ref="WorkOrder"
        v-if="formType != 'add' && instanceId"
        :parkId="form.parkId"
        :instance-id="instanceId"
        @update="updateData"
    ></sp-work-order>
</template>

<script>
export default {
  data() {
      return {
        formId: '',
        instanceId: '',
        formType: 'view'
    }
  },
  onLoad(option) {
    this.isRedirect = this.$p.tool.redirect(this, option)
    this.$nextTick(() => {
        let bizData = option.biz || '{}'
        try {
            bizData = JSON.parse(bizData)
        } catch (e) {
            bizData = {}
        }
        let formId = option.id || bizData.id
        this.formId = formId
        this.instanceId = option.instanceId || bizData.instanceId

        if (this.formId) {
            this.formType = 'view'
        }

        this.loadInit()
    })
  },
  methods: {
    updateData() {
      console.log('更新数据')
    },
  },
}
</script>

pai-sp-ui 文档链接：https://pai.flyrise.cn/pai-sp-ui/#/docs/work-order

3.处理时查看记录：

在表单里，使用【工单进度组件】<sp-work-order-record />

<sp-work-order-record
ref="WorkOrderRecord"
v-if="formType != 'add' && instanceId"
:instance-id="instanceId"
></sp-work-order-record>

4.办理时效果如下:

四、工单评价

使用【工单评价组件】<sp-work-order-evaluation />

<template>
    <div>
        <sp-work-order-evaluation
        :dialog.sync="evaDialog"
        :bizUrl="evaDialog.bizUrl"
        @update="updateList"
        ></sp-work-order-evaluation>

        <button @click="clickHandle">评价</button>
        <button @click="clickViewEva">已评价</button>
    </div>
</template>

<script>
export default {
  data() {
      return {
        evaDialog: {
          visible: false,
          parkId: '1433617920071446528',
          bizUrl: '/service-property-repairs-api/repairs/v1/customer/evaluate'
        },
    }
  },
  methods: {
      clickHandle() {
          this.evaDialog.type = 'add'
          this.evaDialog.title = '物业报修工单 xxx'
          this.evaDialog.id = '1497402882945126402'
          this.evaDialog.visible = true
      },
      clickViewEva() {
          this.evaDialog.type = 'view'
          this.evaDialog.title = '物业报修工单 xxx'
          this.evaDialog.id = '1497402882945126402'
          this.evaDialog.visible = true
      },
  },
}
</script>

一般情况：需要判断状态为已验收后，进行评价

parkId: 需传入当前园区id
bizUrl: 为业务评价的接口后端 api
type: add 为新增评价，需传入业务id
type: view 为查看评价，需传入业务id