tianheng-ui 0.0.92 → 0.0.94

package/packages/FormMaking/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="fm-container">
-    <el-container v-if="widgetFormData.config" class="container-box">
+    <el-container v-if="Object.keys(widgetFormData.config).length" class="container-box">
       <el-main>
         <el-container>
           <!-- 左侧字段区 -->
@@ -264,6 +264,7 @@
               v-if="dialog.preview.visible"
               :data="widgetFormData"
               :value="widgetValue"
+              :oauthConfig="oauthConfig"
               :remote="remoteFuncs"
               :slotKeys="slotKeys"
               :client="client"
@@ -397,6 +398,12 @@ export default {
   },
   props: {
     data: {
+      type: Object,
+      default: () => {
+        return { config: {}, list: [] };
+      }
+    },
+    oauthConfig: {
       type: Object,
       default: () => {
         return {};
@@ -535,23 +542,46 @@ export default {
     }
   },
   created() {
+    this.initConfig();
     this.widgetFormData.config = Object.assign(
       this.baseConfig,
       this.widgetFormData.config
     );
-    if (this.widgetFormData && this.widgetFormData.list.length) {
+    if (
+      this.widgetFormData.list &&
+      this.widgetFormData.list.length
+    ) {
       this.widgetFormSelect = this.widgetFormData.list[0];
+    }else {
+      this.widgetFormData.list = []
     }
   },
-  mounted() {
-    // if (this.data && this.data.config) {
-    //   this.widgetFormData.config = Object.assign(
-    //     this.widgetFormData.config,
-    //     this.data.config
-    //   );
-    // }
-  },
+  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) {
       //文件读取

package/packages/TableMaking/generateTable.vue

@@ -73,29 +73,55 @@
       </th-form-generate>
     </th-dialog>
   </div>
-  <th-empty
-    v-else
-    :image="require('@/assets/images/notData.png')"
-    description="未获取到配置信息，请联系管理员。"
-  >
-  </th-empty>
+  <div v-else>
+    <slot v-if="$slots.empty" name="empty"></slot>
+    <th-empty
+      v-else
+      :image="require('@/assets/images/notData.png')"
+      :description="errorMessage || empty.description"
+    >
+      <th-button type="primary" @click="initConfig">刷新</th-button>
+    </th-empty>
+  </div>
 </template>
 
 <script>
 import Search from "./custom/items/search";
 import Tools from "./custom/items/tools";
-import { toolsItemConfig, formItemConfig, tableItemConfig } from "./util/index";
+import { toolsItemConfig } from "./util/index";
 import * as Axios from "lib/theme-chalk/js/axios";
 export default {
   name: "thTableGenerate",
   components: { Search, Tools },
   props: {
-    config: {
+    oauthConfig: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    empty: {
       type: Object,
       default: () => {
         return {
-          debug: false,
-          appId: ""
+          description: "暂无数据"
+        };
+      }
+    },
+    network: {
+      type: Object,
+      default: () => {
+        return {
+          page: {
+            url: "/viewManage/getViewManageDetailById",
+            method: "POST",
+            params: {}
+          },
+          form: {
+            url: "/formManage/getFormDetailById",
+            method: "POST",
+            params: {}
+          }
         };
       }
     }
@@ -177,10 +203,12 @@ export default {
             updateTime: null
           }
         ]
-      }
+      },
+      errorMessage: ""
     };
   },
   created() {
+    this.axios = Axios.init(this.oauthConfig);
     const code = this.$route.path.split("/").pop();
     this.id = code;
     this.initConfig();
@@ -189,105 +217,146 @@ export default {
   methods: {
     // 初始化组件配置
     initConfig() {
-      this.axios = Axios.init(this.config);
+      this.initData();
       const info = sessionStorage.getItem("th_oauth_info");
       if (info) {
         this.requestConfigData();
-      } else if (this.config.token) {
+      } else if (this.oauthConfig.token) {
         const oauthInfo = {
-          token: this.config.token,
-          baseUrl: this.config.baseUrl
+          token: this.oauthConfig.token,
+          baseUrl: this.oauthConfig.baseUrl
         };
         sessionStorage.setItem("th_oauth_info", JSON.stringify(oauthInfo));
         this.requestConfigData();
-      } else if (this.config.network) {
+      } else if (this.oauthConfig.oauth) {
         // 模拟授权认证流程
         this.axios({
-          url: this.config.network.url,
-          method: this.config.network.method,
-          data: this.config.network.params,
-          headers: this.config.network.headers
+          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.config.baseUrl };
+          const oauthInfo = {
+            token: res.data,
+            baseUrl: this.oauthConfig.baseUrl
+          };
           sessionStorage.setItem("th_oauth_info", JSON.stringify(oauthInfo));
-          // this.axios.defaults.baseURL = this.config.baseUrl;
+          // this.axios.defaults.baseURL = this.oauthConfig.baseUrl;
           this.requestConfigData();
         });
+      } else {
+        this.requestConfigData();
       }
     },
+    initData() {
+      this.tableJson = {};
+      this.errorMessage = "";
+    },
     // 获取配置信息
     requestConfigData() {
-      this.tableJson = tableItemConfig(this.id);
-      if (!this.tableJson) {
-        return;
-      }
-      // 网络请求
-      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.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.viewManage;
+          if (!resultData) {
+            this.tableJson = null;
+            return;
+          }
+          this.tableJson = JSON.parse(resultData.pageConfig);
+          // 网络请求
+          this.networkConfig = this.tableJson.network;
 
-      // 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", actions: [] };
+          // 搜索栏
+          this.searchConfig = this.tableJson.search;
+          if (this.searchConfig.show) {
+            this.searchConfig.options.map(item => {
+              this.$set(this.searchData, item.prop, item.defaultValue || "");
+            });
+          }
 
-      // 按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") {
+          // 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: "selection"
+              type: "index",
+              label: "序号"
             });
           }
-          const dic = toolsItemConfig(key, element);
-          dic.form = element.form;
-          if (element.position === 1) {
-            this.toolsConfig.show = true;
-            this.toolsConfig.options.push(dic);
-          } else if (element.position === 2) {
-            action.hide = false;
-            action.actions.push(dic);
+          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) {
+                this.toolsConfig.show = true;
+                this.toolsConfig.options.push(dic);
+              } else if (element.position === 2) {
+                action.hide = false;
+                action.actions.push(dic);
+              }
+            }
           }
-        }
-      }
-      action.width = action.actions.length * 60 + 20;
-      this.tableJson.table.options.push(action);
+          action.width = action.actions.length * 60 + 20;
+          this.tableJson.table.options.push(action);
 
-      this.tableConfig = this.tableJson.table;
-      this.requestListData();
+          this.tableConfig = this.tableJson.table;
+          this.requestListData();
+        })
+        .catch(err => {
+          this.errorMessage = err.message;
+          this.tableJson = null;
+          this.$emit("error");
+        });
     },
     requestListData() {
       if (!this.networkConfig.mounted) return;
       this.tableConfig.loading.show = true;
       const apiInfo = this.networkConfig.mounted;
       const params = {
-        current: this.tableConfig.pageInfo.options.currentPage,
-        size: this.tableConfig.pageInfo.options.pageSize,
         ...this.searchData
       };
+      if (this.tableConfig.pageInfo.show) {
+        params.current = this.tableConfig.pageInfo.options.currentPage;
+        params.size = this.tableConfig.pageInfo.options.pageSize;
+      }
       this.axios({
         url: apiInfo.api,
         method: apiInfo.method,
+        headers: apiInfo.headers,
         data: params
       })
         .then(res => {
-          const data = res.data.records;
-          this.tableData = data;
           this.tableConfig.loading.show = false;
-          this.tableConfig.pageInfo.options.total = Number(res.data.total);
+          let data = [];
+          if (this.tableConfig.pageInfo.show) {
+            data = res.data.records;
+            this.tableConfig.pageInfo.options.total = Number(res.data.total);
+          } else {
+            data = res.data;
+          }
+          this.tableData = data;
         })
         .catch(err => {
           this.tableConfig.loading.show = false;
@@ -300,7 +369,8 @@ export default {
       this.axios({
         url: apiInfo.api,
         method: apiInfo.method,
-        data
+        headers: apiInfo.headers,
+        data: { ...apiInfo.params, ...data }
       })
         .then(res => {
           this.dialog.action.loading = false;
@@ -317,7 +387,8 @@ export default {
       this.axios({
         url: apiInfo.api,
         method: apiInfo.method,
-        data
+        headers: apiInfo.headers,
+        data: { ...apiInfo.params, ...data }
       })
         .then(res => {
           this.dialog.action.loading = false;
@@ -334,7 +405,8 @@ export default {
       this.axios({
         url: apiInfo.api,
         method: apiInfo.method,
-        data: { ids: this.dialog.data.id }
+        headers: apiInfo.headers,
+        data: { ...apiInfo.params, ids: this.dialog.data.id }
       })
         .then(res => {
           callback(true);
@@ -362,7 +434,8 @@ export default {
           this.axios({
             url: apiInfo.api,
             method: apiInfo.method,
-            data
+            headers: apiInfo.headers,
+            data: { ...apiInfo.params, ...data }
           })
             .then(res => {
               callback(true);
@@ -375,12 +448,28 @@ export default {
         })
         .catch(() => {});
     },
-    requestFormConfigData() {
-      setTimeout(() => {
-        const form = this.dialog.action.form;
-        const config = formItemConfig(form.id);
-        this.formConfig = config;
-      }, 1000);
+    requestFormConfigData(action) {
+      this.axios({
+        url: this.network.form.url,
+        method: this.network.form.method,
+        headers: this.network.form.headers,
+        // data: { id: action.form.id }
+        data: { ...this.network.page.params, id: this.id }
+      })
+        .then(res => {
+          const data = res.data;
+          data.forEach(item => {
+            if (item.type === "0" && action.act === "add") {
+              this.formConfig = JSON.parse(item.pageConfig);
+              return;
+            }
+            if (item.type === "1" && action.act === "edit") {
+              this.formConfig = JSON.parse(item.pageConfig);
+              return;
+            }
+          });
+        })
+        .catch(err => {});
     },
     handleSearchSubmit(val) {
       this.requestListData();
@@ -393,7 +482,7 @@ export default {
       switch (action.act) {
         case "add":
           this.dialog = { show: true, data: {}, action: action };
-          this.requestFormConfigData();
+          this.requestFormConfigData(action);
           break;
         case "batchDelete":
           this.dialog = { show: false, data: {}, action: action };
@@ -419,11 +508,11 @@ export default {
       switch (action.act) {
         case "edit":
           this.dialog = { show: true, data: item, action: action };
-          this.requestFormConfigData();
+          this.requestFormConfigData(action);
           break;
         case "detail":
           this.dialog = { show: true, data: item, action: action };
-          this.requestFormConfigData();
+          this.requestFormConfigData(action);
           break;
         case "delete":
           this.dialog = { show: false, data: item, action: action };

package/packages/TableMaking/util/index.js

@@ -59,9 +59,10 @@ const toolsConfig = {
 };
 
 export const toolsItemConfig = (key, data) => {
-  const config = toolsConfig[key] || {};
+  let config = toolsConfig[key] || {};
+  config = JSON.parse(JSON.stringify(config));
   config.name = data.name;
-  return JSON.parse(JSON.stringify(config));
+  return config;
 };
 
 const formConfig = {
@@ -224,7 +225,7 @@ const formConfig = {
       ]
     }
   },
-  '2':{}
+  "2": {}
 };
 
 export const formItemConfig = key => {

package/packages/TableMaking/widgetConfig.vue

@@ -109,7 +109,18 @@
               </el-select>
             </el-form-item>
           </el-collapse-item> -->
-          <el-collapse-item title="按钮配置" name="3">
+          <el-collapse-item name="3">
+            <template slot="title">
+              <div class="collapse-title">
+                <div>按钮配置</div>
+                <div
+                  class="collapse-title-action"
+                  @click.stop="handleActionConfig"
+                >
+                  配置
+                </div>
+              </div>
+            </template>
             <el-form-item label-width="90px">
               <el-checkbox v-model="tableConfig.tools.add.show" slot="label"
                 >新增</el-checkbox
@@ -176,11 +187,6 @@
               ></el-input>
             </el-form-item>
           </el-collapse-item>
-          <!-- <el-collapse-item title="权限设置" name="4">
-            <div>
-              与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
-            </div>
-          </el-collapse-item> -->
         </el-collapse>
       </el-form>
     </div>
@@ -297,6 +303,7 @@ export default {
       this.table.isIndeterminate = false;
       this.handleChange();
     },
+    handleActionConfig() {},
     getJson() {
       return JSON.parse(JSON.stringify(this.tableConfig));
     }
@@ -346,6 +353,21 @@ export default {
 
   .tableConfig {
     height: calc(100% - 45px);
+
+    .collapse-title {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      padding-right: 10px;
+
+      .collapse-title-action {
+        transition: 0.25s;
+      }
+
+      .collapse-title-action:hover {
+        color: #409eff;
+      }
+    }
   }
 }
 </style>