tianheng-ui 0.1.36 → 0.1.38

package/packages/TableMaking/generateTable.vue

@@ -5,8 +5,8 @@
       v-if="searchConfig.show"
       :data="searchData"
       :options="searchConfig.options"
-      @search="requestListData"
-      @reset="requestListData"
+      @search="handleSearchSubmit"
+      @reset="handleSearchReset"
     />
 
     <!-- 菜单栏 -->
@@ -17,59 +17,50 @@
         batchDelete: tableSelectionData.length === 0,
         export: tableSelectionData.length === 0
       }"
-      @click="handleToolsClick"
+      @click="handleActionClick"
     />
 
-    <STable v-if="tableConfig" :data="tableData" :config="tableConfig"></STable>
-
-    <!-- 表格 -->
-    <!-- <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> -->
+    <template v-if="tableConfig">
+      <!-- 表格 -->
+      <STable :data="tableData" :config="tableConfig">
+        <template #action="{scope, option }">
+          <actions
+            :scope="scope"
+            :options="option.actions"
+            @click="handleActionClick"
+          ></actions>
+        </template>
+      </STable>
+
+      <!-- 分页 -->
+      <el-pagination
+        v-if="tableConfig.pageInfo.show"
+        :style="{ 'text-align': tableConfig.pageInfo.style.align }"
+        :small="tableConfig.pageInfo.style.small"
+        :background="tableConfig.pageInfo.style.background"
+        :disabled="tableConfig.pageInfo.style.disabled"
+        :hide-on-single-page="tableConfig.pageInfo.style.hideOnSinglePage"
+        :page-size="tableConfig.pageInfo.options.pageSize"
+        :page-sizes="tableConfig.pageInfo.options.sizes"
+        :layout="tableConfig.pageInfo.options.layout"
+        :total="1000"
+      >
+      </el-pagination>
+    </template>
 
     <!-- 表单 -->
     <th-dialog
       v-model="dialog.show"
       :title="dialog.action.name"
       :modal-append-to-body="false"
+      :z-index="9999"
       @on-affirm="handleDialogAffirm"
       @on-close="handleDialogClose"
     >
       <th-form-generate
         v-if="formConfig"
-        :data="formConfig"
+        :config="formConfig"
         :value="dialog.data"
-        :remoteData="remoteData"
         ref="formGenerate"
       >
       </th-form-generate>
@@ -91,10 +82,12 @@
 import Search from "./custom/items/search/index-pc.vue";
 import Tools from "./custom/items/tools/index-pc.vue";
 import STable from "./custom/items/table/index-pc.vue";
+import Actions from "./custom/items/actions/index-pc.vue";
 import * as Axios from "lib/theme-chalk/js/axios";
+import { deepClone } from "../FormMaking/util";
 export default {
   name: "thTableGenerate",
-  components: { Search, Tools, STable },
+  components: { Search, Tools, STable, Actions },
   props: {
     config: Object,
     oauthConfig: {
@@ -116,13 +109,13 @@ export default {
       default: () => {
         return {
           page: {
-            url: "/preview/getViewManageDetailById",
+            url: "/api/lc/viewManage/getOne",
             method: "POST",
             params: {}
           },
           form: {
-            url: "/formManage/getFormDetailById",
-            method: "POST",
+            url: "/api/lc/formConfig/getById",
+            method: "get",
             params: {}
           }
         };
@@ -139,21 +132,13 @@ export default {
       searchData: {},
       toolsConfig: { show: false, options: [] },
       tableConfig: null,
-      tableData: [
-        { id: 1 },
-        { id: 2 },
-        { id: 3 },
-        { id: 4 },
-        { id: 5 },
-        { id: 6 },
-        { id: 7 },
-        { id: 8 }
-      ],
+      tableData: [],
       tableSelectionData: [],
+      tableActionsConfig: {},
       dialog: { show: false, data: {}, action: {} },
       formConfig: null,
-      remoteData: {},
-      errorMessage: ""
+      errorMessage: "",
+      query: {}
     };
   },
   watch: {
@@ -165,7 +150,9 @@ export default {
       this.initAxios();
     }
   },
-  created() {},
+  created() {
+    this.query = this.$route.query;
+  },
   mounted() {
     this.tableJson = this.config;
     this.initAxios();
@@ -201,18 +188,20 @@ export default {
     },
     // 处理配置信息
     initConfig() {
+      if (!this.tableJson.table) return;
+
       // 网络请求
-      this.networkConfig = this.tableJson.network;
+      this.networkConfig = deepClone(this.tableJson.network);
 
       // 搜索栏
-      this.searchConfig = this.tableJson.search;
+      this.searchConfig = deepClone(this.tableJson.search);
       this.searchConfig.options.map(item => {
         this.$set(this.searchData, item.prop, item.defaultValue || "");
       });
 
       // table
-      this.tableConfig = this.tableJson.table;
-      if (this.tableConfig.sequence) {
+      this.tableConfig = deepClone(this.tableJson.table);
+      if (this.tableJson.table.sequence) {
         this.tableConfig.options.unshift({
           type: "index",
           label: "序号"
@@ -228,8 +217,9 @@ export default {
 
       // tools
       this.toolsConfig = { show: false, options: [] };
+
       // 按position处理按钮，1：公共区，2：行内区
-      Object.values(this.tableJson.tools).map(item => {
+      Object.values(deepClone(this.tableJson.tools)).map(item => {
         if (!item.show) return;
         if (item.type === "batchDelete") {
           this.tableConfig.options.unshift({
@@ -245,27 +235,42 @@ export default {
         }
       });
       action.width = action.actions.length * 60 + 20;
-      if (!action.hide) this.tableConfig.options.push(action);
+      if (!action.hide && action.actions.length)
+        this.tableConfig.options.push(action);
 
-      // this.requestListData();
+      this.requestListData();
     },
+
+    // 获取form表单配置
+    requestFormConfigData(action) {
+      const params = { ...this.network.page.params, id: action.form };
+      const config = {
+        url: this.network.form.url,
+        method: this.network.form.method,
+        headers: this.network.form.headers
+      };
+      if (config.method.toLowerCase() === "get") config.params = params;
+      else config.data = params;
+
+      this.axios(config)
+        .then(res => {
+          const data = res.data;
+          this.formConfig = JSON.parse(data.pageConfig);
+        })
+        .catch(err => {});
+    },
+
+    // 获取列表数据
     requestListData() {
-      if (!this.networkConfig.mounted) return;
+      const requestConfig = this.requestInterceptors(
+        this.searchData,
+        this.tableConfig.mounted.api,
+        "list"
+      );
+      if (!requestConfig) 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
-      })
+      this.axios(requestConfig)
         .then(res => {
           this.tableConfig.loading.show = false;
           let data = [];
@@ -281,16 +286,18 @@ export default {
           this.tableConfig.loading.show = false;
         });
     },
+
+    // 新增
     requestAddData(data) {
-      if (!this.networkConfig.add) return;
+      const requestConfig = this.requestInterceptors(
+        data,
+        this.dialog.action.api,
+        this.dialog.action.type
+      );
+      if (!requestConfig) 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 }
-      })
+      this.axios(requestConfig)
         .then(res => {
           this.dialog.action.loading = false;
           this.requestListData();
@@ -299,16 +306,18 @@ export default {
           this.dialog.action.loading = false;
         });
     },
+
+    // 编辑
     requestEditData(data) {
-      if (!this.networkConfig.edit) return;
+      const requestConfig = this.requestInterceptors(
+        data,
+        this.dialog.action.api,
+        this.dialog.action.type
+      );
+      if (!requestConfig) 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 }
-      })
+      this.axios(requestConfig)
         .then(res => {
           this.dialog.action.loading = false;
           this.requestListData();
@@ -317,27 +326,34 @@ export default {
           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, id: this.dialog.data.id }
-      })
+
+    // 删除
+    requestDeleteData(item, action, callback) {
+      const requestConfig = this.requestInterceptors(
+        item,
+        action.api,
+        action.type
+      );
+      action.loading = true;
+      this.axios(requestConfig)
         .then(res => {
-          callback(true);
-          this.dialog.action.loading = false;
+          action.loading = false;
           this.requestListData();
+          callback(true);
         })
         .catch(err => {
-          this.dialog.action.loading = false;
+          action.loading = false;
+          callback(false);
         });
     },
+
+    // 批量删除
     requestBatchDeleteData() {
-      if (!this.networkConfig.batchDelete) return;
+      const requestConfig = this.requestInterceptors(
+        this.dialog.data,
+        this.dialog.action.api,
+        this.dialog.action.type
+      );
       this.$confirm("确认删除多条数据吗？", "操作提示", {
         confirmButtonText: "删除",
         cancelButtonText: "取消",
@@ -345,17 +361,8 @@ export default {
       })
         .then(() => {
           this.dialog.action.loading = true;
-          const data = [];
-          for (const item of this.tableSelectionData) {
-            data.push({ id: item.id });
-          }
-          const apiInfo = this.networkConfig.batchDelete;
-          this.axios({
-            url: apiInfo.api,
-            method: apiInfo.method,
-            headers: apiInfo.headers,
-            data: { ...apiInfo.params, ...data }
-          })
+
+          this.axios(requestConfig)
             .then(res => {
               callback(true);
               this.dialog.action.loading = false;
@@ -367,42 +374,87 @@ export default {
         })
         .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;
-            }
-          });
-        })
+
+    // 通用请求
+    requestApi(request, callback) {
+      if (!request) return;
+
+      this.axios(request)
+        .then(res => {})
         .catch(err => {});
     },
-    handleSearchSubmit(val) {
+
+    // 请求拦截器，返回请求体
+    requestInterceptors(paramsData, networkId, actionType) {
+      const config = this.networkConfig[networkId];
+      if (!config) {
+        this.$message.error("未知的请求接口，请检查配置信息");
+        return;
+      }
+
+      const request = {
+        url: `api/lc/api/${config.url}`,
+        method: config.method,
+        headers: { ...config.headers, actionType }
+      };
+      let params = {};
+      switch (actionType) {
+        case "list":
+          for (let key of Object.keys(config.params)) {
+            params[key] = paramsData[key] || this.query[key];
+          }
+          if (this.tableConfig.pageInfo.show) {
+            params.current = this.tableConfig.pageInfo.options.currentPage;
+            params.size = this.tableConfig.pageInfo.options.pageSize;
+          }
+          break;
+        case "add":
+        case "edit":
+        case "delete":
+          for (let key of Object.keys(config.params)) {
+            params[key] = paramsData[key];
+          }
+          break;
+        case "batchDelete":
+          const ids = [];
+          for (const item of this.tableSelectionData) {
+            ids.push({ id: item.id });
+          }
+          params.ids = ids;
+          break;
+
+        default:
+          break;
+      }
+
+      if (config.method.toLowerCase() === "get") request.params = params;
+      else request.data = params;
+
+      return request;
+    },
+
+    // 搜索提交
+    handleSearchSubmit() {
       this.requestListData();
     },
-    handleSearchReset(val) {
+    // 搜索重置
+    handleSearchReset() {
       this.requestListData();
     },
-    handleToolsClick(action) {
-      console.log("handleToolsClick =>", action);
+
+    // 操作事件
+    handleActionClick(action, item, callback) {
+      console.log("handleActionClick =>", action, item);
       switch (action.type) {
         case "add":
-          this.dialog = { show: true, data: {}, action: action };
+        case "edit":
+        case "detail":
+          this.dialog = { show: true, data: item, action: action };
           this.requestFormConfigData(action);
           break;
+        case "delete":
+          this.requestDeleteData(item, action, callback);
+          break;
         case "batchDelete":
           this.dialog = { show: false, data: {}, action: action };
           this.requestBatchDeleteData();
@@ -422,36 +474,18 @@ export 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) {
+    // 弹窗确认
+    handleDialogAffirm() {
       this.$refs.formGenerate.getData().then(data => {
         console.log("handleDialogAffirm =>", data);
-        switch (this.dialog.action.act) {
+        switch (this.dialog.action.type) {
           case "add":
             this.requestAddData(data);
             break;
           case "edit":
-            this.dialog.data = Object.assign(this.dialog.data, data);
-            this.requestEditData(this.dialog.data);
+            // this.dialog.data = Object.assign(this.dialog.data, data);
+            this.requestEditData(data);
             break;
 
           default:
@@ -461,9 +495,11 @@ export default {
         this.dialog.show = false;
       });
     },
+    // 弹窗关闭
     handleDialogClose() {
       this.formConfig = null;
     },
+
     handlePagingChange(val) {
       this.requestListData();
     },

package/packages/TableMaking/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="th-table-making th-flex_box">
+  <div class="th-tableMaking th-flex_box">
     <div class="th-fiex_content">
       <widget-tools
         :config="tableConfig"
@@ -139,19 +139,19 @@ export default {
             }
           })
           .catch(err => {
-            if (!this.tableConfig.table.fieldsTable) {
+            if (!this.tableConfig.table.fieldsType) {
               this.$message.warning("请选择字段表");
               return reject();
             }
             if (
-              this.tableConfig.table.fieldsTable === "fieldsApi" &&
+              this.tableConfig.table.fieldsType === "fieldsApi" &&
               !this.tableConfig.table.mounted.api
             ) {
               this.$message.warning("请选择列表接口");
               return reject();
             }
             if (!this.tableConfig.table.title) {
-              this.$message.warning("请选择列表名称");
+              this.$message.warning("请输入列表名称");
               return reject();
             }
             const data = deepClone(this.tableConfig);
@@ -164,21 +164,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.th-table-making {
+.th-tableMaking {
   height: 100%;
   background-color: white;
   border: 1px solid #dcdfe6;
 
-  .client {
-    flex: 1;
-    .el-button {
-      color: #333;
-    }
-    .active {
-      color: #409eff;
-    }
-  }
-
   .el-container {
     height: 100%;
   }