vue 联调规范
### 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. 父组件 index.vue 中引入左中两个子组件 子组件定义 change 方法：selectIdChange
<left @selectIdChange="selectIdChange"></left>
2. 左侧子组件列表点击事件向父组件传递 id
方法; this.\$emit('selectIdChange',this.selectId);
父组件接收到值后传递给中间子组件
3. 中间部分子组件定义接收
在父组件中 <l-main :selectId="selectId"></l-main>
子组件中接收 props: ['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. 统一在 1440 的分辨率下进行页面调试，保证页面布局的兼容性。UI 的兼容问题由原模块开发人员修改。
2. loading 的处理不要都用全局的，根据实际场景适当采用局部 loading。
3. 一定要做错误处理。
4. 涉及主数据源，影响其他模块的数据，应该放到 vuex 中，命名要规范。
5. 要处理默认值问题，比如 table 默认要展示默认搜索结构的数据，列表默认选择第一个，等等。不要页面进入时是空的。
6. 空值问题，无数据情况下，需要有默认文字提示。
7. 所有 form 都需要有 rules 的校验。
8. 所有页面元素需要有张昭做的权限处理。
### 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. 父组件 index.vue 中引入左中两个子组件 子组件定义 change 方法：selectIdChange
<left @selectIdChange="selectIdChange"></left>
2. 左侧子组件列表点击事件向父组件传递 id
方法; this.\$emit('selectIdChange',this.selectId);
父组件接收到值后传递给中间子组件
3. 中间部分子组件定义接收
在父组件中 <l-main :selectId="selectId"></l-main>
子组件中接收 props: ['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. 统一在 1440 的分辨率下进行页面调试，保证页面布局的兼容性。UI 的兼容问题由原模块开发人员修改。
2. loading 的处理不要都用全局的，根据实际场景适当采用局部 loading。
3. 一定要做错误处理。
4. 涉及主数据源，影响其他模块的数据，应该放到 vuex 中，命名要规范。
5. 要处理默认值问题，比如 table 默认要展示默认搜索结构的数据，列表默认选择第一个，等等。不要页面进入时是空的。
6. 空值问题，无数据情况下，需要有默认文字提示。
7. 所有 form 都需要有 rules 的校验。
8. 所有页面元素需要有张昭做的权限处理。
### 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. 父组件 index.vue 中引入左中两个子组件 子组件定义 change 方法：selectIdChange
<left @selectIdChange="selectIdChange"></left>
2. 左侧子组件列表点击事件向父组件传递 id
方法; this.\$emit('selectIdChange',this.selectId);
父组件接收到值后传递给中间子组件
3. 中间部分子组件定义接收
在父组件中 <l-main :selectId="selectId"></l-main>
子组件中接收 props: ['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. 统一在 1440 的分辨率下进行页面调试，保证页面布局的兼容性。UI 的兼容问题由原模块开发人员修改。
2. loading 的处理不要都用全局的，根据实际场景适当采用局部 loading。
3. 一定要做错误处理。
4. 涉及主数据源，影响其他模块的数据，应该放到 vuex 中，命名要规范。
5. 要处理默认值问题，比如 table 默认要展示默认搜索结构的数据，列表默认选择第一个，等等。不要页面进入时是空的。
6. 空值问题，无数据情况下，需要有默认文字提示。
7. 所有 form 都需要有 rules 的校验。
8. 所有页面元素需要有张昭做的权限处理。
独乐乐不如众乐乐!
浙公网安备 33010602011771号