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
import getSimpleComponentHtml from './common/simpleComponentHtmlFactory'
 
// 创建“el-table-column”
// <el-table-column prop="address" label="地址">
//   <template slot-scope="scope">
//     <el-input placeholder="请输入" v-model="scope.row.address"></el-input>
//   </template>
// </el-table-column>
function createTableColumnHtmls(formJson, table) {
  const tableColumnHtmls = table.__slot__.columns.map(column => {
    const formItemHtml = getSimpleComponentHtml(formJson, column, table, false)
    return `
      <el-table-column prop="${column.__vModel__}" label="${column.__config__.label}" width="${column.width}" align="center">
        <template slot-scope="scope">
          ${formItemHtml}
        </template>
      </el-table-column>
    `
  })
  return tableColumnHtmls.join('\n')
}
 
// 创建“el-table”
// <el-table :data="formData.purInWarehouseEntrys" border style="width: 100%; margin-bottom: 20px;">
//   <el-table-column prop="address" label="地址">
//     <template slot-scope="scope">
//       <el-input placeholder="请输入" v-model="scope.row.address"></el-input>
//     </template>
//   </el-table-column>
//   <el-table-column label="操作">
//     <template slot-scope="scope">
//       <el-button size="mini" @click="handleAdd('purInWarehouseEntrys', scope.$index, scope.row)">新增</el-button>
//       <el-button size="mini" @click="handleEdit('purInWarehouseEntrys', scope.$index, scope.row)">编辑</el-button>
//       <el-button size="mini" type="danger" @click="handleDelete('purInWarehouseEntrys', scope.$index, scope.row)">删除</el-button>
//     </template>
//   </el-table-column>
// </el-table>
function createTableHtml(table, tableColumnHtmls) {
  return `
      <el-table :data="formData.${table.__vModel__}" border style="width: 100%; margin-bottom: 20px;">
        ${tableColumnHtmls}
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleAdd('${table.__vModel__}', scope.$index, scope.row)">新增</el-button>
            <el-button size="mini" @click="handleEdit('${table.__vModel__}', scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete('${table.__vModel__}', scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    `
}
 
/**
 * 获取“表格”HTML
 * @param formJson 表单结构
 * @param table “表格”组件
 * @returns {string} “表格”HTML
 */
export default function getTableHtml(formJson, table) {
  // 创建“el-table-column”
  const tableColumnHtmls = createTableColumnHtmls(formJson, table)
 
  // 创建“el-table”
  const tableHtml = createTableHtml(table, tableColumnHtmls)
 
  return tableHtml
}