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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import getSimpleComponentHtml from './common/simpleComponentHtmlFactory'
 
// 创建“el-table-column”
function createTableColumnHtmls(dialog) {
  return dialog.__config__.children.map(child => {
    let tableColumnHtml = ''
 
    if (child.FComponentType === 'oneText' || child.FComponentType === 'datePicker') { // 单行文本、日期选择
      tableColumnHtml = `<el-table-column prop="${child.__vModel__}" label="${child.__config__.label}"></el-table-column>`
    } else if (child.FComponentType === 'select') { // 下拉选择
      let spanHtmls = ''
 
      child.__slot__.options.forEach((option, index) => {
        if (index === 0) {
          spanHtmls += `<span v-if="scope.row.${child.__vModel__} == '${option.value}'">${option.label}</span>\n`
        } else {
          spanHtmls += `<span v-else-if="scope.row.${child.__vModel__} == '${option.value}'">${option.label}</span>\n`
        }
      })
 
      tableColumnHtml = `
          <el-table-column prop="${child.__vModel__}" label="${child.__config__.label}">
            <template slot-scope="scope">
              ${spanHtmls}
            </template>
          </el-table-column>
        `
    }
 
    return tableColumnHtml
  })
}
 
// 创建“el-table”
function createTableHtml(dialog) {
  // 创建“el-button”
  const buttonHtml = `<el-button size="mini" @click="${dialog.FVisibleParamName} = true" style="margin-bottom: 10px;">新增</el-button>`
 
  // 创建“el-table-column”
  const tableColumnHtmls = createTableColumnHtmls(dialog)
 
  // 创建“el-table”
  const tableHtml = `
      <el-table :data="formData.${dialog.__vModel__}" border style="width: 100%; margin-bottom: 20px;">
        ${tableColumnHtmls.join('\n')}
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="dialogTableEdit(scope.row, '${dialog.FVisibleParamName}', '${dialog.FFormDataParamName}', '${dialog.FOperateTypeParamName}')">编辑</el-button>
            <el-button size="mini" type="danger" @click="dialogTableDelete(scope.$index, '${dialog.__vModel__}')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    `
 
  return buttonHtml + tableHtml
}
 
// 创建“el-form”
function createFormHtml(formJson, dialog) {
  const formItemHtmls = dialog.__config__.children.map(
    child => getSimpleComponentHtml(formJson, child, dialog, false)
  )
 
  return `
    <el-form ref="${dialog.FFormRefParamValue}" :model="${dialog.FFormDataParamName}" :rules="${dialog.FFormRulesParamName}" size="medium" label-width="100px">
      ${formItemHtmls.join('\n')}
    </el-form>
    `
}
 
// 创建“el-dialog”
function createDialogHtml(dialog, formHtml) {
  return `
      <el-dialog title="${dialog.FTitle}" :visible.sync="${dialog.FVisibleParamName}" width="50%" append-to-body>
        ${formHtml}
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogSubmit('${dialog.__vModel__}', '${dialog.FVisibleParamName}', '${dialog.FFormDataParamName}', '${dialog.FFormRefParamValue}', '${dialog.FOperateTypeParamName}')">确 定</el-button>
          <el-button @click="${dialog.FVisibleParamName} = false">取 消</el-button>
        </span>
      </el-dialog>
    `
}
 
/**
 * 获取弹框HTML
 * @param formJson 表单结构
 * @param dialog  弹框组件
 * @returns {string} 弹框HTML
 */
export default function getDialogHtml(formJson, dialog) {
  // 创建“el-table”
  const tableHtml = createTableHtml(dialog)
 
  // 创建“el-form”
  const formHtml = createFormHtml(formJson, dialog)
 
  // 创建“el-dialog”
  const dialogHtml = createDialogHtml(dialog, formHtml)
 
  return tableHtml + dialogHtml
}