import { getVModelHtml, formItemWrapper, colWrapper } from './common/htmlWrapper'
|
|
// 创建“el-checkbox”或者“el-checkbox-button”
|
function createCheckboxHtml(checkbox) {
|
let checkboxHtml = ''
|
|
// 插槽
|
const slot = checkbox.__slot__
|
// 配置
|
const config = checkbox.__config__
|
|
// 选项
|
if (slot && slot.options && slot.options.length) {
|
// 标签
|
const tag = config.optionType === 'button' ? 'el-checkbox-button' : 'el-checkbox'
|
// 边框
|
const border = config.border ? 'border' : ''
|
|
checkboxHtml = `<${tag} v-for="(item, index) in ${checkbox.__vModel__}Options" :key="index" :label="item.value" ${border}>{{item.label}}</${tag}>`
|
}
|
|
return checkboxHtml
|
}
|
|
// 创建“el-checkbox-group”
|
function createCheckboxGroupHtml(formJson, checkbox, parent) {
|
const vModel = getVModelHtml(formJson, checkbox, parent)
|
const width = checkbox.style && checkbox.style.width ? ':style="{width: \'100%\'}"' : ''
|
const disabled = checkbox.disabled ? ':disabled=\'true\'' : ''
|
const size = checkbox.size ? `size="${checkbox.size}"` : ''
|
const min = checkbox.min ? `:min="${checkbox.min}"` : ''
|
const max = checkbox.max ? `:max="${checkbox.max}"` : ''
|
|
// 创建“el-checkbox”或者“el-checkbox-button”
|
const checkboxHtml = createCheckboxHtml(checkbox)
|
|
return `<el-checkbox-group ${vModel} ${size} ${min} ${max} ${disabled} ${width}>${checkboxHtml}</el-checkbox-group>`
|
}
|
|
/**
|
* 获取“多选框组”HTML
|
* @param formJson 表单结构
|
* @param checkbox “多选框组”组件
|
* @param parent 父组件（dialog, table...）
|
* @param isSomeSpanUnequal24 是否有的组件“span”不等于“24”
|
* @returns {string} “多选框组”HTML
|
*/
|
export default function getCheckboxHtml(formJson, checkbox, parent, isSomeSpanUnequal24) {
|
// 创建“el-checkbox-group”
|
const checkboxGroupHtml = createCheckboxGroupHtml(formJson, checkbox, parent)
|
|
// 用“el-form-item”包裹“el-checkbox-group”
|
let formItemHtml = formItemWrapper(formJson, checkbox, checkboxGroupHtml)
|
|
// span不为24的用“el-col”包裹“el-form-item”
|
if (isSomeSpanUnequal24) {
|
formItemHtml = colWrapper(checkbox, formItemHtml)
|
}
|
|
return formItemHtml
|
}
|
