xkit-editor 2.0.0-alpha.0

package/src/components/condition-editor.vue

@@ -0,0 +1,641 @@
+<template>
+  <div class="condition-editor">
+    <template v-if="inlineVisible">
+      <el-select :model-value="currentMode" placeholder="请选择状态" @change="handleModeChange" class="w-full">
+        <el-option v-for="option in modeOptions" :key="String(option.value)" :label="option.label" :value="option.value" />
+      </el-select>
+
+      <div v-if="currentMode === CONDITION_MODE" class="condition-actions">
+        <el-button type="primary" plain size="small" @click="handleOpen" class="w-full">
+          配置条件
+        </el-button>
+        <div v-if="Array.isArray(modelValue) && modelValue.length > 0" class="condition-preview">
+          已配置 {{ builderConditionCount }} 条条件
+        </div>
+      </div>
+    </template>
+
+    <el-dialog v-model="dialogVisible" title="配置显示条件" width="860px" append-to-body>
+      <div class="condition-dialog">
+        <x-condition-builder
+          v-model="builderValue"
+          :items="builderItems"
+          :init-button-attrs="{ label: '添加条件' }"
+          class="condition-builder"
+        />
+      </div>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSave">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, unref, watch, type ComputedRef } from 'vue'
+import { dayjs, ElButton, ElDialog, ElOption, ElSelect } from 'element-plus'
+import { XConditionBuilder, genId, type OptionItem, type XConditionNode, type XFormItem } from 'xkit-ui'
+import { listEditorLocalDicts } from '../utils/local-dict-center'
+
+type StateKind = 'visible' | 'disabled' | 'static'
+type FieldValueKind = 'number' | 'date' | 'boolean' | 'text' | 'option-single' | 'option-multiple' | 'tree-option'
+type EditorOperator =
+  | 'eq'
+  | 'neq'
+  | 'gt'
+  | 'gte'
+  | 'lt'
+  | 'lte'
+  | 'contains'
+  | 'not_contains'
+  | 'in'
+  | 'not_in'
+  | 'exists'
+  | 'empty'
+
+type FieldMeta = {
+  label: string
+  name: string
+  item: XFormItem
+  type: string
+  valueKind: FieldValueKind
+  options?: OptionItem[]
+  hasOptions: boolean
+  isTree: boolean
+  multiple: boolean
+}
+
+const CONDITION_MODE = 'condition'
+const unaryOperators = new Set<EditorOperator>(['exists', 'empty'])
+const multiValueOperators = new Set<EditorOperator>(['contains', 'not_contains', 'in', 'not_in'])
+
+const props = withDefaults(defineProps<{
+  modelValue?: any
+  defaultValue?: boolean
+  stateKind?: StateKind
+  inlineVisible?: boolean
+  autoOpenKey?: string | number
+}>(), {
+  inlineVisible: true
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: any): void
+}>()
+
+const editorContext = inject<ComputedRef<{ form?: { body?: XFormItem[] }; selectedItem?: any }> | null>('x-editor-context', null)
+
+const dialogVisible = ref(false)
+const builderValue = ref<XConditionNode | undefined>(undefined)
+
+const stateKind = computed<StateKind>(() => props.stateKind ?? (props.defaultValue === true ? 'visible' : 'disabled'))
+
+const modeOptions = computed(() => {
+  if (stateKind.value === 'visible') {
+    return [
+      { label: '始终显示', value: true },
+      { label: '始终隐藏', value: false },
+      { label: '满足条件时显示', value: CONDITION_MODE }
+    ]
+  }
+  if (stateKind.value === 'static') {
+    return [
+      { label: '默认编辑', value: false },
+      { label: '始终只读', value: true },
+      { label: '满足条件时只读', value: CONDITION_MODE }
+    ]
+  }
+  return [
+    { label: '始终可用', value: false },
+    { label: '始终禁用', value: true },
+    { label: '满足条件时禁用', value: CONDITION_MODE }
+  ]
+})
+
+const currentMode = computed(() => {
+  if (typeof props.modelValue === 'boolean') return props.modelValue
+  if (Array.isArray(props.modelValue)) return CONDITION_MODE
+  return props.defaultValue ?? true
+})
+
+const collectFormItems = (items: XFormItem[] = []) => {
+  const result: XFormItem[] = []
+  items.forEach((item) => {
+    if (item?.type === 'group' && Array.isArray(item.body)) {
+      result.push(...collectFormItems(item.body))
+      return
+    }
+    result.push(item)
+  })
+  return result
+}
+
+const normalizeType = (type: unknown) => String(type || 'input').replace(/^el-/, '').replace(/^x-/, '')
+
+const normalizeDictOptions = (options: unknown) => {
+  if (typeof options === 'string') return { type: 'dict', code: options }
+  if (!options || typeof options !== 'object') return undefined
+  const source = options as Record<string, unknown>
+  if (source.type === 'dict' && typeof source.code === 'string') {
+    return { type: 'dict', code: source.code }
+  }
+  return undefined
+}
+
+const resolveConditionOptions = (item: XFormItem): OptionItem[] | undefined => {
+  const options = unref((item as Record<string, any>).options)
+  if (Array.isArray(options)) return options
+
+  const dictOptions = normalizeDictOptions(options)
+  if (!dictOptions) return undefined
+
+  return listEditorLocalDicts().find((dict) => dict.code === dictOptions.code)?.options
+}
+
+const hasTreeOptions = (options?: OptionItem[]) => {
+  return Boolean(options?.some((option) => Array.isArray(option?.children) && option.children.length > 0))
+}
+
+const createFieldMeta = (item: XFormItem): FieldMeta | undefined => {
+  if (!item?.name || item.type === 'group') return undefined
+  const type = normalizeType(item.type)
+  const options = resolveConditionOptions(item)
+  const hasOptions = Array.isArray(options)
+  const isTree = ['cascader', 'tree-select'].includes(type) || hasTreeOptions(options)
+  const multiple = Boolean((item as any).multiple || ['checkboxes'].includes(type))
+  let valueKind: FieldValueKind = 'text'
+
+  if (isTree) {
+    valueKind = 'tree-option'
+  } else if (hasOptions || ['select', 'radios', 'radio'].includes(type)) {
+    valueKind = multiple ? 'option-multiple' : 'option-single'
+  } else if (['input-number', 'input-number-range', 'slider'].includes(type)) {
+    valueKind = 'number'
+  } else if (['date-picker', 'date-range-picker', 'date-range-picker-v2'].includes(type)) {
+    valueKind = 'date'
+  } else if (['switch', 'checkbox'].includes(type)) {
+    valueKind = 'boolean'
+  }
+
+  return {
+    label: typeof item.label === 'string' && item.label ? item.label : item.name,
+    name: item.name,
+    item,
+    type,
+    valueKind,
+    options,
+    hasOptions,
+    isTree,
+    multiple
+  }
+}
+
+const fieldMetas = computed(() => {
+  const items = editorContext?.value?.form?.body ?? []
+  const currentName = editorContext?.value?.selectedItem?.name
+  const metas = collectFormItems(items)
+    .map(createFieldMeta)
+    .filter(Boolean) as FieldMeta[]
+  const filtered = metas.filter((item) => item.name !== currentName)
+  return filtered.length > 0 ? filtered : metas
+})
+
+const findFieldMeta = (field?: string) => fieldMetas.value.find((item) => item.name === field)
+
+const fieldOptions = computed(() => fieldMetas.value.map((item) => ({ label: item.label, value: item.name })))
+
+const operatorOptionsByKind: Record<FieldValueKind, Array<{ label: string; value: EditorOperator }>> = {
+  number: [
+    { label: '等于', value: 'eq' },
+    { label: '不等于', value: 'neq' },
+    { label: '大于', value: 'gt' },
+    { label: '大于等于', value: 'gte' },
+    { label: '小于', value: 'lt' },
+    { label: '小于等于', value: 'lte' },
+    { label: '有值', value: 'exists' },
+    { label: '为空', value: 'empty' }
+  ],
+  date: [
+    { label: '等于', value: 'eq' },
+    { label: '不等于', value: 'neq' },
+    { label: '晚于', value: 'gt' },
+    { label: '不早于', value: 'gte' },
+    { label: '早于', value: 'lt' },
+    { label: '不晚于', value: 'lte' },
+    { label: '有值', value: 'exists' },
+    { label: '为空', value: 'empty' }
+  ],
+  boolean: [
+    { label: '等于', value: 'eq' },
+    { label: '不等于', value: 'neq' }
+  ],
+  text: [
+    { label: '等于', value: 'eq' },
+    { label: '不等于', value: 'neq' },
+    { label: '包含', value: 'contains' },
+    { label: '不包含', value: 'not_contains' },
+    { label: '有值', value: 'exists' },
+    { label: '为空', value: 'empty' }
+  ],
+  'option-single': [
+    { label: '等于', value: 'eq' },
+    { label: '不等于', value: 'neq' },
+    { label: '属于其中之一', value: 'in' },
+    { label: '不属于其中之一', value: 'not_in' },
+    { label: '有值', value: 'exists' },
+    { label: '为空', value: 'empty' }
+  ],
+  'option-multiple': [
+    { label: '包含', value: 'contains' },
+    { label: '不包含', value: 'not_contains' },
+    { label: '属于其中之一', value: 'in' },
+    { label: '不属于其中之一', value: 'not_in' },
+    { label: '有值', value: 'exists' },
+    { label: '为空', value: 'empty' }
+  ],
+  'tree-option': [
+    { label: '等于', value: 'eq' },
+    { label: '不等于', value: 'neq' },
+    { label: '包含', value: 'contains' },
+    { label: '不包含', value: 'not_contains' },
+    { label: '属于其中之一', value: 'in' },
+    { label: '不属于其中之一', value: 'not_in' },
+    { label: '有值', value: 'exists' },
+    { label: '为空', value: 'empty' }
+  ]
+}
+
+const getOperatorOptions = (row: any) => {
+  const meta = findFieldMeta(row.field)
+  return meta ? operatorOptionsByKind[meta.valueKind] : []
+}
+
+const isMultiValueOperator = (operator?: EditorOperator) => Boolean(operator && multiValueOperators.has(operator))
+
+const getValueOptions = (row: any) => findFieldMeta(row.field)?.options ?? []
+
+const isValueEditorVisible = (row: any, valueKind: FieldValueKind) => {
+  const meta = findFieldMeta(row.field)
+  return Boolean(meta && meta.valueKind === valueKind && row.operator && !unaryOperators.has(row.operator))
+}
+
+const getDateValueFormat = (meta?: FieldMeta) => {
+  const sourceValueFormat = (meta?.item as any)?.valueFormat
+  if (typeof sourceValueFormat === 'string' && sourceValueFormat) return sourceValueFormat
+
+  const pickerType = String((meta?.item as any)?._type || 'date')
+  if (['year', 'years', 'yearrange'].includes(pickerType)) return 'YYYY'
+  if (['month', 'months', 'monthrange'].includes(pickerType)) return 'YYYY-MM'
+  if (['datetime', 'datetimerange'].includes(pickerType)) return 'YYYY-MM-DD HH:mm:ss'
+  return 'YYYY-MM-DD'
+}
+
+const resetConditionRowValue = (row: any) => {
+  row.value = undefined
+}
+
+const builderItems = computed<XFormItem[]>(() => [
+  {
+    name: 'field',
+    label: false,
+    type: 'select',
+    placeholder: '选择字段',
+    options: fieldOptions.value,
+    style: { width: '180px' },
+    pipeOut(value: string, row: any) {
+      if (row.field !== value) {
+        row.operator = undefined
+        resetConditionRowValue(row)
+      }
+      return value
+    }
+  },
+  {
+    name: 'operator',
+    label: false,
+    type: 'select',
+    placeholder: '选择判断',
+    options: getOperatorOptions,
+    visible: (row: any) => Boolean(row.field),
+    style: { width: '150px' },
+    pipeOut(value: EditorOperator, row: any) {
+      if (row.operator !== value) resetConditionRowValue(row)
+      return value
+    }
+  },
+  {
+    name: 'value',
+    label: false,
+    type: 'select',
+    placeholder: '选择值',
+    options: getValueOptions,
+    visible: (row: any) => isValueEditorVisible(row, 'option-single') || isValueEditorVisible(row, 'option-multiple'),
+    attrs: (row: any) => ({
+      multiple: isMultiValueOperator(row.operator),
+      collapseTags: true,
+      maxCollapseTags: 10,
+      collapseTagsTooltip: true
+    }),
+    style: { width: '220px' }
+  },
+  {
+    name: 'value',
+    label: false,
+    type: 'cascader',
+    placeholder: '选择值',
+    options: getValueOptions,
+    visible: (row: any) => isValueEditorVisible(row, 'tree-option'),
+    attrs: (row: any) => ({
+      multiple: isMultiValueOperator(row.operator),
+      collapseTags: true,
+      maxCollapseTags: 10,
+      collapseTagsTooltip: true
+    }),
+    style: { width: '240px' }
+  },
+  {
+    name: 'value',
+    label: false,
+    type: 'input-number',
+    placeholder: '输入数值',
+    visible: (row: any) => isValueEditorVisible(row, 'number'),
+    style: { width: '160px' }
+  },
+  {
+    name: 'value',
+    label: false,
+    type: 'date-picker',
+    placeholder: '选择日期',
+    visible: (row: any) => isValueEditorVisible(row, 'date'),
+    attrs: (row: any) => {
+      const meta = findFieldMeta(row.field)
+      return {
+        type: (meta?.item as any)?._type,
+        valueFormat: getDateValueFormat(meta)
+      }
+    },
+    style: { width: '180px' }
+  },
+  {
+    name: 'value',
+    label: false,
+    type: 'select',
+    placeholder: '选择值',
+    options: [
+      { label: '是', value: true },
+      { label: '否', value: false }
+    ],
+    visible: (row: any) => isValueEditorVisible(row, 'boolean'),
+    style: { width: '140px' }
+  },
+  {
+    name: 'value',
+    label: false,
+    type: 'input',
+    placeholder: '输入内容',
+    visible: (row: any) => isValueEditorVisible(row, 'text'),
+    style: { width: '220px' }
+  }
+])
+
+const createEmptyBuilderValue = (): XConditionNode => ({
+  id: genId('cond'),
+  level: 0,
+  type: 'group',
+  data: { relationType: 'and' },
+  children: []
+})
+
+const toValueList = (value: any) => {
+  if (Array.isArray(value)) return value
+  if (value === undefined || value === null || value === '') return []
+  return [value]
+}
+
+const normalizeDateValue = (value: any, field: string): any => {
+  const meta = findFieldMeta(field)
+  if (meta?.valueKind !== 'date') return value
+  const format = getDateValueFormat(meta)
+  if (Array.isArray(value)) return value.map((item) => normalizeDateValue(item, field))
+  if (value instanceof Date) return dayjs(value).format(format)
+  return value
+}
+
+const createVarExpression = (field: string) => ['var', `form.${field}`]
+
+const buildPositiveExpression = (operator: EditorOperator, left: any[], value: any) => {
+  if (operator === 'eq') return ['==', left, value]
+  if (operator === 'neq') return ['!=', left, value]
+  if (operator === 'gt') return ['>', left, value]
+  if (operator === 'gte') return ['>=', left, value]
+  if (operator === 'lt') return ['<', left, value]
+  if (operator === 'lte') return ['<=', left, value]
+  if (operator === 'exists') return ['exists', left]
+  if (operator === 'empty') return ['empty', left]
+  if (operator === 'in') return ['in', left, toValueList(value)]
+  if (operator === 'contains') {
+    const values = toValueList(value)
+    if (values.length > 1) return ['or', ...values.map((item) => ['includes', left, item])]
+    return ['includes', left, values[0]]
+  }
+  return undefined
+}
+
+const isMultipleField = (field: string) => {
+  const meta = findFieldMeta(field)
+  return Boolean(meta?.multiple || meta?.valueKind === 'option-multiple')
+}
+
+const buildAnyIncludesExpression = (left: any[], values: any[]) => {
+  if (values.length > 1) return ['or', ...values.map((item) => ['includes', left, item])]
+  return ['includes', left, values[0]]
+}
+
+const buildExpressionFromCondition = (field: string, operator: EditorOperator, value: any) => {
+  const left = createVarExpression(field)
+  const normalizedValue = normalizeDateValue(value, field)
+  if (operator === 'in' && isMultipleField(field)) return buildAnyIncludesExpression(left, toValueList(normalizedValue))
+  if (operator === 'not_in' && isMultipleField(field)) {
+    return ['not', buildAnyIncludesExpression(left, toValueList(normalizedValue))]
+  }
+  if (operator === 'not_in') return ['not', ['in', left, toValueList(normalizedValue)]]
+  if (operator === 'not_contains') {
+    const values = toValueList(normalizedValue)
+    return ['not', buildAnyIncludesExpression(left, values)]
+  }
+  return buildPositiveExpression(operator, left, normalizedValue)
+}
+
+const buildExpressionFromNode = (node?: XConditionNode): any[] | undefined => {
+  if (!node) return undefined
+  if (node.type === 'group') {
+    const relation = node.data?.relationType === 'or' ? 'or' : 'and'
+    const children = (node.children || []).map((child) => buildExpressionFromNode(child)).filter(Boolean) as any[]
+    if (children.length === 0) return undefined
+    return [relation, ...children]
+  }
+  const field = node.data?.field
+  const operator = node.data?.operator as EditorOperator | undefined
+  if (!field || !operator) return undefined
+  if (multiValueOperators.has(operator) && toValueList(node.data?.value).length === 0) return undefined
+  if (!unaryOperators.has(operator) && (node.data?.value === undefined || node.data?.value === null || node.data?.value === '')) {
+    return undefined
+  }
+  return buildExpressionFromCondition(field, operator, node.data?.value)
+}
+
+const extractVarPath = (value: any) => {
+  if (Array.isArray(value) && value[0] === 'var' && typeof value[1] === 'string') return value[1] as string
+  return undefined
+}
+
+const stripScopePrefix = (path: string) => {
+  const prefixes = ['form.', 'formData.', 'row.', 'rowData.']
+  const matched = prefixes.find((prefix) => path.startsWith(prefix))
+  return matched ? path.slice(matched.length) : path
+}
+
+const createConditionNode = (level: number, fieldPath: string, operator: EditorOperator, value?: any): XConditionNode => ({
+  id: genId('cond'),
+  level,
+  type: 'condition',
+  data: {
+    field: stripScopePrefix(fieldPath),
+    operator,
+    value
+  }
+})
+
+const parseExpressionToNode = (expression: any, level = 0): XConditionNode | undefined => {
+  if (!Array.isArray(expression)) return undefined
+  const [operator, ...args] = expression
+  if (operator === 'and' || operator === 'or') {
+    const children = args.map((item) => parseExpressionToNode(item, level + 1)).filter(Boolean) as XConditionNode[]
+    return {
+      id: genId('cond'),
+      level,
+      type: 'group',
+      data: { relationType: operator },
+      children
+    }
+  }
+  if (operator === 'not') {
+    const inner = parseExpressionToNode(args[0], level)
+    if (!inner || inner.type !== 'condition') return undefined
+    if (inner.data?.operator === 'in') inner.data.operator = 'not_in'
+    if (inner.data?.operator === 'contains') inner.data.operator = 'not_contains'
+    return inner
+  }
+  if (typeof operator !== 'string') return undefined
+  if (operator === 'exists' || operator === 'empty') {
+    const fieldPath = extractVarPath(args[0])
+    return fieldPath ? createConditionNode(level, fieldPath, operator, undefined) : undefined
+  }
+  const fieldPath = extractVarPath(args[0])
+  if (!fieldPath) return undefined
+  if (operator === '==') return createConditionNode(level, fieldPath, 'eq', args[1])
+  if (operator === '!=') return createConditionNode(level, fieldPath, 'neq', args[1])
+  if (operator === '>') return createConditionNode(level, fieldPath, 'gt', args[1])
+  if (operator === '>=') return createConditionNode(level, fieldPath, 'gte', args[1])
+  if (operator === '<') return createConditionNode(level, fieldPath, 'lt', args[1])
+  if (operator === '<=') return createConditionNode(level, fieldPath, 'lte', args[1])
+  if (operator === 'in') return createConditionNode(level, fieldPath, 'in', args[1])
+  if (operator === 'includes') return createConditionNode(level, fieldPath, 'contains', args[1])
+  return undefined
+}
+
+const buildBuilderValue = (expression: any) => {
+  const parsed = parseExpressionToNode(expression, 0)
+  return parsed?.type === 'group' ? parsed : createEmptyBuilderValue()
+}
+
+const builderConditionCount = computed(() => {
+  const countExpression = (expression: any): number => {
+    if (!Array.isArray(expression)) return 0
+    const [operator, ...args] = expression
+    if (operator === 'and' || operator === 'or') return args.reduce((sum, item) => sum + countExpression(item), 0)
+    if (operator === 'not') return countExpression(args[0])
+    return 1
+  }
+  return Array.isArray(props.modelValue) ? countExpression(props.modelValue) : 0
+})
+
+const ensureConditionMode = () => {
+  if (!Array.isArray(props.modelValue)) emit('update:modelValue', [])
+}
+
+const handleModeChange = (val: any) => {
+  if (val === true || val === false) {
+    emit('update:modelValue', val)
+    return
+  }
+  ensureConditionMode()
+}
+
+const handleOpen = () => {
+  ensureConditionMode()
+  builderValue.value = buildBuilderValue(props.modelValue)
+  dialogVisible.value = true
+}
+
+const handleSave = () => {
+  const expression = buildExpressionFromNode(builderValue.value)
+  emit('update:modelValue', expression ?? [])
+  dialogVisible.value = false
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (dialogVisible.value && Array.isArray(val)) {
+      builderValue.value = buildBuilderValue(val)
+    }
+  }
+)
+
+watch(
+  () => props.autoOpenKey,
+  (key, oldKey) => {
+    if (key === undefined || key === oldKey) return
+    handleOpen()
+  }
+)
+
+defineExpose({
+  open: handleOpen
+})
+</script>
+
+<style scoped>
+.condition-editor {
+  width: 100%;
+}
+
+.condition-actions {
+  margin-top: 8px;
+}
+
+.condition-preview {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #606266;
+  background: #f8f9fa;
+  padding: 4px 8px;
+  border-radius: 4px;
+  word-break: break-all;
+}
+
+.condition-dialog {
+  min-height: 220px;
+  padding: 16px;
+}
+
+.condition-builder {
+  min-height: 200px;
+}
+
+.w-full {
+  width: 100%;
+}
+</style>