@bsgoal/common 2.0.0 → 2.5.0

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";.base_tooltip_popper{max-width:20em}.bsgoal-base-form .base_form{padding:16px 6px 8px 16px}.bsgoal-base-form .base_form .el-form-item{margin-right:10px}.bsgoal-base-form .base_form div.el-input,.bsgoal-base-form .base_form div.el-select{width:100%}.bsgoal-base-form .base_form--visible{width:0px;height:0px;overflow:hidden}.bsgoal-base-table-pagination{text-align:right}.bsgoal-base-table-pagination .base_table_pagination{display:inline-block;margin-top:16px}.bsgoal-base-table-empty .base_table_empty{text-align:center}.bsgoal-base-table-empty .base_table_empty_img{padding-top:16px;line-height:initial}.bsgoal-base-table-empty .base_table_empty_text{display:inline-block}.bsgoal-base-table .base_table{padding:16px}.bsgoal-base-table .base_table_menu{margin-bottom:8px}.bsgoal-base-table .el-table__body-wrapper{overflow-y:hidden!important}.bsgoal-base-table .el-scrollbar__view{height:100%}.bsgoal-base-line .base_line{height:10px;background-color:#f0f2f5}.bsgoal-base-line .bsgoal-base-line__vertical{display:inline-block;height:100%}.bsgoal-base-line .base_line__vertical{width:10px;height:100%}.bsgoal-base-search-operation{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bsgoal-base-search-operation .operation_fold{margin-left:12px;cursor:pointer;min-width:3em}.bsgoal-base-cascader{width:100%}.bsgoal-base-cascader .base_cascader{width:inherit}.bsgoal-base-search .base_search{padding:16px 6px 8px 16px}.bsgoal-base-search .base_search .el-form-item{margin-bottom:8px;margin-right:10px}.bsgoal-base-search .base_search div.el-input,.bsgoal-base-search .base_search div.el-select{width:100%}.bsgoal-base-tree-fold .base_tree_fold{position:absolute;top:0;bottom:0;right:10px;margin:auto;width:14px;height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:10px;background-color:#409eff}.bsgoal-base-tree-fold .base_tree_fold--hide{right:0px}.bsgoal-base-tree{display:inline-block}.bsgoal-base-tree .base_tree{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;min-width:14px}.bsgoal-base-tree .base_tree_main{width:221px;padding:16px;scrollbar-width:none;-ms-overflow-style:none;overflow-x:hidden;overflow-y:auto}.bsgoal-base-tree .base_tree_main::-webkit-scrollbar{width:6px;height:6px}.bsgoal-base-tree .base_tree_main::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,.2);width:20px}.bsgoal-base-tree .base_tree_main::-webkit-scrollbar-track{background-color:#fff}.bsgoal-base-tree .base_tree_main_input{margin-bottom:10px}.bsgoal-base-tree .base_tree .el-tree-node__content>i.el-tree-node__expand-icon{padding-left:0}.bsgoal-base-dialog .base_dialog_header{font-weight:500;color:#303133;font-size:16px}.bsgoal-base-dialog .bsgoal-dialog__footer--conceal .el-dialog__footer{display:none}.bsgoal-base-dialog .bsgoal_base_dialog_main .el-dialog__header{padding:16px 30px;margin-right:0;background-color:#f5f7fa}.bsgoal-base-dialog .bsgoal_base_dialog_main .el-dialog__header .el-dialog__headerbtn{top:0px;right:8px}.bsgoal-base-dialog .bsgoal_base_dialog_main .el-dialog__body{padding:0}.bsgoal-base-dialog .bsgoal_base_dialog_main .base_dialog_content{padding:30px}.bsgoal-base-dialog .bsgoal_base_dialog_main .base_dialog_content--form{padding:0 0 30px 30px}.bsgoal-base-button,.bsgoal-base-button .base_button{display:inline-block}.bsgoal-base-alert .el-alert{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+@charset "UTF-8";.base_tooltip_popper{max-width:20em}.bsgoal-base-form .base_form{padding:16px 6px 8px 16px}.bsgoal-base-form .base_form .el-form-item{margin-right:10px}.bsgoal-base-form .base_form div.el-input,.bsgoal-base-form .base_form div.el-select{width:100%}.bsgoal-base-form .base_form--visible{width:0px;height:0px;overflow:hidden}.bsgoal-base-table-pagination{text-align:right}.bsgoal-base-table-pagination .base_table_pagination{display:inline-block;margin-top:16px}.bsgoal-base-table-empty .base_table_empty{text-align:center}.bsgoal-base-table-empty .base_table_empty_img{padding-top:16px;line-height:initial}.bsgoal-base-table-empty .base_table_empty_text{display:inline-block}.bsgoal-base-table .base_table{padding:16px}.bsgoal-base-table .base_table_menu{margin-bottom:8px}.bsgoal-base-table .el-table__body-wrapper{overflow-y:hidden!important}.bsgoal-base-table .el-scrollbar__view{height:100%}.bsgoal-base-line .base_line{height:10px;background-color:#f0f2f5}.bsgoal-base-line .bsgoal-base-line__vertical{display:inline-block;height:100%}.bsgoal-base-line .base_line__vertical{width:10px;height:100%}.bsgoal-base-search-operation{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bsgoal-base-search-operation .operation_fold{margin-left:12px;cursor:pointer;min-width:3em}.bsgoal-base-cascader{width:100%}.bsgoal-base-cascader .base_cascader{width:inherit}.bsgoal-base-search .base_search{padding:16px 6px 8px 16px}.bsgoal-base-search .base_search .el-form-item{margin-bottom:8px;margin-right:10px}.bsgoal-base-search .base_search div.el-input,.bsgoal-base-search .base_search div.el-select{width:100%}.bsgoal-base-tree-fold .base_tree_fold{position:absolute;top:0;bottom:0;right:10px;margin:auto;width:14px;height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:10px;background-color:#409eff}.bsgoal-base-tree-fold .base_tree_fold--hide{right:0px}.bsgoal-base-tree{display:inline-block}.bsgoal-base-tree .base_tree{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;min-width:14px}.bsgoal-base-tree .base_tree_main{width:221px;padding:16px;scrollbar-width:none;-ms-overflow-style:none;overflow-x:hidden;overflow-y:auto}.bsgoal-base-tree .base_tree_main::-webkit-scrollbar{width:6px;height:6px}.bsgoal-base-tree .base_tree_main::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,.2);width:20px}.bsgoal-base-tree .base_tree_main::-webkit-scrollbar-track{background-color:#fff}.bsgoal-base-tree .base_tree_main_input{margin-bottom:10px}.bsgoal-base-tree .base_tree .el-tree-node__content>i.el-tree-node__expand-icon{padding-left:0}.bsgoal-base-dialog .base_dialog_header{font-weight:500;color:#303133;font-size:16px}.bsgoal-base-dialog .bsgoal-dialog__footer--conceal .el-dialog__footer{display:none}.bsgoal-base-dialog .bsgoal_base_dialog_main .el-dialog__header{padding:16px 30px;margin-right:0;background-color:#f5f7fa}.bsgoal-base-dialog .bsgoal_base_dialog_main .el-dialog__header .el-dialog__headerbtn{top:0px;right:8px}.bsgoal-base-dialog .bsgoal_base_dialog_main .el-dialog__body{padding:0}.bsgoal-base-dialog .bsgoal_base_dialog_main .base_dialog_content{padding:30px}.bsgoal-base-dialog .bsgoal_base_dialog_main .base_dialog_content--form{padding:0 0 30px 30px}.bsgoal-base-button,.bsgoal-base-button .base_button{display:inline-block}.bsgoal-base-alert .el-alert,.bsgoal-base-item .base_item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bsgoal-base-item .base_item_label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:inherit;color:#606266;height:32px;line-height:32px;padding-right:12px}

package/package.json

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

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

@@ -0,0 +1,50 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-05-24 17:46:26
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-05-24 18:05:46
+ * @FilePath: \common\src\components\bsgoal-base-item\demo.vue
+ * @Description: 表单项 演示
+ * 
+-->
+
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue'
+import BsgoalBaseItem from './index.vue'
+import BsgoalBaseSwitch  from '../bsgoal-base-switch/index.vue';
+const props = defineProps({})
+
+</script>
+<script>
+export default {
+  name: 'BsgoalBaseItemDemo'
+}
+
+const switchModelValue = ref('0')
+</script>
+<template>
+  <div class="bsgoal-base-item-demo">
+    <div class="base_item_demo">
+      <BsgoalBaseItem>
+        <template #label>
+          <div>是否开通接听值班表设置</div>
+        </template>
+        <template #content>
+          <div>
+            <BsgoalBaseSwitch v-model="switchModelValue" />
+          </div>
+        </template>
+      </BsgoalBaseItem>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

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

@@ -0,0 +1,59 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-05-24 17:46:21
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-05-24 18:08:53
+ * @FilePath: \common\src\components\bsgoal-base-item\index.vue
+ * @Description: 表单项 
+ * 
+-->
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue'
+const props = defineProps({
+  /**
+   * label 后缀
+   */
+  suffix: {
+    type: [String],
+    default: ':'
+  }
+})
+</script>
+<script>
+export default {
+  name: 'BsgoalBaseItem'
+}
+</script>
+<template>
+  <div class="bsgoal-base-item">
+    <div class="base_item">
+      <div class="base_item_label">
+        <slot name="label"> </slot> <span>{{ suffix }}</span>
+      </div>
+      <div class="base_item_contetn">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+.bsgoal-base-item {
+  .base_item {
+    display: flex;
+    align-items: center;
+  }
+  .base_item_label {
+    display: flex;
+    align-items: center;
+    font-size: inherit;
+    color: #606266;
+    height: 32px;
+    line-height: 32px;
+    padding-right: 12px;
+  }
+}
+</style>

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-switch/demo.vue

@@ -0,0 +1,39 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-05-24 17:20:47
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-05-24 17:43:05
+ * @FilePath: \common\src\components\bsgoal-base-switch\demo.vue
+ * @Description: 开关 公共组件 演示
+ * 
+-->
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue'
+import BsgoalBaseSwitch from './index.vue'
+const props = defineProps({})
+
+const modelValue = ref('0')
+</script>
+<script>
+export default {
+  name: 'BsgoalBaseSwitchDemo'
+}
+</script>
+<template>
+  <div class="bsgoal-base-switch-demo">
+    <div class="base_switch_demo">
+        {{ modelValue }}
+      <BsgoalBaseSwitch v-model="modelValue" />
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

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

@@ -0,0 +1,76 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-05-24 17:20:40
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-05-24 17:44:16
+ * @FilePath: \common\src\components\bsgoal-base-switch\index.vue
+ * @Description: switch 开关
+ * 
+-->
+
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue'
+const props = defineProps({
+  /**
+   *  text 配置 选项
+   */
+  textRange: {
+    type: [Array],
+    default: () => ['是', '否']
+  },
+  /**
+   * value 配置 选项
+   */
+  valueRange: {
+    type: [Array],
+    default: () => ['1', '0']
+  },
+  /**
+   * value
+   */
+  modelValue: {
+    type: [],
+    default: ''
+  }
+})
+const emits = defineEmits(['update:modelValue'])
+
+/**
+ * @Author: canlong.shen
+ * @description: 触发 值变化
+ * @default:
+ * @return {*}
+ */
+const triggerChange = (value = '') => {
+  emits('update:modelValue', value)
+}
+</script>
+
+<script>
+export default {
+  name: 'BsgoalBaseSwitch'
+}
+</script>
+<template>
+  <div class="bsgoal-base-switch">
+    <el-switch
+      class="base_switch"
+      :model-value="modelValue"
+      :active-value="valueRange[0]"
+      :inactive-value="valueRange[1]"
+      :active-text="textRange[0]"
+      :inactive-text="textRange[1]"
+      @change="triggerChange"
+    />
+  </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>