@bsgoal/common 2.0.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsgoal/common",
-  "version": "2.0.0",
+  "version": "2.3.0",
   "private": false,
   "files": [
     "dist",

package/src/components/bsgoal-base-select/demo.vue

@@ -0,0 +1,58 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-05-24 11:10:09
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-05-24 14:07:27
+ * @FilePath: \common\src\components\bsgoal-base-select\demo.vue
+ * @Description: select  演示
+ * 
+-->
+
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue'
+import BsgoalBaseSelect from './index.vue'
+
+const props = defineProps({})
+
+const selectValue = ref('11')
+const selectRange = ref([
+    {
+      label : '11' ,
+      value : '11'
+    },
+    {
+      label : '22' ,
+      value : '22'
+    },
+    {
+      label : '33' ,
+      value : '33'
+    },
+])
+
+
+
+</script>
+<script>
+export default {
+  name: 'BsgoalBaseSelectDemo'
+}
+</script>
+<template>
+  <div class="bsgoal-base-select-demo">
+    <div class="base_select_demo">
+        {{ selectValue }}
+        <BsgoalBaseSelect  v-model="selectValue" :range="selectRange" />
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

package/src/components/bsgoal-base-select/index.vue

@@ -0,0 +1,90 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-05-24 11:09:59
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-05-24 14:07:10
+ * @FilePath: \common\src\components\bsgoal-base-select\index.vue
+ * @Description: Select 公共组件
+ * 
+-->
+
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue'
+const props = defineProps({
+  /**
+   * 占位提示符
+   */
+  placeholder: {
+    type: [String],
+    default: '请选择'
+  },
+  /**
+   * 可选范围 { label : '' , value : ''}
+   */
+  range: {
+    type: [Array],
+    default: () => []
+  },
+  /**
+   * value
+   */
+  modelValue: {
+    type: [],
+    default: ''
+  },
+  /**
+   * 无数据提示
+   */
+  none: {
+    type: [String],
+    default: '暂无数据'
+  }
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+// ---> S 触发 方法 <---
+
+/**
+ * @Author: canlong.shen
+ * @description: 触发 change
+ * @default:
+ * @return {*}
+ */
+const triggerChange = (value = '') => {
+  emits('update:modelValue', value)
+}
+
+// ---> E 触发 方法 <---
+</script>
+<script>
+export default {
+  name: 'BsgoalBaseSelect'
+}
+</script>
+<template>
+  <div class="bsgoal-base-select">
+    <el-select
+      clearable
+      class="base_select"
+      :model-value="modelValue"
+      :no-data-text="none"
+      :placeholder="placeholder"
+      @change="triggerChange"
+    >
+      <template v-for="({ label = '', value = '' }, key) of range" :key="key">
+        <el-option :label="label" :value="value"></el-option>
+      </template>
+    </el-select>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

package/src/components/bsgoal-base-time/demo.vue

@@ -0,0 +1,38 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-05-24 14:58:50
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-05-24 15:37:12
+ * @FilePath: \common\src\components\bsgoal-base-time\demo.vue
+ * @Description: 时间选择器
+ * 
+-->
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue'
+import BsgoalBaseTime from './index.vue'
+const props = defineProps({})
+const time = ref('11:22')
+</script>
+<script>
+export default {
+  name: 'BsgoalBaseTimeDemo'
+}
+</script>
+<template>
+  <div class="bsgoal-base-time-demo">
+    <div class="base_time_demo">
+        {{ time }}
+      <BsgoalBaseTime v-model="time" />
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

package/src/components/bsgoal-base-time/index.vue

@@ -0,0 +1,114 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-05-24 14:58:44
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-05-24 16:36:56
+ * @FilePath: \common\src\components\bsgoal-base-time\index.vue
+ * @Description: 时间选择器 
+ * 
+-->
+
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref, unref, watchEffect } from 'vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import { dayjs } from 'element-plus'
+const emits = defineEmits(['update:modelValue'])
+const props = defineProps({
+  /**
+   * 绑定的值
+   */
+  modelValue: {
+    type: [String],
+    default: ''
+  },
+  /**
+   * 提示占位符
+   */
+  placeholder: {
+    type: [String],
+    default: '请选择'
+  },
+  /**
+   * 格式 HH:mm:ss
+   */
+  format: {
+    type: [String],
+    default: 'HH:mm'
+  }
+})
+
+// ---> S 绑定值 <---
+
+const bindValue = ref()
+
+/**
+ * @Author: canlong.shen
+ * @description: 转换 字符串 time 为 Date
+ * @default:
+ * @return {*}
+ */
+const stringToDate = (timeString = '') => {
+  return dayjs(`0000-00-00 ${timeString}`)
+}
+
+/**
+ * @Author: canlong.shen
+ * @description: 格式化 Date 为  time 字符串
+ * @default:
+ * @return {*}
+ */
+const dateToString = (date = new Date()) => {
+  return dayjs(date).format(props.format)
+}
+
+watchEffect(() => {
+  const { modelValue } = props
+  const timeValue = unref(modelValue)
+  if (timeValue) {
+    bindValue.value = stringToDate(timeValue)
+  }
+})
+
+/**
+ * @Author: canlong.shen
+ * @description: 触发 值变化
+ * @default:
+ * @return {*}
+ */
+const triggerChange = (date = new Date()) => {
+  const formatValue = dateToString(date)
+  emits('update:modelValue', formatValue)
+}
+
+// ---> E 绑定值 <---
+</script>
+
+<script>
+export default {
+  name: 'BsgoalBaseTime'
+}
+</script>
+<template>
+  <div class="bsgoal-base-time">
+    <el-config-provider :locale="zhCn">
+      <el-time-picker
+        v-model="bindValue"
+        class="base_time"
+        :format="format"
+        :clearable="false"
+        :placeholder="placeholder"
+        @change="triggerChange"
+      />
+    </el-config-provider>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

package/src/components/bsgoal-base-time-range/demo.vue

@@ -0,0 +1,48 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-05-24 14:10:03
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-05-24 16:40:42
+ * @FilePath: \common\src\components\bsgoal-base-time-range\demo.vue
+ * @Description: 时间选择 演示 
+ * 
+-->
+
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue'
+import BsgoalBaseTimeRange from './index.vue'
+const props = defineProps({})
+
+const timeRange = ref(['11:00', '12:12'])
+
+const startTime = ref('12:11')
+const endTime = ref('13:55')
+</script>
+<script>
+export default {
+  name: 'BsgoalBaseTimeDemoRange'
+}
+</script>
+<template>
+  <div class="bsgoal-base-time-range-demo">
+    <div>{{ timeRange }}</div>
+    <div>{{ startTime }}</div>
+    <div>{{ endTime }}</div>
+    <BsgoalBaseTimeRange
+      v-model:startTime="startTime"
+      v-model:endTime="endTime"
+      v-model="timeRange"
+      class="base_time_range_demo"
+    />
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

package/src/components/bsgoal-base-time-range/index.vue

@@ -0,0 +1,142 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-05-24 14:09:57
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-05-24 16:54:26
+ * @FilePath: \common\src\components\bsgoal-base-time-range\index.vue
+ * @Description: 时间选择 公共组件
+ * 
+-->
+
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref, unref, watch, watchEffect } from 'vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import { dayjs } from 'element-plus'
+const props = defineProps({
+  /**
+   * value
+   */
+  modelValue: {
+    type: [Array],
+    default: () => [new Date(), new Date()]
+  },
+
+  /**
+   * 开始时间 绑定的值
+   */
+  startTime: {
+    type: [String],
+    default: ''
+  },
+  /**
+   * 结束时间 绑定的值
+   */
+  endTime: {
+    type: [String],
+    default: ''
+  },
+  /**
+   * 格式 HH:mm:ss
+   */
+  format: {
+    type: [String],
+    default: 'HH:mm'
+  }
+})
+
+const emits = defineEmits(['update:modelValue', 'update:startTime', 'update:endTime'])
+// ---> S 值绑定 <---
+const bindValue = ref([])
+
+/**
+ * @Author: canlong.shen
+ * @description: 转换 字符串 time 为 Date
+ * @default:
+ * @return {*}
+ */
+const stringToDate = (timeString = '') => {
+  return dayjs(`0000-00-00 ${timeString}`)
+}
+
+/**
+ * @Author: canlong.shen
+ * @description: 格式化 Date 为  time 字符串
+ * @default:
+ * @return {*}
+ */
+const dateToString = (date = new Date()) => {
+  return dayjs(date).format(props.format)
+}
+
+watchEffect(() => {
+  const { startTime = '', endTime = '', modelValue = [] } = props
+  let startDate = new Date()
+  let endDate = new Date()
+  const startTimeValue = unref(startTime)
+  const endTimeValue = unref(endTime)
+  const modelValueList = unref(modelValue)
+  if (startTimeValue && endTimeValue) {
+    startDate = stringToDate(startTimeValue)
+    endDate = stringToDate(endTimeValue)
+  } else if (Array.isArray(modelValueList) && modelValueList.length === 2) {
+    const { 0: startValue = '', 1: endValue = '' } = modelValueList
+    startDate = stringToDate(startValue)
+    endDate = stringToDate(endValue)
+  }
+
+  bindValue.value = [startDate, endDate]
+})
+
+/**
+ * @Author: canlong.shen
+ * @description: 触发 值变化
+ * @default:
+ * @return {*}
+ */
+const triggerChange = (range = []) => {
+  const { startTime = '', endTime = ''  } = props
+
+  const { 0: startDate, 1: endDate } = range
+  const startDateFormat = dateToString(startDate)
+  const endDateFormat = dateToString(endDate)
+  if (unref(startTime) && unref(endTime)) {
+    emits('update:startTime', startDateFormat)
+    emits('update:endTime', endDateFormat)
+  } else {
+    emits('update:modelValue', [startDateFormat, endDateFormat])
+  }
+}
+
+// ---> E 值绑定 <---
+</script>
+<script>
+export default {
+  name: 'BsgoalBaseTimeRange'
+}
+</script>
+<template>
+  <div class="bsgoal-base-time-range">
+    <el-config-provider :locale="zhCn">
+      <el-time-picker
+        v-model="bindValue"
+        is-range
+        class="base_time_range"
+        :format="format"
+        range-separator="至"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="triggerChange"
+      />
+    </el-config-provider>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

package/src/entry.js

@@ -9,6 +9,9 @@ import BsgoalBaseLink from '@/components/bsgoal-base-link/index.vue'
 import BsgoalBaseButton from '@/components/bsgoal-base-button/index.vue'
 import BsgoalBaseLayout from '@/components/bsgoal-base-layout/index.vue'
 import BsgoalBaseAlert from '@/components/bsgoal-base-alert/index.vue'
+import BsgoalBaseSelect from '@/components/bsgoal-base-select/index.vue'
+import BsgoalBaseTime from '@/components/bsgoal-base-time/index.vue'
+import BsgoalBaseTimeRange from '@/components/bsgoal-base-time-range/index.vue'
 import componentTypeEnums from '@/enums/componentTypeEnums.js'
 import { useFetch } from '@/combines/useFetchs.js'
 
@@ -31,7 +34,10 @@ export default {
       BsgoalBaseLink,
       BsgoalBaseButton,
       BsgoalBaseLayout,
-      BsgoalBaseAlert
+      BsgoalBaseAlert,
+      BsgoalBaseSelect,
+      BsgoalBaseTime,
+      BsgoalBaseTimeRange,
     }
 
     for (const [name, component] of Object.entries(componentsMap)) {

package/src/router/index.js

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-04-10 10:41:52
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-05-24 09:56:01
+ * @LastEditTime: 2023-05-24 15:06:30
  * @FilePath: \common\src\router\index.js
  * @Description: 路由配置
  * 
@@ -98,6 +98,21 @@ const router = createRouter({
           name: 'alert提示',
           component: import('@/components/bsgoal-base-alert/demo.vue')
         },
+        {
+          path: 'bsgoal-base-select-demo',
+          name: '下拉选择器',
+          component: import('@/components/bsgoal-base-select/demo.vue')
+        },
+        {
+          path: 'bsgoal-base-time-range-demo',
+          name: '时间范围选择器',
+          component: import('@/components/bsgoal-base-time-range/demo.vue')
+        },
+        {
+          path: 'bsgoal-base-time-demo',
+          name: '时间选择器',
+          component: import('@/components/bsgoal-base-time/demo.vue')
+        },
       ]
     }
   ]