tianheng-ui 0.0.78 → 0.0.80

package/packages/TableMaking/generateTable.vue

@@ -0,0 +1,359 @@
+<template>
+  <div>
+    <!-- 搜索栏 -->
+    <search
+      v-if="searchConfig.show"
+      :data="searchData"
+      :options="searchConfig.options"
+      @on-search="handleSearchSubmit"
+      @on-reset="handleSearchReset"
+    />
+
+    <!-- 菜单栏 -->
+    <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"
+        ref="formGenerate"
+      >
+      </th-form-generate>
+      <!-- <span slot="footer">
+        <th-table-tools :options="dialogOptions" @on-click="handleToolsClick" />
+      </span> -->
+    </th-dialog>
+  </div>
+</template>
+
+<script>
+import Search from "./custom/items/search";
+import Tools from "./custom/items/tools";
+import { toolsItemConfig, formItemConfig } from "./util/index";
+import * as Axios from "./util/axios";
+export default {
+  name: "thTableGenerate",
+  components: { Search, Tools },
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    apiConfig: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      tableJson: JSON.parse(JSON.stringify(this.data)),
+      network: {},
+      axios: null,
+      searchConfig: { show: false, options: [] },
+      searchData: {},
+      toolsConfig: { show: false, options: [] },
+      tableConfig: { options: [], pageInfo: {} },
+      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);
+      }
+    }
+  },
+  created() {
+    this.axios = Axios.init(this.apiConfig);
+  },
+  mounted() {
+    this.initConfig();
+  },
+  methods: {
+    initConfig() {
+      // 网络请求
+      this.network = 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",
+              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);
+          }
+        }
+      }
+      action.width = action.actions.length * 60 + 20;
+      this.tableJson.table.options.push(action);
+
+      this.tableConfig = this.tableJson.table;
+      this.requestListData();
+    },
+    requestListData() {
+      if (!this.network.mounted) return;
+      this.tableConfig.loading.show = true;
+      const apiInfo = this.network.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.network.add) return;
+      this.dialog.action.loading = true;
+      const apiInfo = this.network.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.network.edit) return;
+      this.dialog.action.loading = true;
+      const apiInfo = this.network.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.network.delete) return;
+      this.dialog.action.loading = true;
+      const apiInfo = this.network.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);
+    },
+    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/axios.js

@@ -0,0 +1,86 @@
+import axios from "axios";
+import { Notification } from "element-ui";
+
+export const init = baseConfig => {
+  // 创建axios实例
+  const Axios = axios.create({
+    baseURL: baseConfig.baseUrl,
+    timeout: baseConfig.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;
+      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.debugger) {
+        console.log("\n");
+        console.log("request url =>");
+        console.log(response.request.responseURL);
+        console.log("request res =>", response);
+        console.log("\n");
+      }
+
+      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;
+};

package/packages/TableMaking/util/index.js

@@ -0,0 +1,198 @@
+const toolsConfig = {
+  add: {
+    act: "add",
+    name: "",
+    type: "primary",
+    icon: "el-icon-plus",
+    disabled: false,
+    loading: false
+  },
+  edit: {
+    act: "edit",
+    name: "",
+    type: "text",
+    icon: "el-icon-edit",
+    disabled: false,
+    loading: false
+  },
+  detail: {
+    act: "detail",
+    name: "",
+    type: "text",
+    icon: "el-icon-view",
+    disabled: false,
+    loading: false
+  },
+  delete: {
+    act: "delete",
+    name: "",
+    type: "text",
+    icon: "el-icon-delete",
+    style: "color:#ff4949;",
+    disabled: false,
+    loading: false
+  },
+  batchDelete: {
+    act: "batchDelete",
+    name: "",
+    type: "danger",
+    icon: "el-icon-delete",
+    disabled: false,
+    loading: false
+  },
+  export: {
+    act: "export",
+    name: "",
+    type: "primary",
+    icon: "el-icon-download",
+    disabled: false,
+    loading: false
+  },
+  import: {
+    act: "import",
+    name: "",
+    type: "primary",
+    icon: "el-icon-upload2",
+    disabled: false,
+    loading: false
+  }
+};
+
+export const toolsItemConfig = (key, data) => {
+  const config = toolsConfig[key] || {};
+  config.name = data.name;
+  return { ...config };
+};
+
+const formConfig = {
+  "1": {
+    list: [
+      {
+        name: "栅格布局",
+        type: "grid",
+        icon: "icon-grid-",
+        columns: [
+          {
+            span: 12,
+            list: [
+              {
+                name: "分类名称",
+                type: "input",
+                icon: "icon-input",
+                options: {
+                  width: "100%",
+                  labelWidth: 100,
+                  isLabelWidth: false,
+                  defaultValue: "",
+                  dataType: "string",
+                  pattern: "",
+                  placeholder: "",
+                  maxlength: -1,
+                  required: true,
+                  disabled: false,
+                  readonly: false,
+                  clearable: false,
+                  showWordLimit: false,
+                  showPassword: false,
+                  prefixIcon: "",
+                  suffixIcon: "",
+                  prepend: "",
+                  append: "",
+                  hidden: false,
+                  hideLabel: false
+                },
+                events: {
+                  onChange: "",
+                  onFocus: "",
+                  onBlur: ""
+                },
+                rules: [
+                  {
+                    type: "string",
+                    message: "分类名称格式不正确"
+                  },
+                  {
+                    required: true,
+                    message: "分类名称必须填写"
+                  }
+                ],
+                key: "1669798313000_73831",
+                model: "name"
+              }
+            ]
+          },
+          {
+            span: 12,
+            list: [
+              {
+                name: "排序",
+                type: "number",
+                icon: "icon-number",
+                options: {
+                  width: "100%",
+                  labelWidth: 100,
+                  isLabelWidth: false,
+                  required: false,
+                  defaultValue: 0,
+                  min: 0,
+                  max: 999,
+                  step: 1,
+                  disabled: false,
+                  controlsPosition: true,
+                  precision: 0,
+                  hidden: false,
+                  hideLabel: false
+                },
+                events: {
+                  onChange: "",
+                  onFocus: "",
+                  onBlur: ""
+                },
+                key: "1669798320000_2131",
+                model: "sort",
+                rules: []
+              }
+            ]
+          }
+        ],
+        options: {
+          gutter: 0,
+          justify: "start",
+          align: "top",
+          hideLabel: true
+        },
+        key: "1669798312000_50523",
+        model: "grid_1669798312000_50523",
+        rules: []
+      }
+    ],
+    config: {
+      ui: "element",
+      title: "",
+      width: "",
+      labelWidth: 100,
+      labelPosition: "right",
+      labelSuffix: ":",
+      size: "small",
+      disabled: false,
+      hideLabel: false,
+      eventScript: [
+        {
+          key: "mounted",
+          name: "mounted",
+          func: ""
+        },
+        {
+          key: "refresh",
+          name: "refresh",
+          func: ""
+        }
+      ]
+    }
+  }
+};
+
+export const formItemConfig = key => {
+  const config = formConfig[key] || {};
+  return config;
+};

package/packages/TableMaking/widgetConfig.vue

@@ -86,7 +86,9 @@
               v-if="tableConfig.table.pageInfo.show"
               label="分页条数"
             >
-              <el-radio-group v-model="tableConfig.table.pageInfo.pageSize">
+              <el-radio-group
+                v-model="tableConfig.table.pageInfo.options.pageSize"
+              >
                 <el-radio-button :label="20">20条</el-radio-button>
                 <el-radio-button :label="50">50条</el-radio-button>
                 <el-radio-button :label="100">100条</el-radio-button>
@@ -221,24 +223,29 @@ export default {
         },
         table: {
           options: [],
-          sort: {
-            type: "1",
-            key: "createTime"
-          },
           pageInfo: {
             show: true,
-            pageSize: 20
+            options: {
+              pageCount: 0, // 总页数
+              pageSize: 20, // 每页展示的条数
+              currentPage: 1, // 当前页码
+              total: 0, // 总条数
+              sizes: [10, 20, 30, 50, 100]
+            }
           },
-          sequence: false //序号
+          sort: { type: "1", key: "createTime" },
+          loading: { show: false, text: "加载中", image: "" },
+          empty: { show: true, text: "暂无数据", image: "" },
+          sequence: true //是否显示序号
         },
         tools: {
-          add: { show: true, name: "新增" },
-          edit: { show: true, name: "编辑" },
-          detail: { show: false, name: "查看" },
-          delete: { show: true, name: "删除" },
-          batchDelete: { show: false, name: "批量删除" },
-          export: { show: false, name: "导出" },
-          import: { show: false, name: "导入" }
+          add: { show: true, name: "新增", position: 1 },
+          edit: { show: true, name: "编辑", position: 2 },
+          detail: { show: true, name: "查看", position: 2 },
+          delete: { show: true, name: "删除", position: 2 },
+          batchDelete: { show: true, name: "批量删除", position: 1 },
+          export: { show: true, name: "导出", position: 1 },
+          import: { show: true, name: "导入", position: 1 }
         }
       },
       sortFieldOptions: [{ label: "创建时间", value: "createTime" }]

package/packages/TableMaking/widgetTable.vue

@@ -118,6 +118,7 @@
     <th-dialog
       v-model="dialog.visible"
       :title="dialog.title"
+      :modal-append-to-body="false"
       @on-affirm="handleDialogAffirm"
     >
       <th-code-editor v-model="codeEditorValue"></th-code-editor>