tianheng-ui 0.1.11 → 0.1.12

package/packages/FormMaking/WidgetTools.vue

@@ -0,0 +1,538 @@
+<template>
+  <div class="widgetTools">
+    <div class="left">
+      <el-button
+        v-if="permissions.includes('monitor')"
+        :class="{ active: client === 'monitor' }"
+        type="text"
+        size="medium"
+        icon="el-icon-monitor"
+        @click="handleClick('monitor')"
+      >
+      </el-button>
+      <el-button
+        v-if="permissions.includes('mobile')"
+        :class="{ active: client === 'mobile' }"
+        type="text"
+        size="medium"
+        icon="el-icon-mobile"
+        @click="handleClick('mobile')"
+      >
+      </el-button>
+    </div>
+    <div class="right">
+      <slot> </slot>
+
+      <el-button
+        v-if="permissions.includes('clearable')"
+        style="margin-left:10px;"
+        type="text"
+        size="medium"
+        icon="el-icon-delete"
+        @click="handleClick('clear')"
+        >清空
+      </el-button>
+      <el-button
+        v-if="permissions.includes('preview')"
+        type="text"
+        size="medium"
+        icon="el-icon-view"
+        @click="dialog.preview.visible = true"
+        >预览
+      </el-button>
+      <el-popover style="margin-left:10px;" placement="bottom" trigger="hover">
+        <el-button
+          v-if="permissions.includes('upload')"
+          type="text"
+          size="medium"
+          icon="el-icon-upload2"
+          slot="reference"
+          >导入</el-button
+        >
+        <div>
+          <div>
+            <el-button
+              type="text"
+              size="medium"
+              @click="dialog.import.visible = true"
+              >导入JSON
+            </el-button>
+          </div>
+          <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>
+          </div>
+          <div>
+            <el-button
+              type="text"
+              size="medium"
+              @click="dialog.template.visible = true"
+              >导入模板
+            </el-button>
+          </div>
+        </div>
+      </el-popover>
+      <el-popover style="margin-left:10px;" placement="bottom" trigger="hover">
+        <el-button
+          v-if="
+            permissions.includes('generateJson') ||
+              permissions.includes('generateCode')
+          "
+          type="text"
+          size="medium"
+          icon="el-icon-document"
+          slot="reference"
+          >生成</el-button
+        >
+        <div>
+          <div>
+            <el-button
+              v-if="permissions.includes('generateJson')"
+              type="text"
+              size="medium"
+              @click="handleGenerateJson"
+            >
+              生成JSON
+            </el-button>
+          </div>
+          <div>
+            <el-button
+              v-if="permissions.includes('generateCode')"
+              type="text"
+              size="medium"
+              @click="handleGenerateCode"
+            >
+              生成代码
+            </el-button>
+          </div>
+        </div>
+      </el-popover>
+    </div>
+
+    <!-- 导入JSON -->
+    <th-dialog
+      title="导入JSON"
+      :visible="dialog.import.visible"
+      :modal-append-to-body="false"
+      @on-close="dialog.import.visible = false"
+      @on-affirm="handleImportJson"
+      @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.template.visible"
+      :modal-append-to-body="false"
+      @on-close="dialog.template.visible = false"
+      @on-affirm="handleImportTemplate"
+    >
+    
+    </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="formData"
+        :value="formValue"
+        :oauthConfig="oauthConfig"
+        :remote="remoteData"
+        :slotKeys="slotKeys"
+        :client="client"
+        insite="true"
+        @on-change="handleDataChange"
+        @button-submit="handleButtonSubmit"
+        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>
+  </div>
+</template>
+
+<script>
+import * as XLSX from "xlsx/xlsx.mjs";
+import request from "./util/request";
+import Clipboard from "clipboard";
+import generateCode from "./util/generateCode.js";
+import GenerateForm from "./GenerateForm";
+export default {
+  props: {
+    baseConfig: Object,
+    permissions: Array,
+    client: String,
+    basicComponents: Array,
+    layoutComponents: Array,
+    formData: Object,
+    formValue: Object,
+    oauthConfig: Object,
+    slotKeys: Array
+  },
+  components: { GenerateForm },
+  data() {
+    return {
+      dialog: {
+        import: { visible: false, value: "" },
+        template: { visible: false, value: "" },
+        preview: { visible: false, value: "" },
+        data: { visible: false, value: "", valueCopy: "" },
+        config: { visible: false, value: "", valueCopy: "" },
+        code: { visible: false, valueHtml: "", valueVue: "", type: "vue" }
+      },
+      remoteData: {
+        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
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleClick(val, data) {
+      this.$emit("click", val, data);
+    },
+    // 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");
+        let rowSpan = 0;
+        for (let i = 0; i < rowsDom[0].childNodes.length; i++) {
+          const col = rowsDom[0].childNodes[i];
+          rowSpan += col.colSpan || 1;
+        }
+        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.options.columns = [];
+          grid.key = key;
+          grid.model = "grid_" + key;
+
+          const colsDom = row.childNodes;
+          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.options.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.options.columns.push({ span: span, list: [data] });
+            }
+          }
+          if (grid.options.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.handleClick("import-excel", config);
+      }
+    },
+    // 读取excel file
+    readExcelFile(file) {
+      //文件读取
+      return new Promise(resolve => {
+        let reader = new FileReader();
+        reader.readAsBinaryString(file); //以二进制的方式读取
+        reader.onload = ev => {
+          resolve(ev.target.result);
+        };
+      });
+    },
+    parseDom(arg) {
+      var objE = document.createElement("div");
+      objE.innerHTML = arg;
+      return objE.childNodes[2];
+    },
+    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;
+    },
+    handleImportJson() {
+      this.dialog.import.visible = false;
+      this.handleClick("import-json", JSON.parse(this.dialog.import.value));
+    },
+    handleImportTemplate() {
+      this.dialog.template.visible = false;
+    },
+    handleDataChange(field, value, data) {
+      // console.log('handleDataChange =>',field, value, data);
+    },
+    handleButtonSubmit(val) {
+      // console.log("handleButtonSubmit =>", val);
+    },
+    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.formData, null, 2),
+        valueCopy: JSON.stringify(this.formData, null, 2)
+      };
+      this.$nextTick(() => {
+        this.initClipboard();
+      });
+    },
+    initClipboard() {
+      if (!this.jsonClipboard) {
+        this.jsonClipboard = new Clipboard(".json-btn");
+        this.jsonClipboard.on("success", e => {
+          this.$message.success("复制成功");
+        });
+      }
+    },
+    handleGenerateCode() {
+      this.dialog.code = {
+        visible: true,
+        valueHtml: generateCode(JSON.stringify(this.formData), "html"),
+        valueVue: generateCode(JSON.stringify(this.formData), "vue"),
+        type: "vue"
+      };
+    },
+    handleDialogFullscreen() {
+      this.$refs.vueCodeEditor.resize();
+      this.$refs.htmlCodeEditor.resize();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.widgetTools {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 45px;
+  padding: 0 15px;
+  border-bottom: solid 2px #e4e7ed;
+
+  .left {
+    min-width: 60px;
+    .el-button {
+      color: #333;
+    }
+    .active {
+      color: #409eff;
+    }
+  }
+  .right {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: right;
+  }
+}
+</style>

package/packages/FormMaking/config/index.js

@@ -0,0 +1,6 @@
+export default {
+  version: "1.0.0",
+  storageKeys: {
+    oauthConfig: "_TH_OauthConfig"
+  }
+};

package/packages/FormMaking/custom/config.js

@@ -113,16 +113,16 @@ export const basicComponents = [
       showLabel: false,
       options: [
         {
-          value: "Option 1",
-          label: "Option 1"
+          value: "选值 1",
+          label: "选项 1"
         },
         {
-          value: "Option 2",
-          label: "Option 2"
+          value: "选值 2",
+          label: "选项 2"
         },
         {
-          value: "Option 3",
-          label: "Option 3"
+          value: "选值 3",
+          label: "选项 3"
         }
       ],
       required: false,
@@ -156,13 +156,16 @@ export const basicComponents = [
       showLabel: false,
       options: [
         {
-          value: "Option 1"
+          value: "选值 1",
+          label: "选项 1"
         },
         {
-          value: "Option 2"
+          value: "选值 2",
+          label: "选项 2"
         },
         {
-          value: "Option 3"
+          value: "选值 3",
+          label: "选项 3"
         }
       ],
       required: false,
@@ -264,15 +267,9 @@ export const basicComponents = [
       collapseTags: false,
       allowCreate: false,
       options: [
-        {
-          value: "Option 1"
-        },
-        {
-          value: "Option 2"
-        },
-        {
-          value: "Option 3"
-        }
+        { value: "选值 1", label: "选项 1" },
+        { value: "选值 2", label: "选项 2" },
+        { value: "选值 3", label: "选项 3" }
       ],
       filterable: false,
       props: {
@@ -784,14 +781,14 @@ export const baseConfig = {
   hideLabel: false,
   eventScript: [
     {
-      key: "mounted",
-      name: "mounted",
-      func: ""
+      id: "mounted",
+      label: "mounted",
+      value: ""
     },
     {
-      key: "refresh",
-      name: "refresh",
-      func: ""
+      id: "refresh",
+      label: "refresh",
+      value: ""
     }
   ]
 };

package/packages/FormMaking/custom/configs/button.vue

@@ -82,12 +82,7 @@
         </el-checkbox>
       </el-form-item>
 
-      <el-form-item>
-        <div class="config-header" slot="label">
-          <span class="title">动作设置</span>
-          <span class="value" @click="handleEventsShow">配置</span>
-        </div>
-
+      <el-form-item label="提交接口">
         <!-- <el-radio-group
           style="margin-bottom:10px;"
           v-model="widget.options.remote"
@@ -96,23 +91,27 @@
           <el-radio-button :label="false">自定义事件</el-radio-button>
           <el-radio-button :label="true">绑定接口</el-radio-button>
         </el-radio-group> -->
-
-        <div v-show="widget.options.remote">
-          <el-select
-            style="width:100%"
-            v-model="widget.options.remoteFunc"
-            value-key="api"
-            placeholder="请选择远端方法"
-            clearable
+        <el-select
+          style="width:100%"
+          v-model="widget.options.remoteFunc"
+          value-key="id"
+          placeholder="请选择提交方法"
+          clearable
+        >
+          <el-option
+            v-for="item in config.remoteFuncs"
+            :key="item.id"
+            :label="item.label"
+            :value="item"
           >
-            <el-option
-              v-for="item in remoteApis"
-              :key="item.api"
-              :label="item.name"
-              :value="item"
-            >
-            </el-option>
-          </el-select>
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item>
+        <div class="config-header" slot="label">
+          <span class="title">动作设置</span>
+          <span class="value" @click="handleEventsShow">配置</span>
         </div>
 
         <el-collapse v-show="!widget.options.remote" class="eventsCollapse">
@@ -131,9 +130,9 @@
               >
                 <el-option
                   v-for="item in config.eventScript"
-                  :key="item.key"
-                  :label="item.name"
-                  :value="item.key"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
                 >
                 </el-option>
               </el-select>