@xmszm/core 0.0.1

package/src/dialog/utils/dialog.js

@@ -0,0 +1,82 @@
+export const dialogDefaultOption = {
+  showIcon: false,
+  autoFocus: false,
+}
+
+export function initRules({
+  options = [],
+  model,
+  labelField = 'label',
+  formOpr = {},
+}) {
+  return computed(
+    () =>
+      options?.reduce((o, { fields, ...n }) => {
+        if (Array.isArray(n?.key)) {
+          n.key.forEach((v) => {
+          if(n?.required) o[String(v)] = {
+              key:v,
+              type:'any',
+              required: n?.required
+                ? typeof n?.required === 'function'
+                  ? n?.required(unref(model), { ...formOpr })
+                  : n?.required
+                : false,
+              message: n?.message || `请选择${n?.[labelField]}`,
+              fields,
+            }
+          })
+        }
+        // } else {
+       const rule =  n?.rule
+          ? typeof n?.rule !== 'function'
+            ? n?.rule
+            : n?.rule(unref(model), { ...formOpr })
+          : fields
+            ? {
+                key: n?.key,
+                  type:'any',
+                required: n?.required
+                  ? typeof n?.required === 'function'
+                    ? n?.required(unref(model), { ...formOpr })
+                    : n?.required
+                  : false,
+                message:
+                  n?.message
+                  || `请${n?.options?.length ? '选择' : '输入'}${n?.[labelField]}`,
+                fields,
+              }
+            : {
+                key: n?.key,
+                  type:'any',
+                required: n?.required
+                  ? typeof n?.required === 'function'
+                    ? n?.required(unref(model), { ...formOpr })
+                    : n?.required
+                  : false,
+                message:
+                  n?.message
+                  || `请${n?.options?.length ? '选择' : '输入'}${n?.[labelField]}`,
+                ...(Array.isArray(n?.key)
+                  ? {
+                      validator: (rule) => {
+                        console.log(rule)
+
+                        const obj = n?.key.every(v => unref(model)[v])
+                        if (!obj && n?.required)
+                          return new Error(rule?.message)
+
+                        return true
+                      },
+                    }
+                  : {}),
+              }
+              if(rule?.required){
+                o[String(n?.key)] = rule
+              }
+        // }
+
+        return o
+      }, {}) || {},
+  )
+}

package/src/enum/options.js

@@ -0,0 +1,3 @@
+export const labelField = 'name'
+
+export const valueField = 'id'

package/src/enum/sort.jsx

@@ -0,0 +1,31 @@
+import { ChevronDown, ChevronUp, Code } from '@vicons/ionicons5'
+
+export const orderEnum = {
+    ascend: {
+      title: '升序',
+      value: true,
+      Icon: <ChevronUp />,
+      fn: (listQuery, key) => {
+        listQuery.desc = true
+        listQuery.sortFieldName = key
+      },
+    },
+    descend: {
+      title: '降序',
+      value: false,
+      Icon: <ChevronDown />,
+      fn: (listQuery) => {
+        listQuery.sortFieldName = ''
+        listQuery.desc = true
+      },
+    },
+    false: {
+      title: '默认',
+      value: null,
+      Icon: <Code style="transform:rotateZ(90deg)" />,
+      fn: (listQuery) => {
+        listQuery.desc = false
+        listQuery.sortFieldName = ''
+      },
+    },
+  }

package/src/form/DataForm.vue

@@ -0,0 +1,125 @@
+<script setup>
+import { NForm } from 'naive-ui'
+import { ref, unref } from 'vue'
+
+import Options from '../options/Options.jsx'
+import {initRules} from '../dialog/utils/dialog.js'
+import { toArray } from 'core'
+const props = defineProps({
+  isNo: {
+    type: Boolean,
+    default: () => true
+  },
+  read: {
+    type: Boolean,
+    default: () => false
+  },
+  labelField: {
+    type: String,
+    default: () => 'label'
+  },
+  contentStyle: {
+    type: Object,
+    default: () => ({})
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  rules: {
+    type: Object,
+    default: () => ({})
+  },
+  formProps: {
+    type: Object,
+    default: () => ({})
+  },
+  formItemProps: {
+    type: Object,
+    default: () => ({})
+  },
+  dialog: {
+    type: Boolean,
+    default: () => false
+  }
+})
+const _options = computed(() => props.options)
+// ====== 复制 initRules 逻辑 ======
+
+const formRef = ref()
+
+const _model = defineModel('value', {
+  type: Object,
+  default: () => ({})
+})
+
+// 自动生成 rules，优先用 props.rules
+const autoRules = computed(() => {
+  return unref(
+    _options.value
+      ? initRules({
+          options: _options.value,
+          model: _model,
+          labelField: props.labelField,
+          formOpr: { formRef }
+        })
+      : {}
+  )
+})
+console.log(autoRules.value);
+
+defineExpose({
+  formRef,
+  getRule: () => autoRules.value,
+  valid: (keyCode = []) =>{
+    console.log('?? valid',keyCode);
+    return new Promise((resolve, reject) => {
+      const arrCode = toArray(keyCode)
+      formRef.value?.validate((v) => {
+        if (v) return reject(v)
+        resolve()
+      },(v)=> arrCode.length ?  arrCode.includes(v?.key) : true)
+    })
+  },
+  confirm: (fn) =>
+    new Promise((resolve, reject) => {
+      formRef.value?.validate((v) => {
+        if (v) return reject(v)
+        fn && fn(unref(_model))
+        resolve(unref(_model))
+      })
+    })
+})
+</script>
+
+<template>
+  <NForm
+    ref="formRef"
+    :model="_model"
+    :rules="props.read ? {} : autoRules"
+    label-placement="left"
+    label-width="100px"
+    require-mark-placement="right-hanging"
+    :class="
+      props.dialog
+        ? props.read
+          ? 'core-dialog-content'
+          : 'core-dialog-main'
+        : ''
+    "
+    :style="{ minHeight: props.isNo ? 'unset' : null }"
+    v-bind="props.formProps"
+  >
+    <Options
+      v-model:value="_model"
+      :form-ref="formRef"
+      :option="props.options"
+      :label-field="props.labelField"
+      :read="props.read"
+      :style="props.contentStyle"
+      :form-props="props.formProps"
+    />
+  </NForm>
+</template>
+
+<style lang="less" scoped></style>

package/src/image/ImagesUpload.vue

@@ -0,0 +1,268 @@
+<script setup lang="jsx">
+// import { FilePath } from '@/api/upload'
+import dayjs from 'dayjs'
+import { ref, watch } from 'vue'
+import { customUpload,getFileUrl } from '../utils/upload'
+
+const props = defineProps({
+  value: {
+    type: [Array, String],
+    default: () => [],
+  },
+  max: {
+    type: Number,
+    default: () => 5,
+  },
+  lib: {
+    type: Boolean,
+    default: () => true,
+  },
+  clip: {
+    type: Boolean,
+    default: () => false,
+  },
+  read: {
+    type: Boolean,
+    default: () => false,
+  },
+  size: {
+    type: Number,
+    default: () => 100,
+  },
+  width: {
+    type: Number,
+    default: () => 100,
+  },
+  height: {
+    type: Number,
+    default: () => 100,
+  },
+  mode: {
+    type: String,
+    default: () => 'fill',
+  },
+  formData:{
+    type: Object,
+    default: () => {},
+  }
+})
+
+const emit = defineEmits(['update:value', 'complete'])
+
+const FilePath = '/admin/file'
+
+const _value = ref([])
+watch(
+  () => props.value,
+  (value) => {
+    console.log('props.value', value)
+    _value.value
+      = props.max === 1
+        ? value
+          ? typeof value !== 'string'
+            ? value?.length
+              ? [
+                  {
+                    id: dayjs().valueOf(),
+                    name: `img${dayjs().valueOf()}`,
+                    url: getFileUrl(value[0]),
+                    thumbnailUrl: getFileUrl(value[0]),
+                    fullPath: value[0],
+                    status: 'finished',
+                  },
+                ]
+              : []
+            : [
+                {
+                  id: dayjs().valueOf(),
+                  name: `img${dayjs().valueOf()}`,
+                  url: getFileUrl(value),
+                  fullPath: value,
+                  thumbnailUrl: getFileUrl(value),
+                  status: 'finished',
+                },
+              ]
+          : []
+        : value?.map((v, i) => ({
+          id: dayjs().valueOf() + i,
+          name: `img${dayjs().valueOf()}`,
+          url: getFileUrl(v),
+          fullPath: v,
+          thumbnailUrl: getFileUrl(v),
+          status: 'finished',
+        })) || []
+
+    console.log('1', _value.value)
+  },
+  { immediate: true },
+)
+function customRequestMethod(...arg) {
+  sendImgRequest(arg[0])
+}
+
+async function sendImgRequest({ file, onFinish, onError, onProgress }, fn) {
+  const formData = new FormData()
+  if (file.status === 'pending') {
+    formData.append('file', file.file)
+    if(props.formData && Object.keys(props.formData).length){
+      Object.keys(props.formData).forEach(key => {
+        formData.append(key, props.formData[key])
+      })
+    }
+    customUpload({
+      url: FilePath,
+      data: formData,
+      method: 'post',
+      onUploadProgress: ({ percent }) => onProgress({ percent }),
+    })
+      .then((res) => {
+        const { url } = res.data
+        file.url = getFileUrl(url)
+        file.fullPath = url
+        file.thumbnailUrl = getFileUrl(url)
+        // onError()
+        onFinish()
+        onSubmit()
+      })
+      .catch(() => {
+        file = null
+        onError()
+      })
+      .finally(() => {
+        fn && fn()
+      })
+  }
+}
+
+function onSubmit() {
+  console.log('onSubmit', _value.value)
+
+  const arr = _value.value.reduce((o, n) => {
+    if (n.status === 'finished' && n?.fullPath) {
+      o.push(n.fullPath)
+    }
+    return o
+  }, [])
+  if (props.max === 1 && arr.length === 1) {
+    emit('update:value', arr[0])
+  }
+  else if (arr.length) {
+    emit('update:value', arr)
+  }
+  else {
+    emit('update:value', props.max === 1 ? null : [])
+  }
+}
+</script>
+
+<template>
+  <n-space align="end" :wrap-item="false">
+    <n-upload
+      v-model:file-list="_value"
+      accept=".jpeg,.jpg,.png"
+      list-type="image-card"
+      :custom-request="customRequestMethod"
+      :max="
+        props.read
+          ? Array.isArray(props.value)
+            ? props.value.length
+            : 1
+          : props.max
+      "
+      :show-retry-button="false"
+      :show-remove-button="!props.read"
+      class="upload-box"
+      :style="{
+        ...(props.size
+          ? { '--image-w': `${props.size}px`, '--image-h': `${props.size}px` }
+          : {
+            '--image-w': `${props.width}px`,
+            '--image-h': `${props.height}px`,
+          }),
+        '--image-mode': props.mode,
+      }"
+      @finish="
+        () => {
+          onSubmit();
+          emit('complete');
+        }
+      "
+      @remove="
+        (_, index) => {
+          _value.splice(index, 1);
+          onSubmit();
+
+          return false;
+        }
+      "
+    />
+  </n-space>
+</template>
+
+<style scoped lang="less">
+.upload-box {
+  width: auto;
+  :deep(.n-upload-file-list.n-upload-file-list--grid) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  :deep(.n-upload-file.n-upload-file--image-card-type) {
+    width: var(--image-w);
+    height: var(--image-h);
+
+    & .n-image img {
+      object-fit: var(--image-mode) !important;
+    }
+  }
+  :deep(.n-upload-trigger--image-card) {
+    width: var(--image-w);
+    height: var(--image-h);
+  }
+
+  :deep(.n-upload-file--error-status:not(:hover)),
+  :deep(.n-upload-file--info-status:not(:hover)) {
+    .n-upload-file-info {
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 5;
+        display: block;
+        background-color: rgba(0, 0, 0, 0.4);
+      }
+    }
+  }
+  :deep(.n-upload-file--error-status:not(:hover)) {
+    &::after {
+      font-size: 12px;
+      white-space: nowrap;
+      content: '上传失败~';
+      position: absolute;
+      color: rgba(255, 255, 255, 0.75);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 5;
+      display: block;
+    }
+  }
+  :deep(.n-upload-file--info-status:not(:hover)) {
+    &::after {
+      font-size: 12px;
+      white-space: nowrap;
+      content: '加载中~';
+      position: absolute;
+      color: rgba(255, 255, 255, 0.75);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 5;
+      display: block;
+    }
+  }
+}
+</style>

package/src/image/SvgIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  color: {
+    type: String,
+    default: '',
+  },
+})
+const iconName = computed(() => `#svg-${props.name}`)
+</script>
+
+<template>
+  <svg class="svg-icon" v-bind="$attrs" :style="{ color }" aria-hidden>
+    <use :xlink:href="iconName" :fill="color" />
+  </svg>
+</template>
+
+<style scoped>
+.svg-icon {
+  width: inherit;
+  height: inherit;
+  fill: currentColor;
+  vertical-align: middle;
+}
+</style>

package/src/index.js

@@ -0,0 +1,46 @@
+export { commonDialogMethod } from './dialog/commonDialog'
+
+export { default as DataForm } from './form/DataForm.vue'
+export {
+  getAllOptions,
+  getOptions,
+  setupOptions,
+} from './options/defaultOptions'
+export { default as Options } from './options/Options.jsx'
+export { default as CommonQuery } from './query/CommonQuery.vue'
+
+export { createActionColumnJsx } from './table/opr/useDataColumn'
+
+export { default as OprButton } from './table/opr/useDataColumnButton.jsx'
+
+export { default as Pop } from './table/opr/useDataColumnPop.jsx'
+
+export { toArray } from './utils/array'
+
+export {
+  cellectChildenPermission,
+  handleParams,
+  useApiConfig,
+} from './utils/auth'
+
+export { ObjectToArray } from './utils/object'
+
+export { ArrayToObject } from './utils/array'
+
+
+
+export { customUpload, registryUpload } from './utils/upload'
+
+export { default as DataTable } from './table/DataTable.vue'
+
+
+export { labelField as globalLabelField,valueField as globalValueField } from './enum/options'
+
+
+export {initRules} from './dialog/utils/dialog.js'
+
+export { ellipsis } from './table/utils/ellipsis.js'
+
+export { initRouteMeta } from './plugin/vite/initRouteMeta'
+
+export { orderEnum } from './enum/sort'

package/src/list/useList.jsx

@@ -0,0 +1,99 @@
+import { computed, ref, unref, watch } from 'vue'
+
+export function useList(source = [], filterOptions = []) {
+  const loading = ref(false)
+  const data = ref([])
+  const sourceList = computed(() => unref(source))
+
+  const model = ref({
+    andQuery: {},
+    likeQuery: {},
+  })
+
+  function onSearch() {
+    loading.value = true
+    console.log(unref(model))
+
+    data.value = handleFilterOption(
+      handleFilterValue(unref(filterOptions), unref(model)),
+      unref(source),
+    )
+    console.log(data.value)
+
+    loading.value = false
+  }
+
+  function initData() {
+    data.value = sourceList.value
+  }
+
+  watch(
+    () => sourceList.value.length,
+    () => {
+      initData()
+      console.log('data')
+    },
+    {
+      once: true,
+    },
+  )
+
+  return {
+    loading,
+    data,
+    model,
+    initData,
+    onSearch,
+    onClear: () => {
+      model.value = {}
+      onSearch()
+    },
+  }
+}
+
+export const matchMethod = {
+  andQuery: (data, value) =>
+    Array.isArray(value) ? value.includes(data) : data === value,
+  likeQuery: (data, value) => data?.indexOf(value) > -1,
+}
+
+export function handleFilterValue(runOptions, model) {
+  console.log('handleFilterValue', runOptions)
+
+  return runOptions
+    .map((v) => {
+      const filedValue = v?.key || v?.value
+      const value = v?.queryType
+        ? model?.[v?.queryType]?.[filedValue]
+        : model?.[filedValue]
+      return typeof value === 'number' || value
+        ? {
+            ...v,
+            key: filedValue,
+            type: v?.queryType,
+            value,
+          }
+        : undefined
+    })
+    .filter(v => v)
+}
+
+export function handleFilterOption(runOption, options) {
+  console.log('runOption', runOption)
+
+  if (runOption.length) {
+    return options?.filter(item =>
+      runOption.length === 1
+        ? matchMethod?.[runOption?.[0].type](
+          item?.[runOption?.[0]?.key],
+          runOption?.[0]?.value,
+        )
+        : runOption?.every(v =>
+          matchMethod?.[v.type](item?.[v.key], v.value),
+        ),
+    )
+  }
+  else {
+    return options
+  }
+}