htui-yllkbz 1.2.39 → 1.2.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htui-yllkbz",
-  "version": "1.2.39",
+  "version": "1.2.43",
   "typings": "types/index.d.ts",
   "main": "lib/htui.common.js",
   "style": "lib/htui.css",
@@ -24,7 +24,6 @@
     "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",

package/src/packages/HtTable/index.vue

@@ -5,10 +5,11 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:23:24
  * @LastEditors: hutao
- * @LastEditTime: 2022-01-04 09:30:09
+ * @LastEditTime: 2022-01-10 13:40:53
 -->
 <template>
   <div v-loading="state.loading">
+
     <article>
       <el-table ref="comTable"
                 :height="height"
@@ -42,28 +43,39 @@
                 @cell-click="(row, column, cell, event)=>$emit('cell-click',row, column, cell, event)"
                 @cell-dblclick="(row, column, cell, event)=>$emit('cell-dblclick',row, column, cell, event)">
         <el-table-column width="55"
+                         :resizable="false"
                          v-if="checked"
                          :reserve-selection="reserveSelection"
                          :selectable="selectable"
                          type='selection'>
         </el-table-column>
         <el-table-column v-if="!hideOrder"
+                         :resizable="false"
                          :label="keyName===undefined?'序号':keyName"
                          :align="'center'"
                          width="55">
           <template slot="header">
-            <slot :name="'header_order'"></slot>
+            <slot :name="'header_order'">
+              <div @click="showFilterModel"
+                   v-if="showFilter"
+                   title="筛选排序">
+                <el-button type="text"><i class="el-icon-s-grid"></i></el-button>
+              </div>
+              <span v-else>{{keyName||'序号'}}</span>
+
+            </slot>
           </template>
           <template slot-scope="scope">
             {{(state.pageInfo.currentPage-1)*state.pageInfo.pageSize+(scope.$index+1)}}
           </template>
         </el-table-column>
-        <template v-for="item in columns">
+        <template v-for="item in showColumns">
           <el-table-column :label="item.title"
                            :key='item.key'
                            :fixed="item.fixed"
                            :align="item.align"
                            v-if="!item.hide"
+                           :resizable="item.resizable"
                            :header-align="item.headerAlign"
                            :column-key="item.columnKey"
                            :class-name="item.className"
@@ -160,6 +172,39 @@
 
       </el-row>
     </footer>
+    <!-- 详情弹框 -->
+    <el-dialog :visible.sync="state.visibleFilter"
+               title="属性设置"
+               :close-on-click-modal="true"
+               width="400px"
+               :center="true">
+      <div style='overflow:hidden;height:500px'>
+        <el-scrollbar style='height: calc(100% + 17px)'>
+          <el-tree :data="columns"
+                   ref="tree"
+                   show-checkbox
+                   node-key="key"
+                   :check-on-click-node="false"
+                   @node-drag-start="handleDragStart"
+                   @node-drag-enter="handleDragEnter"
+                   @node-drag-leave="handleDragLeave"
+                   @node-drag-over="handleDragOver"
+                   @node-drag-end="handleDragEnd"
+                   @node-drop="handleDrop"
+                   :default-checked-keys="state.showColumnKeys"
+                   @check-change="changeColumns"
+                   :allow-drag="allowDrag"
+                   draggable
+                   :allow-drop="allowDrop">
+            <span class="custom-tree-node"
+                  slot-scope="{ node, data }">
+              <slot :name="'header_'+data.key"
+                    :column="data">{{data.title}}</slot>
+            </span>
+          </el-tree>
+        </el-scrollbar>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script lang='ts'>
@@ -169,6 +214,13 @@ import PageInfo from "@/packages/PageInfo/index.vue";
 interface State {
   pageInfo: PageInfoType;
   loading: boolean;
+  /** 展示出来的列表名 */
+  showColumns: Column[];
+  showColumnKeys: string[];
+  /** 是否展示筛选框 */
+  visibleFilter: boolean;
+  /** 当前拖动的数据 */
+  currentColumn?: Column;
 }
 @Component({
   name: "HtTable",
@@ -182,6 +234,10 @@ export default class HtTable extends Vue {
   @Prop() data!: any[];
   /**  序号对应的名称 */
   @Prop() keyName?: string;
+  /**  是否增加筛选功能 */
+  @Prop() showFilter?: boolean;
+  /**  table的唯一值用于table数据筛选 */
+  @Prop() uuId?: string;
   /** 是否隐藏分页 */
   @Prop() hidePage!: boolean;
   /** 是否启用复选框 */
@@ -215,9 +271,84 @@ export default class HtTable extends Vue {
       skipCount: 0,
       totalCount: 0,
     },
+    showColumns: [],
+    currentColumn: undefined,
+    visibleFilter: false,
+    showColumnKeys: [],
   };
   created() {
     this.setPageInfo(this.pageInfo);
+    this.state.showColumns = this.columns;
+    if (this.uuId) {
+      //通过uuid获取缓存起来的header显示信息
+      const showKeys: string | null = window.localStorage.getItem(
+        "table_" + this.uuId
+      );
+      if (showKeys) {
+        this.state.showColumnKeys = JSON.parse(showKeys);
+      } else {
+        this.creatInitColumnKey();
+      }
+    } else {
+      this.creatInitColumnKey();
+    }
+  }
+  creatInitColumnKey() {
+    this.state.showColumnKeys = this.columns.reduce((arr: string[], item) => {
+      arr.push(item.key);
+      return arr;
+    }, []);
+  }
+  changeColumns(node: any, checked: boolean) {
+    let { showColumnKeys } = this.state;
+    if (checked) {
+      showColumnKeys.push(node.key);
+    } else {
+      showColumnKeys = showColumnKeys.filter((item) => item !== node.key);
+    }
+    this.state.showColumnKeys = showColumnKeys;
+  }
+  handleDragStart(node: any) {
+    this.state.currentColumn = node.data;
+  }
+  handleDragEnter() {
+    // console.log("tree drag enter: ", dropNode.label);
+  }
+  handleDragLeave() {
+    //console.log("tree drag leave: ", dropNode.label);
+  }
+  handleDragOver() {
+    // console.log("tree drag over: ", dropNode.label);
+  }
+  handleDragEnd(draggingNode: any, dropNode: any, dropType: string) {
+    const { showColumns, currentColumn, showColumnKeys } = this.state;
+    // if ((dropType === "before" || dropType === "after") && currentColumn) {
+    //   const data = showColumns.filter(
+    //     (item) => item.key !== currentColumn?.key
+    //   );
+    //   const index = data.findIndex((item) => item.key === dropNode.data.key);
+    //   dropType === "before"
+    //     ? data.splice(index, 0, currentColumn)
+    //     : data.splice(index + 1, 0, currentColumn);
+    // console.log("tree drag end: ", currentColumn, showColumnKeys);
+    if (currentColumn && showColumnKeys.includes(currentColumn.key)) {
+      setTimeout(() => {
+        (this.$refs.tree as any).setChecked(currentColumn, true);
+      }, 0);
+    }
+
+    // }
+  }
+  handleDrop() {
+    // console.log("tree drop: ", dropNode, dropType);
+  }
+  /** 节点是否被插入 */
+  allowDrop(draggingNode: any, dropNode: any, type: string) {
+    return type !== "inner";
+  }
+  /** 节点是否允许拖动 */
+  allowDrag(draggingNode: any) {
+    return !draggingNode.data.disabled;
   }
   /**  处理table里面根据字段获取对应的值 */
   getPropByPath(obj: any, path: string, strict = true) {
@@ -246,6 +377,9 @@ export default class HtTable extends Vue {
     // };
     return tempObj ? tempObj[keyArr[i]] : null;
   }
+  showFilterModel() {
+    this.state.visibleFilter = true;
+  }
   /** 遍历循环展示row数据 */
   showValue(row: any, key: string) {
     if (key) {
@@ -270,6 +404,25 @@ export default class HtTable extends Vue {
       return "";
     }
   }
+  /** 获取显示出来的table头信息 */
+  get showColumns() {
+    const { showColumnKeys, showColumns } = this.state;
+    let obj: any = {};
+    for (const key in showColumnKeys) {
+      obj = { ...obj, [showColumnKeys[key]]: true };
+    }
+    /** 缓存起来下次使用  --todo只做了显示没有做排序缓存 */
+    if (this.uuId) {
+      window.localStorage.setItem(
+        "table_" + this.uuId,
+        JSON.stringify(showColumnKeys)
+      );
+    }
+
+    const data = showColumns.filter((item) => obj[item.key as string]);
+    return data;
+  }
+
   /** 监听 */
   @Watch("pageInfo")
   setPageInfo(val?: PageInfoType) {
@@ -283,6 +436,10 @@ export default class HtTable extends Vue {
       };
     }
   }
+  @Watch("columns")
+  setColumns(columns?: Column[]) {
+    this.state.showColumns = columns || [];
+  }
 }
 </script>
 <style lang='scss' scoped></style>

package/src/packages/index.ts

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

package/src/packages/type.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-25 17:05:17
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-23 11:33:43
+ * @LastEditTime: 2022-01-10 09:32:46
  */
 /** 初始的默认条数 */
 export const defalutPageSize = 10
@@ -53,6 +53,7 @@ export interface Column {
 
   key: string;
   title: string;
+
   width?: number | string;
   minWidth?: number | string;
   fixed?: 'left' | 'rigth' | boolean;
@@ -68,11 +69,13 @@ export interface Column {
   hide?: boolean;
   /**  时间是否跨行展示 */
   spread?: boolean;
-  /** 通过type展示相应的数据  用户id|部门id|时间格式化*/
-  type?: 'userId' | 'org' | 'time' | 'common',
+  /** 通过type展示相应的数据  用户id|部门id|时间格式化|是否布尔值*/
+  type?: 'userId' | 'org' | 'time' | 'common' | 'boolean',
   /**    只有当type='common'时候有效  数据类型个ca common里面的一样但不包括时间 时间使用time  */
   commonType?: 'userId' | 'departmentId' | 'baseDataId' | 'roleId' | 'baseDataName' | 'baseDataValue',
   showOverflowTooltip?: boolean,
+  /** 筛选时候是否禁用 */
+  disabled?: boolean;
 }
 export interface PageInfoType {
   currentPage: number;

package/src/views/About.vue

@@ -4,13 +4,11 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2022-01-04 09:31:44
+ * @LastEditTime: 2022-01-10 09:32:22
 -->
 <template>
   <div>
-    <HtExportPdf selector="f"
-                 ref="pdf"
-                 :title="'测试'"></HtExportPdf>
+
     <el-button type=""
                @click="test">test</el-button>
     <!-- <ht-count-down :stopwatch="true"
@@ -62,7 +60,6 @@
 import { Component, Vue } from "vue-property-decorator";
 import HtTable from "@/packages/HtTable/index.vue";
 import HtCountDown from "@/packages/HtCountDown/index.vue";
-import HtExportPdf from "@/packages/HtExportPdf/index.vue";
 import HtUi from "htui-yllkbz";
 import "htui-yllkbz/lib/htui.css";
 Vue.use(HtUi);
@@ -78,7 +75,6 @@ interface State {
   components: {
     HtTable,
     HtCountDown,
-    HtExportPdf,
   },
 })
 export default class Index extends Vue {
@@ -93,6 +89,7 @@ export default class Index extends Vue {
         age: 12,
         sex: 0,
         id: 1,
+
         test: { title: "测试" },
         time: "2022-01-20T00:00:00+08:00",
       },
@@ -134,6 +131,7 @@ export default class Index extends Vue {
         title: "姓名",
         key: "test.title",
         width: "300px",
+        disabled: true,
       },
       {
         title: "姓额外名",

package/src/packages/HtExportPdf/index.ts

@@ -1,16 +0,0 @@
-/*
- * @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

@@ -1,46 +0,0 @@
-<!--
- * @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/unit/htmlToPdf.js

@@ -1,108 +0,0 @@
-/*
- * @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
-}