form-create-wot 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-create-wot",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "form-create JSON 动态表单渲染引擎，基于 wot-design-uni 组件库，适用于 uni-app 移动端（H5/小程序/App）",
   "main": "src/fc/index.ts",
   "module": "src/fc/index.ts",

package/src/fc/adapter/fc-date-picker.vue

@@ -1,7 +1,6 @@
 <template>
-  <wd-datetime-picker
+  <wd-calendar
     v-model="innerValue"
-    :type="pickerType"
     :label="label"
     :disabled="disabled"
     :placeholder="placeholder"
@@ -10,22 +9,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
+import { ref, watch } from 'vue'
 
 const props = withDefaults(defineProps<{
   modelValue?: any
-  type?: string  // 'date' | 'time' | 'year-month' | 'datetime'
+  type?: string
   disabled?: boolean
   label?: string
   placeholder?: string
-  format?: string
-  picker?: string // antdv 的 picker: 'date' | 'week' | 'month' | 'year'
+  picker?: string
 }>(), {
   modelValue: undefined,
   type: 'date',
   disabled: false,
   label: '',
-  placeholder: '请选择',
+  placeholder: '请选择日期',
 })
 
 const emit = defineEmits<{
@@ -39,14 +37,6 @@ watch(() => props.modelValue, (val) => {
   innerValue.value = val
 })
 
-/** 将 antdv picker 类型映射为 wd-datetime-picker type */
-const pickerType = computed(() => {
-  if (props.type === 'time') return 'time'
-  if (props.picker === 'month' || props.type === 'month') return 'year-month'
-  if (props.type === 'datetime') return 'datetime'
-  return 'date'
-})
-
 const onConfirm = ({ value }: any) => {
   innerValue.value = value
   emit('update:modelValue', value)

package/src/fc/components/FcForm.vue

@@ -40,7 +40,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
 import type { FormRule, FormOption, FormApi } from '../types'
-import { parseRules, flattenFieldRules, normalizeRule } from '../core/parser'
+import { parseRules, flattenFieldRules, normalizeRule, applyFieldPermissions } from '../core/parser'
 import { validateValue } from '../core/validator'
 import FcFormItem from './FcFormItem.vue'
 
@@ -51,10 +51,13 @@ const props = withDefaults(defineProps<{
   option?: FormOption
   /** 外部绑定的 api 对象 */
   api?: FormApi | null
+  /** BPM 字段权限: { fieldName: '1'只读 | '2'可编辑 | '3'隐藏 } */
+  permissions?: Record<string, string>
 }>(), {
   rule: () => [],
   option: () => ({}),
   api: null,
+  permissions: () => ({}),
 })
 
 const emit = defineEmits<{
@@ -75,7 +78,12 @@ watch(() => props.rule, (newRules) => {
 }, { immediate: true, deep: true })
 
 function initForm(rules: FormRule[]) {
-  parsedRules.value = parseRules(rules)
+  let parsed = parseRules(rules)
+  // 应用 BPM 字段权限
+  if (props.permissions && Object.keys(props.permissions).length > 0) {
+    parsed = applyFieldPermissions(parsed, props.permissions)
+  }
+  parsedRules.value = parsed
   // 初始化 formData
   const fields = flattenFieldRules(parsedRules.value)
   for (const field of fields) {
@@ -395,14 +403,6 @@ onMounted(() => {
   &__btn {
     flex: 1;
     max-width: 320rpx;
-
-    &--submit {
-      // 主色按钮
-    }
-
-    &--reset {
-      // 次要按钮
-    }
   }
 }
 </style>

package/src/fc/components/FcFormItem.vue

@@ -1,9 +1,9 @@
 <template>
-  <view v-if="visible" class="fc-form-item" :class="{ 'fc-form-item--error': errorMsg }">
+  <view v-if="visible" class="fc-form-item" :class="itemClasses">
     <!-- 标题/标签行 -->
     <view class="fc-form-item__label" v-if="rule.title">
       <text class="fc-form-item__required" v-if="isRequired">*</text>
-      <text>{{ rule.title }}</text>
+      <text class="fc-form-item__title">{{ rule.title }}</text>
       <view class="fc-form-item__info" v-if="rule.info">
         <text class="fc-form-item__info-text">{{ infoText }}</text>
       </view>
@@ -17,6 +17,8 @@
         v-model="fieldValue"
         v-bind="componentProps"
         :disabled="isDisabled"
+        :readonly="isReadonly"
+        :no-border="true"
         @blur="onBlur"
         @input="onInput"
       />
@@ -27,6 +29,8 @@
         v-model="fieldValue"
         v-bind="componentProps"
         :disabled="isDisabled"
+        :readonly="isReadonly"
+        :no-border="true"
         @blur="onBlur"
         @input="onInput"
       />
@@ -108,7 +112,7 @@
 
       <!-- 未知类型 fallback -->
       <view v-else class="fc-form-item__unknown">
-        <text>不支持的组件类型: {{ rule.type }}</text>
+        <text class="fc-form-item__unknown-text">不支持的组件: {{ rule.type }}</text>
       </view>
     </view>
 
@@ -156,9 +160,14 @@ const isDisabled = computed(() => {
   return props.globalDisabled || props.rule.props?.disabled || false
 })
 
+// 是否只读
+const isReadonly = computed(() => {
+  return props.rule.props?.readonly || false
+})
+
 // 是否必填
 const isRequired = computed(() => {
-  return props.rule.required || props.rule.validate?.some(v => v.required) || false
+  return props.rule.required || (props.rule as any).$required || props.rule.validate?.some(v => v.required) || false
 })
 
 // 提示信息
@@ -168,6 +177,14 @@ const infoText = computed(() => {
   return props.rule.info.content || ''
 })
 
+// 样式 classes
+const itemClasses = computed(() => ({
+  'fc-form-item--error': !!errorMsg.value,
+  'fc-form-item--required': isRequired.value,
+  'fc-form-item--disabled': isDisabled.value,
+  'fc-form-item--readonly': isReadonly.value,
+}))
+
 // 表单值
 const fieldValue = ref<any>(props.modelValue)
 
@@ -221,28 +238,40 @@ defineExpose({
 .fc-form-item {
   padding: 24rpx 32rpx;
   background: #fff;
+  border-bottom: 1rpx solid #f5f5f5;
+  transition: background-color 0.2s;
+
+  &:last-child {
+    border-bottom: none;
+  }
 
   &__label {
     display: flex;
     align-items: center;
     margin-bottom: 16rpx;
     font-size: 28rpx;
-    color: #333;
+    color: #323233;
+    line-height: 1.4;
   }
 
   &__required {
-    color: #f56c6c;
+    color: #ee0a24;
     margin-right: 4rpx;
     font-size: 28rpx;
+    line-height: 1;
+  }
+
+  &__title {
+    font-weight: 500;
   }
 
   &__info {
-    margin-left: 8rpx;
+    margin-left: 12rpx;
   }
 
   &__info-text {
     font-size: 24rpx;
-    color: #999;
+    color: #969799;
   }
 
   &__body {
@@ -251,17 +280,39 @@ defineExpose({
 
   &__error {
     margin-top: 8rpx;
+    padding-left: 2rpx;
   }
 
   &__error-text {
     font-size: 24rpx;
-    color: #f56c6c;
+    color: #ee0a24;
+    line-height: 1.4;
   }
 
   &__unknown {
-    padding: 16rpx;
-    background: #fff3cd;
+    padding: 20rpx;
+    background: #fffbe8;
     border-radius: 8rpx;
+    border: 1rpx solid #fff1a8;
+  }
+
+  &__unknown-text {
+    font-size: 24rpx;
+    color: #ed6a0c;
+  }
+
+  &--disabled {
+    opacity: 0.7;
+  }
+
+  &--readonly {
+    background: #fafafa;
+  }
+
+  &--error {
+    .fc-form-item__label {
+      color: #ee0a24;
+    }
   }
 }
 </style>

package/src/fc/core/parser.ts

@@ -1,6 +1,7 @@
 /**
  * JSON Rule 解析器
  * 将 form-create 的 JSON Rule 解析并标准化为内部格式
+ * 兼容芋道 yudao BPM 后端的 formFields 格式
  */
 import type { FormRule, OptionItem } from '../types'
 
@@ -24,6 +25,23 @@ export function normalizeRule(rule: FormRule): FormRule {
     validate: rule.validate ? [...rule.validate] : []
   }
 
+  // ====== 芋道 yudao 兼容处理 ======
+
+  // 1. $required → required（芋道 FcDesigner 用 $required）
+  if ((rule as any).$required && !normalized.required) {
+    normalized.required = true
+  }
+
+  // 2. _fc_drag_tag 类型修正：
+  //    type="input" + _fc_drag_tag="textarea" 或 props.type="textarea" → 实际是 textarea
+  const dragTag = (rule as any)._fc_drag_tag
+  if (normalized.type === 'input' && (dragTag === 'textarea' || normalized.props?.type === 'textarea')) {
+    normalized.type = 'textarea'
+    delete normalized.props?.type  // 移除 props.type，避免传给 wd-textarea
+  }
+
+  // ====== 通用处理 ======
+
   // 处理 required 快捷设置 → 自动插入 validate 规则
   if (normalized.required && !normalized.validate?.some(v => v.required)) {
     normalized.validate = [
@@ -93,9 +111,24 @@ export function parseRules(rules: FormRule[]): FormRule[] {
 
 /**
  * 从芋道后端返回的 JSON 字符串解析
+ * 支持两种格式:
+ *  1. 单个 JSON 字符串 (整个数组)
+ *  2. JSON 字符串数组 (每个元素是单条规则的 JSON 字符串) — 芋道 formFields 格式
  */
-export function parseJsonString(json: string): FormRule[] {
+export function parseJsonString(json: string | string[]): FormRule[] {
   try {
+    // 格式2: 字符串数组（芋道 processDefinition.formFields）
+    if (Array.isArray(json)) {
+      const rules = json.map(item => {
+        if (typeof item === 'string') {
+          return JSON.parse(item) as FormRule
+        }
+        return item as FormRule
+      })
+      return parseRules(rules)
+    }
+
+    // 格式1: 单个 JSON 字符串
     const parsed = JSON.parse(json)
     if (Array.isArray(parsed)) {
       return parseRules(parsed)
@@ -107,6 +140,43 @@ export function parseJsonString(json: string): FormRule[] {
   }
 }
 
+/**
+ * 解析芋道 formConf 配置
+ */
+export function parseFormConf(confJson: string): Record<string, any> {
+  try {
+    return JSON.parse(confJson)
+  } catch {
+    return {}
+  }
+}
+
+/**
+ * 应用字段权限到规则
+ * 芋道 BPM 字段权限: "1" = 只读, "2" = 可编辑, "3" = 隐藏
+ */
+export function applyFieldPermissions(
+  rules: FormRule[],
+  permissions: Record<string, string>
+): FormRule[] {
+  return rules.map(rule => {
+    if (!rule.field || !permissions[rule.field]) return rule
+    const perm = permissions[rule.field]
+    const updated = { ...rule, props: { ...rule.props } }
+    if (perm === '1') {
+      // 只读
+      updated.props!.disabled = true
+      updated.props!.readonly = true
+    } else if (perm === '3') {
+      // 隐藏
+      updated.hidden = true
+      updated.display = false
+    }
+    // perm === '2' 可编辑 (默认，不做处理)
+    return updated
+  })
+}
+
 /**
  * 获取所有包含 field 的规则（扁平化）
  */

package/src/fc/index.ts

@@ -11,7 +11,7 @@ import FcCheckbox from './adapter/fc-checkbox.vue'
 import FcDatePicker from './adapter/fc-date-picker.vue'
 
 // Core
-export { parseRules, parseJsonString, flattenFieldRules, normalizeRule } from './core/parser'
+export { parseRules, parseJsonString, parseFormConf, flattenFieldRules, normalizeRule, applyFieldPermissions } from './core/parser'
 export { validateValue, validateFields, registerValidator } from './core/validator'
 export { getComponentConfig, registerComponent, convertProps } from './adapter/config'