# 使用流程
- 点击添加表单组件，并填写组件名称、字段类型、业务范围、组件描述等内容
字段类型：实体字段表示需要在表单保存时创建实体字段进行存入字段值，若是展示型或者绑定其他已有字段的，则只需选择非实体字段；
业务范围：指组件字段是否在各业务端使用；
- 创建成功后即进入代码编译界面，在代码中可定义组件在各个业务端的UI、数据属性、运行逻辑等组件特性
- 点击快捷键Ctrl+S（保存）后，再发布代码即可在应用中添加该组件
- 在组件管理卡片内可进行自定义组件的操作事项 开启/关闭：自定义组件可否在表单设计中添加使用。（注：当组件为关闭时组件仍可使用，除非删除该组件）
- 代码管理：对组件代码进行修改编译
- 导出：导出为一个安装包，可供其他七巧租户导入使用
- 删除：彻底删除该组件
5.在应用设计内首先添加一个表单，并保存后，再选择需要添加自定义组件
- 拖拽自定义组件到表单设计内，配置字段名、属性配置
- 发布表单后，在应用端上使用
# 入门案例
场景描述：通过自定义组件实现进度条功能，并将进度条的值写入数字字段
- 添加一个新的自定义表单组件
- 编写代码
PC端-进度条组件.vue
<q-template>
<div class="processBox">
<el-slider v-model="sliderValue" @change="sliderChange"></el-slider>
</div>
</q-template>
<q-script>
(function () {
return {
props: {
value: {
default() {
return ''
}
},// 表单控件绑定值
value: {
default() {
return ''
}
},
// 字段布局
formFieldLayout: {
default() {
return ''
}
},
// 控件配置数据
config: {
default() {
return {}
}
},
// 表单数据
form: {
default() {
return {}
}
},
// 验证规则
rules: {
type: Array,
default() {
return []
}
},
// 是否禁用控件
disabled: {
default() {
return false
}
},
// 只读
readonly: {
type: Boolean,
default() {
return false
}
},
// 显示文本
isText: {
type: Boolean,
default() {
return false
}
},
// 是否是在表格中
isInTable: {
type: Boolean,
default() {
return false
}
},
applicationId: {
type: String,
default() {
return ''
}
},
buttonId: '',
businessId: '',
componentId: '',
formDefinitionId: {
type: String,
default() {
return ''
}
},
processDefinitionId: '',
processInstanceId: '',
taskId: '',
formInstanceId: '',
// loading集合
loadings: {
type: Array,
default() {
return []
}
},
// 搜索栏使用
searhStatus: {
type: Boolean,
default: () => {
return false
}
},
miniSearch: {
type: Boolean,
default: () => {
return false
}
},
rowIndex: {
default() {
return null
}
},
docId: {
type: String,
default() {
return ''
}
},
// 实例配置数据，主要用于子表场景中
instanceConfig: {
default() {
return null
}
},
// 表单详情信息
formInfoData: {
default() {
return {}
}
},
// 联动缓存数据
relateRefreshStorage: {
default() {
return null
}
},
// 是子表弹层里的组件
isSubformDrawer: {
default() {
return false
}
},
// 子表单才有的父级别
parentInputById: {
default() {
return {}
}
},
// 子表单才有的父级别document
parentForm: {
default() {
return {}
}
},
subInputById: {
default() {
return {}
}
},
isFormLabel: {
type: Boolean,
default() {
return false
}
}
},
data() {
return {
sliderValue: 0
}
},
methods: {
sliderChange(val) {
this.value.value = val
this.sliderValue = val
}
},
mounted() {
this.sliderValue = this.value.value || 0
this.value.str = "xxxxxxxx"
console.log('value', this.value)
console.log('config', this.config)
console.log('applicationId', this.applicationId)
},
watch: {
value: {
handler() {
console.log('=====cusotom', this.value)
},
deep: true
}
}
}
})()
</q-script>
<q-style>
.processBox{
}
</q-style>
移动端-进度条组件.vue
<q-template>
<div class="processBox">
<div>进度条组件</div>
<cube-input v-model="sliderValue" @input="sliderChange"></cube-input>
</div>
</q-template>
<q-script>
(function () {
return {
props: {
value: {
default() {
return {}
}
},
// 控件配置数据
config: {
default() {
return {}
}
},
// 表单数据
form: {
default() {
return {}
}
},
// 是否是在表格中
isInTable: {
type: Boolean,
default() {
return false
}
},
},
data() {
return {
sliderValue: 0
}
},
methods: {
sliderChange(val) {
this.value.value = val
this.sliderValue = val
}
},
mounted() {
console.log('valuexxxxxxx--------------------------------', this.value)
this.sliderValue = this.value.value || 0
this.sliderValue = this.value.value
}
}
})()
</q-script>
<q-style>
.processBox{
}
</q-style>
存储数据模型.json
{
"value": 0,
"str": ""
}
显示数据模型.json
{
"value": 0,
"str": ""
}
- 在表单设计中添加组件并设置属性配置
- 运行端添加数据查看效果
1 / 0