|
|
@@ -3,21 +3,127 @@
|
|
|
<k-form-design
|
|
|
:showHead="false"
|
|
|
@save="handleSave"
|
|
|
- @handleSave="asd"
|
|
|
+ @exportCode="handCode"
|
|
|
+ ref="kfd"
|
|
|
/>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+// 生成HTML的
|
|
|
+let codeHtmlFront = `<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+
|
|
|
+<head>
|
|
|
+ <title>表单设计</title>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <link rel="stylesheet" href="http://unpkg.com/k-form-design/lib/k-form-design.css">
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="app">
|
|
|
+ <k-form-build ref="KFB" @submit="handleSubmit" :value="jsonData"></k-form-build>
|
|
|
+ <button @click="getData">提交</button>
|
|
|
+ </div>
|
|
|
+ <script src="http://cdn.kcz66.com/vue.min.js"><\/script>
|
|
|
+ <script src="http://unpkg.com/k-form-design/lib/k-form-design.umd.min.js"><\/script>
|
|
|
+ <script>
|
|
|
+ let jsonData = `;
|
|
|
+
|
|
|
+ let codeHtmlLast = `
|
|
|
+ let vm = new Vue({
|
|
|
+ el: '.app',
|
|
|
+ data: {
|
|
|
+ jsonData
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleSubmit(p) {
|
|
|
+ // 通过表单提交按钮触发，获取promise对象
|
|
|
+ p().then(res => {
|
|
|
+ // 获取数据成功
|
|
|
+ alert(JSON.stringify(res))
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err, '校验失败')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ // 通过函数获取数据
|
|
|
+ this.$refs.KFB.getData().then(res => {
|
|
|
+ // 获取数据成功
|
|
|
+ alert(JSON.stringify(res))
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err, '校验失败')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ <\/script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>`
|
|
|
+import { addForm ,getForm,updateForm} from "@/api/dragform/form";
|
|
|
export default {
|
|
|
+ name:'fromModel',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fid: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
methods: {
|
|
|
handleSave(values) {
|
|
|
- alert("111");
|
|
|
- console.log(values);
|
|
|
+ // console.log(values);
|
|
|
+ var jsonData = JSON.parse(values);
|
|
|
+ //
|
|
|
+ var editorHtmlJson =
|
|
|
+ codeHtmlFront + JSON.stringify(jsonData) + codeHtmlLast;
|
|
|
+ console.log(this.fid)
|
|
|
+ if(!this.fid){
|
|
|
+ addForm({
|
|
|
+ dfName:'1',
|
|
|
+ dfNickname:'1',
|
|
|
+ dfVueTemplate:values,
|
|
|
+ dfHtmlTemplate:editorHtmlJson.toString(),
|
|
|
+ dfFormSql:'',
|
|
|
+ dfNodeId:'',
|
|
|
+ dfDatabase:'',
|
|
|
+ dfTableName:'',
|
|
|
+ }).then((res)=>{
|
|
|
+ console.log(res);
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ updateForm({
|
|
|
+ dfName:'1',
|
|
|
+ dfNickname:'1',
|
|
|
+ dfVueTemplate:values,
|
|
|
+ dfHtmlTemplate:editorHtmlJson.toString(),
|
|
|
+ dfFormSql:'',
|
|
|
+ dfNodeId:'',
|
|
|
+ dfDatabase:'',
|
|
|
+ dfTableName:'',
|
|
|
+ fId:this.fid
|
|
|
+ }).then((res)=>{
|
|
|
+ console.log(res)
|
|
|
+ this.$message(res.msg)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
- asd(row){
|
|
|
- console.log(row)
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const fid = this.$route.params.id;
|
|
|
+
|
|
|
+ if(!fid)return;
|
|
|
+ this.fid = fid;
|
|
|
+
|
|
|
+ getForm(fid).then(response => {
|
|
|
+ console.log(response)
|
|
|
+ const jsonData = JSON.parse(response.data.dfVueTemplate)
|
|
|
+ this.$refs.kfd.handleSetData(jsonData)
|
|
|
+ });
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
小宝贝