htui-yllkbz 1.2.28 → 1.2.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htui-yllkbz",
-  "version": "1.2.28",
+  "version": "1.2.32",
   "typings": "types/index.d.ts",
   "main": "lib/htui.common.js",
   "style": "lib/htui.css",

package/src/packages/HtExport/index.ts

@@ -0,0 +1,16 @@
+/*
+ * @Descripttion:导出公共组件Excel
+ * @version:
+ * @Author: hutao
+ * @Date: 2021-11-15 15:00:57
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-19 13:38:48
+ */
+import HtExport from "./index.vue";
+
+(HtExport as any).install = function (Vue: any) {
+
+  Vue.component("HtExport", HtExport);
+};
+
+export default HtExport;

package/src/packages/HtExport/index.vue

@@ -0,0 +1,136 @@
+<!--
+ * @Descripttion: 文件导出按钮
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-09-02 09:03:43
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-19 15:08:14
+-->
+<template>
+  <span @click="exportExcel"
+        v-loading="state.loading">
+    <slot :loading="state.loading">
+      <el-button type="primary">
+        导出Excel
+      </el-button>
+    </slot>
+  </span>
+</template>
+<script lang='ts'>
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { AxiosRequestConfig, Method } from "axios";
+import { _axios } from "vue-kst-auth";
+/** 设置axios返回类型 */
+Vue.config.productionTip = false;
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+}
+@Component
+export default class HtExport extends Vue {
+  /**  请求方式 */
+  @Prop() method!: Method;
+  /**  请求地址 */
+  @Prop() url!: string;
+  /**  请求参数 */
+  @Prop() params?: object;
+  /**  下载的文件名 */
+  @Prop() fileName!: string;
+  /**  下载之前的验证 */
+  @Prop() exportBefore!: boolean;
+
+  /** 数据 */
+  state: State = {
+    loading: false,
+  };
+  /** 生命周期 */
+  /** 方法 */
+
+  /** 导出方法 */
+  exportExcel() {
+    if (this.exportBefore !== false) {
+      //return false;
+      this.state.loading = true;
+      let fileName = this.fileName || "未知文件名.xlsx";
+      let config: AxiosRequestConfig = {
+        responseType: "blob",
+        params: {},
+      };
+      if (this.params) {
+        config = this.params;
+      }
+      if (this.url) {
+        if (this.method === "post") {
+          _axios
+            .post(this.url, config, { responseType: "blob" })
+            .then((res) => {
+              const content = res.data;
+              if (!this.fileName) {
+                const headers = res.headers["content-disposition"];
+                if (!headers) {
+                  this.$notify.warning("暂无数据导出");
+                  return;
+                }
+                fileName = decodeURIComponent(
+                  headers.split("filename*=UTF-8")[1]
+                ).replace("''", "");
+              }
+              const blob = new Blob([content as any]);
+              if ("download" in document.createElement("a")) {
+                // 非IE下载
+                const elink = document.createElement("a");
+                elink.download = fileName;
+                elink.style.display = "none";
+                elink.href = URL.createObjectURL(blob);
+                document.body.appendChild(elink);
+                elink.click();
+                URL.revokeObjectURL(elink.href); // 释放URL 对象
+                document.body.removeChild(elink);
+              } else {
+                // IE10+下载
+                (navigator as any).msSaveBlob(blob, fileName);
+              }
+            })
+            .finally(() => {
+              this.state.loading = false;
+            });
+        } else {
+          _axios
+            .get(this.url, { responseType: "blob", params: config })
+            .then((res) => {
+              const content = res.data;
+              if (!this.fileName) {
+                const headers = res.headers["content-disposition"];
+                fileName = decodeURIComponent(
+                  headers.split("filename*=UTF-8")[1]
+                ).replace("''", "");
+              }
+              const blob = new Blob([content as any]);
+              if ("download" in document.createElement("a")) {
+                // 非IE下载
+                const elink = document.createElement("a");
+                elink.download = fileName;
+                elink.style.display = "none";
+                elink.href = URL.createObjectURL(blob);
+                document.body.appendChild(elink);
+                elink.click();
+                URL.revokeObjectURL(elink.href); // 释放URL 对象
+                document.body.removeChild(elink);
+              } else {
+                // IE10+下载
+                (navigator as any).msSaveBlob(blob, fileName);
+              }
+            })
+            .finally(() => {
+              this.state.loading = false;
+            });
+        }
+      }
+    }
+  }
+  /** 监听 */
+  /** 计算属性 */
+}
+</script>
+
+<style lang='scss' scoped></style>

package/src/packages/HtTable/index.ts

@@ -4,13 +4,11 @@
  * @Author: hutao
  * @Date: 2021-11-15 15:00:57
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-09 14:21:20
+ * @LastEditTime: 2021-12-19 14:10:11
  */
 import HtTable from "./index.vue";
-
 (HtTable as any).install = function (Vue: any) {
 
   Vue.component("HtTable", HtTable);
 };
-
 export default HtTable;

package/src/packages/index.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-21 10:08:41
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-09 17:27:01
+ * @LastEditTime: 2021-12-19 13:39:11
  */
 
 // 导入组件
@@ -14,12 +14,10 @@ import HtSelectTable from './SelectTable/index'
 /** 分页组装配件 */
 import HtPagination from './PageInfo/index'
 import HtTable from './HtTable/index'
+import HtExport from './HtExport/index'
 
 // 存储组件列表
-const components = [
-  HtSelectTable,
-  HtPagination, HtTable
-]
+const components = [HtSelectTable, HtPagination, HtTable, HtExport]
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 const install = function (Vue: any) {
   // 判断是否安装
@@ -36,6 +34,6 @@ export default {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
   install,
   // 以下是具体的组件列表
-  HtSelectTable, HtPagination, HtTable
+  HtSelectTable, HtPagination, HtTable, HtExport
 }
 

package/src/packages/type.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-25 17:05:17
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-13 15:31:13
+ * @LastEditTime: 2021-12-19 14:00:13
  */
 /** 初始的默认条数 */
 export const defalutPageSize = 10
@@ -77,4 +77,4 @@ export interface PageInfoType {
   pageSize: number;
   skipCount: number;
   totalCount: number;
-}
+}

package/src/views/About.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-13 15:02:01
+ * @LastEditTime: 2021-12-15 15:46:44
 -->
 <template>
   <div>
@@ -19,12 +19,25 @@
         <el-tag>{{row.age}}</el-tag>
       </div>
       <div slot="header_name">测试名字</div>
-
       <!-- <div slot="header_age"
            slot-scope="{column,$index}">
         <el-tag>年龄{{$index}}</el-tag>
       </div> -->
     </HtTable>
+    <el-dropdown>
+      <el-select placeholder="请选择">
+      </el-select>
+
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item>
+          <p style="width:300px">re</p>
+        </el-dropdown-item>
+        <el-dropdown-item>狮子头</el-dropdown-item>
+        <el-dropdown-item>螺蛳粉</el-dropdown-item>
+        <el-dropdown-item>双皮奶</el-dropdown-item>
+        <el-dropdown-item>蚵仔煎</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
   </div>
 </template>
 <script lang='ts'>