Changes

jinlin

2023-11-23 2748e2d70970fc577e8621aad44a498ba8b7ef2c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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
}