init

jinlin

2023-11-03 35435e8b1995e6775c82b86652381e07e3faff54

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
62
63
64
import { getVModelHtml, formItemWrapper, colWrapper } from './common/htmlWrapper'
 
// 创建“el-option”
function createOptionHtml(select) {
  let optionHtml = ''
  const slot = select.__slot__
  if (slot && slot.options && slot.options.length) {
    // optionHtml = `<el-option v-for="(item, index) in ${select.__vModel__}Options" :key="index" :label="item.label" :value="item.value"></el-option>`
    slot.options.forEach(option => {
      optionHtml += `<el-option key="${option.value}" label="${option.label}" value="${option.value}"></el-option>\n`
    })
  }
  return optionHtml
}
 
// 创建“el-option”
function createOptionHtmlForTable(select) {
  const options = []
  select.__slot__.options.forEach(option => {
    options.push(`<el-option key="${option.value}" label="${option.label}" value="${option.value}"></el-option>`)
  })
  return options.join('\n')
}
 
// 创建“el-select”
function createSelectHtml(formJson, select, parent) {
  const vModel = getVModelHtml(formJson, select, parent)
  const placeholder = select.placeholder ? `placeholder="${select.placeholder}"` : ''
  const width = select.style && select.style.width ? ':style="{width: \'100%\'}"' : ''
  const disabled = select.disabled ? ':disabled=\'true\'' : ''
  const filterable = select.filterable ? 'filterable' : ''
  const multiple = select.multiple ? 'multiple' : ''
 
  // 创建“el-option”
  let optionHtml = select.inTable ? createOptionHtmlForTable(select) : createOptionHtml(select)
 
  // 换行
  if (optionHtml) optionHtml = `\n${optionHtml}\n`
 
  return `<el-select ${vModel} ${placeholder} ${disabled} ${multiple} ${filterable} ${width}>${optionHtml}</el-select>`
}
 
/**
 * 获取下拉选择HTML
 * @param formJson 表单结构
 * @param select 下拉选择组件
 * @param parent 父组件（dialog, table...）
 * @param isSomeSpanUnequal24 是否有的组件“span”不等于“24”
 * @returns {string} 下拉选择HTML
 */
export default function getSelectHtml(formJson, select, parent, isSomeSpanUnequal24) {
  // 创建“el-select”
  const selectHtml = createSelectHtml(formJson, select, parent)
 
  // 用“el-form-item”包裹“el-select”
  let formItemHtml = formItemWrapper(formJson, select, selectHtml)
 
  // span不为24的用“el-col”包裹“el-form-item”
  if (isSomeSpanUnequal24) {
    formItemHtml = colWrapper(select, formItemHtml)
  }
 
  return formItemHtml
}