tianheng-ui 0.1.0 → 0.1.2

package/packages/TableMaking/generateTable.vue

@@ -0,0 +1,560 @@
+<template>
+  <div v-if="tableJson">
+    <!-- 搜索栏 -->
+    <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>
+  <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 } from "./util/index";
+import * as Axios from "lib/theme-chalk/js/axios";
+export default {
+  name: "thTableGenerate",
+  components: { Search, Tools },
+  props: {
+    oauthConfig: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    empty: {
+      type: Object,
+      default: () => {
+        return {
+          description: "暂无数据"
+        };
+      }
+    },
+    network: {
+      type: Object,
+      default: () => {
+        return {
+          page: {
+            url: "/preview/getViewManageDetailById",
+            method: "POST",
+            params: {}
+          },
+          form: {
+            url: "/formManage/getFormDetailById",
+            method: "POST",
+            params: {}
+          }
+        };
+      }
+    }
+  },
+  data() {
+    return {
+      id: "",
+      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
+          }
+        ]
+      },
+      errorMessage: ""
+    };
+  },
+  created() {
+    this.axios = Axios.init(this.oauthConfig);
+    const code = this.$route.path.split("/").pop();
+    this.id = code;
+    this.initConfig();
+  },
+  mounted() {},
+  methods: {
+    // 初始化组件配置
+    initConfig() {
+      this.initData();
+
+      if (this.oauthConfig.token) {
+        const oauthInfo = {
+          token: this.oauthConfig.token,
+          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({
+          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));
+          // 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;
+
+          // 搜索栏
+          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",
+            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);
+
+          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 = {
+        ...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 => {
+          this.tableConfig.loading.show = false;
+          let data = [];
+          if (this.tableConfig.pageInfo.show) {
+            data = res.records;
+            this.tableConfig.pageInfo.options.total = Number(res.total);
+          } else {
+            data = res;
+          }
+          this.tableData = data;
+        })
+        .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,
+        headers: apiInfo.headers,
+        data: { ...apiInfo.params, ...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,
+        headers: apiInfo.headers,
+        data: { ...apiInfo.params, ...data }
+      })
+        .then(res => {
+          this.dialog.action.loading = false;
+          this.requestListData();
+        })
+        .catch(err => {
+          this.dialog.action.loading = false;
+        });
+    },
+    requestDeleteData(callback) {
+      if (!this.networkConfig.delete) return;
+      this.dialog.action.loading = true;
+      const apiInfo = this.networkConfig.delete;
+      this.axios({
+        url: apiInfo.api,
+        method: apiInfo.method,
+        headers: apiInfo.headers,
+        data: { ...apiInfo.params, ids: this.dialog.data.id }
+      })
+        .then(res => {
+          callback(true);
+          this.dialog.action.loading = false;
+          this.requestListData();
+        })
+        .catch(err => {
+          this.dialog.action.loading = false;
+        });
+    },
+    requestBatchDeleteData() {
+      if (!this.networkConfig.batchDelete) return;
+      this.$confirm("确认删除多条数据吗？", "操作提示", {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.dialog.action.loading = true;
+          const data = [];
+          for (const item of this.tableSelectionData) {
+            data.push(item.id);
+          }
+          const apiInfo = this.networkConfig.batchDelete;
+          this.axios({
+            url: apiInfo.api,
+            method: apiInfo.method,
+            headers: apiInfo.headers,
+            data: { ...apiInfo.params, ...data }
+          })
+            .then(res => {
+              callback(true);
+              this.dialog.action.loading = false;
+              this.requestListData();
+            })
+            .catch(err => {
+              this.dialog.action.loading = false;
+            });
+        })
+        .catch(() => {});
+    },
+    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();
+    },
+    handleSearchReset(val) {
+      this.requestListData();
+    },
+    handleToolsClick(action) {
+      console.log("handleToolsClick =>", action);
+      switch (action.act) {
+        case "add":
+          this.dialog = { show: true, data: {}, action: action };
+          this.requestFormConfigData(action);
+          break;
+        case "batchDelete":
+          this.dialog = { show: false, data: {}, action: action };
+          this.requestBatchDeleteData();
+          break;
+        case "export":
+          action.loading = true;
+          setTimeout(() => {
+            action.loading = false;
+            this.tableSelectionData = [];
+            this.$refs.tableRef.getTable().clearSelection();
+          }, 1000);
+          break;
+        case "import":
+          break;
+
+        default:
+          break;
+      }
+    },
+    handleActionClick(index, item, action, callback) {
+      console.log("handleActionClick =>", item, action);
+      switch (action.act) {
+        case "edit":
+          this.dialog = { show: true, data: item, action: action };
+          this.requestFormConfigData(action);
+          break;
+        case "detail":
+          this.dialog = { show: true, data: item, action: action };
+          this.requestFormConfigData(action);
+          break;
+        case "delete":
+          this.dialog = { show: false, data: item, action: action };
+          this.requestDeleteData(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;
+    },
+    handlePagingChange(val) {
+      this.requestListData();
+    },
+    handleSelectionChange(val) {
+      this.tableSelectionData = val;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>