@handaotech-design/bom 0.0.16

package/src/hooks/use-ppboms.ts

@@ -0,0 +1,97 @@
+import { ref } from 'vue'
+import { convertBomDataToTree, getConfig } from '../utils'
+import { YesNo } from '../models'
+
+const ppbomPageConfigCode = 'PPBOM_PAGE'
+
+export enum QueryType {
+  ALL = 'ALL',
+  MODEL_ESN = 'MODEL_ESN',
+}
+
+interface UsePpbomsParams {
+  host: string
+  appId: string
+  appSecret: string
+  queryType?: QueryType
+  options?: Record<string, any>
+}
+
+export const UsePpboms = (params: UsePpbomsParams) => {
+  const { host, appId, appSecret, queryType, options } = params
+  const loading = ref<boolean>(false)
+  const data = ref<any>()
+  const treeConfig = ref<any>()
+  const layoutConfig = ref<any>()
+
+  const queryBoms = async () => {
+    const body = {
+      page: 1,
+      pageSize: Number.MAX_SAFE_INTEGER,
+      ...(options ?? {}),
+    }
+    const response = await fetch(`http://${host}/api/public/v2/ppboms/query/all`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CONSUMER-ID': appId,
+        'Authorization': `Bearer ${appSecret}`,
+      },
+      body: JSON.stringify(body),
+    })
+    return response.json()
+  }
+
+  const queryBomsByModelEsn = async () => {
+    const body = {
+      page: 1,
+      pageSize: Number.MAX_SAFE_INTEGER,
+      forceSettle: YesNo.YES,
+      lookupOnly: YesNo.YES,
+      ...(options ?? {}),
+    }
+    const response = await fetch(`http://${host}/api/public/v2/ppboms/query/by-model-esn`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CONSUMER-ID': appId,
+        'Authorization': `Bearer ${appSecret}`,
+      },
+      body: JSON.stringify(body),
+    })
+    return response.json()
+  }
+
+  const getData = async () => {
+    switch (queryType) {
+      case QueryType.MODEL_ESN:
+        return await queryBomsByModelEsn()
+      default:
+        return await queryBoms()
+    }
+  }
+
+  const getDataAndConfig = async () => {
+    try {
+      loading.value = true
+      const dataResp = await getData()
+      const configResp = await getConfig(host, ppbomPageConfigCode, appId, appSecret)
+      loading.value = false
+      const props = configResp.config.props
+      data.value = convertBomDataToTree(dataResp.data.items, props.content.tree.nodeConfig.rule)
+      treeConfig.value = props.content.tree
+      layoutConfig.value = props.content.tree.layout
+    }
+    finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    data,
+    layoutConfig,
+    treeConfig,
+    loading,
+    getDataAndConfig,
+  }
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+import installer from './defaults'
+export * from './components'
+export * from './hooks'
+export * from './models'
+export * from './utils'
+
+export const install = installer.install
+
+export default installer

package/src/models/bom.ts

@@ -0,0 +1,43 @@
+import type { BaseRule } from '../utils'
+import type { YesNo } from './common'
+
+// eslint-disable-next-line no-template-curly-in-string
+export const defaultTitleTemplate = '${code}'
+
+export interface BomNodeTitleConfig {
+  template: string
+}
+
+export interface WorkBenchLayoutConfig {
+  maxLeftWidth: number
+}
+
+export interface BomTreeNodeConfig {
+  title?: BomNodeTitleConfig
+  selectable?: YesNo
+  icon?: string
+}
+
+export interface BomLocalFilter {
+  placeholder?: string
+}
+
+export interface BomTreeConfig {
+  filter?: BomLocalFilter
+  nodeConfig: {
+    rule: BaseRule<BomTreeNodeConfig>
+  }
+}
+
+export interface BomNode {
+  id: string
+  key: string
+  code: string
+  version: string
+  name: string
+  qty: number
+  children?: BomNode[]
+  businessType: string
+  raw: Record<string, any>
+  [key: string]: any
+}

package/src/models/common.ts

@@ -0,0 +1,6 @@
+export enum YesNo {
+  YES = 'YES',
+  NO = 'NO',
+}
+
+export type Optional<T> = T | undefined | null

package/src/models/index.ts

@@ -0,0 +1,2 @@
+export * from './common'
+export * from './bom'

package/src/shared/keys.ts

@@ -0,0 +1 @@
+export const INSTALLED_KEY = Symbol('INSTALLED_KEY')

package/src/shared/make-installer.ts

@@ -0,0 +1,21 @@
+import type { App, Plugin } from '@vue/runtime-core'
+import { INSTALLED_KEY } from './keys'
+
+export const makeInstaller = (components: Plugin[] = []) => {
+  const install = (app: App) => {
+    // @ts-expect-error mark app as having installer flag
+    if (app[INSTALLED_KEY]) {
+      return
+    }
+    // @ts-expect-error set installer flag on app instance
+    app[INSTALLED_KEY] = true
+
+    components.forEach(c => app.use(c))
+
+    // if (options) provideGlobalConfig(options, app, true)
+  }
+
+  return {
+    install,
+  }
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue';
+    const component: DefineComponent<Record<string,unknown>, Record<string,unknown>, unknown>;
+    export default component;
+}

package/src/types/components.d.ts

@@ -0,0 +1,17 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    BomTree: typeof import('./../components/bom-tree/index.vue')['default']
+    BomWorkbench: typeof import('./../components/bom-workbench/index.vue')['default']
+    GrayInput: typeof import('./../components/gray-input/index.vue')['default']
+    LeftRight: typeof import('./../components/left-right/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

package/src/utils/bom.ts

@@ -0,0 +1,33 @@
+import * as _ from 'lodash-es'
+import type { BomNode, BomTreeNodeConfig } from '../models'
+import { YesNo, defaultTitleTemplate } from '../models'
+import type { BaseRule } from './rule-engine'
+import { RuleEngine } from './rule-engine'
+import { genText } from './template'
+
+const defaultTreeNodeConfig: BomTreeNodeConfig = {
+  title: {
+    template: defaultTitleTemplate,
+  },
+}
+
+export const convertBomDataToTree = (treeData: BomNode[], nodeConfigRule: BaseRule<BomTreeNodeConfig>) => {
+  const ruleEngine = new RuleEngine<BomTreeNodeConfig>(nodeConfigRule)
+  const traverse = (nodes: BomNode[] = []) => {
+    for (const node of nodes) {
+      const nodeConfig = ruleEngine.matchOne({ bomNode: node }, defaultTreeNodeConfig)
+      const titleTemplate = nodeConfig?.title?.template ?? defaultTitleTemplate
+      Object.assign(node, {
+        key: node.key,
+        title: genText(node, titleTemplate),
+        selectable: nodeConfig?.selectable === YesNo.YES,
+        icon: nodeConfig?.icon,
+      })
+      if (!_.isEmpty(node.children)) {
+        traverse(node.children)
+      }
+    }
+  }
+  traverse(treeData)
+  return treeData
+}

package/src/utils/config.ts

@@ -0,0 +1,11 @@
+export const getConfig = async (host: string, code: string, appId: string, appSecret: string) => {
+  const response = await fetch(`http://${host}/api/public/v2/business-configs/${code}`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CONSUMER-ID': appId,
+      'Authorization': `Bearer ${appSecret}`,
+    },
+  })
+  return await response.json()
+}

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './bom'
+export * from './rule-engine'
+export * from './template'
+export * from './config'

package/src/utils/rule-engine.ts

@@ -0,0 +1,83 @@
+import type { Optional } from '../models/common'
+
+export type RuleCondition = 'default' | 'always' | string | LogicExpression
+
+export interface LogicExpression {
+  // 以后可扩展
+  logic: any
+  conditions: any[]
+}
+
+export interface BaseRule<T> {
+  cases: BaseCase<T>[]
+}
+
+export interface BaseCase<T> {
+  key?: string
+  condition: RuleCondition
+  result: T
+}
+
+export class RuleEngine<T> {
+  private readonly rule: BaseRule<T>
+
+  constructor(rule: BaseRule<T>) {
+    this.rule = rule
+  }
+
+  matchOne(context: any, defaultResult?: T): Optional<T> | T {
+    let defaultRule: BaseCase<T> | undefined
+
+    for (const caseItem of this.rule.cases) {
+      const cond = caseItem.condition
+      if (cond === 'default') {
+        defaultRule = caseItem
+        continue
+      }
+      if (cond === 'always' || (typeof cond === 'string' && evaluate(cond, context))) {
+        return caseItem.result
+      }
+      // LogicExpression 暂不支持
+    }
+
+    if (defaultRule) {
+      return defaultRule.result
+    }
+    return defaultResult
+  }
+
+  matchMany(context: any, defaultResult?: T): T[] {
+    const results: T[] = []
+    let defaultRule: BaseCase<T> | undefined
+
+    for (const caseItem of this.rule.cases) {
+      const cond = caseItem.condition
+      if (cond === 'default') {
+        defaultRule = caseItem
+        continue
+      }
+      if (cond === 'always' || (typeof cond === 'string' && evaluate(cond, context))) {
+        results.push(caseItem.result)
+      }
+      // LogicExpression 暂不支持
+    }
+
+    if (results.length > 0) {
+      return results
+    }
+    const fallback = defaultRule?.result ?? defaultResult
+    return fallback ? [fallback] : []
+  }
+}
+
+// TODO 安全的表达式求值器
+function evaluate(expr: string, context: any): boolean {
+  try {
+    // eslint-disable-next-line no-new-func
+    const func = new Function('context', `with(context) { return ${expr}; }`)
+    return Boolean(func(context))
+  }
+  catch {
+    return false
+  }
+}

package/src/utils/template.ts

@@ -0,0 +1,13 @@
+import * as _ from 'lodash-es'
+
+export function genText(data: Record<string, any>, templateStr: string, defaultText?: string) {
+  const compiled = _.template(templateStr)
+  let str: string
+  try {
+    str = compiled(data)
+  }
+  catch (e) { // 模板变量找不到，暂时处理
+    str = defaultText ?? '--'
+  }
+  return str
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["DOM", "esnext"]
+  },
+  "strict": false
+}

package/unocss.config.ts

@@ -0,0 +1,55 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
+import type { UserConfig } from 'unocss'
+const config: UserConfig = {
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons({
+      mode: 'auto',
+      autoInstall: false,
+      collections: {
+        icon: FileSystemIconLoader(
+          'src/assets/icons',
+          (svg) => {
+            if (svg.includes('class="keep"')) {
+              return svg
+            }
+            svg = svg.replace(/fill=".*"/, 'fill="currentColor"')
+            return svg
+          },
+        ),
+      },
+      customizations: {
+        customize(props) {
+          props.width = '1em'
+          props.height = '1em'
+          return props
+        },
+      },
+    }),
+    presetTypography(),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+  safelist: [ // 声明icon，避免动态加载，不能显示的问题
+    'i-icon-process-plan',
+    'i-icon-process-plan-selected',
+    'i-icon-process-path',
+    'i-icon-process-path-selected',
+    'i-icon-operation',
+    'i-icon-operation-selected',
+  ],
+}
+
+export default defineConfig(config)

package/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/vite.config.ts

@@ -0,0 +1,79 @@
+import path, { join, resolve } from 'path'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import VueMacros from 'unplugin-vue-macros/vite'
+import { defineConfig } from 'vite'
+import Unocss from '@unocss/vite'
+import dts from 'vite-plugin-dts'
+import Components from 'unplugin-vue-components/vite'
+import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
+
+const pkgRootPath = resolve(__dirname)
+
+export default defineConfig({
+  build: {
+    target: 'modules',
+    outDir: 'dist',
+    lib: {
+      entry: './src/index.ts',
+      name: 'bom',
+      formats: ['es', 'cjs'],
+      fileName: format => `index.${format}.js`,
+    },
+    rollupOptions: {
+      external: [
+        'vue',
+        'vue-types',
+        'ant-design-vue',
+        '@handaotech-design/vue',
+      ],
+      input: [join(pkgRootPath, '/src/index.ts')],
+      output: [
+        {
+          format: 'es',
+          dir: 'dist/es',
+          entryFileNames: '[name].js',
+          preserveModulesRoot: 'src',
+          preserveModules: true,
+        },
+        {
+          format: 'cjs',
+          dir: 'dist/lib',
+          entryFileNames: '[name].js',
+          preserveModulesRoot: 'src',
+          preserveModules: true,
+          exports: 'named',
+        },
+      ],
+    },
+  },
+  plugins: [
+    vue(),
+    vueJsx(),
+    Unocss(),
+    VueMacros({
+      setupComponent: false,
+      setupSFC: false,
+      plugins: {
+        vue: vue({
+          isProduction: false,
+        }),
+        vueJsx: vueJsx(),
+      },
+    }),
+    dts({
+      entryRoot: 'src',
+      outputDir: 'dist/types',
+      tsConfigFilePath: path.resolve(__dirname, './tsconfig.json'),
+      skipDiagnostics: false,
+    }),
+    Components({
+      resolvers: [AntDesignVueResolver({
+        importStyle: true,
+        resolveIcons: true,
+      })],
+      dts: 'src/types/components.d.ts',
+      deep: true,
+    }),
+  ],
+})