htui-yllkbz 1.2.11 → 1.2.15

package/src/packages/HtTable/index.vue

@@ -0,0 +1,161 @@
+
+<!--
+ * @Descripttion: ht-table
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-11-11 11:23:24
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-09 16:33:39
+-->
+<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"
+                         type='selection'>
+        </el-table-column>
+        <el-table-column v-if="!hideOrder"
+                         label="序号"
+                         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>
+        <el-table-column :label="item.title"
+                         :key='item.key'
+                         v-for="item in columns"
+                         :show-overflow-tooltip="true"
+                         :prop="item.key"
+                         :width="item.width||120">
+          <template slot-scope="{row,column,rowIndex}">
+            <slot :name="item.key"
+                  :row="row"
+                  :column="column"
+                  :rowIndex="rowIndex">{{row[item.key]}}</slot>
+            {{item.headerSlot}}
+          </template>
+          <template slot-scope="{column,$index}"
+                    slot="header">
+            <slot :name="'header_'+item.key"
+                  :column="column"
+                  :$index="$index">{{item.title}}</slot>
+          </template>
+        </el-table-column>
+
+      </el-table>
+    </article>
+    <footer v-if="!hidePage">
+      <el-row>
+        <el-col :span="24">
+          <!-- <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-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({
+  components: {
+    PageInfo,
+  },
+})
+export default class Index extends Vue {
+  /** 默认的table头 */
+  @Prop() columns!: Column[];
+  @Prop() data!: any[];
+  /** 是否隐藏分页 */
+  @Prop() hidePage!: 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;
+  @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);
+  }
+
+  /** 监听 */
+  @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/PageInfo/index.ts

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

package/src/packages/PageInfo/index.vue

@@ -0,0 +1,113 @@
+<!--
+ * @Descripttion: 处理分页封装
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-12-08 11:30:56
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-09 16:20:43
+-->
+
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-11-22 10:00:05
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-11-22 18:07:40
+-->
+<template>
+  <el-pagination @current-change="handleCurrentChange"
+                 :background="background"
+                 @size-change="handelSizeChange"
+                 :hide-on-single-page="hideOnSinglePage"
+                 :disabled="!!disabled"
+                 :small="!!small"
+                 :current-page="state.pageInfo.currentPage"
+                 :page-size="state.pageInfo.maxResultCount"
+                 :page-sizes="pageSizes||[10, 20, 30, 40, 50, 100]"
+                 :layout="layout||'total, sizes, prev, pager, next, jumper'"
+                 :total="state.pageInfo.totalCount">
+  </el-pagination>
+</template>
+<script lang='ts'>
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { PageInfoType } from "../type";
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  /** 分页信息 */
+  pageInfo: {
+    currentPage: number;
+    maxResultCount: number;
+    skipCount: number;
+    totalCount: number;
+  };
+}
+
+@Component
+export default class HtPagination extends Vue {
+  /**  通用样式 */
+  @Prop() comStyle!: string;
+  /**  是否使用小型分页样式 */
+  @Prop() small!: string;
+  /** 当前页 */
+  @Prop() pageInfo!: PageInfoType;
+  /** 每页条数 */
+  @Prop() pageSize!: string;
+  /**  跳过多少条 */
+  @Prop() skipCount!: string;
+  /**  是否禁用 */
+  @Prop() disabled!: boolean;
+  /** 是否未分页按钮添加背景色 */
+  @Prop() background!: string;
+  /**  只有一页时是否隐藏 */
+  @Prop() hideOnSinglePage!: boolean;
+  /**  每页显示个数选择器的选项设置 */
+  @Prop() pageSizes!: number[];
+  /**  组件布局 */
+  @Prop() layout!: string; //组件布局，子组件名用逗号分隔
+  /** 数据 */
+  state: State = {
+    loading: false,
+    pageInfo: {
+      currentPage: 1,
+      maxResultCount: 10,
+      skipCount: 0,
+      totalCount: 0,
+    },
+  };
+
+  /** 生命周期 */
+  created() {
+    if (this.pageInfo) {
+      this.setpageInfo(this.pageInfo);
+    }
+  }
+  /** 方法 */
+  /** 翻页 */
+  handleCurrentChange(val: number) {
+    this.state.pageInfo.currentPage = val || 1;
+    const { maxResultCount = 0, currentPage } = this.state.pageInfo;
+    this.state.pageInfo.skipCount = (currentPage - 1) * maxResultCount;
+    this.$emit("onchange", this.state.pageInfo);
+  }
+  /** 更新每页条数 */
+  handelSizeChange(val: number) {
+    this.state.pageInfo.currentPage = 1;
+    this.state.pageInfo.maxResultCount = val;
+    this.handleCurrentChange(1);
+  }
+  /** 监听 */
+  @Watch("pageInfo")
+  setpageInfo(val: PageInfoType) {
+    const pageInfo: PageInfoType = val;
+    this.state.pageInfo = {
+      currentPage: Number(pageInfo.currentPage),
+      maxResultCount: Number(pageInfo.pageSize),
+      skipCount: Number(pageInfo.skipCount),
+      totalCount: Number(pageInfo.totalCount),
+    };
+  }
+  /** 计算属性 */
+}
+</script>

package/src/packages/SelectTable/CommonTable.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:50:56
  * @LastEditors: hutao
- * @LastEditTime: 2021-11-30 10:26:25
+ * @LastEditTime: 2021-12-08 11:42:36
 -->
 <!--
  * @Descripttion: 
@@ -47,6 +47,7 @@
                          :show-overflow-tooltip="true"
                          :prop="item.key"
                          :width="item.width||120">
+          <slot :name="item.key">{{item.key}}</slot>
         </el-table-column>
 
       </el-table>

package/src/packages/SelectTable/index.vue

@@ -4,22 +4,24 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:06:51
  * @LastEditors: hutao
- * @LastEditTime: 2021-11-30 14:15:32
+ * @LastEditTime: 2021-12-08 11:29:19
 -->
 <template>
   <el-popover placement="bottom"
               title=""
+              ref="elPopver"
               class="ht-popover"
-              v-model="state.visible"
               :width="width||600"
               @show="show"
               @hide="hide"
               trigger="click">
     <div slot="reference"
-         @click="!state.config.disabled?state.visible = !state.visible:state.visible=false"
+         :style="`width:${inputWidth}px`"
+         @click="!state.config.disabled?state.visible = true:state.visible=false"
          class="ht-contnet">
       <el-input readonly
                 @blur="blurInput"
+                :style="`width:${inputWidth}px`"
                 :placeholder="placeholder"
                 :disabled="state.config.disabled"
                 @focus="focusInput"
@@ -85,6 +87,8 @@ export default class HtSelectTable extends Vue {
   @Prop() comStyle!: string;
   @Prop() config!: string;
   @Prop() width!: number;
+  /** 输入框宽度 */
+  @Prop() inputWidth!: number;
   /** 同原生placeholder */
   @Prop() placeholder!: string;
   /**搜索框 同原生placeholder */
@@ -152,17 +156,20 @@ export default class HtSelectTable extends Vue {
 
     this.$emit("change", row, type);
     if (type) {
+      (this.$refs["elPopver"] as any).doToggle();
       this.state.visible = false;
     }
   }
   /** 隐藏弹窗 */
   hide() {
     this.state.icon = "el-icon-arrow-down";
+    this.state.visible = true;
     this.state.show = false;
   }
   /** 焦点移入移出 */
   blurInput() {
     const { show } = this.state;
+    this.state.visible = true;
     this.state.icon = show ? "el-icon-arrow-up" : "el-icon-arrow-down";
   }
 
@@ -175,6 +182,7 @@ export default class HtSelectTable extends Vue {
     //
     if (!this.state.config.disabled) {
       const ref: any = this.$refs[this.state.config.key || "ht-table"];
+      console.log("333");
       this.state.visible = false;
       ref.clearCheck();
     }

package/src/packages/index.ts

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

package/src/packages/type.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-25 17:05:17
  * @LastEditors: hutao
- * @LastEditTime: 2021-11-14 17:30:49
+ * @LastEditTime: 2021-12-09 16:07:41
  */
 /** 初始的默认条数 */
 export const defalutPageSize = 10
@@ -48,8 +48,26 @@ export interface ConfigProp {
   };
 
 }
+/**  参考element Table https://element.eleme.cn/#/zh-CN/component/table */
 export interface Column {
+
   key: string;
   title: string;
-  width?: number;
+  width?: number | string;
+  minWidth?: number | string;
+  fixed?: 'left' | 'rigth' | boolean;
+  sortable?: 'custom' | boolean;
+  resizable?: boolean;
+  align?: 'left' | 'right' | 'center';
+  headerAlign?: 'left' | 'right' | 'center';
+  className?: string;
+  labelClassName?: string;
+  /** table头是否使用slot */
+  headerSlot?: boolean;
+}
+export interface PageInfoType {
+  currentPage: number;
+  pageSize: number;
+  skipCount: number;
+  totalCount: number;
 }

package/src/views/About.vue

@@ -1,3 +1,78 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-11-15 14:41:40
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-09 16:47:22
+-->
 <template>
-  <div>模板框架</div>
+  <div>
+    <HtTable :data="state.data"
+             @onchange="test"
+             :height="200"
+             :columns="state.columns">
+      <div slot="sex"
+           slot-scope="{row}">{{row.sex?'男':'女'}}</div>
+      <div slot="age"
+           slot-scope="{row}">
+        <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>
+  </div>
 </template>
+<script lang='ts'>
+import { Component, Vue } from "vue-property-decorator";
+import HtTable from "@/packages/HtTable/index.vue";
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  columns: any;
+  data: any;
+}
+@Component({
+  components: {
+    HtTable,
+  },
+})
+export default class Index extends Vue {
+  /** 数据 */
+  state: State = {
+    loading: false,
+    data: [
+      { name: "胡涛", age: 12, sex: 0, id: 1 },
+      { name: "胡涛", age: 12, sex: 1, id: 2 },
+      { name: "胡涛", age: 12, sex: 1, id: 3 },
+      { name: "胡涛", age: 12, sex: 0, id: 4 },
+    ],
+    columns: [
+      {
+        title: "姓名",
+        key: "name",
+        width: "300px",
+      },
+      {
+        title: "age",
+        key: "age",
+      },
+      {
+        title: "性别",
+        key: "sex",
+      },
+    ],
+  };
+  /** 生命周期 */
+  /** 方法 */
+  test() {
+    //console.log("ee", e);
+  }
+  /** 监听 */
+  /** 计算属性 */
+}
+</script>
+<style lang='scss' scoped></style>