htui-yllkbz 1.4.23 → 1.4.25

package/package.json

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

package/src/packages/HtDrawer/index.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2022-09-28 10:24:08
  * @LastEditors: hutao
- * @LastEditTime: 2023-03-08 09:41:20
+ * @LastEditTime: 2023-04-24 13:45:53
 -->
 <template>
   <el-drawer
@@ -44,9 +44,15 @@
     <slot name="foot" v-if="withFooter">
       <div>
         <template v-if="!footerRight">
-          <el-button style="margin-left:20px" @click="onCancel">取消</el-button>
-          <el-button style="margin-left:20px" type="primary" @click="onOk"
-            >确定</el-button
+          <el-button style="margin-left:20px" @click="onCancel">{{
+            cancelText
+          }}</el-button>
+          <el-button
+            style="margin-left:20px"
+            :disabled="disabled"
+            type="primary"
+            @click="onOk"
+            >{{ okText }}</el-button
           >
         </template>
         <template v-else>
@@ -54,14 +60,15 @@
             style="margin-right:20px;float:right"
             type="primary"
             :loading="loading"
+            :disabled="disabled"
             @click="onOk"
-            >确定</el-button
+            >{{ okText }}</el-button
           >
           <el-button
             :loading="loading"
             style="margin-right:20px;float:right"
             @click="onCancel"
-            >取消</el-button
+            >{{ cancelText }}</el-button
           >
         </template>
       </div>
@@ -108,8 +115,11 @@ export default class Index extends Vue {
   @Prop({ default: true }) withHeader!: boolean;
   /**   控制是否显示 foot 栏, 默认为 true, 当此项为 false 时, foot attribute 和 foot slot 均不生效 */
   @Prop({ default: true }) withFooter!: boolean;
+  @Prop({ default: false }) disabled!: boolean;
   /** footer的按钮是否靠右 */
   @Prop({ default: false }) footerRight!: boolean;
+  @Prop({ default: '确定' }) okText?: string;
+  @Prop({ default: '取消' }) cancelText?: string;
   /** 数据 */
   state: State = {
     loading: false,

package/src/packages/HtModel/index.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2022-09-28 10:24:08
  * @LastEditors: hutao
- * @LastEditTime: 2023-04-24 13:33:28
+ * @LastEditTime: 2023-04-24 13:58:59
 -->
 <template>
   <el-dialog
@@ -21,6 +21,7 @@
     :lock-scroll="lockScroll"
     @close="close"
     :width="width"
+    class="ht-model"
     :center="center"
     :show-close="showClose"
     :before-close="beforClose"
@@ -42,19 +43,20 @@
     >
       <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"
+            :disabled="disabled"
             @click="onOk"
             >{{ okText }}</el-button
           >
+          <el-button
+            :loading="loading"
+            style="margin-right:6px"
+            @click="onCancel"
+            >{{ cancelText }}</el-button
+          >
         </template>
       </slot>
     </span>
@@ -78,6 +80,8 @@ export default class Index extends Vue {
   /** 标题 */
   @Prop() title!: string;
   @Prop() loading!: boolean;
+  /** 是否禁用提交按钮 */
+  @Prop() disabled!: boolean;
   /** 是否显示隐藏来自父级传参 */
   @Prop() value!: boolean;
   @Prop() fullscreen!: boolean;

package/src/packages/HtMore/index.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2022-09-28 10:24:08
  * @LastEditors: hutao
- * @LastEditTime: 2023-04-24 10:16:37
+ * @LastEditTime: 2023-04-25 09:45:13
 -->
 <template>
   <el-dropdown :trigger="trigger" @command="handleCommand($event, 'command')">
@@ -29,7 +29,7 @@
             >删除</el-dropdown-item
           >
         </el-popconfirm> -->
-      <el-popover
+      <!-- <el-popover
         width="200"
         trigger="click"
         v-model="state.visible"
@@ -42,7 +42,7 @@
               style="color:var(--danger);font-size:16px"
             ></i>
             <p style="padding:0 0 0 6px;margin:0">
-              {{ `删除后无法回复,请确认是否删除${tips ? `【${tips}】` : ''}?` }}
+              {{ `删除后无法恢复,请确认是否删除${tips ? `【${tips}】` : ''}?` }}
             </p>
           </div>
           <div style="text-align:right;width:100%;margin-top:16px">
@@ -62,12 +62,22 @@
         <el-dropdown-item slot="reference" command="delete"
           >删除</el-dropdown-item
         >
-      </el-popover>
+      </el-popover> -->
+      <ht-popover
+        @confirm="handleCommand('delete', 'confirm')"
+        :tips="`删除后无法恢复,请确认是否删除${tips ? `【${tips}】` : ''}?`"
+        v-if="!!showTabs.includes('delete')"
+      >
+        <el-dropdown-item slot="reference" command="delete"
+          >删除</el-dropdown-item
+        >
+      </ht-popover>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
+import HtPopover from '@/packages/HtPopover/index.vue';
 interface State {
   /** 数据状态 */
   loading: boolean;
@@ -76,7 +86,7 @@ interface State {
 }
 @Component({
   name: 'HtMore',
-  components: {},
+  components: { HtPopover },
 })
 export default class Index extends Vue {
   /** droptitle的样式 */
@@ -92,6 +102,7 @@ export default class Index extends Vue {
   };
   /** 生命周期 */
   handleCommand(e: string, type: string) {
+    // console.log('e', e, type);
     if (type === 'command' && e === 'delete') {
       //console.log('111');
       // this.$confirm(`请确认是否删除${this.tips ? `【${this.tips}】` : ''}?`)

package/src/packages/HtPopover/index.ts

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

package/src/packages/HtPopover/index.vue

@@ -0,0 +1,99 @@
+<!--
+ * @Descripttion: 更多
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-09-28 10:24:08
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-04-25 09:38:05
+-->
+<template>
+  <el-popover
+    placement="top-start"
+    :width="width"
+    :disabled="!!disabled"
+    :trigger="trigger"
+    v-model="state.visible"
+  >
+    <template
+      ><slot>
+        <div>
+          <div style="display:flex;margin-top:12px">
+            <i :class="icon" :style="iconStyle"></i>
+            <p style="padding:0 0 0 6px;margin:0">
+              {{ tips }}
+            </p>
+          </div>
+          <div style="text-align:right;width:100%;margin-top:16px">
+            <el-button
+              :type="okType"
+              size="mini"
+              @click="
+                state.visible = false;
+                $emit('confirm');
+              "
+              style=""
+              >{{ okText }}</el-button
+            >
+            <el-button
+              size="mini"
+              :type="cancelType"
+              @click="
+                state.visible = false;
+                $emit('cancel');
+              "
+              >{{ cancelText }}</el-button
+            >
+          </div>
+        </div>
+      </slot>
+    </template>
+    <template slot="reference"> <slot name="reference"></slot></template>
+  </el-popover>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import '@/packages/style.scss';
+
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  /** 弹窗 */
+  visible: boolean;
+}
+@Component({
+  name: 'HtPopover',
+  components: {},
+})
+export default class Index extends Vue {
+  /** droptitle的样式 */
+
+  /** 分隔符 */
+  @Prop() separator?: string;
+  @Prop({ default: '取消' }) cancelText?: string;
+  @Prop({ default: '确认删除' }) okText?: string;
+  @Prop({ default: 'danger' }) okType?: string;
+  @Prop() cancelType?: string;
+  @Prop({ default: 'el-icon-warning' }) icon?: string;
+  @Prop({ default: '删除后无法恢复,请确认是否删除' }) tips?: string;
+  @Prop({ default: 'click' }) trigger?: string;
+  @Prop({ default: 200 }) width?: number;
+  @Prop() disabled?: boolean;
+  @Prop({ default: 'color:var(--danger);font-size:16px' }) iconStyle?: string;
+
+  /** 数据 */
+  state: State = {
+    loading: false,
+    visible: false,
+  };
+}
+</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/HtTable/index.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:23:24
  * @LastEditors: hutao
- * @LastEditTime: 2023-04-17 18:01:05
+ * @LastEditTime: 2023-04-24 17:10:43
 -->
 <template>
   <div v-loading="state.loading" style="background:#fff">
@@ -40,6 +40,7 @@
         :row-key="rowKey || 'id'"
         :data="data"
         tooltip-effect="dark"
+        :tree-props="treeProps"
         @row-click="
           (row, column, event) => $emit('row-click', row, column, event)
         "
@@ -354,6 +355,8 @@ export default class HtTable extends Vue {
   };
   /** 是否启用展开行功能 */
   @Prop() isExpand?: boolean;
+  /** 渲染嵌套数据的配置选项 */
+  @Prop() treeProps?: any;
   /** 打开配置列 */
   @Prop() configShow?: boolean;
   /**  是否增加筛选功能 */

package/src/packages/index.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-21 10:08:41
  * @LastEditors: hutao
- * @LastEditTime: 2023-04-23 10:37:02
+ * @LastEditTime: 2023-04-24 16:30:18
  */
 
 // 导入组件
@@ -38,6 +38,7 @@ import HtRow from './HtRow'
 import HtCol from './HtCol'
 import HtModel from "./HtModel"
 import HtBread from './HtBread'
+import HtPopover from './HtPopover'
 
 
 
@@ -45,7 +46,7 @@ import HtBread from './HtBread'
 
 
 // 存储组件列表
-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]
+const components = [HtRow, HtCol, HtBread, HtPopover, 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) {
   // 判断是否安装
@@ -61,7 +62,7 @@ export default {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
   install,
   // 以下是具体的组件列表
-  HtRow, HtCol, HtModel, HtBread,
+  HtRow, HtCol, HtModel, HtBread, HtPopover,
   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

@@ -105,4 +105,11 @@ $primary-color: var(--primary);
       }
     }
   }
+  .ht-model{
+    .el-dialog{
+      .el-dialog__body{
+        padding: 12px !important;
+      }
+    }
+  }
 

package/src/views/About.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2023-04-24 09:23:59
+ * @LastEditTime: 2023-04-24 13:55:36
 -->
 <template>
   <div>
@@ -68,7 +68,7 @@
         </template>
       </HtTable>
     </div>
-    <HtModel v-model="state.visible" :title="'买买买'">
+    <HtModel @onOk="submitTest()" v-model="state.visible" :title="'买买买'">
       考了多少会计数控了分手快乐
     </HtModel>
   </div>
@@ -229,6 +229,9 @@ export default class Index extends Vue {
   created() {
     //this.rewriteGetComputedStyle();
   }
+  submitTest() {
+    console.log('00000');
+  }
   /** 方法 */
   // test(e) {
   //   // console.log("eee", e);