tianheng-ui 0.1.0 → 0.1.2

package/packages/FormMaking/index.vue

@@ -0,0 +1,807 @@
+<template>
+  <div class="fm-container">
+    <el-container
+      v-if="Object.keys(widgetFormData.config).length"
+      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">
+                <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>
+
+            <!-- 工作区 -->
+            <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"
+            :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>
+  </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 {
+  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: "thFormMaking",
+  components: {
+    Draggable,
+    WidgetConfig,
+    FormConfig,
+    WidgetForm,
+    GenerateForm
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return { config: {}, list: [] };
+      }
+    },
+    oauthConfig: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    tools: {
+      type: Array,
+      default: () => {
+        return [
+          "monitor",
+          "mobile",
+          "upload",
+          "clearable",
+          "preview",
+          "generateCode",
+          "generateJson"
+        ];
+      }
+    },
+    basicFields: {
+      type: Array,
+      default: () => [
+        "input",
+        "textarea",
+        "cell",
+        "radio",
+        "checkbox",
+        "time",
+        "date",
+        "rate",
+        "number",
+        "color",
+        "select",
+        "switch",
+        "slider",
+        "text",
+        "button",
+        "image",
+        "upload",
+        "editor",
+        "cascader"
+      ]
+    },
+    advanceFields: {
+      type: Array,
+      default: () => ["table", "table_h5", "tabs", "blank"]
+    },
+    layoutFields: {
+      type: Array,
+      default: () => ["grid", "filler", "divider"]
+    },
+    remoteApis: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    this.basicComponents = basicComponents;
+    this.advanceComponents = advanceComponents;
+    this.layoutComponents = layoutComponents;
+    this.baseConfig = JSON.parse(JSON.stringify(baseConfig));
+    return {
+      widgetFormData: this.data,
+      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: []
+    };
+  },
+  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;
+    }
+  },
+  watch: {
+    widgetFormData: {
+      deep: true,
+      handler: function(val) {
+        this.$emit("update:data", val);
+        this.$emit("on-change", val);
+      }
+    },
+    data(val) {
+      if (val && val.config) {
+        val.config = Object.assign(this.baseConfig, val.config);
+      }
+      this.setJSON(val);
+    }
+  },
+  created() {
+    this.initConfig();
+    this.widgetFormData.config = Object.assign(
+      this.baseConfig,
+      this.widgetFormData.config
+    );
+    if (this.widgetFormData.list && this.widgetFormData.list.length) {
+      this.widgetFormSelect = this.widgetFormData.list[0];
+    } else {
+      this.widgetFormData.list = [];
+    }
+  },
+  mounted() {},
+  methods: {
+    // 初始化组件配置
+    initConfig() {
+      if (this.oauthConfig.token) {
+        const oauthInfo = {
+          token: this.oauthConfig.token,
+          baseUrl: this.oauthConfig.baseUrl
+        };
+        sessionStorage.setItem("th_oauth_info", JSON.stringify(oauthInfo));
+      } else if (this.oauthConfig.oauth) {
+        // 模拟授权认证流程
+        this.axios({
+          url: this.oauthConfig.oauth.url,
+          method: this.oauthConfig.oauth.method,
+          data: this.oauthConfig.oauth.params,
+          headers: this.oauthConfig.oauth.headers
+        }).then(res => {
+          const oauthInfo = {
+            token: res.data,
+            baseUrl: this.oauthConfig.baseUrl
+          };
+          sessionStorage.setItem("th_oauth_info", JSON.stringify(oauthInfo));
+        });
+      }
+    },
+    // 读取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: [],
+        config: this.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);
+    }
+  }
+};
+</script>