@bsgoal/common 0.1.0 → 0.1.1

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@bsgoal/common",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": false,
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",

package/src/App.vue

@@ -0,0 +1,9 @@
+<script setup>
+
+ 
+</script>
+<template>
+  <RouterView />
+</template>
+<style scoped>
+</style>

package/src/combines/useComs.js

@@ -0,0 +1,32 @@
+/*
+ * @Author: canlong.shen
+ * @Date: 2023-04-19 09:10:00
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-04-25 10:45:14
+ * @FilePath: \common\src\combines\useComs.js
+ * @Description: 组件相关的组合函数
+ *
+ */
+
+import { unref, nextTick } from 'vue'
+
+/**
+ * @Author: canlong.shen
+ * @description: 自动计算表格高度
+ * @param {*} el
+ * @param {*} expression
+ * @default:
+ * @return {*}
+ */
+export const useAutoHeight = (el = null, { expression = 75 , arg ={}} = {}) => {
+  const elValue = unref(el)
+  if (elValue) {
+    const elTable = elValue.querySelector('.el-table')
+    if (elTable) {
+      nextTick(() => {
+        const { y = 0 } = elTable.getBoundingClientRect()
+        elTable.style.height = `calc(100vh - ${y + expression}px)`
+      })
+    }
+  }
+}

package/src/combines/useFetchs.js

@@ -0,0 +1,48 @@
+/*
+ * @Author: canlong.shen
+ * @Date: 2023-04-18 16:46:18
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-04-19 17:45:09
+ * @FilePath: \common\src\combines\useFetchs.js
+ * @Description: 请求组合函数
+ *
+ */
+
+import { ref } from 'vue'
+
+/**
+ * @Author: canlong.shen
+ * @description: 请求的组合函数
+ * @param {*} request
+ * @default:
+ * @return {*}
+ */
+export const useFetch = (request = Promise.resolve(), call = null, loading = ref(false) ,data = ref(null) ) => {
+  const message = ref('')
+  loading.value = true
+  request
+    .then((res = {}) => {
+      const { data: resData = {}, message: resMessage = '' } = res
+      data.value = resData
+      message.value = resMessage
+      if (call) {
+        call(true, resData)
+      }
+      loading.value = false
+    })
+    .catch((err = {}) => {
+      if (typeof err === 'object') {
+        const { message: errMessage = '' } = err
+        message.value = errMessage
+      } else {
+        message.value = err
+      }
+      call(false, err)
+      loading.value = false
+    })
+    .finally(() => {
+      loading.value = false
+    })
+
+  return { data, message, loading }
+}

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

@@ -0,0 +1,50 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-04-23 16:35:24
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-04-24 14:36:55
+ * @FilePath: \common\src\components\bsgoal-base-dialog\demo.vue
+ * @Description: 弹窗公共组件 演示
+ * 
+-->
+
+<script>
+export default {
+  name: 'BsgoalBaseDialogDemo'
+}
+</script>
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue'
+import BsgoalBaseDialog from './index.vue'
+
+
+// props
+const props = defineProps({})
+
+const dialogVisible = ref(false)
+
+const test = () => {
+   console.log('点击了');
+    dialogVisible.value = true
+
+}
+
+</script>
+<template>
+  <div class="bsgoal-base-dialog-demo">
+    <div class="base_dialog_demo">
+      <BsgoalBaseDialog v-model="dialogVisible" />
+     <el-button type="primary" @click="test">打开弹窗22</el-button>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

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

@@ -0,0 +1,133 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-04-23 16:35:19
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-04-25 09:12:42
+ * @FilePath: \common\src\components\bsgoal-base-dialog\index.vue
+ * @Description:  弹窗公共组件
+ * 
+-->
+
+<script>
+export default {
+  name: 'BsgoalBaseDialog'
+}
+</script>
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref, watch } from 'vue'
+// props
+const props = defineProps({
+  /**
+   * 弹窗状态
+   */
+  modelValue: {
+    type: [Boolean],
+    default: false
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: [String],
+    default: '标题'
+  },
+  /**
+   * 取消的文本
+   */
+  cancelTxt: {
+    type: [String],
+    default: '取消'
+  },
+  /**
+   * 确定的文本
+   */
+  confirmTxt: {
+    type: [String],
+    default: '确定'
+  }
+})
+
+const emits = defineEmits(['update:modelValue', 'on-confirm'])
+const dialogVisible = ref(props.modelValue.value)
+
+/**
+ * @Author: canlong.shen
+ * @description: 取消弹窗
+ * @default:
+ * @return {*}
+ */
+const cancel = () => {
+  dialogVisible.value = false
+}
+/**
+ * @Author: canlong.shen
+ * @description: 确定弹窗
+ * @default:
+ * @return {*}
+ */
+const confirm = () => {
+  dialogVisible.value = false
+  emits('on-confirm')
+}
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    dialogVisible.value = v
+  }
+)
+
+watch(dialogVisible, (v) => {
+  emits('update:modelValue', v)
+})
+</script>
+<template>
+  <div class="bsgoal-base-dialog">
+    <div class="base_dialog">
+      <!-- S 组件实体 -->
+      <el-dialog v-model="dialogVisible" custom-class="bsgoal_base_dialog_main">
+        <template #header>
+          <div class="base_dialog_header">{{ title }}</div>
+        </template>
+        <div class="base_dialog_content">
+          <slot></slot>
+        </div>
+        <template #footer>
+          <span class="base_dialog_footer">
+            <el-button @click="cancel">{{ cancelTxt }}</el-button>
+            <el-button type="primary" @click="confirm"> {{ confirmTxt }} </el-button>
+          </span>
+        </template>
+      </el-dialog>
+      <!-- E 组件实体 -->
+    </div>
+  </div>
+</template>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+.bsgoal-base-dialog {
+  .base_dialog_header {
+    font-weight: 500;
+    color: #303133;
+    font-size: 16px;
+  }
+
+  .bsgoal_base_dialog_main {
+    .el-dialog__header {
+      padding: 16px 30px;
+      margin-right: 0px;
+      background-color: #f5f7fa;
+      .el-dialog__headerbtn {
+        top: 0px;
+        right: 8px;
+      }
+    }
+    .el-dialog__body {
+      padding: 0px 0px 30px 30px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,187 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-04-10 15:00:00
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-04-20 17:47:40
+ * @FilePath: \common\src\components\bsgoal-base-form\demo.vue
+ * @Description: 表单公共组件演示组件
+ * 
+-->
+
+<template>
+  <div class="bsgoal-base-form-demo">
+    <BsgoalBaseForm ref="BSGOAL_BASE_FORM_REF" :config-options="configOptions" :values="values" />
+    <el-button type="primary" @click="confirm">提交</el-button>
+  </div>
+</template>
+<script>
+export default {
+  name: 'BsgoalBaseFormDemo'
+}
+</script>
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import BsgoalBaseForm from './index.vue'
+import { ref, computed, toRefs, watch, unref } from 'vue'
+import EnumType from '../../enums/enumType.js'
+
+const values = ref({
+   prop1:'6666'
+})
+
+const BSGOAL_BASE_FORM_REF = ref(null)
+
+const confirm =  () => {
+    BSGOAL_BASE_FORM_REF.value.validateForm( (res) => {
+     
+       console.log('res',res);
+
+    } )
+  
+}
+
+// 配置项
+const configOptions = ref([
+  {
+    label: 'prop1',
+    // value: '111',
+    prop: 'prop1',
+    type: EnumType.INPUT,
+    width: '100px',
+    rules:true
+  },
+  {
+    label: 'prop2',
+    value: 'select2',
+    type: EnumType.SELECT,
+    prop: 'prop2',
+    range: [
+      {
+        label: 'select1',
+        value: 'select1'
+      },
+      {
+        label: 'select2',
+        value: 'select2'
+      },
+      {
+        label: 'select3',
+        value: 'select3'
+      },
+      {
+        label: 'select4',
+        value: 'select5'
+      }
+    ]
+  },
+  {
+    label: 'prop3',
+    // value: '111',
+    type: EnumType.SLIDER,
+    prop: 'prop3'
+  },
+  {
+    label: 'prop4',
+    // value: '111',
+    type: EnumType.SWITCH,
+    prop: 'prop4'
+  },
+  {
+    label: 'prop5',
+    // value: '111',
+    type: EnumType.RADIO,
+    prop: 'prop5',
+    range: [
+      {
+        label: 'radio1',
+        value: 'radio1'
+      },
+      {
+        label: 'radio2',
+        value: 'radio2'
+      }
+    ]
+  },
+  {
+    label: 'prop6',
+    value: [],
+    type: EnumType.CHECKBOX,
+    prop: 'prop6',
+    range: [
+      {
+        label: 'checkbox1',
+        value: 'checkbox1'
+      },
+      {
+        label: 'checkbox2',
+        value: 'checkbox2'
+      }
+    ]
+  },
+  {
+    label: 'prop7',
+    // value: '111',
+    type: EnumType.DATE,
+    prop: 'prop7',
+    format: 'YYYY-MM-DD'
+  },
+  {
+    label: 'prop9',
+    // value: '111',
+    type: EnumType.MONTH,
+    prop: 'prop9'
+  },
+  {
+    label: 'prop10',
+    // value: '111',
+    type: EnumType.YEAR,
+    prop: 'prop10'
+  },
+  {
+    label: 'prop11',
+    // value: '111',
+    type: EnumType.DATE_RANGE,
+    prop: 'prop11',
+    range: ['startDate', 'endDate']
+  },
+  {
+    label: 'prop12',
+    // value: '111',
+    type: EnumType.MONTH_RANGE,
+    prop: 'prop12'
+  },
+  {
+    label: 'prop13',
+    // value: '111',
+    type: EnumType.TIME,
+    prop: 'prop13'
+  },
+  {
+    label: 'prop14',
+    // value: '111',
+    type: EnumType.TIME_RANGE,
+    prop: 'prop14'
+  },
+  {
+    label: 'prop15',
+    // value: '111',
+    type: EnumType.DATE_TIME,
+    prop: 'prop15'
+  },
+  {
+    label: 'prop16',
+    // value: '111',
+    type: EnumType.DATE_TIME_RANGE,
+    prop: 'prop16'
+  }
+])
+</script>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>