tianheng-ui 0.1.12 → 0.1.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,

package/packages/FormMaking/GenerateFormItem.vue

@@ -170,7 +170,7 @@
 </template>
 
 <script>
-import { inputTypeDict } from "./util/index";
+import { inputTypeDict, deepClone } from "./util/index";
 import { VueEditor } from "vue2-editor";
 import compsData from "./custom/register";
 import FmUpload from "./Upload";
@@ -189,7 +189,7 @@ export default {
   components: { FmUpload, VueEditor },
   data() {
     return {
-      compsData: JSON.parse(JSON.stringify(compsData)),
+      compsData: deepClone(compsData),
       dataModel: this.models[this.widget.model],
       dialogVisible: false,
       dialogImageUrl: ""

package/packages/FormMaking/WidgetConfig.vue

@@ -142,6 +142,7 @@
 </template>
 
 <script>
+import { deepClone } from "./util/index";
 import compsData from "./custom/register";
 export default {
   props: {
@@ -160,7 +161,7 @@ export default {
   },
   data() {
     return {
-      compsData: JSON.parse(JSON.stringify(compsData)),
+      compsData: deepClone(compsData),
       validator: {
         type: null,
         required: null,
@@ -324,7 +325,7 @@ export default {
     handleEventDialogShow() {
       this.eventsDialog = {
         visible: true,
-        eventScript: JSON.parse(JSON.stringify(this.config.eventScript)),
+        eventScript: deepClone(this.config.eventScript),
         active: null
       };
     },
@@ -372,7 +373,7 @@ export default {
       }
     },
     handleTypeChange(val) {
-      const config = JSON.parse(JSON.stringify(this.compsData[val].config));
+      const config = deepClone(this.compsData[val].config);
       this.$emit("update", config);
     }
   }

package/packages/FormMaking/WidgetForm.vue

@@ -44,6 +44,7 @@
 </template>
 
 <script>
+import { deepClone } from "./util/index";
 import Draggable from "vuedraggable";
 import WidgetFormItem from "./WidgetFormItem.vue";
 
@@ -99,18 +100,16 @@ export default {
     },
     handleWidgetAdd(evt) {
       const newIndex = evt.newIndex;
-      const to = evt.to;
-
+      let newComponent = deepClone(this.data.list[newIndex]);
       //为拖拽到容器的元素添加唯一 key
-      const key =
-        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-      let dic = JSON.parse(JSON.stringify(this.data.list[newIndex]));
-      dic.key = key;
-      dic.model = dic.type + "_" + key;
-      // dic.rules = [{ id: new Date().getTime(), patternStr: "", pattern: "" }];
-
-      this.$set(this.data.list, newIndex, dic);
+      if (!newComponent.key) {
+        const key =
+          Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+        newComponent.key = key;
+        newComponent.model = newComponent.type + "_" + key;
+      }
 
+      this.$set(this.data.list, newIndex, newComponent);
       this.selectWidget = this.data.list[newIndex];
     }
   }

package/packages/FormMaking/WidgetFormItem.vue

@@ -50,6 +50,7 @@
 </template>
 
 <script>
+import { deepClone } from "./util/index";
 import compsData from "./custom/register";
 import Draggable from "vuedraggable";
 import FmUpload from "./Upload";
@@ -59,7 +60,7 @@ export default {
   components: { Draggable, FmUpload },
   data() {
     return {
-      compsData: JSON.parse(JSON.stringify(compsData)),
+      compsData: deepClone(compsData),
       selectWidget: this.select
     };
   },
@@ -130,7 +131,6 @@ export default {
         )}`;
 
         item.key = key;
-        item.options.remoteFunc = `func__${key}`;
         item.model = `${item.type}_${key}`;
 
         if (["table", "tableH5"].includes(item.type)) {

package/packages/FormMaking/WidgetSelect.vue

@@ -72,7 +72,6 @@ export default {
         )}`;
 
         item.key = key;
-        item.options.remoteFunc = `func__${key}`;
         item.model = `${item.type}_${key}`;
 
         if (["table", "tableH5"].includes(item.type)) {

package/packages/FormMaking/WidgetTools.vue

@@ -260,6 +260,7 @@
 </template>
 
 <script>
+import { deepClone } from "./util/index";
 import * as XLSX from "xlsx/xlsx.mjs";
 import request from "./util/request";
 import Clipboard from "clipboard";
@@ -436,13 +437,13 @@ export default {
       let data = null;
       for (const item of this.basicComponents) {
         if (type === item.type) {
-          data = JSON.parse(JSON.stringify(item));
+          data = deepClone(item);
           return data;
         }
       }
       for (const item of this.layoutComponents) {
         if (type === item.type) {
-          data = JSON.parse(JSON.stringify(item));
+          data = deepClone(item);
           return data;
         }
       }

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

@@ -95,8 +95,9 @@
           style="width:100%"
           v-model="widget.options.remoteFunc"
           value-key="id"
-          placeholder="请选择提交方法"
           clearable
+          placeholder="请选择提交方法"
+          no-data-text="暂无接口，请前往【接口模块】创建"
         >
           <el-option
             v-for="item in config.remoteFuncs"

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

@@ -36,7 +36,7 @@ export default {
     hendleRemoteData() {
       const remoteFunc = this.widget.options.remoteFunc;
       const requestConfig = {
-        url: remoteFunc.url,
+        url: `/lc/api${remoteFunc.url}`,
         method: remoteFunc.method,
         headers: remoteFunc.headers
       };

package/packages/FormMaking/custom/items/date.vue

@@ -12,6 +12,7 @@
     :editable="widget.options.editable"
     :clearable="widget.options.clearable"
     :value-format="widget.options.format"
+    :format="widget.options.format"
     @change="handleEventAction(widget.events.onChange)"
     @focus="handleEventAction(widget.events.onFocus)"
     @blur="handleEventAction(widget.events.onBlur)"

package/packages/FormMaking/custom/items/grid_dev.vue

@@ -83,9 +83,9 @@ export default {
         return false;
       }
 
-      const key =
-        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-      if (!newComponent.model) {
+      if (!newComponent.key) {
+        const key =
+          Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
         newComponent.key = key;
         newComponent.model = `${newComponent.type}_${key}`;
       }

package/packages/FormMaking/custom/items/tableH5_dev.vue

@@ -83,9 +83,9 @@ export default {
         return false;
       }
 
-      const key =
-        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-      if (!newComponent.model) {
+      if (!newComponent.key) {
+        const key =
+          Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
         newComponent.key = key;
         newComponent.model = `${newComponent.type}_${key}`;
       }

package/packages/FormMaking/custom/items/table_dev.vue

@@ -70,9 +70,9 @@ export default {
         return false;
       }
 
-      const key =
-        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-      if (!newComponent.model) {
+      if (!newComponent.key) {
+        const key =
+          Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
         newComponent.key = key;
         newComponent.model = `${newComponent.type}_${key}`;
       }

package/packages/FormMaking/custom/items/tabs_dev.vue

@@ -84,9 +84,9 @@ export default {
         return false;
       }
 
-      const key =
-        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-      if (!newComponent.model) {
+      if (!newComponent.key) {
+        const key =
+          Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
         newComponent.key = key;
         newComponent.model = `${newComponent.type}_${key}`;
       }

package/packages/FormMaking/index.vue

@@ -100,7 +100,7 @@
           <!-- 中间视图区 -->
           <el-container class="center-container" direction="vertical">
             <!-- 操作区 -->
-            <WidgetTools
+            <widget-tools
               :baseConfig="baseConfig"
               :permissions="permissions"
               :client.sync="client"
@@ -113,7 +113,7 @@
               @click="handleWidgetToolsChange"
             >
               <slot name="action"></slot>
-            </WidgetTools>
+            </widget-tools>
 
             <!-- 工作区 -->
             <el-main>
@@ -181,6 +181,7 @@ import {
   baseConfig
 } from "./custom/config";
 import generateCode from "./util/generateCode.js";
+import { deepClone } from "./util/index";
 
 export default {
   name: "thFormMaking",
@@ -258,7 +259,7 @@ export default {
     this.basicComponents = basicComponents;
     this.advanceComponents = advanceComponents;
     this.layoutComponents = layoutComponents;
-    this.baseConfig = JSON.parse(JSON.stringify(baseConfig));
+    this.baseConfig = deepClone(baseConfig);
     return {
       widgetFormData: this.data,
       widgetFormSelect: {},

package/packages/FormMaking/styles/index.scss

@@ -253,6 +253,7 @@ $primary-background-color: #ecf5ff;
       }
 
       .widgetFormItem {
+        min-width: 100px;
         padding-bottom: 18px;
         position: relative;
         border: 1px dashed rgba(170, 170, 170, 0.7);

package/packages/FormMaking/util/index.js

@@ -41,3 +41,27 @@ export const inputTypeDict = val => {
   };
   return dict[val] || "text";
 };
+
+export const deepClone = (obj, clone) => {
+  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
+  const toString = Object.prototype.toString;
+  toString.call(obj) === "[object Array]"
+    ? (clone = clone || [])
+    : (clone = clone || {});
+  for (const i in obj) {
+    if (typeof obj[i] === "object" && obj[i] !== null) {
+      // 要考虑深复制问题了
+      if (Array.isArray(obj[i])) {
+        // 这是数组
+        clone[i] = [];
+      } else {
+        // 这是对象
+        clone[i] = {};
+      }
+      deepClone(obj[i], clone[i]);
+    } else {
+      clone[i] = obj[i];
+    }
+  }
+  return clone;
+};

package/packages/TableMaking/WidgetTools.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="widgetTools">
+    <div class="left">
+      <el-button
+        :class="{ active: client === 'monitor' }"
+        type="text"
+        size="medium"
+        icon="el-icon-monitor"
+        @click="handleClick('monitor')"
+      >
+      </el-button>
+      <!-- <el-button
+              :class="{ active: client === 'mobile' }"
+              type="text"
+              size="medium"
+              icon="el-icon-mobile"
+              @click="client = '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"
+        disabled
+        @click="handleClick('clear')"
+        >重置
+      </el-button>
+      <el-button
+        v-if="permissions.includes('preview')"
+        type="text"
+        size="medium"
+        icon="el-icon-view"
+        disabled
+        @click="handleDialogOpen('preview')"
+        >预览
+      </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="handleDialogOpen('importJson')"
+              >导入JSON
+            </el-button>
+          </div>
+          <div>
+            <el-upload
+              action
+              accept=".xlsx, .xls"
+              :auto-upload="false"
+              :show-file-list="false"
+              disabled
+              :on-change="handleExcelFileChange"
+            >
+              <el-button type="text" size="medium" disabled
+                >导入EXCEL</el-button
+              >
+            </el-upload>
+          </div>
+          <div>
+            <el-button
+              type="text"
+              size="medium"
+              disabled
+              @click="handleDialogOpen('importTemplate')"
+              >导入模板
+            </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="handleDialogOpen('generateJson')"
+            >
+              生成JSON
+            </el-button>
+          </div>
+          <div>
+            <el-button
+              v-if="permissions.includes('generateCode')"
+              type="text"
+              size="medium"
+              disabled
+              @click="handleDialogOpen('generateCode')"
+            >
+              生成代码
+            </el-button>
+          </div>
+        </div>
+      </el-popover>
+    </div>
+
+    <th-dialog
+      v-model="dialog.show"
+      :title="dialogTitles[dialog.action]"
+      :modal-append-to-body="false"
+      :showFooter="['importJson', 'importTemplate'].includes(dialog.action)"
+      @on-fullscreen="handleDialogFullscreen"
+      @on-close="handleDialogClose"
+      @on-affirm="handleDialogAffirm"
+    >
+      <template v-if="dialog.action === 'preview'"></template>
+      <template v-else-if="dialog.action === 'importJson'">
+        <el-alert
+          type="info"
+          title="JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可"
+        ></el-alert>
+        <th-code-editor
+          v-model="dialog.data.config"
+          ref="codeEditor"
+        ></th-code-editor>
+      </template>
+      <template v-else-if="dialog.action === 'importTemplate'"></template>
+      <template v-else-if="dialog.action === 'generateJson'">
+        <th-code-editor
+          v-model="dialog.data.config"
+          ref="codeEditor"
+        ></th-code-editor>
+      </template>
+      <template v-else-if="dialog.action === 'generateCode'"></template>
+    </th-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    config: Object,
+    client: String,
+    permissions: Array
+  },
+  data() {
+    return {
+      dialog: {
+        show: false,
+        action: "",
+        data: {}
+      },
+      dialogTitles: {
+        preview: "预览",
+        importJson: "导入JSON",
+        importTemplate: "导入模板",
+        generateJson: "生成JSON",
+        generateCode: "生成代码"
+      }
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleClick(val, data) {
+      this.$emit("click", val, data);
+    },
+    handleDialogOpen(action, data = {}) {
+      switch (action) {
+        case "generateJson":
+          const configText = JSON.stringify(this.config, null, 2);
+          data.config = configText;
+          break;
+
+        default:
+          break;
+      }
+      this.dialog = { show: true, action, data };
+    },
+    handleDialogFullscreen() {
+      this.$refs.codeEditor.resize();
+    },
+    handleDialogAffirm() {
+      const action = this.dialog.action;
+      switch (action) {
+        case "importJson":
+          this.handleClick("import-json", JSON.parse(this.dialog.data.config));
+          break;
+
+        default:
+          break;
+      }
+      this.handleDialogClose();
+    },
+    handleDialogClose() {
+      this.dialog.show = false;
+    },
+    handleExcelFileChange() {},
+    handleGenerateJson() {},
+    handleGenerateCode() {}
+  }
+};
+</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/TableMaking/custom/config.js

@@ -0,0 +1,110 @@
+// 查询配置
+export const search = {
+  show: true,
+  options: []
+};
+
+// 列表配置
+export const table = {
+  options: [],
+  pageInfo: {
+    show: true,
+    options: {
+      pageCount: 0,
+      pageSize: 20,
+      currentPage: 1,
+      total: 0,
+      sizes: [10, 20, 30, 50, 100]
+    }
+  },
+  sort: {
+    type: "1",
+    key: ""
+  },
+  loading: {
+    show: false,
+    text: "加载中",
+    image: ""
+  },
+  empty: {
+    show: true,
+    text: "暂无数据",
+    image: ""
+  },
+  sequence: true
+};
+
+// 按钮配置
+export const tools = {
+  add: {
+    show: true,
+    name: "新增",
+    text: "新增",
+    position: "header",
+    form: "",
+    api: ""
+  },
+  edit: {
+    show: true,
+    name: "编辑",
+    text: "编辑",
+    position: "row",
+    form: "",
+    api: ""
+  },
+  detail: {
+    show: false,
+    name: "查看",
+    text: "查看",
+    position: "row",
+    form: "",
+    api: ""
+  },
+  delete: {
+    show: true,
+    name: "删除",
+    text: "删除",
+    position: "row",
+    form: "",
+    api: ""
+  },
+  batchDelete: {
+    show: false,
+    name: "批量删除",
+    text: "批量删除",
+    position: "header",
+    form: "",
+    api: ""
+  },
+  export: {
+    show: false,
+    name: "导出",
+    text: "导出",
+    position: "header",
+    form: "",
+    api: ""
+  },
+  import: {
+    show: false,
+    name: "导入",
+    text: "导入",
+    position: "header",
+    form: "",
+    api: ""
+  }
+};
+
+// 接口配置
+export const network = {
+  mounted: {
+    method: "get",
+    api: "/list"
+  }
+};
+
+export const tableConfig = {
+  search,
+  table,
+  tools,
+  network
+};

package/packages/TableMaking/generateTable.vue

@@ -248,10 +248,10 @@ export default {
               }
               const dic = toolsItemConfig(key, element);
               dic.form = element.form;
-              if (element.position === 1) {
+              if (element.position === 1 || element.position === 'header') {
                 this.toolsConfig.show = true;
                 this.toolsConfig.options.push(dic);
-              } else if (element.position === 2) {
+              } else if (element.position === 2 || element.position === 'row') {
                 action.hide = false;
                 action.actions.push(dic);
               }