tianheng-ui 0.1.12 → 0.1.14

package/packages/TableMaking/index.vue

@@ -1,189 +1,94 @@
 <template>
-  <div class="th-table-making">
-    <el-container>
-      <el-container>
-        <el-header>
-          <div class="client">
-            <el-button
-              :class="{ active: client === 'monitor' }"
-              type="text"
-              size="medium"
-              icon="el-icon-monitor"
-              @click="client = 'monitor'"
-            >
-              桌面端
-            </el-button>
-            <!-- <el-button
-              :class="{ active: client === 'mobile' }"
-              type="text"
-              size="medium"
-              icon="el-icon-mobile"
-              @click="client = 'mobile'"
-            >
-              移动端
-            </el-button> -->
-          </div>
-          <slot name="action"></slot>
-        </el-header>
-        <el-main>
-          <widget-table
-            :searchFields="searchFields"
-            :tableFields="tableFields"
-            @move="handleMoveChange"
-          ></widget-table>
-        </el-main>
-      </el-container>
-      <el-aside width="300px">
-        <widget-config
-          :fields="fields"
-          ref="configRef"
-          @fields-change="handleFieldsChange"
-        ></widget-config>
-      </el-aside>
-    </el-container>
+  <div class="th-table-making th-flex_box">
+    <div class="th-fiex_content">
+      <widget-tools
+        :config="config"
+        :client="client"
+        :permissions="permissions"
+        @click="handleToolsClick"
+      >
+        <slot name="action"></slot>
+      </widget-tools>
+      <widget-table
+        style="height:calc(100% - 45px)"
+        :config="config"
+      ></widget-table>
+    </div>
+    <div class="th-flex_aside th-is_border_left" style="width:300px">
+      <widget-config
+        :config="config"
+        :fields.sync="fields"
+        :formOptions="formOptions"
+        :apiOptions="apiOptions"
+        ref="configRef"
+      ></widget-config>
+    </div>
   </div>
 </template>
 
 <script>
+import WidgetTools from "./WidgetTools.vue";
 import WidgetTable from "./widgetTable.vue";
 import WidgetConfig from "./widgetConfig.vue";
+import { deepClone, deepMerge } from "./util/index";
+import { tableConfig } from "./custom/config";
 export default {
   name: "ThTableMaking",
-  components: { WidgetTable, WidgetConfig },
+  components: { WidgetTools, WidgetTable, WidgetConfig },
   props: {
-    fields: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    config: {
+    data: {
       type: Object,
       default: () => {
-        return {};
+        return deepClone(tableConfig);
       }
+    },
+    fields: Array,
+    formOptions: Array,
+    apiOptions: Array,
+    permissions: {
+      type: Array,
+      default: () => [
+        "monitor",
+        "mobile",
+        "upload",
+        "clearable",
+        "preview",
+        "generateCode",
+        "generateJson"
+      ]
     }
   },
   data() {
     return {
-      searchFields: [],
-      tableFields: [],
+      config: this.data,
       client: "monitor"
     };
   },
   watch: {
-    fields: {
-      handler(val, oldVal) {
-        if (oldVal.length === 0) {
-          this.initConfig();
-        }
-      },
-      deep: true
+    config: {
+      deep: true,
+      handler: function(val) {
+        this.$emit("update:data", val);
+      }
     },
-    config(val) {
-      this.initConfig();
+    data(val) {
+      this.config = val;
     }
   },
-  mounted() {
-    this.initConfig();
-  },
+  mounted() {},
   methods: {
-    initConfig() {
-      if (!this.config || Object.keys(this.config).length === 0) return;
+    handleToolsClick(action, data) {
+      switch (action) {
+        case "import-json":
+          this.config = data;
+          break;
 
-      this.$refs.configRef.tableConfig = this.config;
-
-      const searchFields = [];
-      const searchFieldsIndexs = [];
-      if (this.config.search) {
-        const searchOptions = this.config.search.options;
-        for (const item of searchOptions) {
-          for (let i = 0; i < this.fields.length; i++) {
-            const element = this.fields[i];
-            if (element.prop === item.prop) {
-              searchFields.push(item);
-              searchFieldsIndexs.push(i);
-            }
-          }
-        }
-        this.searchFields = searchFields;
-        this.$refs.configRef.search = {
-          fields: searchFieldsIndexs,
-          isCheckAll: searchFieldsIndexs.length === this.fields.length,
-          isIndeterminate:
-            searchFieldsIndexs.length > 0 &&
-            searchFieldsIndexs.length < this.fields.length
-        };
-      }
-
-      const tableFields = [];
-      const tableFieldsIndexs = [];
-      if (this.config.table) {
-        const tableOptions = this.config.table.options;
-        for (const item of tableOptions) {
-          for (let i = 0; i < this.fields.length; i++) {
-            const element = this.fields[i];
-            if (element.prop === item.prop) {
-              tableFields.push(item);
-              tableFieldsIndexs.push(i);
-            }
-          }
-        }
-        this.tableFields = tableFields;
-        this.$refs.configRef.table = {
-          fields: tableFieldsIndexs,
-          isCheckAll: tableFieldsIndexs.length === this.fields.length,
-          isIndeterminate:
-            tableFieldsIndexs.length > 0 &&
-            tableFieldsIndexs.length < this.fields.length
-        };
-      }
-    },
-    handleFieldsChange(val) {
-      const type = val.type;
-      const data = val.data;
-      const list = [];
-      data.forEach(i => {
-        list.push(this.fields[i]);
-      });
-      if (type === 0) {
-        this.searchFields = list;
-      } else {
-        this.tableFields = list;
-      }
-    },
-    handleMoveChange(val) {
-      const newIndex = val.data.newIndex;
-      const oldIndex = val.data.oldIndex;
-      if (val.type === "search") {
-        let list = this.$refs.configRef.search.fields;
-        list = this.handleMobile(list, oldIndex, newIndex);
-        this.$refs.configRef.search.fields = list;
-        this.searchFields = this.handleMobile(this.searchFields, oldIndex, newIndex);
-      } else {
-        let list = this.$refs.configRef.table.fields;
-        list = this.handleMobile(list, oldIndex, newIndex);
-        this.$refs.configRef.table.fields = list;
-        this.tableFields = this.handleMobile(this.tableFields, oldIndex, newIndex);
-      }
-    },
-    handleMobile(list, oldIndex, newIndex) {
-      const item = JSON.parse(JSON.stringify(list[oldIndex]));
-      if (oldIndex < newIndex) {
-        list.splice(newIndex + 1, 0, item);
-        list.splice(oldIndex, 1);
-      }
-      if (oldIndex > newIndex) {
-        list.splice(newIndex, 0, item);
-        list.splice(oldIndex + 1, 1);
+        default:
+          break;
       }
-      return list;
     },
     getJson() {
-      const tableConfig = this.$refs.configRef.getJson();
-      tableConfig.search.options = this.searchFields;
-      tableConfig.table.options = this.tableFields;
-      return tableConfig;
+      return this.config;
     }
   }
 };

package/packages/TableMaking/util/index.js

@@ -425,9 +425,62 @@ const tableConfig = {
       }
     }
   }
-}; 
+};
 
 export const tableItemConfig = key => {
   const config = tableConfig[key] || null;
   return JSON.parse(JSON.stringify(config));
 };
+
+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;
+};
+
+export const deepMerge = (target, other) => {
+  const targetToString = Object.prototype.toString.call(target);
+  const otherToString = Object.prototype.toString.call(target);
+  if (
+    targetToString === "[object Object]" &&
+    otherToString === "[object Object]"
+  ) {
+    for (let [key, val] of Object.entries(other)) {
+      if (!target[key]) {
+        target[key] = val;
+      } else {
+        target[key] = deepMerge(target[key], val);
+      }
+    }
+  } else if (
+    targetToString === "[object Array]" &&
+    otherToString === "[object Array]"
+  ) {
+    for (let [key, val] of Object.entries(other)) {
+      if (target[key]) {
+        target[key] = deepMerge(target[key], val);
+      } else {
+        target.push(val);
+      }
+    }
+  }
+  return target;
+};