zbcx_ckyc 1.0.0

package/src/plugins/cxMixin/IDataMan2.js

@@ -0,0 +1,2561 @@
+/**
+ * 修改记录:
+ * 20-07-18     张发勇            增加一个函数 setAttOper(operCol)，用于派生类自定义属性相关的操作按钮，简化派生类的代码
+ * 20-08-04     张发勇            增加一个函数 initAtt(att),用于输入属性之前，在派生类初始化属性（特殊情况下修改字段值）
+ * 21-02-19     张发勇            增加 onEditRow, 响应 event: edit-row
+ * 21-02-24     张发勇            增加 maxColWidth = 275, fontSize = 14, padding = 15 便于派生类修改
+ * 21-04-04     张发勇            增加函数 operView, operEdit, operDel 便于定制
+ * 21-06-09     张发勇            去掉前端直接传递表达式给后端，增加参数 sqlCfg, 支持 query, queryUnion
+ * 21-11-04     张发勇            去掉了 __update(), 增加了 getCur()
+ * 22-05-20     张发勇            升级到 element-plus
+ *                                删除 useOperCols
+ *                                删除 usePage
+ *                                selections -> selection
+ *                                page-change -> page-chang / pagesize-change
+ *                                onClickRow -> onRowClick
+ *                                onRowDblClick -> onRowDblClick
+ *                                onSelectionChange -> onSelectionChange
+ *                                onButtonClick -> onButtonClick
+ *                                onPageChange -> onPageChange
+ * 22-06-11       张发勇          js -> vue
+ * 23-05-31       张  清          放开init方法中operCols、cols空数组声明，解决多次调用init时保留上次的数据
+ * 23-07-16       张发勇          增加函数，exportData()-根据当前的查询条件去导出的数据,getDispCols()-，取当前显示的列名
+ * 23-07-31       张发勇          _upd()函数，增加数据修改标记，否则可输入的数据没有修改，保存按钮不可点击
+ * 23-08-12       张发勇          sqlexp.querPara()修改了参数，去掉major,minor
+ * 23-08-17       张清            更新注释，修改自动计算的默认参数，解决表头多行显示问题
+ * 23-08-23       张发勇          新增 tabCfgName, cfgFlds
+ *                                [retAtt = 0] 插入/修改是否返回数据(默认0，当editable = true的时候，默认值修改为 1)
+ *                                支持列过滤
+ * 23-09-10       张发勇          beforeUpd() 去掉了加密功能，由属性编辑组件自己负责加密
+ * 23-09-13       张发勇          支持自己加入额外的字段
+ * 23-09-16       张发勇          字段信息需要深拷贝，后面会修改。
+ * 23-09-18       张发勇          支持 字段 / 属性 数据格式化、可视化
+ * 23-12-03       张发勇          去掉 onButtonClick, button-click, opers, calcOpers
+ *                                新增 beforeDDVisible, rmenus, conFlds, conVals, conValues
+ * 23-12-06       张清            修复major、minor模式不显示字段
+ *                                新增 setOpers, pluginState(), makeOpers()
+ *                                新增 clearSelection()
+ *                                col.sortable 支持 custom
+ * 23-12-18       张清            增加 pluginState 默认函数中 conValues 缺省时对show、enable配置的处理
+ * 23-12-28       张发勇          增加 initPlugs() 支持非配置模式的插件配置
+ *                                操作列的按钮 show-icon, show-title 默认由 cx.config.operCol 配置
+ * 24-01-01       张发勇          修改 dg.table.dropdown ->dg.table.operCfg
+ * 24-01-03       张发勇          BUG:没有配置右边键的时候，代码判断有BUG
+ * 24-01-05       张清            增加多选删除接口，解决多选删除表格不刷新bug
+ * 24-03-26       张发勇          解决 按钮点击 响应错误，在 plugin-click 里面需要更新 values
+ * 24-03-26       张清            把create中的变量移到initVariable方法，解决多次运行时历史数据未清除
+ * 24-04-02       张发勇          如果 tabcfg 没有设置 value， 默认设置 conValues = new cx.dc.IValuesBase
+ * 24-04-23       张发勇          修改列排序方式，对于使用排序的列，同时点击排序进行数据请求的，必须把sortable = custom，否则使用显示文本排序
+ * 24-04-24       张清            增加processQryData接口，支持查询完预处理数据
+ */
+
+/**
+ * cx.mixin.IDataMan2
+ * 混淆类 - 数据管理（基于DataGrid）
+ *
+ * @module    cx.mixin.IDataMan2
+ * @memberof  cx.mixin
+ *
+ * @property  {Number}          major                     接口-实体主类型，major和minor用于指定数据表和获取cx_fld中字段定义。与tabCfgName至少使用一种参数方式
+ * @property  {Number}          minor                     接口-实体子类型
+ * @property  {String}          tabCfgName                接口-cx_tabcfg表中的name，对字段的展示配置。比major、minor优先级高
+ * @property  {Array}           [flds = null]             接口-要创建的的字段对象序列，null时就是用major/minor或mtabCfgName对应表的字段数据
+ * @property  {Object}          [dg]                      接口-DataGrid对象
+ * @property  {Boolean}         [useExp = true]           接口-是否启用属性查询条件输入
+ * @property  {Boolean}         [useExpMore = true]       接口-是否启用属性查询条件输入(More)
+ * @property  {Boolean}         [noExpDispAll = false]    接口-没有查询条件显示所有数据
+ * @property  {Boolean}         [editable = false]        接口-是否可编辑
+ * @property  {Number}          [maxColWidth = 275]       接口-最大列宽（dynaWidth=true时用于计算列宽）
+ * @property  {Number}          [fontSize = 14]           接口-默认字体大小(dynaWidth=true时用于计算列宽)
+ * @property  {Number}          [padding = 20]            接口-padding值(dynaWidth=true时用于计算列宽)
+ * @property  {Boolean}         [dynaWidth = true]        接口-动态计算列宽，根据数据内容计算宽度，覆盖字段设置宽度
+ * @property  {Number}          [retAtt = 1]              接口-插入/修改是否返回数据(默认0，当editable = true的时候，默认值修改为 1)
+ * @property  {cx.SqlEx}        [defExp = null]           接口-默认条件(有自定义条件之后即删除)，用 cx.sqlexp.from([['id', '>', 0]]) 构造
+ * @property  {cx.SqlEx}        [fixedExp = null]         接口-固定条件(任何时候都加上的条件)
+ * @property  {Object}          [unionQuery = null]       接口-联合查询参数
+ * @property  {String}          [unionQuery.mainAlias]    接口-主表别名(例如: "a")
+ * @property  {String}          [orderby]                 接口-排序，asc(升序) desc(降序)
+ * @property  {Object}          [sqlCfg]                  接口-SQL 配置
+ * @property  {String}          sqlCfg.key                接口-sqlexp 表的 name
+ * @property  {String}          sqlCfg.vals               接口-传递给 sqlexp 的值
+ * @property  {String}          sqlCfg.orderby            接口-排序信息
+ * @property  {Object}          [dynaForm]                接口-动态表单配置对象，属性录入/查看时可定制，其它参数见 cx.form
+ * @property  {String}          dynaForm.inputForm        接口-录入表单key
+ * @property  {String}          dynaForm.editForm         接口-修改表单key
+ * @property  {String}          dynaForm.viewForm         接口-查看表单key
+ */
+export default
+{
+  /** @member  {Object}          entity                    实体对象 */
+  /** @member  {cx.AttBase}      attObj                    属性对象 */
+  /** @member  {String}          tabName                   表名，地图服务配置fld时构造字段对象，tabName 和 major,minor 至少要有一个 */
+  /** @member  {Object}          tabCfg                    表格配置信息 (cx_tabcfg 信息) */
+  /** @member  {Object}          visuals                   可视化配置 */
+  /** @member  {Array}           cfgFlds                   显示的字段信息序列 */
+  /** @member  {Array}           expFlds                   条件表达式字段列表 */
+  /** @member  {Array.<String>}  expRange                  条件输入里面用于输入范围的列列表，由 tabCfg的range配置生成 */
+  /** @member  {Array.<String>}  expExclude                条件输入里面排除的列列表 */
+  /** @member  {Object}          queryPara                 SQL查询参数 */
+  /** @member  {Object}          attExp                    条件表达式对象 */
+  /** @member  {Array}           list                      数据 */
+  /** @member  {Object}          selected                  当前选中的行 */
+  /** @member  {Array.<Object>}  selection                 复选框选中的全部行 */
+  /** @member  {Boolean}         ready                     是否初始化完成，尤其attObj是异步创建，必须ready后使用 */
+  data()
+  {
+    return {
+      flds: null,
+      expFlds: [],
+      list: [],
+      cols: [],
+
+      editable: false,
+      useExpMore: true,
+
+      selected: null,                       // 当前选中行
+      selection: [],                        // 多选数据
+      rmenus: [],                           // 右边键菜单（如果 cx_tabcfg 配置了 value 字段，则自动创建该对象）
+
+      // DataGrid组件的的datagrid默认参数
+      dg:
+      {
+        pages: true,                        // 是否使用分页
+        table:
+        {
+          elAtts:
+          {
+            border: true,                   // 是否带有纵向边框
+            stripe: true,                   // 是否为斑马纹 table
+            showSummary: false,             // 是否在表尾显示合计行
+            '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。
+          },
+          fitWidth: true,                   // 宽度自适应
+          multiple: false,                  // 是否支持多选
+          selectOnClick: true,              // 点击某一行时会触发select选择事件，如果multiple多选模式会更新复选框的状态
+          operFix: 'right',                 // 操作列固定右边
+          list: [],                         // 数据列表
+          cols: [],                         // 列信息
+          operCols: [],                     // 操作列信息
+          operCfg: {},                      // 操作列下拉信息（参见组件 cx-oper-group 的属性 dropdown）
+          pluginState: (plug, args) => this.pluginState(plug, args),
+          beforeDDVisible: (args) => this.beforeDropdown(args)  // 消息响应函数-下拉操作展开之前的函数
+        },
+        page:
+        {
+          total: 0,                         // 数据量
+          currentPage: 1,                   // 当前页码
+          pageSize: cx.consts.PAGE_SIZE,    // 每页记录数
+          pageSizes: cx.consts.PAGE_SIZES   // 分页标准
+        }
+      }
+    }
+  },
+
+  /** @member    {Boolean}      enable1        选中一行数据 */
+  /** @member    {Object}       dgAtts         DataGrid 属性 */
+  /** @member    {Object}       dgEvts         DataGrid 事件 */
+  /** @member    {Object}       expAtts        表达式输入 属性 */
+  /** @member    {Object}       expEvts        表达式输入 事件 */
+  computed:
+  {
+    // 选中一行数据
+    enable1()
+    {
+      return !!this.selected
+    },
+
+    // DataGrid 属性
+    dgAtts()
+    {
+      return {
+        size: this.size,
+        datagrid: this.dg,
+        rmenus: this.rmenus
+      }
+    },
+
+    // DataGrid 事件
+    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),
+        'plugin-click': (oper, att) => this.onPluginClick(oper, att),
+        'edit-row': (oldRowIndex, newRowIndwx) => this.onEditRow(oldRowIndex, newRowIndwx),
+        'pagesize-change': (pagesize) => this.onPagesizeChage(pagesize),
+        'page-change': (pageno) => this.onPageChange(pageno),
+        'row-contextmenu': (row, column, event) => this.onConextMmenu(row, column, event)
+      }
+    },
+
+    // 表达式输入 属性
+    expAtts()
+    {
+      return {
+        size: this.size,
+        flds: this.expFlds,
+        'show-more': this.useExpMore
+      }
+    },
+
+    // 表达式输入 事件
+    expEvts()
+    {
+      return {
+        'exp-search': () => this.onExpSearch(),
+        'exp-clear': () => this.onExpClear(),
+        'exp-more': () => this.onExpMore()
+      }
+    }
+  },
+
+  emits: ['sort-change', 'row-click', 'row-dblclick', 'selection-change'],
+
+  created()
+  {
+    // 添加属性, 非响应式
+    this.initVariable()
+  },
+
+  /**
+   * @method
+   */
+  mounted()
+  {
+    const self = this
+
+    // 监听
+    cx.events.listen(self, 'AttInsert', (params) =>
+    {
+      // eslint-disable-next-line
+      if (params.major == self.major && params.minor == self.minor)
+      {
+        self.attObj.numberize(params.newAtt)
+        self.afterAdd(params.newAtt)
+        self.gridAdd(params.newAtt)
+        ++this.dg.page.total
+      }
+    })
+
+    cx.events.listen(self, 'AttDelete', (params) =>
+    {
+      // eslint-disable-next-line
+      if (params.major == self.major && params.minor == self.minor)
+      {
+        self.afterDel(params.oldAtt)
+        self.gridDel(params.oldAtt)
+        --this.dg.page.total
+      }
+    })
+    cx.events.listen(self, 'AttsDelete', (params) =>
+    {
+      // eslint-disable-next-line
+      if (params.major == self.major && params.minor == self.minor)
+      {
+        params.oldAtts.forEach(item =>
+        {
+          self.afterDel(item)
+          self.gridDel(item)
+        })
+        this.dg.page.total = this.dg.page.total - params.oldAtts.length
+      }
+    })
+    cx.events.listen(self, 'AttUpdate', (params) =>
+    {
+      // eslint-disable-next-line
+      if (params.major == self.major && params.minor == self.minor)
+      {
+        self.attObj.numberize(params.newAtt)
+        self.afterUpd(params.newAtt)
+        self.gridUpd(params.newAtt, params.oldAtt)
+      }
+    })
+
+    self.init()
+      .catch(self.onError)
+  },
+
+  /**
+   * unmounted 钩子
+   * @method
+   */
+  beforeUnmount()
+  {
+    cx.events.unlisten(this)
+    // cx.run.closeRun('ExpMoreInput')
+
+    // 保存用户习惯
+    if (this.tabCfgName && this.colsSel)
+      cx.data.saveHabit(this.tabCfgName, { cols: this.colsSel }, this.habitId)
+  },
+
+  /**
+   * 混合方法
+   * @class
+   */
+  methods:
+  {
+    /**
+     * 初始化
+     * @method
+     */
+    async init()
+    {
+      const self = this
+      
+      // DataGrid赋值
+      self.dg.table.list = self.list
+
+      // 初始化
+      const onInit = async(tabCfg) =>
+      {
+        let entity
+
+        // 根据表名设置 major, minor, tabName
+        if (tabCfg.tab && !self.major && !self.minor)
+        {
+          self.tabName = tabCfg.tab
+          entity = $g.entity.byName(tabCfg.tab)
+          if (entity)
+          {
+            self.major = entity.major
+            self.minor = entity.minor
+          }
+        }
+        if (self.major || self.minor || self.tabName)
+        {
+          // 实体信息
+          if (!entity)
+            entity = $g.entity.byMajMin(self.major, self.minor) || $g.entity.byName(self.tabName)
+          self.entity = entity
+          if (!self.entity)
+          {
+            self.$showSvr('noPermision')
+            return
+          }
+
+          // 取表对象
+          self.attObj = await $g.attFactory.byMajMin(self.major, self.minor, { flds: self.flds, tabname: self.tabName })
+
+          // 以后代码完全是兼容，有的代码直接取 this.flds (IAttBase)
+          if (!self.flds)
+            self.flds = self.attObj.flds
+
+          self.initTabCfg(tabCfg)
+
+          // 把配置的信息覆盖过来
+          self.attExp = self.defExp               // 默认条件
+
+          // 条件表达式
+          self.expFlds = this.getExpFlds()
+        }
+
+        // 构造操作列
+        const operCols = self.getOpers()
+        // 把右边键的插件放到操作列
+        if (operCols.length > 0 && self.rmenus)
+          cx.array.appendArr(operCols[0].btns, self.rmenus)
+        self.dg.table.operCols = operCols
+
+        // 构造DataGrid列
+        const cols = self.getCols()
+        if (self.getEditCols)
+          self.attObj.makeEdit(cols, self.getEditCols())
+
+        // 修改组件排序方式，否则用内存字符串排序
+        for (let col of cols)
+        {
+          if (col.sortable)
+            col.sortable = 'custom'
+        }
+
+        self.cols = cols
+        self.dg.table.cols = self.grpDisp(cols)
+
+        // 属性可视化
+        self.makeVisual()
+
+        self.ready = 1
+
+        // 发起默认查询
+        if (self.fixedExp || self.attExp || self.unionQuery || self.sqlCfg.key || (!self.attExp && self.noExpDispAll))
+        {
+          self.makeQueryPara()
+          self.refresh()
+        }
+      }
+
+      // 取表配置信息
+      let tabCfg
+
+      if (self.tabCfgName)
+      {
+        const batch =
+        [
+          // 表格配置
+          {
+            type: cx.consts.SVR_QRY,
+            data:
+            {
+              _major: cx.consts.SYSTAB,
+              _minor: cx.consts.TAB_TABCFG,
+              _key: 'TabCfg',
+              vals: self.tabCfgName
+            }
+          },
+          cx.data.paramsBatchHabit(self.tabCfgName)
+        ]
+        cx.svr.data.batch(batch)
+          .then(ret =>
+          {
+            tabCfg = ret[0].data.length > 0 ? cx.converter.toJSON(ret[0].data[0]) : {}
+            const habit = ret[1].data.length > 0 ? cx.converter.toJSON(ret[1].data[0]) : {}
+
+            tabCfg.dispSel = habit.value ? habit.value.cols : null
+            self.habitId = habit.id
+
+            // 如果设置了 value, 则产生一个对象出来
+            if (tabCfg.value)
+            {
+              self.conValues = cx.base.newObj(tabCfg.value)
+              self.conFlds = new cx.dc.ExpFields()            // 判断条件的字段对象
+              self.conVals = new cx.dc.ExpValues()            // 判断条件的值对象
+            }
+
+            // 设置了分组
+            if (tabCfg.grps)
+            {
+              self.colGrps = tabCfg.grps
+              delete tabCfg.grps
+            }
+
+            // 如果设置了 plugs，则产生插件
+            if (tabCfg.plugs)
+            {
+              self.initPlugs(tabCfg.plugs)
+                .then(ret =>
+                {
+                  onInit(tabCfg)
+                })
+                .catch(self.onError)
+            }
+            else
+              onInit(tabCfg)
+          })
+          .catch(self.onError)
+      }
+      else
+      {
+        tabCfg = {}
+
+        if (self.plugs)
+        {
+          self.initPlugs(self.plugs)
+            .then(ret =>
+            {
+              onInit(tabCfg)
+            })
+            .catch(self.onError)
+        }
+        else
+          onInit(tabCfg)
+      }
+    },
+
+    /**
+     * 初始化变量
+     * @method
+     */
+    initVariable()
+    {
+      // 添加属性, 非响应式
+      this.major = 0
+      this.minor = 0
+      this.tabName = ''
+      this.retAtt = 1
+      this.flds = null
+      this.entity = null
+      this.attObj = null
+  
+      this.useExp = true
+      this.noExpDispAll = false
+      this.expRange = null
+      this.expExclude = null
+  
+      this.defExp = null
+      this.fixedExp = null
+      this.unionQuery = null
+      this.sqlCfg = { key: '', vals: '', orderby: '' }
+  
+      this.attExp = null
+      this.queryPara = {}
+      this.orderby = ''
+  
+      this.maxColWidth = 275
+      this.fontSize = 14
+      this.padding = 20
+      this.dynaWidth = true
+
+      this.cols = []                // 在表格中显示的列
+  
+      // 下面的属性不能使用响应式，否则造成大量的刷新
+      this.conFlds = null           // 条件计算的字段信息
+      this.conVals = null           // 条件计算的值
+      this.conValues = null         // 提供值的对象（如果 cx_tabcfg 配置了 value 字段，则自动创建该对象）
+  
+      this.tabCfgName = ''          // 表格配置名
+      this.tabCfg = {}              // 表格配置对象
+      this.cfgFlds = []             // 配置字段
+      this.colGrps = null           // 字段分组
+      this.visuals = {}             // 可视化字段配置（放在这里会变成响应式，带来严重的性能问题，切记！！！）, 非响应式
+      this.colsSel = null           // 当前选中的字段，因为到 beforUnmount 的时候， dg.table.cols 已经没有了
+      this.habitId = 0              // 用户习惯ID
+  
+      // 复制cx.config.operCol
+      cx.config.cfgOperCfg(this.dg.table.operCfg, cx.config.operCol)
+    },
+
+    /**
+     * 表格配置信息
+     * @param {*} cols
+     */
+    initTabCfg(tabCfg)
+    {
+      // 1. 为了支持能把联表的字段显示正常，配置的时候 disporder 可以 < 0
+      // 2. 如果设置了显示字段，则默认值显示设置的字段，否则把 disporder != 0 的都显示出来
+      // 3. 如果设置了隐藏字段，则都不显示，过滤，搜索 都不出现
+      // 4. 如果设置了条件字段，则按照条件显示，否则按照 qrylevel = 1 的显示
+      // 5. 如果设置了范围条件的字段，则把其按照 range 的方式显示
+      // 6. 如果设置了不按照范围显示的字段，则把其按照 value 的方式显示
+
+      this.tabCfg = tabCfg
+
+      // 配置的字段信息
+      const flds = this.flds || this.attObj.flds
+      const cfgFlds = this.cfgFlds
+      const map = {}                        // 显示的列建索引
+      let fld, fld1
+
+      // 先把字段拷贝进来
+      for (fld of flds)
+      {
+        fld = cx.base.deepCopy({}, fld)       // 拷贝出来
+        cfgFlds.push(fld)
+        map[fld.colname] = fld
+      }
+
+      // 再把定制字段和引用字段纳入
+      if (tabCfg.flds)
+      {
+        let arrName, added
+
+        for (fld1 of tabCfg.flds)
+        {
+          added = 0
+
+          // 拷贝一个新的字段，因为这里会修改数据,切记！！！
+          // 如果是引用了别的表的字段
+          if (fld1.ref)
+          {
+            arrName = fld1.ref.split(':')
+            // eslint-disable-next-line
+            if (arrName.length == 2)
+              fld = $g.field.getFld(arrName[0], arrName[1])
+            else
+              fld = map[arrName[0]]
+            if (!fld)
+            {
+              console.log('fld error: ' + fld1.ref)
+              continue
+            }
+            fld = cx.base.deepCopy({}, fld)
+            fld.colname = fld1.colname
+            cfgFlds.push(fld)
+            map[fld.colname] = fld
+            added = 1
+          }
+          else
+          {
+            fld = map[fld1.colname]
+            if (!fld)
+            {
+              fld = cx.fld.defFldDb(this.tabName, fld1.colname) // 不是字段里面的，构造一个默认字段
+              cfgFlds.push(fld)
+              map[fld.colname] = fld
+              added = 1
+            }
+          }
+
+          // 覆盖部分配置信息，其他部分信息，在显示字段里面去覆盖
+          if (cx.base.isNNull(fld1.title))
+          {
+            // 覆盖字段的标题
+            fld._label = cx.base.locOrStr(fld1.title)
+            fld.namec = fld._label
+          }
+          if (fld1.type)
+            fld.disptype = cx.fld.fldType(fld1.type)
+          if (cx.base.isNNull(fld1.isnum))
+            fld.isnum = fld1.isnum
+          if (cx.base.isNNull(fld1.disporder))
+            fld.disporder = fld1.disporder
+
+          if (!fld.params)
+            fld.params = {}
+          if (fld1.format)
+            fld.params.format = fld1.format
+          if (fld1.visual)
+            fld.params.visual = fld1.visual
+          if (fld1.valid)
+            fld.params.valid = fld1.valid
+          if (fld1.unit)
+            fld.params.unit = fld1.unit
+
+          if (added)                        // 添加了字段则把这个字段放到属性里面，解决 format 的问题
+          {
+            fld = cx.base.deepCopy({}, fld)
+            fld.disporder = 0               // 不显示
+            fld.nullable = 1                // 可为空
+            fld.defval = ''                 // 没有默认值
+            flds.push(fld)
+          }
+        }
+      }
+
+      // 隐藏字段
+      if (tabCfg.hide)
+      {
+        tabCfg.hide = tabCfg.hide.split(',')
+        for (fld1 of tabCfg.hide)
+        {
+          fld = map[fld1]
+          if (fld)
+          {
+            fld.disporder = 0       // 不显示
+            fld.qrylevel = 0        // 不能搜索
+          }
+        }
+      }
+
+      // 条件表达式的列
+      if (tabCfg.exp)
+      {
+        // 把原本作为条件表达式的字段去掉
+        cfgFlds.forEach(fld =>
+        {
+          // eslint-disable-next-line
+          if (fld.qrylevel == 1)
+            fld.qrylevel = 2        // 变成更多的时候查询
+        })
+
+        // 如果设置了 exp，则默认的字段序号需要改变
+        // 把设置搜索的字段 qrylevel = 1
+        tabCfg.exp = tabCfg.exp.split(',')
+        for (fld1 of tabCfg.exp)
+        {
+          // eslint-disable-next-line
+          fld = map[fld1]
+          if (fld)
+            fld.qrylevel = 1
+        }
+      }
+
+      // 排除搜索的列
+      if (tabCfg.noexp)
+      {
+        tabCfg.noexp = tabCfg.noexp.split(',')
+        for (fld1 of tabCfg.noexp)
+        {
+          // eslint-disable-next-line
+          fld = map[fld1]
+          if (fld)
+            fld.qrylevel = 0
+        }
+      }
+
+      // 对字段排序
+      cx.util.sortNum(this.cfgFlds, 'disporder')
+
+      // 如果设置了默认的显示字段，则需要调整到设定的顺序
+      const map2 = {}
+      let order = 1
+
+      // 先设置好默认显示出来的全部顺序
+      if (tabCfg.disp)
+      {
+        tabCfg.disp = tabCfg.disp.split(',')
+        for (fld1 of tabCfg.disp)
+        {
+          fld = map[fld1]
+          if (fld)
+          {
+            fld.disporder = order
+            map2[fld.colname] = order
+            order++
+          }
+        }
+      }
+      else
+      {
+        tabCfg.disp = []
+        cfgFlds.forEach(fld =>
+        {
+          if (fld.disporder)
+            tabCfg.disp.push(fld.colname)
+        })
+      }
+
+      // 如果用户过滤了列，再把用户的列显示出来
+      if (tabCfg.dispSel)
+      {
+        tabCfg.dispSel = tabCfg.dispSel.split(',')
+        for (fld1 of tabCfg.dispSel)
+        {
+          fld = map[fld1]
+          if (fld)
+          {
+            // 如果是默认显示的列，则已经设置好了
+            if (!map2[fld1])
+            {
+              fld.disporder = order
+              map2[fld.colname] = order
+              order++
+              tabCfg.disp.push(fld1)
+            }
+          }
+        }
+      }
+
+      // 对可以显示的字段重新排序
+      if (tabCfg.disp)
+      {
+        cfgFlds.forEach(fld =>
+        {
+          if (fld.disporder && !map2[fld.colname])
+            fld.disporder = order++
+        })
+
+        // 对字段再次排序
+        cx.util.sortNum(this.cfgFlds, 'disporder')
+      }
+
+      // 条件 - 范围
+      if (tabCfg.rang)
+        this.expRange = tabCfg.rang.split(',')
+
+      // 条件 - 去掉范围
+      if (tabCfg.norang)
+        this.expExclude = tabCfg.norang.split(',')
+
+      // 传递的参数
+      if (tabCfg.params)
+        cx.base.extend(this, tabCfg.params)
+    },
+
+    /**
+     * 字段分组显示
+     * @methid
+     * @param   {Array.<col>} cols         字段数组
+     * @returns {Array.<col>}               构造成树结构显示成分组
+     */
+    grpDisp(cols)
+    {
+      /**
+       * 分组配置如下:
+        [
+          {
+            [grp: String],              // 用于多语言, grp.{table}.{grp} 作为词条
+            title: String,              // 默认标题（如果没有取到词条）
+            [children: Array.<grp>]     // 儿子结点
+            [cols: String]              // 放在该分组的列名（colname），逗号分隔
+          }
+        ]
+        */
+
+      if (!this.colGrps)
+        return cols
+
+      const tree = []
+      let count = 1, item
+
+      // 建对照
+      for (item of cols)
+        item.visible = true
+
+      // 递归组织成树
+      const _makeTree = (result, grpInfo) =>
+      {
+        let key = ''
+        const grp =
+        {
+          colname: `_${count++}`,
+          title: '',
+          align: 'center',
+          visible: true,
+          children: []
+        }
+
+        // 列标题
+        if (grpInfo.grp)
+        {
+          key = `fld.${this.entity.name}.${grpInfo.grp}`
+          grp.title = this.$loc(key)
+        }
+        // eslint-disable-next-line
+        if (!grp.title || grp.title == key)
+          grp.title = grpInfo.title
+
+        result.push(grp)
+
+        // 把列加入到组下面去
+        if (grpInfo.cols)
+        {
+          const map = {}
+          let col
+
+          // 建对照
+          for (col of grpInfo.cols.split(','))
+            map[col] = 1
+
+          for (col of cols)
+          {
+            // eslint-disable-next-line
+            key = col.colname[0] == '_' ? col.colname.substring(1) : col.colname
+
+            // 判断列名要不要加入到组
+            if (map[key])
+            {
+              grp.children.push(col)
+              delete map[key]
+            }
+          }
+        }
+
+        // 递归
+        if (grpInfo.children)
+        {
+          for (let child of grpInfo.children)
+            _makeTree(grp.children, child)
+        }
+      }
+
+      for (item of this.colGrps)
+        _makeTree(tree, item)
+
+      return tree
+    },
+
+    /**
+     * 初始化插件信息
+     * @method
+     * @param   {String}      plugs       配置插件（多个用，分隔）
+     * @returns {Promise}
+     */
+    initPlugs(plugs)
+    {
+      return cx.dc.Plug.plugs(plugs.split())
+        .then(ret =>
+        {
+          this.rmenus = ret
+
+          this.makeOpers(ret)
+          return ret
+        })
+    },
+
+    /**
+     * 构造数据可视化对象
+     * @method
+     */
+    makeVisual()
+    {
+      // -------------------------------------------
+      // 按照这样的格式设置
+      // {
+      //   1:                           // 列索引
+      //   {
+      //     colname: 'completed',      // 字段名
+      //     visual: Object             // 可视化对象
+      //   }
+      // }
+
+      const visuals = {}
+      const cols = []
+      let colno = this.dg.table.multiple ? 1 : 0      // 多选的时候，前面多了选择列
+      let col, colname, visual
+
+      for (col of this.cols)
+      {
+        if (col.visible)
+        {
+          colno++
+
+          colname = col.colname
+          // eslint-disable-next-line
+          if (colname[0] == '_')
+            colname = colname.substring(1)
+          cols.push(colname)
+
+          if (col.visual)                           // 配置的规则
+          {
+            visual = cx.datavsl.get(col.visual)
+            if (visual)
+              visuals[colno] = { colname, visual }
+          }
+        }
+      }
+
+      this.visuals = visuals
+      this.colsSel = cols.toString()
+    },
+
+    /**
+     * 行样式
+     * @method
+     * @param   {Object}    opts             参数对象
+     * @param   {Object}    pts.aatt         行数据
+     * @param   {Number}    pts.arowIndex    行索引
+     * @returns {Object}                样式对象
+     */
+    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 })
+    {
+      const obj = this.visuals[columnIndex]
+
+      if (obj)
+      {
+        // eslint-disable-next-line
+        if (obj.visual.attMode == cx.consts.FLDMODE)
+          return obj.visual.visual(row[obj.colname])
+        else
+          return obj.visual.visual(row)
+      }
+    },
+
+    /**
+     * 按列头排序
+     * @method
+     * @param   {String}      name          排序字段
+     * @param   {String}      order         排序方式
+     */
+    onSortChange(name, order)
+    {
+      if (name)
+      {
+        // eslint-disable-next-line
+        if (name[0] == '_')
+          name = name.substring(1)
+      }
+      if (name && order)
+        this.orderby = (this.unionQuery && this.unionQuery.mainAlias ? this.unionQuery.mainAlias + '.' : '') + name + ' ' + order
+      else
+        this.orderby = ''
+      this.query()
+    },
+
+    /**
+     * 点击行
+     * @method
+     * @param   {Object}    att         行数据
+     */
+    onRowClick(att)
+    {
+      this.selected = att
+
+      /**
+       * 单击行事件
+       * @event row-click
+       * @param {Object}     setected     单击行的数据
+       */
+      this.$emit('row-click', att)
+    },
+
+    /**
+     * 双击行
+     * @method
+     * @param   {Object}    att         行数据
+     */
+    onRowDblClick(att)
+    {
+      this.selected = att
+
+      /**
+       * 双击行事件
+       * @event row-dbclick
+       * @param {Object}     setected     双击行的数据
+       */
+      this.$emit('row-dbclick', att)
+    },
+
+    /**
+     * 选择发生变化
+     * @method
+     * @param   {Array}     selection   选中的行数据
+     */
+    onSelectionChange(selection)
+    {
+      this.selection = selection
+
+      /**
+       * 勾选行事件
+       * @event selection-change
+       * @param {Array.<Object>}     selection    复选框选中的全部行
+       */
+      this.$emit('selection-change', selection)
+    },
+
+    /**
+     * 消息响应函数-每页数据量变化
+     * @method
+     * @param   {Number}    pagesize    选中的页码
+     */
+    onPagesizeChage(pagesize)
+    {
+      if (this.dg.page.pageSize !== pagesize)
+        this.dg.page.pageSize = pagesize
+
+      this.queryPara.pagesize = pagesize
+      this.queryPara.pageno = 1
+      this.query()
+    },
+
+    /**
+     * 消息响应函数-选中某页
+     * @method
+     * @param   {Number}    pageNo      选中的页码
+     */
+    onPageChange(pageNo)
+    {
+      if (this.dg.page.currentPage !== pageNo)
+        this.dg.page.currentPage = pageNo
+
+      if (this.queryPara.pageno !== pageNo)
+      {
+        this.queryPara.pageno = pageNo < 1 ? 1 : pageNo
+        this.query()
+      }
+    },
+
+    /**
+     * 右键菜单
+     * @method
+     * @param   {Object}    row           当前行
+     * @param   {Object}    column        列信息
+     * @param   {Object}    event         事件
+     */
+    onConextMmenu(row, column, event)
+    {
+      this.hideRMenu(event)
+
+      if (row !== this.selected)
+      {
+        this.getDatagrid().getTable().getElTable().setCurrentRow(row)
+        this.selected = row
+        this.$emit('row-click', row)
+      }
+
+      if (this.rmenus.length > 0)
+      {
+        this.makeFldVal(row)
+        cx.dc.Plug.state(this.rmenus, this.conVals, this.conFlds)
+      }
+
+      this.showRMenu(event)
+    },
+
+    /**
+     * 显示右边键菜单
+     * @method
+     * @param   {Object}    event           事件对象
+     */
+    showRMenu(event)
+    {
+      this.getDatagrid().getRMenu().show(event)
+    },
+
+    /**
+     * 隐藏右边键菜单
+     * @method
+     * @param   {Object}    event           事件对象
+     */
+    hideRMenu(event)
+    {
+      this.getDatagrid().getRMenu().hide(event)
+    },
+
+    /**
+     * 确定插件当前的状态
+     * @method
+     * @param   {Object}  plug              插件对象
+     * @param   {Object}  args              参数
+     * @returns {Object}                    { visible: Boolean, disabled: Boolean }
+     */
+    pluginState(plug, args)
+    {
+      // 这里没有调用关闭函数，是因为 hideMenu 需要参数 event
+      // this.hideRMenu(null)
+      if (this.conValues)
+      {
+        this.makeFldVal(args)
+        return cx.dc.Plug.state2(plug, this.conVals, this.conFlds)
+      }
+
+      // 根据配置控制
+      let show = true
+      if (cx.base.isFunc(plug.show))
+        show = plug.show(args)
+      else if (cx.base.isNNull(plug.show))
+        show = plug.show
+
+      let enable = true
+      if (cx.base.isFunc(plug.enable))
+        enable = plug.enable(args)
+      else if (cx.base.isNNull(plug.enable))
+        enable = plug.enable
+
+      return { visible: show, disabled: !enable }
+    },
+
+    /**
+     * 消息响应函数-下拉操作展开之前
+     * @method
+     * @param   {Object}   args              参数
+     */
+    beforeDropdown(args)
+    {
+      // 这里没有调用关闭函数，是因为 hideMenu 需要参数 event
+      // this.hideRMenu(null)
+      this.makeFldVal(args)
+      cx.dc.Plug.state(this.rmenus, this.conVals, this.conFlds)
+    },
+
+    // 生成条件表达式计算的字段信息、值
+    makeFldVal(att)
+    {
+      if (this.conValues)
+      {
+        this.conFlds.clear()
+        this.conVals.clear()
+        this.conValues.values(this.conFlds, this.conVals, att, null, this)
+      }
+    },
+
+    // 取插件运行参数
+    plugParams(key, curNode)
+    {
+      switch (key)
+      {
+      case '{context}':
+        return this
+      case '{values}':
+        return this.conVals.values
+      case '{curNode}':
+        return curNode ? curNode : this.selected
+      case '{selection}':
+        return this.selection
+      }
+    },
+
+    /**
+     * 点击插件
+     * @method
+     * @param   {Object}    oper        点击的操作
+     * @param   {Array}     args        行数据
+     */
+    onPluginClick(oper, args)
+    {
+      // 预防点击的时候，没有改变 values 里面的值
+      const att = args ? args : this.selected
+
+      if (this.conValues)
+      {
+        this.makeFldVal(att)
+        cx.dc.Plug.state2(oper, this.conVals, this.conFlds)
+      }
+
+      cx.dc.Plug.execute(oper, this.plugParams, att, this.selection, this)
+    },
+ 
+    /**
+     * 消息响应函数-根据自定义表达式搜索
+     * @method
+     */
+    onExpSearch()
+    {
+      // 默认查询
+      if (!this.makeAttExp())
+        return
+ 
+      const defExp = cx.sqlexp.getDefExp()                   // 空表达式
+      const page = this.getDatagrid().getPage()
+ 
+      cx.sqlexp.merge(defExp, this.fixedExp, this.attExp)
+      this.queryPara = cx.sqlexp.queryPara(defExp, this.dg.pages ? this.dg.page.pageSize : 0)
+      if (page)
+        page.currentPage = 1
+      this.query()
+    },
+
+    /**
+     * 消息响应函数-根据自定义表达式搜索
+     * @method
+     */
+    onExpClear()
+    {
+      for (let fld of this.expFlds)
+      {
+        fld.value = ''
+        fld.value1 = ''
+        fld.value2 = ''
+      }
+    },
+
+    /**
+     * 消息响应函数-更多条件过滤
+     * @method
+     */
+    onExpMore()
+    {
+      const self = this
+      const params =
+      {
+        flds: self.expFlds,
+        unionQuery: self.unionQuery,
+        onOk: (attExp) =>
+        {
+          const defExp = cx.sqlexp.getDefExp()                // 空表达式
+
+          self.attExp = attExp
+          cx.sqlexp.merge(defExp, self.fixedExp, self.attExp)
+          self.queryPara = cx.sqlexp.queryPara(defExp, self.dg.pages ? self.dg.page.pageSize : 0)
+
+          self.query()
+        }
+      }
+      cx.run.runPlug('ExpMoreInput', params)
+    },
+
+    /**
+     * 字段可视化发生变化
+     */
+    onFldVisible(col)
+    {
+      this.updColsWidth()
+      this.makeVisual()
+    },
+
+    /**
+     * 消息响应函数-刷新
+     * @method
+     */
+    onRefresh()
+    {
+      this.clearSelection()
+      this.refresh()
+    },
+
+    /**
+     * 消息响应函数-刷新一条记录
+     * @method
+     */
+    onRefreshA()
+    {
+      this.refreshA()
+    },
+
+    /**
+     * 事件 edit-row 响应函数
+     * @param   {Number}    oldRowIndex     旧行
+     * @param   {Number}    newRowIndex     新行
+     */
+    onEditRow(oldRowIndex, newRowIndex)
+    {
+    },
+
+    /**
+     * 取当前选中的行
+     * @method
+     * @returns {Object}
+     */
+    getSelected()
+    {
+      return this.selected
+    },
+
+    /**
+     * 返回当前行
+     * @method
+     * @returns {Object}
+     */
+    getCur()
+    {
+      return this.selected
+    },
+
+    /**
+     * 获取缺省的exp-input条件列字段信息
+     * @method
+     * @returns {Array}                     返回条件字段对象序列
+     */
+    getDefExpFlds()
+    {
+      let expFlds = []
+      if (this.useExp)
+        this.attObj.makeExp(expFlds, this.expRange, this.expExclude, this.cfgFlds)
+      
+      return expFlds
+    },
+
+    /**
+     * 获取的exp-input条件列字段信息
+     * @method
+     * @returns {Array}                     返回条件字段对象序列
+     */
+    getExpFlds()
+    {
+      return this.getDefExpFlds()
+    },
+
+    /**
+     * 获取缺省的datagrid列字段信息
+     * @method
+     * @returns {Array}                     返回datagrid列字段
+     */
+    getDefCols()
+    {
+      return cx.datagrid.getDefCols2(this.cfgFlds, this.tabCfg)
+    },
+
+    /**
+     * 获取datagrid列字段信息
+     * @method
+     * @returns {Array}                     返回datagrid列字段
+     */
+    getCols()
+    {
+      return this.getDefCols()
+    },
+
+    /**
+     * 设置全部操作的配置
+     * @method
+     * @param   {Array}   opers         操作数组o
+     * @returns {Object}                this
+     */
+    makeOpers(opers)
+    {
+      const operCfg = this.dg.table.operCfg
+
+      for (let oper of opers)
+      {
+        if (cx.base.isNNull(operCfg.showTitle))
+          oper.showTitle = operCfg.showTitle
+        if (cx.base.isNNull(operCfg.showIcon))
+          oper.showIcon = operCfg.showIcon
+      }
+    },
+
+    /**
+     * 设置操作的下拉菜单
+     * @param   {Boolean}   [showTitle]   是否显示标题
+     * @param   {Boolean}   [showIcon]    是否显示图标
+     */
+    setOpers(showTitle, showIcon)
+    {
+      cx.config.setOperCfg(this.dg.table.operCfg, showTitle, showIcon)
+    },
+
+    /**
+     * 取操作按钮信息
+     * @method
+     * @returns {Array.<Object>}            操作列对象序列
+     * @example
+     *     [{
+     *       colname: String,
+     *       title: String,
+     *       width: Number,
+     *       max: Nunber,
+     *       [align: String = 'center']
+     *       btns: [{name: String, title: String, onClick: Function}]
+     *     }]
+     */
+    getOpers()
+    {
+      return this.getDefOpers()
+    },
+
+    /**
+     * 取默认操作按钮信息
+     * @method
+     * @returns {Array.<Object>}            操作列对象序列，默认只有一个对象，btns属性是该列的按钮
+     * @example
+     *     [{
+     *       colname: String,
+     *       title: String,
+     *       width: Number,
+     *       max: Nunber,
+     *       [align: String = 'center']
+     *       btns: [{name: String, title: String, onClick: Function}]
+     *     }]
+     */
+    getDefOpers()
+    {
+      // 增/删/改/查操作
+      const operCol = this.getColOper()
+      if (!this.editable)
+        this.addOperView(operCol)
+      else
+      {
+        this.addOperEdit(operCol)
+          .addOperDel(operCol)
+      }
+      this.setAttOper(operCol)
+
+      return [operCol]
+    },
+
+    /**
+     * 设置属性相关的按钮
+     * @method
+     * @abstract
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    setAttOper(operCol)
+    {
+      return this
+    },
+
+    /**
+     * 操作列
+     * @method
+     * @returns {Object}
+     */
+    getColOper()
+    {
+      return { colname: 'rud_', title: this.$locBase('oper'), width: this.editable ? 95 : 70, max: 3, align: 'center', btns: [] }
+    },
+
+    /**
+     * 增加操作-浏览
+     * @method
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    addOperView(operCol)
+    {
+      const oper = cx.datagrid.getOper('view_', this.$locBase('view'), '')
+
+      oper.enable = (att) => true
+      oper.show = (att) => !this.editable || !!att.completed || (this.editable && !!att.procinstid)
+      oper.onClick = (att) =>
+      {
+        this._view(att)
+      }
+
+      this.operView(oper)
+      operCol.btns.push(oper)
+      return this
+    },
+
+    /**
+     * 增加操作-编辑
+     * @method
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    addOperEdit(operCol)
+    {
+      const oper = cx.datagrid.getOper('edit_', this.$locBase('edit'), '')
+
+      oper.type = 'warning'
+      oper.enable = (att) => true
+      oper.show = (att) => !!this.editable && !att.completed && !att.procinstid
+      oper.onClick = (att) =>
+      {
+        this._upd(att)
+      }
+      // oper.icon = cx.config.icon.edit
+      // oper.showLabel = false
+
+      this.operEdit(oper)
+      operCol.btns.push(oper)
+      return this
+    },
+
+    /**
+     * 增加操作-删除
+     * @method
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    addOperDel(operCol)
+    {
+      const oper = cx.datagrid.getOper('del_', this.$locBase('del'), '')
+
+      oper.type = 'danger'
+      oper.enable = (att) => true
+      oper.show = (att) => !!this.editable && !att.completed && !att.bill
+      oper.onClick = (att) =>
+      {
+        this._del(att)
+      }
+      // oper.icon = cx.config.icon.del
+      // oper.showIcon = false
+
+      this.operDel(oper)
+      operCol.btns.push(oper)
+      return this
+    },
+
+    /**
+     * 增加操作-完成->未完成
+     * @method
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    addOperCompelete(operCol)
+    {
+      const oper = cx.datagrid.getOper('uncomp_', this.$loc('cx.btnUncompelete'), '')
+ 
+      oper.type = 'warning'
+      oper.enable = (att) => true
+      oper.show = (att) => !!this.editable && att.completed && !att.procinstid
+      oper.onClick = (att) =>
+      {
+        this._complete(att, 0)
+      }
+
+      operCol.btns.push(oper)
+      return this
+    },
+
+    /**
+     * 增加操作-详情
+     * @method
+     * @param   {Object}  operCol     操作列
+     * @returns {Object}              this
+     */
+    addOperDetail(operCol)
+    {
+      const oper = cx.datagrid.getOper('detail_', this.$locBase('detail'), '')
+ 
+      oper.enable = (att) => true
+      oper.show = (att) => att.procinstid
+      oper.onClick = (att) =>
+      {
+        this._detail(att)
+      }
+
+      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}   err     异常对象
+     */
+    onError(err)
+    {
+      // this.$processing.close()
+      this.$showRet(err)
+    },
+
+    /**
+     * 刷新
+     * @method
+     */
+    refresh()
+    {
+      if (this.dg.pages)
+      {
+        this.queryPara.init = 0                     // 重新查询
+        this.queryPara.pageno = 1
+        this.queryPara.pagesize = this.dg.page.pageSize
+      }
+      this.query()
+    },
+
+    /**
+     * 刷新当前页
+     * @method
+     */
+    refreshPage()
+    {
+      if (this.dg.pages)
+        this.queryPara.init = 0                     // 重新查询
+
+      this.query()
+    },
+
+    /**
+     * 刷新一条记录
+     * @method
+    refreshA(att)
+    {
+      if (!att)
+        att = this.selected
+      if (!att)
+        return
+ 
+      cx.svr.data.queryId(this.major, this.minor, att.id)
+        .then(ret =>
+        {
+          this.gridUpd(ret, att)
+        })
+    },
+
+    /**
+     * 更新列的宽度
+     */
+    updColsWidth()
+    {
+      cx.datagrid.makeColsFitWidth(this.cols, this.list, this.maxColWidth, this.fontSize, this.padding)
+    },
+
+    /**
+     * 向数据库发查询请求
+     * @method
+     */
+    query()
+    {
+      // 回调函数
+      const onSuccess = async ret =>
+      {
+        let data = [], total = 0
+        let att
+
+        this.$processing.close()
+
+        if (ret instanceof Array)
+        {
+          data = ret
+          total = 0
+        }
+        else
+        {
+          data = ret.data
+          total = ret.total
+        }
+
+        // 当前选中行还在不在？
+        if (this.selected)
+        {
+          if (!cx.array.get1(data, { id: this.selected }))
+            this.selected = null
+        }
+        data = await this.processQryData(data, this)
+
+        // 显示数据
+        for (att of data)
+          this.getDisp(att)
+ 
+        this.afterQuery()
+
+        if (this.dg.pages)
+        {
+          if (!this.queryPara.init)
+          {
+            this.queryPara.init = 1
+            this.dg.page.total = total
+          }
+        }
+
+        cx.array.appendArr(this.list, data)
+
+        // 根据数据和字段更新列宽度
+        if (this.dynaWidth)
+          this.updColsWidth()
+      }
+
+      // 装配参数
+      if (this.sqlCfg.key)
+      {
+        this.queryPara._key = this.sqlCfg.key
+
+        // eslint-disable-next-line
+         if (this.sqlCfg.vals != undefined && this.sqlCfg.vals != null && this.sqlCfg.vals !== '')
+          this.queryPara.vals = this.sqlCfg.vals
+
+        if (this.sqlCfg.orderby)
+          this.queryPara.orderby = this.sqlCfg.orderby
+        if (this.sqlCfg.args)
+          this.queryPara.args = this.sqlCfg.args
+      }
+      if (this.orderby)
+        this.queryPara.orderby = this.orderby
+ 
+      if (this.queryPara.args.length < 1 && !this.sqlCfg.key)   // 如果没有条件表达式
+      {
+        if (this.noExpDispAll)                                  // 没有查询条件显示所有数据
+        {
+          this.queryPara.args = [['id', '>', 0]]
+          this.queryPara.orderby = 'id desc'
+        }
+        else
+          return
+      }
+      if (!this.queryPara.args)
+        delete this.queryPara.args
+ 
+      this.beforeQuery()
+      cx.array.clear(this.dg.table.list)
+      this.runSvr(onSuccess)
+    },
+
+    /**
+     * 调取服务进行查询
+     * @method
+     * @param  {Function}  onSuccess  查询成功后的回调函数
+     */
+    runSvr(onSuccess)
+    {
+      // 发起调用
+      this.$processing.show()
+      cx.svr.data.query(this.major, this.minor, this.queryPara)
+        .then(onSuccess)
+        .catch(err =>
+        {
+          this.$processing.close()
+          this.onError(err)
+        })
+    },
+
+    /**
+     * 产生查询参数
+     * @method
+     */
+    makeQueryPara()
+    {
+      const exp = cx.sqlexp.getDefExp()                   // 空表达式
+
+      cx.sqlexp.merge(exp, this.fixedExp, this.attExp)
+      this.queryPara = cx.sqlexp.queryPara(exp, this.dg.pages ? this.dg.page.pageSize : 0)
+    },
+
+    /**
+     * 根据当前的查询条件，返回数据，导出数据
+     * @returns {Promise}
+     */
+    exportData()
+    {
+      const self = this
+      const sqlCfg = self.sqlCfg
+      const exp = cx.sqlexp.getDefExp()                   // 空表达式
+      cx.sqlexp.merge(exp, self.fixedExp, self.attExp)
+
+      const params = cx.sqlexp.queryPara(exp, 0)
+
+      if (sqlCfg.key)
+      {
+        params._key = sqlCfg.key
+
+        // eslint-disable-next-line
+         if (sqlCfg.vals != undefined && sqlCfg.vals != null && sqlCfg.vals !== '')
+          params.vals = sqlCfg.vals
+
+        if (sqlCfg.orderby)
+          params.orderby = sqlCfg.orderby
+        if (sqlCfg.args)
+          params.args = sqlCfg.args
+      }
+      if (self.orderby)
+        params.orderby = self.orderby
+
+      if (params.args.length < 1 && !sqlCfg.key)   // 如果没有条件表达式
+      {
+        if (self.noExpDispAll)                     // 没有查询条件显示所有数据
+        {
+          params.args = [['id', '>', 0]]
+          params.orderby = 'id desc'
+        }
+      }
+      if (params.args.length < 1)
+        delete params.args
+
+      // 发起调用
+      return cx.svr.data.query(self.major, self.minor, params)
+        .then(ret =>
+        {
+          for (let att of ret)
+            self.getDisp(att)
+
+          return ret
+        })
+    },
+
+    /**
+     * 根据当前的getCols()，取当前显示的列名
+     * @returns { cols: Array.<String>, colInfs: {colname: {_label: ..., }} }
+     */
+    getDispCols()
+    {
+      const _cols = this.getCols()
+      const cols = [], colInfs = {}
+      let colname, title
+
+      _cols.forEach(item =>
+      {
+        colname = item.colname
+        title = item.title
+        // eslint-disable-next-line
+         if (colname[0] == '_')
+          colname = colname.substring(1)
+        cols.push(colname)
+        if (title)
+          colInfs[colname] = { _label: title }
+      })
+      return { cols, colInfs }
+    },
+
+    /**
+     * 取对象的显示信息
+     * @method
+     * @param   {Object}  att       属性对象
+     * @returns {Object}            this
+     */
+    getDisp(att)
+    {
+      this._getDisp(att)
+      return this
+    },
+
+    /**
+     * 取对象的显示信息
+     * @method
+     * @private
+     * @param   {Object}  att       属性对象
+     * @returns {Object}            this
+     */
+    _getDisp(att)
+    {
+      this.attObj.numberize(att)
+      this.attObj.decode(att)
+      this.attObj.getDisp(att)
+      return this
+    },
+
+    /**
+     * 添加新项到datagrid列表
+     * @method
+     * @param  {Object}    attNew    新属性
+     */
+    gridAdd(attNew)
+    {
+      this.getDisp(attNew)
+      cx.array.insert(this.list, attNew)
+    },
+
+    /**
+     * 从datagrid删除项
+     * @method
+     * @param  {Object}    attOld    旧属性
+     */
+    gridDel(attOld)
+    {
+      cx.array.remove(this.list, { id: attOld.id })
+      // eslint-disable-next-line
+       if (this.selected && this.selected.id == attOld.id)
+        this.selected = null
+    },
+
+    /**
+     * 更新datagrid项
+     * @method
+     * @param  {Object}    attNew    新属性
+     * @param  {Object}    attOld    旧属性
+     */
+    gridUpd(attNew, attOld)
+    {
+      let item, i, j
+
+      for (i = this.list.length - 1; i >= 0; i--)
+      {
+        item = this.list[i]
+        // eslint-disable-next-line
+         if (item.id == attNew.id)
+        {
+          for (j in attNew)
+            item[j] = attNew[j]
+          this.getDisp(item)
+        }
+      }
+    },
+
+    /**
+     * 生成用户自定义的条件表达式,放在attExp对象里面
+     * @method
+     * @returns {Boolean}               是否正确生成表达式
+     */
+    makeAttExp()
+    {
+      const exp = cx.sqlexp.getDefExp()   // 空表达式
+      const attExp = this.getExp()
+ 
+      cx.sqlexp.merge(exp, attExp)
+      this.attExp = exp
+      return true
+    },
+
+    /**
+     * 提交-增加
+     * @method
+     * @param   {Object}    att         新属性
+     */
+    submitAdd(att, plug)
+    {
+      if (!this.beforeAdd(att, plug))
+      {
+        return new Promise((resolve) =>
+        {
+          resolve(false)
+        })
+      }
+      return cx.svr.attOper.insert(this.major, this.minor, att, this.retAtt)
+        .then(ret =>
+        {
+          return true
+          // 这里没有额外代码，是因为该类增加了数据增删改监听
+        })
+    },
+
+    /**
+     * 提交-删除
+     * @method
+     * @param  {Object}  att    属性
+     */
+    submitDel(att)
+    {
+      if (!att)
+        return
+      if (!this.beforeDel(att))
+        return
+
+      cx.svr.attOper.del(this.major, this.minor, att)
+        .then(ret =>
+        {
+          // eslint-disable-next-line
+           if (att == this.selected)
+            this.selected = null
+
+          // 这里没有额外代码，是因为该类增加了数据增删改监听
+        })
+        .catch(this.onError)
+    },
+
+    /**
+     * 提交-删除多个
+     * @method
+     * @param  {Array.<Object>}  atts    属性序列
+     */
+    submitDels(atts)
+    {
+      if (!atts.length)
+        return
+      if (!this.beforeDels(atts))
+        return
+
+      cx.svr.attOper.dels(this.major, this.minor, atts)
+        .then(ret =>
+        {
+          this.selection = []
+          // eslint-disable-next-line
+          if (atts.find(item => item == this.selected))
+            this.selected = null
+
+          // 这里没有额外代码，是因为该类增加了数据增删改监听
+        })
+        .catch(this.onError)
+    },
+
+    /**
+     * 提交-修改
+     * @method
+     * @param   {Object}    attNew      新属性
+     * @param   {Object}    attOld      旧属性
+     */
+    submitUpd(attNew, attOld)
+    {
+      return new Promise((resolve) =>
+      {
+        resolve(true)
+      })
+      // 这里没有额外代码，是因为该类增加了数据增删改监听，并且很多地方是界面提供了修改数据功能
+    },
+
+    /**
+     * 提交-开启/关闭
+     * @method
+     * @param   {Object}  att           新属性
+     * @param   {Number}  state         状态值(0-未结束 1-结束)
+     */
+    submitComp(att, state)
+    {
+      const attNew =
+       {
+         id: att.id,
+         completed: state,
+         cols: 'completed'
+       }
+ 
+      if (state === 0)
+      {
+        attNew.procinstid = ''
+        attNew.bill = ''
+      }
+
+      cx.svr.attOper.update(this.major, this.minor, attNew, att)
+        .then(ret =>
+        {
+          // this.afterUpd(att)
+          // this.gridUpd(attNew, att)
+        })
+        .catch(this.onError)
+    },
+
+    /**
+     * 根据属性删除实体
+     * @private
+     * @method
+     * @param  {Object}  att    属性
+     */
+    _del(att)
+    {
+      if (!att)
+        return
+
+      this.$cfm('del')
+        .then(() =>
+        {
+          this.submitDel(att)
+        })
+        .catch(() =>
+        {
+        })
+    },
+
+    /**
+     * 根据属性删除实体
+     * @private
+     * @method
+     * @param  {Array.<Object>}  atts    属性序列
+     */
+    _dels(atts = [])
+    {
+      if (atts.length === 0)
+        return
+
+      this.$cfm('del')
+        .then(() =>
+        {
+          this.submitDels(atts)
+        })
+        .catch(() =>
+        {
+        })
+    },
+
+    /**
+     * 根据属性查看实体
+     * @private
+     * @method
+     * @param  {Object}  att    属性
+     */
+    _view(att)
+    {
+      if (!att)
+        return
+
+      // 弹出输入界面
+      const params =
+      {
+        major: this.major,
+        minor: this.minor,
+        title: this.getEntityName(),
+        att: att,
+        editable: false,
+        closable: true,
+        mode: cx.consts.MODE_VIEW
+      }
+
+      // 基于配置文件的定义表单
+      if (this.dynaForm?.viewForm)
+        cx.form.attEdit(this.dynaForm.viewForm, params)
+      // 基于数据库的默认表单
+      else
+        cx.form.attEditNoCfg(params)
+    },
+
+    /**
+     * 根据属性编辑实体
+     * @private
+     * @method
+     * @param   {Object}  att                 属性
+     * @param   {Boolean} [changed = false]   数据改变标记
+     */
+    _upd(att, changed)
+    {
+      if (!att)
+        return
+
+      const params =
+      {
+        major: this.major,
+        minor: this.minor,
+        title: this.getEntityName(),
+        att: att,
+        editable: true,
+        closable: true,
+        mode: cx.consts.MODE_EDIT,
+        retAtt: this.retAtt,
+        beforeUpd: (att) => this.beforeUpd(att),
+        onOk: (attNew, attOld) => this.submitUpd(attNew, attOld)
+      }
+
+      if (changed)
+        params.changed = !!changed
+
+      // 基于配置文件的定义表单
+      if (this.dynaForm?.viewForm)
+        cx.form.attEdit(this.dynaForm.viewForm, params)
+      // 基于数据库的默认表单
+      else
+        cx.form.attEditNoCfg(params)
+    },
+
+    /**
+     * 根据属性开启/关闭
+     * @private
+     * @method
+     * @param  {Object}  att    属性
+     * @param  {Number}  state  状态值(0-未结束 1-结束)
+     */
+    _complete(att, state)
+    {
+      if (!att)
+        return
+
+      this.$cfmMsg(this.$loc('cx.cfmUncomplete'))
+        .then(() =>
+        {
+          this.submitComp(att, state)
+        })
+        .catch(() =>
+        {
+        })
+    },
+
+    /**
+     * 根据属性查看详情
+     * @private
+     * @method
+     * @param  {Object}  att    属性
+     */
+    _detail(att)
+    {
+      if (!att)
+        return
+
+      // 查找表对应的流程
+      const proc = cx.array.get1($g.init.procs, { tabname: this.entity.name })
+
+      if (proc)
+      {
+        const plug = proc.plugins.detail
+ 
+        if (plug)
+        {
+          const params =
+           {
+             major: this.major,
+             minor: this.minor,
+             att,
+             editable: false,
+             task: null
+           }
+           // 上面没有传 comments 参数
+ 
+          cx.base.execute(plug, [params])
+        }
+      }
+    },
+
+    /**
+     * 根据ID删除实体
+     * @method
+     * @param  {Number}  id    ID
+     */
+    del(id)
+    {
+      this._del(cx.array.get1(this.list, { id: parseInt(id) }))
+    },
+
+    /**
+     * 根据ID删除实体
+     * @method
+     * @param  {Number}  id    ID
+     */
+    view(id)
+    {
+      this._view(cx.array.get1(this.list, { id: parseInt(id) }))
+    },
+
+    /**
+     * 根据ID修改实体
+     * @method
+     * @param  {Number}  id    ID
+     */
+    upd(id)
+    {
+      this._upd(cx.array.get1(this.list, { id: parseInt(id) }))
+    },
+
+    /**
+     * 根据ID开启
+     * @method
+     * @param  {Number}  id    ID
+     */
+    complete(id)
+    {
+      this._complete(cx.array.get1(this.list, { id: parseInt(id) }), 0)
+    },
+
+    /**
+     * 根据ID修改实体
+     * @method
+     * @param  {Number}  id    ID
+     */
+    detail(id)
+    {
+      this._detail(cx.array.get1(this.list, { id: parseInt(id) }))
+    },
+
+    /**
+     * 消息响应函数-添加
+     * @method
+     */
+    onAdd()
+    {
+      // 弹出输入界面
+      const params =
+      {
+        major: this.major,
+        minor: this.minor,
+        title: this.getEntityName(),
+        onOk: (att, plug) => this.submitAdd(att, plug)
+      }
+
+      // 基于配置文件的定义表单
+      if (this.dynaForm?.inputForm)
+      {
+        params.values = this.defVal()
+        cx.form.attInput(this.dynaForm.inputForm, params)
+      }
+      // 基于数据库的默认表单
+      else
+      {
+        params.att = this.defVal()
+        cx.form.attInputNoCfg(params)
+      }
+    },
+
+    /**
+     * 带属性进行添加操作
+     * @param   {Object}      att           带进来的属性信息
+     * @param   {String}      [title]       带进来的标题
+     * @method
+     */
+    addWithAtt(att, title)
+    {
+      // 弹出输入界面
+      const params =
+      {
+        major: this.major,
+        minor: this.minor,
+        title: title ? title : this.getEntityName(),
+        onOk: (att, plug) => this.submitAdd(att, plug)
+      }
+
+      // 基于配置文件的定义表单
+      if (this.dynaForm?.inputForm)
+      {
+        params.values = cx.base.extend(this.defVal(), att)
+        cx.form.attInput(this.dynaForm.inputForm, params)
+      }
+      // 基于数据库的默认表单
+      else
+      {
+        params.att = cx.base.extend(this.defVal(), att)
+        cx.form.attInputNoCfg(params)
+      }
+    },
+
+    /**
+     * 消息响应函数-删除
+     * @method
+     */
+    onDel()
+    {
+      this._del(this.getCur())
+    },
+
+    /**
+     * 消息响应函数-修改
+     * @method
+     */
+    onUpd()
+    {
+      this._upd(this.getCur())
+    },
+
+    /**
+     * 消息响应函数-属性查看
+     * @method
+     */
+    onView()
+    {
+      this._view(this.getCur())
+    },
+
+    /**
+     * 消息响应函数-明细
+     * @method
+     */
+    onDetail()
+    {
+      const att = this.getCur()
+      if (att)
+        this.detail(att.id)
+    },
+
+    /**
+     * 取默认值
+     * @method
+     * @returns {Object}        默认属性(如果没有缓存数据，则返回NULL)
+     */
+    defVal()
+    {
+      const att = this.attObj.getDefVal()
+      cx.att.getCacheAtt(this.major, this.minor, att)
+      this.initAtt(att)
+      return att
+    },
+
+    /**
+     * 用于输入属性之前，在派生类初始化属性（特殊情况下修改字段值）
+     * @method
+     * @param  {Object}  att      属性对象
+     */
+    initAtt(att)
+    {
+    },
+
+    /**
+     * 添加属性之前的接口
+     * @method
+     * @param  {Object}  att      属性对象
+     */
+    beforeAdd(att)
+    {
+      this.attObj.encode(att)
+      return true
+    },
+
+    /**
+     * 添加属性之后的接口
+     * @method
+     * @param  {Object}  att      属性对象
+     */
+    afterAdd(att)
+    {
+    },
+
+    /**
+     * 删除属性之前的接口
+     * @method
+     * @param  {Object}  att      属性对象
+     */
+    beforeDel(att)
+    {
+      return true
+    },
+
+    /**
+     * 删除属性之前的接口
+     * @method
+     * @param  {Array.<Object>}  atts    属性序列
+     */
+    beforeDels(att)
+    {
+      return true
+    },
+ 
+    /**
+     * 删除属性之后的接口
+     * @method
+     * @param  {Object}  att      属性对象
+     */
+    afterDel(att)
+    {
+    },
+
+    /**
+     * 修改属性之前的接口
+     * @method
+     * @param  {Object}  att      属性对象
+     */
+    beforeUpd(att)
+    {
+      // this.attObj.encode(att)
+      return true
+    },
+
+    /**
+     * 修改属性之后的接口
+     * @method
+     * @param  {Object}  att      属性对象
+     */
+    afterUpd(att)
+    {
+    },
+
+    /**
+     * 查询之后并处理成表格显示数据的接口
+     * @method
+     */
+    afterQuery()
+    {
+    },
+
+    /**
+     * 查询之后数据预处理接口
+     * @method
+     * @param   {Array.<Data>}     data       查询的原始数据序列
+     * @param   {Object}           ctx        当前文本上下午
+     * @returns {Promise}
+     */
+    processQryData(data, ctx)
+    {
+      return new Promise((resolve, reject) =>
+      {
+        resolve(data)
+      })
+    },
+
+    /**
+     * 查询之前的接口
+     * @method
+     */
+    beforeQuery()
+    {
+    },
+
+    /**
+     * 取实体信息
+     * @method
+     * @returns {Object}          返回实体信息
+     */
+    getEntity()
+    {
+      return this.entity
+    },
+
+    /**
+     * 取实体名称
+     * @method
+     * @returns {String}          返回实体信息
+     */
+    getEntityName()
+    {
+      return cx.i18n.locEntity(this.entity)
+    },
+
+    /**
+     * 取插件名
+     * @method
+     * @param   {Number}  type      类型
+     * @param   {Object}  [att]     属性(当前需要发起流程的属性)
+     * @returns {String}
+     */
+    getPluginName(type, att)
+    {
+      switch (type)
+      {
+      case cx.consts.PROC_START: return 'ProcStart'
+      case cx.consts.PROC_PROGRESS: return 'ProcProgress'
+      case cx.consts.PROC_TRACE: return 'ProcTrace'
+      case cx.consts.ATT_ADD:
+        return 'AttInput'
+      case cx.consts.ATT_EDIT:
+      case cx.consts.ATT_VIEW:
+        return 'AttEdit'
+      }
+      return ''
+    },
+
+    /**
+     * 取 Datagrid 对象
+     * @method
+     * @returns {Object}
+     */
+    getDatagrid()
+    {
+      return this.$refs.datagrid
+    },
+
+    /**
+     * 取 清除选择
+     * @method
+     */
+    clearSelection()
+    {
+      this.$refs.datagrid.getTable().getElTable().clearSelection()
+      this.selection = []
+      this.selected = null
+    }
+  }
+}