htui-yllkbz 1.2.35 → 1.2.39

package/package.json

@@ -1,52 +1,56 @@
-{
-  "name": "htui-yllkbz",
-  "version": "1.2.35",
-  "typings": "types/index.d.ts",
-  "main": "lib/htui.common.js",
-  "style": "lib/htui.css",
-  "private": false,
-  "files": [
-    "lib/**",
-    "types",
-    "src"
-  ],
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "lib": "vue-cli-service build --target lib --name htui --dest lib src/packages/index.ts",
-    "publish": "npm run lib && npm publish",
-    "build-exports": "vue-cli-service build --dest dist/components --target wc-async --name xhsj src/exports/* --inline-vue"
-  },
-  "dependencies": {
-    "axios": "^0.21.0",
-    "core-js": "^3.6.5",
-    "element-ui": "^2.14.1",
-    "mavon-editor": "^2.10.4",
-    "vue": "^2.6.11",
-    "vue-class-component": "^7.2.3",
-    "vue-kst-auth": "^2.1.15",
-    "vue-property-decorator": "^8.4.2",
-    "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
-  },
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
-    "@vue/cli-plugin-babel": "^4.5.0",
-    "@vue/cli-plugin-eslint": "^4.5.0",
-    "@vue/cli-plugin-typescript": "^4.5.0",
-    "@vue/cli-service": "^4.5.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^5.0.2",
-    "compression-webpack-plugin": "^3.0.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^1.19.1",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
-    "typescript": "~3.9.3",
-    "vue-template-compiler": "^2.6.11"
-  }
-}
+{
+  "name": "htui-yllkbz",
+  "version": "1.2.39",
+  "typings": "types/index.d.ts",
+  "main": "lib/htui.common.js",
+  "style": "lib/htui.css",
+  "private": false,
+  "files": [
+    "lib/**",
+    "types",
+    "src"
+  ],
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib --name htui --dest lib src/packages/index.ts",
+    "publish": "npm run lib && npm publish",
+    "build-exports": "vue-cli-service build --dest dist/components --target wc-async --name xhsj src/exports/* --inline-vue"
+  },
+  "dependencies": {
+    "axios": "^0.21.0",
+    "core-js": "^3.6.5",
+    "element-ui": "^2.14.1",
+    "html2canvas": "1.0.0-rc.1",
+    "htui-yllkbz": "^1.2.35",
+    "jspdf": "^1.5.3",
+    "mavon-editor": "^2.10.4",
+    "moment": "^2.29.1",
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.3",
+    "vue-kst-auth": "^2.1.15",
+    "vue-property-decorator": "^8.4.2",
+    "vue-router": "^3.2.0",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
+    "@vue/cli-plugin-babel": "^4.5.0",
+    "@vue/cli-plugin-eslint": "^4.5.0",
+    "@vue/cli-plugin-typescript": "^4.5.0",
+    "@vue/cli-service": "^4.5.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^5.0.2",
+    "compression-webpack-plugin": "^3.0.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^1.19.1",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "typescript": "~3.9.3",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

package/src/packages/HtCountDown/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @Descripttion简易版的倒计时
+ * @version:
+ * @Author: hutao
+ * @Date: 2021-11-15 15:00:57
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-26 11:20:45
+ */
+import HtCountDown from "./index.vue";
+(HtCountDown as any).install = function (Vue: any) {
+  Vue.component("HtCountDown", HtCountDown);
+};
+export default HtCountDown;

package/src/packages/HtCountDown/index.vue

@@ -0,0 +1,171 @@
+<!--
+ * @Descripttion:倒计时
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-12-21 16:24:07
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-29 10:11:23
+-->
+<template>
+  <div>
+    <span>
+      <slot :time="parseInt(state.count.toString())"
+            :timeStr="dateLess()">
+        <span>{{dateLess()}}</span>
+      </slot>
+    </span>
+  </div>
+</template>
+<script lang='ts'>
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  /**  差额 */
+  count: number;
+}
+@Component
+export default class HtCountDown extends Vue {
+  /**  倒计时具体日期 2022-01-01 */
+  @Prop() date!: string;
+  /**  倒计时多少秒  250秒*/
+  @Prop() times!: number;
+  /**  是否启动 */
+  @Prop() start?: boolean;
+  /**  是否是秒表 */
+  @Prop() stopwatch?: boolean;
+  /**  刷新频率 --默认1000毫秒 */
+  @Prop() frequency?: number;
+
+  /** 数据 */
+  state: State = {
+    loading: false,
+    count: 0,
+  };
+  timer: any = undefined;
+
+  created() {
+    /**  如果是传入的秒数 */
+
+    if (!this.stopwatch) {
+      if (this.times) {
+        this.state.count = this.times;
+      }
+      /**  如果传入的是哪一天 */
+      if (this.date) {
+        const sec =
+          (new Date(this.date).getTime() - new Date().getTime()) / 1000;
+        this.state.count = sec > 0 ? sec : 0;
+      }
+    } else {
+      //如果是秒表则启动秒表计时:
+      this.startStopWatch(true);
+    }
+  }
+  /**  秒表 */
+  startStopWatch(reset: boolean) {
+    if (reset) {
+      this.state.count = 0;
+    }
+
+    this.timer = setInterval(() => {
+      this.state.count = parseFloat(
+        (this.state.count + this.getFrequency / 1000).toFixed(5)
+      );
+    }, this.getFrequency);
+  }
+  /**  重置 */
+  reset() {
+    if (this.times) {
+      clearInterval(this.timer);
+      this.state.count = this.times;
+      this.getTimer();
+    }
+    if (this.stopwatch) {
+      clearInterval(this.timer);
+      this.startStopWatch(true);
+    }
+    //
+  }
+  /**  时间倒计时开始 */
+  getTimer() {
+    this.timer = setInterval(() => {
+      this.state.count--;
+      if (this.state.count === 0) {
+        clearInterval(this.timer);
+      }
+    }, this.getFrequency);
+  }
+  dateLess() {
+    const total: number = this.state.count;
+
+    if (this.stopwatch) {
+      return total;
+    }
+    if (!total) {
+      return "--";
+    }
+    const day: number = parseInt((total / (24 * 60 * 60)).toString()); //计算整数天数
+    const afterDay: number = total - day * 24 * 60 * 60; //取得算出天数后剩余的秒数
+    const hour: number = parseInt((afterDay / (60 * 60)).toString()); //计算整数小时数
+    const afterHour = total - day * 24 * 60 * 60 - hour * 60 * 60; //取得算出小时数后剩余的秒数
+    const min: number = parseInt((afterHour / 60).toString()); //计算整数分
+    const afterMin: number = parseInt(
+      (total - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60).toString()
+    ); //取得算出分后剩余的秒数
+    function buwei(t: number) {
+      return t > 9 ? t : "0" + t;
+    }
+    if (!day) {
+      if (!hour) {
+        if (min) {
+          return buwei(min) + "分" + buwei(afterMin) + "秒";
+        } else {
+          return buwei(afterMin) + "秒";
+        }
+      } else {
+        return (
+          buwei(hour) + "小时" + buwei(min) + "分" + buwei(afterMin) + "秒"
+        );
+      }
+    } else {
+      return (
+        day +
+        "天" +
+        buwei(hour) +
+        "小时" +
+        buwei(min) +
+        "分" +
+        buwei(afterMin) +
+        "秒"
+      );
+    }
+  }
+  /**  监听是否启动倒计时  针对传入是秒的不用重新计算,时间的要进行重新计算*/
+  @Watch("start", { deep: true, immediate: true })
+  onStart(val?: boolean) {
+    if (val !== false) {
+      /**  如果传入的是哪一天 */
+      if (this.date) {
+        const sec =
+          (new Date(this.date).getTime() - new Date().getTime()) / 1000;
+        this.state.count = sec > 0 ? sec : 0;
+      }
+      if (this.stopwatch) {
+        this.startStopWatch(false);
+      } else if (!this.date && !this.times) {
+        this.$notify.error("请先传入完成的参数");
+        return;
+      } else {
+        this.getTimer();
+      }
+    } else {
+      clearInterval(this.timer);
+    }
+  }
+  get getFrequency() {
+    return this.frequency || 1000;
+  }
+}
+</script>
+<style lang='scss' scoped></style>

package/src/packages/HtExportPdf/index.ts

@@ -0,0 +1,16 @@
+/*
+ * @Descripttion:导出PDF
+ * @version:
+ * @Author: hutao
+ * @Date: 2021-11-15 15:00:57
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-29 09:53:53
+ */
+import HtExportPdf from "./index.vue";
+
+(HtExportPdf as any).install = function (Vue: any) {
+
+  Vue.component("HtExportPdf", HtExportPdf);
+};
+
+export default HtExportPdf;

package/src/packages/HtExportPdf/index.vue

@@ -0,0 +1,46 @@
+<!--
+ * @Descripttion: 导出PDF
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-09-02 09:03:43
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-29 14:25:39
+-->
+<template>
+  <div @click="exportPdf">
+    <slot>
+      <el-button type="primary">
+        导出PDF
+      </el-button>
+    </slot>
+    <div ref="demo">dsdsdsdsdsds</div>
+  </div>
+</template>
+<script lang='ts'>
+import { Component, Prop, Vue } from "vue-property-decorator";
+import htmlToPdf from "@/unit/htmlToPdf.js";
+/** 设置axios返回类型 */
+Vue.config.productionTip = false;
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+}
+@Component
+export default class HtExportPdf extends Vue {
+  /**  导出文件对应的id */
+  @Prop() selector!: string;
+  /** 文件导出名  */
+  @Prop() title!: string;
+  exportPdf(t: any) {
+    console.log("this.selector", this.selector, t);
+    if (!this.selector) {
+      this.$notify.error("请用selector传入需要导出的内容id");
+      return;
+    }
+    console.log('document.querySelector("#ht-pdf")', this.$refs.demo);
+    htmlToPdf.downloadPDF(t, this.title);
+  }
+}
+</script>
+
+<style lang='scss' scoped></style>

package/src/packages/HtTable/index.vue

@@ -5,7 +5,7 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:23:24
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-14 16:06:12
+ * @LastEditTime: 2022-01-04 09:30:09
 -->
 <template>
   <div v-loading="state.loading">
@@ -110,9 +110,23 @@
                 </template>
                 <!-- 处理时间 -->
                 <template v-else-if="item.type==='time'">
-                  <span v-if='getPropByPath(row,item.key)'>{{getPropByPath(row,item.key).replace('T', ' ').slice(0,19)}}</span>
+                  <div v-if='getPropByPath(row,item.key)'
+                       class="ht-column-cell">
+                    <span v-if="!item.spread"> {{getPropByPath(row,item.key).replace('T', ' ').slice(0,19)}}</span>
+                    <template v-else>
+                      <p style="color:var(--primary);margin:0;padding:0">{{getPropByPath(row,item.key).slice(11,19)}}</p>
+                      <p style="margin:0;padding:0">{{getPropByPath(row,item.key).replace('T', ' ').slice(0,10)}}</p>
+                    </template>
+                  </div>
                   <span v-else>--</span>
                 </template>
+                <!-- 处理部门人员 -->
+                <template v-else-if="item.type==='boolean'">
+                  <el-tag :type="'success'"
+                          v-if="getPropByPath(row,item.key)">是</el-tag>
+                  <el-tag type="danger"
+                          v-else>否</el-tag>
+                </template>
                 <!-- 其他 -->
                 <span v-else>{{getPropByPath(row,item.key)}}</span>
               </slot>
@@ -150,7 +164,6 @@
 </template>
 <script lang='ts'>
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { _axios } from "vue-kst-auth";
 import { Column, PageInfoType } from "@/packages/type";
 import PageInfo from "@/packages/PageInfo/index.vue";
 interface State {
@@ -206,7 +219,8 @@ export default class HtTable extends Vue {
   created() {
     this.setPageInfo(this.pageInfo);
   }
-  getPropByPath(obj: any, path: string, strict: boolean) {
+  /**  处理table里面根据字段获取对应的值 */
+  getPropByPath(obj: any, path: string, strict = true) {
     let tempObj = obj;
     path = path.replace(/\[(\w+)\]/g, ".$1");
     path = path.replace(/^\./, "");
@@ -220,7 +234,7 @@ export default class HtTable extends Vue {
         tempObj = tempObj[key];
       } else {
         if (strict) {
-          throw new Error("please transfer a valid prop path to form item!");
+          throw new Error(`table中${path}字段发生错误,请检查`);
         }
         break;
       }

package/src/packages/index.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-21 10:08:41
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-21 16:25:06
+ * @LastEditTime: 2021-12-29 09:55:45
  */
 
 // 导入组件
@@ -17,9 +17,11 @@ import HtTable from './HtTable/index'
 import HtExport from './HtExport/index'
 import HtUpload from './HtUpload/index'
 import HtMd from './HtMd/index'
+import HtCountDown from './HtCountDown/index'
+import HtExportPdf from './HtExportPdf/index'
 
 // 存储组件列表
-const components = [HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd]
+const components = [HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtExportPdf]
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 const install = function (Vue: any) {
   // 判断是否安装
@@ -35,6 +37,6 @@ export default {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
   install,
   // 以下是具体的组件列表
-  HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd
+  HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtExportPdf
 }
 

package/src/packages/type.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-25 17:05:17
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-21 14:24:52
+ * @LastEditTime: 2021-12-23 11:33:43
  */
 /** 初始的默认条数 */
 export const defalutPageSize = 10
@@ -66,6 +66,8 @@ export interface Column {
   headerSlot?: boolean;
   /** 是否隐藏当前列 */
   hide?: boolean;
+  /**  时间是否跨行展示 */
+  spread?: boolean;
   /** 通过type展示相应的数据  用户id|部门id|时间格式化*/
   type?: 'userId' | 'org' | 'time' | 'common',
   /**    只有当type='common'时候有效  数据类型个ca common里面的一样但不包括时间 时间使用time  */

package/src/shims-vue.d.ts

@@ -4,10 +4,15 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-21 14:28:09
+ * @LastEditTime: 2021-12-29 10:23:59
  */
 declare module "*.vue" {
   import Vue from "vue";
   export default Vue;
 }
+declare module "*.js" {
+  const body: any
+
+  export default body;
+}
 declare module "*.png"

package/src/unit/htmlToPdf.js

@@ -0,0 +1,108 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-12-29 09:52:58
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-29 14:15:53
+ */
+//不使用JQuery版的
+
+import html2canvas from 'html2canvas';
+import JsPDF from 'jspdf';
+/**
+ * @param  ele          要生成 pdf 的DOM元素（容器）
+ * @param  padfName     PDF文件生成后的文件名字
+ * */
+
+function downloadPDF(ele, pdfName){
+
+    const eleW = ele.offsetWidth;// 获得该容器的宽
+    const eleH = ele.offsetHeight;// 获得该容器的高
+
+
+    const eleOffsetTop = ele.offsetTop;  // 获得该容器到文档顶部的距离
+    const eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
+
+    const canvas = document.createElement("canvas");
+    let abs = 0;
+
+    const winIn = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
+    const winOut = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
+
+    if(winOut>winIn){
+        // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
+        abs = (winOut - winIn)/2;    // 获得滚动条宽度的一半
+        // console.log(a, '新abs');
+    }
+
+    canvas.width = eleW * 2;    // 将画布宽&&高放大两倍
+    canvas.height = eleH * 2;
+
+
+
+
+    const context = canvas.getContext("2d");
+
+    context.scale(2, 2);
+
+    context.translate(-eleOffsetLeft -abs, -eleOffsetTop);
+    // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
+    // translate的时候，要把这个差值去掉
+
+    // html2canvas(element).then( (canvas)=>{ //报错
+    // html2canvas(element[0]).then( (canvas)=>{
+  console.log('baocuo',);
+    html2canvas( ele, {
+        dpi: 300,
+        // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
+        useCORS:true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
+    }).then((canvas) => {
+      console.log('baocuo-------1',);
+      setTimeout(() => {
+        const contentWidth = canvas.width;
+        const contentHeight = canvas.height;
+          //一页pdf显示html页面生成的canvas高度;
+          const pageHeight = contentWidth / 592.28 * 841.89;
+          //未生成pdf的html页面高度
+          let leftHeight = contentHeight;
+          //页面偏移
+          let position = 0;
+          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+          const imgWidth = 595.28;
+          const imgHeight = 595.28/contentWidth * contentHeight;
+  
+          const pageData = canvas.toDataURL('image/jpeg', 1.0);
+          const pdf = new JsPDF('', 'pt', 'a4');
+  
+          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+          //当内容未超过pdf一页显示的范围，无需分页
+          if (leftHeight < pageHeight) {
+              //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
+              pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
+              // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
+          } else {    // 分页
+              while(leftHeight > 0) {
+                  pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
+                  leftHeight -= pageHeight;
+                  position -= 841.89;
+                  //避免添加空白页
+                  if(leftHeight > 0) {
+                      pdf.addPage();
+                  }
+              }
+          }
+  
+          //可动态生成
+          pdf.save(pdfName);
+     },1000)
+
+    })
+
+
+}
+
+
+export default {
+    downloadPDF
+}