Dharma 17 号会员
        •  1 回帖  •  1.3K 浏览  •  5 年前
   

产品新 ui 框架 —— 组件文档

EhGrid

平台表格组件（持续更新）

调用方式

<eh-grid></eh-grid>

传入属性

id (String 必填)

自定义该表格的 id 属性

示例：

<eh-grid id="grid123456"></eh-grid>
dataSource (Object | Array 必填)

表格数据获取相关的属性配置

示例：

// template:
<eh-grid :dataSource="dataSource"></eh-grid>
//或
<eh-grid :data-source="dataSource"></eh-grid>
...
// script => data :
<script>
...
data(){
    return {
        dataSource: {
            // formdata参数：控制器名 (string 必填)
            bean: "mbbBdMrlController",
            // formdata参数：方法名 (string 必填)
            method: "select",
            // formdata参数：entity (string 必填)
            entity: "com.epichust.entity.MbbBdMrl",
            // 使用此方法代替bean与method作为请求方法（string 可选）
            request:'mbbBdMrlController!select.m',
            // 请求url参数 （Object 可选）
            params: { id : 123 },
            // 配置过滤选项 (Array<Object>)
            filters: [
              {
                field: "id", // 字段名
                compare: "cn,ge", // 比较方式（多个以逗号分隔）
                data: "", // 值
                type: "text"  // 输入框类型（text、input、select）
                options:{
                    // 新增select类型，将模板查询输入改为选择框，可将EhSelect的传入属性作为该配置对象的属性。例如keyName、valueName等。
                },
              },
              {
                field: "code",
                compare: "cn,eq",
                data: "",
              }
            ],
            // 是否首次自动加载数据
            loadDataOnFirst: true,
            // 数据请求方法实例 (Function<promise> 可忽略)
            serviceInstance: null,
            // 默认过滤字段 (Array | Object 可忽略)
            serviceInstanceInputParameters: null
        }
        // 特殊情况下，如果将dataSource赋值为数组类型的数据，表格将直接以传入的数组作为数据源！！
    }
}
</script>
grid (Object 必填)

表格展示相关的属性配置

默认配置 / 示例：

// template:
<eh-grid :grid="grid"></eh-grid>
...
// script => data :
<script>
...
data(){
    return {
        // element table 大部分属性都可以应用于此
        grid: {
          // 表格标题
          title:"",
          // 表格描述文字
          description:"",
          // required 展示的列名配置
          columns: [
            // el-table-column Attributes（详细属性在ele官网）
            // { name, refEntity, refName }
            // { 
            //  label, 表头
            //  prop, 列名
            //  visible, 是否显示 默认 true
            //  pass, 忽略发送该列名 默认 false
            //  exportHideen, 是否导出时隐藏此列 默认 false
            //  align, 居中 默认 'left'
            //  formatter,width,minWidth,... }
          ],
          //  没有默认排序
          defaultSort: {
          //  prop: "id",
          //  order: "ascending"
          },
          // required 分页组件属性
          pagination: {
            pageSize: 10, // 页容量
            // currentPage: 1,
            pageSizes: [10, 20, 50, 100]，// 页容量选项
          },
        
          // 出现表格框，且列可拉伸
          border: true,
          size: "small",
          // 默认高度占据大半可视高度
          // height: '',
          // rows:10,
          // page:1,
          // 最大高度，针对滚动条
          maxHeight: "440px", //document.documentElement.clientHeight - 270,
          // 是否显示分页
          pageable: true,
          // reduceMethod 待定
          // reduceMethod: null,
          // 确定行是否被选择，结果取决于方法返回值 function
          selectable: null,
          // 是否支持列表项选中功能
          mutiSelect: true,
          // 是否显示行号
          showRowNumber: true,
          // 是否显示列名编辑
          showColSetting: true,
          // 自定义数据列
          // customColumnDataHeader: false,
          operates: {
            type: Object,
            default: {
              // width:按钮列宽 （200px），
              // fixed：是否固定（right）,
              // list:按钮集合[] =
              // <{
              // label: 按钮文字，
              // render: Function(key,row) 按钮文字渲染方法，如果存在这个方法，则label失效
              // type :类型（primary / success / warning / danger / info / text），
              // style：Object 按钮样式，
              // icon：按钮图标，
              // disabled：是否禁用，
              // method：Function(key,row) 回调方法
              // }>
            }
          },
          // 是否可导出表格excel
          export: false,
          // 最大选择行数，默认1000，过多会顶替掉最开始选中的。
          selectMax: 1000, // Number 
          // 行选择框，操作按钮是否禁用
          disabled: false,
          // 是否展示可伸缩grid
          collapse: false,
          // collapse若为true，则配置此项，在折叠状态下标题可展示的字段。默认空。
          collapseField: [], // ["code","date"]
          // 扩展行表格所展示的字段，类似columns，包含element列所有属性
          expandColumns:[] // [{ prop:"name", label:"名称", width:"180px"}]
          // 加载扩展表格数据的方法
          // 默认参数，row: 当前选择行，expandRows：所有已经展开的行数据，resolve：数据的回调。
          // 展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded
          loadEexpandData: function(row, expandRows, resolve){
              // 使用一个异步请求，通过qs转换formdata参数
              return vue.$http.post("sysUserController!getRoleDetail.m", vue.$util.getParamByQs({ nd_: 1591845675402, id: row.id }))
              .then((res) => {
                // 请求结果传入resolve 回调函数，即可完成。
                resolve(res && res.rows ? res.rows : []);
              });
          },
          "row-key": "id", // 必要！扩展表格和树形表格都需要定义此属性。
          // 树形表格属性，最好与扩展表格 二选一使用。
          "tree-props": { children: "children", hasChildren: "hasChildren" }, // 必要！树形子级属性：children 子级的集合，hasChildren：是否有子级的属性。
          lazy: true, // 异步加载时，一般为 true
          load: (tree, treeNode, resolve) => {
              // tree：类似row，当前行数据。treeNode：树节点属性。resolve：数据的回调。
              return vue.$http.post("sysUserController!getRoleDetail.m").then((res) => {
                  // 请求结果传入resolve 回调函数，即可完成。
                  resolve(res && res.rows ? res.rows : []);
                });
            },
            
          // 是否显示手动上下排序按钮
          sortButton: false,
          // 是否手动拖拽表格行 进行排序。若要保持选择行状态，需指定row-key !!
          manualSort: false,
          // 是否显示表格刷新按钮，默认显示
          refreshBtn: true,
      }
  }
}
</script>
options (Object 非必填)

表格的其他的一些属性配置

默认配置 / 示例：

// template:
<eh-grid :options="options"></eh-grid>
...
// script => data :
<script>
...
data(){
    return {
        options: {
          // 是否显示编辑过滤
          showFilterTemplate: true，
          //  表格请求formdata参数 超时时间戳 （不传则自动计算后一分钟）
          nd: 1587624065070,
          // 表格请求formdata参数 search
          search: false,
          // 表格请求formdata参数 带总量查询
          usetotal: true,
          // 额外参数字段：其中的属性会带入请求方法的 formdata中。
          // 重要：如果要使用这个功能，需事先把 extraParamFields 定义好，哪怕是个空对象 {}
          extraParamFields: {
              // consition: '8a5aya54a5t4t43453thf4'
          }
        }
    }
}
</script>
table-collapse (Boolean 非必填)

是否通过点击表格标题收缩表格，默认：false

传入方法

selection-change (Function)

通过传入这个方法获取 当前选择行的数据

示例：

<eh-grid @selection-change="getRow"></eh-grid>
...
<script>
...
methods: {
    getRow(row){
        console.log(row)
        // 选其中一行会打印：[{"siteName":"车桥机加工厂","id":"123","code":"TESTCODE"}]
    }
}
</script>
cell-click (Function)

通过传入这个方法 每次单击单元格会触发此回调。
默认回调参数：row, column, cell, event

示例：

<eh-grid @cell-click="handleCellClick"></eh-grid>
...
<script>
...
methods: {
    handleCellClick(row, column, cell, event){
        console.log(row, column, cell, event)
        // 当前行，列，单元格，事件
}
</script>
data-change (Function)

通过传入这个方法 每次表格数据查询数据后调用

示例：

<eh-grid @data-change="gridChange"></eh-grid>
...
<script>
...
methods: {
    gridChange(data){
        console.log(data)
        // 打印当前获取表格的全部数据和总量数：
        // {
        //   data: [{...},{...}],
        //   totalCount: 2
        // }
}
</script>
expand-row-click (Function)

与扩展表格配合使用，通过传入这个方法，每次点击扩展表格的行后调用。

示例：

<eh-grid @expand-row-click="expandChange"></eh-grid>
...
<script>
...
methods: {
    expandChange(row, column, event){
        console.log(row)
        // 打印当前点击扩展行数据。
}
</script>

实例方法

doSearch / bindGrid (Function : void)

通过调用这个组件的实例方法 doSearch 或者 bindGrid，触发表格重新加载数据的操作。

示例：

<eh-grid id="grid123" ref="grid123"></eh-grid>
...
<script>
...
methods: {
    gridRefresh(){
        this.$refs.grid123.doSearch()
        // this.$refs.grid123.bindGrid()
        // 重新加载了一遍表格gird123的数据
    }
</script>
openExport (Function : void)

调用这个实例方法，打开导出 excel 的模态框。

clearSelection (Function : void)

调用这个实例方法，清除表格选中状态。

示例：

<eh-grid id="grid123" ref="grid123"></eh-grid>
...
<script>
...
methods: {
    openExport(){
        this.$refs.grid123.openExport()
    },
    clearSelection(){
        this.$refs.grid123.clearSelection()
    }
</script>

使用插槽

toolbar

通过在 toolbar 插槽中写入按钮组的内容，将按钮放置在定义好的区域，样式功能等需自己完善。

示例：

<eh-grid id="grid123" ref="grid123">
  <template slot="toolbar">
    <el-button @click="refresh">刷新</el-button>
    <el-button type="primary" @click="save">保存</el-button>
  </template>
</eh-grid>
...
<script>
...
methods: {
    refresh(){
        this.$refs.grid123.bindGrid()
        // 刷新了表格gird123的数据
    }
</script>

EhLayout

平台布局组件

调用方式

<eh-layout></eh-layout>

传入属性

left-width (String)

左侧区域的宽度，默认：200px。如果有使用左侧区域，建议传入。

right-width (String)

右侧区域的宽度，默认：200px。如果有使用右侧区域，建议传入。

使用插槽

示例图

top
left
center
right
bottom

center、top、bottom、left、right

center（默认插槽）：将内容放置在整个布局组件中间，原则上必填
(有默认 15px 边距)，可直接当做子元素写入组件标签内。

top：将内容放置在整个布局组件顶部，没有则不显示

bottom：将内容放置在整个布局组件底部，没有则不显示

left：将内容放置在整个布局组件中间，没有则 center 向左取代 left 的位置

right：将内容放置在整个布局组件中间，没有则 center 向右取代 right 的位置

示例：

<eh-layout>
    <div slot="top">
       top
    </div>
    <div slot="left">
        left
    </div>
    <div slot="right">
        right
    </div>
    <div slot="center">
        <eh-grid id="123455"></eh-grid>
    </div>
    <div slot="bottom">
        bottom
    </div>
    
    <h1>
        default center 
        <!-- 我也是center，在没有传入具名插槽center时，我就是默认的center -->
    </h1>
    
</eh-layout>

EhSearchBack

平台查找带回组件

调用方式

<eh-search-back></eh-search-back>

传入属性

v-model (String | Number 必填)

查找带回框的值

示例：

<eh-search-back v-model="searchValue"></eh-search-back>
searchField (String 必填)

查询字段：查询到一行数据后，会返回的这个字段的值。

示例：

<eh-search-back searchField="id"></eh-search-back>
labelField (String 可选)

查询字段的展示字段：与 searchField 相对应，labelField 作为展示字段，searchField 作为实际值。

示例：

<eh-search-back labelField="code" searchField="id"></eh-search-back>
defaultLabel (String 可选)

初始展示名：与 labelField 相对应，defaultLabel 作为其初始展示字段。仅当 defaultLabel 与 v-model 同时赋予初始值时，才会生效。

示例：

<eh-search-back v-model="my.value" searchField="id" defaultLabel="my.label" labelField="code" ></eh-search-back>

<script>
...
data(){
    return{
        my:{
            value:'1',
            label:'code001'
        }
    }
}
</script>
searchSelect (Boolean 必填)

是否启用模糊查询，默认：false

示例：

<eh-search-back :searchSelect="true"></eh-search-back>
gridOptions (Object 必填)

类似 EhGrid 的 grid 和 dataSourse 的结合，明确规定查找带回需要查询的表格数据和样式。

示例：

<eh-search-back :gridOptions="gridOptions"></eh-search-back>

<script>
...
data(){
    return{
        gridOptions:{
          dataSource: {
            bean: "mbbBdMrlController",
            method: "select",
            entity: "com.epichust.entity.MbbBdMrl"
            // filters 在其他属性定义
          },
          grid: {
            columns: [
              {
                prop: "id",
                label: "id"
              },
              {
                prop: "code",
                label: "编码"
              },
              {
                prop: "siteName",
                refEntity: "site",
                refName: "name",
                label: "工厂"
              }
            ]
          },
          options:{
              extraParamFields: {
                  // 同样支持表格查询的额外参数
              }
          }
        }
    }
}
</script>
button (Boolean)

是否将选择框改为按钮样式，默认为 false。
button 属性与 inputAttributes 属性共享，按钮文字为 label / placeholder （请选择…），宽度默认 200px。

默认 / 示例：

<eh-search-back :button="true"></eh-search-back>
showDialogLeft (Boolean)

是否展示查找带回弹窗左侧区域，宽度默认 200px。需与 dialog-left 插槽配合使用。

默认 / 示例 见插槽。

inputAttributes (Object)

输入框的属性，可继承 element 中 el-input 的属性。

默认 / 示例：

<eh-search-back :inputAttributes="defaultInput"></eh-search-back>

<script>
...
data(){
    return {
        defaultInput:{
          width: "200px",
          placeholder: "请选择..."
        }
    }
}
</script>
dialogAttributes (Object)

模态框的属性，可继承 element 中 el-dialog 的属性。

示例：

<eh-search-back :dialogAttributes="defaultDialog"></eh-search-back>
openSearch (Boolean)

打开弹窗即加载数据，默认 true。

示例：

<eh-search-back :openSearch="true"></eh-search-back>
filterForm (Object 非必填)

定义查找带回表格的简易查询模板，需要与插槽 filterBar 配合使用。

示例：

<eh-search-back :filterForm="filterFormObj"></eh-search-back>

<script>
...
data(){
    return {
        filterFormObj:{
            // 过滤的字段名作为属性名
            code:{
                field:'code', // 过滤的字段
                compare:'cn', // 比较方式
                data:''       // 默认值
            },
            id:{
                field:'id',
                compare:'cn',
                data:'8'
            }
        }
    }
}
</script>

使用插槽

filterBar

通过此插槽自定义查找带回表格的过滤表单。需和传入属性 filterForm 配合使用。

插槽标签应有俩个属性，slot=“filterBar”，slot-scope=“scope”。
slot 即插槽名，slot-scope 即该组件赋予的可访问 filterForm 的值，可以理解为 scope.filter == filterForm。表单里建议使用 v-model 绑定 filterForm 里的每个值，这样就自带双向绑定，无需再做其他赋值操作。

示例：

<eh-search-back 
    :filterForm="{
        code:{field:'code',compare:'cn',data:''},
        id:{field:'id',compare:'cn',data:'8'}
    }">
    <template slot="filterBar" slot-scope="scope">
        <el-form :inline="true" size="mini">
          <el-form-item label="编码">
            <el-input v-model="scope.filter.code.data" placeholder="编码"></el-input>
          </el-form-item>
          <el-form-item label="id">
            <el-input v-model="scope.filter.id.data" placeholder="id"></el-input>
          </el-form-item>
        </el-form>
    </template>
</eh-search-back>
dialog-left

如果 showDialogLeft 属性为 true，则该展示该插槽里的内容。

<eh-search-back :showDialogLeft="true">
 <template slot="dialog-left">
    <el-tree :data="data"></el-tree>
 </template>
</eh-search-back>

传入方法

input

当选择值发生改变时，即触发此回调，返回所选的字段值。

示例：

<eh-search-back @input="changeSelect"></eh-search-back>

<script>
...
methods:{
    changeSelect(value) {
        console.log(value) // value = 'code123'
    }
}
</script>
selectedRows

当选择值发生改变时，即触发此回调，返回所选行的数据。

示例：

<eh-search-back @selectedRows="changeSelect"></eh-search-back>

<script>
...
methods:{
    changeSelect(value) {
        console.log(value) value = [{id:'code123',...}]
    }
}
</script>

实例方法

searchGrid

通过调用这个组件的实例方法，触发查找带回弹窗表格重新加载数据的操作。

<eh-search-back ref="search123"></eh-search-back>
...
<script>
...
methods: {
    gridRefresh(){
        this.$refs.search123.searchGrid()
        // 重新加载了一遍弹窗表格searchGrid的数据
    }
</script>

EhTabs

平台多标签页组件

调用方式

<eh-tabs></eh-tabs>

传入属性

tabs

(Array 必填 )(sync)

当前显示的 tab 页信息。需与插槽配合使用。当这个对象数组里存在对应插槽，则显示这些对应插槽内容当做 tab 页内容。

tab 对象目前有三个属性，name：即与插槽名对应的名称，title：即标签页的显示标题，closable：布尔值，是否可关闭。

示例：

<eh-tabs :tabs.sync="tabsList">
    <template slot="new"> new panel </template>
    <template slot="edit"> this is edit </template>
</eh-tabs>
...
data(){
    return {
        tabsList:[ { name: "new", title: "新增",closable: false } ]
        // 此时页面内只有“新增”这一个标签页
    }
}
methods:{
    addEditTab(){
        this.tabsList.push({ name: "edit", title: "编辑" })
        // 触发这个事件之后，就会多出“编辑”标签页，并跳转到此页。
    }
}
v-model (String)

当前 tab 标签的 name。通过赋值可切换标签显示页。

示例：

<eh-tabs :tabs.sync="tabsList" v-model="tabName" >
    <template slot="new"> new panel </template>
    <template slot="edit"> this is edit </template>
</eh-tabs>
...
data(){
    return {
        tabName:'new', // 当前显示“新增”页
        tabsList:[ 
            { name: "new", title: "新增" },
            { name: "edit", title: "编辑" }
        ],
    }
}
methods:{
    goEditTab(){
        this.tabName = 'edit'
        // 触发这个事件之后，跳转到“编辑”标签页。
    }
}

传入方法

after-close (Function)

在每次关闭标签页后 调用这个传入方法。默认参数 tabName：当前关闭的标签名。

示例：

<eh-tabs :tabs.sync="tabsList" @after-close="tips">
    <template slot="new"> new panel </template>
    <template slot="edit"> this is edit </template>
    <!-- 有两个tab页，new和edit，显示与否根据 tabsList里的配置 -->
</eh-tabs>

...
methods:{
    tips(tabName) {
        alert(tabName);
    }
}

使用插槽

(自定义插槽名)

此处作为 tab 页的内容，事先需写好页面，加载组件时会按需渲染。

示例：

<eh-tabs :tabs.sync="tabsList">
    <template slot="new"> new panel </template>
    <template slot="edit"> this is edit </template>
    <!-- 有两个tab页，new和edit，显示与否根据 tabsList里的配置 -->
</eh-tabs>

...
data(){
    return {
        tabsList:[ 
            { name: "new", title: "新增" },
        ],
    }
}

实例方法

removeTab

调用此方法会直接移除一个标签和它的内容，并修改传入的 tabs 属性值。

传参：removeTabName (string) 需要删除的 tab 名字。

传参：afterClose (Function) 关闭 tab 后的回调事件。

示例：

<!-- ref 类似 id，标注一个组件 -->
<eh-tabs :tabs.sync="tabsList" ref="myTabs">
    <template slot="new"> new panel </template>
    <template slot="edit"> this is edit </template>
</eh-tabs>
...
data(){
    return {
        tabsList:[ 
            { name: "new", title: "新增" },
            { name: "edit", title: "编辑" }
        ],
    }
}
methods:{
    closeEditTab(){
        this.$refs.myTabs.removeTab('edit')
        // 触发这个事件之后，删除“编辑”标签页，并回到前一页。
    }
}

EhSelect

平台多功能选择输入框

调用方式

<eh-select></eh-select>

传入属性

v-model (String, Number)

双向绑定的选择框的实际值。

keyName valueName (String 必填)

定义选项的展示值（keyName）和实际值（valueName）的名称。

示例：

<eh-select v-model="myValue" keyName="label" valueName="value" ></eh-select>
selectOptions

传入选择框的可用选项

示例：

<eh-select v-model="myValue" keyName="label" valueName="value" :selectOptions="options" ></eh-select>
...
data(){
    return {
        myValue: '' , // 默认值
        options:[     // 选项的属性名与keyName、valueName保持一致
            { label: "new", value: "新增" },
            { label: "edit", value: "编辑" }
        ],
    }
}
selectRequest (String, Object)

选择框的选项数据（options）请求方法。

String：当是字符串类型时，当作为一个请求地址。Object：当是对象时，是一个更为详细的配置选项。

示例：

<!-- 作为配置对象 -->
<eh-select keyName="label" valueName="value" :selectRequest="request" ></eh-select>
<!-- 亦可直接写为字符串地址 -->
<eh-select keyName="label" valueName="value" selectRequest="bppComboxController!createOperationHeadCombox.m" ></eh-select>
...
data(){
    return {
        request:{
            // 请求完整地址, 若存在此值，bean与method就会被替代。
             request: "bppComboxController!createOperationHeadCombox.m",
             bean: "",    // 后台请求控制器
             method: "",  // 后台请求方法名
             formData: null, // object 若有formdata参数
             params: null,   // object 若有url参数
        },
    }
}
relatedSelect (Array sync)

联动选择框的的选项数据。

与 relatedRequest 配合使用,
一般初始值为空数组，在当前选择框的值改变时 动态加载赋值。

relatedRequest (Object)

联动选择框选项请求的配置属性。

示例：

<!-- 初始选择框 -->
<eh-select keyName="label" valueName="value" selectRequest="bppComboxController!createOperationHeadCombox.m" :relatedRequest="relatedRequest" :relatedSelect.sync="relatedSelect"></eh-select>
<!-- 联动选择框，把联动属性当作输入选项的数据 -->
<eh-select keyName="label" valueName="value" :selectOptions="relatedSelect" ></eh-select>
...
data(){
    return {
        relatedSelect: [], 
        relatedRequest:{
             request: "bppComboxController!createOperationHeadCombox.m",
             paramName: "routeGid",   // 此属性是查询参数名。 通过上一级选择框的值，作为参数查询下一级的选项
             bean: "",    // 后台请求控制器
             method: "",  // 后台请求方法名
             formData: null, // object 若有formdata参数
        },
    }
}
focusLoad (Boolean)

延迟加载，是否聚焦到输入框之后再加载数据

width (String)

选择框宽度。（“px”, “%” , “vw”）

label (String)

如果有 label 属性，则在选择框前加一段 label。

SelectAttributes (Boolean)

继承 element el-select 的配置属性。

示例：

<!-- 初始选择框 -->
<eh-select v-model="value" keyName="label" valueName="value" width="200px" label="选择框2" :focusLoad="true" :SelectAttributes="selectAttr" ></eh-select>
...
data(){
    return {
        value: "", 
        selectAttr:{
            size: "mini",
            placeholder: " -- 请选择 --"
        },
    }
}

传入方法

changeOption

当选择框选中的值发生变化时，调用此方法，返回的参数为新选中的选项。


<eh-select keyName="label" valueName="value" @changeOption="change" ></eh-select>
...
methods: {
    change(option) {
        console.log(option) // option为选中的选项
    },
}