readme范文
<p>[TOC]</p>
<h2>通用组件</h2>
<h3>表格</h3>
<ul>
<li>说明</li>
</ul>
<p>表格结合了HUI框架的表格组件、分页组件，并自定义了部分属性灵活操作，以贴合整体系统的操作习惯与风格。</p>
<ul>
<li>介绍</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left;">组件名</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">组件位置</th>
<th>是否需要单独引入</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">ufTable</td>
<td style="text-align: left;">结合HUI的表格组件和分页组件</td>
<td style="text-align: left;"><code>src/frame/components/commonComps</code></td>
<td>否</td>
</tr>
</tbody>
</table>
<ul>
<li>使用案例</li>
</ul>
<pre><code><template>
...
// 典型案例1：无分页
<uf-table
name="templateTable1"
:tableHeight="tableHeight"
:tableColumns="columns"
:tableData="data"
:showPager="false">
</uf-table>
// 典型案例2：含分页
<uf-table
name="templateTable2"
:tableHeight="tableHeight"
:tableColumns="columns"
:tableData="data"
:totalCount="query.total"
:curPageNumber="query.pageNumber"
:curPageSize="query.pageSize"
@refresh-table="refreshTable(page, size)">
</uf-table>
// 典型案例3：表格外，头部有按钮
<uf-table
showBtn
name="templateTable3"
:tableHeight="tableHeight"
:tableColumns="columns"
:tableData="data"
:totalCount="query.total"
:curPageNumber="query.pageNumber"
:curPageSize="query.pageSize"
@refresh-table="refreshTable(page, size)">
<div slot="button">
<h-button type="primary" @click="add()">添加</h-button>
<h-button type="ghost" @click="update()">修改</h-button>
</div>
</uf-table>
...
</template>
export default {
...
data() {
return {
tableHeight: 200,
columns: [],
data: [],
query: {
total: 0,
pageNumber: 1,
pageSize: 30,
...
}
}
},
method: {
refreshTable(pageNumber, pageSize) {
this.query.pageNumber = pageNumber;
this.query.pageSize = pageSize;
this.getList();
},
// 获取表格数据
getList() {
// do something...
},
add() {
// do something...
},
update() {
// do something...
}
}
}
</code></pre>
<ul>
<li>属性值说明</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left;">属性名</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">参数类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">autoHeadWidth</td>
<td style="text-align: left;">表格宽度根据表头宽度自适应，只在当前列不设置宽度时有效,使用时需要设置 <code>notSetWidth=true</code> 表头自适应优先级高于表格（内容单元格）自适应。</td>
<td style="text-align: left;">Boolean</td>
<td>false</td>
</tr>
<tr>
<td style="text-align: left;">showPager</td>
<td style="text-align: left;">是否显示分页</td>
<td style="text-align: left;">Boolean</td>
<td>true</td>
</tr>
<tr>
<td style="text-align: left;">notSetWidth</td>
<td style="text-align: left;">初始化渲染时表格宽度根据内容宽度自适应，且内容不换行，只在当前列不设置宽度时有效。（仅在表格第一次渲染生效)</td>
<td style="text-align: left;">Boolean</td>
<td>false</td>
</tr>
<tr>
<td style="text-align: left;">pageSizeOpts</td>
<td style="text-align: left;">每页条数切换的配置,需配合 <code>pageSize</code> 使用加载全部（该选项<code>value = -1</code>）表示不分页，请求返回所有数据。</td>
<td style="text-align: left;">Array</td>
<td>[30, 60, 90, 500, 100000]</td>
</tr>
<tr>
<td style="text-align: left;">tableHeight</td>
<td style="text-align: left;">表格高度</td>
<td style="text-align: left;">Number</td>
<td>0</td>
</tr>
<tr>
<td style="text-align: left;">tableColumns</td>
<td style="text-align: left;">表格列的配置描述,具体见hui关于表格 <a href="http://hui.hundsun.com/component/table.html#api" title="表格属性">表格属性</a> -table columns</td>
<td style="text-align: left;">Array</td>
<td>[]</td>
</tr>
<tr>
<td style="text-align: left;">tableData</td>
<td style="text-align: left;">显示的结构化数据，其中，字段 <code>cellClassName</code> 用于设置任意单元格的样式名称，因此数据不能使用该字段，详见 <a href="http://hui.hundsun.com/component/table.html#%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B" title="示例">示例</a> -特定样式</td>
<td style="text-align: left;">Array</td>
<td>[]</td>
</tr>
<tr>
<td style="text-align: left;">totalCount</td>
<td style="text-align: left;">表格的总条数</td>
<td style="text-align: left;">Number</td>
<td>0</td>
</tr>
<tr>
<td style="text-align: left;">curPageNumber</td>
<td style="text-align: left;">当前页码，如果需要手动切换时同步</td>
<td style="text-align: left;">Number</td>
<td>0</td>
</tr>
<tr>
<td style="text-align: left;">curPageSize</td>
<td style="text-align: left;">每页显示表格的条数</td>
<td style="text-align: left;">Number</td>
<td>0</td>
</tr>
<tr>
<td style="text-align: left;">rowClassName</td>
<td style="text-align: left;">行的 className 的回调方法，会覆盖斑马纹颜色。传入参数：row：当前行数据; index：当前行的索引。</td>
<td style="text-align: left;">Function</td>
<td>-</td>
</tr>
<tr>
<td style="text-align: left;">name</td>
<td style="text-align: left;">表格名称</td>
<td style="text-align: left;">String</td>
<td>''</td>
</tr>
<tr>
<td style="text-align: left;">showAddBtn</td>
<td style="text-align: left;">显示<code>添加</code>按钮，与 <code>@on-new='add()'</code>搭配使用</td>
<td style="text-align: left;">Boolean</td>
<td>false</td>
</tr>
<tr>
<td style="text-align: left;">showDelBtn</td>
<td style="text-align: left;">显示<code>删除</code>按钮，与 <code>@on-delete='del()'</code>搭配使用</td>
<td style="text-align: left;">Boolean</td>
<td>false</td>
</tr>
<tr>
<td style="text-align: left;">showRefreshBtn</td>
<td style="text-align: left;">显示<code>刷新</code>按钮，与 <code>@refresh-table='refresh()'</code>搭配使用</td>
<td style="text-align: left;">Boolean</td>
<td>false</td>
</tr>
<tr>
<td style="text-align: left;">showSubmitBtn</td>
<td style="text-align: left;">显示<code>提交</code>按钮，与 <code>@on-submit='submit()'</code>搭配使用</td>
<td style="text-align: left;">Boolean</td>
<td>false</td>
</tr>
<tr>
<td style="text-align: left;">showSubmitBtn</td>
<td style="text-align: left;">每页显示表格的条数</td>
<td style="text-align: left;">Number</td>
<td>0</td>
</tr>
<tr>
<td style="text-align: left;">curPageSize</td>
<td style="text-align: left;">每页显示表格的条数</td>
<td style="text-align: left;">Number</td>
<td>0</td>
</tr>
<tr>
<td style="text-align: left;">curPageSize</td>
<td style="text-align: left;">每页显示表格的条数</td>
<td style="text-align: left;">Number</td>
<td>0</td>
</tr>
<tr>
<td style="text-align: left;">curPageSize</td>
<td style="text-align: left;">每页显示表格的条数</td>
<td style="text-align: left;">Number</td>
<td>0</td>
</tr>
<tr>
<td style="text-align: left;">curPageSize</td>
<td style="text-align: left;">每页显示表格的条数</td>
<td style="text-align: left;">Number</td>
<td>0</td>
</tr>
<tr>
<td style="text-align: left;">curPageSize</td>
<td style="text-align: left;">每页显示表格的条数</td>
<td style="text-align: left;">Number</td>
<td>0</td>
</tr>
<tr>
<td style="text-align: left;">curPageSize</td>
<td style="text-align: left;">每页显示表格的条数</td>
<td style="text-align: left;">Number</td>
<td>0</td>
</tr>
<tr>
<td style="text-align: left;">curPageSize</td>
<td style="text-align: left;">每页显示表格的条数</td>
<td style="text-align: left;">Number</td>
<td>0</td>
</tr>
</tbody>
</table>
<h3>下拉框</h3>
<h3>上传</h3>
<h2>公共业务组件</h2>
<h3>资金账户下拉框</h3>
<h2>公共方法</h2>
<h3>vuex状态存储值获取方法</h3>
<h4>getDict</h4>
<ul>
<li>说明</li>
</ul>
<p>用于获取字典项，并放到浏览器缓存中，方便于二次获取字典无需调用接口查询，直接从缓存中获取。</p>
<ul>
<li>介绍</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left;">方法名</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">参数类型</th>
<th>返回值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">getDict</td>
<td style="text-align: left;">获取字典项方法，常用项需在首页登录时进行缓存</td>
<td style="text-align: left;">String</td>
<td>Array</td>
</tr>
</tbody>
</table>
<p><code>注意：</code> 新增常用字典项需要将参数放到<code>src/frame/store/dictsData.js</code>。</p>
<ul>
<li>使用案例 </li>
</ul>
<pre><code>data() {
return {
MONEY_TYPE: [],
...
}
},
async created() {
// 案例1
thhis.MONEY_TYPE = await this.$store.getters.getDict('MONEY-TYPE');
// 案例2
this.$store.getters.getDict('MONEY-TYPE').then((res) => {
this.MONEY_TYPE = res;
})
}</code></pre>
<ul>
<li>返回参数</li>
</ul>
<pre><code> // res
[
{code: 'HK', text: '港币' },
{code: 'RMB', text: '人民币' },
...
]</code></pre>
<ul>
<li>返回参数说明 </li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left;">参数名</th>
<th style="text-align: left;">类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">code</td>
<td style="text-align: left;">String/Number</td>
<td>字典项代号</td>
</tr>
<tr>
<td style="text-align: left;">text</td>
<td style="text-align: left;">String</td>
<td>字典项名称</td>
</tr>
</tbody>
</table>