tianheng-ui 0.0.80 → 0.0.82

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,

package/packages/FormMaking/GenerateForm.vue

@@ -17,7 +17,7 @@
         :models.sync="models"
         :widget="item"
         :slotKeys="slotKeys"
-        :remote="remote"
+        :remote="remoteData"
         :config="formJson.config"
         :prop="item.type === 'grid' ? '' : item.model"
         :componentsData="componentsData"
@@ -44,7 +44,7 @@
         :models.sync="models"
         :widget="item"
         :slotKeys="slotKeys"
-        :remote="remote"
+        :remote="remoteData"
         :config="formJson.config"
         :prop="item.type === 'grid' ? '' : item.model"
         :componentsData="componentsData"
@@ -71,7 +71,7 @@ export default {
         return {};
       }
     },
-    remote: {
+    remoteData: {
       type: Object,
       default: () => {
         return {};

package/packages/FormMaking/GenerateFormItem.vue

@@ -728,18 +728,14 @@ export default {
     }
   },
   created() {
-    if (
-      this.widget.options.remote &&
-      this.remote[this.widget.options.remoteFunc]
-    ) {
-      this.remote[this.widget.options.remoteFunc](data => {
-        this.widget.options.remoteOptions = data.map(item => {
-          return {
-            value: item[this.widget.options.props.value],
-            label: item[this.widget.options.props.label],
-            children: item[this.widget.options.props.children]
-          };
-        });
+    if (this.widget.options.remote) {
+      const remoteData = this.remote[this.widget.model] || [];
+      this.widget.options.remoteOptions = remoteData.map(item => {
+        return {
+          value: item[this.widget.options.props.value],
+          label: item[this.widget.options.props.label],
+          children: item[this.widget.options.props.children]
+        };
       });
     }
 
@@ -747,9 +743,8 @@ export default {
       this.widget.type === "upload" &&
       this.remote[this.widget.options.remoteFunc]
     ) {
-      this.remote[this.widget.options.remoteFunc](data => {
-        this.widget.options.remoteApi = data;
-      });
+      const remoteData = this.remote[this.widget.options.remoteFunc] || {};
+      this.widget.options.remoteApi = remoteData;
     }
   },
   mounted() {

package/packages/FormMaking/index.vue

@@ -396,6 +396,7 @@ export default {
     GenerateForm
   },
   props: {
+    formName: String,
     data: {
       type: Object,
       default: () => {
@@ -526,6 +527,7 @@ export default {
       deep: true,
       handler: function(val) {
         this.$emit("update:data", val);
+        this.$emit("on-change", val);
       }
     },
     data(val) {
@@ -538,7 +540,10 @@ export default {
       this.widgetFormSelect = this.data.list[0];
     }
     if (this.data && this.data.config) {
-      this.widgetFormData.config = this.data.config;
+      this.widgetFormData.config = Object.assign(
+        this.widgetFormData.config,
+        this.data.config
+      );
     }
   },
   methods: {

package/packages/Table/search.vue

@@ -136,6 +136,9 @@ export default {
       this.$emit("on-search", this.params);
     },
     doReset() {
+      this.options.map(item => {
+        this.$set(this.params, item.prop, item.defaultValue || "");
+      });
       this.$emit("on-reset", this.params);
     }
   }

package/packages/TableMaking/generateTable.vue

@@ -5,8 +5,8 @@
       v-if="searchConfig.show"
       :data="searchData"
       :options="searchConfig.options"
-      @on-search="handleSearchSubmit"
-      @on-reset="handleSearchReset"
+      @on-search="requestListData"
+      @on-reset="requestListData"
     />
 
     <!-- 菜单栏 -->
@@ -67,12 +67,10 @@
         v-if="formConfig"
         :data="formConfig"
         :value="dialog.data"
+        :remoteData="remoteData"
         ref="formGenerate"
       >
       </th-form-generate>
-      <!-- <span slot="footer">
-        <th-table-tools :options="dialogOptions" @on-click="handleToolsClick" />
-      </span> -->
     </th-dialog>
   </div>
 </template>
@@ -80,30 +78,27 @@
 <script>
 import Search from "./custom/items/search";
 import Tools from "./custom/items/tools";
-import { toolsItemConfig, formItemConfig } from "./util/index";
+import { toolsItemConfig, formItemConfig, tableItemConfig } from "./util/index";
 import * as Axios from "./util/axios";
 export default {
   name: "thTableGenerate",
   components: { Search, Tools },
   props: {
-    data: {
+    config: {
       type: Object,
       default: () => {
-        return {};
-      }
-    },
-    apiConfig: {
-      type: Object,
-      default: () => {
-        return {};
+        return {
+          debug: false,
+          appId: ""
+        };
       }
     }
   },
   data() {
     return {
-      tableJson: JSON.parse(JSON.stringify(this.data)),
-      network: {},
+      tableJson: {},
       axios: null,
+      networkConfig: {},
       searchConfig: { show: false, options: [] },
       searchData: {},
       toolsConfig: { show: false, options: [] },
@@ -111,31 +106,105 @@ export default {
       tableData: [],
       tableSelectionData: [],
       dialog: { show: false, data: {}, action: {} },
-      formConfig: null
-    };
-  },
-  watch: {
-    data(val) {
-      this.tableJson = val;
-      this.initConfig();
-    },
-    tableJson: {
-      deep: true,
-      handler(val) {
-        this.$emit("update:data", val);
+      formConfig: null,
+      remoteData: {
+        projectTypeId: [
+          {
+            id: "1597785308467281921",
+            name: "自然资源",
+            sort: "1",
+            tenantId: "1514528042264793089",
+            createBy: "舒浪",
+            createTime: 1669776678000,
+            updateBy: "舒浪",
+            updateTime: 1669787428000
+          },
+          {
+            id: "1597785379552346114",
+            name: "智慧政务",
+            sort: "2",
+            tenantId: "1514528042264793089",
+            createBy: "舒浪",
+            createTime: 1669776695000,
+            updateBy: "舒浪",
+            updateTime: 1669776893000
+          },
+          {
+            id: "1597785424695640065",
+            name: "数字乡村",
+            sort: "3",
+            tenantId: "1514528042264793089",
+            createBy: "舒浪",
+            createTime: 1669776705000,
+            updateBy: null,
+            updateTime: null
+          },
+          {
+            id: "1597885800635691009",
+            name: "测试分类啊啊啊",
+            sort: "0",
+            tenantId: "1514528042264793089",
+            createBy: "舒浪",
+            createTime: 1669800637000,
+            updateBy: null,
+            updateTime: null
+          },
+          {
+            id: "1597886150885240833",
+            name: "123123123",
+            sort: "0",
+            tenantId: "1514528042264793089",
+            createBy: "舒浪",
+            createTime: 1669800720000,
+            updateBy: null,
+            updateTime: null
+          },
+          {
+            id: "1597886566523990017",
+            name: "2222",
+            sort: "0",
+            tenantId: "1514528042264793089",
+            createBy: "舒浪",
+            createTime: 1669800819000,
+            updateBy: null,
+            updateTime: null
+          }
+        ]
       }
-    }
+    };
   },
   created() {
-    this.axios = Axios.init(this.apiConfig);
-  },
-  mounted() {
     this.initConfig();
   },
+  mounted() {},
   methods: {
+    // 初始化组件配置
     initConfig() {
+      this.axios = Axios.init(this.config);
+      const info = sessionStorage.getItem("th_oauth_info");
+      if (info) {
+        const code = this.$route.params.id;
+        this.requestConfigData(code);
+      } else {
+        // 模拟授权认证流程
+        this.axios({
+          url: this.config.network.url,
+          method: this.config.network.method,
+          data: this.config.network.params,
+          headers: this.config.network.headers
+        }).then(res => {
+          const oauthInfo = { token: res.data };
+          sessionStorage.setItem("th_oauth_info", JSON.stringify(oauthInfo));
+          const code = this.$route.params.id;
+          this.requestConfigData(code);
+        });
+      }
+    },
+    // 获取配置信息
+    requestConfigData(code) {
+      this.tableJson = tableItemConfig(code);
       // 网络请求
-      this.network = this.tableJson.network;
+      this.networkConfig = this.tableJson.network;
 
       // 搜索栏
       this.searchConfig = this.tableJson.search;
@@ -162,8 +231,7 @@ export default {
           if (!element.show) continue;
           if (key === "batchDelete") {
             this.tableJson.table.options.unshift({
-              type: "selection",
-              label: ""
+              type: "selection"
             });
           }
           const dic = toolsItemConfig(key, element);
@@ -184,9 +252,9 @@ export default {
       this.requestListData();
     },
     requestListData() {
-      if (!this.network.mounted) return;
+      if (!this.networkConfig.mounted) return;
       this.tableConfig.loading.show = true;
-      const apiInfo = this.network.mounted;
+      const apiInfo = this.networkConfig.mounted;
       const params = {
         current: this.tableConfig.pageInfo.options.currentPage,
         size: this.tableConfig.pageInfo.options.pageSize,
@@ -208,9 +276,9 @@ export default {
         });
     },
     requestAddData(data) {
-      if (!this.network.add) return;
+      if (!this.networkConfig.add) return;
       this.dialog.action.loading = true;
-      const apiInfo = this.network.add;
+      const apiInfo = this.networkConfig.add;
       this.axios({
         url: apiInfo.api,
         method: apiInfo.method,
@@ -225,9 +293,9 @@ export default {
         });
     },
     requestEditData(data) {
-      if (!this.network.edit) return;
+      if (!this.networkConfig.edit) return;
       this.dialog.action.loading = true;
-      const apiInfo = this.network.edit;
+      const apiInfo = this.networkConfig.edit;
       this.axios({
         url: apiInfo.api,
         method: apiInfo.method,
@@ -242,9 +310,9 @@ export default {
         });
     },
     requestDeleteData(data, callback) {
-      if (!this.network.delete) return;
+      if (!this.networkConfig.delete) return;
       this.dialog.action.loading = true;
-      const apiInfo = this.network.delete;
+      const apiInfo = this.networkConfig.delete;
       this.axios({
         url: apiInfo.api,
         method: apiInfo.method,
@@ -272,6 +340,7 @@ export default {
     },
     handleSearchReset(val) {
       console.log("handleSearchReset =>", val);
+      this.requestListData();
     },
     handleToolsClick(action) {
       console.log("handleToolsClick =>", action);
@@ -305,7 +374,7 @@ export default {
     },
     handlePagingChange(val) {
       console.log("handlePagingChange =>", val);
-      this.requestListData()
+      this.requestListData();
     },
     handleSelectionChange(val) {
       console.log("handleSelectionChange =>", val);

package/packages/TableMaking/index.vue

@@ -56,6 +56,12 @@ export default {
       default: () => {
         return [];
       }
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {};
+      }
     }
   },
   data() {
@@ -65,8 +71,36 @@ export default {
       client: "monitor"
     };
   },
-  mounted() {},
+  watch: {
+    fields(val) {
+      this.initConfig();
+    },
+    config(val) {
+      this.initConfig();
+    }
+  },
+  mounted() {
+    this.initConfig();
+  },
   methods: {
+    initConfig() {
+      this.searchFields = [];
+      const searchFieldsIndexs = [];
+      if (this.config.search) {
+        const search = this.config.search.options;
+        for (const item of search) {
+          for (let i = 0; i < this.fields.length; i++) {
+            const element = this.fields[i];
+            if (element.prop === item.prop) {
+              this.searchFields.push(item);
+              searchFieldsIndexs.push(i);
+            }
+          }
+        }
+      }
+
+      this.$refs.configRef.search.fields = searchFieldsIndexs;
+    },
     handleFieldsChange(val) {
       const type = val.type;
       const data = val.data;
@@ -113,7 +147,7 @@ export default {
       const tableConfig = this.$refs.configRef.getJson();
       tableConfig.search.options = this.searchFields;
       tableConfig.table.options = this.tableFields;
-      return tableConfig
+      return tableConfig;
     }
   }
 };

package/packages/TableMaking/util/Log.js

@@ -0,0 +1,99 @@
+function Log() {}
+
+Log.prototype.type = ["primary", "success", "warn", "error", "info"];
+
+Log.prototype.typeColor = function(type) {
+  let color = "";
+  switch (type) {
+    case "primary":
+      color = "#2d8cf0";
+      break;
+    case "success":
+      color = "#19be6b";
+      break;
+    case "info":
+      color = "#909399";
+      break;
+    case "warn":
+      color = "#ff9900";
+      break;
+    case "error":
+      color = "#f03f14";
+      break;
+    default:
+      color = "#35495E";
+      break;
+  }
+  return color;
+};
+
+Log.prototype.isArray = function(obj) {
+  return Object.prototype.toString.call(obj) === "[object Array]";
+};
+
+Log.prototype.print = function(text, type = "default", back = false) {
+  if (typeof text === "object") {
+    // 如果是對象則調用打印對象方式
+    this.isArray(text) ? console.table(text) : console.dir(text);
+    return;
+  }
+  if (back) {
+    // 如果是打印帶背景圖的
+    console.log(`%c ${text} `, `background:${this.typeColor(type)}; padding: 2px; border-radius: 4px; color: #fff;`);
+  } else {
+    console.log(
+      `%c ${text} `,
+      `border: 1px solid ${this.typeColor(type)};
+        padding: 2px; border-radius: 4px;
+        color: ${this.typeColor(type)};`
+    );
+  }
+};
+
+Log.prototype.printBack = function(type = "primary", title) {
+  this.print(type, title, true);
+};
+
+Log.prototype.pretty = function(type = "primary", title, text) {
+  if (typeof text === "object") {
+    // console.group("Console Group", title);
+    console.log(
+      `%c ${title}`,
+      `background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)};
+        padding: 1px; border-radius: 4px; color: #fff;`
+    );
+    this.isArray(text) ? console.table(text) : console.dir(text);
+    console.groupEnd();
+    return;
+  }
+  console.log(
+    `%c ${title} %c ${text} %c`,
+    `background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)};
+      padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`,
+    `border:1px solid ${this.typeColor(type)};
+      padding: 1px; border-radius: 0 4px 4px 0; color: ${this.typeColor(type)};`,
+    "background:transparent"
+  );
+};
+
+Log.prototype.prettyPrimary = function(title, ...text) {
+  text.forEach(t => this.pretty("primary", title, t));
+};
+
+Log.prototype.prettySuccess = function(title, ...text) {
+  text.forEach(t => this.pretty("success", title, t));
+};
+
+Log.prototype.prettyWarn = function(title, ...text) {
+  text.forEach(t => this.pretty("warn", title, t));
+};
+
+Log.prototype.prettyError = function(title, ...text) {
+  text.forEach(t => this.pretty("error", title, t));
+};
+
+Log.prototype.prettyInfo = function(title, ...text) {
+  text.forEach(t => this.pretty("info", title, t));
+};
+
+export default new Log();

package/packages/TableMaking/util/axios.js

@@ -1,21 +1,23 @@
 import axios from "axios";
+import Log from "./Log";
 import { Notification } from "element-ui";
 
 export const init = baseConfig => {
   // 创建axios实例
   const Axios = axios.create({
     baseURL: baseConfig.baseUrl,
-    timeout: baseConfig.timeout || 60000 // 请求超时时间
+    timeout: 60000 // 请求超时时间
     // withCredentials: true, //允许携带cookie
   });
 
   // 添加请求拦截器
   Axios.interceptors.request.use(
     config => {
-      config.headers = baseConfig.headers || {
-        "Content-Type": "application/json"
-      };
-      if (baseConfig.token) config.headers["Authorization"] = baseConfig.token;
+      const info = sessionStorage.getItem("th_oauth_info");
+      if (info) {
+        const token = JSON.parse(info).token;
+        config.headers["Authorization"] = token;
+      }
       return config;
     },
     error => {
@@ -44,12 +46,9 @@ export const init = baseConfig => {
         return Promise.reject("error");
       }
 
-      if (baseConfig.debugger) {
-        console.log("\n");
-        console.log("request url =>");
-        console.log(response.request.responseURL);
-        console.log("request res =>", response);
-        console.log("\n");
+      if (baseConfig.debug) {
+        Log.prettyPrimary("Request Url:", response.request.responseURL);
+        Log.prettySuccess("Request Res:", response);
       }
 
       return response.data;