js 程式碼生成器

<template>
    <div id="wrapper">
        <el-form ref="factory" :model="factory" :rules="rules" label-width="80px">
            <el-form-item label="型別" prop="type">
                <el-radio-group v-model="factory.type">
                    <el-radio label="Xml"></el-radio>
                    <el-radio label="Bean"></el-radio>
                    <el-radio label="Params"></el-radio>
                    <el-radio label="VO"></el-radio>
                    <el-radio label="Dao"></el-radio>
                    <el-radio label="DaoImpl"></el-radio>
                    <el-radio label="Service"></el-radio>
                    <el-radio label="ServiceImpl"></el-radio>
                    <el-radio label="Controller"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="名稱" prop="name">
                <el-input v-model="factory.name"></el-input>
            </el-form-item>
            <el-form-item label="包名" prop="package" v-if="factory.type == 'Xml' ">
                <el-input v-model="factory.package"></el-input>
            </el-form-item>
            <el-form-item label="欄位" prop="columns">
                <el-input type="textarea" v-model="factory.columns" :autosize="{ minRows: 10, maxRows: 10}"></el-input>
            </el-form-item>
            <el-form-item label="輸出">
                <el-input type="textarea" v-model="factory.output" :autosize="{ minRows: 15, maxRows: 15}"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit('factory')">確定</el-button>
                <el-button @click="reset">清空</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            factory: {
                type: '',
                name: '',
                package: '',
                columns: '',
                output: '',
            },
            property: {
                'xml':
                `<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="{0}">

        <resultMap type="{1}" id="{2}">\n{3}
        </resultMap>

        <sql id="columns">{4}
        </sql>

</mapper>`,
                'int': 'int',
                'varchar': 'String',
                'tinyint': 'int',
                'datetime': 'Date'
            },
            rules: {
                type: [
                    { required: true, message: '請選擇型別', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '請輸入名稱', trigger: 'blur' },
                ],
                package: [
                    { required: true, message: '請輸入包名', trigger: 'blur' },
                ],
                columns: [
                    { required: true, message: '請輸入欄位', trigger: 'blur' },
                ],
            },
        }
    },
    methods: {
        submit(formName) {
            this.$refs[formName].validate((valid) => {  // 校驗
                if (valid) {
                    this.run(this.factory.type);
                } else {
                    return false;
                }
            });
        },
        run(n) {   // 執行
            switch (n) {
                case 'Xml':
                    var namespace = this.capitalize(this.factory.name, 'U');
                    var type = this.factory.package + "." + namespace;
                    var id = this.capitalize(namespace, 'L');
                    var columns = [];
                    var columnsList = this.factory.columns.split('\n').map(function (item) {
                        item = item.split('\t');
                        columns.push(item[0]);
                        var column = this.camelCase(item[0].substring(1).toLowerCase());
                        var property = this.property[item[1]];
                        var result = '\t\t<result column="{0}" property="{1}" />\n'.format(column, property);
                        return result;
                    }, this);
                    var result = this.strip(columnsList.join(''));
                    var output = this.property['xml'].format(namespace, type, id, result, columns.join(','));
                    this.factory.output = output;
                    break;
                case 'Bean':
                    console.log('bean')
                    break;
                case 'Params':
                    console.log('Params')
                    break;
                case 'VO':
                    console.log('VO')
                    break;
                case 'Dao':
                    console.log('Dao')
                    break;
                case 'DaoImpl':
                    console.log('DaoImpl')
                    break;
                case 'Service':
                    console.log('Service')
                    break;
                case 'ServiceImpl':
                    console.log('ServiceImpl')
                    break;
                case 'Controller':
                    console.log('Controller')
                    break;
            }
        },
        reset() {   // 重置
            this.factory.name = '';
            this.factory.columns = '';
            this.factory.output = '';
            this.factory.package = '';
        },
        capitalize(str, type) {   // 首字元大寫
            str = str.toLowerCase();
            if (type == 'L') {
                return str.replace(/\b(\w)|\s(\w)/g, function (m) {
                    return m.toLowerCase();
                });
            }
            if (type == 'U') {
                return str.replace(/\b(\w)|\s(\w)/g, function (m) {
                    return m.toUpperCase();
                });
            }
        },
        camelCase(str) {  // 駝峰命名法
            if (str.indexOf('_') > 0) {
                str = str.split('_')[0] + this.capitalize(str.split('_')[1], 'U');
            }
            return str;
        },
        strip(str) {
            return str.replace(/^\n+|\n+$/g, "");
        },
    }
}
</script>

關注我的技術公眾號《漫談人工智慧》，每天推送優質文章