htui-yllkbz 1.4.20 → 1.4.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htui-yllkbz",
-  "version": "1.4.20",
+  "version": "1.4.21",
   "port": "8082",
   "typings": "types/index.d.ts",
   "main": "lib/htui.common.js",

package/src/packages/HtBread/index.ts

@@ -0,0 +1,15 @@
+/*
+ * @Descripttion: 基础数据展示组件
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-04-12 17:34:51
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-04-23 13:44:24
+ */
+
+import HtBread from "./index.vue";
+(HtBread as any).install = function (Vue: any) {
+
+  Vue.component("HtBread", HtBread);
+};
+export default HtBread;

package/src/packages/HtBread/index.vue

@@ -0,0 +1,79 @@
+<!--
+ * @Descripttion: 更多
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-09-28 10:24:08
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-04-23 14:23:41
+-->
+<template>
+  <el-breadcrumb
+    class="ht-breadcrumb"
+    :separator-class="separatorClass"
+    :separator="separator"
+  >
+    <el-breadcrumb-item
+      :to="item.to ? { path: item.to } : undefined"
+      :style="item.style"
+      :class="{ ['ht-is-link']: item.to || item.url }"
+      :key="item.key"
+      v-for="item in dataSource"
+      ><span class="ht-breadcrumb-item" @click="clickBreadCrumbItem(item)">{{
+        item.title
+      }}</span></el-breadcrumb-item
+    >
+  </el-breadcrumb>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import '@/packages/style.scss';
+import { BreadType } from '../type';
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  /** 弹窗 */
+  visible: boolean;
+}
+@Component({
+  name: 'HtBread',
+  components: {},
+})
+export default class Index extends Vue {
+  /** droptitle的样式 */
+
+  @Prop({ default: 'el-icon-arrow-right' }) separatorClass?: string;
+  /** 分隔符 */
+  @Prop() separator?: string;
+  /** 面包屑的内容 */
+  @Prop() data?: BreadType[];
+
+  /** 数据 */
+  state: State = {
+    loading: false,
+    visible: false,
+  };
+  clickBreadCrumbItem(item: BreadType) {
+    this.$emit('callback', item);
+    if (item.url) {
+      if (item.target === '_blank') {
+        window.open(item.url);
+      } else {
+        window.location.href = item.url;
+      }
+    }
+  }
+  get dataSource(): BreadType[] {
+    return this.data || [];
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ht-link-title:hover {
+  color: var(--primary);
+}
+.ht-icon-more {
+  transform: rotate(90deg);
+  color: var(--primary);
+  cursor: pointer;
+}
+</style>

package/src/packages/HtCol/index.ts

@@ -0,0 +1,15 @@
+/*
+ * @Descripttion: 基础数据展示组件
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-04-12 17:34:51
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-04-21 16:35:06
+ */
+
+import HtCol from "./index.vue";
+(HtCol as any).install = function (Vue: any) {
+
+  Vue.component("HtCol", HtCol);
+};
+export default HtCol;

package/src/packages/HtCol/index.vue

@@ -0,0 +1,121 @@
+<!--
+ * @Descripttion: 更多
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-09-28 10:24:08
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-04-21 18:39:03
+-->
+<template>
+  <div
+    class="ht-col"
+    :class="{
+      [`ht-col-${span || copies}`]: !!(span || copies),
+      'ht-col-offset': offset,
+    }"
+    style="padding-left: 10px; padding-right: 10px;"
+    :style="colStyle"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import '@/packages/style.scss';
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  /** 弹窗 */
+  visible: boolean;
+}
+@Component({
+  name: 'HtCol',
+  components: {},
+})
+export default class Index extends Vue {
+  /** droptitle的样式 */
+
+  @Prop() span?: number;
+
+  /** 芬兰便宜 */
+  @Prop() offset?: number;
+
+  /** 数据 */
+  state: State = {
+    loading: false,
+    visible: false,
+  };
+  /** padding值 */
+  get gutter() {
+    const parent: any = this.$parent;
+
+    return parent && parent.$options && parent.$options.propsData
+      ? parent.$options.propsData.gutter
+      : 0;
+  }
+  /** 高度 */
+  get colHeight() {
+    const parent: any = this.$parent;
+
+    return parent && parent.$options && parent.$options.propsData
+      ? parent.$options.propsData.colHeight
+      : 0;
+  }
+  /** 最小高度 */
+  get colMinHeight() {
+    const parent: any = this.$parent;
+
+    return parent && parent.$options && parent.$options.propsData
+      ? parent.$options.propsData.colMinHeight
+      : 0;
+  }
+  /** 总份数默认24份 */
+  get copies() {
+    const parent: any = this.$parent;
+
+    return parent && parent.$options && parent.$options.propsData
+      ? (parent as any).$options.propsData.copies
+      : 24;
+  }
+  /** 计算属性 */
+  get colStyle() {
+    let styl = this.gutter
+      ? `padding-left: ${this.gutter / 2}px; padding-right: ${this.gutter /
+          2}px;`
+      : '';
+    if (this.offset) {
+      styl = styl + `margin-left:${100 / (this.copies / this.offset)}%;`;
+    }
+    if (this.colHeight) {
+      styl =
+        styl +
+        `height:${
+          isNaN(this.colHeight) ? this.colHeight : this.colHeight + 'px'
+        };`;
+    }
+    if (this.colMinHeight) {
+      styl =
+        styl +
+        `min-height:${
+          isNaN(this.colMinHeight)
+            ? this.colMinHeight
+            : this.colMinHeight + 'px'
+        };`;
+    }
+
+    styl = styl + `width:${100 / (this.copies / (this.span || this.copies))}%;`;
+
+    return styl;
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ht-link-title:hover {
+  color: var(--primary);
+}
+.ht-icon-more {
+  transform: rotate(90deg);
+  color: var(--primary);
+  cursor: pointer;
+}
+</style>

package/src/packages/HtModel/index.ts

@@ -0,0 +1,15 @@
+/*
+ * @Descripttion: 基础数据展示组件
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-04-12 17:34:51
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-04-21 16:31:50
+ */
+
+import HtModel from "./index.vue";
+(HtModel as any).install = function (Vue: any) {
+
+  Vue.component("HtModel", HtModel);
+};
+export default HtModel;

package/src/packages/HtModel/index.vue

@@ -0,0 +1,144 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-09-28 10:24:08
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-04-23 14:24:26
+-->
+<template>
+  <el-dialog
+    :visible.sync="state.visible"
+    :fullscreen="fullscreen"
+    :top="top"
+    :custom-class="customClass"
+    :append-to-body="appendToBody"
+    :close-on-press-escape="closeOnPressEscape"
+    :destroy-on-close="destroyOnClose"
+    :modal-append-to-body="modalAppendToBody"
+    :close-on-click-modal="closeOnClickModal"
+    :modal="modal"
+    :lock-scroll="lockScroll"
+    @close="close"
+    :width="width"
+    :center="center"
+    :show-close="showClose"
+    :before-close="beforClose"
+    :withHeader="withHeader"
+    :wrapperClosable="wrapperClosable"
+  >
+    <span slot="title">
+      <slot name="title"
+        ><span style="font-size:18px;font-weight:bold;padding:0px 0 0 12px">{{
+          title
+        }}</span></slot
+      >
+    </span>
+    <div style="padding:0 12px"><slot></slot></div>
+    <span
+      slot="footer"
+      class="dialog-footer ht-model-footer"
+      :style="!footerRight ? 'text-align:left' : ''"
+    >
+      <slot name="footer" v-if="withFooter">
+        <template>
+          <el-button
+            :loading="loading"
+            style="margin-right:6px"
+            @click="onCancel"
+            >{{ cancelText }}</el-button
+          >
+          <el-button
+            style="margin-right:12px;"
+            type="primary"
+            :loading="loading"
+            @click="onOk"
+            >{{ okText }}</el-button
+          >
+        </template>
+      </slot>
+    </span>
+  </el-dialog>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  /** 弹窗 */
+  visible: boolean;
+}
+@Component({
+  name: 'HtDrawer',
+  components: {},
+})
+export default class Index extends Vue {
+  /** 抽屉尺寸 */
+  @Prop({ default: '500px' }) width!: string;
+  /** 标题 */
+  @Prop() title!: string;
+  @Prop() loading!: boolean;
+  /** 是否显示隐藏来自父级传参 */
+  @Prop() value!: boolean;
+  @Prop() fullscreen!: boolean;
+  @Prop() lockScroll!: boolean;
+  @Prop() center!: boolean;
+  @Prop({ default: '120px' }) top!: string;
+  @Prop({ default: false }) closeOnClickModal!: boolean;
+
+  @Prop({ default: true }) appendToBody!: boolean;
+  @Prop({ default: false }) wrapperClosable!: boolean;
+  /** 是否可以通过按下 ESC 关闭 Drawer	 */
+  @Prop({ default: false }) closeOnPressEscape!: boolean;
+  /** 控制是否在关闭 Drawer 之后将子元素全部销毁	 */
+  @Prop({ default: true }) destroyOnClose!: boolean;
+  /** 是否需要遮罩层	 */
+  @Prop({ default: true }) modal!: boolean;
+  /** Drawer 的自定义类名	 */
+  @Prop() customClass!: string;
+  /** 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上	 */
+  @Prop({ default: true }) modalAppendToBody!: boolean;
+  @Prop({ default: true }) showClose!: boolean;
+  @Prop() beforClose!: any;
+  /**   控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 */
+  @Prop({ default: true }) withHeader!: boolean;
+  /**   控制是否显示 foot 栏, 默认为 true, 当此项为 false 时, foot attribute 和 foot slot 均不生效 */
+  @Prop({ default: true }) withFooter!: boolean;
+  /** footer的按钮是否靠右 */
+  @Prop({ default: true }) footerRight!: boolean;
+  @Prop({ default: '保存' }) okText?: string;
+  @Prop({ default: '取消' }) cancelText?: string;
+  /** 数据 */
+  state: State = {
+    loading: false,
+    visible: false,
+  };
+  /** 生命周期 */
+  /** 方法 */
+  onCancel() {
+    this.state.visible = false;
+  }
+  onOk() {
+    this.$emit('onOk', true);
+  }
+  close() {
+    this.$emit('onCancel', false);
+  }
+
+  /** 监听 */
+  @Watch('value', { immediate: true })
+  getVisible(val: boolean, old: boolean) {
+    if (val !== old) {
+      this.state.visible = val;
+    }
+  }
+  /** 监听 */
+  @Watch('state.visible', { immediate: true })
+  setVisible(val: boolean) {
+    this.$emit('input', val);
+    this.$emit('change', val);
+  }
+  /** 计算属性 */
+}
+</script>
+<style lang="scss" scoped></style>

package/src/packages/HtRow/index.ts

@@ -0,0 +1,15 @@
+/*
+ * @Descripttion: 基础数据展示组件
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-04-12 17:34:51
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-04-21 16:31:50
+ */
+
+import HtRow from "./index.vue";
+(HtRow as any).install = function (Vue: any) {
+
+  Vue.component("HtRow", HtRow);
+};
+export default HtRow;

package/src/packages/HtRow/index.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Descripttion: 更多
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-09-28 10:24:08
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-04-23 10:35:30
+-->
+<template>
+  <div
+    class="ht-row"
+    :class="type === 'flex' ? 'ht-row--flex' : ''"
+    :style="rowStyle"
+  >
+    <slot :gutter="gutter"> </slot>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import '@/packages/style.scss';
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  /** 弹窗 */
+  visible: boolean;
+}
+@Component({
+  name: 'HtRow',
+  components: {},
+})
+export default class Index extends Vue {
+  /** droptitle的样式 */
+
+  @Prop() gutter?: number;
+  /** s是否为flex布局 */
+  @Prop() type?: string;
+  @Prop() copies?: number;
+  @Prop() colHeight?: number;
+  /** col的最小高度 */
+  @Prop() colMinHeight?: number;
+  @Prop({ default: 'start' }) justify?: string;
+
+  /** 数据 */
+  state: State = {
+    loading: false,
+    visible: false,
+  };
+
+  /** 计算属性 */
+  get rowStyle() {
+    let styl = this.gutter
+      ? `margin-left: -${this.gutter / 2}px; margin-right: -${this.gutter /
+          2}px;`
+      : '';
+    if (this.type === 'flex') {
+      styl = styl + `justify-content:${this.justify}`;
+    }
+
+    return styl;
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ht-link-title:hover {
+  color: var(--primary);
+}
+.ht-icon-more {
+  transform: rotate(90deg);
+  color: var(--primary);
+  cursor: pointer;
+}
+</style>

package/src/packages/index.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-21 10:08:41
  * @LastEditors: hutao
- * @LastEditTime: 2023-03-30 15:04:34
+ * @LastEditTime: 2023-04-23 10:37:02
  */
 
 // 导入组件
@@ -34,13 +34,18 @@ import HtSelectUnit from './HtSelectUnit'
 import HtSelectPosition from './HtSelectPosition'
 import HtSelectCategory from './HtSelectCategory'
 import HtMenu from './HtMenu'
+import HtRow from './HtRow'
+import HtCol from './HtCol'
+import HtModel from "./HtModel"
+import HtBread from './HtBread'
+
 
 
 
 
 
 // 存储组件列表
-const components = [HtMenu, HtSelectCategory, HtSelectUnit, HtSelectPosition, HtMore, HtSelectTimeSlot, HtSelectCron, HtBaseData, HtDrawer, HtShowBaseType, HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtUploadFiles, HtSelectBaseData, HtSelectOrg, HtSelectUser, HtShowBaseData, HtOrgInfo]
+const components = [HtRow, HtCol, HtBread, HtModel, HtMenu, HtSelectCategory, HtSelectUnit, HtSelectPosition, HtMore, HtSelectTimeSlot, HtSelectCron, HtBaseData, HtDrawer, HtShowBaseType, HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtUploadFiles, HtSelectBaseData, HtSelectOrg, HtSelectUser, HtShowBaseData, HtOrgInfo]
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 const install = function (Vue: any) {
   // 判断是否安装
@@ -56,6 +61,7 @@ export default {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
   install,
   // 以下是具体的组件列表
+  HtRow, HtCol, HtModel, HtBread,
   HtSelectTable, HtSelectPosition, HtPagination, HtShowBaseType, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtUploadFiles, HtMore,
   HtSelectUnit, HtSelectCategory, HtMenu,
   HtSelectBaseData, HtSelectOrg, HtSelectUser, HtShowBaseData, HtOrgInfo, HtBaseData, HtDrawer, HtSelectCron, HtSelectTimeSlot

package/src/packages/style.scss

@@ -58,3 +58,51 @@ $primary-color: var(--primary);
 .ht-user-disabled {
   color: #ddd;
 }
+
+.ht-row{
+  position: relative;
+  box-sizing: border-box;
+  // &:after {
+   
+  //  };
+  // &:before {
+  //   display: table;
+  //   content: "";
+  // };
+ 
+  }
+  
+  .ht-row::before,.ht-row::after{
+    display: table;
+    content: "";
+  }
+  .ht-row::after{
+    clear: both;
+  }
+.ht-row--flex{
+  display: flex;
+}
+[class*=ht-col-] {
+  float: left;
+  box-sizing: border-box;
+  }
+
+  .ht-breadcrumb{
+    .el-breadcrumb__item{
+      color: #333;
+      .is-link{
+        font-weight: 400;
+        color: #333;
+      }
+    }
+    .ht-breadcrumb-item{
+      color: #333;
+    }
+    .ht-is-link span{
+      &:hover{
+        color:var(--primary);
+        cursor: pointer;
+      }
+    }
+  }
+

package/src/packages/type.ts

@@ -126,6 +126,20 @@ export interface PageType {
   totalCount: number;
 
 }
+/** 二次封装面包屑的类型 */
+export interface BreadType {
+  /** 唯一值 */
+  key: string;
+  /** 名称 */
+  title: string;
+  /** vue的路由跳转 */
+  to?: string;
+  /** 完成的路由跳转 */
+  url?: string;
+  style?: string;
+  /** 跳转方式针对url */
+  target?: string;
+}
 /** cron表达式相关类型 */
 export enum TimeModes {
   Minute = 'Minute',

package/src/views/About.vue

@@ -4,11 +4,18 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2023-04-17 18:04:07
+ * @LastEditTime: 2023-04-23 14:02:59
 -->
 <template>
   <div>
-    ...................
+    <el-button @click="state.visible = true">打开</el-button>
+    <ht-row :gutter="16" :copies="10" colMinHeight="56px">
+      <ht-col :span="2">iii</ht-col>
+      <ht-col style="height:30px;border:1px solid #ccc" :span="4">iii</ht-col>
+      <ht-col :span="2">iii</ht-col>
+      <ht-col style="height:30px;border:1px solid #ccc" :span="4">iii</ht-col>
+    </ht-row>
+    <HtBread></HtBread>
     <!-- <HtSelectOrg :multiple="false"></HtSelectOrg> -->
     <!-- <el-button type=""
                @click="test">test</el-button> -->
@@ -60,6 +67,9 @@
         </template>
       </HtTable>
     </div>
+    <HtModel v-model="state.visible" :title="'买买买'">
+      考了多少会计数控了分手快乐
+    </HtModel>
   </div>
 </template>
 <script lang="ts">
@@ -68,12 +78,17 @@ import HtTable from '@/packages/HtTable/index.vue';
 import HtCountDown from '@/packages/HtCountDown/index.vue';
 import HtSelectUser from '@/packages/HtSelectUser/index.vue';
 import HtSelectOrg from '@/packages/HtSelectOrg/index.vue';
+import HtRow from '@/packages/HtRow/index.vue';
+import HtCol from '@/packages/HtCol/index.vue';
 import { Column } from '@/packages/type';
+import HtModel from '@/packages/HtModel';
+import HtBread from '@/packages/HtBread';
 import { getSpanMethod } from '@/packages/HtTable/table-span-method';
 
 interface State {
   /** 数据状态 */
   loading: boolean;
+  visible: boolean;
   columns: Column[];
   data: any;
   content: string;
@@ -86,12 +101,17 @@ interface State {
     HtCountDown,
     HtSelectUser,
     HtSelectOrg,
+    HtRow,
+    HtCol,
+    HtBread,
+    HtModel,
   },
 })
 export default class Index extends Vue {
   /** 数据 */
   state: State = {
     loading: false,
+    visible: false,
     start: false,
     content: '',
     colData: [],