schema2code默认只能实现较为简单的分组,当填写项目较多的时候,肯定是用选项卡明确分段比较合适,这时候schema2code自生成的就没法实现了,摒着最最少的代码修改来尝试设置生成前的schema和生成后的vue页面。
一、schema设计
先把group
属性加入每个字段中,即设计的时候就先安排好
...
"id": {
"bsonType": "string",
"title": "编号",
"group": "1"
},
"name": {
"bsonType": "string",
"title": "名称",
"group": "1"
},
"key": {
"bsonType": "string",
"title": "标识",
"group": "1"
},
"remark": {
"bsonType": "string",
"title": "备注",
"group": "2"
},
"sort": {
"bsonType": "string",
"title": "排序",
"group": "2"
},
...
二、schema2code 生成代码
这个就按照常规操作
三、修改add.vue和edit.vue
官网:uni-segmented-control分段器
1. 增加一个分段器
直接用官网案例
...
<view class="uni-padding-wrap uni-common-mt">
<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor" @clickItem="onClickItem" />
</view>
...
2. 修改每个uni-group
参考官网
- 原代码:
<uni-forms>
<uni-group>
<uni-forms-item label="编号"><input placeholder="请输入编号" /></uni-forms-item>
<uni-forms-item label="名称"><input placeholder="请输入名称" /></uni-forms-item>
<uni-forms-item label="标识"><input placeholder="请输入标识" /></uni-forms-item>
</uni-group>
<uni-group>
<uni-forms-item label="备注"><input placeholder="请输入备注" /></uni-forms-item>
<uni-forms-item label="排序"><input placeholder="请输入排序" /></uni-forms-item>
</uni-group>
...
- 新代码
其实就是把uni-group
改为带条件的view
,复制黏贴改个值即可
<uni-forms>
<!--// 虽然也可以用if,但用if会导致每次点击重新渲染页面,从而可能审核报错,比如第一页有控件必填,点了第二项目之后该控件没了~~-->
<!--//<view v-if="current === 0">-->
<view v-show="current === 0">
<uni-forms-item label="编号"><input placeholder="请输入编号" /></uni-forms-item>
<uni-forms-item label="名称"><input placeholder="请输入名称" /></uni-forms-item>
<uni-forms-item label="标识"><input placeholder="请输入标识" /></uni-forms-item>
</view >
<view v-show="current === 1">
<uni-forms-item label="备注"><input placeholder="请输入备注" /></uni-forms-item>
<uni-forms-item label="排序"><input placeholder="请输入排序" /></uni-forms-item>
</view >
...
3. 增加变量
官网代码修改成自己的,用在分段器 uni-segmented-control
上
...
return {
/*分段标签卡*/
items: ['选项卡1', '选项卡2', '选项卡3'],
current: 0,
activeColor: '#007aff',
styleType: 'button',
...
4. 增加点击函数
直接官网代码拿来用,用在分段器 uni-segmented-control
上
...
methods: {
onClickItem(e) {
if (this.current !== e.currentIndex) {
this.current = e.currentIndex
}
},
...