htui-yllkbz 1.2.25 → 1.2.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htui-yllkbz",
-  "version": "1.2.25",
+  "version": "1.2.29",
   "typings": "types/index.d.ts",
   "main": "lib/htui.common.js",
   "style": "lib/htui.css",
@@ -22,7 +22,6 @@
     "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "element-ui": "^2.14.1",
-    "htui-yllkbz": "^1.2.6",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-kst-auth": "^2.1.15",

package/src/packages/HtAsyncTable/index.ts

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

package/src/packages/HtAsyncTable/index.vue

@@ -0,0 +1,266 @@
+
+<!--
+ * @Descripttion: ht-table
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-11-11 11:23:24
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-13 15:02:13
+-->
+<template>
+  <div v-loading="state.loading">
+    <article>
+
+      <el-table ref="comTable"
+                :height="height"
+                :max-height="maxHeight"
+                :border="border"
+                :stripe="stripe"
+                :size="size"
+                :fit="fit"
+                :show-header="showHeader"
+                :empty-text="emptyText||'暂无数据'"
+                :row-style="rowStyle"
+                :row-class-name="rowClassName"
+                :current-row-key="currentRowKey"
+                :highlight-current-row="highlightCurrentRow"
+                :row-key="rowKey||'id'"
+                :data="data"
+                tooltip-effect="dark"
+                @row-click="(row, column, event)=>$emit('row-click',row, column, event)"
+                @row-contextmenu="(row, column, event)=>$emit('row-contextmenu',row, column, event)"
+                @row-dblclick="(row, column, event)=>$emit('row-dblclick',row, column, event)"
+                @header-click="( column, event)=>$emit('header-click', column, event)"
+                @header-contextmenu="( column, event)=>$emit('header-contextmenu', column, event)"
+                @sort-change="({ column, prop, order})=>$emit('sort-change', { column, prop, order})"
+                @filter-change="(filter)=>$emit('filter-change', filter)"
+                @current-change="(currentRow, oldCurrentRow)=>$emit('current-change', currentRow, oldCurrentRow)"
+                @select="(selection, row)=>$emit('select',selection, row)"
+                @select-all="(selection)=>$emit('select-all',selection)"
+                @selection-change="(selection)=>$emit('selection-change',selection)"
+                @cell-mouse-enter="(row, column, cell, event)=>$emit('cell-mouse-enter',row, column, cell, event)"
+                @cell-mouse-leave="(row, column, cell, event)=>$emit('cell-mouse-leave',row, column, cell, event)"
+                @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"
+                         v-if="checked"
+                         :reserve-selection="reserveSelection"
+                         :selectable="selectable"
+                         type='selection'>
+        </el-table-column>
+        <el-table-column v-if="!hideOrder"
+                         :label="keyName||''"
+                         :align="'center'"
+                         width="55">
+          <template slot="header">
+            <slot :name="'header_order'"></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">
+          <el-table-column :label="item.title"
+                           :key='item.key'
+                           :fixed="item.fixed"
+                           :align="item.align"
+                           v-if="!item.hide"
+                           :header-align="item.headerAlign"
+                           :column-key="item.columnKey"
+                           :class-name="item.className"
+                           :prop="item.key"
+                           :show-overflow-tooltip="item.type==='org'||item.type==='userId'?false:(item.showOverflowTooltip===false?false:true)"
+                           :sortable="item.sortable"
+                           :sort-method="item.sortMethod"
+                           :sort-orders="item.sortOrders"
+                           :formatter="item.formatter"
+                           :sort-by="item.sortBy"
+                           :min-width="item.minWidth"
+                           :width="item.width">
+            <template slot-scope="{row,column,rowIndex}">
+              <slot :name="item.key"
+                    :row="row"
+                    :column="column"
+                    :rowIndex="rowIndex">
+                <!-- 处理部门 -->
+                <template v-if="item.type==='org'">
+                  <common-org-info v-if="getPropByPath(row,item.key)"
+                                   :org-id="getPropByPath(row,item.key)"
+                                   type="tag"></common-org-info>
+                  <span v-else>--</span>
+                </template>
+                <!-- 处理部门人员 -->
+                <template v-else-if="item.type==='userId'">
+                  <div is='common-datas-info-id'
+                       v-if="getPropByPath(row,item.key)"
+                       :user-id="JSON.stringify(getPropByPath(row,item.key))"
+                       :base-data-info='true'></div>
+                  <span v-else>--</span>
+                </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>
+                  <span v-else>--</span>
+                </template>
+                <!-- 其他 -->
+                <span v-else>{{getPropByPath(row,item.key)}}</span>
+              </slot>
+
+            </template>
+            <template slot-scope="{column,$index}"
+                      slot="header">
+              <slot :name="'header_'+item.key"
+                    :column="column"
+                    :$index="$index">{{item.title}}</slot>
+            </template>
+          </el-table-column>
+        </template>
+
+      </el-table>
+    </article>
+    <footer v-if="!hidePage">
+      <el-row>
+        <el-col :span="24"
+                name="footer">
+
+          <slot name="footerLeft"></slot>
+
+          <el-col :span="12">
+            <!-- <p style="width:90px;float:left">共{{data.length}}条</p> -->
+            <PageInfo :hide-on-single-page="pagination&&pagination.hideOnSinglePage"
+                      :small="pagination&&pagination.small"
+                      @onchange="(e)=>$emit('onchange',e)"
+                      :page-sizes="pagination&&pagination.pageSizes"
+                      :page-info="state.pageInfo"></PageInfo>
+          </el-col>
+        </el-col>
+
+      </el-row>
+    </footer>
+  </div>
+</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 {
+  pageInfo: PageInfoType;
+  loading: boolean;
+}
+@Component({
+  name: "HtTable",
+  components: {
+    PageInfo,
+  },
+})
+export default class HtTable extends Vue {
+  /** 默认的table头 */
+  @Prop() columns!: Column[];
+  @Prop() data!: any[];
+  /**  序号对应的名称 */
+  @Prop() keyName?: string;
+  /** 是否隐藏分页 */
+  @Prop() hidePage!: boolean;
+  /** 是否启用复选框 */
+  @Prop() checked!: boolean;
+  /**  仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key） */
+  @Prop() reserveSelection!: boolean;
+  @Prop() height?: string | number;
+  @Prop() maxHeight?: string | number;
+  @Prop() rowKey?: string;
+  @Prop() stripe?: boolean;
+  @Prop() border?: boolean;
+  @Prop() size?: "medium" | "small" | "mini";
+  @Prop() fit?: boolean;
+  @Prop() showHeader?: boolean;
+  @Prop() rowClassName?: any;
+  /**    仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 */
+  @Prop() selectable?: any;
+  @Prop() currentRowKey?: string | number;
+  @Prop() highlightCurrentRow?: boolean;
+  @Prop() rowStyle?: any;
+  @Prop() hideOrder?: boolean;
+  @Prop() pageInfo?: PageInfoType;
+  @Prop() emptyText?: string | number;
+  /** 分页的所有额外信息通过此参数传递 */
+  @Prop() pagination?: any;
+  state: State = {
+    loading: false,
+    pageInfo: {
+      currentPage: 1,
+      pageSize: 10,
+      skipCount: 0,
+      totalCount: 0,
+    },
+  };
+  created() {
+    // console.log("this", this.$props);
+    this.setPageInfo(this.pageInfo);
+  }
+  getPropByPath(obj: any, path: string, strict: boolean) {
+    let tempObj = obj;
+    path = path.replace(/\[(\w+)\]/g, ".$1");
+    path = path.replace(/^\./, "");
+
+    const keyArr = path.split(".");
+    let i = 0;
+    for (let len = keyArr.length; i < len - 1; ++i) {
+      if (!tempObj && !strict) break;
+      const key = keyArr[i];
+      if (key in tempObj) {
+        tempObj = tempObj[key];
+      } else {
+        if (strict) {
+          throw new Error("please transfer a valid prop path to form item!");
+        }
+        break;
+      }
+    }
+    // return {
+    //   o: tempObj,
+    //   k: keyArr[i],
+    //   v: tempObj ? tempObj[keyArr[i]] : null,
+    // };
+    return tempObj ? tempObj[keyArr[i]] : null;
+  }
+  /** 遍历循环展示row数据 */
+  showValue(row: any, key: string) {
+    if (key) {
+      if (key.includes(".")) {
+        //存在多级的情况
+        //console.log("eval", key, eval(row[key]));
+        // const arrKey = key.split(".");
+        // let data = row;
+        // arrKey.forEach((item) => {
+        //   if (data[item]) {
+        //     data = data[item];
+        //   } else {
+        //     data = "";
+        //   }
+        // });
+        return "";
+      } else {
+        //如果不存在多级数据
+        return row[key];
+      }
+    } else {
+      return "";
+    }
+  }
+  /** 监听 */
+  @Watch("pageInfo")
+  setPageInfo(val?: PageInfoType) {
+    if (val) {
+      const pageInfo: PageInfoType = val;
+      this.state.pageInfo = {
+        currentPage: Number(pageInfo.currentPage),
+        pageSize: Number(pageInfo.pageSize),
+        skipCount: Number(pageInfo.skipCount),
+        totalCount: Number(pageInfo.totalCount),
+      };
+    }
+  }
+}
+</script>
+<style lang='scss' scoped></style>

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,137 @@
+<!--
+ * @Descripttion: 文件导出按钮
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-09-02 09:03:43
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-19 14:04:05
+-->
+<template>
+  <span>
+    <slot @click="exportExcel"
+          v-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 Index 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.vue

@@ -5,12 +5,11 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:23:24
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-13 11:30:26
+ * @LastEditTime: 2021-12-14 16:06:12
 -->
 <template>
   <div v-loading="state.loading">
     <article>
-
       <el-table ref="comTable"
                 :height="height"
                 :max-height="maxHeight"
@@ -49,7 +48,7 @@
                          type='selection'>
         </el-table-column>
         <el-table-column v-if="!hideOrder"
-                         label=""
+                         :label="keyName===undefined?'序号':keyName"
                          :align="'center'"
                          width="55">
           <template slot="header">
@@ -69,7 +68,7 @@
                            :column-key="item.columnKey"
                            :class-name="item.className"
                            :prop="item.key"
-                           :show-overflow-tooltip="item.type==='org'||item.type==='userId'?false:(item.showOverflowTooltip===false?false:true)"
+                           :show-overflow-tooltip="item.type==='common'||item.type==='org'||item.type==='userId'?false:(item.showOverflowTooltip===false?false:true)"
                            :sortable="item.sortable"
                            :sort-method="item.sortMethod"
                            :sort-orders="item.sortOrders"
@@ -89,6 +88,18 @@
                                    type="tag"></common-org-info>
                   <span v-else>--</span>
                 </template>
+                <template v-else-if="item.type==='common'">
+                  <div v-if="getPropByPath(row,item.key)"
+                       is='common-datas-info-id'
+                       :user-id="item.commonType['userId']?getPropByPath(row,item.key):'[]'"
+                       :department-id="item.commonType['departmentId']?getPropByPath(row,item.key):'[]'"
+                       :role-id="item.commonType['roleId']?getPropByPath(row,item.key):'[]'"
+                       :base-data-id="item.commonType['baseDataId']?getPropByPath(row,item.key):''"
+                       :base-data-value="item.commonType['baseDataValue']?getPropByPath(row,item.key):''"
+                       :base-data-name="item.commonType['baseDataName']?getPropByPath(row,item.key):''"
+                       :base-data-info='true'></div>
+                  <span v-else>--</span>
+                </template>
                 <!-- 处理部门人员 -->
                 <template v-else-if="item.type==='userId'">
                   <div is='common-datas-info-id'
@@ -107,6 +118,7 @@
               </slot>
 
             </template>
+            <!-- 处理重定义table头相关信息 header_key -->
             <template slot-scope="{column,$index}"
                       slot="header">
               <slot :name="'header_'+item.key"
@@ -119,8 +131,11 @@
       </el-table>
     </article>
     <footer v-if="!hidePage">
-      <el-row>
-        <el-col :span="24">
+      <el-row name="footer">
+        <!-- 此处建议使用el-col -->
+        <slot name="footerLeft"></slot>
+
+        <el-col :span="12">
           <!-- <p style="width:90px;float:left">共{{data.length}}条</p> -->
           <PageInfo :hide-on-single-page="pagination&&pagination.hideOnSinglePage"
                     :small="pagination&&pagination.small"
@@ -128,6 +143,7 @@
                     :page-sizes="pagination&&pagination.pageSizes"
                     :page-info="state.pageInfo"></PageInfo>
         </el-col>
+
       </el-row>
     </footer>
   </div>
@@ -151,6 +167,8 @@ export default class HtTable extends Vue {
   /** 默认的table头 */
   @Prop() columns!: Column[];
   @Prop() data!: any[];
+  /**  序号对应的名称 */
+  @Prop() keyName?: string;
   /** 是否隐藏分页 */
   @Prop() hidePage!: boolean;
   /** 是否启用复选框 */
@@ -186,7 +204,6 @@ export default class HtTable extends Vue {
     },
   };
   created() {
-    // console.log("this", this.$props);
     this.setPageInfo(this.pageInfo);
   }
   getPropByPath(obj: any, path: string, strict: boolean) {

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 11:16:04
+ * @LastEditTime: 2021-12-19 14:00:13
  */
 /** 初始的默认条数 */
 export const defalutPageSize = 10
@@ -67,7 +67,9 @@ export interface Column {
   /** 是否隐藏当前列 */
   hide?: boolean;
   /** 通过type展示相应的数据  用户id|部门id|时间格式化*/
-  type?: 'userId' | 'org' | 'time',
+  type?: 'userId' | 'org' | 'time' | 'common',
+  /**    只有当type='common'时候有效  数据类型个ca common里面的一样但不包括时间 时间使用time  */
+  commonType?: 'userId' | 'departmentId' | 'baseDataId' | 'roleId' | 'baseDataName' | 'baseDataValue',
   showOverflowTooltip?: boolean,
 }
 export interface PageInfoType {
@@ -75,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-12 09:03:38
+ * @LastEditTime: 2021-12-15 15:46:44
 -->
 <template>
   <div>
@@ -24,6 +24,20 @@
         <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'>