tianheng-ui 0.1.10 → 0.1.12

package/packages/FormMaking/WidgetSelect.vue

@@ -0,0 +1,160 @@
+<template>
+  <div
+    v-if="selectWidget.model == widget.model"
+    class="widget-actions"
+    :class="{
+      'widget-actions_layout': [
+        'grid',
+        'tabs',
+        'table',
+        'tableH5',
+        'alliance'
+      ].includes(widget.type)
+    }"
+  >
+    <div class="actions">
+      <i class="iconfont icon-icon_clone" @click.stop="handleWidgetClone"></i>
+      <i class="iconfont icon-trash" @click.stop="handleWidgetDelete"></i>
+    </div>
+
+    <div class="drag">
+      <i class="iconfont icon-drag drag-widget"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["widgetArray", "widgetIndex", "widget", "select"],
+  data() {
+    return {
+      selectWidget: this.select
+    };
+  },
+  watch: {
+    select(val) {
+      this.selectWidget = val;
+    },
+    selectWidget: {
+      handler(val) {
+        this.$emit("update:select", val);
+      },
+      deep: true
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleWidgetDelete() {
+      if (this.widgetArray.length - 1 === this.widgetIndex) {
+        if (this.widgetIndex === 0) {
+          this.selectWidget = {};
+        } else {
+          this.selectWidget = this.widgetArray[this.widgetIndex - 1];
+        }
+      } else {
+        this.selectWidget = this.widgetArray[this.widgetIndex + 1];
+      }
+
+      this.$nextTick(() => {
+        this.widgetArray.splice(this.widgetIndex, 1);
+      });
+    },
+
+    handleWidgetClone() {
+      const data = JSON.parse(
+        JSON.stringify(this.widgetArray[this.widgetIndex])
+      );
+
+      const initKey = item => {
+        const key = `${Date.parse(new Date().toString())}_${Math.ceil(
+          Math.random() * 99999
+        )}`;
+
+        item.key = key;
+        item.options.remoteFunc = `func__${key}`;
+        item.model = `${item.type}_${key}`;
+
+        if (["table", "tableH5"].includes(item.type)) {
+          item.list.forEach(element => {
+            initKey(element);
+          });
+        }
+        if (["tabs"].includes(item.type)) {
+          item.options.columns.forEach(tab => {
+            tab.forEach(element => {
+              initKey(element);
+            });
+          });
+        }
+        if (["grid"].includes(item.type)) {
+          item.options.columns.forEach(column => {
+            column.list.forEach(element => {
+              initKey(element);
+            });
+          });
+        }
+      };
+      initKey(data);
+
+      this.widgetArray.splice(this.widgetIndex, 0, data);
+      this.selectWidget = data;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+$primary-color: #409eff;
+$primary-background-color: #ecf5ff;
+.widget-actions {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  .actions {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 28px;
+    line-height: 28px;
+    background: $primary-color;
+    z-index: 9;
+
+    i {
+      font-size: 14px;
+      color: #fff;
+      margin: 0 5px;
+      cursor: pointer;
+    }
+  }
+
+  .drag {
+    position: absolute;
+    left: -2px;
+    bottom: -2px;
+    height: 28px;
+    line-height: 28px;
+    background: $primary-color;
+    z-index: 9;
+
+    i {
+      font-size: 14px;
+      color: #fff;
+      margin: 0 5px;
+      cursor: move;
+    }
+  }
+}
+
+.widget-actions_layout {
+  .actions {
+    background: #e6a23c;
+  }
+
+  .drag {
+    background: #e6a23c;
+  }
+}
+</style>

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"
+  }
+};