zbcx_ckyc 1.0.0

package/src/plugins/cxMixin/IDataList.js

@@ -0,0 +1,775 @@
+/**
+ * 修改记录:
+ * 22-06-11       张发勇          js -> vue
+ */
+
+/**
+ * cx.mixin.IDataList
+ * 混淆类 - 数据列表管理
+ *
+ * @module      cx.mixin.IDataList
+ * @memberof    cx.mixin
+ *
+ * @property  {Object}          tab                        DataGrid对象
+ */
+
+export default
+{
+  data()
+  {
+    return {
+      ready: false,
+      tab:
+      {
+        major: 0,                           // 实体主类型
+        minor: 0,                           // 实体子类型
+        flds: null,
+        entity: null,
+        attObj: null,
+        attExp: null,
+        queryPara: {},
+        selected: null,                     // 当前选择的行
+
+        elAtts:
+        {
+          border: true,                     // 是否带有纵向边框
+          stripe: true,                     // 是否为斑马纹 table
+          'row-style': ({ row, rowIndex }) => this.onRowStyleTab({ row, rowIndex }),                     // 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。
+          'cell-style': ({ row, column, rowIndex, columnIndex }) => this.onCellStyleTab({ row, column, rowIndex, columnIndex })           // 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
+        },
+        elEvts:
+        {
+          'sort-change': (name, sort) => this.onSortChangeTab(name, sort),
+          'row-click': (att) => this.onRowClickTab(att),
+          'button-click': (btn, att) => this.onButtonClickTab(btn, att)
+        },
+        fitWidth: true,                     // 自适应宽度
+        multiple: false,                    // 多选
+        operFix: 'right',                   // 操作列固定右边
+        list: [],                           // 列表
+        cols: [],                           // 列
+        operCols: []                        // 操作列
+      }
+    }
+  },
+  
+  /** @member    {Boolean}      enable1        选中一行数据 */
+  computed:
+  {
+    // 选中一行数据
+    enable1()
+    {
+      return !!this.tab.selected
+    }
+  },
+
+  /**
+   * mounted 钩子
+   * @method
+   */
+  mounted()
+  {
+    /**
+     * 单击某行
+     */
+    this.initTab()
+  },
+
+  /**
+   * 混合方法
+   * @class
+   */
+  methods:
+  {
+    /**
+     * 行样式
+     * @method
+     * @abstract
+     * @param   {Object}    att         行数据
+     * @param   {Number}    rowIndex    行索引
+     */
+    onRowStyleTab({ att, rowIndex })
+    {
+    },
+
+    /**
+     * 单元格样式
+     * @method
+     * @abstract
+     * @param   {Object}    att         行数据
+     * @param   {Number}    rowIndex    行索引
+     * @param   {Object}    column      列数据
+     * @param   {Number}    columnIndex    列索引
+     */
+    onCellStyleTab({ row, column, rowIndex, columnIndex })
+    {
+    },
+
+    /**
+     * 按列头排序
+     * @method
+     * @param   {String}      name          排序字段
+     * @param   {String}      order         排序方式
+     */
+    onSortChangeTab(name, order)
+    {
+      // if (name && order)
+      // {
+      //   //eslint-disable-next-line
+      //   if (name[0] == '_')
+      //     name = name.substring(1)
+      //   this.orderby = (this.unionQuery && this.unionQuery.mainAlias ? this.unionQuery.mainAlias + '.' : '') + name + ' ' + order
+      // }
+      // else
+      //   this.orderby = ''
+      // this.query()
+    },
+ 
+    /**
+     * 点击行
+     * @method
+     * @abstract
+     * @param   {Object}    att         行数据
+     */
+    onRowClickTab(att)
+    {
+      this.tab.selected = att
+    },
+
+    /**
+     * 点击按钮
+     * @method
+     * @param   {Object}    btn         点击的按钮
+     * @param   {Object}    att         行数据
+     */
+    onButtonClickTab(btn, att)
+    {
+      cx.base.call(btn.onClick, att)
+    },
+ 
+    /**
+     * 初始化
+     * @method
+     */
+    async initTab()
+    {
+      // 实体信息
+      this.tab.entity = $g.entity.byMajMin(this.tab.major, this.tab.minor)
+
+      // 取表对象
+      this.tab.attObj = await $g.attFactory.byMajMin(this.tab.major, this.tab.minor, { flds: this.tab.flds })
+  
+      // 构造操作列
+      let operCols = this.getOpersTab()
+      cx.array.appendArr(this.tab.operCols, operCols)
+      this.makeOpersTab(operCols)
+  
+      // 构造DataGrid列
+      let cols = this.getColsTab()
+      let colInfs = this.getColInfsTab()
+      cx.datagrid.makeCols(cols, colInfs, this.tab.attObj.flds)
+      cx.array.appendArr(this.tab.cols, cols)
+  
+      // 发起默认查询
+      // this.makeQueryParaTab()
+      // this.refreshTab()
+
+      this.ready = true
+    },
+
+    /**
+     * 获取datagrid列字段信息
+     * @method
+     * @returns {Array}                     返回datagrid列字段
+     */
+    getColsTab()
+    {
+      return cx.datagrid.getDefCols(this.tab.attObj.flds, true)
+    },
+
+    /**
+     * 获取datagrid列信息
+     * @method
+     * @returns {Array}
+     * @example
+     *    [{colname: String, [title: String], width: Number, [align: Number = cx.consts.ALIGN_CENTER], [sortable: Boolean = true]}]
+     */
+    getColInfsTab()
+    {
+      return []
+    },
+
+    /**
+     * 重新计算opers
+     * @method
+     * @param   {Array}   operCols      操作列
+     * @returns {Object}                this
+     */
+    makeOpersTab(operCols)
+    {
+      this.tab.opers = []
+      for (let operCol of operCols)
+      {
+        for (let btn of operCol.btns)
+        {
+          btn.keyAble = btn.name + 'able_'
+          btn.keyShow = btn.name + 'show_'
+          this.tab.opers.push(btn)
+        }
+      }
+    },
+
+    /**
+     * 计算各种操作的状态
+     * @method
+     * @param   {Object}    att         属性
+     * @returns {Object}                this
+     */
+    calcOpersTab(att)
+    {
+      for (let oper of this.tab.opers)
+      {
+        att[oper.keyAble] = oper.enable(att)
+        att[oper.keyShow] = oper.show(att)
+      }
+    },
+
+    /**
+     * 取操作按钮信息
+     * @method
+     * @returns {Array}
+     * @example
+     *     [{colname: String,
+     *       title: String,
+     *       width: Number,
+     *       [align: String = 'center']
+     *       btns: [{name: String, title: String, onClick: Function}]
+     *     }]
+     */
+    getOpersTab()
+    {
+      return []
+    },
+
+    /**
+     * 操作列
+     * @method
+     * @returns {Object}
+     */
+    getColOperTab()
+    {
+      return { colname: 'rudTab_', title: this.$locBase('oper'), width: this.tab.editable ? 80 : 60, align: 'center', btns: [] }
+    },
+
+    /**
+     * 增加操作-浏览
+     * @method
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    addOperViewTab(operCol)
+    {
+      const oper = cx.datagrid.getOper('view_', this.$locBase('view'), '')
+
+      oper.enable = (att) => true
+      oper.show = (att) => true
+      oper.onClick = (att) =>
+      {
+        this._viewTab(att)
+      }
+
+      this.operView(oper)
+      operCol.btns.push(oper)
+      return this
+    },
+
+    /**
+     * 增加操作-编辑
+     * @method
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    addOperEditTab(operCol)
+    {
+      const oper = cx.datagrid.getOper('edit_', this.$locBase('edit'), '')
+
+      oper.enable = (att) => !!this.tab.editable
+      oper.show = (att) => true
+      oper.onClick = (att) =>
+      {
+        this._updTab(att)
+      }
+
+      this.operEdit(oper)
+      operCol.btns.push(oper)
+      return this
+    },
+
+    /**
+     * 增加操作-删除
+     * @method
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    addOperDelTab(operCol)
+    {
+      const oper = cx.datagrid.getOper('del_', this.$locBase('del'), '')
+
+      oper.type = 'danger'
+      oper.enable = (att) => !!this.tab.editable
+      oper.show = (att) => true
+      oper.onClick = (att) =>
+      {
+        this._delTab(att)
+      }
+
+      this.operDel(oper)
+      operCol.btns.push(oper)
+      return this
+    },
+
+    /**
+     * 定制函数-操作/查看
+     * @method
+     * @param   {Object}    oper      操作对象
+     */
+    operView(oper)
+    {
+    },
+ 
+    /**
+      * 定制函数-操作/编辑
+      * @method
+      * @param   {Object}    oper      操作对象
+      */
+    operEdit(oper)
+    {
+    },
+ 
+    /**
+      * 定制函数-操作/删除
+      * @method
+      * @param   {Object}    oper      操作对象
+      */
+    operDel(oper)
+    {
+    },
+ 
+    /**
+     * 取对象的显示信息
+     * @method
+     * @param   {Object}  att       属性对象
+     * @returns {Object}            this
+     */
+    getDispTab(att)
+    {
+      this._getDispTab(att)
+      return this
+    },
+
+    /**
+     * 取对象的显示信息
+     * @method
+     * @private
+     * @param   {Object}  att       属性对象
+     * @returns {Object}            this
+     */
+    _getDispTab(att)
+    {
+      this.tab.attObj.getDisp(att)
+      this.attObj.decode(att)
+      this.tab.attObj.numberize(att)
+      if (att.completed !== undefined)
+      {
+        if (att.completed)
+          att._completed = cx.consts.TEXT_COMPLETED
+        else
+          att._completed = ''
+      }
+      this.calcOpersTab(att)
+      return this
+    },
+
+    /**
+     * 添加新项到datagrid列表
+     * @method
+     * @param  {Object}    attNew    新属性
+     */
+    gridAddTab(attNew)
+    {
+      this.getDispTab(attNew)
+      cx.array.insert(this.tab.list, attNew)
+    },
+
+    /**
+     * 从datagrid删除项
+     * @method
+     * @param  {Object}    attOld    旧属性
+     */
+    gridDelTab(attOld)
+    {
+      cx.array.remove(this.tab.list, { id: attOld.id })
+      // eslint-disable-next-line
+      if (this.tab.selected && this.tab.selected.id == attOld.id)
+        this.tab.selected = null
+    },
+
+    /**
+     * 更新datagrid项
+     * @method
+     * @param  {Object}    attNew    新属性
+     * @param  {Object}    attOld    旧属性
+     */
+    gridUpdTab(attNew, attOld)
+    {
+      let item, i, j
+
+      for (i = this.tab.list.length - 1; i >= 0; i--)
+      {
+        item = this.tab.list[i]
+        // eslint-disable-next-line
+        if (item.id == attNew.id)
+        {
+          for (j in attNew)
+            item[j] = attNew[j]
+          this.getDispTab(item)
+        }
+      }
+    },
+
+    /**
+     * 提交-增加
+     * @method
+     * @param   {Object}    att         新属性
+     */
+    submitAddTab(att, plugin)
+    {
+      if (!this.beforeAddTab(att))
+      {
+        return new Promise((resolve) =>
+        {
+          resolve(false)
+        })
+      }
+      cx.svr.attOper.insert(this.tab.major, this.tab.minor, att)
+        .then(ret =>
+        {
+          this.tab.attObj.numberize(att)
+          this.afterAddTab(att)
+          this.gridAddTab(att)
+          return true
+        })
+        .catch(this.onError)
+    },
+
+    /**
+     * 提交-删除
+     * @method
+     * @param  {Object}  att    属性
+     */
+    submitDelTab(att)
+    {
+      if (!att)
+        return
+      if (!this.beforeDelTab(att))
+        return
+
+      cx.svr.doc.delEntity({ major: this.tab.major, minor: this.tab.minor, entityid: att.id }).then(ret =>
+      {
+        cx.svr.attOper.del(this.tab.major, this.tab.minor, att)
+          .then(ret =>
+          {
+            this.afterDelTab(att)
+            this.gridDelTab(att)
+          })
+          .catch(this.onError)
+      })
+        .catch(this.onError)
+    },
+
+    /**
+     * 提交-修改
+     * @method
+     * @param   {Object}    attNew      新属性
+     * @param   {Object}    attOld      旧属性
+     */
+    submitUpdTab(attNew, attOld)
+    {
+      return new Promise((resolve, reject) =>
+      {
+        if (!this.beforeUpdTab(attNew))
+          return false
+
+        this.afterUpdTab(attOld)
+        this.gridUpdTab(attNew, attOld)
+
+        return true
+      })
+    },
+
+    /**
+     * 根据属性删除实体
+     * @private
+     * @method
+     * @param  {Object}  att    属性
+     */
+    _delTab(att)
+    {
+      if (att)
+      {
+        this.$cfm('del')
+          .then(() =>
+          {
+            this.submitDelTab(att)
+          })
+          .catch(() =>
+          {
+          })
+      }
+    },
+
+    /**
+     * 根据属性查看实体
+     * @private
+     * @method
+     * @param  {Object}  att    属性
+     */
+    _viewTab(att)
+    {
+      if (att)
+      {
+        const params =
+        {
+          major: this.tab.major,
+          minor: this.tab.minor,
+          att,
+          editable: false,
+          title: this.getEntityNameTab(),
+          closable: true
+        }
+        cx.run.runPlug(this.getPluginTab(cx.consts.ATT_VIEW, att), params, {})
+      }
+    },
+
+    /**
+     * 根据属性编辑实体
+     * @private
+     * @method
+     * @param  {Object}  att    属性
+     */
+    _updTab(att)
+    {
+      if (att)
+      {
+        const params =
+        {
+          major: this.tab.major,
+          minor: this.tab.minor,
+          att,
+          editable: true,
+          title: this.getEntityNameTab(),
+          onOk: (attNew, attOld) => this.submitUpdTab(attNew, attOld)
+        }
+        cx.run.runPlug(this.getPluginTab(cx.consts.ATT_EDIT, att), params, {})
+      }
+    },
+
+    /**
+     * 根据ID删除实体
+     * @method
+     * @param  {Number}  id    ID
+     */
+    delTab(id)
+    {
+      this._delTab(cx.array.get1(this.tab.list, { id: parseInt(id) }))
+    },
+
+    /**
+     * 根据ID删除实体
+     * @method
+     * @param  {Number}  id    ID
+     */
+    viewTab(id)
+    {
+      this._viewTab(cx.array.get1(this.tab.list, { id: parseInt(id) }))
+    },
+
+    /**
+     * 根据ID修改实体
+     * @method
+     * @param  {Number}  id    ID
+     */
+    upd(id)
+    {
+      this._updTab(cx.array.get1(this.tab.list, { id: parseInt(id) }))
+    },
+
+    /**
+     * 消息响应函数-添加
+     * @method
+     */
+    onAddTab()
+    {
+      // 弹出输入界面
+      const params =
+        {
+          major: this.tab.major,
+          minor: this.tab.minor,
+          att: this.defValTab(),
+          title: this.getEntityNameTab(),
+          onOk: (att) => this.submitAdd(att)
+        }
+      cx.run.runPlug(this.getPluginTab(cx.consts.ATT_ADD, null), params, {})
+    },
+
+    /**
+     * 消息响应函数-删除
+     * @method
+     */
+    onDelTab()
+    {
+      this._del(this.getCur())
+    },
+
+    /**
+     * 消息响应函数-修改
+     * @method
+     */
+    onUpdTab()
+    {
+      this.__update(this.getCur())
+    },
+
+    /**
+     * 取默认值
+     * @abstract
+     * @method
+     * @returns {Object}        默认属性(如果没有缓存数据，则返回NULL)
+     */
+    defValTab()
+    {
+      const att = this.tab.attObj.getDefVal()
+      cx.att.getCacheAtt(this.tab.major, this.tab.minor, att)
+      this.initAtt(att)
+      return att
+    },
+
+    /**
+     * 用于输入属性之前，在派生类初始化属性（特殊情况下修改字段值）
+     * @method
+     * @param  {Object}  att      属性对象
+     */
+    initAtt(att)
+    {
+    },
+   
+    /**
+     * 添加属性之前的接口
+     * @abstract
+     * @method
+     * @param   {Object}  att       属性对象
+     * @returns {Boolean}           true-没有问题，false-不通过
+     */
+    beforeAddTab(att)
+    {
+      if (this.tab.attObj.encode)
+        this.tab.attObj.encode(att)
+      return true
+    },
+
+    /**
+     * 添加属性之后的接口
+     * @abstract
+     * @method
+     * @param  {Object}  att      属性对象
+     */
+    afterAddTab(att)
+    {
+    },
+
+    /**
+     * 删除属性之前的接口
+     * @abstract
+     * @method
+     * @param   {Object}  att       属性对象
+     * @returns {Boolean}           true-没有问题，false-不通过
+     */
+    beforeDelTab(att)
+    {
+      return true
+    },
+
+    /**
+     * 删除属性之后的接口
+     * @abstract
+     * @method
+     * @param   {Object}  att       属性对象
+     */
+    afterDelTab(att)
+    {
+    },
+
+    /**
+     * 修改属性之前的接口
+     * @abstract
+     * @method
+     * @param   {Object}  att       属性对象
+     * @returns {Boolean}           true-没有问题，false-不通过
+     */
+    beforeUpdTab(att)
+    {
+      if (this.tab.attObj.encode)
+        this.tab.attObj.encode(att)
+      return true
+    },
+
+    /**
+     * 修改属性之后的接口
+     * @abstract
+     * @method
+     * @param   {Object}  att       属性对象
+     */
+    afterUpdTab(att)
+    {
+    },
+
+    /**
+     * 查询之后的接口
+     * @abstract
+     * @method
+     */
+    afterQueryTab()
+    {
+    },
+
+    /**
+     * 取实体名称
+     * @method
+     * @returns {String}          返回实体信息
+     */
+    getEntityNameTab()
+    {
+      return cx.i18n.locEntity(this.tab.entity)
+    },
+
+    /**
+     * 取插件名
+     * @method
+     * @param   {Number}  type     类型
+     * @param   {Object}  [att]    属性(当前需要发起流程的属性)
+     * @returns {String}
+     */
+    getPluginTab(type, att)
+    {
+      switch (type)
+      {
+      case cx.consts.ATT_ADD:
+        return 'AttInput'
+      case cx.consts.ATT_EDIT:
+      case cx.consts.ATT_VIEW:
+        return 'AttEdit'
+      }
+      return ''
+    }
+  }
+}