tianheng-ui 0.0.55 → 0.0.57

package/packages/FormMaking/Container.vue

@@ -0,0 +1,1907 @@
+<template>
+  <div class="fm-container">
+    <el-container class="container-box">
+      <el-main>
+        <el-container>
+          <!-- 左侧字段区 -->
+          <el-aside width="250px">
+            <div class="components-list">
+              <div v-if="basicFields.length">
+                <div class="widget-cate">基础字段</div>
+                <draggable
+                  tag="ul"
+                  :list="getBasicComponents"
+                  v-bind="{
+                    group: { name: 'people', pull: 'clone', put: false },
+                    sort: false,
+                    ghostClass: 'ghost'
+                  }"
+                >
+                  <li
+                    v-for="(item, index) in getBasicComponents"
+                    class="form-edit-widget-label"
+                    :class="{
+                      'no-put': item.type == 'divider',
+                      [item.type]: true
+                    }"
+                    :key="index"
+                  >
+                    <a>
+                      <i class="icon iconfont" :class="item.icon"></i>
+                      <span>{{ item.name }}</span>
+                    </a>
+                  </li>
+                </draggable>
+              </div>
+
+              <div v-if="advanceFields.length">
+                <div class="widget-cate">高级字段</div>
+                <draggable
+                  tag="ul"
+                  :list="getAdvanceComponents"
+                  v-bind="{
+                    group: { name: 'people', pull: 'clone', put: false },
+                    sort: false,
+                    ghostClass: 'ghost'
+                  }"
+                >
+                  <li
+                    v-for="(item, index) in getAdvanceComponents"
+                    class="form-edit-widget-label"
+                    :class="{
+                      'no-put': ['table', 'table_h5', 'tabs'].includes(
+                        item.type
+                      ),
+                      [item.type]: true
+                    }"
+                    :key="index"
+                  >
+                    <a>
+                      <i class="icon iconfont" :class="item.icon"></i>
+                      <span>{{ item.name }}</span>
+                    </a>
+                  </li>
+                </draggable>
+              </div>
+
+              <div v-if="layoutFields.length">
+                <div class="widget-cate">布局字段</div>
+                <draggable
+                  tag="ul"
+                  :list="getLayoutComponents"
+                  v-bind="{
+                    group: { name: 'people', pull: 'clone', put: false },
+                    sort: false,
+                    ghostClass: 'ghost'
+                  }"
+                >
+                  <li
+                    v-for="(item, index) in getLayoutComponents"
+                    class="form-edit-widget-label"
+                    :class="{
+                      'no-put': ['alliance'].includes(item.type),
+                      [item.type]: true
+                    }"
+                    :key="index"
+                  >
+                    <a>
+                      <i class="icon iconfont" :class="item.icon"></i>
+                      <span>{{ item.name }}</span>
+                    </a>
+                  </li>
+                </draggable>
+              </div>
+            </div>
+          </el-aside>
+
+          <!-- 中间视图区 -->
+          <el-container class="center-container" direction="vertical">
+            <!-- 操作区 -->
+            <el-header>
+              <div class="client">
+                <i
+                  class="el-icon-monitor"
+                  :class="{ active: client === 'monitor' }"
+                  @click="client = 'monitor'"
+                ></i>
+                <i
+                  class="el-icon-mobile"
+                  :class="{ active: client === 'mobile' }"
+                  @click="client = 'mobile'"
+                ></i>
+              </div>
+              <slot name="action"> </slot>
+              <el-upload
+                action
+                accept=".xlsx, .xls"
+                :auto-upload="false"
+                :show-file-list="false"
+                :on-change="onExcelFileChange"
+              >
+                <el-button
+                  v-if="upload"
+                  type="text"
+                  size="medium"
+                  icon="el-icon-upload2"
+                  >导入EXCEL
+                </el-button>
+              </el-upload>
+              <el-button
+                v-if="upload"
+                type="text"
+                size="medium"
+                icon="el-icon-upload2"
+                @click="dialog.import.visible = true"
+                >导入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>
+              <widget-form
+                ref="widgetForm"
+                :data="widgetFormData"
+                :select.sync="widgetFormSelect"
+                :client="client"
+              >
+              </widget-form>
+            </el-main>
+          </el-container>
+
+          <!-- 右侧配置区 -->
+          <el-aside class="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-container-content">
+                <widget-config
+                  v-show="configTab == 'widget'"
+                  :data="widgetFormSelect"
+                  :remoteApis="remoteApis"
+                  :config="widgetFormData.config"
+                >
+                </widget-config>
+                <form-config
+                  v-show="configTab == 'form'"
+                  :data="widgetFormData.config"
+                ></form-config>
+              </el-main>
+            </el-container>
+          </el-aside>
+
+          <!-- 导入JSON -->
+          <th-dialog
+            title="导入JSON"
+            :visible="dialog.import.visible"
+            @on-close="dialog.import.visible = false"
+            @on-affirm="handleUploadJson"
+            @on-fullscreen="$refs.valueCodeEditor.resize()"
+          >
+            <el-alert
+              type="info"
+              title="JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可"
+            ></el-alert>
+            <th-code-editor
+              v-model="dialog.import.value"
+              ref="valueCodeEditor"
+            ></th-code-editor>
+          </th-dialog>
+
+          <!-- 预览 -->
+          <th-dialog
+            title="预览"
+            :visible="dialog.preview.visible"
+            @on-close="dialog.preview.visible = false"
+          >
+            <generate-form
+              v-if="dialog.preview.visible"
+              :data="widgetFormData"
+              :value="widgetValue"
+              :remote="remoteFuncs"
+              :slotKeys="slotKeys"
+              :client="client"
+              insite="true"
+              @on-change="handleDataChange"
+              ref="generateForm"
+            >
+              <template v-for="name in slotKeys" :slot="name">
+                <slot :name="name" />
+              </template>
+            </generate-form>
+
+            <template slot="footer">
+              <el-button type="primary" @click="handleGetData"
+                >获取数据</el-button
+              >
+              <el-button @click="handleReset">重置</el-button>
+            </template>
+          </th-dialog>
+
+          <!-- 获取数据 -->
+          <th-dialog
+            title="获取数据"
+            :visible="dialog.data.visible"
+            @on-close="dialog.data.visible = false"
+            @on-fullscreen="$refs.dataCodeEditor.resize()"
+          >
+            <th-code-editor
+              v-model="dialog.data.value"
+              ref="dataCodeEditor"
+            ></th-code-editor>
+
+            <template slot="footer">
+              <el-button
+                type="primary"
+                class="json-btn"
+                :data-clipboard-text="dialog.data.valueCopy"
+                >复制数据</el-button
+              >
+            </template>
+          </th-dialog>
+
+          <!-- 生成json -->
+          <th-dialog
+            title="生成JSON"
+            :visible="dialog.config.visible"
+            @on-close="dialog.config.visible = false"
+            @on-fullscreen="$refs.jsonCodeEditor.resize()"
+          >
+            <th-code-editor
+              v-model="dialog.config.value"
+              ref="jsonCodeEditor"
+            ></th-code-editor>
+
+            <template slot="footer">
+              <el-button
+                type="primary"
+                class="json-btn"
+                :data-clipboard-text="dialog.config.valueCopy"
+                >复制数据</el-button
+              >
+            </template>
+          </th-dialog>
+
+          <!-- 生成代码 -->
+          <th-dialog
+            class="codeDialog"
+            title="生成代码"
+            :visible="dialog.code.visible"
+            :showFooter="false"
+            @on-close="dialog.code.visible = false"
+            @on-fullscreen="handleDialogFullscreen"
+          >
+            <el-tabs
+              type="border-card"
+              style="box-shadow: none;"
+              v-model="dialog.code.type"
+            >
+              <el-tab-pane label="Vue Component" name="vue">
+                <th-code-editor
+                  v-model="dialog.code.valueVue"
+                  language="html"
+                  readonly
+                  ref="vueCodeEditor"
+                ></th-code-editor>
+              </el-tab-pane>
+              <el-tab-pane label="HTML" name="html">
+                <th-code-editor
+                  v-model="dialog.code.valueHtml"
+                  language="html"
+                  readonly
+                  ref="htmlCodeEditor"
+                ></th-code-editor>
+              </el-tab-pane>
+            </el-tabs>
+          </th-dialog>
+        </el-container>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import Draggable from "vuedraggable";
+import Clipboard from "clipboard";
+import WidgetConfig from "./WidgetConfig";
+import FormConfig from "./FormConfig";
+import WidgetForm from "./WidgetForm";
+import GenerateForm from "./GenerateForm";
+import ThDialog from "ui/dialog/index.vue";
+import ThCodeEditor from "ui/codeEditor/index.vue";
+import {
+  basicComponents,
+  advanceComponents,
+  layoutComponents,
+  baseConfig
+} from "./custom/config";
+import request from "./util/request";
+import generateCode from "./util/generateCode.js";
+import * as XLSX from 'xlsx/xlsx.mjs'
+
+export default {
+  name: "th-making-form",
+  components: {
+    Draggable,
+    WidgetConfig,
+    FormConfig,
+    WidgetForm,
+    GenerateForm,
+    ThDialog,
+    ThCodeEditor
+  },
+  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",
+        "cell",
+        "radio",
+        "checkbox",
+        "time",
+        "date",
+        "rate",
+        "number",
+        "color",
+        "select",
+        "switch",
+        "slider",
+        "text",
+        "button",
+        "filler",
+        "image",
+        "upload",
+        "editor",
+        "cascader"
+      ]
+    },
+    advanceFields: {
+      type: Array,
+      default: () => ["table", "table_h5", "tabs", "blank"]
+    },
+    layoutFields: {
+      type: Array,
+      default: () => ["grid", "alliance", "divider"]
+    },
+    remoteApis: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      basicComponents,
+      layoutComponents,
+      advanceComponents,
+      widgetFormSelect: null,
+      widgetFormData: {
+        list: [],
+        config: baseConfig
+      },
+      widgetValue: {},
+      configTab: "widget",
+      client: "monitor",
+      dialog: {
+        import: { visible: false, value: "" },
+        preview: { visible: false, value: "" },
+        data: { visible: false, value: "", valueCopy: "" },
+        config: { visible: false, value: "", valueCopy: "" },
+        code: { visible: false, valueHtml: "", valueVue: "", type: "vue" }
+      },
+      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);
+        }
+      },
+      jsonClipboard: null,
+      slotKeys: []
+    };
+  },
+  computed: {
+    getBasicComponents() {
+      const list = this.basicComponents.filter(e => {
+        return this.basicFields.includes(e.type);
+      });
+      return list;
+    },
+    getAdvanceComponents() {
+      const list = this.advanceComponents.filter(e => {
+        return this.advanceFields.includes(e.type);
+      });
+      return list;
+    },
+    getLayoutComponents() {
+      const list = this.layoutComponents.filter(e => {
+        return this.layoutFields.includes(e.type);
+      });
+      return list;
+    }
+  },
+  mounted() {
+    this.dialog.import.value = JSON.stringify(
+      {
+        list: [
+          {
+            name: "文字",
+            type: "text",
+            icon: "icon-wenzishezhi-",
+            options: {
+              width: "100%",
+              height: "",
+              labelWidth: 100,
+              isLabelWidth: false,
+              defaultValue: "<h1>客户信息登记表</h1>",
+              customClass: "",
+              textAlign: "center",
+              hidden: false,
+              hideLabel: true
+            },
+            key: "1667436175000_53693",
+            model: "title",
+            rules: []
+          },
+          {
+            name: "栅格布局",
+            type: "grid",
+            icon: "icon-grid-",
+            columns: [
+              {
+                span: 6,
+                list: [
+                  {
+                    name: "姓名",
+                    type: "input",
+                    icon: "icon-input",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      dataType: "string",
+                      pattern: "",
+                      placeholder: "",
+                      maxlength: -1,
+                      required: true,
+                      disabled: false,
+                      readonly: false,
+                      clearable: false,
+                      showWordLimit: false,
+                      showPassword: false,
+                      prefixIcon: "",
+                      suffixIcon: "",
+                      prepend: "",
+                      append: "",
+                      hidden: false,
+                      hideLabel: false
+                    },
+                    events: {
+                      onChange: "",
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667436225000_44507",
+                    model: "name",
+                    rules: [
+                      {
+                        type: "string",
+                        message: "姓名格式不正确"
+                      },
+                      {
+                        required: true,
+                        message: "姓名必须填写"
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                span: 6,
+                list: [
+                  {
+                    name: "性别",
+                    type: "select",
+                    icon: "icon-select",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      multiple: false,
+                      disabled: false,
+                      clearable: false,
+                      placeholder: "",
+                      required: true,
+                      showLabel: false,
+                      collapseTags: false,
+                      allowCreate: false,
+                      options: [
+                        {
+                          value: "男"
+                        },
+                        {
+                          value: "女"
+                        }
+                      ],
+                      remote: false,
+                      filterable: false,
+                      remoteOptions: [],
+                      props: {
+                        value: "value",
+                        label: "label"
+                      },
+                      remoteFunc: "",
+                      hidden: false,
+                      hideLabel: false
+                    },
+                    events: {
+                      onChange: "",
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667437660000_16321",
+                    model: "select_1667437660000_16321",
+                    rules: [
+                      {
+                        required: true,
+                        message: "性别必须填写"
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                span: 6,
+                list: [
+                  {
+                    name: "年龄",
+                    type: "input",
+                    icon: "icon-input",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      dataType: "integer",
+                      pattern: "",
+                      placeholder: "",
+                      maxlength: -1,
+                      required: true,
+                      disabled: false,
+                      readonly: false,
+                      clearable: false,
+                      showWordLimit: false,
+                      showPassword: false,
+                      prefixIcon: "",
+                      suffixIcon: "",
+                      prepend: "",
+                      append: "",
+                      hidden: false,
+                      hideLabel: false
+                    },
+                    events: {
+                      onChange: "",
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667436683000_52927",
+                    model: "input_1667436683000_52927",
+                    rules: [
+                      {
+                        type: "integer",
+                        message: "年龄格式不正确"
+                      },
+                      {
+                        required: true,
+                        message: "年龄必须填写"
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                span: 6,
+                list: [
+                  {
+                    name: "民族",
+                    type: "input",
+                    icon: "icon-input",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      dataType: "string",
+                      pattern: "",
+                      placeholder: "",
+                      maxlength: -1,
+                      required: false,
+                      disabled: false,
+                      readonly: false,
+                      clearable: false,
+                      showWordLimit: false,
+                      showPassword: false,
+                      prefixIcon: "",
+                      suffixIcon: "",
+                      prepend: "",
+                      append: "",
+                      hidden: false,
+                      hideLabel: false
+                    },
+                    events: {
+                      onChange: "",
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667436685000_14989",
+                    model: "input_1667436685000_14989",
+                    rules: [
+                      {
+                        type: "string",
+                        message: "民族格式不正确"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ],
+            options: {
+              gutter: 0,
+              justify: "start",
+              align: "top",
+              hideLabel: true
+            },
+            key: "1667436223000_412",
+            model: "base",
+            rules: []
+          },
+          {
+            name: "栅格布局",
+            type: "grid",
+            icon: "icon-grid-",
+            columns: [
+              {
+                span: 6,
+                list: [
+                  {
+                    name: "学历",
+                    type: "select",
+                    icon: "icon-select",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      multiple: false,
+                      disabled: false,
+                      clearable: false,
+                      placeholder: "",
+                      required: false,
+                      showLabel: false,
+                      collapseTags: false,
+                      allowCreate: false,
+                      options: [
+                        {
+                          value: "小学"
+                        },
+                        {
+                          value: "初中"
+                        },
+                        {
+                          value: "高中"
+                        },
+                        {
+                          value: "专科",
+                          label: "新选项4"
+                        },
+                        {
+                          value: "本科",
+                          label: "新选项5"
+                        },
+                        {
+                          value: "其他",
+                          label: "新选项6"
+                        }
+                      ],
+                      remote: false,
+                      filterable: false,
+                      remoteOptions: [],
+                      props: {
+                        value: "value",
+                        label: "label"
+                      },
+                      remoteFunc: "",
+                      hidden: false,
+                      hideLabel: false
+                    },
+                    events: {
+                      onChange: "",
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667437689000_69814",
+                    model: "select_1667437689000_69814",
+                    rules: []
+                  }
+                ]
+              },
+              {
+                span: 6,
+                list: [
+                  {
+                    name: "籍贯",
+                    type: "input",
+                    icon: "icon-input",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      dataType: "string",
+                      pattern: "",
+                      placeholder: "",
+                      maxlength: -1,
+                      required: false,
+                      disabled: false,
+                      readonly: false,
+                      clearable: false,
+                      showWordLimit: false,
+                      showPassword: false,
+                      prefixIcon: "",
+                      suffixIcon: "",
+                      prepend: "",
+                      append: "",
+                      hidden: false,
+                      hideLabel: false
+                    },
+                    events: {
+                      onChange: "",
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667436627000_48070",
+                    model: "input_1667436627000_48070",
+                    rules: []
+                  }
+                ]
+              },
+              {
+                span: 12,
+                list: [
+                  {
+                    name: "电子邮箱",
+                    type: "input",
+                    icon: "icon-input",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      dataType: "email",
+                      pattern: "",
+                      placeholder: "",
+                      maxlength: -1,
+                      required: false,
+                      disabled: false,
+                      readonly: false,
+                      clearable: false,
+                      showWordLimit: false,
+                      showPassword: false,
+                      prefixIcon: "",
+                      suffixIcon: "",
+                      prepend: "",
+                      append: "",
+                      hidden: false,
+                      hideLabel: false
+                    },
+                    events: {
+                      onChange: "",
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667436642000_85695",
+                    model: "input_1667436642000_85695",
+                    rules: [
+                      {
+                        type: "email",
+                        message: "电子邮箱格式不正确"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ],
+            options: {
+              gutter: 0,
+              justify: "start",
+              align: "top",
+              hideLabel: true
+            },
+            key: "1667436612000_92469",
+            model: "grid_1667436612000_92469",
+            rules: []
+          },
+          {
+            name: "栅格布局",
+            type: "grid",
+            icon: "icon-grid-",
+            columns: [
+              {
+                span: 12,
+                list: [
+                  {
+                    name: "身份证号",
+                    type: "input",
+                    icon: "icon-input",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      dataType: "string",
+                      pattern: "",
+                      placeholder: "",
+                      maxlength: -1,
+                      required: false,
+                      disabled: false,
+                      readonly: false,
+                      clearable: false,
+                      showWordLimit: false,
+                      showPassword: false,
+                      prefixIcon: "",
+                      suffixIcon: "",
+                      prepend: "",
+                      append: "",
+                      hidden: false,
+                      hideLabel: false
+                    },
+                    events: {
+                      onChange: "",
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667436654000_38448",
+                    model: "input_1667436654000_38448",
+                    rules: [
+                      {
+                        type: "string",
+                        message: "身份证号格式不正确"
+                      }
+                    ]
+                  },
+                  {
+                    name: "联系方式",
+                    type: "input",
+                    icon: "icon-input",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      dataType: "integer",
+                      pattern: "",
+                      placeholder: "",
+                      maxlength: -1,
+                      required: true,
+                      disabled: false,
+                      readonly: false,
+                      clearable: false,
+                      showWordLimit: false,
+                      showPassword: false,
+                      prefixIcon: "",
+                      suffixIcon: "",
+                      prepend: "",
+                      append: "",
+                      hidden: false,
+                      hideLabel: false
+                    },
+                    events: {
+                      onChange: "",
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667436747000_64182",
+                    model: "input_1667436747000_64182",
+                    rules: [
+                      {
+                        type: "integer",
+                        message: "联系方式格式不正确"
+                      },
+                      {
+                        required: true,
+                        message: "联系方式必须填写"
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                span: 12,
+                list: [
+                  {
+                    name: "其他证件号",
+                    type: "input",
+                    icon: "icon-input",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      dataType: "string",
+                      pattern: "",
+                      placeholder: "",
+                      maxlength: -1,
+                      required: false,
+                      disabled: false,
+                      readonly: false,
+                      clearable: false,
+                      showWordLimit: false,
+                      showPassword: false,
+                      prefixIcon: "",
+                      suffixIcon: "",
+                      prepend: "",
+                      append: "",
+                      hidden: false,
+                      hideLabel: false
+                    },
+                    events: {
+                      onChange: "",
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667436658000_28857",
+                    model: "input_1667436658000_28857",
+                    rules: []
+                  },
+                  {
+                    name: "家庭地址",
+                    type: "input",
+                    icon: "icon-input",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      dataType: "string",
+                      pattern: "",
+                      placeholder: "",
+                      maxlength: -1,
+                      required: false,
+                      disabled: false,
+                      readonly: false,
+                      clearable: false,
+                      showWordLimit: false,
+                      showPassword: false,
+                      prefixIcon: "",
+                      suffixIcon: "",
+                      prepend: "",
+                      append: "",
+                      hidden: false,
+                      hideLabel: false
+                    },
+                    events: {
+                      onChange: "",
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667436744000_71241",
+                    model: "input_1667436744000_71241",
+                    rules: []
+                  }
+                ]
+              }
+            ],
+            options: {
+              gutter: 0,
+              justify: "start",
+              align: "top",
+              hideLabel: true
+            },
+            key: "1667436651000_10428",
+            model: "grid_1667436651000_10428",
+            rules: []
+          },
+          {
+            name: "栅格布局",
+            type: "grid",
+            icon: "icon-grid-",
+            columns: [
+              {
+                span: 18,
+                list: [
+                  {
+                    name: "工作单位",
+                    type: "input",
+                    icon: "icon-input",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      dataType: "string",
+                      pattern: "",
+                      placeholder: "",
+                      maxlength: -1,
+                      required: false,
+                      disabled: false,
+                      readonly: false,
+                      clearable: false,
+                      showWordLimit: false,
+                      showPassword: false,
+                      prefixIcon: "",
+                      suffixIcon: "",
+                      prepend: "",
+                      append: "",
+                      hidden: false,
+                      hideLabel: false
+                    },
+                    events: {
+                      onChange: "",
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667436760000_10945",
+                    model: "input_1667436760000_10945",
+                    rules: [
+                      {
+                        type: "string",
+                        message: "工作单位格式不正确"
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                span: 6,
+                list: [
+                  {
+                    name: "是否在职",
+                    type: "select",
+                    icon: "icon-select",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      multiple: false,
+                      disabled: false,
+                      clearable: false,
+                      placeholder: "",
+                      required: true,
+                      showLabel: false,
+                      collapseTags: false,
+                      allowCreate: false,
+                      options: [
+                        {
+                          value: "在职"
+                        },
+                        {
+                          value: "离职"
+                        },
+                        {
+                          value: "其他"
+                        }
+                      ],
+                      remote: false,
+                      filterable: false,
+                      remoteOptions: [],
+                      props: {
+                        value: "value",
+                        label: "label"
+                      },
+                      remoteFunc: "",
+                      hidden: false,
+                      hideLabel: false
+                    },
+                    events: {
+                      onChange: 1667437911752,
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667437857000_3388",
+                    model: "select_1667437857000_3388",
+                    rules: [
+                      {
+                        required: true,
+                        message: "是否在职必须填写"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ],
+            options: {
+              gutter: 0,
+              justify: "start",
+              align: "top",
+              hideLabel: true
+            },
+            key: "1667436759000_9701",
+            model: "grid_1667436759000_9701",
+            rules: []
+          },
+          {
+            name: "栅格布局",
+            type: "grid",
+            icon: "icon-grid-",
+            columns: [
+              {
+                span: 12,
+                list: [
+                  {
+                    name: "职务",
+                    type: "input",
+                    icon: "icon-input",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      dataType: "string",
+                      pattern: "",
+                      placeholder: "",
+                      maxlength: -1,
+                      required: false,
+                      disabled: false,
+                      readonly: false,
+                      clearable: false,
+                      showWordLimit: false,
+                      showPassword: false,
+                      prefixIcon: "",
+                      suffixIcon: "",
+                      prepend: "",
+                      append: "",
+                      hidden: false,
+                      hideLabel: false
+                    },
+                    events: {
+                      onChange: "",
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667437859000_99021",
+                    model: "input_1667437859000_99021",
+                    rules: []
+                  }
+                ]
+              },
+              {
+                span: 12,
+                list: [
+                  {
+                    name: "入职时间",
+                    type: "date",
+                    icon: "icon-date",
+                    options: {
+                      width: "100%",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      defaultValue: "",
+                      readonly: false,
+                      disabled: false,
+                      editable: true,
+                      clearable: true,
+                      placeholder: "",
+                      startPlaceholder: "",
+                      endPlaceholder: "",
+                      type: "date",
+                      format: "yyyy-MM-dd",
+                      timestamp: false,
+                      required: false
+                    },
+                    events: {
+                      onChange: "",
+                      onFocus: "",
+                      onBlur: ""
+                    },
+                    key: "1667437845000_35857",
+                    model: "date_1667437845000_35857",
+                    rules: []
+                  }
+                ]
+              }
+            ],
+            options: {
+              gutter: 0,
+              justify: "start",
+              align: "top",
+              hideLabel: true
+            },
+            key: "1667437440000_79157",
+            model: "company2",
+            rules: []
+          },
+          {
+            name: "家庭常住人口",
+            type: "radio",
+            icon: "icon-radio-active",
+            options: {
+              width: "",
+              labelWidth: 100,
+              isLabelWidth: false,
+              inline: true,
+              defaultValue: "",
+              showLabel: false,
+              options: [
+                {
+                  value: "1-2人",
+                  label: "Option 1"
+                },
+                {
+                  value: "3-4人",
+                  label: "Option 2"
+                },
+                {
+                  value: "5-6人",
+                  label: "Option 3"
+                },
+                {
+                  value: "7人及以上",
+                  label: "新选项4"
+                }
+              ],
+              required: false,
+              remote: false,
+              remoteOptions: [],
+              props: {
+                value: "value",
+                label: "label"
+              },
+              remoteFunc: "",
+              disabled: false,
+              border: false,
+              buttonType: false
+            },
+            events: {
+              onChange: ""
+            },
+            key: "1667436801000_13265",
+            model: "radio_1667436801000_13265",
+            rules: []
+          },
+          {
+            name: "资产信息",
+            type: "divider",
+            icon: "icon-fengexian",
+            options: {
+              width: "100%",
+              defaultValue: "资产信息",
+              hidden: false,
+              labelWidth: 100,
+              isLabelWidth: false,
+              hideLabel: true,
+              contentPosition: "left",
+              remoteFunc: "",
+              remoteOption: "",
+              tableColumn: false
+            },
+            rules: [],
+            key: "1667436969000_57389",
+            model: "divider_1667436969000_57389"
+          },
+          {
+            name: "房屋资产",
+            type: "tabs",
+            icon: "icon-tabs",
+            tabs: [
+              {
+                label: "房屋资产",
+                value: "tab1",
+                list: [
+                  {
+                    name: "子表单",
+                    type: "table",
+                    icon: "icon-table",
+                    options: {
+                      height: "",
+                      defaultValue: "",
+                      customClass: "",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      dataBind: true,
+                      validatorCheck: false,
+                      validator: "",
+                      paging: false,
+                      pageSize: 5,
+                      remoteFunc: "",
+                      remoteOption: "",
+                      tableColumn: false,
+                      hidden: false,
+                      hideLabel: true,
+                      disabled: false,
+                      required: false,
+                      isAdd: true,
+                      isDelete: true,
+                      isSerial: true,
+                      border: false,
+                      stripe: false,
+                      showHeader: true,
+                      highlightCurrentRow: false
+                    },
+                    list: [
+                      {
+                        name: "小区名称",
+                        type: "input",
+                        icon: "icon-input",
+                        options: {
+                          width: "",
+                          labelWidth: 100,
+                          isLabelWidth: false,
+                          defaultValue: "",
+                          dataType: "string",
+                          pattern: "",
+                          placeholder: "",
+                          maxlength: -1,
+                          required: false,
+                          disabled: false,
+                          readonly: false,
+                          clearable: false,
+                          showWordLimit: false,
+                          showPassword: false,
+                          prefixIcon: "",
+                          suffixIcon: "",
+                          prepend: "",
+                          append: "",
+                          hidden: false,
+                          hideLabel: true
+                        },
+                        events: {
+                          onChange: "",
+                          onFocus: "",
+                          onBlur: ""
+                        },
+                        key: "1667437006000_97519",
+                        model: "input_1667437006000_97519",
+                        rules: [
+                          {
+                            type: "string",
+                            message: "小区名称格式不正确"
+                          }
+                        ]
+                      },
+                      {
+                        name: "房屋总价",
+                        type: "input",
+                        icon: "icon-input",
+                        options: {
+                          width: "100%",
+                          labelWidth: 100,
+                          isLabelWidth: false,
+                          defaultValue: "",
+                          dataType: "string",
+                          pattern: "",
+                          placeholder: "",
+                          maxlength: -1,
+                          required: false,
+                          disabled: false,
+                          readonly: false,
+                          clearable: false,
+                          showWordLimit: false,
+                          showPassword: false,
+                          prefixIcon: "",
+                          suffixIcon: "",
+                          prepend: "",
+                          append: "",
+                          hidden: false,
+                          hideLabel: true
+                        },
+                        events: {
+                          onChange: "",
+                          onFocus: "",
+                          onBlur: ""
+                        },
+                        key: "1667437037000_66597",
+                        model: "input_1667437037000_66597",
+                        rules: [
+                          {
+                            type: "string",
+                            message: "房屋总价格式不正确"
+                          }
+                        ]
+                      },
+                      {
+                        name: "房屋地址",
+                        type: "input",
+                        icon: "icon-input",
+                        options: {
+                          width: "",
+                          labelWidth: 100,
+                          isLabelWidth: false,
+                          defaultValue: "",
+                          dataType: "string",
+                          pattern: "",
+                          placeholder: "",
+                          maxlength: -1,
+                          required: false,
+                          disabled: false,
+                          readonly: false,
+                          clearable: false,
+                          showWordLimit: false,
+                          showPassword: false,
+                          prefixIcon: "",
+                          suffixIcon: "",
+                          prepend: "",
+                          append: "",
+                          hidden: false,
+                          hideLabel: true
+                        },
+                        events: {
+                          onChange: "",
+                          onFocus: "",
+                          onBlur: ""
+                        },
+                        key: "1667437009000_89874",
+                        model: "input_1667437009000_89874",
+                        rules: [
+                          {
+                            type: "string",
+                            message: "房屋地址格式不正确"
+                          }
+                        ]
+                      }
+                    ],
+                    key: "1667436993000_20896",
+                    model: "table_1667436993000_20896",
+                    rules: []
+                  }
+                ]
+              },
+              {
+                label: "车辆资产",
+                value: "tab2",
+                list: [
+                  {
+                    name: "子表单",
+                    type: "table",
+                    icon: "icon-table",
+                    options: {
+                      height: "",
+                      defaultValue: "",
+                      customClass: "",
+                      labelWidth: 100,
+                      isLabelWidth: false,
+                      dataBind: true,
+                      validatorCheck: false,
+                      validator: "",
+                      paging: false,
+                      pageSize: 5,
+                      remoteFunc: "",
+                      remoteOption: "",
+                      tableColumn: false,
+                      hidden: false,
+                      hideLabel: true,
+                      disabled: false,
+                      required: false,
+                      isAdd: true,
+                      isDelete: true,
+                      isSerial: true,
+                      border: false,
+                      stripe: false,
+                      showHeader: true,
+                      highlightCurrentRow: false
+                    },
+                    list: [
+                      {
+                        name: "车辆名称",
+                        type: "input",
+                        icon: "icon-input",
+                        options: {
+                          width: "",
+                          labelWidth: 100,
+                          isLabelWidth: false,
+                          defaultValue: "",
+                          dataType: "string",
+                          pattern: "",
+                          placeholder: "",
+                          maxlength: -1,
+                          required: false,
+                          disabled: false,
+                          readonly: false,
+                          clearable: false,
+                          showWordLimit: false,
+                          showPassword: false,
+                          prefixIcon: "",
+                          suffixIcon: "",
+                          prepend: "",
+                          append: "",
+                          hidden: false,
+                          hideLabel: true
+                        },
+                        events: {
+                          onChange: "",
+                          onFocus: "",
+                          onBlur: ""
+                        },
+                        key: "1667437284000_96215",
+                        model: "carName",
+                        rules: [
+                          {
+                            type: "string",
+                            message: "车辆名称格式不正确"
+                          }
+                        ]
+                      },
+                      {
+                        name: "车辆价格",
+                        type: "input",
+                        icon: "icon-input",
+                        options: {
+                          width: "100%",
+                          labelWidth: 100,
+                          isLabelWidth: false,
+                          defaultValue: "",
+                          dataType: "string",
+                          pattern: "",
+                          placeholder: "",
+                          maxlength: -1,
+                          required: false,
+                          disabled: false,
+                          readonly: false,
+                          clearable: false,
+                          showWordLimit: false,
+                          showPassword: false,
+                          prefixIcon: "",
+                          suffixIcon: "",
+                          prepend: "",
+                          append: "",
+                          hidden: false,
+                          hideLabel: true
+                        },
+                        events: {
+                          onChange: "",
+                          onFocus: "",
+                          onBlur: ""
+                        },
+                        key: "1667437294000_98905",
+                        model: "input_1667437294000_98905",
+                        rules: [
+                          {
+                            type: "string",
+                            message: "车辆价格格式不正确"
+                          }
+                        ]
+                      },
+                      {
+                        name: "购入日期",
+                        type: "date",
+                        icon: "icon-date",
+                        options: {
+                          width: "",
+                          labelWidth: 100,
+                          isLabelWidth: false,
+                          defaultValue: "",
+                          readonly: false,
+                          disabled: false,
+                          editable: true,
+                          clearable: true,
+                          placeholder: "",
+                          startPlaceholder: "",
+                          endPlaceholder: "",
+                          type: "date",
+                          format: "yyyy-MM-dd",
+                          timestamp: false,
+                          required: false,
+                          hideLabel: true
+                        },
+                        events: {
+                          onChange: "",
+                          onFocus: "",
+                          onBlur: ""
+                        },
+                        key: "1667437375000_47132",
+                        model: "date_1667437375000_47132",
+                        rules: []
+                      }
+                    ],
+                    key: "1667437282000_33973",
+                    model: "table_1667437282000_33973",
+                    rules: []
+                  }
+                ]
+              }
+            ],
+            options: {
+              defaultValue: "tab2",
+              type: "",
+              tabPosition: "top",
+              customClass: "",
+              hidden: false,
+              labelWidth: 100,
+              isLabelWidth: false,
+              hideLabel: true,
+              remote: false,
+              remoteFunc: "",
+              remoteOption: "",
+              tableColumn: false
+            },
+            rules: [],
+            key: "1667436941000_19317",
+            model: "tabs_1667436941000_19317"
+          }
+        ],
+        config: {
+          ui: "element",
+          title: "",
+          width: "",
+          labelWidth: 100,
+          labelPosition: "right",
+          labelSuffix: ":",
+          size: "small",
+          disabled: false,
+          hideLabel: false,
+          eventScript: [
+            {
+              key: "mounted",
+              name: "mounted",
+              func: ""
+            },
+            {
+              key: "refresh",
+              name: "refresh",
+              func: ""
+            },
+            {
+              key: 1667437911752,
+              name: "statusChange",
+              func:
+                "if(value === '在职') {\n  this.display([ 'company2' ])\n}else {\n  this.hide([ 'company2' ])\n}"
+            }
+          ]
+        }
+      },
+      null,
+      2
+    );
+  },
+  methods: {
+    // 读取excel file
+    readExcelFile(file){//文件读取
+      return new Promise(resolve => {
+        let reader = new FileReader();
+        reader.readAsBinaryString(file);//以二进制的方式读取
+        reader.onload = ev =>{
+          resolve(ev.target.result);
+        }
+      })
+    },
+    // excel 文件上传 改变监听
+    async onExcelFileChange(ev) {
+      let file = ev.raw;
+      if(!file){
+        console.log("文件打开失败")
+        return ;
+      }else{
+        let data = await this.readExcelFile(file);
+        //XLSX 文档 https://www.npmjs.com/package/xlsx
+        let workbook = XLSX.read(data,{ type: "binary"});//解析二进制格式数据
+        let worksheet = workbook.Sheets[workbook.SheetNames[0]];//获取第一个Sheet
+        let result = XLSX.utils.sheet_to_txt(worksheet);//cvs数据格式
+        console.log(result)
+
+        // let rowData = result.split('\n')
+        // if(rowData.length>0){
+        //   for(let i =0;i<rowData.length;i++){
+        //     let rowStr = rowData[i]
+        //     rowData[i] =  this.analysisExcelRow(rowStr)
+        //   }
+        // }
+        // console.log(rowData)
+        // console.log(JSON.stringify(rowData))
+      }
+    },
+    // 解析row 数据
+    analysisExcelRow(rowItem) {
+      let rowData = {
+        colCount: 0,
+        col: []
+      }
+      let array = rowItem.split(',')
+      if(array.length > 0){
+        rowData.colCount = array.length
+        let colItem = {
+          span: 0,
+          label: '' 
+        }
+        array.forEach((item, index)=>{
+          // 如果读取到的行数据为空 则认为是空格列
+          if(item&&item !== ''){
+            colItem = {
+              span: 0,
+              label: item
+            }
+          }
+          colItem.span++
+          if(index === array.length-1){
+            rowData.col.push(colItem)
+          }else{
+            // 如果下一条数据有值，前面的列为一个整体作为一条元素
+            let nextItem =  array[index+1]
+            if(nextItem&&nextItem !== ''){
+              rowData.col.push(colItem)
+            }
+          }
+        })
+      }
+      return rowData
+    },
+    initClipboard() {
+      if (!this.jsonClipboard) {
+        this.jsonClipboard = new Clipboard(".json-btn");
+        this.jsonClipboard.on("success", e => {
+          this.$message.success("复制成功");
+        });
+      }
+    },
+    handleConfigSelect(value) {
+      this.configTab = value;
+    },
+    handlePreview() {
+      this.slotKeys = Object.keys(this.$slots);
+      this.dialog.preview.visible = true;
+    },
+    handleGetData() {
+      this.$refs.generateForm.getData().then(data => {
+        this.dialog.data = {
+          visible: true,
+          value: JSON.stringify(data, null, 2),
+          valueCopy: JSON.stringify(data, null, 2)
+        };
+        this.$nextTick(() => {
+          this.initClipboard();
+        });
+      });
+    },
+    handleReset() {
+      this.$refs.generateForm.reset();
+    },
+    handleGenerateJson() {
+      this.dialog.config = {
+        visible: true,
+        value: JSON.stringify(this.widgetFormData, null, 2),
+        valueCopy: JSON.stringify(this.widgetFormData, null, 2)
+      };
+      this.$nextTick(() => {
+        this.initClipboard();
+      });
+    },
+    handleGenerateCode() {
+      this.dialog.code = {
+        visible: true,
+        valueHtml: generateCode(JSON.stringify(this.widgetFormData), "html"),
+        valueVue: generateCode(JSON.stringify(this.widgetFormData), "vue"),
+        type: "vue"
+      };
+    },
+    handleUploadJson() {
+      try {
+        this.setJSON(JSON.parse(this.dialog.import.value));
+        this.dialog.import.visible = false;
+      } catch (e) {
+        this.$message.error(e.message);
+      }
+    },
+    handleDialogFullscreen() {
+      this.$refs.vueCodeEditor.resize();
+      this.$refs.htmlCodeEditor.resize();
+    },
+    handleClear() {
+      this.widgetFormData = {
+        list: [],
+        config: baseConfig
+      };
+
+      this.widgetFormSelect = {};
+    },
+    clear() {
+      this.handleClear();
+    },
+    getJSON() {
+      return this.widgetFormData;
+    },
+    getHtml() {
+      return generateCode(JSON.stringify(this.widgetFormData));
+    },
+    setJSON(json) {
+      this.widgetFormData = json;
+
+      if (json.list.length > 0) {
+        this.widgetFormSelect = json.list[0];
+      }
+    },
+    handleDataChange(field, value, data) {
+      // console.log(field, value, data);
+    }
+  },
+  watch: {
+    widgetFormData: {
+      deep: true,
+      handler: function(val) {
+        // console.log(this.$refs.widgetForm);
+      }
+    }
+  }
+};
+</script>