### 1. 如何联调表格分页
```
分页公用
pageParams: {
pageNo: 1, // 当前页数
pageSize: 20 // 每页数据条数
},
total:"";table总条数
pagesAll:""//定义总页数
seach方法中请求到this.total = total
计算页数：this.pagesAll = Math.ceil(this.total / this.pageParams.pageSize) <=this.pageParams.pageNo
v-loadmore 为指令
v-loadmore: [200] 内为自定义的触发距离，也可不写，默认为50
tlm_noMore: false, // 没有更多数据， 禁用加载, 初始为false
tlm_isLoading: false, // 请求数据中，初始为false
load方法中定义 this.pageParams.pageNo++;
在setTimeout(function (){}中调Ajax请求数据
load (){
const _this = this;
_this.pageParams.pageNo++;
setTimeout(function (){
try{
let param = {...this.pageParams}
let response = await stock.getGets(param);
let { data } = response;
let table = [];
for (let i = 0; i < data.length; i++) {
const item = data[i];
table.push(item);
}
_this.tabsList = _this.tabsList.concat(table);
if (_this.pageParams.pageNo >= this.pagesAll){
_this.tlm_noMore = true
}
};
}
_this.tlm_isLoading = false
}, 2000)
},
```### 2. 如何联调长列表分页
```
// 分页控制参数
pageParams: {
pageNo: 0, // 当前页数
total: 5, // 总共页数
pageSize: 20 // 每页数据条数
},
// table 分页加载必须定义字段
tlm_isLoading: false
计算总页数
computed: {
tlm_noMore() {
return (
Math.ceil(this.pageParams.total / this.pageParams.pageSize) <=
this.pageParams.pageNo
);
}
},
//初始化列表
async loadTable() {
let params = {
//必传字段
id
//分页条件
...this.pageParams
};
//请求接口
let response = await getDiagLsit(params);
let tableData = [];
if (response.code == "1") {
tableData = response.data;
this.pageParams = { ...response.pageParams };
}
this.tableData = tableData;
this.tlm_isLoading = false;
}
// table加载下一页
loadNextPage() {
if (this.tlm_noMore) {
return;
}
this.pageParams.pageNo++;
this.loadTable();
},
```### 3. 切换患者后的逻辑操作
### 4. 兄弟组件之间的消息传递
1.
<left @selectIdChange="selectIdChange"></left>
2.
方法; this.\$emit('selectIdChange',this.selectId);
父组件接收到值后传递给中间子组件
3.
<l-main :selectId="selectId"></l-main>
'selectId'],### 5. 表单校验
//前端校验规则
rules: {
drugName: [{required: true, message: '请输入药品名称', trigger: 'blur'}],
supplier: [{required: true, message: '请选择厂商', trigger: 'change'}]，
}提交时校验：
if(this.drugName.length==0 || this.supplier.length==0){
this.\$message.warning("请完成必填项");
return
}### 6. 值域组件 LValueDomain 的使用
```javascript
# 多级值域（行政区域）
<l-value-domain code="area" type="cascader" :value.sync="areaValue" @change="vdChange" remoteValueKey="id" remoteShowKey="label" :multiple="true"></l-value-domain>
# 单级值域
// 主数据表
<l-value-domain code="CS01.00.802" :value.sync="1" />
# 支持本地过滤器
// localFilterKeys的作用是输入的值是否包含在数据对象的对应字段的值中，如果包含，就作为下拉选项，默认值为 ['name']，可根据需求自定义
<l-value-domain code="CS01.00.802" :value.sync="1" :localFilterKeys="['name', 'wubi']"/>
// 自定义数据表
// 支持模糊查询，检索关键词会以keyword字段拼装到params对象中，作为参数一并传过去
// params 需要定义再data上，可配置任何需要传到服务器的参数数据
<l-value-domain :value.sync="1" remoteUrl="/api/path" :remoteParams="params" remoteShowKey="name" remoteValueKey="code" placeholder="提示词"/>
```参数：
### 7. 反显指令的使用 codeTransform 的使用（用于文本反显）
```javascript
// 主数据反显
<span :val="值" code="主数据CODE" v-codeTransform></span>
// 自定义数据表
// tableName: 表名
//
// conditionMap: 对上面的表进行查询的条件（是个对象）
// 样例：
// conditionMap: {
// val: "dsajflaksdjlfjdls"
// }
//
// columns: 要返回表中哪个列的数据，需要与数据库列名一致
<span tableName="sys_account" :conditionMap="conditionMap" columns="user_id" v-tableTransform></span>
```
### 8.v-hotkey 使用规范
```一、快捷键展示工具箱配置方法：
// 1.工具箱名称为：Hotkey (请将该工具箱放在toolBoxs最后一项)， 文件地址 src/views/public/modules/Hotkey.vue
// 2.在l-layout里配置 pageName ,值为各自改好的key值，demo如下
// <l-layout
// :toolBoxs="toolBoxs"
// :defaultToolName="toolBoxs[0]"
// :boxExpanded="true"
// @message="messageHandler"
// patientCardType="default"
// pageName="test" <<<<-----配置此项
二、在src/views/hotkey.js 文件中把 你需要编写的快捷键组合按照 页面编写规则来书写 key 要和 传入pageName 对应上
三、快捷键支持在按钮等元素 支持点击事件，支持表格和列表的上下选择和选择特定行数的数据
```
### 备注
### 1. 如何联调表格分页
```
分页公用
pageParams: {
pageNo: 1, // 当前页数
pageSize: 20 // 每页数据条数
},
total:"";table总条数
pagesAll:""//定义总页数
seach方法中请求到this.total = total
计算页数：this.pagesAll = Math.ceil(this.total / this.pageParams.pageSize) <=this.pageParams.pageNo
v-loadmore 为指令
v-loadmore: [200] 内为自定义的触发距离，也可不写，默认为50
tlm_noMore: false, // 没有更多数据， 禁用加载, 初始为false
tlm_isLoading: false, // 请求数据中，初始为false
load方法中定义 this.pageParams.pageNo++;
在setTimeout(function (){}中调Ajax请求数据
load (){
const _this = this;
_this.pageParams.pageNo++;
setTimeout(function (){
try{
let param = {...this.pageParams}
let response = await stock.getGets(param);
let { data } = response;
let table = [];
for (let i = 0; i < data.length; i++) {
const item = data[i];
table.push(item);
}
_this.tabsList = _this.tabsList.concat(table);
if (_this.pageParams.pageNo >= this.pagesAll){
_this.tlm_noMore = true
}
};
}
_this.tlm_isLoading = false
}, 2000)
},
```### 2. 如何联调长列表分页
```
// 分页控制参数
pageParams: {
pageNo: 0, // 当前页数
total: 5, // 总共页数
pageSize: 20 // 每页数据条数
},
// table 分页加载必须定义字段
tlm_isLoading: false
计算总页数
computed: {
tlm_noMore() {
return (
Math.ceil(this.pageParams.total / this.pageParams.pageSize) <=
this.pageParams.pageNo
);
}
},
//初始化列表
async loadTable() {
let params = {
//必传字段
id
//分页条件
...this.pageParams
};
//请求接口
let response = await getDiagLsit(params);
let tableData = [];
if (response.code == "1") {
tableData = response.data;
this.pageParams = { ...response.pageParams };
}
this.tableData = tableData;
this.tlm_isLoading = false;
}
// table加载下一页
loadNextPage() {
if (this.tlm_noMore) {
return;
}
this.pageParams.pageNo++;
this.loadTable();
},
```
### 3. 切换患者后的逻辑操作
### 4. 兄弟组件之间的消息传递
1.
<left @selectIdChange="selectIdChange"></left>
2.
方法; this.\$emit('selectIdChange',this.selectId);
父组件接收到值后传递给中间子组件
3.
<l-main :selectId="selectId"></l-main>
'selectId'],
### 5. 表单校验
//前端校验规则
rules: {
drugName: [{required: true, message: '请输入药品名称', trigger: 'blur'}],
supplier: [{required: true, message: '请选择厂商', trigger: 'change'}]，
}
提交时校验：
if(this.drugName.length==0 || this.supplier.length==0){
this.\$message.warning("请完成必填项");
return
}
### 6. 值域组件 LValueDomain 的使用
```javascript
# 多级值域（行政区域）
<l-value-domain code="area" type="cascader" :value.sync="areaValue" @change="vdChange" remoteValueKey="id" remoteShowKey="label" :multiple="true"></l-value-domain>
# 单级值域
// 主数据表
<l-value-domain code="CS01.00.802" :value.sync="1" />
# 支持本地过滤器
// localFilterKeys的作用是输入的值是否包含在数据对象的对应字段的值中，如果包含，就作为下拉选项，默认值为 ['name']，可根据需求自定义
<l-value-domain code="CS01.00.802" :value.sync="1" :localFilterKeys="['name', 'wubi']"/>
// 自定义数据表
// 支持模糊查询，检索关键词会以keyword字段拼装到params对象中，作为参数一并传过去
// params 需要定义再data上，可配置任何需要传到服务器的参数数据
<l-value-domain :value.sync="1" remoteUrl="/api/path" :remoteParams="params" remoteShowKey="name" remoteValueKey="code" placeholder="提示词"/>
```参数：
### 7. 反显指令的使用 codeTransform 的使用（用于文本反显）
```javascript
// 主数据反显
<span :val="值" code="主数据CODE" v-codeTransform></span>
// 自定义数据表
// tableName: 表名
//
// conditionMap: 对上面的表进行查询的条件（是个对象）
// 样例：
// conditionMap: {
// val: "dsajflaksdjlfjdls"
// }
//
// columns: 要返回表中哪个列的数据，需要与数据库列名一致
<span tableName="sys_account" :conditionMap="conditionMap" columns="user_id" v-tableTransform></span>
```
### 8.v-hotkey 使用规范
```
一、快捷键展示工具箱配置方法：
// 1.工具箱名称为：Hotkey (请将该工具箱放在toolBoxs最后一项)， 文件地址 src/views/public/modules/Hotkey.vue
// 2.在l-layout里配置 pageName ,值为各自改好的key值，demo如下
// <l-layout
// :toolBoxs="toolBoxs"
// :defaultToolName="toolBoxs[0]"
// :boxExpanded="true"
// @message="messageHandler"
// patientCardType="default"
// pageName="test" <<<<-----配置此项
二、在src/views/hotkey.js 文件中把 你需要编写的快捷键组合按照 页面编写规则来书写 key 要和 传入pageName 对应上
三、快捷键支持在按钮等元素 支持点击事件，支持表格和列表的上下选择和选择特定行数的数据
```
### 备注
### 1. 如何联调表格分页
```
分页公用
pageParams: {
pageNo: 1, // 当前页数
pageSize: 20 // 每页数据条数
},
total:"";table总条数
pagesAll:""//定义总页数
seach方法中请求到this.total = total
计算页数：this.pagesAll = Math.ceil(this.total / this.pageParams.pageSize) <=this.pageParams.pageNo
v-loadmore 为指令
v-loadmore: [200] 内为自定义的触发距离，也可不写，默认为50
tlm_noMore: false, // 没有更多数据， 禁用加载, 初始为false
tlm_isLoading: false, // 请求数据中，初始为false
load方法中定义 this.pageParams.pageNo++;
在setTimeout(function (){}中调Ajax请求数据
load (){
const _this = this;
_this.pageParams.pageNo++;
setTimeout(function (){
try{
let param = {...this.pageParams}
let response = await stock.getGets(param);
let { data } = response;
let table = [];
for (let i = 0; i < data.length; i++) {
const item = data[i];
table.push(item);
}
_this.tabsList = _this.tabsList.concat(table);
if (_this.pageParams.pageNo >= this.pagesAll){
_this.tlm_noMore = true
}
};
}
_this.tlm_isLoading = false
}, 2000)
},
```### 2. 如何联调长列表分页
```
// 分页控制参数
pageParams: {
pageNo: 0, // 当前页数
total: 5, // 总共页数
pageSize: 20 // 每页数据条数
},
// table 分页加载必须定义字段
tlm_isLoading: false
计算总页数
computed: {
tlm_noMore() {
return (
Math.ceil(this.pageParams.total / this.pageParams.pageSize) <=
this.pageParams.pageNo
);
}
},
//初始化列表
async loadTable() {
let params = {
//必传字段
id
//分页条件
...this.pageParams
};
//请求接口
let response = await getDiagLsit(params);
let tableData = [];
if (response.code == "1") {
tableData = response.data;
this.pageParams = { ...response.pageParams };
}
this.tableData = tableData;
this.tlm_isLoading = false;
}
// table加载下一页
loadNextPage() {
if (this.tlm_noMore) {
return;
}
this.pageParams.pageNo++;
this.loadTable();
},
```### 3. 切换患者后的逻辑操作
### 4. 兄弟组件之间的消息传递
1.
<left @selectIdChange="selectIdChange"></left>
2.
方法; this.\$emit('selectIdChange',this.selectId);
父组件接收到值后传递给中间子组件
3.
<l-main :selectId="selectId"></l-main>
'selectId'],
### 5. 表单校验
//前端校验规则
rules: {
drugName: [{required: true, message: '请输入药品名称', trigger: 'blur'}],
supplier: [{required: true, message: '请选择厂商', trigger: 'change'}]，
}
提交时校验：
if(this.drugName.length==0 || this.supplier.length==0){
this.\$message.warning("请完成必填项");
return
}### 6. 值域组件 LValueDomain 的使用
```javascript
# 多级值域（行政区域）
<l-value-domain code="area" type="cascader" :value.sync="areaValue" @change="vdChange" remoteValueKey="id" remoteShowKey="label" :multiple="true"></l-value-domain>
# 单级值域
// 主数据表
<l-value-domain code="CS01.00.802" :value.sync="1" />
# 支持本地过滤器
// localFilterKeys的作用是输入的值是否包含在数据对象的对应字段的值中，如果包含，就作为下拉选项，默认值为 ['name']，可根据需求自定义
<l-value-domain code="CS01.00.802" :value.sync="1" :localFilterKeys="['name', 'wubi']"/>
// 自定义数据表
// 支持模糊查询，检索关键词会以keyword字段拼装到params对象中，作为参数一并传过去
// params 需要定义再data上，可配置任何需要传到服务器的参数数据
<l-value-domain :value.sync="1" remoteUrl="/api/path" :remoteParams="params" remoteShowKey="name" remoteValueKey="code" placeholder="提示词"/>
```参数：
### 7. 反显指令的使用 codeTransform 的使用（用于文本反显）
```javascript
// 主数据反显
<span :val="值" code="主数据CODE" v-codeTransform></span>
// 自定义数据表
// tableName: 表名
//
// conditionMap: 对上面的表进行查询的条件（是个对象）
// 样例：
// conditionMap: {
// val: "dsajflaksdjlfjdls"
// }
//
// columns: 要返回表中哪个列的数据，需要与数据库列名一致
<span tableName="sys_account" :conditionMap="conditionMap" columns="user_id" v-tableTransform></span>
```### 8.v-hotkey 使用规范
```
一、快捷键展示工具箱配置方法：
// 1.工具箱名称为：Hotkey (请将该工具箱放在toolBoxs最后一项)， 文件地址 src/views/public/modules/Hotkey.vue
// 2.在l-layout里配置 pageName ,值为各自改好的key值，demo如下
// <l-layout
// :toolBoxs="toolBoxs"
// :defaultToolName="toolBoxs[0]"
// :boxExpanded="true"
// @message="messageHandler"
// patientCardType="default"
// pageName="test" <<<<-----配置此项
二、在src/views/hotkey.js 文件中把 你需要编写的快捷键组合按照 页面编写规则来书写 key 要和 传入pageName 对应上
三、快捷键支持在按钮等元素 支持点击事件，支持表格和列表的上下选择和选择特定行数的数据
```
### 备注
独乐乐不如众乐乐!
