tianheng-ui 0.0.78 → 0.0.81

package/packages/TableMaking/generateTable.vue

@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <!-- 搜索栏 -->
+    <search
+      v-if="searchConfig.show"
+      :data="searchData"
+      :options="searchConfig.options"
+      @on-search="requestListData"
+      @on-reset="requestListData"
+    />
+
+    <!-- 菜单栏 -->
+    <tools
+      v-if="toolsConfig.show"
+      :options="toolsConfig.options"
+      :disabled="{
+        batchDelete: tableSelectionData.length === 0,
+        export: tableSelectionData.length === 0
+      }"
+      @on-click="handleToolsClick"
+    />
+
+    <!-- 表格 -->
+    <th-table
+      v-if="tableConfig.options.length"
+      ref="tableRef"
+      :data="tableData"
+      :options="tableConfig.options"
+      :page-info="tableConfig.pageInfo.options"
+      :show-page="tableConfig.pageInfo.show"
+      :loading="tableConfig.loading.show"
+      :loading-text="tableConfig.loading.text"
+      :empty-text="tableConfig.empty.text"
+      select-type="single"
+      border
+      @selection-change="handleSelectionChange"
+      @pagination-change="handlePagingChange"
+    >
+      <template #action="{scope, option }">
+        <th-table-action
+          :actions="option.actions"
+          @on-click="
+            (action, callback) => {
+              handleActionClick(
+                scope.$index,
+                scope.row,
+                action,
+                callback,
+                option
+              );
+            }
+          "
+        >
+        </th-table-action>
+      </template>
+    </th-table>
+
+    <!-- 表单 -->
+    <th-dialog
+      v-model="dialog.show"
+      :title="dialog.action.name"
+      :modal-append-to-body="false"
+      @on-affirm="handleDialogAffirm"
+      @on-close="handleDialogClose"
+    >
+      <th-form-generate
+        v-if="formConfig"
+        :data="formConfig"
+        :value="dialog.data"
+        :remoteData="remoteData"
+        ref="formGenerate"
+      >
+      </th-form-generate>
+    </th-dialog>
+  </div>
+</template>
+
+<script>
+import Search from "./custom/items/search";
+import Tools from "./custom/items/tools";
+import { toolsItemConfig, formItemConfig, tableItemConfig } from "./util/index";
+import * as Axios from "./util/axios";
+export default {
+  name: "thTableGenerate",
+  components: { Search, Tools },
+  props: {
+    config: {
+      type: Object,
+      default: () => {
+        return {
+          debug: false,
+          appId: ""
+        };
+      }
+    }
+  },
+  data() {
+    return {
+      tableJson: {},
+      axios: null,
+      networkConfig: {},
+      searchConfig: { show: false, options: [] },
+      searchData: {},
+      toolsConfig: { show: false, options: [] },
+      tableConfig: { options: [], pageInfo: {} },
+      tableData: [],
+      tableSelectionData: [],
+      dialog: { show: false, data: {}, action: {} },
+      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.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.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 || "");
+        });
+      }
+
+      // 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: [] };
+
+      // 按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);
+
+      this.tableConfig = this.tableJson.table;
+      this.requestListData();
+    },
+    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
+      };
+      this.axios({
+        url: apiInfo.api,
+        method: apiInfo.method,
+        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);
+        })
+        .catch(err => {
+          this.tableConfig.loading.show = false;
+        });
+    },
+    requestAddData(data) {
+      if (!this.networkConfig.add) return;
+      this.dialog.action.loading = true;
+      const apiInfo = this.networkConfig.add;
+      this.axios({
+        url: apiInfo.api,
+        method: apiInfo.method,
+        data
+      })
+        .then(res => {
+          this.dialog.action.loading = false;
+          this.requestListData();
+        })
+        .catch(err => {
+          this.dialog.action.loading = false;
+        });
+    },
+    requestEditData(data) {
+      if (!this.networkConfig.edit) return;
+      this.dialog.action.loading = true;
+      const apiInfo = this.networkConfig.edit;
+      this.axios({
+        url: apiInfo.api,
+        method: apiInfo.method,
+        data
+      })
+        .then(res => {
+          this.dialog.action.loading = false;
+          this.requestListData();
+        })
+        .catch(err => {
+          this.dialog.action.loading = false;
+        });
+    },
+    requestDeleteData(data, callback) {
+      if (!this.networkConfig.delete) return;
+      this.dialog.action.loading = true;
+      const apiInfo = this.networkConfig.delete;
+      this.axios({
+        url: apiInfo.api,
+        method: apiInfo.method,
+        data
+      })
+        .then(res => {
+          callback(true);
+          this.dialog.action.loading = false;
+          this.requestListData();
+        })
+        .catch(err => {
+          this.dialog.action.loading = false;
+        });
+    },
+    getFormConfig() {
+      setTimeout(() => {
+        const form = this.dialog.action.form;
+        const config = formItemConfig(form.id);
+        this.formConfig = config;
+      }, 1000);
+    },
+    handleSearchSubmit(val) {
+      console.log("handleSearchSubmit =>", val);
+      this.requestListData();
+    },
+    handleSearchReset(val) {
+      console.log("handleSearchReset =>", val);
+      this.requestListData();
+    },
+    handleToolsClick(action) {
+      console.log("handleToolsClick =>", action);
+      switch (action.act) {
+        case "add":
+          this.dialog = { show: true, data: {}, action: action };
+          this.getFormConfig();
+          break;
+        case "batchDelete":
+          action.loading = true;
+          setTimeout(() => {
+            action.loading = false;
+            this.tableSelectionData = [];
+            this.$refs.tableRef.getTable().clearSelection();
+          }, 1000);
+          break;
+        case "export":
+          action.loading = true;
+          setTimeout(() => {
+            action.loading = false;
+            this.tableSelectionData = [];
+            this.$refs.tableRef.getTable().clearSelection();
+          }, 1000);
+          break;
+        case "import":
+          break;
+
+        default:
+          break;
+      }
+    },
+    handlePagingChange(val) {
+      console.log("handlePagingChange =>", val);
+      this.requestListData();
+    },
+    handleSelectionChange(val) {
+      console.log("handleSelectionChange =>", val);
+      this.tableSelectionData = val;
+    },
+    handleActionClick(index, item, action, callback) {
+      console.log("handleActionClick =>", item, action);
+      switch (action.act) {
+        case "edit":
+          this.dialog = { show: true, data: item, action: action };
+          this.getFormConfig();
+          break;
+        case "detail":
+          this.dialog = { show: true, data: item, action: action };
+          this.getFormConfig();
+          break;
+        case "delete":
+          this.requestDeleteData({ ids: item.id }, callback);
+          break;
+
+        default:
+          break;
+      }
+    },
+    handleDialogAffirm(val) {
+      this.$refs.formGenerate.getData().then(data => {
+        console.log("handleDialogAffirm =>", data);
+        switch (this.dialog.action.act) {
+          case "add":
+            this.requestAddData(data);
+            break;
+          case "edit":
+            this.dialog.data = Object.assign(this.dialog.data, data);
+            this.requestEditData(this.dialog.data);
+            break;
+
+          default:
+            break;
+        }
+        this.formConfig = null;
+        this.dialog.show = false;
+      });
+    },
+    handleDialogClose() {
+      this.formConfig = null;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,85 @@
+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: 60000 // 请求超时时间
+    // withCredentials: true, //允许携带cookie
+  });
+
+  // 添加请求拦截器
+  Axios.interceptors.request.use(
+    config => {
+      const info = sessionStorage.getItem("th_oauth_info");
+      if (info) {
+        const token = JSON.parse(info).token;
+        config.headers["Authorization"] = token;
+      }
+      return config;
+    },
+    error => {
+      // Do something with request error
+      console.log(error); // for debug
+      Promise.reject(error);
+    }
+  );
+
+  // 添加响应拦截器
+  Axios.interceptors.response.use(
+    response => {
+      const code = response.status;
+      if (code < 200 || code > 300) {
+        Notification.error({
+          title: response.message
+        });
+        return Promise.reject("error");
+      }
+
+      const dataCode = response.data.code;
+      if (dataCode && dataCode !== 200) {
+        Notification.error({
+          title: response.data.message
+        });
+        return Promise.reject("error");
+      }
+
+      if (baseConfig.debug) {
+        Log.prettyPrimary("Request Url:", response.request.responseURL);
+        Log.prettySuccess("Request Res:", response);
+      }
+
+      return response.data;
+    },
+    error => {
+      let code = 0;
+      try {
+        code = error.response.data.status;
+      } catch (e) {
+        if (error.toString().indexOf("Error: timeout") !== -1) {
+          Notification.error({
+            title: "网络请求超时",
+            duration: 5000
+          });
+          return Promise.reject(error);
+        }
+      }
+      if (code) {
+        const errorMsg = error.response.data.message;
+        Notification.error({
+          title: errorMsg || "未知错误",
+          duration: 5000
+        });
+      } else {
+        Notification.error({
+          title: "接口请求失败",
+          duration: 5000
+        });
+      }
+      return Promise.reject(error);
+    }
+  );
+  return Axios;
+};