init

jinlin

2024-02-26 6f0714843341b168573ad0272069f7af2d3d2b87

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
import { formItemWrapper, colWrapper } from './common/htmlWrapper'
 
// 创建“el-button”
function createButtonHtml(upload) {
  let buttonHtml = ''
  const config = upload.__config__
 
  if (upload['list-type'] === 'picture-card') {
    buttonHtml += '<i class="el-icon-plus"></i>\n'
  } else {
    buttonHtml += `<el-button size="small" type="primary" icon="el-icon-upload">${config.buttonText}</el-button>\n`
  }
 
  if (config.showTip) {
    buttonHtml += `<div slot="tip" class="el-upload__tip">只能上传不超过 ${config.fileSize}${config.sizeUnit} 的${upload.accept}文件</div>`
  }
 
  return buttonHtml
}
 
// 创建“el-upload”
function createUploadHtml(formJson, upload, parent) {
  // const vModel = getVModelHtml(formJson, upload, parent)
  const vModel = upload.__vModel__
  const disabled = upload.disabled ? ':disabled=\'true\'' : ''
  const action = upload.action ? `:action="${vModel}Action"` : ''
  const multiple = upload.multiple ? 'multiple' : ''
  const listType = upload['list-type'] !== 'text' ? `list-type="${upload['list-type']}"` : ''
  const accept = upload.accept ? `accept="${upload.accept}"` : ''
  const name = upload.name !== 'file' ? `name="${upload.name}"` : ''
  const autoUpload = upload['auto-upload'] === false ? ':auto-upload="false"' : ''
  const beforeUpload = `:before-upload="${vModel}BeforeUpload"`
  const fileList = `:file-list="${vModel}fileList"`
  const ref = `ref="${vModel}"`
 
  // 创建“el-button”
  const buttonHtml = createButtonHtml(upload)
 
  return `<el-upload ${ref} ${fileList} ${action} ${autoUpload} ${multiple} ${beforeUpload} ${listType} ${accept} ${name} ${disabled}>${buttonHtml}</el-upload>`
}
 
/**
 * 获取“上传”HTML
 * @param formJson 表单结构
 * @param upload “上传”组件
 * @param parent 父组件（dialog, table...）
 * @param isSomeSpanUnequal24 是否有的组件“span”不等于“24”
 * @returns {string} “上传”HTML
 */
export default function getUploadHtml(formJson, upload, parent, isSomeSpanUnequal24) {
  // 创建“el-upload”
  const uploadHtml = createUploadHtml(formJson, upload, parent)
 
  // 用“el-form-item”包裹“el-upload”
  let formItemHtml = formItemWrapper(formJson, upload, uploadHtml)
 
  // span不为24的用“el-col”包裹“el-form-item”
  if (isSomeSpanUnequal24) {
    formItemHtml = colWrapper(upload, formItemHtml)
  }
 
  return formItemHtml
}