htui-yllkbz 1.2.22 → 1.2.26

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/HtTable/index.vue

@@ -5,12 +5,11 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:23:24
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-12 11:01:44
+ * @LastEditTime: 2021-12-13 15:40:43
 -->
 <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||''"
                          :align="'center'"
                          width="55">
           <template slot="header">
@@ -59,65 +58,84 @@
             {{(state.pageInfo.currentPage-1)*state.pageInfo.pageSize+(scope.$index+1)}}
           </template>
         </el-table-column>
-        <el-table-column :label="item.title"
-                         :key='item.key'
-                         :fixed="item.fixed"
-                         :align="item.align"
-                         :header-align="item.headerAlign"
-                         :column-key="item.columnKey"
-                         :class-name="item.className"
-                         v-for="item in columns"
-                         :show-overflow-tooltip="true"
-                         :prop="item.key"
-                         :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>
-              </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 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==='common'||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-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'
+                       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>
+            <!-- 处理重定义table头相关信息 header_key -->
+            <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">
+      <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"
@@ -125,6 +143,7 @@
                     :page-sizes="pagination&&pagination.pageSizes"
                     :page-info="state.pageInfo"></PageInfo>
         </el-col>
+
       </el-row>
     </footer>
   </div>
@@ -148,6 +167,8 @@ export default class HtTable extends Vue {
   /** 默认的table头 */
   @Prop() columns!: Column[];
   @Prop() data!: any[];
+  /**  序号对应的名称 */
+  @Prop() keyName?: string;
   /** 是否隐藏分页 */
   @Prop() hidePage!: boolean;
   /** 是否启用复选框 */
@@ -183,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/type.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-25 17:05:17
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-09 16:07:41
+ * @LastEditTime: 2021-12-13 15:31:13
  */
 /** 初始的默认条数 */
 export const defalutPageSize = 10
@@ -64,6 +64,13 @@ export interface Column {
   labelClassName?: string;
   /** table头是否使用slot */
   headerSlot?: boolean;
+  /** 是否隐藏当前列 */
+  hide?: boolean;
+  /** 通过type展示相应的数据  用户id|部门id|时间格式化*/
+  type?: 'userId' | 'org' | 'time' | 'common',
+  /**    只有当type='common'时候有效  数据类型个ca common里面的一样但不包括时间 时间使用time  */
+  commonType?: 'userId' | 'departmentId' | 'baseDataId' | 'roleId' | 'baseDataName' | 'baseDataValue',
+  showOverflowTooltip?: boolean,
 }
 export interface PageInfoType {
   currentPage: 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-13 15:02:01
 -->
 <template>
   <div>
@@ -19,6 +19,7 @@
         <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>