tianheng-ui 0.0.47 → 0.0.50

package/packages/formMaking/Container.vue

@@ -1,601 +1,591 @@
-<template>
-  <div class="fm-style">
-    <el-container class="fm2-container">
-      <el-main class="fm2-main">
-        <el-container>
-          <el-aside width="250px">
-            <div class="components-list">
-              <template v-if="basicFields.length">
-                <div class="widget-cate">
-                  基础字段
-                </div>
-                <draggable
-                  tag="ul"
-                  :list="basicComponents"
-                  v-bind="{
-                    group: { name: 'people', pull: 'clone', put: false },
-                    sort: false,
-                    ghostClass: 'ghost'
-                  }"
-                  @end="handleMoveEnd"
-                  @start="handleMoveStart"
-                  :move="handleMove"
-                >
-                  <template v-for="(item, index) in basicComponents">
-                    <li
-                      v-if="basicFields.indexOf(item.type) >= 0"
-                      class="form-edit-widget-label"
-                      :class="{ 'no-put': item.type == 'divider' }"
-                      :key="index"
-                    >
-                      <a>
-                        <i class="icon iconfont" :class="item.icon"></i>
-                        <span>{{ item.name }}</span>
-                      </a>
-                    </li>
-                  </template>
-                </draggable>
-              </template>
-              <template v-if="advanceFields.length">
-                <div class="widget-cate">
-                  高级字段
-                </div>
-                <draggable
-                  tag="ul"
-                  :list="advanceComponents"
-                  v-bind="{
-                    group: { name: 'people', pull: 'clone', put: false },
-                    sort: false,
-                    ghostClass: 'ghost'
-                  }"
-                  @end="handleMoveEnd"
-                  @start="handleMoveStart"
-                  :move="handleMove"
-                >
-                  <template v-for="(item, index) in advanceComponents">
-                    <li
-                      v-if="advanceFields.indexOf(item.type) >= 0"
-                      class="form-edit-widget-label"
-                      :class="{ 'no-put': item.type == 'table' }"
-                      :key="index"
-                    >
-                      <a>
-                        <i class="icon iconfont" :class="item.icon"></i>
-                        <span>{{ item.name }}</span>
-                      </a>
-                    </li>
-                  </template>
-                </draggable>
-              </template>
-
-              <template v-if="layoutFields.length">
-                <div class="widget-cate">
-                  布局字段
-                </div>
-                <draggable
-                  tag="ul"
-                  :list="layoutComponents"
-                  v-bind="{
-                    group: { name: 'people', pull: 'clone', put: false },
-                    sort: false,
-                    ghostClass: 'ghost'
-                  }"
-                  @end="handleMoveEnd"
-                  @start="handleMoveStart"
-                  :move="handleMove"
-                >
-                  <template v-for="(item, index) in layoutComponents">
-                    <li
-                      v-if="layoutFields.indexOf(item.type) >= 0"
-                      class="form-edit-widget-label no-put"
-                      :key="index"
-                    >
-                      <a>
-                        <i class="icon iconfont" :class="item.icon"></i>
-                        <span>{{ item.name }}</span>
-                      </a>
-                    </li>
-                  </template>
-                </draggable>
-              </template>
-            </div>
-          </el-aside>
-          <el-container class="center-container" direction="vertical">
-            <el-header class="btn-bar" style="height: 45px;">
-              <slot name="action"> </slot>
-              <el-button
-                v-if="upload"
-                type="text"
-                size="medium"
-                icon="el-icon-upload2"
-                @click="handleUpload"
-                >导入JSON</el-button
-              >
-              <el-button
-                v-if="clearable"
-                type="text"
-                size="medium"
-                icon="el-icon-delete"
-                @click="handleClear"
-                >清空</el-button
-              >
-              <el-button
-                v-if="preview"
-                type="text"
-                size="medium"
-                icon="el-icon-view"
-                @click="handlePreview"
-                >预览</el-button
-              >
-              <el-button
-                v-if="generateJson"
-                type="text"
-                size="medium"
-                icon="el-icon-tickets"
-                @click="handleGenerateJson"
-                >生成JSON</el-button
-              >
-              <el-button
-                v-if="generateCode"
-                type="text"
-                size="medium"
-                icon="el-icon-document"
-                @click="handleGenerateCode"
-                >生成代码</el-button
-              >
-            </el-header>
-            <el-main :class="{ 'widget-empty': widgetForm.list.length == 0 }">
-              <widget-form
-                v-if="!resetJson"
-                ref="widgetForm"
-                :data="widgetForm"
-                :select.sync="widgetFormSelect"
-              ></widget-form>
-            </el-main>
-          </el-container>
-
-          <el-aside class="widget-config-container">
-            <el-container>
-              <el-header height="45px">
-                <div
-                  class="config-tab"
-                  :class="{ active: configTab == 'widget' }"
-                  @click="handleConfigSelect('widget')"
-                >
-                  字段属性
-                </div>
-                <div
-                  class="config-tab"
-                  :class="{ active: configTab == 'form' }"
-                  @click="handleConfigSelect('form')"
-                >
-                  表单属性
-                </div>
-              </el-header>
-              <el-main class="config-content">
-                <widget-config
-                  v-show="configTab == 'widget'"
-                  :data="widgetFormSelect"
-                  :remoteApis="remoteApis"
-                ></widget-config>
-                <form-config
-                  v-show="configTab == 'form'"
-                  :data="widgetForm.config"
-                ></form-config>
-              </el-main>
-            </el-container>
-          </el-aside>
-
-          <cus-dialog
-            :visible="previewVisible"
-            @on-close="previewVisible = false"
-            ref="widgetPreview"
-            width="1000px"
-            form
-          >
-            <generate-form
-              insite="true"
-              @on-change="handleDataChange"
-              v-if="previewVisible"
-              :data="widgetForm"
-              :value="widgetModels"
-              :remote="remoteFuncs"
-              ref="generateForm"
-            >
-              <template v-slot:blank="scope">
-                Width
-                <el-input
-                  v-model="scope.model.blank.width"
-                  style="width: 100px"
-                ></el-input>
-                Height
-                <el-input
-                  v-model="scope.model.blank.height"
-                  style="width: 100px"
-                ></el-input>
-              </template>
-            </generate-form>
-
-            <template slot="action">
-              <el-button type="primary" @click="handleTest">获取数据</el-button>
-              <el-button @click="handleReset">重置</el-button>
-            </template>
-          </cus-dialog>
-
-          <cus-dialog
-            :visible="uploadVisible"
-            @on-close="uploadVisible = false"
-            @on-submit="handleUploadJson"
-            ref="uploadJson"
-            width="800px"
-            form
-          >
-            <el-alert
-              type="info"
-              title="JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可"
-            ></el-alert>
-            <div id="uploadeditor" style="height: 400px;width: 100%;">
-              {{ jsonEg }}
-            </div>
-          </cus-dialog>
-
-          <cus-dialog
-            :visible="jsonVisible"
-            @on-close="jsonVisible = false"
-            ref="jsonPreview"
-            width="800px"
-            form
-          >
-            <div id="jsoneditor" style="height: 400px;width: 100%;">
-              {{ jsonTemplate }}
-            </div>
-
-            <template slot="action">
-              <el-button
-                type="primary"
-                class="json-btn"
-                :data-clipboard-text="jsonCopyValue"
-                >复制数据</el-button
-              >
-            </template>
-          </cus-dialog>
-
-          <cus-dialog
-            :visible="codeVisible"
-            @on-close="codeVisible = false"
-            ref="codePreview"
-            width="800px"
-            form
-            :action="false"
-          >
-            <!-- <div id="codeeditor" style="height: 500px; width: 100%;">{{htmlTemplate}}</div> -->
-            <el-tabs
-              type="border-card"
-              style="box-shadow: none;"
-              v-model="codeActiveName"
-            >
-              <el-tab-pane label="Vue Component" name="vue">
-                <div id="vuecodeeditor" style="height: 500px; width: 100%;">
-                  {{ vueTemplate }}
-                </div>
-              </el-tab-pane>
-              <el-tab-pane label="HTML" name="html">
-                <div id="codeeditor" style="height: 500px; width: 100%;">
-                  {{ htmlTemplate }}
-                </div>
-              </el-tab-pane>
-            </el-tabs>
-          </cus-dialog>
-        </el-container>
-      </el-main>
-      <!-- <el-footer height="30px" style="font-weight: 600;"
-        >Powered by
-        <a target="_blank" href="https://github.com/GavinZhuLei/vue-form-making"
-          >vue-form-making</a
-        ></el-footer
-      > -->
-    </el-container>
-  </div>
-</template>
-
-<script>
-import ace from "ace-builds";
-import "ace-builds/src-min-noconflict/mode-json";
-import "ace-builds/src-min-noconflict/mode-html";
-import htmlWorkerUrl from  "file-loader!ace-builds/src-min-noconflict/worker-html";
-ace.config.setModuleUrl("ace/mode/html_worker", htmlWorkerUrl);
-import jsonWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-json";
-ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl);
-
-import Draggable from "vuedraggable";
-import Clipboard from "clipboard";
-import WidgetConfig from "./WidgetConfig";
-import FormConfig from "./FormConfig";
-import WidgetForm from "./WidgetForm";
-import CusDialog from "./CusDialog";
-import GenerateForm from "./GenerateForm";
-import {
-  basicComponents,
-  layoutComponents,
-  advanceComponents
-} from "./componentsConfig.js";
-// import {loadJs, loadCss} from '../util/index.js'
-import request from "./util/request";
-import generateCode from "./generateCode.js";
-
-export default {
-  name: "fm-making-form",
-  components: {
-    Draggable,
-    WidgetConfig,
-    FormConfig,
-    WidgetForm,
-    CusDialog,
-    GenerateForm
-  },
-  props: {
-    preview: {
-      type: Boolean,
-      default: false
-    },
-    generateCode: {
-      type: Boolean,
-      default: false
-    },
-    generateJson: {
-      type: Boolean,
-      default: false
-    },
-    upload: {
-      type: Boolean,
-      default: false
-    },
-    clearable: {
-      type: Boolean,
-      default: false
-    },
-    basicFields: {
-      type: Array,
-      default: () => [
-        "input",
-        "textarea",
-        "number",
-        "radio",
-        "checkbox",
-        "time",
-        "date",
-        "rate",
-        "color",
-        "select",
-        "switch",
-        "slider",
-        "text"
-      ]
-    },
-    advanceFields: {
-      type: Array,
-      default: () => ["blank", "imgupload", "editor", "cascader"]
-    },
-    layoutFields: {
-      type: Array,
-      default: () => ["grid"]
-    },
-    remoteApis: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      basicComponents,
-      layoutComponents,
-      advanceComponents,
-      resetJson: false,
-      widgetForm: {
-        list: [],
-        config: {
-          labelWidth: 100,
-          labelPosition: "right",
-          size: "small"
-        }
-      },
-      configTab: "widget",
-      widgetFormSelect: null,
-      previewVisible: false,
-      jsonVisible: false,
-      codeVisible: false,
-      uploadVisible: false,
-      remoteFuncs: {
-        func_test(resolve) {
-          setTimeout(() => {
-            const options = [
-              { id: "1", name: "1111" },
-              { id: "2", name: "2222" },
-              { id: "3", name: "3333" }
-            ];
-
-            resolve(options);
-          }, 2000);
-        },
-        funcGetToken(resolve) {
-          request
-            .get("http://tools-server.making.link/api/uptoken")
-            .then(res => {
-              resolve(res.uptoken);
-            });
-        },
-        upload_callback(response, file, fileList) {
-          console.log("callback", response, file, fileList);
-        }
-      },
-      widgetModels: {},
-      blank: "",
-      htmlTemplate: "",
-      vueTemplate: "",
-      jsonTemplate: "",
-      uploadEditor: null,
-      jsonCopyValue: "",
-      jsonClipboard: null,
-      jsonEg: `
-{
-  "list": [],
-  "config": {
-    "labelWidth": 100,
-    "labelPosition": "top",
-    "size": "small"
-  }
-}`,
-      codeActiveName: "vue"
-    };
-  },
-  mounted() {
-    // this._loadComponents();
-  },
-  methods: {
-    // _loadComponents() {
-    //   this.basicComponents = this.basicComponents.map(item => {
-    //     return {
-    //       ...item,
-    //       name: this.$t(`fm.components.fields.${item.type}`)
-    //     };
-    //   });
-    //   this.advanceComponents = this.advanceComponents.map(item => {
-    //     return {
-    //       ...item,
-    //       name: this.$t(`fm.components.fields.${item.type}`)
-    //     };
-    //   });
-    //   this.layoutComponents = this.layoutComponents.map(item => {
-    //     return {
-    //       ...item,
-    //       name: this.$t(`fm.components.fields.${item.type}`)
-    //     };
-    //   });
-    // },
-    handleGoGithub() {
-      window.location.href = "https://github.com/GavinZhuLei/vue-form-making";
-    },
-    handleConfigSelect(value) {
-      this.configTab = value;
-    },
-    handleMoveEnd(evt) {
-      // console.log("end", evt);
-    },
-    handleMoveStart({ oldIndex }) {
-      // console.log("start", oldIndex, this.basicComponents);
-    },
-    handleMove() {
-      return true;
-    },
-    handlePreview() {
-      // console.log(this.widgetForm);
-      this.previewVisible = true;
-    },
-    handleTest() {
-      this.$refs.generateForm
-        .getData()
-        .then(data => {
-          this.$alert(data, "").catch(e => {});
-          this.$refs.widgetPreview.end();
-        })
-        .catch(e => {
-          this.$refs.widgetPreview.end();
-        });
-    },
-    handleReset() {
-      this.$refs.generateForm.reset();
-    },
-    handleGenerateJson() {
-      this.jsonVisible = true;
-      this.jsonTemplate = this.widgetForm;
-      this.$nextTick(() => {
-        const editor = ace.edit("jsoneditor");
-        editor.session.setMode("ace/mode/json");
-
-        if (!this.jsonClipboard) {
-          this.jsonClipboard = new Clipboard(".json-btn");
-          this.jsonClipboard.on("success", e => {
-            this.$message.success("复制成功");
-          });
-        }
-        this.jsonCopyValue = JSON.stringify(this.widgetForm);
-      });
-    },
-    handleGenerateCode() {
-      this.codeVisible = true;
-      this.htmlTemplate = generateCode(JSON.stringify(this.widgetForm), "html");
-      this.vueTemplate = generateCode(JSON.stringify(this.widgetForm), "vue");
-      this.$nextTick(() => {
-        const editor = ace.edit("codeeditor");
-        editor.session.setMode("ace/mode/html");
-
-        const vueeditor = ace.edit("vuecodeeditor");
-        vueeditor.session.setMode("ace/mode/html");
-      });
-    },
-    handleUpload() {
-      this.uploadVisible = true;
-      this.$nextTick(() => {
-        this.uploadEditor = ace.edit("uploadeditor");
-        this.uploadEditor.session.setMode("ace/mode/json");
-      });
-    },
-    handleUploadJson() {
-      try {
-        this.setJSON(JSON.parse(this.uploadEditor.getValue()));
-        this.uploadVisible = false;
-      } catch (e) {
-        this.$message.error(e.message);
-        this.$refs.uploadJson.end();
-      }
-    },
-    handleClear() {
-      this.widgetForm = {
-        list: [],
-        config: {
-          labelWidth: 100,
-          labelPosition: "right",
-          size: "small",
-          customClass: ""
-        }
-      };
-
-      this.widgetFormSelect = {};
-    },
-    clear() {
-      this.handleClear();
-    },
-    getJSON() {
-      return this.widgetForm;
-    },
-    getHtml() {
-      return generateCode(JSON.stringify(this.widgetForm));
-    },
-    setJSON(json) {
-      this.widgetForm = json;
-
-      if (json.list.length > 0) {
-        this.widgetFormSelect = json.list[0];
-      }
-    },
-    handleInput(val) {
-      // console.log(val);
-      this.blank = val;
-    },
-    handleDataChange(field, value, data) {
-      // console.log(field, value, data);
-    }
-  },
-  watch: {
-    widgetForm: {
-      deep: true,
-      handler: function(val) {
-        // console.log(this.$refs.widgetForm);
-      }
-    },
-    $lang: function(val) {
-      this._loadComponents();
-    }
-  }
-};
-</script>
+<template>
+  <div class="fm-style">
+    <el-container class="fm2-container">
+      <el-main class="fm2-main">
+        <el-container>
+          <el-aside width="250px">
+            <div class="components-list">
+              <template v-if="basicFields.length">
+                <div class="widget-cate">
+                  基础字段
+                </div>
+                <draggable
+                  tag="ul"
+                  :list="basicComponents"
+                  v-bind="{
+                    group: { name: 'people', pull: 'clone', put: false },
+                    sort: false,
+                    ghostClass: 'ghost'
+                  }"
+                  @end="handleMoveEnd"
+                  @start="handleMoveStart"
+                  :move="handleMove"
+                >
+                  <template v-for="(item, index) in basicComponents">
+                    <li
+                      v-if="basicFields.indexOf(item.type) >= 0"
+                      class="form-edit-widget-label"
+                      :class="{ 'no-put': item.type == 'divider' }"
+                      :key="index"
+                    >
+                      <a>
+                        <i class="icon iconfont" :class="item.icon"></i>
+                        <span>{{ item.name }}</span>
+                      </a>
+                    </li>
+                  </template>
+                </draggable>
+              </template>
+              <template v-if="advanceFields.length">
+                <div class="widget-cate">
+                  高级字段
+                </div>
+                <draggable
+                  tag="ul"
+                  :list="advanceComponents"
+                  v-bind="{
+                    group: { name: 'people', pull: 'clone', put: false },
+                    sort: false,
+                    ghostClass: 'ghost'
+                  }"
+                  @end="handleMoveEnd"
+                  @start="handleMoveStart"
+                  :move="handleMove"
+                >
+                  <template v-for="(item, index) in advanceComponents">
+                    <li
+                      v-if="advanceFields.indexOf(item.type) >= 0"
+                      class="form-edit-widget-label"
+                      :class="{ 'no-put': item.type == 'table' }"
+                      :key="index"
+                    >
+                      <a>
+                        <i class="icon iconfont" :class="item.icon"></i>
+                        <span>{{ item.name }}</span>
+                      </a>
+                    </li>
+                  </template>
+                </draggable>
+              </template>
+
+              <template v-if="layoutFields.length">
+                <div class="widget-cate">
+                  布局字段
+                </div>
+                <draggable
+                  tag="ul"
+                  :list="layoutComponents"
+                  v-bind="{
+                    group: { name: 'people', pull: 'clone', put: false },
+                    sort: false,
+                    ghostClass: 'ghost'
+                  }"
+                >
+                  <template v-for="(item, index) in layoutComponents">
+                    <li
+                      v-if="layoutFields.indexOf(item.type) >= 0"
+                      class="form-edit-widget-label no-put"
+                      :key="index"
+                    >
+                      <a>
+                        <i class="icon iconfont" :class="item.icon"></i>
+                        <span>{{ item.name }}</span>
+                      </a>
+                    </li>
+                  </template>
+                </draggable>
+              </template>
+            </div>
+          </el-aside>
+          <el-container class="center-container" direction="vertical">
+            <el-header class="btn-bar" style="height: 45px;">
+              <slot name="action"> </slot>
+              <el-button
+                v-if="upload"
+                type="text"
+                size="medium"
+                icon="el-icon-upload2"
+                @click="handleUpload"
+                >导入JSON</el-button
+              >
+              <el-button
+                v-if="clearable"
+                type="text"
+                size="medium"
+                icon="el-icon-delete"
+                @click="handleClear"
+                >清空</el-button
+              >
+              <el-button
+                v-if="preview"
+                type="text"
+                size="medium"
+                icon="el-icon-view"
+                @click="handlePreview"
+                >预览</el-button
+              >
+              <el-button
+                v-if="generateJson"
+                type="text"
+                size="medium"
+                icon="el-icon-tickets"
+                @click="handleGenerateJson"
+                >生成JSON</el-button
+              >
+              <el-button
+                v-if="generateCode"
+                type="text"
+                size="medium"
+                icon="el-icon-document"
+                @click="handleGenerateCode"
+                >生成代码</el-button
+              >
+            </el-header>
+            <el-main :class="{ 'widget-empty': widgetForm.list.length == 0 }">
+              <widget-form
+                v-if="!resetJson"
+                ref="widgetForm"
+                :data="widgetForm"
+                :select.sync="widgetFormSelect"
+              >
+              </widget-form>
+            </el-main>
+          </el-container>
+
+          <el-aside class="widget-config-container">
+            <el-container>
+              <el-header height="45px">
+                <div
+                  class="config-tab"
+                  :class="{ active: configTab == 'widget' }"
+                  @click="handleConfigSelect('widget')"
+                >
+                  字段属性
+                </div>
+                <div
+                  class="config-tab"
+                  :class="{ active: configTab == 'form' }"
+                  @click="handleConfigSelect('form')"
+                >
+                  表单属性
+                </div>
+              </el-header>
+              <el-main class="config-content">
+                <widget-config
+                  v-show="configTab == 'widget'"
+                  :data="widgetFormSelect"
+                  :remoteApis="remoteApis"
+                ></widget-config>
+                <form-config
+                  v-show="configTab == 'form'"
+                  :data="widgetForm.config"
+                ></form-config>
+              </el-main>
+            </el-container>
+          </el-aside>
+
+          <cus-dialog
+            :visible="previewVisible"
+            @on-close="previewVisible = false"
+            ref="widgetPreview"
+            width="1000px"
+            form
+          >
+            <generate-form
+              insite="true"
+              @on-change="handleDataChange"
+              v-if="previewVisible"
+              :data="widgetForm"
+              :value="widgetModels"
+              :remote="remoteFuncs"
+              :slotKeys="slotKeys"
+              ref="generateForm"
+            >
+              <template v-for="name in slotKeys" :slot="name">
+                <slot :name="name" />
+              </template>
+            </generate-form>
+
+            <template slot="action">
+              <el-button type="primary" @click="handleTest">获取数据</el-button>
+              <el-button @click="handleReset">重置</el-button>
+            </template>
+          </cus-dialog>
+
+          <cus-dialog
+            :visible="uploadVisible"
+            @on-close="uploadVisible = false"
+            @on-submit="handleUploadJson"
+            ref="uploadJson"
+            width="800px"
+            form
+          >
+            <el-alert
+              type="info"
+              title="JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可"
+            ></el-alert>
+            <div id="uploadeditor" style="height: 400px;width: 100%;">
+              {{ jsonEg }}
+            </div>
+          </cus-dialog>
+
+          <cus-dialog
+            :visible="jsonVisible"
+            @on-close="jsonVisible = false"
+            ref="jsonPreview"
+            width="800px"
+            form
+          >
+            <div id="jsoneditor" style="height: 400px;width: 100%;">
+              {{ jsonTemplate }}
+            </div>
+
+            <template slot="action">
+              <el-button
+                type="primary"
+                class="json-btn"
+                :data-clipboard-text="jsonCopyValue"
+                >复制数据</el-button
+              >
+            </template>
+          </cus-dialog>
+
+          <cus-dialog
+            :visible="codeVisible"
+            @on-close="codeVisible = false"
+            ref="codePreview"
+            width="800px"
+            form
+            :action="false"
+          >
+            <!-- <div id="codeeditor" style="height: 500px; width: 100%;">{{htmlTemplate}}</div> -->
+            <el-tabs
+              type="border-card"
+              style="box-shadow: none;"
+              v-model="codeActiveName"
+            >
+              <el-tab-pane label="Vue Component" name="vue">
+                <div id="vuecodeeditor" style="height: 500px; width: 100%;">
+                  {{ vueTemplate }}
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="HTML" name="html">
+                <div id="codeeditor" style="height: 500px; width: 100%;">
+                  {{ htmlTemplate }}
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+          </cus-dialog>
+        </el-container>
+      </el-main>
+      <!-- <el-footer height="30px" style="font-weight: 600;"
+        >Powered by
+        <a target="_blank" href="https://github.com/GavinZhuLei/vue-form-making"
+          >vue-form-making</a
+        ></el-footer
+      > -->
+    </el-container>
+  </div>
+</template>
+
+<script>
+import ace from "ace-builds";
+import "ace-builds/src-min-noconflict/mode-json";
+import "ace-builds/src-min-noconflict/mode-html";
+import htmlWorkerUrl from "file-loader!ace-builds/src-min-noconflict/worker-html";
+ace.config.setModuleUrl("ace/mode/html_worker", htmlWorkerUrl);
+import jsonWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-json";
+ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl);
+
+import Draggable from "vuedraggable";
+import Clipboard from "clipboard";
+import WidgetConfig from "./WidgetConfig";
+import FormConfig from "./FormConfig";
+import WidgetForm from "./WidgetForm";
+import CusDialog from "./CusDialog";
+import GenerateForm from "./GenerateForm";
+import {
+  basicComponents,
+  advanceComponents,
+  layoutComponents
+} from "./componentsConfig.js";
+// import {loadJs, loadCss} from '../util/index.js'
+import request from "./util/request";
+import generateCode from "./generateCode.js";
+
+export default {
+  name: "fm-making-form",
+  components: {
+    Draggable,
+    WidgetConfig,
+    FormConfig,
+    WidgetForm,
+    CusDialog,
+    GenerateForm
+  },
+  props: {
+    preview: {
+      type: Boolean,
+      default: false
+    },
+    generateCode: {
+      type: Boolean,
+      default: false
+    },
+    generateJson: {
+      type: Boolean,
+      default: false
+    },
+    upload: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    basicFields: {
+      type: Array,
+      default: () => [
+        "input",
+        "textarea",
+        "number",
+        "radio",
+        "checkbox",
+        "time",
+        "date",
+        "rate",
+        "color",
+        "select",
+        "switch",
+        "slider",
+        "text",
+        "button"
+      ]
+    },
+    advanceFields: {
+      type: Array,
+      default: () => ["blank", "imgupload", "editor", "cascader", "table"]
+    },
+    layoutFields: {
+      type: Array,
+      default: () => ["grid", "tabs", "divider"]
+    },
+    remoteApis: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      basicComponents,
+      layoutComponents,
+      advanceComponents,
+      resetJson: false,
+      widgetForm: {
+        list: [],
+        config: {
+          labelWidth: 100,
+          labelPosition: "right",
+          size: "small"
+        }
+      },
+      configTab: "widget",
+      widgetFormSelect: null,
+      previewVisible: false,
+      jsonVisible: false,
+      codeVisible: false,
+      uploadVisible: false,
+      remoteFuncs: {
+        func_test(resolve) {
+          setTimeout(() => {
+            const options = [
+              { id: "1", name: "1111" },
+              { id: "2", name: "2222" },
+              { id: "3", name: "3333" }
+            ];
+
+            resolve(options);
+          }, 2000);
+        },
+        funcGetToken(resolve) {
+          request
+            .get("http://tools-server.making.link/api/uptoken")
+            .then(res => {
+              resolve(res.uptoken);
+            });
+        },
+        upload_callback(response, file, fileList) {
+          console.log("callback", response, file, fileList);
+        }
+      },
+      widgetModels: { table: [{ name: "这是" }] },
+      blank: "",
+      htmlTemplate: "",
+      vueTemplate: "",
+      jsonTemplate: "",
+      uploadEditor: null,
+      jsonCopyValue: "",
+      jsonClipboard: null,
+      jsonEg: `
+{
+  "list": [],
+  "config": {
+    "labelWidth": 100,
+    "labelPosition": "top",
+    "size": "small"
+  }
+}`,
+      codeActiveName: "vue",
+      slotKeys: []
+    };
+  },
+  mounted() {
+    // this._loadComponents();
+  },
+  methods: {
+    // _loadComponents() {
+    //   this.basicComponents = this.basicComponents.map(item => {
+    //     return {
+    //       ...item,
+    //       name: this.$t(`fm.components.fields.${item.type}`)
+    //     };
+    //   });
+    //   this.advanceComponents = this.advanceComponents.map(item => {
+    //     return {
+    //       ...item,
+    //       name: this.$t(`fm.components.fields.${item.type}`)
+    //     };
+    //   });
+    //   this.layoutComponents = this.layoutComponents.map(item => {
+    //     return {
+    //       ...item,
+    //       name: this.$t(`fm.components.fields.${item.type}`)
+    //     };
+    //   });
+    // },
+    handleConfigSelect(value) {
+      this.configTab = value;
+    },
+    handleMoveEnd(evt) {
+      // console.log("end", evt);
+    },
+    handleMoveStart({ oldIndex }) {
+      // console.log("start", oldIndex, this.basicComponents);
+    },
+    handleMove() {
+      return true;
+    },
+    handlePreview() {
+      // console.log(this.widgetForm);
+      this.slotKeys = Object.keys(this.$slots);
+      this.previewVisible = true;
+    },
+    handleTest() {
+      this.$refs.generateForm
+        .getData()
+        .then(data => {
+          this.$alert(data, "").catch(e => {});
+          this.$refs.widgetPreview.end();
+        })
+        .catch(e => {
+          this.$refs.widgetPreview.end();
+        });
+    },
+    handleReset() {
+      this.$refs.generateForm.reset();
+    },
+    handleGenerateJson() {
+      this.jsonVisible = true;
+      this.jsonTemplate = this.widgetForm;
+      this.$nextTick(() => {
+        const editor = ace.edit("jsoneditor");
+        editor.session.setMode("ace/mode/json");
+
+        if (!this.jsonClipboard) {
+          this.jsonClipboard = new Clipboard(".json-btn");
+          this.jsonClipboard.on("success", e => {
+            this.$message.success("复制成功");
+          });
+        }
+        this.jsonCopyValue = JSON.stringify(this.widgetForm);
+      });
+    },
+    handleGenerateCode() {
+      this.codeVisible = true;
+      this.htmlTemplate = generateCode(JSON.stringify(this.widgetForm), "html");
+      this.vueTemplate = generateCode(JSON.stringify(this.widgetForm), "vue");
+      this.$nextTick(() => {
+        const editor = ace.edit("codeeditor");
+        editor.session.setMode("ace/mode/html");
+
+        const vueeditor = ace.edit("vuecodeeditor");
+        vueeditor.session.setMode("ace/mode/html");
+      });
+    },
+    handleUpload() {
+      this.uploadVisible = true;
+      this.$nextTick(() => {
+        this.uploadEditor = ace.edit("uploadeditor");
+        this.uploadEditor.session.setMode("ace/mode/json");
+      });
+    },
+    handleUploadJson() {
+      try {
+        this.setJSON(JSON.parse(this.uploadEditor.getValue()));
+        this.uploadVisible = false;
+      } catch (e) {
+        this.$message.error(e.message);
+        this.$refs.uploadJson.end();
+      }
+    },
+    handleClear() {
+      this.widgetForm = {
+        list: [],
+        config: {
+          labelWidth: 100,
+          labelPosition: "right",
+          size: "small",
+          customClass: ""
+        }
+      };
+
+      this.widgetFormSelect = {};
+    },
+    clear() {
+      this.handleClear();
+    },
+    getJSON() {
+      return this.widgetForm;
+    },
+    getHtml() {
+      return generateCode(JSON.stringify(this.widgetForm));
+    },
+    setJSON(json) {
+      this.widgetForm = json;
+
+      if (json.list.length > 0) {
+        this.widgetFormSelect = json.list[0];
+      }
+    },
+    handleInput(val) {
+      // console.log(val);
+      this.blank = val;
+    },
+    handleDataChange(field, value, data) {
+      // console.log(field, value, data);
+    }
+  },
+  watch: {
+    widgetForm: {
+      deep: true,
+      handler: function(val) {
+        // console.log(this.$refs.widgetForm);
+      }
+    },
+    $lang: function(val) {
+      this._loadComponents();
+    }
+  }
+};
+</script>