zbcx_ckyc 1.0.0

package/src/plugins/cxMixin/IGridBpm.js

@@ -0,0 +1,732 @@
+import IPlugBase from './IPlugBase'
+
+/**
+ * 修改记录:
+ * 22-06-11       张发勇          js -> vue
+ */
+
+/**
+ * cx.mixin.IGridBpm
+ * 混淆类 - 基于 Grid 的BPM 基类
+ *
+ * @mixes       cx.mixin.IPlugBase
+ * @module      cx.mixin.IGridBpm
+ * @memberof    cx.mixin
+ */
+
+export default
+{
+  mixins: [IPlugBase],
+
+  /** @member    {Object}      exp         查询条件 */
+  /** @member    {Object}      dg          datagrid组件datagrid参数 */
+  data()
+  {
+    return {
+      exp:
+      {
+        init: 0,
+        pageno: 1,
+        pagesize: cx.consts.PAGE_SIZE
+      },                                    // 查询条件对象
+      orderby: '',                          // 排序
+      list: [],                             // 数据
+      opers: [],                            // 操作列
+      key: '',                              // 查询Key
+      dg:
+      {
+        pages: true,                        // 是否使用分页
+        // 表格
+        table:
+        {
+          elAtts:
+          {
+            border: true,                     // 是否带有纵向边框
+            stripe: true,                     // 是否为斑马纹 table
+            'row-style': ({ row, rowIndex }) => this.onRowStyle({ row, rowIndex }),                     // 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。
+            'cell-style': ({ row, column, rowIndex, columnIndex }) => this.onCellStyle({ row, column, rowIndex, columnIndex })           // 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
+          },
+          elEvts:
+          {
+          },
+          fitWidth: true,                   // 宽度自适应
+          multiple: false,                  // 是否支持多选'
+          operFix: 'right',                 // 操作列固定右边
+          list: [],                         // 数据列表
+          cols: [],                         // 列信息
+          operCols: []                      // 操作列信息
+        },
+        // 分页
+        page:
+        {
+          total: 0,                         // 数据量
+          pageSize: cx.consts.PAGE_SIZE,    // 每页记录数
+          pageSizes: cx.consts.PAGE_SIZES   // 分页标准
+        }
+      }
+    }
+  },
+
+  /** @property    {Object}      dgAtts     DataGrid 属性 */
+  /** @property    {Object}      dgEvts     DataGrid 事件 */
+  computed:
+  {
+    dgAtts()
+    {
+      return {
+        size: this.size,
+        datagrid: this.dg
+      }
+    },
+
+    dgEvts()
+    {
+      return {
+        'sort-change': (name, sort) => this.onSortChange(name, sort),
+        'row-click': att => this.onRowClick(att),
+        'row-dblclick': att => this.onRowDblClick(att),
+        'selection-change': (selection) => this.onSelectionChange(selection),
+        'button-click': (btn, att) => this.onButtonClick(btn, att),
+        'pagesize-change': (pagesize) => this.onPagesizeChage(pagesize),
+        'page-change': (pageno) => this.onPageChange(pageno)
+      }
+    }
+  },
+
+  /**
+   * beforeUnmount 钩子
+   * @method
+   */
+  beforeUnmount()
+  {
+    cx.events.unlisten(this)
+  },
+
+  /**
+   * 混合方法
+   * @class
+   */
+  methods:
+  {
+    /**
+     * 行样式
+     * @method
+     * @abstract
+     * @param   {Object}    att             行数据
+     * @param   {Number}    rowIndex        行索引
+     */
+    onRowStyle({ att, rowIndex })
+    {
+    },
+
+    /**
+     * 单元格样式
+     * @method
+     * @param   {Object}    opts             参数对象
+     * @param   {Object}    opts.att         行数据
+     * @param   {Object}    opts.column      列数据
+     * @param   {Number}    opts.rowIndex    行索引
+     * @param   {Number}    opts.columnIndex 列索引
+     * @returns {Object}                     样式对象
+     */
+    onCellStyle({ row, column, rowIndex, columnIndex })
+    {
+    },
+
+    /**
+     * 按列头排序
+     * @method
+     * @param  {String}     name            排序字段名
+     * @param  {String}     order           排序方式
+     */
+    onSortChange(name, order)
+    {
+      if (name && order)
+      {
+        // eslint-disable-next-line
+        if (name[0] == '_')
+          name = name.substring(1)
+        this.orderby = name + ' ' + order
+      }
+      else
+        this.orderby = ''
+      this.query()
+    },
+
+    /**
+     * 点击行
+     * @method
+     * @abstract
+     * @param   {Object}    att             行数据
+     */
+    onRowClick(att)
+    {
+    },
+
+    /**
+     * 双击行
+     * @method
+     * @abstract
+     * @param   {Object}    att             行数据
+     */
+    onRowDblClick(att)
+    {
+    },
+
+    /**
+     * 选择发生变化
+     * @method
+     * @abstract
+     * @param   {Array}     selection       选中的行数据
+     */
+    onSelectionChange(selection)
+    {
+    },
+
+    /**
+     * 点击按钮
+     * @method
+     * @param   {Object}    btn             点击的按钮
+     * @param   {Object}    att             行数据
+     */
+    onButtonClick(btn, att)
+    {
+      cx.base.call(btn.onClick, att)
+    },
+
+    /**
+     * 消息响应函数-选中某页
+     * @method
+     * @param   {Number}    pagesize    选中的页码
+     */
+    onPagesizeChage(pagesize)
+    {
+      if (this.exp.pagesize !== pagesize)
+      {
+        this.exp.pagesize = pagesize
+        this.exp.pageno = 1
+        this.query()
+      }
+    },
+
+    /**
+     * 消息响应函数-选中某页
+     * @method
+     * @param   {Number}    pageNo      选中的页码
+     */
+    onPageChange(pageNo)
+    {
+      if (this.exp.pageno !== pageNo)
+      {
+        this.exp.pageno = pageNo < 1 ? 1 : pageNo
+        this.query()
+      }
+    },
+
+    /**
+     * 初始化
+     * @method
+     */
+    init()
+    {
+      // DataGrid赋值
+      this.dg.table.list = this.list
+
+      // 构造操作列
+      const operCols = this.getOpers()
+      cx.array.appendArr(this.dg.table.operCols, operCols)
+      this.makeOpers(operCols)
+
+      // 构造DataGrid列
+      const cols = this.getCols()
+      this.dg.table.cols = cols
+      this.cols = cols
+    
+      // 发起默认查询
+      this.refresh()
+    },
+
+    /**
+     * 当前的流程发生变化
+     * @method
+     * @param   {String}    newVal          当前值发生变化
+     */
+    onProcChange(newVal)
+    {
+      this.key = newVal
+      this.query()
+    },
+
+    /**
+     * 消息响应函数-刷新
+     * @method
+     */
+    refresh()
+    {
+      this.exp.init = 0                      // 重新查询
+      this.exp.pageno = 1
+
+      this.query()
+    },
+
+    /**
+     * 消息响应函数-刷新
+     * @method
+     */
+    onRefresh()
+    {
+      this.refresh()
+    },
+
+    /**
+     * 向数据库发查询请求
+     * @method
+     */
+    query()
+    {
+    },
+
+    /**
+     * 接收到数据
+     * @method
+     * @param   {Array}   data              数据查询结果
+     */
+    onLoad(data)
+    {
+      cx.array.clear(this.list)
+      cx.array.appendArr(this.list, data)
+
+      // 显示数据
+      this.getDisp(this.list)
+
+      if (this.exp.init === 0)
+      {
+        this.exp.init = 1
+        this.dg.page.total = data.length
+      }
+    },
+
+    /**
+     * 取数据的显示信息
+     * @method
+     * @param  {Array}    list              数据列表
+     */
+    getDisp(list)
+    {
+      if (list)
+      {
+        for (let item of list)
+        {
+          item.applyUserName = item.variables.applyUserName
+          item.depart = item.variables.depart
+          item.reason = item.variables.reason
+        }
+      }
+    },
+
+    /**
+     * 获取datagrid列字段信息
+     * @abstract
+     * @method
+     * @returns {Array}                     返回datagrid列字段
+     */
+    getCols()
+    {
+      return []
+    },
+    
+    /**
+     * @method
+     * 重新计算opers
+     * @param   {Array}   operCols          操作列
+     * @returns {Object}                    this
+     */
+    makeOpers(operCols)
+    {
+      this.opers = []
+      for (let operCol of operCols)
+      {
+        for (let btn of operCol.btns)
+        {
+          btn.keyAble = btn.name + 'able_'
+          btn.keyShow = btn.name + 'show_'
+          this.opers.push(btn)
+        }
+      }
+    },
+
+    /**
+     * @method
+     * 计算各种操作的状态
+     * @param   {Object}    att             属性
+     * @returns {Object}                    this
+     */
+    calcOpers(att)
+    {
+      for (let oper of this.opers)
+      {
+        att[oper.keyAble] = oper.enable(att)
+        att[oper.keyShow] = oper.show(att)
+      }
+    },
+
+    /**
+     * 取操作按钮信息
+     * @abstract
+     * @method
+     * @returns {Array}
+     * @example
+     *     [{colname: String,
+     *       title: String,
+     *       width: Number,
+     *       [align: String = 'center']
+     *       btns: [{name: String, title: String, onClick: Function}]
+     *     }]
+     */
+    getOpers()
+    {
+      return []
+    },
+
+    /**
+     * 取到跟踪列
+     * @method
+     * @returns {Object}
+     */
+    getColTrace()
+    {
+      return cx.datagrid.getOperCol('trace_', this.$locProc('trace'), 110)
+    },
+
+    /**
+     * 取到流程列
+     * @method
+     * @returns {Object}
+     */
+    getColProc()
+    {
+      return cx.datagrid.getOperCol('proc_', this.$locProc('process'), 100)
+    },
+
+    /**
+     * 增加操作-详情
+     * @method
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    addOperDetail(operCol)
+    {
+      if (operCol)
+      {
+        operCol.btns.push(
+          {
+            name: 'detail_',
+            title: this.$locBase('detail'),
+            type: 'primary',
+            onClick: att =>
+            {
+              this._detail(att)
+            },
+            enable: att => true,
+            show: att => true
+          })
+      }
+      return this
+    },
+
+    /**
+     * 增加操作-流程跟踪图
+     * @method
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    addOperTrace(operCol)
+    {
+      if (operCol)
+      {
+        operCol.btns.push(
+          {
+            name: 'trace_',
+            title: this.$locProc('diagram'),
+            type: 'primary',
+            onClick: att =>
+            {
+              this._trace(att)
+            },
+            enable: att => true,
+            show: att => true
+          })
+      }
+      return this
+    },
+
+    /**
+     * 增加操作-流程进展
+     * @method
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    addOperProgress(operCol)
+    {
+      if (operCol)
+      {
+        operCol.btns.push(
+          {
+            name: 'prog_',
+            title: this.$locProc('progress'),
+            type: 'primary',
+            onClick: att =>
+            {
+              this._progress(att)
+            },
+            enable: att => true,
+            show: att => true
+          })
+      }
+      return this
+    },
+
+    /**
+     * 增加操作-签收
+     * @method
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    addOperClaim(operCol)
+    {
+      if (operCol)
+      {
+        operCol.btns.push(
+          {
+            name: 'claim_',
+            title: this.$locProc('claim'),
+            type: 'primary',
+            onClick: att =>
+            {
+              this._claim(att)
+            },
+            enable: att => true,
+            show: att => true
+          })
+      }
+      return this
+    },
+
+    /**
+     * 增加操作-退签
+     * @method
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    addOperUnclaim(operCol)
+    {
+      if (operCol)
+      {
+        operCol.btns.push(
+          {
+            name: 'unclaim_',
+            title: this.$locProc('unclaim'),
+            icon: '',
+            type: 'warning',
+            onClick: att =>
+            {
+              this._unclaim(att)
+            },
+            enable: att =>
+            {
+              // eslint-disable-next-line
+              return att.variables['TQ_' + att.taskDefinitionKey] == '1'
+            },
+            show: att => true
+          })
+      }
+      return this
+    },
+
+    /**
+     * 增加操作-办理
+     * @method
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    addOperHandle(operCol)
+    {
+      if (operCol)
+      {
+        operCol.btns.push(
+          {
+            name: 'handle_',
+            title: this.$locProc('handle'),
+            type: 'primary',
+            onClick: att =>
+            {
+              this._handle(att)
+            },
+            enable: att => true,
+            show: att => true
+          })
+      }
+      return this
+    },
+
+    /**
+     * 取插件名
+     * @method
+     * @param   {Number}    type            类型
+     * @param   {Object}    task            任务
+     * @returns {String}
+     */
+    getPluginName(type, task)
+    {
+      switch (type)
+      {
+      case cx.consts.PROC_PROGRESS: return 'ProcProgress'
+      case cx.consts.PROC_TRACE: return 'ProcTrace'
+      case cx.consts.PROC_HANDLE: return 'ProcHandle'
+      }
+
+      return ''
+    },
+
+    /**
+     * @method
+     * 工单详情
+     * @param   {Object}  task              任务信息
+     */
+    _detail(task)
+    {
+      const proc = cx.array.get1($g.init.procs, { tabname: task.variables.table })
+
+      if (proc && proc.plugins)
+      {
+        const plug = proc.plugins.detail
+
+        if (plug)
+        {
+          // 找实体信息
+          const entity = $g.entity.byName(proc.tabname)
+
+          // 取数据
+          cx.svr.data.queryId(entity.major, entity.minor, task.variables.businessKey)
+            .then(ret =>
+            {
+              const params =
+              {
+                major: entity.major,
+                minor: entity.minor,
+                editable: false,
+                att: ret,
+                task: task.name,
+                showComments: !!task.comments,
+                comments: task.comments,
+                applyInfo: cx.bpm.commentApply(task)
+              }
+              cx.base.execute(plug, [params])
+            })
+            .catch(this.onError)
+        }
+      }
+    },
+    
+    /**
+     * @method
+     * 跟踪图
+     * @param   {Object}  task              任务信息
+     */
+    _trace(task)
+    {
+      cx.bpm.procTraceByTask(task, this.getPluginName(cx.consts.PROC_TRACE, task))
+    },
+
+    /**
+     * 查询进展
+     * @method
+     * @param   {Object}  task              任务信息
+     */
+    _progress(task)
+    {
+      cx.bpm.procProgressByTask(task, this.getPluginName(cx.consts.PROC_PROGRESS, task))
+    },
+
+    /**
+     * 签收
+     * @method
+     * @param   {Object}  task              任务信息
+     */
+    _claim(task)
+    {
+      cx.svr.bpm.claimTask({ id: task.id })
+        .then(ret =>
+        {
+          // 更新数据总数
+          this.dg.page.total--
+          // 删除数据
+          cx.array.removeElement(this.list, task)
+          // 广播消息
+          cx.events.publish('AlarmNum', { userTaskDelta: -1 })
+
+          // 办理
+          const task1 = ret.task
+          if (task1.formKey)
+          {
+            cx.run.runPlug('ProcHandle',
+              {
+                task: task1,
+                onOk: () =>
+                {
+                  cx.events.publish('HandleTask', task1)
+                  cx.events.publish('AlarmNum', { myTaskDelta: -1 })
+                }
+              })
+          }
+        })
+        .catch(this.onError)
+    },
+
+    /**
+     * 退签
+     * @method
+     * @param   {Object}  task              任务信息
+     */
+    _unclaim(task)
+    {
+      cx.svr.bpm.unclaimTask({ id: task.id })
+        .then(ret =>
+        {
+          // 更新数据总数
+          this.dg.page.total--
+          // 删除数据
+          cx.array.removeElement(this.list, task)
+          // 广播消息
+          cx.events.publish('AlarmNum', { myTaskDelta: -1 })
+        })
+        .catch(this.onError)
+    },
+
+    /**
+     * 为办理流程增加消息响应函数
+     * @method
+     * @param   {Object}  task              任务信息
+     */
+    _handle(task)
+    {
+      if (task.formKey)
+      {
+        const self = this
+        cx.run.runPlug(self.getPluginName(cx.consts.PROC_HANDLE),
+          {
+            task: task,
+            onOk: () =>
+            {
+              // 更新数据总数
+              self.dg.page.total--
+              // 删除数据
+              cx.array.removeElement(self.list, task)
+              // 广播消息
+              cx.events.publish('AlarmNum', { myTaskDelta: -1 })
+            }
+          })
+      }
+    }
+  }
+}