js 代码生成器

来源:互联网 发布:淘宝网双十一手机 编辑:程序博客网 时间:2024/06/02 04:43
<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>