wui-components-v2 1.1.70 → 1.1.72

package/composables/useColorGenerator.ts

@@ -1,221 +1,221 @@
-import { computed, ref } from 'vue'
-import {
-  generateHarmoniousColors,
-  generateIconColors,
-  generateRandomColorFromHex,
-  getColorVariant,
-  hexToRgb,
-  rgbToHex,
-} from '../utils/index'
-import { useManualTheme } from './useManualTheme'
-// 定义颜色对象的类型
-interface ColorObject {
-  hex: string
-  rgb: { r: number, g: number, b: number }
-  hsl: { h: number, s: number, l: number }
-}
-
-/**
- * Vue 3 Composition API: 颜色生成器
- * @param {string} baseHex - 基础十六进制颜色，如 #2164F3
- * @param {object} options - 配置选项
- * @returns {object} 颜色相关的方法和响应式数据
- */
-export function useColorGenerator(options = {}) {
-  // 默认配置
-  const defaultOptions = {
-    hueRange: 60,
-    saturationRange: 0,
-    lightnessRange: 0,
-    count: 8,
-    autoRegenerate: true,
-  }
-
-  const config = { ...defaultOptions, ...options }
-  const {
-    currentThemeColor,
-  } = useManualTheme()
-  // 响应式数据
-  const baseColor = computed(() => currentThemeColor.value.primary)
-  const hueRange = ref(config.hueRange)
-  const saturationRange = ref(config.saturationRange)
-  const lightnessRange = ref(config.lightnessRange)
-  const colors = ref<ColorObject[]>([])
-  const currentRandomColor = ref<ColorObject | null>(null)
-  const colorVariants = ref<Record<string, string>>({})
-
-  /**
-   * 生成基础颜色的RGB对象
-   */
-  const baseRgb = computed(() => hexToRgb(baseColor.value))
-
-  /**
-   * 生成单个随机颜色
-   */
-  const generateRandomColor = () => {
-    currentRandomColor.value = generateRandomColorFromHex(baseColor.value, {
-      hueRange: hueRange.value,
-      saturationRange: saturationRange.value,
-      lightnessRange: lightnessRange.value,
-    })
-
-    return currentRandomColor.value
-  }
-
-  /**
-   * 生成一组协调的颜色
-   */
-  const generateColors = (count = config.count) => {
-    colors.value = generateHarmoniousColors(baseColor.value, count, {
-      hueRange: hueRange.value,
-      saturationRange: saturationRange.value,
-      lightnessRange: lightnessRange.value,
-      colorType: '',
-    })
-
-    return colors.value
-  }
-
-  /**
-   * 生成图标颜色（使用智能算法）
-   */
-  const generateSmartIconColors = (count = config.count) => {
-    colors.value = generateIconColors(baseColor.value, count)
-    return colors.value
-  }
-
-  /**
-   * 生成颜色变体
-   */
-  const generateColorVariants = () => {
-    const variants = ['lighter', 'light', 'dark', 'darker', 'muted']
-    colorVariants.value = {}
-
-    variants.forEach((variant) => {
-      colorVariants.value[variant] = getColorVariant(baseColor.value, variant)
-    })
-
-    return colorVariants.value
-  }
-
-  /**
-   * 更新基础颜色
-   */
-  // const updateBaseColor = (newHex: string) => {
-  //     baseColor.value = newHex;
-  //     if (config.autoRegenerate) {
-  //         generateRandomColor();
-  //         generateColors();
-  //     }
-  // };
-
-  /**
-   * 更新配置
-   */
-  const updateConfig = (newConfig: { hueRange: number | undefined, saturationRange: number | undefined, lightnessRange: number | undefined }) => {
-    if (newConfig.hueRange !== undefined) {
-      hueRange.value = newConfig.hueRange
-    }
-    if (newConfig.saturationRange !== undefined) {
-      saturationRange.value = newConfig.saturationRange
-    }
-    if (newConfig.lightnessRange !== undefined) {
-      lightnessRange.value = newConfig.lightnessRange
-    }
-
-    if (config.autoRegenerate) {
-      generateRandomColor()
-      generateColors()
-    }
-  }
-
-  /**
-   * 获取CSS变量对象，方便在CSS中使用
-   */
-  const cssVariables = computed(() => {
-    const vars: Record<string, string> = {
-      '--primary': baseColor.value,
-      '--primary-rgb': `${baseRgb.value.r}, ${baseRgb.value.g}, ${baseRgb.value.b}`,
-    }
-
-    // 添加颜色变体
-    Object.entries(colorVariants.value).forEach(([key, value]) => {
-      vars[`--primary-${key}`] = value as string
-    })
-
-    // 添加生成的颜色
-    colors.value.forEach((color, index) => {
-      vars[`--color-${index + 1}`] = color.hex
-      vars[`--color-${index + 1}-rgb`] = `${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}`
-    })
-
-    return vars
-  })
-
-  /**
-   * 应用到DOM元素的样式
-   */
-  const applyStyleToElement = (element: { style: { color: any, setProperty: (arg0: string, arg1: any) => void } }, colorObj: { hex: any }) => {
-    if (element && colorObj) {
-      element.style.color = colorObj.hex
-      element.style.setProperty('--current-color', colorObj.hex)
-    }
-  }
-
-  // 初始化
-  generateRandomColor()
-  generateColors()
-  generateColorVariants()
-
-  return {
-    // 响应式数据
-    baseColor,
-    baseRgb,
-    hueRange,
-    saturationRange,
-    lightnessRange,
-    colors,
-    currentRandomColor,
-    colorVariants,
-    cssVariables,
-
-    // 计算属性
-    currentHex: computed(() =>
-      currentRandomColor.value?.hex || baseColor.value,
-    ),
-
-    // 方法
-    generateRandomColor,
-    generateColors,
-    generateSmartIconColors,
-    generateColorVariants,
-    // updateBaseColor,
-    updateConfig,
-    applyStyleToElement,
-
-    // 工具方法
-    hexToRgb,
-    rgbToHex,
-  }
-}
-
-/**
- * 快速使用的简易版本
- * @param {string} baseHex - 基础颜色
- * @returns {object} 简化的颜色生成器
- */
-export function useQuickColorGenerator() {
-  const generator = useColorGenerator({
-    count: 5,
-    autoRegenerate: false,
-  })
-
-  // 立即生成一次
-  generator.generateSmartIconColors()
-
-  return {
-    colors: generator.colors,
-    getRandomColor: generator.generateRandomColor,
-    refreshColors: () => generator.generateSmartIconColors(5),
-  }
-}
+import { computed, ref } from 'vue'
+import {
+  generateHarmoniousColors,
+  generateIconColors,
+  generateRandomColorFromHex,
+  getColorVariant,
+  hexToRgb,
+  rgbToHex,
+} from '../utils/index'
+import { useManualTheme } from './useManualTheme'
+// 定义颜色对象的类型
+interface ColorObject {
+  hex: string
+  rgb: { r: number, g: number, b: number }
+  hsl: { h: number, s: number, l: number }
+}
+
+/**
+ * Vue 3 Composition API: 颜色生成器
+ * @param {string} baseHex - 基础十六进制颜色，如 #2164F3
+ * @param {object} options - 配置选项
+ * @returns {object} 颜色相关的方法和响应式数据
+ */
+export function useColorGenerator(options = {}) {
+  // 默认配置
+  const defaultOptions = {
+    hueRange: 60,
+    saturationRange: 0,
+    lightnessRange: 0,
+    count: 8,
+    autoRegenerate: true,
+  }
+
+  const config = { ...defaultOptions, ...options }
+  const {
+    currentThemeColor,
+  } = useManualTheme()
+  // 响应式数据
+  const baseColor = computed(() => currentThemeColor.value.primary)
+  const hueRange = ref(config.hueRange)
+  const saturationRange = ref(config.saturationRange)
+  const lightnessRange = ref(config.lightnessRange)
+  const colors = ref<ColorObject[]>([])
+  const currentRandomColor = ref<ColorObject | null>(null)
+  const colorVariants = ref<Record<string, string>>({})
+
+  /**
+   * 生成基础颜色的RGB对象
+   */
+  const baseRgb = computed(() => hexToRgb(baseColor.value))
+
+  /**
+   * 生成单个随机颜色
+   */
+  const generateRandomColor = () => {
+    currentRandomColor.value = generateRandomColorFromHex(baseColor.value, {
+      hueRange: hueRange.value,
+      saturationRange: saturationRange.value,
+      lightnessRange: lightnessRange.value,
+    })
+
+    return currentRandomColor.value
+  }
+
+  /**
+   * 生成一组协调的颜色
+   */
+  const generateColors = (count = config.count) => {
+    colors.value = generateHarmoniousColors(baseColor.value, count, {
+      hueRange: hueRange.value,
+      saturationRange: saturationRange.value,
+      lightnessRange: lightnessRange.value,
+      colorType: '',
+    })
+
+    return colors.value
+  }
+
+  /**
+   * 生成图标颜色（使用智能算法）
+   */
+  const generateSmartIconColors = (count = config.count) => {
+    colors.value = generateIconColors(baseColor.value, count)
+    return colors.value
+  }
+
+  /**
+   * 生成颜色变体
+   */
+  const generateColorVariants = () => {
+    const variants = ['lighter', 'light', 'dark', 'darker', 'muted']
+    colorVariants.value = {}
+
+    variants.forEach((variant) => {
+      colorVariants.value[variant] = getColorVariant(baseColor.value, variant)
+    })
+
+    return colorVariants.value
+  }
+
+  /**
+   * 更新基础颜色
+   */
+  // const updateBaseColor = (newHex: string) => {
+  //     baseColor.value = newHex;
+  //     if (config.autoRegenerate) {
+  //         generateRandomColor();
+  //         generateColors();
+  //     }
+  // };
+
+  /**
+   * 更新配置
+   */
+  const updateConfig = (newConfig: { hueRange: number | undefined, saturationRange: number | undefined, lightnessRange: number | undefined }) => {
+    if (newConfig.hueRange !== undefined) {
+      hueRange.value = newConfig.hueRange
+    }
+    if (newConfig.saturationRange !== undefined) {
+      saturationRange.value = newConfig.saturationRange
+    }
+    if (newConfig.lightnessRange !== undefined) {
+      lightnessRange.value = newConfig.lightnessRange
+    }
+
+    if (config.autoRegenerate) {
+      generateRandomColor()
+      generateColors()
+    }
+  }
+
+  /**
+   * 获取CSS变量对象，方便在CSS中使用
+   */
+  const cssVariables = computed(() => {
+    const vars: Record<string, string> = {
+      '--primary': baseColor.value,
+      '--primary-rgb': `${baseRgb.value.r}, ${baseRgb.value.g}, ${baseRgb.value.b}`,
+    }
+
+    // 添加颜色变体
+    Object.entries(colorVariants.value).forEach(([key, value]) => {
+      vars[`--primary-${key}`] = value as string
+    })
+
+    // 添加生成的颜色
+    colors.value.forEach((color, index) => {
+      vars[`--color-${index + 1}`] = color.hex
+      vars[`--color-${index + 1}-rgb`] = `${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}`
+    })
+
+    return vars
+  })
+
+  /**
+   * 应用到DOM元素的样式
+   */
+  const applyStyleToElement = (element: { style: { color: any, setProperty: (arg0: string, arg1: any) => void } }, colorObj: { hex: any }) => {
+    if (element && colorObj) {
+      element.style.color = colorObj.hex
+      element.style.setProperty('--current-color', colorObj.hex)
+    }
+  }
+
+  // 初始化
+  generateRandomColor()
+  generateColors()
+  generateColorVariants()
+
+  return {
+    // 响应式数据
+    baseColor,
+    baseRgb,
+    hueRange,
+    saturationRange,
+    lightnessRange,
+    colors,
+    currentRandomColor,
+    colorVariants,
+    cssVariables,
+
+    // 计算属性
+    currentHex: computed(() =>
+      currentRandomColor.value?.hex || baseColor.value,
+    ),
+
+    // 方法
+    generateRandomColor,
+    generateColors,
+    generateSmartIconColors,
+    generateColorVariants,
+    // updateBaseColor,
+    updateConfig,
+    applyStyleToElement,
+
+    // 工具方法
+    hexToRgb,
+    rgbToHex,
+  }
+}
+
+/**
+ * 快速使用的简易版本
+ * @param {string} baseHex - 基础颜色
+ * @returns {object} 简化的颜色生成器
+ */
+export function useQuickColorGenerator() {
+  const generator = useColorGenerator({
+    count: 5,
+    autoRegenerate: false,
+  })
+
+  // 立即生成一次
+  generator.generateSmartIconColors()
+
+  return {
+    colors: generator.colors,
+    getRandomColor: generator.generateRandomColor,
+    refreshColors: () => generator.generateSmartIconColors(5),
+  }
+}

package/composables/useCompanyFieldFilter.ts

@@ -8,7 +8,7 @@ export function useCompanyFieldFilter(
   fieldGroup: () => Groups | undefined,
   model: Ref<any>,
   enabled: boolean = true,
-  companyFieldSourceId: string = COMPANY_FIELD_SOURCE_ID,
+  companyFieldSourceId: string = COMPANY_FIELD_SOURCE_ID
 ) {
   const deliveryCompanySourceId = ref<string>('')
   const selectedCompany = ref<string>('')
@@ -16,11 +16,11 @@ export function useCompanyFieldFilter(
   if (enabled) {
     watch(
       () => fieldGroup()?.fields,
-      (newFields) => {
+      newFields => {
         const companyField: any = newFields?.find((item: any) => item.sourceId === companyFieldSourceId) || {}
         deliveryCompanySourceId.value = companyField.sourceId || ''
       },
-      { deep: true, immediate: true },
+      { deep: true, immediate: true }
     )
 
     // 直接监听 model 中对应字段的值变化
@@ -33,59 +33,61 @@ export function useCompanyFieldFilter(
 
     watch(
       companyFieldValue,
-      (newValue) => {
+      newValue => {
         selectedCompany.value = newValue ? String(newValue).substring(0, 2) : ''
       },
-      { immediate: true },
+      { immediate: true }
     )
   }
 
-  const formatFieldsItem=(company:string,item:any)=>{
-     const transDefaultValue = item.usableRuleCriterias?.[0]?.transDefaultValue||''
-      const isHidden=item?.unusableMode==='hidden'
-      const values = transDefaultValue.split(',').map(v => v.trim())
-    if(!company){
+  const formatFieldsItem = (company: string, item: any) => {
+    const transDefaultValue = item.usableRuleCriteria?.[0]?.transDefaultValue || ''
+    const isHidden = item?.unusableMode === 'hidden'
+    const values = transDefaultValue.split(',').map(v => v.trim())
+    if (!company) {
       return {
         ...item,
-        hidden:isHidden,
+        hidden: isHidden,
       }
-    }else{
-
+    } else {
       return {
         ...item,
-        hidden: values.some(v => v.includes(company))?false:item.hidden,
+        hidden: values.some(v => v.includes(company)) ? false : item.hidden,
       }
-
     }
   }
   const filteredFields = computed(() => {
     const company = selectedCompany.value
     const allFields = fieldGroup()?.fields
-    if (!allFields)
-      return []
+    if (!allFields) return []
     const formattedFields = allFields.filter((item: any) => {
       // 如果没有选中公司，所有字段都显示
       if (!company) {
         return true
       }
-      // 检查 usableRuleCriterias 是否存在且有值
-      if (!item.usableRuleCriterias || item.usableRuleCriterias.length === 0) {
+      // 检查 usableRuleCriteria 是否存在且有值
+      if (!item.usableRuleCriteria || item.usableRuleCriteria.length === 0) {
         return true
       }
       // 获取 transDefaultValue 并检查是否包含选中的公司
-      const transDefaultValue = item.usableRuleCriterias?.[0]?.transDefaultValue
+      const transDefaultValue = item.usableRuleCriteria?.[0]?.transDefaultValue
       if (typeof transDefaultValue === 'string') {
         const values = transDefaultValue.split(',').map(v => v.trim())
         // console.log('transDefaultValue', company, 'values', values,values.includes(company))
-        return values.some(v => v.includes(company) )
+        return values.some(v => v.includes(company))
       }
       return true
     })
+    console.log('formattedFields', formattedFields)
     return formattedFields.map((item: any) => formatFieldsItem(company, item))
   })
-  watch(filteredFields, (val) => {
-    // console.log('filteredFields变化了', val, 'selectedCompany:', selectedCompany.value)
-  }, { immediate: true })
+  watch(
+    filteredFields,
+    val => {
+      // console.log('filteredFields变化了', val, 'selectedCompany:', selectedCompany.value)
+    },
+    { immediate: true }
+  )
 
   return { filteredFields, selectedCompany }
 }

package/composables/useEnumes.ts

@@ -1,43 +1,43 @@
-import { ref } from 'vue'
-import { enums } from '../api/page'
-import ControlTypeSupportor from '../utils/control-type-supportor'
-import type { Enums } from '../type'
-
-export function useEnums({ config }: { config: any }) {
-  const enumColumn = ref<Enums>({})
-  // 获取枚举
-  async function getEnums() {
-    try {
-      const params: string[] = []
-      const criteria = config.value?.criteria ?? []
-      const columns = config.value.columns ?? []
-      const writes = config.value.rowActions?.reduce((acc: any, cur: any) => {
-        return [...acc, ...cur.writes]
-      }, []) || []
-      columns.forEach((item: any) => {
-        if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
-          params.push(`mstrucIds=${item.mstrucId}`)
-        }
-      })
-      criteria.forEach((item: any) => {
-        if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
-          params.push(`mstrucIds=${item.mstrucId}`)
-        }
-      })
-      writes.forEach((item: any) => {
-        if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
-          params.push(`mstrucIds=${item.mstrucId}`)
-        }
-      })
-      if (!params.length)
-        return
-      const res = await enums(params.join('&'))
-      enumColumn.value = res.enumMap || {}
-    }
-    catch (error) {
-      console.log('error:', error)
-    }
-  }
-
-  return { getEnums, enumColumn }
-}
+import { ref } from 'vue'
+import { enums } from '../api/page'
+import ControlTypeSupportor from '../utils/control-type-supportor'
+import type { Enums } from '../type'
+
+export function useEnums({ config }: { config: any }) {
+  const enumColumn = ref<Enums>({})
+  // 获取枚举
+  async function getEnums() {
+    try {
+      const params: string[] = []
+      const criteria = config.value?.criteria ?? []
+      const columns = config.value.columns ?? []
+      const writes = config.value.rowActions?.reduce((acc: any, cur: any) => {
+        return [...acc, ...cur.writes]
+      }, []) || []
+      columns.forEach((item: any) => {
+        if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
+          params.push(`mstrucIds=${item.mstrucId}`)
+        }
+      })
+      criteria.forEach((item: any) => {
+        if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
+          params.push(`mstrucIds=${item.mstrucId}`)
+        }
+      })
+      writes.forEach((item: any) => {
+        if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
+          params.push(`mstrucIds=${item.mstrucId}`)
+        }
+      })
+      if (!params.length)
+        return
+      const res = await enums(params.join('&'))
+      enumColumn.value = res.enumMap || {}
+    }
+    catch (error) {
+      console.log('error:', error)
+    }
+  }
+
+  return { getEnums, enumColumn }
+}