tianheng-ui 0.1.28 → 0.1.30

package/packages/TableMaking/custom/items/table/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="generateTable-table">
+    <el-table
+      :style="config.style.table.customStyle"
+      :data="data"
+      :border="config.style.table.border"
+      :height="config.style.table.height"
+      :max-height="config.style.table.maxHeight"
+    >
+      <el-table-column
+        v-for="item in config.options"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :width="item.width || 180"
+      >
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: Array,
+    config: Object
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {
+    console.log(this.config)
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.generateTable-table {
+  width: 100%;
+}
+</style>

package/packages/TableMaking/custom/items/tools/index.vue

@@ -1,16 +1,22 @@
 <template>
-  <div class="th-table-tools">
-    <el-button
-      v-for="(item, index) in options"
-      :key="index"
-      :style="item.style"
-      :type="item.type"
-      :icon="item.icon"
-      :disabled="item.disabled || disabled[item.act]"
-      :loading="item.loading"
-      @click="handleClick(item)"
-      >{{ item.name }}</el-button
-    >
+  <div class="generateTable-tools">
+    <el-form :inline="true">
+      <el-form-item v-for="item in options" :key="item.type">
+        <el-button
+          :style="item.style.customStyle"
+          :type="item.style.type"
+          :icon="item.style.icon"
+          :plain="item.style.plain"
+          :round="item.style.round"
+          :circle="item.style.circle"
+          :size="item.style.size"
+          :disabled="item.style.disabled || disabled[item.act]"
+          :loading="item.style.loading"
+          @click="handleClick(item)"
+          >{{ item.name }}</el-button
+        >
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
@@ -36,14 +42,14 @@ export default {
   },
   methods: {
     handleClick(item) {
-      this.$emit("on-click", item);
+      this.$emit("click", item);
     }
   }
 };
 </script>
 
 <style lang="less" scoped>
-.th-table-tools {
-  margin-bottom: 10px;
+.generateTable-tools {
+  width: 100%;
 }
 </style>

package/packages/TableMaking/generateTable.vue

@@ -5,8 +5,8 @@
       v-if="searchConfig.show"
       :data="searchData"
       :options="searchConfig.options"
-      @on-search="requestListData"
-      @on-reset="requestListData"
+      @search="requestListData"
+      @reset="requestListData"
     />
 
     <!-- 菜单栏 -->
@@ -17,11 +17,13 @@
         batchDelete: tableSelectionData.length === 0,
         export: tableSelectionData.length === 0
       }"
-      @on-click="handleToolsClick"
+      @click="handleToolsClick"
     />
 
+    <STable v-if="tableConfig" :data="tableData" :config="tableConfig"></STable>
+
     <!-- 表格 -->
-    <th-table
+    <!-- <th-table
       v-if="tableConfig.options.length"
       ref="tableRef"
       :data="tableData"
@@ -53,7 +55,7 @@
         >
         </th-table-action>
       </template>
-    </th-table>
+    </th-table> -->
 
     <!-- 表单 -->
     <th-dialog
@@ -88,11 +90,11 @@
 <script>
 import Search from "./custom/items/search";
 import Tools from "./custom/items/tools";
-import { toolsItemConfig } from "./util/index";
+import STable from "./custom/items/table";
 import * as Axios from "lib/theme-chalk/js/axios";
 export default {
   name: "thTableGenerate",
-  components: { Search, Tools },
+  components: { Search, Tools, STable },
   props: {
     config: Object,
     oauthConfig: {
@@ -136,8 +138,17 @@ export default {
       searchConfig: { show: false, options: [] },
       searchData: {},
       toolsConfig: { show: false, options: [] },
-      tableConfig: { options: [], pageInfo: {} },
-      tableData: [],
+      tableConfig: null,
+      tableData: [
+        { id: 1 },
+        { id: 2 },
+        { id: 3 },
+        { id: 4 },
+        { id: 5 },
+        { id: 6 },
+        { id: 7 },
+        { id: 8 }
+      ],
       tableSelectionData: [],
       dialog: { show: false, data: {}, action: {} },
       formConfig: null,
@@ -195,19 +206,14 @@ export default {
 
       // 搜索栏
       this.searchConfig = this.tableJson.search;
-      if (this.searchConfig.show) {
-        this.searchConfig.options.map(item => {
-          this.$set(this.searchData, item.prop, item.defaultValue || "");
-        });
-      }
+      this.searchConfig.options.map(item => {
+        this.$set(this.searchData, item.prop, item.defaultValue || "");
+      });
 
       // table
-      for (let i = 0; i < this.tableJson.table.options.length; i++) {
-        const element = this.tableJson.table.options[i];
-        delete element.type;
-      }
-      if (this.tableJson.table.sequence) {
-        this.tableJson.table.options.unshift({
+      this.tableConfig = this.tableJson.table;
+      if (this.tableConfig.sequence) {
+        this.tableConfig.options.unshift({
           type: "index",
           label: "序号"
         });
@@ -220,32 +226,28 @@ export default {
         actions: []
       };
 
+      // tools
+      this.toolsConfig = { show: false, options: [] };
       // 按position处理按钮，1：公共区，2：行内区
-      for (const key in this.tableJson.tools) {
-        if (Object.hasOwnProperty.call(this.tableJson.tools, key)) {
-          const element = this.tableJson.tools[key];
-          if (!element.show) continue;
-          if (key === "batchDelete") {
-            this.tableJson.table.options.unshift({
-              type: "selection"
-            });
-          }
-          const dic = toolsItemConfig(key, element);
-          dic.form = element.form;
-          if (element.position === 1 || element.position === "header") {
-            this.toolsConfig.show = true;
-            this.toolsConfig.options.push(dic);
-          } else if (element.position === 2 || element.position === "row") {
-            action.hide = false;
-            action.actions.push(dic);
-          }
+      Object.values(this.tableJson.tools).map(item => {
+        if (!item.show) return;
+        if (item.type === "batchDelete") {
+          this.tableConfig.options.unshift({
+            type: "selection"
+          });
         }
-      }
+        if (item.position === 1 || item.position === "header") {
+          this.toolsConfig.show = true;
+          this.toolsConfig.options.push(item);
+        } else if (item.position === 2 || item.position === "row") {
+          action.hide = false;
+          action.actions.push(item);
+        }
+      });
       action.width = action.actions.length * 60 + 20;
-      this.tableJson.table.options.push(action);
+      if (!action.hide) this.tableConfig.options.push(action);
 
-      this.tableConfig = this.tableJson.table;
-      this.requestListData();
+      // this.requestListData();
     },
     requestListData() {
       if (!this.networkConfig.mounted) return;
@@ -396,7 +398,7 @@ export default {
     },
     handleToolsClick(action) {
       console.log("handleToolsClick =>", action);
-      switch (action.act) {
+      switch (action.type) {
         case "add":
           this.dialog = { show: true, data: {}, action: action };
           this.requestFormConfigData(action);

package/packages/TableMaking/widgetConfig.vue

@@ -186,6 +186,14 @@
               <i class="el-icon-set-up" @click="handleActionConfig(item)"></i>
             </div>
           </el-collapse-item>
+          <el-collapse-item
+            title="table 样式配置（电脑端）"
+            name="group-style_table"
+          >
+            <el-form-item label="是否边框">
+              <el-switch v-model="config.table.style.table.border"> </el-switch>
+            </el-form-item>
+          </el-collapse-item>
           <el-collapse-item
             title="cell 样式配置（移动端）"
             name="group-style_cell"
@@ -351,6 +359,7 @@
                 :icon="dialog.data.style.icon"
                 :plain="dialog.data.style.plain"
                 :round="dialog.data.style.round"
+                :circle="dialog.data.style.circle"
                 :size="dialog.data.style.size"
                 >{{ dialog.data.text }}</el-button
               >
@@ -366,6 +375,7 @@
                 <el-radio label="info">信息按钮</el-radio>
                 <el-radio label="warning">警告按钮</el-radio>
                 <el-radio label="danger">危险按钮</el-radio>
+                <el-radio label="text">文字按钮</el-radio>
               </el-radio-group>
             </el-form-item>
             <el-form-item label="按钮大小">
@@ -383,7 +393,7 @@
               <el-switch v-model="dialog.data.style.round"> </el-switch>
             </el-form-item>
             <el-form-item label="是否圆型">
-              <el-switch v-model="dialog.data.style.round"> </el-switch>
+              <el-switch v-model="dialog.data.style.circle"> </el-switch>
             </el-form-item>
             <el-form-item label="按钮图标">
               <th-icons v-model="dialog.data.style.icon"></th-icons>
@@ -465,11 +475,12 @@ export default {
         "group-pageInfo",
         "group-sort",
         "group-hint",
+        "group-network",
+        "group-button",
+        "group-style_table",
         "group-style_cell",
         "group-style_title",
-        "group-style_value",
-        "group-network",
-        "group-button"
+        "group-style_value"
       ],
       formRules: {
         "table.fieldsType": [
@@ -490,14 +501,14 @@ export default {
   },
   watch: {
     config(val) {
-      this.handleFieldsApiChange(val.table.mounted.api)
+      this.handleFieldsApiChange(val.table.mounted.api);
       this.handleFields();
     },
     fields(val) {
       this.handleFields();
     },
-    apiOptions(){
-      this.handleFieldsApiChange(this.config.table.mounted.api)
+    apiOptions() {
+      this.handleFieldsApiChange(this.config.table.mounted.api);
     }
   },
   computed: {
@@ -606,7 +617,7 @@ export default {
             label: item.note || item.name,
             alias: item.name,
             prop: item.name,
-            type: "input",
+            elType: "input",
             align: "left"
           };
         });

package/packages/TableMaking/widgetTable.vue

@@ -31,11 +31,10 @@
           <div class="table-item-custom drag">
             <i class="iconfont icon-drag drag-widget"></i>
           </div>
-          <div>{{ item.label }}</div>
-          <!-- <div>{{ item.prop }}</div> -->
+          <el-input v-model="item.label" size="mini"></el-input>
           <div>
             <el-select
-              v-model="item.type"
+              v-model="item.elType"
               placeholder="请选择"
               size="mini"
               disabled
@@ -103,8 +102,7 @@
           <div class="table-item-custom drag">
             <i class="iconfont icon-drag drag-widget"></i>
           </div>
-          <div>{{ item.label }}</div>
-          <!-- <div>{{ item.prop }}</div> -->
+          <el-input v-model="item.label" size="mini"></el-input>
           <div>
             <el-select v-model="item.align" placeholder="请选择" size="mini">
               <el-option