tianheng-ui 0.0.56 → 0.0.57

package/packages/formMaking/Container.vue

@@ -1,591 +0,0 @@
-<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>