@xmszm/core 0.0.1

package/src/table/FilterDialog.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { useThemeVars } from 'naive-ui'
+import { ref, watchEffect } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: () => 'primary',
+  },
+  filterItem: {
+    type: Array,
+    default: () => [],
+  },
+  selectItem: {
+    type: Array,
+    default: () => [],
+  },
+  defaultItem: {
+    type: Array,
+    default: () => [],
+  },
+  filterButtonKey: {
+    type: Array,
+    default: () => ['all', 'selectDefault'],
+    // default: () => ['all', 'selectDefault','currentSelect']
+  },
+})
+const emit = defineEmits(['submit'])
+const theme = useThemeVars()
+const keySelect = ref([])
+
+watchEffect(() => {
+  keySelect.value = props.selectItem
+})
+const filterButton = ref([])
+const filterOprButton = [
+  {
+    key: 'all',
+    label: '全选',
+    onCheck: () => (keySelect.value = props.filterItem?.map(v => v.key)),
+    unCheck: () => (keySelect.value = []),
+  },
+  {
+    key: 'selectDefault',
+    label: '选中默认',
+    onCheck: () => (keySelect.value = props.defaultItem),
+    unCheck: () => (keySelect.value = props.selectItem),
+  },
+  {
+    key: 'currentSelect',
+    label: '选中当前列表',
+    onCheck: () => (keySelect.value = props.selectItem),
+    unCheck: () => (keySelect.value = props.selectItem),
+  },
+]
+watchEffect(() => {
+  filterButton.value = filterOprButton.filter(v =>
+    props.filterButtonKey.includes(v.key),
+  )
+  console.log(props.filterButtonKey)
+})
+
+function onSubmit() {
+  emit('submit', keySelect.value)
+}
+
+const checkKey = ref(
+  props.filterItem?.length === props.selectItem?.length ? ['all'] : [],
+)
+
+function onCheckModel(string, meta) {
+  console.log(string)
+  console.log(meta)
+  if (meta.actionType === 'uncheck') {
+    filterButton.value?.find(v => v?.key === meta.value)?.unCheck()
+    checkKey.value = []
+  }
+  else {
+    filterButton.value?.find(v => v?.key === meta.value)?.onCheck()
+    checkKey.value = [meta.value]
+  }
+}
+</script>
+
+<template>
+  <div class="filter-box">
+    <n-checkbox-group v-model:value="keySelect" class="filter-main">
+      <n-checkbox
+        v-for="item in filterItem"
+        :key="item.key"
+        :value="item.key"
+        class="filter-item"
+      >
+        <n-ellipsis style="max-width: 100px">
+          {{ item.title }}
+        </n-ellipsis>
+      </n-checkbox>
+    </n-checkbox-group>
+    <div class="filter-footer">
+      <n-checkbox-group
+        :type="props.type"
+        :value="checkKey"
+        @update:value="onCheckModel"
+      >
+        <n-checkbox
+          v-for="item in filterButton"
+          :key="item.key"
+          :value="item.key"
+        >
+          {{ item.label }}
+        </n-checkbox>
+      </n-checkbox-group>
+      <n-button class="submit-btn" :type="props.type" @click="onSubmit">
+        保存
+      </n-button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.filter-box {
+  padding: 20px;
+  margin: -16px -28px -20px;
+  box-sizing: border-box;
+}
+
+.filter-main {
+  display: flex;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  min-height: 500px;
+  max-height: 700px;
+  overflow-y: auto;
+  row-gap: 20px;
+  padding: 0 0 15px;
+  box-sizing: border-box;
+
+  .filter-item {
+    --info-color: v-bind(theme.infoColor);
+    --n-border-checked: 1px solid var(--info-color) !important;
+    --n-border-focus: 1px solid var(--info-color) !important;
+    --n-color-checked: var(--info-color) !important;
+    --n-box-shadow-focus: 0 0 0 2px #6a1f7403 !important;
+    width: calc(100% / 3);
+  }
+}
+
+.filter-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .submit-btn {
+    width: 80px;
+  }
+}
+</style>

package/src/table/opr/DataColumnCollet.jsx

@@ -0,0 +1,127 @@
+import { NButton, NPopover, NSpace } from 'naive-ui'
+import { computed, defineComponent, ref } from 'vue'
+
+import { rowIndexKey } from './useDataColumn'
+import OprButton from './useDataColumnButton'
+import Pop from './useDataColumnPop'
+
+export default defineComponent(
+  (props) => {
+    const leng = props.options.length
+
+    const toggle = ref(false)
+    const options = computed(() =>
+      props.options.slice(0, toggle.value ? leng : props.max),
+    )
+
+    const ellipOptions = computed(() => props.options.slice(props.max))
+
+    function renderOptions(op) {
+      return op
+        ?.map(
+          (
+            {
+              isRender = () => true,
+              onClick = null,
+              mode = null,
+              disabled = false,
+              type = 'primary',
+              ...action
+            },
+            i,
+          ) => {
+            return isRender?.(props.data)
+              ? (
+                  mode === 'pop'
+                    ? (
+                        <Pop
+                          onClick={onClick}
+                          row={props.data}
+                          action={action}
+                          key={rowIndexKey(props.data, props.index) + i}
+                        >
+                          <NButton
+                            text
+                            disabled={disabled && disabled(props.data)}
+                            type={disabled && disabled(props.data) ? 'default' : type}
+                            {...action}
+                          >
+                            {typeof action?.label === 'function'
+                              ? action?.label(props.data)
+                              : action?.label}
+                          </NButton>
+                        </Pop>
+                      )
+                    : (
+                        <OprButton
+                          row={props.data}
+                          action={{
+                            ...action,
+                            disabled,
+                            onClick,
+                            type,
+                          }}
+                          key={rowIndexKey(props.data, props.index) + i}
+                        />
+                      )
+                )
+              : undefined
+          },
+        )
+        .filter(v => v)
+    }
+
+    return () => (
+      <NSpace
+        style={{ width: '100%' }}
+        wrap-item={false}
+        justify="center"
+        align="center"
+      >
+        <NSpace wrap-item={false} align="center">
+          {renderOptions(options.value)}
+        </NSpace>
+        <NPopover trigger="click">
+          {{
+            trigger: () => (
+              <NButton text type="info">
+                更多
+              </NButton>
+            ),
+            default: () => (
+              <NSpace
+                wrap-item={false}
+                align="center"
+                style={{ width: '250px', padding: '5px' }}
+              >
+                {renderOptions(ellipOptions.value)}
+              </NSpace>
+            ),
+          }}
+        </NPopover>
+      </NSpace>
+    )
+  },
+  {
+    name: 'DataColumnCollet',
+
+    props: {
+      options: {
+        type: Array,
+        default: () => [],
+      },
+      max: {
+        type: Number,
+        default: 3,
+      },
+      data: {
+        type: Object,
+        default: () => {},
+      },
+      index: {
+        type: Number,
+        default: 0,
+      },
+    },
+  },
+)

package/src/table/opr/useDataColumn.jsx

@@ -0,0 +1,196 @@
+import { hasPermission } from '@/utils/permission'
+import { NButton, NImage, NSpace, NSpin } from 'naive-ui'
+import { ref } from 'vue'
+import DataColumnCollet from './DataColumnCollet.jsx'
+import OprButton from './useDataColumnButton.jsx'
+import Pop from './useDataColumnPop.jsx'
+
+export const rowIndexKey = (row, index) => (row ? JSON.stringify(row) : index)
+
+export function createActionColumnJsx(
+  defaultOption,
+  oprParams = null,
+  collectParams,
+) {
+  // 粗滤计算操作栏占用宽度
+  // 粗滤计算操作栏占用宽度
+  const defaultCollectParams = {
+    max: 4,
+    width: 80,
+  }
+  let collect = false
+  if (typeof collectParams === 'boolean')
+    collect = defaultCollectParams
+  else if (typeof collectParams === 'object')
+    collect = { ...defaultCollectParams, ...collectParams }
+
+  console.log('collect', collect)
+  console.log(Array.isArray(defaultOption))
+  if (!Array.isArray(defaultOption)) {
+    throw new TypeError('需要配置数组')
+  }
+  console.log('ddd')
+  let actions = []
+  let width = 0
+  const filterAction = []
+  const isLoading = false
+
+  if (Array.isArray(defaultOption)) {
+    actions = defaultOption
+    actions.forEach((itm, idx) => {
+      if (itm.permission) {
+        if (hasPermission(itm.permission)) {
+          if (!collectParams || idx < collect.max)
+            width += itm?.label?.length * 12 + 36
+
+          filterAction.push(itm)
+        }
+      }
+      else {
+        if (!collectParams || idx < collect.max)
+          width += itm?.label?.length * 12 + 36
+        filterAction.push(itm)
+      }
+    })
+
+    // for (const item of actions) {
+    //   if (!isLoading && item?.loading) isLoading = true
+    //   if (item.permission && item?.label) {
+    //     if (hasPermission(item.permission)) {
+    //       width += item?.label?.length * 12 + 36
+    //       filterAction.push(item)
+    //     }
+    //   } else if (item?.label) {
+    //     width += item?.label?.length * 12 + 36
+    //     filterAction.push(item)
+    //   }
+    // }
+  }
+
+  width = Math.max(80, width)
+  // return filterAction.length
+  //   ?
+  width += isLoading ? 20 : 0
+
+  if (collect)
+    width += 2
+
+  return filterAction.length
+    ? {
+        title: '操作',
+        key: 'opr',
+        fixed: 'right',
+        align: 'left',
+        width,
+        ...oprParams,
+        render(row, index) {
+          const vNodes = collect
+            ? (
+                <DataColumnCollet
+                  data={row}
+                  index={index}
+                  max={collect.max}
+                  options={filterAction}
+                />
+              )
+            : (
+                filterAction
+                  .map(
+                    (
+                      {
+                        isRender = () => true,
+                        onClick = null,
+                        mode = null,
+                        disabled = false,
+                        type = 'primary',
+                        ...action
+                      },
+                      i,
+                    ) => {
+                      return isRender?.(row)
+                        ? (
+                            mode === 'pop'
+                              ? (
+                                  <Pop
+                                    onClick={onClick}
+                                    row={row}
+                                    index={index}
+                                    action={action}
+                                    key={rowIndexKey(row, index) + i}
+                                  >
+                                    <NButton
+                                      text
+                                      disabled={disabled && disabled(row)}
+                                      type={disabled && disabled(row) ? 'default' : type}
+                                      {...action}
+                                    >
+                                      {typeof action?.label === 'function'
+                                        ? action?.label(row)
+                                        : action?.label}
+                                    </NButton>
+                                  </Pop>
+                                )
+                              : (
+                                  <OprButton
+                                    row={row}
+                                    action={{
+                                      ...action,
+                                      disabled,
+                                      onClick,
+                                      type,
+                                    }}
+                                    index={index}
+                                    key={rowIndexKey(row, index) + i}
+                                  />
+                                )
+                          )
+                        : undefined
+                    },
+                  )
+                  .filter(v => v)
+              )
+          return oprParams?.isRender
+            ? (
+                oprParams?.render(row)
+              )
+            : (
+                <NSpace
+                  align="center"
+                  wrap-item={false}
+                  size={18}
+                  key={rowIndexKey(row, index)}
+                >
+                  {vNodes}
+                </NSpace>
+              )
+        },
+      }
+    : undefined
+}
+
+export async function createQRCode(row, fn = null) {
+  const code = ref(null)
+  const loading = ref(false)
+  $dialog.info({
+    showIcon: false,
+    style: {
+      width: '350px',
+      height: '350px',
+    },
+    content: () => (
+      <div className="qr-box">
+        {loading.value ? <NSpin class="qr-spin" show /> : ''}
+        <div className="qr-img">
+          <NImage src={code.value} style={{ width: '100%' }} />
+        </div>
+        <div className="qr-title">{loading.value ? '' : row.name}</div>
+      </div>
+    ),
+  })
+  if (fn) {
+    loading.value = true
+    code.value = await fn()
+    loading.value = false
+  }
+  return true
+}

package/src/table/opr/useDataColumnButton.jsx

@@ -0,0 +1,56 @@
+import { NButton } from 'naive-ui'
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent(
+  ({ action, row,index }) => {
+    const {
+      onClick,
+      disabled,
+      type = 'primary',
+      loading = false,
+      label = null,
+      ...other
+    } = action
+    const oprBtnLoading = ref(false)
+    return () => (
+      <NButton
+        text
+        onClick={async () => {
+          if (onClick) {
+            try {
+              if (loading) {
+                oprBtnLoading.value = true
+              }
+              await onClick(row,index)
+            }
+            finally {
+              setTimeout(() => (oprBtnLoading.value = false), 500)
+            }
+          }
+        }}
+        disabled={disabled && disabled(row)}
+        loading={oprBtnLoading.value}
+        type={disabled && disabled(row) ? 'default' : type}
+        {...other}
+      >
+        {typeof label === 'function' ? label?.(row) : label}
+      </NButton>
+    )
+  },
+  {
+    props: {
+      action: {
+        type: [Object, null],
+        default: null,
+      },
+      row: {
+        type: [Object, null],
+        default: null,
+      },
+      index: {
+        type: Number,
+        default: 0,
+      },
+    },
+  },
+)

package/src/table/opr/useDataColumnPop.jsx

@@ -0,0 +1,57 @@
+import { NPopconfirm } from 'naive-ui'
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent(
+  ({ onClick, row, index,action }, { slots }) => {
+    const popLoading = ref(false)
+    return () => (
+      <NPopconfirm
+        positive-button-props={{
+          type: 'warning',
+          loading: popLoading.value,
+        }}
+        onPositiveClick={async () => {
+          try {
+            if (onClick) {
+              popLoading.value = true
+              await onClick(row,index)
+              popLoading.value = false
+              return true
+            }
+          }
+          catch {
+            popLoading.value = false
+            return false
+          }
+          return false
+        }}
+      >
+        {{
+          trigger: slots.default,
+          default: () =>
+            action?.popProps?.content || action?.content || '确定删除该记录？',
+        }}
+      </NPopconfirm>
+    )
+  },
+  {
+    props: {
+      onClick: {
+        type: [Function, null],
+        default: null,
+      },
+      row: {
+        type: [Object, null],
+        default: null,
+      },
+      action: {
+        type: [Object, null],
+        default: null,
+      },
+      index: {
+        type: Number,
+        default: 0,
+      },
+    },
+  },
+)