htui-yllkbz 1.3.84 → 1.3.85

package/package.json

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

package/src/App.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2022-12-13 17:29:24
+ * @LastEditTime: 2023-01-08 16:17:30
 -->
 <template>
   <div id="app">
@@ -35,6 +35,16 @@
                  v-model="state.value"
                  @change="testuser"></HtSelectOrg> -->
     ------------- ----------
+    <HtSelectTimeSlot
+      v-model="state.timeValue"
+      :width="'60px'"
+    ></HtSelectTimeSlot>
+    <HtSelectTimeSlot
+      v-model="state.timeValue"
+      :readonly="true"
+      :width="'60px'"
+    ></HtSelectTimeSlot>
+    <HtMore></HtMore>
     <router-view></router-view>
   </div>
 </template>
@@ -45,6 +55,8 @@ import HtSelectBaseData from '@/packages/HtSelectBaseData';
 import HtSelectOrg from '@/packages/HtSelectOrg';
 import HtSelectUser from '@/packages/HtSelectUser';
 import HtShowBaseType from '@/packages/HtShowBaseType';
+import HtSelectTimeSlot from '@/packages/HtSelectTimeSlot';
+import HtMore from '@/packages/HtMore';
 import { mgr } from '@/plugins/oidc-client';
 @Component({
   components: {
@@ -52,11 +64,14 @@ import { mgr } from '@/plugins/oidc-client';
     HtSelectOrg,
     HtShowBaseType,
     HtSelectUser,
+    HtSelectTimeSlot,
+    HtMore,
   },
 })
 export default class App extends Vue {
   state = {
     value: ['95bd1bfd-59d8-f88b-2b65-39f97d1da058'],
+    timeValue: undefined,
   };
   /** 生命周期 */
   created() {

package/src/packages/HtMore/index.ts

@@ -0,0 +1,15 @@
+/*
+ * @Descripttion: 更多三个点功能
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-04-12 17:34:51
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-01-08 16:16:28
+ */
+
+import HtMore from "./index.vue";
+(HtMore as any).install = function (Vue: any) {
+
+  Vue.component("HtMore", HtMore);
+};
+export default HtMore;

package/src/packages/HtMore/index.vue

@@ -0,0 +1,78 @@
+<!--
+ * @Descripttion: 更多
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-09-28 10:24:08
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-01-08 17:15:00
+-->
+<template>
+  <el-dropdown :trigger="trigger" @command="handleCommand($event, 'command')">
+    <span class="el-dropdown-link">
+      <slot>
+        <div class="ht-link-title" style="cursor:pointer" :style="comStyle">
+          <div class="ht-link-item" style="height:5px">.</div>
+          <div class="ht-link-item" style="height:5px">.</div>
+          <div class="ht-link-item" style="height:5px">.</div>
+        </div>
+      </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
+          @confirm="handleCommand('delete', 'confirm')"
+          v-if="!!showTabs.includes('delete')"
+          :title="`请确认是否删除${tips ? `【${tips}】` : ''}?`"
+        >
+          <el-dropdown-item slot="reference" command="delete"
+            >删除</el-dropdown-item
+          >
+        </el-popconfirm>
+      </slot>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  /** 弹窗 */
+  visible: boolean;
+}
+@Component({
+  name: 'HtMore',
+  components: {},
+})
+export default class Index extends Vue {
+  /** droptitle的样式 */
+  @Prop() comStyle?: string;
+  @Prop({ default: 'delete' }) showTabs!: string[];
+  @Prop({ default: 'click' }) trigger?: string;
+  /** 删除的文字提示 */
+  @Prop({ default: '' }) tips?: string;
+  /** 数据 */
+  state: State = {
+    loading: false,
+    visible: false,
+  };
+  /** 生命周期 */
+  handleCommand(e: string, type: string) {
+    if (type === 'command' && e === 'delete') {
+      //不管
+    } else {
+      this.$emit('callback', e);
+    }
+  }
+
+  /** 计算属性 */
+}
+</script>
+<style lang="scss" scoped>
+.ht-link-title:hover {
+  color: var(--primary);
+}
+</style>

package/src/packages/HtSelectCron/index.ts

@@ -0,0 +1,14 @@
+/*
+ * @Descripttion:cron表达式选择
+ * @version:
+ * @Author: hutao
+ * @Date: 2021-11-15 15:00:57
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-01-03 14:15:44
+ */
+import HtSelectCron from "./index.vue";
+(HtSelectCron as any).install = function (Vue: any) {
+
+  Vue.component("HtSelectCron", HtSelectCron);
+};
+export default HtSelectCron;

package/src/packages/HtSelectCron/index.vue

@@ -0,0 +1,193 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-12-20 15:33:00
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-01-03 14:54:19
+-->
+<template>
+  <div>
+    每
+    <select-min
+      :disabled="disabled"
+      :width="width"
+      :readonly="readonly"
+      class="ht-select-time"
+      @change="change"
+      v-if="state.formData.periodUnit === 'Minute'"
+      v-model="state.formData.minute"
+    ></select-min>
+    <el-select
+      :disabled="disabled"
+      :readonly="readonly"
+      :width="width"
+      class="ht-select-time"
+      @change="change"
+      v-model="state.formData.periodUnit"
+    >
+      <el-option
+        v-for="item in modes"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      ></el-option>
+    </el-select>
+
+    <template v-if="state.formData.periodUnit !== 'Minute'">
+      的
+      <select-month
+        :width="width"
+        :disabled="disabled"
+        :readonly="readonly"
+        class="ht-select-time"
+        @change="change"
+        v-if="state.formData.periodUnit === 'Year'"
+        v-model="state.formData.month"
+      ></select-month>
+      <select-days
+        :width="width"
+        :disabled="disabled"
+        :readonly="readonly"
+        class="ht-select-time"
+        @change="change"
+        v-if="showDays"
+        v-model="state.formData.day"
+      ></select-days>
+      <select-week-day
+        :width="width"
+        :disabled="disabled"
+        :readonly="readonly"
+        class="ht-select-time"
+        @change="change"
+        v-if="state.formData.periodUnit === 'Week'"
+        v-model="state.formData.weekDay"
+      ></select-week-day>
+      <select-hours
+        :width="width"
+        :disabled="disabled"
+        :readonly="readonly"
+        class="ht-select-time"
+        @change="change"
+        v-if="showHours"
+        v-model="state.formData.hour"
+      ></select-hours>
+      <select-min
+        :width="width"
+        :disabled="disabled"
+        :readonly="readonly"
+        class="ht-select-time"
+        @change="change"
+        v-model="state.formData.minute"
+      ></select-min>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import {
+  getCronExpressionByPartition,
+  getTimeValues,
+} from '../../packages/common';
+import { FormValues } from '../type';
+import SelectDays from './selectDays.vue';
+import SelectHours from './selectHours.vue';
+import SelectMin from './selectMin.vue';
+import SelectMonth from './selectMonth.vue';
+import SelectWeekDay from './selectWeekDay.vue';
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  formData: FormValues;
+}
+@Component({
+  name: 'HtSelectCron',
+  components: {
+    SelectDays,
+    SelectHours,
+    SelectMin,
+    SelectMonth,
+    SelectWeekDay,
+  },
+})
+export default class Index extends Vue {
+  /** cron表达式 */
+  @Prop() value!: string;
+  @Prop() disabled!: boolean;
+  @Prop() readonly!: boolean;
+  @Prop() width!: boolean;
+  /** 数据 */
+  state: State = {
+    loading: false,
+    formData: {
+      periodUnit: undefined,
+      month: undefined,
+      day: undefined,
+      hour: undefined,
+      minute: undefined,
+      weekDay: undefined,
+      cronExpression: undefined,
+    },
+  };
+  /** 生命周期 */
+  /** 方法 */
+  /** 时间选择改变时候 */
+  change() {
+    this.state.formData.cronExpression = getCronExpressionByPartition(
+      this.state.formData
+    );
+    this.$emit('input', this.state.formData.cronExpression);
+    this.$emit('change', this.state.formData.cronExpression);
+  }
+  get modes() {
+    return [
+      { label: '分钟', value: 'Minute' },
+      { label: '小时', value: 'Hour' },
+      { label: '天', value: 'Day' },
+      { label: '周', value: 'Week' },
+      { label: '月', value: 'Month' },
+      { label: '年', value: 'Year' },
+    ];
+  }
+  /** 什么时候展示天 */
+  get showDays() {
+    const show = ['Month', 'Year'];
+    const { periodUnit } = this.state.formData;
+    return show.includes(periodUnit || 'undefined');
+  }
+
+  /** 什么时候展示小时的选择 */
+  get showHours() {
+    const show = ['Day', 'Week', 'Month', 'Year'];
+    const { periodUnit } = this.state.formData;
+    return show.includes(periodUnit || 'undefined');
+  }
+  get showCron() {
+    return this.state.formData.cronExpression;
+  }
+  /** 监听 */
+  @Watch('value', { immediate: true })
+  getValue(value?: string) {
+    if (value) {
+      this.state.formData = getTimeValues(value);
+      this.state.formData.cronExpression = value;
+    } else {
+      this.state.formData = {
+        //periodUnit: TimeModes.Minute,
+        periodUnit: undefined,
+        month: undefined,
+        day: undefined,
+        hour: undefined,
+        minute: 10,
+        weekDay: undefined,
+        cronExpression: undefined,
+      };
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ht-select-time {
+  width: 90px;
+}
+</style>

package/src/packages/HtSelectCron/selectDays.vue

@@ -0,0 +1,58 @@
+<!--
+ * @Descripttion: 选择天
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-12-20 15:46:15
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-01-03 15:51:16
+-->
+<template>
+  <el-select
+    v-if="!readonly"
+    :style="`width:${width}`"
+    clearable
+    :disabled="disabled"
+    @change="change"
+    v-model="state.value"
+  >
+    <el-option
+      v-for="item in 31"
+      :key="item"
+      :label="`${item}日`"
+      :value="item"
+    ></el-option>
+  </el-select>
+  <span v-else>{{ state.value ? state.value + '日' : '' }}</span>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  value?: number;
+}
+@Component
+export default class Index extends Vue {
+  @Prop() value?: number;
+  @Prop() disabled?: boolean;
+  @Prop() readonly?: boolean;
+  @Prop() width?: number | string;
+  /** 数据 */
+  state: State = {
+    loading: false,
+    value: undefined,
+  };
+  /** 生命周期 */
+  /** 方法 */
+  change() {
+    this.$emit('input', this.state.value);
+    this.$emit('change', this.state.value);
+  }
+  /** 监听 */
+  @Watch('value', { immediate: true })
+  getValue(value?: number) {
+    this.state.value = value;
+  }
+}
+</script>
+<style lang="scss" scoped></style>

package/src/packages/HtSelectCron/selectHours.vue

@@ -0,0 +1,58 @@
+<!--
+ * @Descripttion: 选择小时
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-12-20 15:46:15
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-01-03 15:51:21
+-->
+<template>
+  <el-select
+    :style="`width:${width}`"
+    v-if="!readonly"
+    clearable
+    :disabled="disabled"
+    @change="change"
+    v-model="state.value"
+  >
+    <el-option
+      v-for="(item, index) in 24"
+      :key="index"
+      :label="`${index < 10 ? '0' + index : index}时`"
+      :value="index"
+    ></el-option>
+  </el-select>
+  <span v-else>{{ state.value ? state.value + '时' : '' }}</span>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  value?: number;
+}
+@Component
+export default class Index extends Vue {
+  @Prop() value?: number;
+  @Prop() disabled?: boolean;
+  @Prop() width?: number | string;
+  @Prop() readonly?: boolean;
+  /** 数据 */
+  state: State = {
+    loading: false,
+    value: undefined,
+  };
+  /** 生命周期 */
+  /** 方法 */
+  change() {
+    this.$emit('input', this.state.value);
+    this.$emit('change', this.state.value);
+  }
+  /** 监听 */
+  @Watch('value', { immediate: true })
+  getValue(value?: number) {
+    this.state.value = value;
+  }
+}
+</script>
+<style lang="scss" scoped></style>

package/src/packages/HtSelectCron/selectMin.vue

@@ -0,0 +1,60 @@
+<!--
+ * @Descripttion: 选择分钟
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-12-20 15:46:15
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-01-03 15:51:26
+-->
+<template>
+  <el-select
+    v-if="!readonly"
+    :style="`width:${width}`"
+    :disabled="disabled"
+    clearable
+    :readonly="readonly"
+    @change="change"
+    v-model="state.value"
+  >
+    <el-option
+      v-for="(item, index) in 60"
+      :key="index"
+      :label="`${index < 10 ? '0' + index : index}分`"
+      :value="index"
+    ></el-option>
+  </el-select>
+  <span v-else>{{ state.value ? state.value + '分' : '' }}</span>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  value?: number;
+}
+@Component
+export default class Index extends Vue {
+  @Prop() value?: number;
+  @Prop() disabled?: boolean;
+  @Prop() readonly?: boolean;
+  @Prop() width?: number | string;
+
+  /** 数据 */
+  state: State = {
+    loading: false,
+    value: undefined,
+  };
+  /** 生命周期 */
+  /** 方法 */
+  change() {
+    this.$emit('input', this.state.value);
+    this.$emit('change', this.state.value);
+  }
+  /** 监听 */
+  @Watch('value', { immediate: true })
+  getValue(value?: number) {
+    this.state.value = value;
+  }
+}
+</script>
+<style lang="scss" scoped></style>

package/src/packages/HtSelectCron/selectMonth.vue

@@ -0,0 +1,58 @@
+<!--
+ * @Descripttion: 选择月份
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-12-20 15:46:15
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-01-03 15:51:29
+-->
+<template>
+  <el-select
+    v-if="!readonly"
+    :style="`width:${width}`"
+    :disabled="disabled"
+    @change="change"
+    clearable
+    v-model="state.value"
+  >
+    <el-option
+      v-for="item in 12"
+      :key="item"
+      :label="`${item}月`"
+      :value="item"
+    ></el-option>
+  </el-select>
+  <span v-else>{{ state.value ? state.value + '月' : '' }}</span>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  value?: number;
+}
+@Component
+export default class Index extends Vue {
+  @Prop() value?: number;
+  @Prop() disabled?: boolean;
+  @Prop() readonly?: boolean;
+  @Prop() width?: number | string;
+  /** 数据 */
+  state: State = {
+    loading: false,
+    value: undefined,
+  };
+  /** 生命周期 */
+  /** 方法 */
+  change() {
+    this.$emit('input', this.state.value);
+    this.$emit('change', this.state.value);
+  }
+  /** 监听 */
+  @Watch('value', { immediate: true })
+  getValue(value?: number) {
+    this.state.value = value;
+  }
+}
+</script>
+<style lang="scss" scoped></style>

package/src/packages/HtSelectCron/selectWeekDay.vue

@@ -0,0 +1,76 @@
+<!--
+ * @Descripttion: 选择周几
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-12-20 15:46:15
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-01-03 15:51:35
+-->
+<template>
+  <el-select
+    v-if="!readonly"
+    :style="`width:${width}`"
+    :disabled="disabled"
+    @change="change"
+    clearable
+    v-model="state.value"
+  >
+    <el-option
+      v-for="(item, index) in options"
+      :key="index"
+      :label="item.label"
+      :value="index + 1"
+    ></el-option>
+  </el-select>
+  <span v-else>{{ getName }}</span>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  value?: number;
+}
+@Component
+export default class Index extends Vue {
+  @Prop() value?: number;
+  @Prop() disabled?: boolean;
+  @Prop() readonly?: boolean;
+  @Prop() width?: number | string;
+  /** 数据 */
+  state: State = {
+    loading: false,
+    value: undefined,
+  };
+  /** 生命周期 */
+  /** 方法 */
+  change() {
+    this.$emit('input', this.state.value);
+    this.$emit('change', this.state.value);
+  }
+  /** 监听 */
+  @Watch('value', { immediate: true })
+  getValue(value?: number) {
+    this.state.value = value;
+  }
+  get getName() {
+    const { value } = this.state;
+    return value
+      ? this.options.find((item) => item.value === value)?.label
+      : '';
+  }
+  /** 计算属性 */
+  get options() {
+    return [
+      { label: '星期一', value: 1 },
+      { label: '星期二', value: 2 },
+      { label: '星期三', value: 3 },
+      { label: '星期四', value: 4 },
+      { label: '星期五', value: 5 },
+      { label: '星期六', value: 6 },
+      { label: '星期天', value: 7 },
+    ];
+  }
+}
+</script>
+<style lang="scss" scoped></style>

package/src/packages/HtSelectTimeSlot/index.ts

@@ -0,0 +1,14 @@
+/*
+ * @Descripttion:选择时间段
+ * @version:
+ * @Author: hutao
+ * @Date: 2021-11-15 15:00:57
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-01-03 14:39:35
+ */
+import HtSelectTimeSlot from "./index.vue";
+(HtSelectTimeSlot as any).install = function (Vue: any) {
+
+  Vue.component("HtSelectTimeSlot", HtSelectTimeSlot);
+};
+export default HtSelectTimeSlot;