htui-yllkbz 1.3.59 → 1.3.61

package/package.json

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

package/src/packages/HtDrawer/index.ts

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

package/src/packages/HtDrawer/index.vue

@@ -0,0 +1,123 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-09-28 10:24:08
+ * @LastEditors: hutao
+ * @LastEditTime: 2022-09-28 11:22:34
+-->
+<template>
+  <el-drawer
+    :visible.sync="state.visible"
+    :direction="direction"
+    :custom-class="customClass"
+    :append-to-body="appendToBody"
+    :close-on-press-escape="closeOnPressEscape"
+    :destroy-on-close="destroyOnClose"
+    :modal-append-to-body="modalAppendToBody"
+    :modal="modal"
+    :size="size"
+    :show-close="showClose"
+    :withHeader="withHeader"
+    :wrapperClosable="wrapperClosable"
+  >
+    <span slot="title">
+      <slot name="title"
+        ><span style="font-size:18px;font-weight:bold">{{ title }}</span></slot
+      >
+    </span>
+
+    <div
+      style="overflow:hidden;;padding:0 16px"
+      :style="
+        `height:calc(100vh - ${withFooter ? '90px' : '0px'} - ${
+          withHeader ? '100px' : '0px'
+        })`
+      "
+    >
+      <el-scrollbar style="height: calc(100% + 19px)">
+        <slot></slot>
+      </el-scrollbar>
+    </div>
+    <el-divider v-if="withFooter"></el-divider>
+    <slot name="foot" v-if="withFooter">
+      <div>
+        <el-button style="margin-left:20px" @click="onCancel">取消</el-button>
+        <el-button style="margin-left:20px" type="primary" @click="onOk"
+          >确定</el-button
+        >
+      </div></slot
+    >
+  </el-drawer>
+</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: '50%' }) size!: string;
+  /** 标题 */
+  @Prop() title!: string;
+  /** 是否显示隐藏来自父级传参 */
+  @Prop() value!: boolean;
+  /** 展开方式 参考elemen UI */
+  @Prop({ default: 'rtl' }) direction!: string;
+
+  @Prop({ default: true }) appendToBody!: boolean;
+  @Prop({ default: false }) wrapperClosable!: boolean;
+  /** 是否可以通过按下 ESC 关闭 Drawer	 */
+  @Prop({ default: false }) closeOnPressEscape!: boolean;
+  /** 控制是否在关闭 Drawer 之后将子元素全部销毁	 */
+  @Prop({ default: false }) destroyOnClose!: boolean;
+  /** 是否需要遮罩层	 */
+  @Prop({ default: true }) modal!: boolean;
+  /** Drawer 的自定义类名	 */
+  @Prop() customClass!: string;
+  /** 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上	 */
+  @Prop({ default: true }) modalAppendToBody!: boolean;
+  @Prop({ default: true }) showClose!: boolean;
+  /**   控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 */
+  @Prop({ default: true }) withHeader!: boolean;
+  /**   控制是否显示 foot 栏, 默认为 true, 当此项为 false 时, foot attribute 和 foot slot 均不生效 */
+  @Prop({ default: true }) withFooter!: boolean;
+  /** 数据 */
+  state: State = {
+    loading: false,
+    visible: false,
+  };
+  /** 生命周期 */
+  /** 方法 */
+  onCancel() {
+    this.state.visible = false;
+    this.$emit('onCancel', false);
+  }
+  onOk() {
+    this.$emit('onOk', true);
+  }
+
+  /** 监听 */
+  @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/index.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-21 10:08:41
  * @LastEditors: hutao
- * @LastEditTime: 2022-05-15 15:58:44
+ * @LastEditTime: 2022-09-28 11:19:36
  */
 
 // 导入组件
@@ -26,12 +26,13 @@ import HtShowBaseData from './HtShowBaseData/index'
 import HtOrgInfo from './HtOrgInfo/index'
 import HtBaseData from './HtBaseData/index'
 import HtShowBaseType from './HtShowBaseType'
+import HtDrawer from './HtDrawer'
 
 
 
 
 // 存储组件列表
-const components = [HtBaseData, HtShowBaseType, HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtUploadFiles, HtSelectBaseData, HtSelectOrg, HtSelectUser, HtShowBaseData, HtOrgInfo]
+const components = [HtBaseData, HtDrawer, HtShowBaseType, HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtUploadFiles, HtSelectBaseData, HtSelectOrg, HtSelectUser, HtShowBaseData, HtOrgInfo]
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 const install = function (Vue: any) {
   // 判断是否安装
@@ -48,6 +49,6 @@ export default {
   install,
   // 以下是具体的组件列表
   HtSelectTable, HtPagination, HtShowBaseType, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtUploadFiles,
-  HtSelectBaseData, HtSelectOrg, HtSelectUser, HtShowBaseData, HtOrgInfo, HtBaseData
+  HtSelectBaseData, HtSelectOrg, HtSelectUser, HtShowBaseData, HtOrgInfo, HtBaseData, HtDrawer
 }