<div class="main" id="main">
    <el-form label-width="80px">
        <el-form-item label="原表名">
            <el-input type="text" maxlength="20" v-model="oldName" disabled></el-input>
            <span class="help-block"></span>
        </el-form-item>

        <el-form-item label="新表名">
            <el-input placeholder="请填写新表名" maxlength="20" v-model="newName" v-validate="{data:newName,dataType:'table',minLength:2,nullMsg:'请填写新表名！',errorMsg:'表名填写错误',execute:function(){return checkTable()}}"></el-input>
            <span class="help-block">只能由字母、数字组成，首字符必须英文</span>
        </el-form-item>
    </el-form>
    <div class="footer-submit-bar" style="padding-left:100px">
        <el-button type="primary" v-on:click="postSubmit">提交保存</el-button>
        <el-button onclick="closeSelf()">关闭</el-button>
    </div>
</div>

 <script type="text/javascript">
    //绑定数据
     var formData = {oldName:"@Model",newName:""}
    var vue = new Vue({
        el: "#main",
        data: formData,
        methods: {
            postSubmit: function () {
                var validated = this.validateForm();//表单验证
                if (validated) {
                    this.submit({ url: "@Url.ActionUrl()", data: formData, success: function () { callback()} });
                }
            },
            checkTable: function ()
            {
                var isSame = (this.oldName.toLowerCase() == this.newName.toLowerCase());
                if (isSame) {
                    return "新表名不能和原表名一样！";
                }
                else
                {
                    return true;
                }
            }
        },
     });

     function callback()
     {
         parent.loadData();
         closeSelf();
     }
</script>
