外观
ab-table 列表组件
介绍
ab-table 是系统一个核心基础组件，系统基本所有的列表页都是用这个组件完成的。
使用
ab-table组件很多时候会结合
ab-table-mix混入内容一起使用的。具体方式如下示例（示例文件地址src\views\biz\bizPattern\bizPatternList.vue）：示例效果:
列表页通常存在两部分，顶部的查询条件区域和底部的列表区域。
示例写法:
html
<template>
<div class="comprehensive-table-container">
<!--查询区域-->
<div ref="titleForm">
<el-row>
<el-col class="top-panel" :span="24">
<el-form
ref="queryForm"
:inline="true"
label-width="50px"
:model="query"
>
<el-form-item label="名称" prop="name$VLK">
<el-input v-model="query.name$VLK" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="编码" prop="code$VLK">
<el-input v-model="query.code$VLK" placeholder="请输入编码" />
</el-form-item>
<el-form-item>
<el-button :icon="Search" type="primary" @click="search()">
查询
</el-button>
<el-button :icon="Refresh" @click="reset()">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<!--按钮区域-->
<el-space wrap>
<router-link :to="{ name: 'BizPatternEdit' }">
<el-button :icon="Plus" type="primary">添加</el-button>
</router-link>
<el-button
:disabled="!selectedData || selectedData.length == 0"
:icon="Delete"
type="danger"
@click="delBySeletedIds(BizPatternRemove)"
>
批量删除
</el-button>
</el-space>
</div>
<!--列表区域-->
<ab-table
ref="abTable"
v-model="selectedData"
:height="tableHeight"
highlight-current-row
:query-param="query"
row-key="id"
:url="BizPatternListJson"
>
<ab-column label="名称" min-width="120" prop="name" />
<ab-column label="编码" min-width="120" prop="code" />
<ab-column label="失败提示" min-width="200" prop="message" />
<ab-column label="java正则" min-width="200" prop="javaPattern" />
<ab-column label="js正则" min-width="200" prop="uiPattern" />
<ab-column ab-template="edit" fixed="right" label="操作" width="140" />
<template #edit="{ scope }">
<!--编辑按钮-->
<router-link
:to="{ name: 'BizPatternEdit', query: { id: scope.row.id } }"
>
<el-button text type="primary">编辑</el-button>
</router-link>
<!--删除按钮-->
<el-button
text
type="primary"
@click="
sendAction(
BizPatternRemove + scope.row.id,
'确定删除' + scope.row.name + '吗?'
)
"
>
删除
</el-button>
</template>
</ab-table>
</div>
</template>
<!-- js部分重点是混入 ab-table-mix.vue-->
<script>
import abTableMix from '@/agilebpm/base-component/ab-table/ab-table-mix.vue'
import {
BizPatternListJson,
BizPatternRemove,
} from '@/api/biz/ab-biz-pattern'
import { Search, Refresh, Plus, Delete } from '@element-plus/icons-vue'
export default {
name: 'BizPatternList',
mixins: [abTableMix],
setup() {
return {
BizPatternListJson,
BizPatternRemove,
Search,
Refresh,
Plus,
Delete,
}
},
}
</script>
- 查询区域说明
- 查询区域主要是输入框和查询按钮，输入框里绑定的
v-model="query.name$VLK"是查询条件。 name：字段名VLK：第一个字母：V代表是字符串、D代表时间、N代表数字；LK：后面的字符代表查询条件，枚举在com.dstz.base.query.ConditionType类中
java
/**
* 等于
*/
EQUAL("EQ", "=", "等于", new String[] { "varchar", "number", "date", "clob" }),
/**
* 小于
*/
LESS("LT", "<", "小于", new String[] { "number", "date" }),
/**
* 大于
*/
GREAT("GT", ">", "大于", new String[] { "number", "date" }),
/**
* 小于等于
*/
LESS_EQUAL("LE", "<=", "小于等于", new String[] { "number", "date" }),
/**
* 大于等于
*/
GREAT_EQUAL("GE", ">=", "大于等于", new String[] { "number", "date" }),
/**
* 不等于
*/
NOT_EQUAL("NE", "!=", "不等于", new String[] { "varchar", "number", "date", "clob" }),
/**
* 相似
*/
LIKE("LK", "like", "相似", new String[] { "varchar", "clob" }),
/**
* 左相似
*/
LEFT_LIKE("LFK", "llike", "左相似", new String[] { "varchar", "clob" }),
/**
*
*/
RIGHT_LIKE("RHK", "rlike", "右相似", new String[] { "varchar", "clob" }),
/**
*
*/
IS_NULL("INL", "is null", "为空", new String[] { "varchar", "number", "date", "clob" }, false),
/**
*
*/
NOTNULL("NNL", "is not null", "非空", new String[] { "varchar", "number", "date", "clob" }, false),
/**
* 在...中
*/
IN("IN", "in", "在...中", new String[] { "varchar", "number", "date" }),
/**
* 不在...中
*/
NOT_IN("NI", "not in", "不在...中", new String[] { "varchar", "number", "date" }),
/**
* 在...之间
*/
BETWEEN("BT", "between", "在...之间", new String[] { "number", "date" });
重点介绍下，
new String[] { "varchar", "number", "date", "clob" })代表该查询条件支持数据库的类型：字符串、数字、日期、大文本列表区域说明
列表区域主要
ab-table和ab-column组件的结合使用（可参考上面代码部分）ab-table的参数说明
ab-table默认继承Element前端组件el-table的所有配置属性Elemnt的el-table组件，该文档主要介绍系统拓展的参数。
js
props: {
/**
* 列表请求的链接
*/
url: {
type: String,
required: true,
},
/**
* 查询参数（这个可以直接按照示例直接用query，其会在混入`ab-table-mix`会对其声明）
*/
queryParam: {
type: Object,
required: true,
},
/**
* 查询列，指定需要的列字段（因为系统用的是通用的listJson接口，它默认是会把所有字段都查出来，当表存在一些敏感字段或者大字段时需要限制一下返回的字段）
*/
queryColumn: {
type: Array,
required: false,
default() {
return []
},
},
/**
* 列表是否可多选，目前常见是配合批量删除功能使用
*/
checkable: {
type: Boolean,
default: true,
},
/**
* 列表选中状态的数据（这个可以直接按照示例直接用selectedData，其会在混入`ab-table-mix`会对其声明）
*/
value: {
type: Array,
default() {
return []
},
},
/**
* 控制字段显示与否
* eg：:
* ab-column-if="{
* edit（ab-column上的prop名）: query.name$VLK（自定义的条件）,
* }"
*/
abColumnIf: {
type: Object,
default() {
return {}
},
},
/**
* order: 排序方式 'ascending':ASC '':DESC
* prop : 排序字段
* 例子1: :default-sort="{ order: 'ascending', prop: 'id_' }"
* 例子2: :default-sort="{ order: '', prop: 'create_date_' }"
*/
defaultSort: {
type: Object,
default() {
return {}
},
},
},
- ab-column的参数说明
ab-column默认继承Element前端组件el-column的所有配置属性Elemnt的el-column组件，该文档主要介绍系统拓展的参数。ab-date-formatter格式化日期字段。
html
<ab-column
ab-date-formatter="yyyy-MM-dd"
label="创建时间"
prop="createTime"
width="150"
/>
ab-text-formatter格式化值，如下示例中0-是-default-light|1-否-success-light代表将“0”转化成“是”，将“1”转化成“否”。default、light分别表示el-tag里面的参数Elemnt的el-tag组件。
html
<ab-column
ab-text-formatter="0-是-default-light|1-否-success-light"
label="内置模版"
prop="editable"
width="100"
/>
ab-template模板功能，这个类似el-table中的模板字段，但写法有一些调整，可参考上面代码部分，重点关注参数scope.row是当前列数据则可，同时参考示例实现编辑和删除按钮。