<div class="main" id="main">
    <el-form ref="form" label-width="150px" label-position="left">
        <el-form-item label="表名">
            <el-input v-model="OldName" maxlength="30" disabled></el-input>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>
        <el-form-item label="新表名">
            <el-input v-model="NewName" maxlength="30" placeholder="只能由字母、数字组成，首字符必须英文" v-validate="{data:NewName,dataType:'table',nullMsg:'请填写表名！',errorMsg:'表名填写错误'}"></el-input>
            <span class="help-block validate-tips-box">AccessKeySecret用于对webapi参数进行签名加密</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: "category_"};
    var vue = new Vue({
        el: "#main",
        data: formData,
        methods: {
            postSubmit: function () {
                var validated = this.validateForm({ tipsStyle: 1 });//jquery表单验证
                if (formData.NewName == "category_")
                {
                    this.$message({ message: "请填写好完整的表名！", type: 'error', showClose: true });
                    return false;
                }
                if (validated) {
                    this.submit({ url: "@Url.ActionUrl()", data: formData, success: "PostBack()"});
                }
            }
        },
    });
    function PostBack() {
        parent.PostBack();
        closeSelf();
    }
</script>