@bsgoal/common 2.0.0 → 2.5.0

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,11 @@ 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 BsgoalBaseSwitch from '@/components/bsgoal-base-switch/index.vue'
+import BsgoalBaseItem from '@/components/bsgoal-base-item/index.vue'
 import componentTypeEnums from '@/enums/componentTypeEnums.js'
 import { useFetch } from '@/combines/useFetchs.js'
 
@@ -31,7 +36,12 @@ export default {
       BsgoalBaseLink,
       BsgoalBaseButton,
       BsgoalBaseLayout,
-      BsgoalBaseAlert
+      BsgoalBaseAlert,
+      BsgoalBaseSelect,
+      BsgoalBaseTime,
+      BsgoalBaseTimeRange,
+      BsgoalBaseSwitch,
+      BsgoalBaseItem,
     }
 
     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 17:43:27
  * @FilePath: \common\src\router\index.js
  * @Description: 路由配置
  * 
@@ -98,6 +98,31 @@ 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')
+        },
+        {
+          path: 'bsgoal-base-switch-demo',
+          name: '开关',
+          component: import('@/components/bsgoal-base-switch/demo.vue')
+        },
+        {
+          path: 'bsgoal-base-item-demo',
+          name: '表单项',
+          component: import('@/components/bsgoal-base-item/demo.vue')
+        },
       ]
     }
   ]