@xmszm/core 0.0.1

package/src/query/CommonQuery.vue

@@ -0,0 +1,272 @@
+<script setup lang="jsx">
+import { RefreshOutline, SearchOutline } from '@vicons/ionicons5'
+import { DataForm } from 'core'
+import { getOptions } from 'core/options/defaultOptions.jsx'
+import { ObjectToArray } from 'core/utils/object.js'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+// 防抖函数
+function debounce(func, delay) {
+  let timeoutId
+  return function (...args) {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => {
+      func.apply(this, args)
+    }, delay)
+  }
+}
+const emit = defineEmits(['update:query', 'submit', 'reset'])
+
+const props = defineProps({
+  inlineText: {
+    type: Boolean,
+    default: () => true,
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  query: {
+    type: Object,
+    default: () => ({}),
+  },
+  selectCount: {
+    type: Number,
+    default: () => 1,
+  },
+  type: {
+    type: String,
+    default: () => 'primary',
+  },
+  noButton: {
+    type: Boolean,
+    default: () => false,
+  },
+  isRead: {
+    type: Boolean,
+    default: () => false,
+  },
+  btn: {
+    type: Array,
+    default: () => ['reset', 'search'],
+  },
+  size: {
+    type: String,
+    default: () => 'medium',
+  },
+
+})
+
+function onBeforeOptions(arr){
+  return arr.map(v=>({
+    ...v,
+    props:{
+      ...v.props,
+    ...((!v.way ||v.way==='input')? {
+      onUpdateValue: (...v) => {
+        v.props?.onUpdateValue?.(...v)
+        debouncedSubmit()
+      }
+    }: {}),
+    ...(v?.way === 'select' ? {
+      onUpdateValue: (...v) => {
+        v.props?.onUpdateValue?.(...v)
+        debouncedSubmit()
+      }
+    }: {})
+  }
+    
+  }))
+}
+
+// 创建防抖的提交函数（500ms延迟）
+const debouncedSubmit = debounce(() => {
+  emit('submit')
+}, 500)
+
+function onSubmit() {
+  // loading.value = true
+  debouncedSubmit()
+  // loading.value = false
+  // return false
+}
+const loading = ref(false)
+const _query = defineModel('query', {
+  type: Object,
+  default: () => ({}),
+})
+
+const defaultFormItemProps = {
+  style: {
+    width: '33%',
+  },
+}
+const _queryOptionsKey = computed(() =>
+  props.options?.map(v => v?.way || 'input'),
+)
+const defaultOptions = getOptions(_queryOptionsKey.value)
+
+const _queryOptions = computed(() => {
+  try {
+    const arr = []
+    for (let i = 0; i < props.options.length; i++) {
+      const v = props.options[i]
+      if (v?.enum && !v?.options)
+        v.options = ObjectToArray(v.enum)
+      if (!v?.props) {
+        v.props = {
+          size: props.size,
+        }
+      }
+
+      if (!v?.formItemProps) {
+        v.formItemProps = { ...defaultFormItemProps }
+      }
+      else {
+        v.formItemProps = {
+          ...defaultFormItemProps,
+          ...v.formItemProps,
+          style: { ...defaultFormItemProps.style, ...v.formItemProps.style },
+        }
+      }
+
+      const key = v?.key || v?.value
+      if (!key)
+        throw new Error('key no set')
+      arr.push({
+        ...v,
+
+        key,
+      })
+    }
+    return onBeforeOptions(arr)
+  }
+  catch (e) {
+    console.warn('error', e)
+    return []
+  }
+})
+
+const classComponent = {
+  input: '',
+  select: '',
+  dateRange: 'input-range',
+  dateRangeTime: 'input-range-time',
+}
+const defaultBtnProps = {
+  style: {
+    borderRadius: '3px',
+  },
+}
+const defaultBtn = {
+  search: () => (
+    <NButton
+      type={props.type}
+      loading={loading.value}
+      default-props={{ attrType: 'submit' }}
+      onClick={() => onSubmit()}
+      {...defaultBtnProps}
+    >
+      {{
+        default: () => '搜索',
+        icon: () => <SearchOutline />,
+      }}
+    </NButton>
+  ),
+  reset: () => (
+    <NButton
+      type="default"
+      onClick={() => {
+        clearQuery()
+      }}
+      {...defaultBtnProps}
+    >
+      {{
+        default: () => '重置',
+        icon: () => <RefreshOutline />,
+      }}
+    </NButton>
+  ),
+}
+
+function clearQuery() {
+  props.options.forEach((v) => {
+    const key = v?.key || v?.value
+    if (key) {
+      if (v?.queryType)
+        _query.value[v.queryType][key] = null
+      else _query.value[key] = null
+    }
+  })
+  emit('reset')
+}
+
+// 全局监听 Enter 键的方法
+function handleGlobalEnter(event) {
+  // 检查是否按下了 Enter 键
+  if (event.key === 'Enter') {
+    // 检查是否在输入框、选择框等表单元素中
+    // const target = event.target
+    // const isFormElement = target.tagName === 'INPUT' || 
+    //                      target.tagName === 'SELECT' || 
+    //                      target.tagName === 'TEXTAREA' ||
+    //                      target.contentEditable === 'true'
+    
+    // if (isFormElement) {
+    //   // 阻止默认行为（如换行）
+    //   event.preventDefault()
+    //   // 触发搜索
+     
+    // }
+    onSubmit()
+  }
+}
+
+// 组件挂载时添加全局监听
+onMounted(() => {
+  document.addEventListener('keydown', handleGlobalEnter)
+})
+
+// 组件卸载时移除全局监听
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleGlobalEnter)
+})
+</script>
+
+<template>
+  <n-space
+    :wrap-item="false"
+    justify="space-between"
+    align="center"
+    :wrap="false"
+  >
+    <div class="flex-1">
+      <DataForm
+        v-model:value="_query"
+        :options="_queryOptions"
+        :form-props="{ showFeedback: false }"
+      />
+    </div>
+    <n-space v-if="!props.noButton" align="center" :wrap="false">
+      <slot name="left-btn" />
+      <template v-for="(itm, idx) in props.btn" :key="idx">
+        <component :is="defaultBtn?.[itm]?.()" />
+      </template>
+      <slot name="right-btn" />
+    </n-space>
+  </n-space>
+</template>
+
+<style scoped lang="less">
+.select-text {
+  min-width: 100px;
+  max-width: 240px;
+  text-align: center;
+}
+
+.select-line-text {
+  text-align: center;
+  white-space: nowrap;
+  display: inline;
+}
+</style>

package/src/store/utils/index.js

@@ -0,0 +1,6 @@
+import { computed, ref, unref } from 'vue'
+
+export function useStoreUtils(e) {
+  const value = ref(e)
+  return [value, computed(() => unref(value)), v => (value.value = v)]
+}

package/src/table/DataTable.vue

@@ -0,0 +1,315 @@
+<script setup lang="jsx">
+import { ChevronDown, ChevronUp, Code, Funnel } from '@vicons/ionicons5'
+import { commonDialogMethod, toArray } from 'core'
+import { ellipsis } from 'core/table/utils/ellipsis'
+import dayjs from 'dayjs'
+import { uniqueId } from 'lodash-es'
+import { NButton, NTooltip } from 'naive-ui'
+import { computed, onMounted, ref, unref, watch ,isProxy} from 'vue'
+import { useRoute } from 'vue-router'
+import FilterDialog from './FilterDialog.vue'
+import { orderEnum } from 'core'
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  pagination: {
+    type: [Object, null],
+    default: () => undefined,
+  },
+  columns: {
+    type: Array,
+    default: () => [
+      {
+        title: '测试案例',
+      },
+    ],
+  },
+  oprColumns: {
+    type: [Object, null],
+    default: () => null,
+  },
+  selectColumns: {
+    type: [Object, null],
+    default: () => null,
+  },
+  defaultColumns: {
+    type: Array,
+    default: () => [],
+  },
+  summaryColumns: {
+    type: null,
+    default: () => null,
+  },
+  emptyText: {
+    type: String,
+    default: () => '没有数据',
+  },
+  emptyIcon: {
+    type: String,
+    default: () => '',
+  },
+  isFilter: {
+    type: Boolean,
+    default: () => false,
+  },
+  isEllipsis: {
+    type: Boolean,
+    default: () => true,
+  },
+  virtual: {
+    type: null,
+    default: () => {},
+  },
+  singleColumn: {
+    type: Boolean,
+    default: () => false,
+  },
+})
+const route = useRoute()
+const FilterKey = 'filter_key'
+const emit = defineEmits(['sorted'])
+const _data = computed(() => {
+  console.log('table -data', props.data)
+
+  return props.data
+})
+function setHeadFilter(val) {
+  window.localStorage.setItem(FilterKey, JSON.stringify(val))
+}
+
+function getHeadFilter() {
+  return JSON.parse(window.localStorage.getItem(FilterKey)) || {}
+}
+
+const getFilterAll = ref(getHeadFilter())
+const headDefault = ref([])
+
+const scrollX = ref(0)
+
+function _summary(pageData) {
+  if (!props.summaryColumns)
+    return
+  return [
+    props.selectColumns,
+    ...unref(props.columns),
+    props.oprColumns,
+  ]?.reduce((o, n) => {
+    if (n?.key)
+      o[n.key] = props.summaryColumns?.(pageData)?.[n.key] || { value: null }
+    else o[uniqueId('table')] = { value: null }
+    return o
+  }, {})
+}
+
+const _columns = ref([])
+
+watch(
+  () => unref(props.columns),
+  () => {
+    init()
+  },
+  {
+    immediate: true,
+  },
+)
+
+watch(
+  () => props.oprColumns,
+  (v) => {
+    console.log('oprColumns', v)
+  },
+)
+
+function init() {
+  const columns = unref(props.columns)
+  headDefault.value
+    = getFilterAll.value?.[route.fullPath]
+      || columns?.map((v, i) => v?.key || dayjs().valueOf() + i)
+
+  const arr = props.isFilter
+    ? columns.filter(item => headDefault.value?.includes(item.key))
+    : [...columns]
+  if (props.selectColumns)
+    arr.unshift({ key: 'selectKey', ...props.selectColumns })
+  if (props.oprColumns)
+    arr.push(props.oprColumns)
+  let scrollNum = 0
+  _columns.value = arr.reduce((o, obj) => {
+    if (obj?.display)
+      console.log('display', obj?.display)
+    if (!(obj?.display ?? true))
+      return o
+    const v = {
+      'align': 'center',
+      'width': 120,
+      ...obj,
+      'key': obj?.key || uniqueId('table'),
+      'ellipsis':
+        obj?.ellipsis || props.isEllipsis
+          ? obj?.ellipsisProp
+            ? obj?.ellipsisProp(ellipsis)
+            : ellipsis
+          : false,
+      'ellipsis-component': 'ellipsis' || 'performant-ellipsis',
+      'title': () => {
+        const title = obj?.label || obj?.title || ''
+        return (
+          <div style={{ width: '100%', whiteSpace: 'pre-wrap' }}>
+            {typeof title === 'string' ? title : title?.()}
+          </div>
+        )
+      },
+    }
+
+    if (obj?.sorter) {
+      v.renderSorterIcon = ({ order }) => {
+        const { Icon, title } = orderEnum[order]
+        return (
+          <NTooltip>
+            {{
+              trigger: () => Icon,
+              default: () => title,
+            }}
+          </NTooltip>
+        )
+      }
+      v.sorter = {
+        multiple: 1,
+        fn:obj.sorter
+      }
+    }
+
+
+    scrollNum += v?.width
+      ? Number.parseInt(v?.width)
+      : null || v?.title?.length * v.length + 30 || 0
+
+    o.push(v)
+    return o
+  }, [])
+  scrollX.value = scrollNum
+  console.log('计算')
+}
+
+function filterButton() {
+  return (
+    <NButton type="info" onClick={() => filterHandle()}>
+      {{
+        default: () => '筛选字段',
+        icon: () => <Funnel />,
+      }}
+    </NButton>
+  )
+}
+
+function filterHandle() {
+  const { cancel } = commonDialogMethod(
+    {
+      title: '筛选字段',
+      read: true,
+      options: [
+        {
+          render: () => (
+            <FilterDialog
+              style={{
+                width: '100%',
+                margin: '0',
+                padding: 0,
+              }}
+              filterItem={unref(props.columns)}
+              selectItem={headDefault.value}
+              defaultItem={props.defaultColumns}
+              onSubmit={(v) => {
+                getFilterAll.value[route.fullPath] = v
+                setHeadFilter(getFilterAll.value)
+                init()
+                cancel()
+              }}
+            />
+          ),
+        },
+      ],
+    },
+    {
+      closable: false,
+      style: {
+        width: '500px',
+      },
+    },
+  )
+}
+
+function onSorter(e) {
+  console.log('onSorter', e)
+  if (!e)
+    return
+  const sortArr = toArray(e)
+
+  sortArr.forEach(v => {
+    console.log('v', v)
+    
+    if (v?.sorter) {
+      v?.sorter?.fn
+      ((listQuery, pageState, key) => {
+        orderEnum[v.order]?.fn(listQuery, key)
+        pageState.fetchData()
+      },{
+        field: v?.columnKey,
+        value: orderEnum[v?.order]?.value,
+        isClick : !isProxy(v)
+      })
+    }
+  })
+
+  emit('sorted')
+}
+
+defineExpose({
+  filterHandle,
+  filterButton,
+  initColumns: init,
+})
+
+onMounted(() => {})
+</script>
+
+<template>
+  <n-data-table
+    :data="_data"
+    :columns="_columns"
+    :scroll-x="scrollX"
+    :single-column="props.singleColumn"
+    :summary="props.summaryColumns ? _summary : undefined"
+    summary-placement="bottom"
+    :pagination="props.pagination"
+    :row-props="() => ({ style: { height: '60px' } })"
+    flex-height
+    remote
+    :virtual-scroll="props.virtual ?? props.data.length > 1000"
+    style="flex: 1"
+    @update:sorter="onSorter"
+  >
+    <!-- props.data.length > 30 -->
+    <template #empty>
+      <slot name="empty">
+        <n-empty>{{ emptyText }}</n-empty>
+      </slot>
+    </template>
+  </n-data-table>
+</template>
+
+<style scoped lang="less">
+:deep(.n-data-table-tr--summary) {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  .n-data-table-td--summary {
+    border-top: 1px solid var(--n-merged-border-color);
+  }
+}
+</style>