tianheng-ui 0.1.10 → 0.1.12

package/packages/FormMaking/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fm-container">
+  <div class="formMaking">
     <el-container
       v-if="Object.keys(widgetFormData.config).length"
       class="container-box"
@@ -52,7 +52,7 @@
                     v-for="(item, index) in getAdvanceComponents"
                     class="form-edit-widget-label"
                     :class="{
-                      'no-put': ['table', 'table_h5', 'tabs'].includes(
+                      'no-put': ['table', 'tableH5', 'tabs'].includes(
                         item.type
                       ),
                       [item.type]: true
@@ -100,95 +100,20 @@
           <!-- 中间视图区 -->
           <el-container class="center-container" direction="vertical">
             <!-- 操作区 -->
-            <el-header>
-              <div class="client">
-                <el-button
-                  v-if="tools.includes('monitor')"
-                  :class="{ active: client === 'monitor' }"
-                  type="text"
-                  size="medium"
-                  icon="el-icon-monitor"
-                  @click="client = 'monitor'"
-                >
-                  桌面端
-                </el-button>
-                <el-button
-                  v-if="tools.includes('mobile')"
-                  :class="{ active: client === 'mobile' }"
-                  type="text"
-                  size="medium"
-                  icon="el-icon-mobile"
-                  @click="client = 'mobile'"
-                >
-                  移动端
-                </el-button>
-              </div>
-              <slot name="action"> </slot>
-              <el-popover
-                placement="bottom"
-                trigger="hover"
-                style="margin:0 10px;"
-              >
-                <el-button
-                  v-if="tools.includes('upload')"
-                  type="text"
-                  size="medium"
-                  icon="el-icon-upload2"
-                  slot="reference"
-                  >导入</el-button
-                >
-                <div>
-                  <el-upload
-                    action
-                    accept=".xlsx, .xls"
-                    :auto-upload="false"
-                    :show-file-list="false"
-                    :on-change="onExcelFileChange"
-                  >
-                    <el-button type="text" size="medium">导入EXCEL </el-button>
-                  </el-upload>
-                  <el-button
-                    type="text"
-                    size="medium"
-                    @click="dialog.import.visible = true"
-                    >导入JSON
-                  </el-button>
-                </div>
-              </el-popover>
-
-              <el-button
-                v-if="tools.includes('clearable')"
-                type="text"
-                size="medium"
-                icon="el-icon-delete"
-                @click="handleClear"
-                >清空
-              </el-button>
-              <el-button
-                v-if="tools.includes('preview')"
-                type="text"
-                size="medium"
-                icon="el-icon-view"
-                @click="handlePreview"
-                >预览
-              </el-button>
-              <el-button
-                v-if="tools.includes('generateJson')"
-                type="text"
-                size="medium"
-                icon="el-icon-tickets"
-                @click="handleGenerateJson"
-                >生成JSON</el-button
-              >
-              <el-button
-                v-if="tools.includes('generateCode')"
-                type="text"
-                size="medium"
-                icon="el-icon-document"
-                @click="handleGenerateCode"
-                >生成代码</el-button
-              >
-            </el-header>
+            <WidgetTools
+              :baseConfig="baseConfig"
+              :permissions="permissions"
+              :client.sync="client"
+              :basicComponents="basicComponents"
+              :layoutComponents="layoutComponents"
+              :formData="widgetFormData"
+              :formValue="widgetValue"
+              :oauthConfig="oauthConfig"
+              :slotKeys="Object.keys($slots)"
+              @click="handleWidgetToolsChange"
+            >
+              <slot name="action"></slot>
+            </WidgetTools>
 
             <!-- 工作区 -->
             <el-main>
@@ -225,8 +150,8 @@
                 <widget-config
                   v-show="configTab == 'widget'"
                   :data="widgetFormSelect"
-                  :remoteApis="remoteApis"
                   :config="widgetFormData.config"
+                  @update="handleWidgetConfigUpdate"
                 >
                 </widget-config>
                 <form-config
@@ -236,137 +161,6 @@
               </el-main>
             </el-container>
           </el-aside>
-
-          <!-- 导入JSON -->
-          <th-dialog
-            title="导入JSON"
-            :visible="dialog.import.visible"
-            :modal-append-to-body="false"
-            @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="预览"
-            v-model="dialog.preview.visible"
-            :modal-append-to-body="false"
-            @on-close="dialog.preview.visible = false"
-          >
-            <generate-form
-              v-if="dialog.preview.visible"
-              :data="widgetFormData"
-              :value="widgetValue"
-              :oauthConfig="oauthConfig"
-              :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"
-            :modal-append-to-body="false"
-            @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"
-            :modal-append-to-body="false"
-            @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"
-            :modal-append-to-body="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>
@@ -375,9 +169,9 @@
 
 <script>
 import Draggable from "vuedraggable";
-import Clipboard from "clipboard";
 import WidgetConfig from "./WidgetConfig";
 import FormConfig from "./FormConfig";
+import WidgetTools from "./WidgetTools";
 import WidgetForm from "./WidgetForm";
 import GenerateForm from "./GenerateForm";
 import {
@@ -386,9 +180,7 @@ import {
   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: "thFormMaking",
@@ -396,6 +188,7 @@ export default {
     Draggable,
     WidgetConfig,
     FormConfig,
+    WidgetTools,
     WidgetForm,
     GenerateForm
   },
@@ -412,19 +205,17 @@ export default {
         return {};
       }
     },
-    tools: {
+    permissions: {
       type: Array,
-      default: () => {
-        return [
-          "monitor",
-          "mobile",
-          "upload",
-          "clearable",
-          "preview",
-          "generateCode",
-          "generateJson"
-        ];
-      }
+      default: () => [
+        "monitor",
+        "mobile",
+        "upload",
+        "clearable",
+        "preview",
+        "generateCode",
+        "generateJson"
+      ]
     },
     basicFields: {
       type: Array,
@@ -452,15 +243,15 @@ export default {
     },
     advanceFields: {
       type: Array,
-      default: () => ["table", "table_h5", "tabs", "blank"]
+      default: () => ["table", "tableH5", "tabs", "blank"]
     },
     layoutFields: {
       type: Array,
       default: () => ["grid", "filler", "divider"]
     },
-    remoteApis: {
-      type: Array,
-      default: () => []
+    remoteFuncs: {
+      type: Object,
+      default: () => {}
     }
   },
   data() {
@@ -473,39 +264,7 @@ export default {
       widgetFormSelect: {},
       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: []
+      client: "monitor"
     };
   },
   computed: {
@@ -541,6 +300,41 @@ export default {
         val.config = Object.assign(this.baseConfig, val.config);
       }
       this.setJSON(val);
+    },
+    remoteFuncs(val) {
+      if (val) {
+        const props = val.props;
+        const options = val.options;
+
+        /**
+         * 支持外部接口转自定义事件（待完成）
+         */
+        //         const _eventScript = options.map(item => {
+        //           return {
+        //             id: item[props.key],
+        //             label: item[props.name],
+        //             value: `
+        // const params = ${JSON.stringify(item.params)}
+        // const headers = ${JSON.stringify(item.headers || {})}
+        // const request = {
+        //   url:"${item.url}",
+        //   method:"${item.method}",
+        //   data:params,
+        //   headers:headers
+        // }
+        // this.hendleRemoteData(request)
+        //             `
+        //           };
+        //         });
+        //         this.widgetFormData.config.eventScript = this.widgetFormData.config.eventScript.concat(
+        //           _eventScript
+        //         );
+
+        const _remoteFuncs = options.map(item => {
+          return { ...item, id: item[props.key], label: item[props.name] };
+        });
+        this.widgetFormData.config.remoteFuncs = _remoteFuncs;
+      }
     }
   },
   created() {
@@ -549,6 +343,7 @@ export default {
       this.baseConfig,
       this.widgetFormData.config
     );
+
     if (this.widgetFormData.list && this.widgetFormData.list.length) {
       this.widgetFormSelect = this.widgetFormData.list[0];
     } else {
@@ -581,200 +376,11 @@ export default {
         });
       }
     },
-    // 读取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
-
-        // console.log("XLSX.read => \n", workbook);
-        // console.log("sheet_to_json => \n", XLSX.utils.sheet_to_json(worksheet));
-        // console.log("sheet_to_csv => \n", XLSX.utils.sheet_to_csv(worksheet));
-        // console.log("sheet_to_txt => \n", XLSX.utils.sheet_to_txt(worksheet));
-        const xlsxDom = this.parseDom(XLSX.utils.sheet_to_html(worksheet));
-        // console.log("sheet_to_html => \n", xlsxDom);
-        const rowsDom = xlsxDom.getElementsByTagName("tr");
-        console.log("rowsDom =>", rowsDom);
-        let rowSpan = 0;
-        for (let i = 0; i < rowsDom[0].childNodes.length; i++) {
-          const col = rowsDom[0].childNodes[i];
-          rowSpan += col.colSpan || 1;
-        }
-        console.log("rowSpan =>", rowSpan);
-        const colSpan = 24 / rowSpan;
-
-        let config = {
-          list: [],
-          config: this.baseConfig
-        };
-
-        for (const row of rowsDom) {
-          const key =
-            Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-          let grid = this.getComponentsConfig("grid");
-          grid.columns = [];
-          grid.key = key;
-          grid.model = "grid_" + key;
-
-          const colsDom = row.childNodes;
-          console.log("colsDom =>", colsDom);
-          // continue;
-          let span = 0;
-          for (let i = 0; i < colsDom.length; i++) {
-            if (i % 2 === 0) span = 0;
-            else continue;
-
-            const colKey =
-              Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-            const titleDom = colsDom[i];
-            const valueDom = colsDom[i + 1];
-            if (!titleDom.innerText && !valueDom.innerText) continue;
-
-            if (valueDom) {
-              span =
-                ((titleDom.colSpan || 1) + (valueDom.colSpan || 1)) * colSpan;
-
-              const data = this.getComponentsConfig("input");
-              let name = titleDom.innerText;
-              if (name.charAt(0) === "*") {
-                name = name.slice(1);
-                data.options.required = true;
-                data.rules = data.rules || [];
-                data.rules.push({
-                  required: true,
-                  message: "单行文本必须填写"
-                });
-              }
-              data.name = name;
-              data.options.defaultValue = valueDom.innerText;
-              data.key = colKey;
-              data.model = "input_" + colKey;
-              grid.columns.push({ span: span, list: [data] });
-            } else {
-              span = titleDom.colSpan * colSpan;
-
-              const data = this.getComponentsConfig("text");
-              data.name = titleDom.innerText;
-              data.options.defaultValue = titleDom.innerText;
-              data.options.hideLabel = true;
-              data.key = colKey;
-              data.model = "text_" + colKey;
-              grid.columns.push({ span: span, list: [data] });
-            }
-          }
-          if (grid.columns.length) {
-            config.list.push(grid);
-          } else {
-            const data = this.getComponentsConfig("filler");
-            data.name = "";
-            data.key = key;
-            data.model = "filler_" + key;
-            config.list.push(data);
-          }
-        }
-        this.setJSON(config);
-      }
-    },
-    getComponentsConfig(type) {
-      let data = null;
-      for (const item of this.basicComponents) {
-        if (type === item.type) {
-          data = JSON.parse(JSON.stringify(item));
-          return data;
-        }
-      }
-      for (const item of this.layoutComponents) {
-        if (type === item.type) {
-          data = JSON.parse(JSON.stringify(item));
-          return data;
-        }
-      }
-      return data;
-    },
 
-    parseDom(arg) {
-      var objE = document.createElement("div");
-      objE.innerHTML = arg;
-      return objE.childNodes[2];
-    },
-
-    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: [],
@@ -783,6 +389,30 @@ export default {
 
       this.widgetFormSelect = {};
     },
+    handleWidgetToolsChange(val, data) {
+      switch (val) {
+        case "mobile":
+          this.client = val;
+          break;
+        case "monitor":
+          this.client = val;
+          break;
+        case "import-excel":
+        case "import-json":
+        case "import-template":
+          this.setJSON(data);
+          break;
+        case "clear":
+          this.handleClear();
+          break;
+
+        default:
+          break;
+      }
+    },
+    handleWidgetConfigUpdate(val) {
+      this.widgetFormSelect = Object.assign(this.widgetFormSelect, val);
+    },
     clear() {
       this.handleClear();
     },
@@ -798,9 +428,6 @@ export default {
       if (json.list.length > 0) {
         this.widgetFormSelect = json.list[0];
       }
-    },
-    handleDataChange(field, value, data) {
-      // console.log(field, value, data);
     }
   }
 };