whh-control v1.2.85-beta

欢迎使用whh-control

• 重构了whh-grid，丰富了列编辑器
• 增加了更多的基本控件
• 解耦了项目结构
• 优化了样式，提高开发效率

update

• 1.0.92更新日志，新增了cellStyle 和 rowStyle 的参数
• 1.0.93更新日志，新增了keepSource的属性，如果不需要记录表格更改，可以绑定keepSource=false
• 1.0.94更新日志，新增了revertRows的方法，可以还原某些行或者单元格为原始数据，新增了deleteAllItems的方法， 修复了deleteItem参数为空时删除所有数据的风险，新增加了allowSelectMethod的属性，用来决定某一行是否允许选择
• 1.0.98更新日志，新增了可以直接导出所有记录的exportAllAsExcel(data,name)的方法，其中data是要导出的数据， 增加了对非空字段的校验，需要在grid上启用属性useStrict="true"
• 1.0.99更新日志，新增了排序和筛选的逻辑
• 1.1.01更新日志，修复了exportAllAsExcel 没有弹出高级选择框的问题
• 1.1.23更新日志，新增加了grid排序，筛选，固定列
• 1.1.58更新日志，修复了日期还有日期时间导出格式的问题
• 1.1.59更新日志，新增加了动态宽展列的功能
• 1.1.60更新日志，修复了excel导出会把开头的0去掉的问题
• 1.1.67更新日志，增加了whh-tree-grid控件，修复了表头合并的bug
• 1.1.74更新日志，增加了whh-image的beforeUpload属性

1. 基于vxe-table封装的一套功能强大的grid [vxe-table]

• 最大限度的支持老版本的whh-grid
• 全部基于vue开发，摒弃了之前的jquery+kendoui+angular+vue的开发框架
• 不需要再额外依赖第三方js库相关的1700+个js和css文件
• 重新开发gridEditor编辑器
• 新增加了更多列编辑器

    /**
     * 是否固定列，固定列直接按dw维护的列宽，不再按比例、按屏幕分摊
     */
    fixWidth:{
      type:Boolean,
      default:false
    },
    /**
     * 默认执行查询时间，需要配合axios使用
     */
    queryTimeout:{
      type:Number,
      default:90000
    },
    /**
     * 是否允许拖拽，拖拽之后不再支持 父级表头
     */
    draggable:{
      type:Boolean,
      default:false
    },
    /**
     * 导入设置
     */
    importConfig: Object,

    /**
     * 是否进行校验，默认不校验
     */
    useStrict: {
      type: Boolean,
      default: false
    },
    /**
     * 基础的构建参数，必传
     */
    option: {
      type: Object,
    },
    /**
     * 编辑模式
     * cell 单元格编辑(默认)
     * row 行编辑(推荐)
     */
    mode: {
      type: String,
      default: "cell"
    },
    /**
     * 自动触发布局的参数
     * 用来结局v-show造成的grid显示异常
     */
    syncResize:{
      type:String
    },
    /**
     * 触发方式，click或者manual
     */
    trigger: {
      type: String,
      default: "click"
    },
    /**
     * 列头的菜单项
     */
    headerMenus:Array,
    /**
     * body的菜单项
     */
    bodyMenus:Array,
    /**
     * 尾部的菜单项(暂未实现)
     */
    footerMenus:Array,
    /**
     * 菜单项实现的方法
     */
    visibleMethod:Function,
    /**
     * 父容器的高度
     * 可能在未来的版本弃用
     */
    outterHeight:{
      type:Number
    },
    /**
     * 是否使用斑马纹
     */
    stripe:{
      type:Boolean,
      default:true
    },
    /**
     * 列头行样式的class
     */
    headerRowClass: {
      type: [String, Function],
      default: "j-whh-vxe-header-row"
    },
    /**
     * 行样式的class
     */
    rowClass: {
      type: [String, Function],
      default: "j-whh-vxe-row"
    },
    /**
     * 单元格样式的class
     */
    cellClass: {
      type: [String, Function],
      default: "j-whh-vxe-cell"
    },
    rowStyle:{
      type:[Object,Function]
    },
    cellStyle:{
      type:[Object,Function]
    },
    /**
     * 列头单元格样式的class
     */
    headerCellClass: {
      type: [String, Function],
      default: "j-whh-vxe-header-cell"
    },
    /**
     * 性能调优参数(建议不做修改)
     * 全部采用虚拟滚动
     */
    optimization: {
      type: Object,
      default: function(){
        return {
          scrollY:
            {
              gt:60,
            }  ,
          animat: false
        }
      }
    },
    /**
     * 行合并的方法
     * 在主系表结构数据维护时推荐
     */
    rowspanMethod: {
      type: Function,
      default: undefined
    },
    /**
     * 列数据源提供工具
     * 只有单列下拉和多列下拉时有用
     */
    columnDataProvider:{
      type:Object
    }

  export default {

  /**
   * 清除所有数据和缓存，包括选中行
   */
  clearData()

  /**
   * 为grid赋值
   * @param data 复制的数据，必须为一个数组，数组的元素为对象
   */
  setData(data)
  ,
  /**
   * 默认的查询方法，返回一个promise
   * 查询完毕会发一个query-end的广播
   * @param para 查询的参数
   * @returns {Promise<any>}
   */
  defaultRetrieve(para)
  ,
  /**
   * 获取当前显示表格的所有数据
   * @returns {*}
   */
  getData: function ()

  /**
   * 删除选中行，包括单选和多选
   */
  deleteSelectedItems()

  /**
   * 删除选中行，只能是单选,
   * 已过时
   */
  deleteSelectedItem()

  /**
   * 在指定位置插入一条数据，
   * 当position为-1时插在末尾
   * 可以兼容之前的方法
   * @param item
   * @param position
   */
  addItem(item, position)

  /**
   * 在指定位置插入多条数据，
   * 当position为-1时插在末尾
   * @param items
   * @param position
   */
  addItems(items, position)

  /**
   * 删除一条记录
   * @param item
   */
  deleteItem(item)

  /**
   * 删除多条记录
   * @param items
   */
  //删除多条数据
  deleteItems(items)

  /**
   * 拿到选中的行
   * 包括多选和单选
   * 可以兼容之前的方法
   * @returns {*}
   */
  getSelectedItems()

  /**
   * 获取选择的列，只能用于单选
   * 已弃用
   * @returns {*}
   */
  getSelectedItem()

  /**
   * 拿到WhhGrid的元素
   * @returns {default}
   */
  getGridComponent()

  /**
   * 拿到VxeTable的元素
   * @returns {*|null}
   */
  getTableComponent()

  /**
   * 选择一行数据
    * @param item
   * @returns {*}
   */
  selectItem(item)

  /**
   * 选择多行数据
   * @param item
   * @returns {*}
   */
  selectItems(items)

  /**
   * 全选
   */
  selectAllItems()

  /**
   * 全部取消选择
   */
  unSelectAllItems()

  /**
   * 取消选择某一行
   * @param item
   * @returns {*}
   */
  unSelectItem(item)

  /**
   * 默认的保存方法，返回一个proimse
   * @returns {Promise<any>}
   */
  defaultSave()

  /**
   * 刷新表
   * 可以用于防止路由切换时数据丢失
   */
  refreshTable()

  /**
   * 判断是否有修改的列
   * @returns {boolean}
   */
  hasModifyCache()

  /**
   * 拿到增删改查的列
   * @returns {{insertItems: *, updateItems: *, deleteItems: *, originalItems: (Array|*)}}
   */
  getModifyCache()

  /**
   * 导出excel
   * @param name
   */
  exportAsExcel(name) {
    this.xTable.openExport({
      filename: name,
      types: ['csv', 'text', 'xml']
    })
  }
  ,
  /**
   * 隐藏某些列
   * @param fields
   */
  hideColumns(fields) {
    let columns = this.xTable.getTableColumn().fullColumn
    for (let i = 0; i < columns.length; i++) {
      let property = columns[i].property
      if (fields.indexOf(property) >= 0) {
        this.xTable.hideColumn(columns[i])
      }
    }
  }
  ,
  /**
   * 显示某些列
   * @param fields
   */
  showColumns(fields) {
    let columns = this.xTable.getTableColumn().fullColumn
    for (let i = 0; i < columns.length; i++) {
      let property = columns[i].property
      if (fields.indexOf(property) >= 0) {
        this.xTable.showColumn(columns[i])
      }
    }
  }
  ,
  /**
   * 定义某些不可编辑的列
   * 除此之外的列均可标记
   * @param fields
   */
  declareDisabledColumns(fields) {
    let options = this.globalOption.columns
    for (let i = 0; i < options.length; i++) {
      if (fields.indexOf(options[i].field) >= 0) {
        options[i].editable = false
      } else {
        options[i].editable = true
      }
    }
    this.buildColumn(this.globalOption)
  }
  ,
  /**
   * 与declareDisabledColumns相反
   * @param fields
   */
  declareEnbledColumns(fields) {
    let options = this.globalOption.columns
    for (let i = 0; i < options.length; i++) {
      if (fields.indexOf(options[i].field) >= 0) {
        options[i].editable = true
      } else {
        options[i].editable = false
      }
    }
    this.buildColumn(this.globalOption)
  }
  ,
  /**
   * 根据field拿到某一列的配置
   * @param field
   * @returns {*}
   */
  getColumnByField(field) {
    return this.xTable.getColumnByField(field)
  },

  /**
   * 动态控制列是否可编辑时用到
   * @param field
   * @param value
   */
  setDisabled(field, value) {
    let col = this.xTable.getColumnByField(field)
    if (col == undefined) {
      return
    }
    if (col.own && col.own.setDisabled) {
      col.own.setDisabled(value)
    }
  },

  /**
   * 动态扩展列，在原有列的基础上动态扩展
   * 第二次拓展会覆盖第一次推展的结果
   * @param columns
   */
  loadDynamicColumn(columns){
    let column = []
    for(let j=0;j<num;j++){
      let group1 = {
        field:'dt'+j,
        title:'动态父节点'+j
      }
      column.push(group1)
      for(let i=0;i<5;i++){
        let a1 = {
          field:'a-'+j+"-"+i,
          title:'动态'+j+"-"+i,
          width:'100px',
          minWidth:'100px',
          parentCol:group1.field
        }
        column.push(a1)
      }
    }
    this.gridNew.loadDynamicColumn(column)
  }
}

 /**
 * 值改变
 * row,column.selectItem
 */
ValueChange: "value-change",
/**
 * 保存成功
 * this
 */
SaveEnd: "save-end",
/**
 * 查询完成
 * originalData
 */
QueryEnd: "query-end",
/**
 * 双击事件
 * row,column,e,scope
 */
DbClick: "db-click",
/**
 * 单击事件
 * row,column,e,scope
 */
Click: "click",
/**
 * 初始化完成
 * this
 */
InitEnd: "init-end",
/**
 * 编辑器显示
 * row，column，this
 */
EditActived: "edit-actived",
/**
 * 显示编辑器之前
 * row,column,e
 */
BeforeEdit: "before-edit",
/**
 * 选中行改变
 */
SelectionChange: "select-change",//选中的多行改变
/**
 * 选中单行改变
 * 已弃用
 */
RadioChange: "radio-change", //选中的单行改变,
/**
 * 上传回调，用于fileEditor
 */
AfterUpload:"after-upload",
/**
 * 分页事件回调，用于自定义分页
 */
PageChange:"page-change",
/**
 * 菜单触发
 */
MenuTrigger:"menu-trigger",
/**
 * 菜单选择
 */
MenuSelect:"menu-select"