tianheng-ui 0.0.91 → 0.0.93

package/packages/FormMaking/index.vue

@@ -264,6 +264,7 @@
               v-if="dialog.preview.visible"
               :data="widgetFormData"
               :value="widgetValue"
+              :oauthConfig="oauthConfig"
               :remote="remoteFuncs"
               :slotKeys="slotKeys"
               :client="client"
@@ -402,6 +403,12 @@ export default {
         return {};
       }
     },
+    oauthConfig: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
     tools: {
       type: Array,
       default: () => {
@@ -535,6 +542,7 @@ export default {
     }
   },
   created() {
+    this.initConfig();
     this.widgetFormData.config = Object.assign(
       this.baseConfig,
       this.widgetFormData.config
@@ -543,15 +551,32 @@ export default {
       this.widgetFormSelect = this.widgetFormData.list[0];
     }
   },
-  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,142 @@ 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",
+            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 +365,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 +383,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 +401,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 +430,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 +444,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 +478,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 +504,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/index.vue

@@ -13,7 +13,7 @@
             >
               桌面端
             </el-button>
-            <el-button
+            <!-- <el-button
               :class="{ active: client === 'mobile' }"
               type="text"
               size="medium"
@@ -21,7 +21,7 @@
               @click="client = 'mobile'"
             >
               移动端
-            </el-button>
+            </el-button> -->
           </div>
           <slot name="action"></slot>
         </el-header>

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

@@ -68,10 +68,10 @@
                 clearable
               >
                 <el-option
-                  v-for="item in sortFieldOptions"
-                  :key="item.value"
+                  v-for="item in fields"
+                  :key="item.prop"
                   :label="item.label"
-                  :value="item.value"
+                  :value="item.prop"
                 >
                 </el-option>
               </el-select>
@@ -233,7 +233,7 @@ export default {
               sizes: [10, 20, 30, 50, 100]
             }
           },
-          sort: { type: "1", key: "createTime" },
+          sort: { type: "1", key: "create_time" },
           loading: { show: false, text: "加载中", image: "" },
           empty: { show: true, text: "暂无数据", image: "" },
           sequence: true //是否显示序号
@@ -248,8 +248,7 @@ export default {
           import: { show: false, name: "导入", position: 1 }
         },
         network: {}
-      },
-      sortFieldOptions: [{ label: "创建时间", value: "createTime" }]
+      }
     };
   },
   mounted() {},

package/packages/TableMaking/widgetTable.vue

@@ -5,7 +5,7 @@
       <div class="table-header">
         <div>拖动</div>
         <div>列名</div>
-        <div>字段</div>
+        <!-- <div>字段</div> -->
         <div>类型</div>
         <div>默认值</div>
         <div>数据来源</div>
@@ -30,9 +30,14 @@
             <i class="iconfont icon-drag drag-widget"></i>
           </div>
           <div>{{ item.label }}</div>
-          <div>{{ item.prop }}</div>
+          <!-- <div>{{ item.prop }}</div> -->
           <div>
-            <el-select v-model="item.type" placeholder="请选择" size="mini">
+            <el-select
+              v-model="item.type"
+              placeholder="请选择"
+              size="mini"
+              disabled
+            >
               <el-option
                 v-for="item in componentOptions"
                 :key="item.value"
@@ -65,7 +70,7 @@
       <div class="table-header">
         <div>拖动</div>
         <div>列名</div>
-        <div>字段</div>
+        <!-- <div>字段</div> -->
         <div>排序</div>
         <div>对齐</div>
         <div>宽度</div>
@@ -90,7 +95,7 @@
             <i class="iconfont icon-drag drag-widget"></i>
           </div>
           <div>{{ item.label }}</div>
-          <div>{{ item.prop }}</div>
+          <!-- <div>{{ item.prop }}</div> -->
           <div><el-checkbox v-model="item.sortable"></el-checkbox></div>
           <div>
             <el-select v-model="item.align" placeholder="请选择" size="mini">