@bsgoal/common 2.16.4 → 2.17.0

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

@@ -1,461 +0,0 @@
-<!--
- * @Author: canlong.shen
- * @Date: 2023-04-10 11:29:04
- * @LastEditors: canlong.shen
- * @LastEditTime: 2023-07-11 11:01:20
- * @FilePath: \common\src\components\bsgoal-base-table\index.vue
- * @Description: 
- * 
--->
-
-<script setup>
-/* setup模板
----------------------------------------------------------------- */
-import { ref, computed, unref, inject, watchEffect, watch } from 'vue'
-import BsgoalBaseTableContent from '../bsgoal-base-table-content/index.vue'
-import BsgoalBaseTablePagination from '../bsgoal-base-table-pagination/index.vue'
-import BsgoalBaseTableEmpty from '../bsgoal-base-table-empty/index.vue'
-import { useAutoHeight } from '../../combines/useComs.js'
-import { useFetch } from '../../combines/useFetchs.js'
-import { isBoolean } from '@/utils/common.js'
-
-defineOptions({
-  name: 'BsgoalBaseTable'
-})
-
-const props = defineProps({
-  /**
-   * >----------props----------<
-   * {
-   *  label: '' // 列名
-   *  prop:  '' // 绑定字段
-   * }
-   * >----------slots----------<
-   *
-   *  menu: 顶部操作区域
-   *  operation: 列表右侧操作区域
-   *
-   */
-  configOptions: {
-    type: [Array],
-    default: () => []
-  },
-  /**
-   * 表格数据
-   */
-  data: {
-    type: [Array],
-    default: () => []
-  },
-  /**
-   * 是否包含多选列
-   */
-  selection: {
-    type: [Boolean],
-    default: false
-  },
-  /**
-   * 是否包含操作列
-   */
-  operation: {
-    type: [Boolean],
-    default: false
-  },
-  /**
-   * 操作列宽度
-   */
-  operationWidth: {
-    type: [String, Number],
-    default: 100
-  },
-  /**
-   * 表格 loading 状态
-   */
-  loading: {
-    type: [Boolean],
-    default: false
-  },
-  /**
-   * 请求的 promise
-   */
-  fetch: {
-    type: [Object, Function],
-    default: null
-  },
-  /**
-   * 响应的 call
-   */
-  call: {
-    type: [Object, Function],
-    default: null
-  },
-  /**
-   * 映射字段
-   */
-  mapProps: {
-    type: [Object],
-    default: () => ({
-      currentPage: 'currentPage',
-      pageSize: 'pageSize',
-      rows: 'rows',
-      total: 'total'
-    })
-  },
-  /**
-   * 表格高度 下边距值
-   */
-  expression: {
-    type: [Number],
-    default: 75
-  },
-  /**
-   * 表格高度
-   *
-   *  默认 : 自动计算
-   *  布尔值 : 默认表格高度
-   *  字符串 : 直接赋值给 height
-   *  数字   : 直接赋值给 height + 'px'
-   */
-  height: {
-    type: [Number, String, Boolean],
-    default: ''
-  },
-  /**
-   * 是否显示分页
-   */
-  hasPage: {
-    type: Boolean,
-    default: true
-  },
-  /**
-   * 每页显示条目个数
-   */
-  pageSize: {
-    type: [Number],
-    default: 20
-  },
-  /**
-   * 是否显示合计
-   */
-  showSummary: {
-    type: [Boolean],
-    default: false
-  },
-  /**
-   *  合计的列
-   */
-  summaryProps: {
-    type: [Array],
-    default: () => []
-  },
-  /**
-   * 序号 列
-   */
-  serial: {
-    type: [Boolean],
-    default: false
-  },
-  /**
-   * 主体style
-   */
-  bodyStyle: {
-    type: [Object],
-    default: () => ({})
-  }
-})
-
-const emits = defineEmits(['select', 'select-all', 'selection-change', 'on-total-change'])
-
-/**
- * @Author: canlong.shen
- * @description:
- * @param {*} computed
- * @default:
- * @return {*}
- */
-const configOptionsGet = computed(() => {
-  const { configOptions = [], operation = false, operationWidth = 0 } = props
-  const options = unref(configOptions)
-  const extraOptions = []
-  if (operation) {
-    extraOptions.push({
-      label: '操作',
-      fixed: 'right',
-      prop: 'operation',
-      width: operationWidth
-    })
-  }
-  return [...options, ...extraOptions]
-})
-// 表格包裹元素
-const EL_TABLE_WRAP_REF = ref(null)
-// 折叠状态响应值
-const transferFoldStatus = inject('transferFoldStatus')
-watchEffect(() => {
-  const { height } = props
-  const status = transferFoldStatus ? transferFoldStatus.value : false
-  const expressionVal = unref(props.expression)
-  // 默认是打开表格高度自动计算的
-  if (!isBoolean(height)) {
-    useAutoHeight(EL_TABLE_WRAP_REF, { arg: status, expression: expressionVal, height })
-  }
-})
-
-// 触发搜索
-const mapPropsVal = unref(props.mapProps)
-const mapPropsFuse = {
-  currentPage: 'currentPage',
-  pageSize: 'pageSize',
-  rows: 'rows',
-  total: 'total',
-  ...mapPropsVal
-}
-
-const currentPage = ref(1)
-const curPageSize = ref(props.pageSize)
-const total = ref(0)
-const searchParams = ref({})
-const tableLoading = ref(props.loading)
-const tableData = ref()
-const resData = ref({})
-const ping = () => {
-  const { fetch, call, hasPage } = props
-  const searchParamsVal = searchParams.value
-  const currentPageVal = currentPage.value
-  const pageSizeVal = curPageSize.value
-  const fetchParams = { ...searchParamsVal }
-  // 显示分页的注入分页参数
-  if (hasPage) {
-    fetchParams[mapPropsFuse.currentPage] = currentPageVal
-    fetchParams[mapPropsFuse.pageSize] = pageSizeVal
-  }
-
-  useFetch(fetch(fetchParams), call, tableLoading, resData)
-}
-
-watchEffect(() => {
-  tableData.value = props.data
-})
-
-watch(resData, (data) => {
-  // 存在分页才注入
-  if (props.hasPage) {
-    tableData.value = data[mapPropsFuse.rows]
-    total.value = data[mapPropsFuse.total]
-  } else {
-    tableData.value = data
-  }
-})
-
-watchEffect(() => {
-  emits('on-total-change', total.value)
-})
-
-// 查询
-const refreshList = (params = {}) => {
-  searchParams.value = params
-  currentPage.value = 1
-  ping()
-}
-// 改变当前页
-const triggerPaginationCurrentChange = (current = 1) => {
-  currentPage.value = current
-}
-//改变页数
-const triggerPaginationSizeChange = (size = 10) => {
-  curPageSize.value = size
-}
-
-watch([currentPage, curPageSize], () => {
-  ping()
-})
-
-// ---> S 左侧机构树折叠状态 <---
-const TREE_SWITCH_STATUS = inject('TREE_SWITCH_STATUS')
-// ---> E 左侧机构树折叠状态 <---
-
-// ---> S 触发事件 <---
-const triggerSelect = (selection, row) => {
-  emits('select', selection, row)
-}
-const triggerSelectAll = (selection) => {
-  emits('select-all', selection)
-}
-const triggerSelectionChange = (selection) => {
-  emits('selection-change', selection)
-}
-// ---> E 触发事件 <---
-
-// ---> S 暴露事件 <---
-
-const BSGOAL_EL_TABLE_REF = ref(null)
-
-const clearSelection = () => {
-  BSGOAL_EL_TABLE_REF.value.clearSelection()
-}
-
-// ---> E 暴露事件 <---
-
-// ---> S 表格绑定的方法 <---
-
-const summaryMethod = (columns = '') => {
-  const { summaryProps = [] } = props
-  const dataList = columns.data
-  const calcResultList = []
-
-  summaryProps.forEach((prop = '', index = 0) => {
-    let sum = 0
-    const propDataList = dataList.map((mi) => mi[prop])
-    propDataList.forEach((pfi) => {
-      const valueInt = parseInt(pfi) || 0
-      sum += valueInt
-    })
-    calcResultList[index] = sum
-  })
-  return ['合计', ...calcResultList]
-}
-
-// ---> E 表格绑定的方法 <---
-
-// ---> S 兼容微前端 <---
-const isMicroApp = window.__MICRO_APP_ENVIRONMENT__
-// ---> E 兼容微前端 <---
-
-// 暴露的属性
-defineExpose({
-  refreshList,
-  clearSelection
-})
-</script>
-
-<template>
-  <div class="bsgoal-base-table">
-    <div
-      class="base_table"
-      :class="{ 'base_table--tree': TREE_SWITCH_STATUS === false, bsgoal_micro_app: isMicroApp }"
-      :style="bodyStyle"
-    >
-      <!-- S 表头操作区域 -->
-      <div class="base_table_menu" v-if="$slots.menu">
-        <slot name="menu"></slot>
-      </div>
-      <!-- E 表头操作区域 -->
-      <!-- S 表格区域 -->
-      <div ref="EL_TABLE_WRAP_REF">
-        <el-table
-          ref="BSGOAL_EL_TABLE_REF"
-          stripe
-          border
-          highlight-current-row
-          style="width: 100%"
-          v-loading="tableLoading"
-          sum-text="合计"
-          :summary-method="summaryMethod"
-          :show-summary="showSummary"
-          :data="tableData"
-          :header-cell-style="{
-            fontWeight: 'bold',
-            backgroundColor: '#EBEEF5',
-            color: 'rgba(0,0,0,.85)',
-            fontSize: '14px'
-          }"
-          @select="triggerSelect"
-          @select-all="triggerSelectAll"
-          @selection-change="triggerSelectionChange"
-        >
-          <!-- / 无数据展示内容 -->
-          <template #empty>
-            <BsgoalBaseTableEmpty />
-          </template>
-          <!-- / 无数据展示内容 -->
-          <!-- / 序号 -->
-          <el-table-column v-if="serial" type="index" width="55" label="序号" align="center" />
-          <!-- / 序号 -->
-          <!-- / 多选 -->
-          <el-table-column v-if="selection" fixed="left" type="selection" width="40" />
-          <!-- / 多选 -->
-          <!-- / 表格内容 -->
-          <template
-            v-for="(
-              {
-                prop = '',
-                label = '',
-                align = 'center',
-                width = '',
-                fixed = false,
-                tooltip = false,
-                limit = 0
-              } = {},
-              index
-            ) of configOptionsGet"
-            :key="index"
-          >
-            <el-table-column
-              :label="label"
-              :align="align"
-              :width="width"
-              :fixed="fixed"
-              :min-width="`${label.length * 14 + 30}px`"
-              :max-width="`${label.length * 14 + 30}px`"
-            >
-              <template v-slot:default="{ row ,column, $index }">
-                <slot :name="prop" :row="row" :column="column" :index="$index">
-                  <BsgoalBaseTableContent :limit="limit" :tooltip="tooltip" :data="row[prop]" />
-                </slot>
-              </template>
-            </el-table-column>
-          </template>
-          <!-- / 表格内容 -->
-        </el-table>
-      </div>
-
-      <!-- E 表格区域 -->
-
-      <!-- S 分页 -->
-      <BsgoalBaseTablePagination
-        v-if="hasPage"
-        :total="total"
-        :page-size="curPageSize"
-        @on-current-change="triggerPaginationCurrentChange"
-        @on-size-change="triggerPaginationSizeChange"
-      />
-      <!-- E 分页 -->
-    </div>
-  </div>
-</template>
-<style lang="scss">
-/* 覆盖样式
----------------------------------------------------------------- */
-.bsgoal-base-table {
-  .base_table {
-    padding: 16px;
-  }
-
-  .base_table_menu {
-    margin-bottom: 8px;
-  }
-
-  .el-table__body-wrapper {
-    overflow-y: hidden !important;
-  }
-
-  .el-scrollbar__view {
-    height: 100%;
-  }
-  .base_table--tree {
-    margin-top: 10px;
-  }
-  th > div.cell {
-    white-space: nowrap;
-  }
-
-  .bsgoal_micro_app {
-    .el-scrollbar {
-      padding-bottom: 0px !important;
-    }
-    th.el-table__cell {
-      overflow: initial !important;
-    }
-  }
-}
-</style>

package/src/components/bsgoal-base-table-content/index.vue

@@ -1,64 +0,0 @@
-<!--
- * @Author: canlong.shen
- * @Date: 2023-04-15 13:49:25
- * @LastEditors: canlong.shen
- * @LastEditTime: 2023-05-15 14:26:22
- * @FilePath: \common\src\components\bsgoal-base-table-content\index.vue
- * @Description: 表格内容 
- * 
--->
-
-<script setup>
-/* setup模板
----------------------------------------------------------------- */
-import { ref } from 'vue';
-import BsgoalBaseTooltip from '../bsgoal-base-tooltip/index.vue'
-
-defineOptions({
-  name: 'BsgoalBaseTableContent'
-})
-
-const props = defineProps({
-    /**
-     * 数据
-     */
-    data: {
-        type: [String, Number, Object, Boolean],
-        default: ''
-    },
-
-    /**
-     * 内容提示
-     */
-    tooltip: {
-        type: [Boolean, Number],
-        default: false
-    },
-
-    /**
-     * 内容限定数
-     */
-    limit: {
-        type: [Number],
-        default: 10
-    },
-
-})
-</script>
-<template>
-    <div class="bsgoal-base-table-content">
-        <div class="base_table_content">
-            <BsgoalBaseTooltip v-if="tooltip" :content="data" :limit="limit" />
-            <div v-else class="base_table_table_txt">
-                {{ data }}
-
-            </div>
-        </div>
-    </div>
-</template>
-<style lang="scss">
-/* 覆盖样式
----------------------------------------------------------------- */
-.bsgoal-base-table-content {}
-</style>
-

package/src/components/bsgoal-base-table-empty/demo.vue

@@ -1,37 +0,0 @@
-<!--
- * @Author: canlong.shen
- * @Date: 2023-04-28 08:47:41
- * @LastEditors: canlong.shen
- * @LastEditTime: 2023-04-28 09:21:12
- * @FilePath: \common\src\components\bsgoal-base-table-empty\demo.vue
- * @Description: 表格空数据 公共组件 展示
- * 
--->
-
-<script setup>
-/* setup模板
----------------------------------------------------------------- */
-import { ref } from 'vue'
-import BsgoalBaseTableEmpty from './index.vue'
-
-defineOptions({
-  name: 'BsgoalBaseTableEmptyDemo'
-})
-
-const props = defineProps({})
-</script>
-<template>
-  <div class="bsgoal-base-table-empty-demo">
-    <div class="base_table_empty_demo">
-      <BsgoalBaseTableEmpty />
-    </div>
-  </div>
-</template>
-<style lang="scss" scoped>
-/* 自定义样式
----------------------------------------------------------------- */
-</style>
-<style lang="scss">
-/* 覆盖样式
----------------------------------------------------------------- */
-</style>

package/src/components/bsgoal-base-table-empty/index.vue

@@ -1,48 +0,0 @@
-<!--
- * @Author: canlong.shen
- * @Date: 2023-04-28 08:47:31
- * @LastEditors: canlong.shen
- * @LastEditTime: 2023-04-28 09:21:54
- * @FilePath: \common\src\components\bsgoal-base-table-empty\index.vue
- * @Description: 表格 无数据展示内容
- * 
--->
-
-<script setup>
-defineOptions({
-  name: 'BsgoalBaseTableEmpty'
-})
-</script>
-
-<template>
-  <div class="bsgoal-base-table-empty">
-    <div class="base_table_empty">
-      <div class="base_table_empty_img">
-        <img
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"
-          alt=""
-        />
-      </div>
-
-      <div class="base_table_empty_text">暂无数据</div>
-    </div>
-  </div>
-</template>
-<style lang="scss">
-/* 覆盖样式
----------------------------------------------------------------- */
-.bsgoal-base-table-empty {
-  .base_table_empty {
-    text-align: center;
-  }
-
-  .base_table_empty_img {
-    padding-top: 16px;
-    line-height: initial;
-  }
-
-  .base_table_empty_text {
-    display: inline-block;
-  }
-}
-</style>

package/src/components/bsgoal-base-table-pagination/demo.vue

@@ -1,35 +0,0 @@
-<!--
- * @Author: canlong.shen
- * @Date: 2023-06-27 16:30:46
- * @LastEditors: canlong.shen
- * @LastEditTime: 2023-06-28 10:02:50
- * @FilePath: \common\src\components\bsgoal-base-table-pagination\demo.vue
- * @Description: 分页公共组件 demo
- * 
--->
-
-<script setup>
-/* setup模板
----------------------------------------------------------------- */
-import { ref } from 'vue'
-import BsgoalBaseTablePagination from './index.vue'
-defineOptions({
-  name: 'BsgoalBaseTablePaginationDemo'
-})
-
-const props = defineProps({})
-</script>
-<template>
-  <div class="bsgoal-base-table-pagination-demo">
-    <div style="height: 300px; background-color: red;"></div>
-    <BsgoalBaseTablePagination  />
-  </div>
-</template>
-<style lang="scss" scoped>
-/* 自定义样式
----------------------------------------------------------------- */
-</style>
-<style lang="scss">
-/* 覆盖样式
----------------------------------------------------------------- */
-</style>