htui-yllkbz 1.4.20 → 1.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htui-yllkbz",
-  "version": "1.4.20",
+  "version": "1.4.22",
   "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/HtMore/index.vue

@@ -4,33 +4,70 @@
  * @Author: hutao
  * @Date: 2022-09-28 10:24:08
  * @LastEditors: hutao
- * @LastEditTime: 2023-01-29 17:46:12
+ * @LastEditTime: 2023-04-24 10:16:37
 -->
 <template>
   <el-dropdown :trigger="trigger" @command="handleCommand($event, 'command')">
-    <span class="el-dropdown-link">
+    <span class="el-dropdown-link" style="cursor:pointer;color:var(--primary)">
       <slot>
         <i class="ht-icon-more el-icon-more"></i>
       </slot>
     </span>
     <el-dropdown-menu slot="dropdown">
-      <slot name="dropdown">
-        <el-dropdown-item v-if="!!showTabs.includes('edit')" command="edit"
-          >编辑</el-dropdown-item
-        >
-        <!-- <el-popconfirm
+      <slot name="dropdown"> </slot>
+      <el-dropdown-item v-if="!!showTabs.includes('edit')" command="edit"
+        >编辑</el-dropdown-item
+      >
+      <!-- <el-popconfirm
           @confirm="handleCommand('delete', 'confirm')"
           v-if="!!showTabs.includes('delete')"
-          :title="`请确认是否删除${tips ? `【${tips}】` : ''}?`"
-        > -->
-        <el-dropdown-item command="delete">删除</el-dropdown-item>
-        <!-- </el-popconfirm> -->
-      </slot>
+          icon="el-icon-warning"
+          icon-color="var(--danger)"
+          :title="`删除后无法回复,请确认是否删除${tips ? `【${tips}】` : ''}?`"
+        >
+          <el-dropdown-item slot="reference" command="delete"
+            >删除</el-dropdown-item
+          >
+        </el-popconfirm> -->
+      <el-popover
+        width="200"
+        trigger="click"
+        v-model="state.visible"
+        v-if="!!showTabs.includes('delete')"
+      >
+        <div>
+          <div style="display:flex;margin-top:12px">
+            <i
+              class="el-icon-warning"
+              style="color:var(--danger);font-size:16px"
+            ></i>
+            <p style="padding:0 0 0 6px;margin:0">
+              {{ `删除后无法回复,请确认是否删除${tips ? `【${tips}】` : ''}?` }}
+            </p>
+          </div>
+          <div style="text-align:right;width:100%;margin-top:16px">
+            <el-button
+              type="danger"
+              size="mini"
+              @click="handleCommand('delete', 'confirm')"
+              style=""
+              >确认删除</el-button
+            >
+            <el-button size="mini" @click="state.visible = false"
+              >取消</el-button
+            >
+          </div>
+        </div>
+
+        <el-dropdown-item slot="reference" command="delete"
+          >删除</el-dropdown-item
+        >
+      </el-popover>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
 interface State {
   /** 数据状态 */
   loading: boolean;
@@ -56,17 +93,18 @@ export default class Index extends Vue {
   /** 生命周期 */
   handleCommand(e: string, type: string) {
     if (type === 'command' && e === 'delete') {
-      this.$confirm(`请确认是否删除${this.tips ? `【${this.tips}】` : ''}?`)
-        .then((_) => {
-          this.handleCommand('delete', 'confirm');
-          //
-        })
-        .catch((_) => {
-          //
-        });
-
-      //不管
+      //console.log('111');
+      // this.$confirm(`请确认是否删除${this.tips ? `【${this.tips}】` : ''}?`)
+      //   .then((_) => {
+      //     this.handleCommand('delete', 'confirm');
+      //     //
+      //   })
+      //   .catch((_) => {
+      //     //
+      //   });
+      //不管1.4.2
     } else {
+      this.state.visible = false;
       this.$emit('callback', e);
     }
   }

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;
+      }
+    }
+  }
+