tianheng-ui 0.1.27 → 0.1.29

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

@@ -0,0 +1,41 @@
+<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() {},
+  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,12 +90,13 @@
 <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: {
       type: Object,
       default: () => {
@@ -135,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,
@@ -144,17 +156,25 @@ export default {
       errorMessage: ""
     };
   },
-  created() {
-    this.axios = Axios.init(this.oauthConfig);
-    const code = this.$route.path.split("/").pop();
-    this.id = code;
+  watch: {
+    config(val) {
+      this.tableJson = val;
+      this.initConfig();
+    },
+    oauthConfig(val) {
+      this.initAxios();
+    }
+  },
+  created() {},
+  mounted() {
+    this.tableJson = this.config;
+    this.initAxios();
     this.initConfig();
   },
-  mounted() {},
   methods: {
-    // 初始化组件配置
-    initConfig() {
-      this.initData();
+    // 初始组件网络
+    initAxios() {
+      this.axios = Axios.init(this.oauthConfig);
 
       if (this.oauthConfig.token) {
         const oauthInfo = {
@@ -162,11 +182,6 @@ export default {
           baseUrl: this.oauthConfig.baseUrl
         };
         sessionStorage.setItem("th_oauth_info", JSON.stringify(oauthInfo));
-      }
-
-      const info = sessionStorage.getItem("th_oauth_info");
-      if (info) {
-        this.requestConfigData();
       } else if (this.oauthConfig.oauth) {
         // 模拟授权认证流程
         this.axios({
@@ -181,93 +196,58 @@ export default {
           };
           sessionStorage.setItem("th_oauth_info", JSON.stringify(oauthInfo));
           // this.axios.defaults.baseURL = this.oauthConfig.baseUrl;
-          this.requestConfigData();
         });
-      } else {
-        this.requestConfigData();
       }
     },
-    initData() {
-      this.tableJson = {};
-      this.errorMessage = "";
-    },
-    // 获取配置信息
-    requestConfigData() {
-      this.axios({
-        url: this.network.page.url,
-        method: this.network.page.method,
-        headers: this.network.page.headers,
-        data: { ...this.network.page.params, moduleId: this.id }
-      })
-        .then(res => {
-          const resultData = res.data;
-          if (!resultData) {
-            this.tableJson = null;
-            return;
-          }
-          this.tableJson = JSON.parse(resultData.pageConfig);
-          // 网络请求
-          this.networkConfig = this.tableJson.network;
+    // 处理配置信息
+    initConfig() {
+      // 网络请求
+      this.networkConfig = this.tableJson.network;
 
-          // 搜索栏
-          this.searchConfig = this.tableJson.search;
-          if (this.searchConfig.show) {
-            this.searchConfig.options.map(item => {
-              this.$set(this.searchData, item.prop, item.defaultValue || "");
-            });
-          }
+      // 搜索栏
+      this.searchConfig = this.tableJson.search;
+      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({
-              type: "index",
-              label: "序号"
-            });
-          }
-          const action = {
-            label: "操作",
-            hide: true,
-            slot: "action",
-            fixed: "right",
-            actions: []
-          };
+      // table
+      this.tableConfig = this.tableJson.table;
+      if (this.tableConfig.sequence) {
+        this.tableConfig.options.unshift({
+          type: "index",
+          label: "序号"
+        });
+      }
+      const action = {
+        label: "操作",
+        hide: true,
+        slot: "action",
+        fixed: "right",
+        actions: []
+      };
 
-          // 按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);
-              }
-            }
-          }
-          action.width = action.actions.length * 60 + 20;
-          this.tableJson.table.options.push(action);
+      // tools
+      this.toolsConfig = { show: false, options: [] };
+      // 按position处理按钮，1：公共区，2：行内区
+      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;
+      if (!action.hide) this.tableConfig.options.push(action);
 
-          this.tableConfig = this.tableJson.table;
-          this.requestListData();
-        })
-        .catch(err => {
-          this.errorMessage = err.message;
-          this.tableJson = null;
-          this.$emit("error");
-        });
+      // this.requestListData();
     },
     requestListData() {
       if (!this.networkConfig.mounted) return;
@@ -418,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/index.vue

@@ -30,18 +30,13 @@
 import WidgetTools from "./WidgetTools.vue";
 import WidgetTable from "./widgetTable.vue";
 import WidgetConfig from "./widgetConfig.vue";
-import { deepClone, deepMerge } from "./util/index";
+import { deepClone } from "./util/index";
 import { baseConfig } from "./custom/config";
 export default {
   name: "ThTableMaking",
   components: { WidgetTools, WidgetTable, WidgetConfig },
   props: {
-    config: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
+    config: Object,
 
     /**
      * 表单配置列表。
@@ -88,7 +83,7 @@ export default {
   data() {
     this.baseConfig = deepClone(baseConfig);
     return {
-      tableConfig: this.config,
+      tableConfig: this.baseConfig,
       client: "monitor"
     };
   },
@@ -108,7 +103,7 @@ export default {
     }
   },
   mounted() {
-    this.tableConfig = Object.assign(this.baseConfig, this.tableConfig);
+    this.tableConfig = Object.assign(this.baseConfig, this.config);
   },
   methods: {
     handleNetwork() {

package/packages/TableMaking/widgetConfig.vue

@@ -490,10 +490,14 @@ export default {
   },
   watch: {
     config(val) {
+      this.handleFieldsApiChange(val.table.mounted.api)
       this.handleFields();
     },
     fields(val) {
       this.handleFields();
+    },
+    apiOptions(){
+      this.handleFieldsApiChange(this.config.table.mounted.api)
     }
   },
   computed: {
@@ -602,7 +606,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