@k3000/s1 0.1.0

package/admin/tool/helper.mjs

@@ -0,0 +1,1335 @@
+export function hungarianToCamel(name, pascal) {
+
+    name = name.split('')
+
+    name = name.map((s, i) => {
+
+        if (s === '_' || s === '-') {
+
+            return ''
+
+        } else if (name[i - 1] === '_' || name[i - 1] === '-') {
+
+            return s.toUpperCase()
+
+        } else {
+
+            return s
+        }
+    })
+
+    if (pascal) {
+
+        name = name.join('')
+
+        return name[0].toUpperCase() + name.substring(1)
+
+    } else {
+
+        return name.join('')
+    }
+}
+
+const A = 'A'.charCodeAt(0), Z = 'Z'.charCodeAt(0)
+
+export function camelToHungarian(name) {
+
+    name = name[0].toLowerCase() + name.substring(1)
+
+    return name.split('').map(c => {
+
+        const n = c.charCodeAt(0)
+
+        if (n >= A && n <= Z) {
+
+            return '_' + c.toLowerCase()
+
+        } else {
+
+            return c
+        }
+
+    }).join('')
+}
+
+export function objKeyHungarianToCamel(obj) {
+
+    if (Array.isArray(obj)) {
+
+        const result = []
+
+        for (let item of obj) {
+
+            result.push(objKeyHungarianToCamel(item))
+        }
+
+        return result
+
+    } else if (typeof obj === "object") {
+
+        if (obj instanceof Date) {
+
+            return obj
+        }
+
+        if (obj === null) {
+
+            return obj
+        }
+
+        const result = {}
+
+        for (let [key, value] of Object.entries(obj)) {
+
+            result[hungarianToCamel(key.toLowerCase())] = objKeyHungarianToCamel(value)
+        }
+
+        return result
+
+    } else {
+
+        return obj
+    }
+}
+
+export const columnTypeStr = ["char", "varchar", "nvarchar", "varchar2"]
+
+export const columnTypeText = ["tinytext", "text", "mediumtext", "longtext"]
+
+export const columnTypeTime = ["datetime", "time", "date", "timestamp"]
+
+export const columnTypeNumber = ["tinyint", "smallint", "mediumint", "int", "number", "integer",
+    "bit", "bigint", "float", "double", "decimal"]
+
+export const columnNameNotEdit = ["id", "create_by", "create_time", "del_flag"]
+
+export const columnNameNotList = ["id", "create_by", "create_time", "del_flag", "update_by", "update_time"]
+
+export const columnNameNotQuery = ["id", "create_by", "del_flag", "update_by", "update_time", "remark"]
+
+export const typeChange = {
+    id: 'int',
+    uint: 'int',
+    int: 'int',
+    bigUint: 'bigint',
+    bigint: 'bigint',
+    byte: 'bit',
+    time: 'date',
+    float: 'float',
+    string: 'varchar2',
+    buffer: 'blob',
+    text: 'blob',
+}
+
+export function parseTime(obj) {
+
+    for (let [key, value] of Object.entries(obj)) {
+
+        if (key.endsWith('Time')) {
+
+            obj[key] = new Date(value)
+        }
+    }
+
+    return obj
+}
+
+export function getHtmlByType(type, name) {
+
+    if (name.endsWith('status')) {
+
+        return 'radio'
+
+    } else if (name.endsWith('type') || name.endsWith('sex')) {
+
+        return 'select'
+
+    } else if (name.endsWith('image')) {
+
+        return 'imageUpload'
+
+    } else if (name.endsWith('file')) {
+
+        return 'fileUpload'
+
+    } else if (name.endsWith('content')) {
+
+        return 'editor'
+
+    } else {
+
+        if (columnTypeText.includes(type)) {
+
+            return 'textarea'
+
+        } else if (columnTypeTime.includes(type)) {
+
+            return 'datetime'
+
+        } else {
+
+            return 'input'
+        }
+    }
+}
+
+/**
+ * @param {Object} obj
+ * @return {Object}
+ */
+export function o2l(obj) {
+
+    const result = {}
+
+    for (const [key, value] of Object.entries(obj)) {
+
+        result[key.toLowerCase()] = value
+    }
+
+    return result
+}
+
+function createQueryItem(column) {
+
+    if (column.htmlType === 'datetime') {
+
+        return `<el-date-picker clearable size="small"
+          v-model="queryParams.${hungarianToCamel(column.columnName)}"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="请选择${column.columnComment || column.columnName}">
+        </el-date-picker>`
+
+    } else if (column.dictType) {
+
+        return `<el-select v-model="queryParams.${hungarianToCamel(column.columnName)}" placeholder="请选择${column.columnComment || column.columnName}" clearable size="small">
+          <el-option
+            v-for="dict in dict.type.${column.dictType}"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>`
+
+    } else {
+
+        return `<el-input
+          v-model="queryParams.${hungarianToCamel(column.columnName)}"
+          placeholder="请输入${column.columnComment || column.columnName}"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />`
+    }
+}
+
+function createQueryItemVue3(column) {
+
+    if (column.htmlType === 'datetime') {
+
+        return `<el-date-picker clearable
+          v-model="queryParams.${hungarianToCamel(column.columnName)}"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择${column.columnComment || column.columnName}">
+        </el-date-picker>`
+
+    } else if (column.dictType) {
+
+        return `<el-select v-model="queryParams.${hungarianToCamel(column.columnName)}"
+placeholder="请选择${column.columnComment || column.columnName}" clearable>
+          <el-option
+            v-for="dict in ${column.dictType}"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>`
+
+    } else {
+
+        return `<el-input
+          v-model="queryParams.${hungarianToCamel(column.columnName)}"
+          placeholder="请输入${column.columnComment || column.columnName}"
+          clearable
+          @keyup.enter="handleQuery"
+        />`
+    }
+}
+
+function createListItem(column) {
+
+    if (column.htmlType === 'datetime') {
+
+        return `<el-table-column label="${column.columnComment || column.columnName}" align="center" prop="${hungarianToCamel(column.columnName)}" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.${hungarianToCamel(column.columnName)}, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>`
+
+    } else if (column.dictType) {
+
+        if (column.htmlType === 'checkbox') {
+
+            return `<el-table-column label="${column.columnComment || column.columnName}" align="center" prop="${hungarianToCamel(column.columnName)}">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${hungarianToCamel(column.columnName)} ? scope.row.${hungarianToCamel(column.columnName)}.split(',') : []"/>
+        </template>
+      </el-table-column>`
+
+        } else {
+
+            return `<el-table-column label="${column.columnComment || column.columnName}" align="center" prop="${hungarianToCamel(column.columnName)}">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${hungarianToCamel(column.columnName)}"/>
+        </template>
+      </el-table-column>`
+        }
+
+    } else if (column.htmlType === 'imageUpload') {
+
+        return `<el-table-column label="${column.columnComment || column.columnName}" align="center" prop="${hungarianToCamel(column.columnName)}" width="100">
+        <template slot-scope="scope">
+          <image-preview :src="scope.row.${hungarianToCamel(column.columnName)}" :width="50" :height="50"/>
+        </template>
+      </el-table-column>`
+
+    } else {
+
+        return `<el-table-column label="${column.columnComment || column.columnName}" align="center" prop="${hungarianToCamel(column.columnName)}" />`
+    }
+}
+
+function createListItemVue3(column) {
+
+    if (column.htmlType === 'datetime') {
+
+        return `<el-table-column label="${column.columnComment || column.columnName}" align="center" prop="${hungarianToCamel(column.columnName)}">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.${hungarianToCamel(column.columnName)}, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>`
+
+    } else if (column.dictType) {
+
+        if (column.htmlType === 'checkbox') {
+
+            return `<el-table-column label="${column.columnComment || column.columnName}" align="center" prop="${hungarianToCamel(column.columnName)}">
+        <template #default="scope">
+          <dict-tag :options="${column.dictType}" :value="scope.row.${hungarianToCamel(column.columnName)} ? scope.row.${hungarianToCamel(column.columnName)}.split(',') : []"/>
+        </template>
+      </el-table-column>`
+
+        } else {
+
+            return `<el-table-column label="${column.columnComment || column.columnName}" align="center" prop="${hungarianToCamel(column.columnName)}">
+        <template #default="scope">
+          <dict-tag :options="${column.dictType}" :value="scope.row.${hungarianToCamel(column.columnName)}"/>
+        </template>
+      </el-table-column>`
+        }
+
+    } else if (column.htmlType === 'imageUpload') {
+
+        return `<el-table-column label="${column.columnComment || column.columnName}" align="center" prop="${hungarianToCamel(column.columnName)}" width="100">
+        <template #default="scope">
+          <image-preview :src="scope.row.${hungarianToCamel(column.columnName)}" :width="50" :height="50"/>
+        </template>
+      </el-table-column>`
+
+    } else {
+
+        return `<el-table-column label="${column.columnComment || column.columnName}" align="center" prop="${hungarianToCamel(column.columnName)}" />`
+    }
+}
+
+function createEditItem(column) {
+
+    const name = hungarianToCamel(column.columnName)
+
+    const open = `<el-form-item label="${column.columnComment || column.columnName}" prop="${name}">`
+    const close = '\n\t</el-form-item>'
+    let content = ''
+
+    switch (column.htmlType) {
+
+        case 'checkbox':
+
+            content = `<el-checkbox-group v-model="form.${name}">
+            <el-checkbox
+              v-for="dict in dict.type.${column.dictType}"
+              :key="dict.value"
+              :label="dict.value">
+              {{dict.label}}
+            </el-checkbox>
+          </el-checkbox-group>`
+
+            break
+    }
+
+    if (column.dictType) {
+
+        if (column.htmlType === 'checkbox') {
+
+            content = `<el-checkbox-group v-model="form.${name}">
+            <el-checkbox
+              v-for="dict in dict.type.${column.dictType}"
+              :key="dict.value"
+              :label="dict.value">
+              {{dict.label}}
+            </el-checkbox>
+          </el-checkbox-group>`
+
+        } else if (column.htmlType === 'radio') {
+
+            content = `<el-radio-group v-model="form.${name}">
+            <el-radio
+              v-for="dict in dict.type.${column.dictType}"
+              :key="dict.value"
+:label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>`
+
+        } else if (column.htmlType === 'select') {
+
+            content = `<el-select v-model="form.${name}" placeholder="请选择${column.columnComment || column.columnName}">
+            <el-option
+              v-for="dict in dict.type.${column.dictType}"
+              :key="dict.value"
+              :label="dict.label"
+:value="dict.value"
+            ></el-option>
+          </el-select>`
+        }
+    }
+
+    if (column.htmlType === 'datetime') {
+
+        content = `<el-date-picker clearable size="small"
+            v-model="form.${name}"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="请选择${column.columnComment || column.columnName}">
+          </el-date-picker>`
+
+    } else if (column.htmlType === 'editor') {
+
+        content = `<editor v-model="form.${name}" :min-height="192"/>`
+
+    } else if (column.htmlType === 'textarea') {
+
+        content = `<el-input v-model="form.${name}" type="textarea" placeholder="请输入${column.columnComment || column.columnName}" />`
+
+    } else if (column.htmlType === 'imageUpload') {
+
+        content = `<image-upload v-model="form.${name}"/>`
+
+    } else if (column.htmlType === 'fileUpload') {
+
+        content = `<file-upload v-model="form.${name}"/>`
+    }
+
+    if (!content) {
+
+        content = `<el-input${columnTypeNumber.includes(column.columnType)
+            ? ' type="number"' : ''} v-model="form.${name}" placeholder="请输入${column.columnComment || column.columnName}" />`
+    }
+
+    return open + '\n\t' + content + close
+}
+
+function createEditItemVue3(column) {
+
+    const name = hungarianToCamel(column.columnName)
+
+    const open = `<el-form-item label="${column.columnComment || column.columnName}" prop="${name}">`
+    const close = '\n\t</el-form-item>'
+    let content = ''
+
+    switch (column.htmlType) {
+
+        case 'checkbox':
+
+            content = `<el-checkbox-group v-model="form.${name}">
+            <el-checkbox
+              v-for="dict in ${column.dictType}"
+              :key="dict.value"
+              :label="dict.value">
+              {{dict.label}}
+            </el-checkbox>
+          </el-checkbox-group>`
+
+            break
+    }
+
+    if (column.dictType) {
+
+        if (column.htmlType === 'checkbox') {
+
+            content = `<el-checkbox-group v-model="form.${name}">
+            <el-checkbox
+              v-for="dict in ${column.dictType}"
+              :key="dict.value"
+              :label="dict.value">
+              {{dict.label}}
+            </el-checkbox>
+          </el-checkbox-group>`
+
+        } else if (column.htmlType === 'radio') {
+
+            content = `<el-radio-group v-model="form.${name}">
+            <el-radio
+              v-for="dict in ${column.dictType}"
+              :key="dict.value"
+:label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>`
+
+        } else if (column.htmlType === 'select') {
+
+            content = `<el-select v-model="form.${name}" placeholder="请选择${column.columnComment || column.columnName}">
+            <el-option
+              v-for="dict in ${column.dictType}"
+              :key="dict.value"
+              :label="dict.label"
+:value="dict.value"
+            ></el-option>
+          </el-select>`
+        }
+    }
+
+    if (column.htmlType === 'datetime') {
+
+        content = `<el-date-picker clearable size="small"
+            v-model="form.${name}"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择${column.columnComment || column.columnName}">
+          </el-date-picker>`
+
+    } else if (column.htmlType === 'editor') {
+
+        content = `<editor v-model="form.${name}" :min-height="192"/>`
+
+    } else if (column.htmlType === 'textarea') {
+
+        content = `<el-input v-model="form.${name}" type="textarea" placeholder="请输入${column.columnComment || column.columnName}" />`
+
+    } else if (column.htmlType === 'imageUpload') {
+
+        content = `<image-upload v-model="form.${name}"/>`
+
+    } else if (column.htmlType === 'fileUpload') {
+
+        content = `<file-upload v-model="form.${name}"/>`
+    }
+
+    if (!content) {
+
+        content = `<el-input${columnTypeNumber.includes(column.columnType)
+            ? ' type="number"' : ''} v-model="form.${name}" placeholder="请输入${column.columnComment || column.columnName}" />`
+    }
+
+    return open + '\n\t' + content + close
+}
+
+function createMjsFile(table, targetName, columns, perms, route) {
+
+    const key = columns.find(col => col.isPk)?.columnName || 'id'
+    const tableName = hungarianToCamel(table.tableName)
+    const TableName = tableName[0].toUpperCase() + tableName.substring(1)
+
+    return `import {AdminAuthObj, NoActionHandle, NoActionParams} from "../base.mjs";
+import {objKeyHungarianToCamel, parseTime} from "../tool/helper.mjs";
+import {${tableName}} from "${targetName}"
+
+const dateCols = [${columns.filter(column => column.columnType.includes('time'))
+        .map(column => `'${hungarianToCamel(column.columnName)}'`).join(', ')}]
+
+export class ${TableName} extends AdminAuthObj {
+
+    route = '${table.route}'
+
+    GET(...arg) {
+
+        const id = this.call(...arg)
+
+        if (id === NoActionParams || !NoActionHandle.is(id)) return id
+            
+        return ${tableName}.equal({${key}: id.valueOf()})
+            .then(([data]) => objKeyHungarianToCamel(data))
+    }
+
+    POST(data, extra) {
+
+        this.updateDateCol(dateCols)
+            
+        return ${tableName}.post(data)
+    }
+
+    PUT(data, extra) {
+
+        this.updateDateCol(dateCols)
+            
+        return ${tableName}.put(parseTime(data))
+    }
+
+    DELETE(_, {req, res}) {
+            
+        return ${tableName}.delete(req.params.action)
+    }
+
+    list(data) {
+            
+        return ${tableName}.get(req.query)
+            .then(rows => ({rows: objKeyHungarianToCamel(rows), total: rows.total}))
+    }
+}`
+}
+
+function regexp(type) {
+
+    const index = type.indexOf('(')
+
+    if (index > 0) {
+
+        type = type.substring(0, index)
+    }
+
+    return columnTypeStr.includes(type) || columnTypeText.includes(type)
+}
+
+function createSqlMjsFile(table, columns) {
+
+    const key = columns.find(col => col.isPk)?.columnName || 'id'
+    const tableName = hungarianToCamel(table.tableName)
+    const TableName = tableName[0].toUpperCase() + tableName.substring(1)
+
+    return `import {AdminAuthSql, NoActionHandle, NoActionParams} from "../base.mjs";
+import {query} from "../../mysql.mjs";
+import {objKeyHungarianToCamel, camelToHungarian} from "../tool/helper.mjs";
+
+const strCols = [${columns.filter(column => regexp(column.columnType))
+        .map(column => `'${hungarianToCamel(column.columnName)}'`).join(', ')}]
+const dateCols = [${columns.filter(column => column.columnType.includes('time'))
+        .map(column => `'${hungarianToCamel(column.columnName)}'`).join(', ')}]
+const otherCols = [${columns.filter(column => !column.columnType.includes('time') && !regexp(column.columnType))
+        .map(column => `'${hungarianToCamel(column.columnName)}'`).join(', ')}]
+
+export class ${TableName} extends AdminAuthSql {
+
+    route = '${table.route}'
+
+    GET(...arg) {
+
+        const id = this.call(...arg)
+
+        if (id === NoActionParams || !NoActionHandle.is(id)) return id
+
+        return query(\`SELECT * FROM ${table.tableName} where ${key} = ?\`, id.valueOf())
+            .then(([data]) => objKeyHungarianToCamel(data))
+    }
+
+    POST(...arg) {
+
+        const id = this.call(...arg)
+
+        if (action !== NoActionParams && !NoActionHandle.is(action)) return id
+
+        const [keys, values] = this.filterEntries(strCols, dateCols, otherCols)
+
+        if (keys.length === 0) return Promise.reject('数据异常')
+
+        return query(\`INSERT INTO ${table.tableName} (\${keys.map(key => camelToHungarian(key)).join(',')}) VALUES (\${keys
+        .map(_ => '?').join(',')})\`, ...values)
+    }
+
+    PUT(...arg) {
+
+        const [keys, values] = this.filterEntries(strCols, dateCols, otherCols)
+
+        if (keys.length === 0) Promise.reject('数据异常')
+
+        return query(\`UPDATE ${table.tableName} SET \${keys.map(key => \` \${camelToHungarian(key)} = ?\`).join(', ')} WHERE ${key} = ?\`,
+        ...values, data.${hungarianToCamel(key)})
+    }
+
+    DELETE(_, {req, res}) {
+
+        return query('DELETE FROM ${table.tableName} WHERE ${key} IN (?)', req.params.action.split(','))
+    }
+
+    list(data, {req, res}) {
+
+        const [whereStr, values] = this.toWhereArr(strCols, dateCols, otherCols)
+
+        return Promise.all([
+            query(\`SELECT * FROM ${table.tableName}\${whereStr} LIMIT ?,?\`, ...values,
+                (data.pageNum - 1) * data.pageSize, Number.parseInt(data.pageSize)),
+            query('SELECT COUNT(*) FROM ${table.tableName}' + whereStr, ...values),
+        ])
+            .then(([rows, [result]]) => ({rows: objKeyHungarianToCamel(rows), total: result['COUNT(*)']}))
+    }
+}`
+}
+
+function createOtherMjsFile(table, columns, perms, route) {
+
+    const tableName = hungarianToCamel(table.tableName)
+
+    const key = columns.find(col => col.isPk === '1')?.columnName || 'id'
+
+    return `import {AdminAuth} from "../base.mjs";
+
+export class ${tableName} extends AdminAuth {
+
+    pk = '${key}'
+    set = '${tableName}'
+    route = '${table.route}'
+}`
+}
+
+function createVueFile(columns, table, pk) {
+
+    const permission = table.permission
+
+    return `<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="200px">
+      ${columns.filter(column => column.isQuery === '1' && !['imageUpload', 'fileUpload'].includes(column.htmlType)).map(
+        column => `<el-form-item label="${column.columnComment || column.columnName}" prop="${hungarianToCamel(column.columnName)}">
+        ${createQueryItem(column)}
+      </el-form-item>`
+    ).join('\n    ')}
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['${permission}:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['${permission}:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['${permission}:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['${permission}:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+    <el-table v-loading="loading" :data="${table.className}List" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      ${columns.filter(column => column.isList === '1').map(column => createListItem(column)).join('\n\t')}
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row,scope.index)"
+            v-hasPermi="['${permission}:query']"
+          >详细</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['${permission}:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['${permission}:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+    />
+    <!-- 添加或修改${table.tableComment}对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false">
+      <el-form ref="form" :disabled="title.endsWith('详情')" :model="form" :rules="rules" label-width="120px">
+        ${columns.filter(column => column.isEdit === '1').map(column => createEditItem(column)).join('\n\t')}
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { list${table.functionName}, get${table.functionName}, add${table.functionName}, update${table.functionName}, del${table.functionName} } from "@/api/${table.moduleName}/${table.businessName}"
+
+export default {
+  name: "${table.functionName}",
+  dicts: ${JSON.stringify(Array.from(new Set(columns.filter(column => column.dictType).map(column => column.dictType))))},
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // ${table.tableComment}表格数据
+      ${table.className}List: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        ${columns.filter(column => column.isQuery === '1').map(
+        column => `${hungarianToCamel(column.columnName)}: null`
+    ).join(',\n\t')}
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        ${columns.filter(column => column.isRequired === '1').map(
+        column => `${hungarianToCamel(column.columnName)}: [
+          {required: true, message: "${column.columnComment || column.columnName}不能为空", trigger: "blur"}
+        ]`
+    ).join(',\n\t')}
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询${table.tableComment}列表 */
+    getList() {
+      this.loading = true
+      list${table.functionName}(this.queryParams).then(response => {
+        this.${table.className}List = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        ${columns.map(
+        column => `${hungarianToCamel(column.columnName)}: ${column.htmlType === 'checkbox'
+            ? '[]' : column.htmlType === 'radio' ? '"0"' : null}`
+    ).join(',\n\t')}
+      }
+      this.resetForm("form")
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.${pk})
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 详细按钮操作 */
+    handleView(row) {
+      const ${pk} = row.${pk} || this.ids
+      get${table.functionName}(${pk}).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = "${table.tableComment}详情"
+      })
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = "添加${table.tableComment}"
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const ${pk} = row.${pk} || this.ids
+      get${table.functionName}(${pk}).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = "修改${table.tableComment}"
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ${pk}s = row.${pk} || this.ids
+      this.$modal.confirm('是否确认删除${table.tableComment}编号为"' + ${pk}s + '"的数据项？').then(function() {
+        return del${table.functionName}(${pk}s)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('${table.moduleName}/${table.businessName}/export', {
+        ...this.queryParams
+      }, \`${table.className}\${new Date().getTime()}.xlsx\`)
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          ${columns.filter(column => column.htmlType === 'checkbox').map(
+        column => `this.form.${hungarianToCamel(column.columnName)} = this.form.${hungarianToCamel(column.columnName)}.join(",")`
+    ).join('\n\t')}
+          if (this.form.${pk} != null) {
+            update${table.functionName}(this.form).then(() => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
+          } else {
+            add${table.functionName}(this.form).then(() => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+  }
+}
+</script>
+`
+}
+
+function createVue3File(columns, table, pk) {
+
+    const permission = table.permission
+
+    const dict = Array.from(new Set(columns.filter(column => column.dictType).map(column => column.dictType)))
+
+    return `<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="200px">
+      ${columns.filter(column => column.isQuery === '1' && !['imageUpload', 'fileUpload'].includes(column.htmlType)).map(
+        column => `<el-form-item label="${column.columnComment || column.columnName}" prop="${hungarianToCamel(column.columnName)}">
+        ${createQueryItemVue3(column)}
+      </el-form-item>`
+    ).join('\n    ')}
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['${permission}:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['${permission}:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['${permission}:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['${permission}:export']"
+        >导出</el-button>
+      </el-col>
+         <el-col :span="1.5">
+            <el-button 
+               type="info"
+               plain
+               icon="Sort"
+               @click="toggleExpandAll"
+            >展开/折叠</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+    <el-table v-loading="loading" :data="${table.className}List" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      ${columns.filter(column => column.isList === '1').map(column => createListItemVue3(column)).join('\n\t')}
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button
+            type="text"
+            icon="View"
+            @click="handleView(scope.row,scope.index)"
+            v-hasPermi="['${permission}:query']"
+          >详细</el-button>
+          <el-button
+            type="text"
+            icon="Edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['${permission}:edit']"
+          >修改</el-button>
+          <el-button
+            type="text"
+            icon="Delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['${permission}:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+    />
+    <!-- 添加或修改${table.tableComment}对话框 -->
+    <el-dialog :title="title" v-model="open" width="800px" append-to-body :close-on-click-modal="false">
+      <el-form ref="formRef" :disabled="title.endsWith('详情')" :model="form" :rules="rules" label-width="120px">
+        ${columns.filter(column => column.isEdit === '1').map(column => createEditItemVue3(column)).join('\n\t')}
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="${table.functionName}">
+import { list${table.functionName}, get${table.functionName}, add${table.functionName}, update${table.functionName}, del${table.functionName} } from "@/api/${table.moduleName}/${table.businessName}"
+
+const { proxy } = getCurrentInstance();
+const { ${dict.join(', ')} } = proxy.useDict(${dict.map(d => `"${d}"`).join(', ')});
+
+const ${table.className}List = ref([]);// ${table.tableComment}表格数据
+const open = ref(false);// 是否显示弹出层
+const loading = ref(true);// 遮罩层
+const showSearch = ref(true);// 显示搜索条件
+const ids = ref([]);// 选中数组
+const single = ref(true);// 非单个禁用
+const multiple = ref(true);// 非多个禁用
+const total = ref(0);// 总条数
+const title = ref("");// 弹出层标题
+
+const data = reactive({
+  form: {},// 表单参数
+  queryParams: {// 查询参数
+    pageNum: 1,
+    pageSize: 10,
+    ${columns.filter(column => column.isQuery === '1').map(
+        column => `${hungarianToCamel(column.columnName)}: null`
+    ).join(',\n\t')}
+  },
+  rules: {// 表单校验
+    ${columns.filter(column => column.isRequired === '1').map(
+        column => `${hungarianToCamel(column.columnName)}: [
+      {required: true, message: "${column.columnComment || column.columnName}不能为空", trigger: "blur"}
+    ]`
+    ).join(',\n\t')}
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+/** 查询${table.tableComment}列表 */
+function getList() {
+  loading.value = true;
+  list${table.functionName}(queryParams.value).then(response => {
+    ${table.className}List.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+/** 表单重置 */
+function reset() {
+  form.value = {
+    ${columns.map(
+        column => `${hungarianToCamel(column.columnName)}: ${column.htmlType === 'checkbox'
+            ? '[]' : column.htmlType === 'radio' ? '"0"' : null}`).join(',\n\t')}
+  };
+  proxy.resetForm("formRef");
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+/** 详细按钮操作 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.${pk});
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+/** 任务详细信息 */
+function handleView(row) {
+  const ${pk} = row.${pk} || ids.value;
+  get${table.functionName}(${pk}).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "${table.tableComment}详情";
+  });
+}
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加${table.tableComment}";
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const ${pk} = row.${pk} || ids.value;
+  get${table.functionName}(${pk}).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改${table.tableComment}";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const ${pk}s = row.${pk} || ids.value;
+  proxy.$modal.confirm('是否确认删除${table.tableComment}编号为"' + ${pk}s + '"的数据项？').then(function () {
+    return del${table.functionName}(${pk}s);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('${table.moduleName}/${table.businessName}/export', {
+    ...queryParams.value,
+  }, \`${table.className}\${new Date().getTime()}.xlsx\`);
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["formRef"].validate(valid => {
+    if (valid) {
+      ${columns.filter(column => column.htmlType === 'checkbox').map(
+        column => `form.value.${hungarianToCamel(column.columnName)} = form.value.${hungarianToCamel(column.columnName)}.join(",")`
+    ).join('\n\t')}
+      if (form.value.${pk} != undefined) {
+        update${table.functionName}(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        add${table.functionName}(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+getList();
+</script>
+`
+}
+
+function createApiFile(table, pk) {
+
+    return `import request from '@/utils/request'
+
+// 查询${table.tableComment}列表
+export function list${table.functionName}(query) {
+  return request({
+    url: '/${table.moduleName}/${table.businessName}/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询${table.tableComment}详细
+export function get${table.functionName}(${pk}) {
+  return request({
+    url: '/${table.moduleName}/${table.businessName}/' + ${pk},
+    method: 'get'
+  })
+}
+
+// 新增${table.tableComment}
+export function add${table.functionName}(data) {
+  return request({
+    url: '/${table.moduleName}/${table.businessName}',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改${table.tableComment}
+export function update${table.functionName}(data) {
+  return request({
+    url: '/${table.moduleName}/${table.businessName}',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除${table.tableComment}
+export function del${table.functionName}(${pk}) {
+  return request({
+    url: '/${table.moduleName}/${table.businessName}/' + ${pk},
+    method: 'delete'
+  })
+}
+`
+}
+
+export function generator(table, columns, targetName) {
+
+    // console.log(table.tplWebType)
+
+    table = {...table}
+
+    table.className = table.className || hungarianToCamel(table.tableName)
+    table.packageName = table.packageName || (table.tableName.startsWith('sys') ? 'system' : 'business')
+    table.moduleName = table.moduleName || (table.tableName.startsWith('sys') ? 'system' : 'business')
+    table.businessName = table.businessName || table.tableName
+    table.functionName = table.functionName || hungarianToCamel(table.tableName)
+
+    table.permission = table.businessName.replace(/[_-]/g, ':')
+
+    if (!table.permission.includes(':')) {
+
+        table.permission = `${table.tableName.startsWith('sys') ? 'system' : 'business'}:${table.permission}`
+    }
+
+    table.route = '/' + camelToHungarian(table.tableName).replace(/_/g, '/')
+
+    if (table.route.startsWith('/sys/')) {
+
+        table.route = '/system' + table.route.substring(4)
+    }
+
+    table.businessName = table.businessName.replace(/[_-]/g, '/')
+
+    if (table.businessName.startsWith('sys/')) {
+
+        table.businessName = table.businessName.substring(4)
+    }
+
+    if (table.businessName.startsWith('system/')) {
+
+        table.businessName = table.businessName.substring(7)
+    }
+
+    table.functionName = table.functionName[0].toUpperCase() + table.functionName.substring(1)
+
+    let pk = columns.find(column => column.isPk === '1')
+
+    if (pk) {
+
+        pk = hungarianToCamel(pk.columnName)
+
+    } else {
+
+        pk = 'id'
+    }
+
+    // console.log(table.functionName, pk)
+
+    return {
+        [`vm/nodejs/${table.packageName}/${table.className}.mjs.vm`]: table.tplCategory === 'sql' ?
+            createSqlMjsFile(table, columns) : table.tplCategory === 'obj' ?
+                createMjsFile(table, targetName, columns) :
+                createOtherMjsFile(table, columns),
+        [`vm/vue/${table.moduleName}/${table.businessName}/index.vue.vm`]: table.tplWebType === 'element-plus' ?
+            createVue3File(columns, table, pk) :
+            createVueFile(columns, table, pk),
+        [`vm/js/${table.moduleName}/${table.businessName}.js.vm`]: createApiFile(table, pk),
+    }
+}