wui-components-v2 1.1.69 → 1.1.70

package/components/form-control/form-control.vue

@@ -1,661 +1,661 @@
-<script lang="ts" setup>
-import { computed, onBeforeMount, ref, toRaw, watch } from 'vue'
-import type { FormSchema, FormSchemaIssue } from '@wot-ui/ui/components/wd-form/types'
-import dayjs from 'dayjs/esm/index'
-import type { Enums, Fields, Groups } from '../../type'
-import WuiSelectPopup from '../wui-select-popup/wui-select-popup.vue'
-import ControlTypeSupportor from '../../utils/control-type-supportor'
-import { useCompanyFieldFilter } from '../../composables/useCompanyFieldFilter'
-import customSelectPicker from '../custom-select-picker/custom-select-picker.vue'
-import CustomDatePicker from '../custom-date-picker/custom-date-picker.vue'
-import addAddressPage from '../add-address-page/add-address-page.vue'
-import userChoose from '../user-choose/user-choose.vue'
-import { generateHighResolutionID } from '../../utils/index'
-import scanInput from '../scan-input/scan-input.vue'
-// import { enums } from '../../api/page'
-defineOptions({
-  name: 'FormControl',
-})
-const props = defineProps<{
-  fieldGroup?: Groups
-  entity?: { [key: string]: string }
-  enumColumn?: Enums
-  companyFilter?: boolean
-  companyFieldSourceId?: string
-  smartPaste?: boolean
-}>()
-const fileTypes = [
-  {
-    label: '照片',
-    value: 'image',
-  },
-  {
-    label: '视频',
-    value: 'video',
-  },
-  // {
-  //   label: '文件',
-  //   value: 'file',
-  // },
-]
-const fileType = ref<any>('image')
-const action = ref<string>('')
-const hydrocarbonProgramToken = ref<string>('')
-const token = ref<string>('')
-const form = ref<any>(null)
-const model = ref<any>({})
-const addEvent = generateHighResolutionID() // 全局事件名称
-const { filteredFields: fields } = useCompanyFieldFilter(
-  () => props.fieldGroup,
-  model,
-  props.companyFilter, // 是否自适应显示快递公司填充框
-  props.companyFieldSourceId //  快递公司对应字段
-)
-const giveDefaultValue = (value: any) => {
-  const { extInfo = {} } = uni.getStorageSync('userInfo') || {}
-  const rawDefaultValue = extInfo.fieldMap || {}
-  const defaultValue: Record<string, any> = {}
-  for (const key in rawDefaultValue) {
-    if (Object.prototype.hasOwnProperty.call(rawDefaultValue, key)) {
-      const val = rawDefaultValue[key]
-      defaultValue[key] = typeof val === 'string' && val.includes('@R@') ? val.split('@R@')[0] : val
-    }
-  }
-  return defaultValue[value] || {}
-}
-giveDefaultValue({})
-// 初始化表单数据
-function initFormData() {
-  const models: { [key: string]: any } = {}
-  props.fieldGroup?.fields.forEach((item: Fields) => {
-    // 树、多选
-    if (
-      ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'tree-entity-select' ||
-      ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'multiselect'
-    ) {
-      return (models[item.sourceId] =
-        (props.entity && props.entity[item.sourceId]?.split(',')) || item.transDefaultValue || [])
-    }
-
-    if (ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'relselect') {
-      return (models[item.sourceId] =
-        (props.entity && props.entity[item.sourceId]?.split('@,@')) ||
-        (item.transDefaultValue && item.transDefaultValue?.split('@,@')) ||
-        [])
-    }
-
-    // 文件
-    if (
-      ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'file' ||
-      ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'relfile'
-    ) {
-      if (props.entity && typeof props.entity[item.sourceId] === 'object') {
-        return (models[item.sourceId] = [props.entity[item.sourceId]])
-      }
-      return (models[item.sourceId] =
-        (props.entity &&
-          props.entity[item.sourceId] && [
-            {
-              disabled: JSON.parse(props.entity[item.sourceId]).valid,
-              url: `${action.value}/v3/files${JSON.parse(props.entity[item.sourceId])?.base.path}?@token=${token.value}&@programToken=${hydrocarbonProgramToken.value}`,
-              name: `${JSON.parse(props.entity[item.sourceId])?.base.fileName}`,
-              response: JSON.stringify({
-                fileKey: `$blob:${JSON.parse(props.entity[item.sourceId])?.base.bytesInfoVO.code}`,
-              }),
-            },
-          ]) ||
-        item.transDefaultValue ||
-        [])
-    }
-
-    // 时间
-    if (
-      ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'datetime' ||
-      ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'date'
-    ) {
-      return (models[item.sourceId] =
-        (props.entity && dayjs(props.entity[item.sourceId]).valueOf()) ||
-        (item.transDefaultValue && dayjs(item.transDefaultValue).valueOf()) ||
-        null)
-    }
-
-    // 评分
-    if (ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'progress') {
-      const val = props.entity?.[item.sourceId]
-      return (models[item.sourceId] = val !== undefined && val !== null && val !== '' ? Number(val) : 0)
-    }
-
-    return (models[item.sourceId] = (props.entity && props.entity[item.sourceId]) || item.transDefaultValue || '')
-  })
-
-  // 遍历 models，处理 $$user. 前缀
-  const processedModels: Record<string, any> = {}
-  for (const key in models) {
-    if (Object.prototype.hasOwnProperty.call(models, key)) {
-      const val = models[key]
-      if (typeof val === 'string' && val.includes('$$user.')) {
-        processedModels[key] = giveDefaultValue(val.split('$$user.')[1])
-      } else {
-        processedModels[key] = val
-      }
-    }
-  }
-
-  model.value = {
-    ...processedModels,
-  }
-}
-
-//-s
-const shouldMonitor = computed(() => {
-  const newList = fields.value
-    .filter((item: any) => item.relValueField || item.relValueField3)
-    .map((innerItem: any) => ({
-      id: innerItem.sourceId,
-      title: innerItem.title,
-      relValueField: innerItem.relValueField.id,
-      relValueField3: innerItem.relValueField3.id,
-    }))
-  console.log('shouldMonitor:', newList)
-  return newList
-})
-//-e
-
-// 存储变化后的数据，{ [fieldKey]: newValue, ... }
-const changedData = ref<Record<string, any>>({})
-const initialModel = ref<Record<string, any>>({})
-
-// 监听 shouldMonitor 中 relValueField / relValueField3 对应的 model 字段
-watch(
-  () => {
-    const snapshot: Record<string, any> = {}
-    shouldMonitor.value?.forEach((item: any) => {
-      if (item.relValueField) snapshot.relValueField = model.value[item.relValueField]
-      if (item.relValueField3) snapshot.relValueField3 = model.value[item.relValueField3]
-    })
-    return snapshot
-  },
-  newVal => {
-    // 只存储与初始值不同的字段（表单变化的值）
-    const changed: Record<string, any> = {}
-    shouldMonitor.value?.forEach((item: any) => {
-      if (item.relValueField && newVal.relValueField !== initialModel.value[item.relValueField]) {
-        changed.relValueField = newVal.relValueField
-      }
-      if (item.relValueField3 && newVal.relValueField3 !== initialModel.value[item.relValueField3]) {
-        changed.relValueField3 = newVal.relValueField3
-      }
-    })
-    changedData.value = changed
-
-    // 当所有被监听的字段都有值时，存入缓存供 select-list 页面读取
-    const values = Object.values(newVal)
-    const allExist = values.length > 0 && values.every(v => v !== null && v !== undefined && v !== '')
-    if (allExist) {
-      uni.setStorageSync('paramsData', {
-        changedData: changedData.value,
-        rawData: shouldMonitor.value,
-      })
-      console.log('changedData:', changedData.value)
-    }
-  }
-)
-
-onBeforeMount(() => {
-  action.value = uni.getStorageSync('BASE_URL')
-  hydrocarbonProgramToken.value = uni.getStorageSync('HYDROCARBON_PROGRAM_TOKEN')
-  token.value = uni.getStorageSync('TOKEN')
-  initFormData()
-  initialModel.value = JSON.parse(JSON.stringify(model.value))
-})
-function formatSelectColumns(columns: any) {
-  return columns.map((item: any) => {
-    return {
-      ...item,
-      label: item.title,
-    }
-  })
-}
-
-const schema = computed((): FormSchema => {
-  return {
-    validate(_model: Record<string, any>): FormSchemaIssue[] {
-      const issues: FormSchemaIssue[] = []
-      props.fieldGroup?.fields.forEach((item: Fields) => {
-        if (item.required) {
-          const value = _model[item.sourceId]
-          if (Array.isArray(value) && value.length < 1) {
-            issues.push({ path: [item.sourceId], message: `请填写${item.title}` })
-          } else if (!value) {
-            issues.push({ path: [item.sourceId], message: `请填写${item.title}` })
-          }
-        }
-      })
-      return issues
-    },
-    isRequired(path: string) {
-      return props.fieldGroup?.fields.some(f => f.sourceId === path && f.required) ?? false
-    },
-  }
-})
-
-// 监听文件上传成功
-function handleFileChange(e: any, item: Fields) {
-  model.value[item.sourceId] = e.fileList
-}
-
-function submit() {
-  return new Promise((resolve, reject) => {
-    form.value
-      .validate()
-      .then(({ valid }: any) => {
-        if (valid) {
-          const data: { [key: string]: any } = {}
-          for (const key in model.value) {
-            if (Object.prototype.hasOwnProperty.call(model.value, key)) {
-              fields.value?.forEach((item: Fields) => {
-                if (item.sourceId === key) {
-                  if (ControlTypeSupportor.getControlType(item) === 'file') {
-                    data[key] = toRaw(model.value[key][0])
-                  } else if (
-                    ControlTypeSupportor.getControlType(item) === 'relselect' ||
-                    ControlTypeSupportor.getControlType(item) === 'tree-entity-select'
-                  ) {
-                    if (Array.isArray(model.value[key])) {
-                      data[key] = model.value[key].join('@,@')
-                    } else {
-                      data[key] = model.value[key]
-                    }
-                  } else {
-                    data[key] = model.value[key]
-                  }
-                }
-              })
-            }
-          }
-          resolve(data)
-        } else {
-          reject(valid)
-        }
-      })
-      .catch((error: any) => {
-        console.log(error, 'error')
-        reject(error)
-      })
-  })
-}
-
-// 暴露方法/变量给父组件
-defineExpose({
-  submit,
-})
-</script>
-
-<template>
-  <view>
-    <wd-form ref="form" :model="model" :schema="schema" error-type="toast" :label-width="120" class="custom-from-style">
-      <addAddressPage v-if="props?.smartPaste" v-model="model" :group="props.fieldGroup" />
-      <view v-for="item in fields" :key="item.sourceId">
-        <view v-show="!item.title?.includes('y') && !item.hidden">
-          <wd-form-item
-            v-if="ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'text'"
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <wd-input
-              v-model="model[item.sourceId]"
-              :readonly="item.disabled || item.rowEditType === 'readonly'"
-              :clearable="!item.disabled"
-              :placeholder="`请输入${item.title}`"
-              :class="{ 'disabled-input': item.disabled || item.rowEditType === 'readonly' }"
-            />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'decimal'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <wd-input
-              v-model="model[item.sourceId]"
-              type="number"
-              :readonly="item.disabled || item.rowEditType === 'readonly'"
-              :clearable="!item.disabled"
-              :placeholder="`请输入${item.title}`"
-            />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'password'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <wd-input
-              v-model="model[item.sourceId]"
-              show-password
-              :readonly="item.disabled || item.rowEditType === 'readonly'"
-              :clearable="!item.disabled"
-              :placeholder="`请输入${item.title}`"
-            />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'textarea'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <wd-textarea
-              v-model="model[item.sourceId]"
-              :readonly="item.disabled || item.rowEditType === 'readonly'"
-              :clearable="!item.disabled"
-              :placeholder="`请输入${item.title}`"
-              auto-height
-            />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'select'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-            :style="{ display: item.title?.includes('y') ? 'none' : null }"
-          >
-            <customSelectPicker
-              v-model="model[item.sourceId]"
-              :placeholder="`请选择${item.title}`"
-              :columns="enumColumn && formatSelectColumns(enumColumn[item.mstrucId])"
-              type="radio"
-            />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) ===
-              'relselect-extdis'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-            :style="{ display: item.title?.includes('y') ? 'none' : null }"
-          >
-            <userChoose
-              v-model="model[item.sourceId]"
-              :placeholder="`请选择${item.title}`"
-              :source-id="item.sourceId"
-              :title="item.title"
-              :add-event="addEvent"
-              :ext-control-type="item.extControlType"
-            />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'multiselect'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <customSelectPicker
-              v-model="model[item.sourceId]"
-              :placeholder="`请选择${item.title}`"
-              :columns="enumColumn && formatSelectColumns(enumColumn[item.mstrucId])"
-              type="checkbox"
-            />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'date'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <customDatePicker
-              v-model="model[item.sourceId]"
-              type="date"
-              :clearable="!item.disabled"
-              :placeholder="`请选择${item.title}`"
-            />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'datetime'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <customDatePicker
-              v-model="model[item.sourceId]"
-              type="datetime"
-              :clearable="!item.disabled"
-              :placeholder="`请选择${item.title}`"
-            />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'time'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <customDatePicker
-              v-model="model[item.sourceId]"
-              type="time"
-              use-second
-              :clearable="!item.disabled"
-              :placeholder="`请选择${item.title}`"
-            />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'date-YY'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <customDatePicker
-              v-model="model[item.sourceId]"
-              type="year"
-              use-second
-              :clearable="!item.disabled"
-              :placeholder="`请选择${item.title}`"
-            />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'file' ||
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'relfile'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <wd-radio-group v-if="!item.disabled" v-model="fileType" inline shape="dot" custom-class="custom-radio">
-              <wd-radio v-for="(titem, index) in fileTypes" :key="index" :value="titem.value">
-                {{ titem.label }}
-              </wd-radio>
-            </wd-radio-group>
-            <wd-upload
-              :accept="fileType"
-              :disabled="item.disabled || item.rowEditType === 'readonly'"
-              :limit="1"
-              :header="{
-                'hydrocarbon-program-token': hydrocarbonProgramToken,
-                'hydrocarbon-token': token,
-              }"
-              :file-list="model[item.sourceId]"
-              :action="`${action}/v3/upload`"
-              @success="
-                e => {
-                  handleFileChange(e, item)
-                }
-              "
-            />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'relselect'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-            :style="{ display: item.title?.includes('y') ? 'none' : null }"
-          >
-            <WuiSelectPopup
-              v-model="model[item.sourceId]"
-              :source-id="item.sourceId"
-              :title="item.title"
-              :ext-control-type="Number(item.max) === 1 ? 'relselect' : 'ss'"
-              :readonly="item.disabled || item.rowEditType === 'readonly'"
-              :clearable="!item.disabled"
-              :default-select-first="!!item.defaultSelectFirst"
-            />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) ===
-              'relselectvalue'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <WuiSelectPopup
-              v-model="model[item.sourceId]"
-              :source-id="item.sourceId"
-              :title="item.title"
-              :ext-control-type="item.extControlType"
-              :readonly="item.disabled || item.rowEditType === 'readonly'"
-              :clearable="!item.disabled"
-              :default-select-first="!!item.defaultSelectFirst"
-            />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) ===
-                'tree-entity-select' ||
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) ===
-                'table-entity-select'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <WuiSelectPopup
-              v-model="model[item.sourceId]"
-              :source-id="item.sourceId"
-              :title="item.title"
-              :ext-control-type="Number(item.max) === 1 ? 'relselect' : 'ss'"
-              :readonly="item.disabled || item.rowEditType === 'readonly'"
-              :clearable="!item.disabled"
-              :default-select-first="!!item.defaultSelectFirst"
-              fold-card-model="complex"
-            />
-          </wd-form-item>
-          <!-- done -->
-          <wd-form-item
-            v-else-if="ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'int'"
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <view style="text-align: left">
-              <wd-input-number
-                v-model="model[item.sourceId]"
-                :disabled="item.disabled || item.rowEditType === 'readonly'"
-                :min="Number(item.min || 0)"
-                :max="Number(item.max || Infinity)"
-              />
-            </view>
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'QRCode'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <scanInput v-model="model[item.sourceId]" :disabled="item.disabled || item.rowEditType === 'readonly'" />
-          </wd-form-item>
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'progress'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <wd-rate
-              allow-half
-              v-model="model[item.sourceId]"
-              :disabled="item.disabled || item.rowEditType === 'readonly'"
-            />
-          </wd-form-item>
-          <!-- done -->
-          <wd-form-item
-            v-else-if="
-              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'yes-no-switch'
-            "
-            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
-            :prop="item.sourceId"
-            :title="item.title"
-          >
-            <view style="text-align: left">
-              <wd-switch
-                v-model="model[item.sourceId]"
-                size="16"
-                :disabled="item.disabled || item.rowEditType === 'readonly'"
-                active-value="是"
-                inactive-value="否"
-              />
-            </view>
-          </wd-form-item>
-        </view>
-      </view>
-    </wd-form>
-  </view>
-</template>
-
-<style scoped>
-.custom-from-style {
-  :deep(.custom-radio) {
-    display: flex;
-    padding: 4px;
-  }
-
-  :deep(.wd-form-item .wd-cell__wrapper) {
-    gap: 12px;
-  }
-  :deep(.wd-form-item) {
-    border-top: 0.6px solid #e8e8e8;
-    padding: 12px 6px;
-    margin: auto 6px;
-    width: calc(100% - 12px);
-  }
-  :deep(.no-border-top) {
-    border-top: none;
-  }
-}
-:deep(.disabled-input) {
-  background-color: #e8e8e8 !important;
-}
-
-/* 暗黑模式适配 */
-:global(.wot-theme-dark) .custom-from-style :deep(.wd-form-item) {
-  border-top-color: #3d3d3d;
-}
-:global(.wot-theme-dark) ::deep(.disabled-input) {
-  background-color: #2f2f2f !important;
-}
-</style>
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, toRaw, watch } from 'vue'
+import type { FormSchema, FormSchemaIssue } from '@wot-ui/ui/components/wd-form/types'
+import dayjs from 'dayjs/esm/index'
+import type { Enums, Fields, Groups } from '../../type'
+import WuiSelectPopup from '../wui-select-popup/wui-select-popup.vue'
+import ControlTypeSupportor from '../../utils/control-type-supportor'
+import { useCompanyFieldFilter } from '../../composables/useCompanyFieldFilter'
+import customSelectPicker from '../custom-select-picker/custom-select-picker.vue'
+import CustomDatePicker from '../custom-date-picker/custom-date-picker.vue'
+import addAddressPage from '../add-address-page/add-address-page.vue'
+import userChoose from '../user-choose/user-choose.vue'
+import { generateHighResolutionID } from '../../utils/index'
+import scanInput from '../scan-input/scan-input.vue'
+// import { enums } from '../../api/page'
+defineOptions({
+  name: 'FormControl',
+})
+const props = defineProps<{
+  fieldGroup?: Groups
+  entity?: { [key: string]: string }
+  enumColumn?: Enums
+  companyFilter?: boolean
+  companyFieldSourceId?: string
+  smartPaste?: boolean
+}>()
+const fileTypes = [
+  {
+    label: '照片',
+    value: 'image',
+  },
+  {
+    label: '视频',
+    value: 'video',
+  },
+  // {
+  //   label: '文件',
+  //   value: 'file',
+  // },
+]
+const fileType = ref<any>('image')
+const action = ref<string>('')
+const hydrocarbonProgramToken = ref<string>('')
+const token = ref<string>('')
+const form = ref<any>(null)
+const model = ref<any>({})
+const addEvent = generateHighResolutionID() // 全局事件名称
+const { filteredFields: fields } = useCompanyFieldFilter(
+  () => props.fieldGroup,
+  model,
+  props.companyFilter, // 是否自适应显示快递公司填充框
+  props.companyFieldSourceId //  快递公司对应字段
+)
+const giveDefaultValue = (value: any) => {
+  const { extInfo = {} } = uni.getStorageSync('userInfo') || {}
+  const rawDefaultValue = extInfo.fieldMap || {}
+  const defaultValue: Record<string, any> = {}
+  for (const key in rawDefaultValue) {
+    if (Object.prototype.hasOwnProperty.call(rawDefaultValue, key)) {
+      const val = rawDefaultValue[key]
+      defaultValue[key] = typeof val === 'string' && val.includes('@R@') ? val.split('@R@')[0] : val
+    }
+  }
+  return defaultValue[value] || {}
+}
+giveDefaultValue({})
+// 初始化表单数据
+function initFormData() {
+  const models: { [key: string]: any } = {}
+  props.fieldGroup?.fields.forEach((item: Fields) => {
+    // 树、多选
+    if (
+      ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'tree-entity-select' ||
+      ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'multiselect'
+    ) {
+      return (models[item.sourceId] =
+        (props.entity && props.entity[item.sourceId]?.split(',')) || item.transDefaultValue || [])
+    }
+
+    if (ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'relselect') {
+      return (models[item.sourceId] =
+        (props.entity && props.entity[item.sourceId]?.split('@,@')) ||
+        (item.transDefaultValue && item.transDefaultValue?.split('@,@')) ||
+        [])
+    }
+
+    // 文件
+    if (
+      ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'file' ||
+      ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'relfile'
+    ) {
+      if (props.entity && typeof props.entity[item.sourceId] === 'object') {
+        return (models[item.sourceId] = [props.entity[item.sourceId]])
+      }
+      return (models[item.sourceId] =
+        (props.entity &&
+          props.entity[item.sourceId] && [
+            {
+              disabled: JSON.parse(props.entity[item.sourceId]).valid,
+              url: `${action.value}/v3/files${JSON.parse(props.entity[item.sourceId])?.base.path}?@token=${token.value}&@programToken=${hydrocarbonProgramToken.value}`,
+              name: `${JSON.parse(props.entity[item.sourceId])?.base.fileName}`,
+              response: JSON.stringify({
+                fileKey: `$blob:${JSON.parse(props.entity[item.sourceId])?.base.bytesInfoVO.code}`,
+              }),
+            },
+          ]) ||
+        item.transDefaultValue ||
+        [])
+    }
+
+    // 时间
+    if (
+      ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'datetime' ||
+      ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'date'
+    ) {
+      return (models[item.sourceId] =
+        (props.entity && dayjs(props.entity[item.sourceId]).valueOf()) ||
+        (item.transDefaultValue && dayjs(item.transDefaultValue).valueOf()) ||
+        null)
+    }
+
+    // 评分
+    if (ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'progress') {
+      const val = props.entity?.[item.sourceId]
+      return (models[item.sourceId] = val !== undefined && val !== null && val !== '' ? Number(val) : 0)
+    }
+
+    return (models[item.sourceId] = (props.entity && props.entity[item.sourceId]) || item.transDefaultValue || '')
+  })
+
+  // 遍历 models，处理 $$user. 前缀
+  const processedModels: Record<string, any> = {}
+  for (const key in models) {
+    if (Object.prototype.hasOwnProperty.call(models, key)) {
+      const val = models[key]
+      if (typeof val === 'string' && val.includes('$$user.')) {
+        processedModels[key] = giveDefaultValue(val.split('$$user.')[1])
+      } else {
+        processedModels[key] = val
+      }
+    }
+  }
+
+  model.value = {
+    ...processedModels,
+  }
+}
+
+//-s
+const shouldMonitor = computed(() => {
+  const newList = fields.value
+    .filter((item: any) => item.relValueField || item.relValueField3)
+    .map((innerItem: any) => ({
+      id: innerItem.sourceId,
+      title: innerItem.title,
+      relValueField: innerItem.relValueField.id,
+      relValueField3: innerItem.relValueField3.id,
+    }))
+  console.log('shouldMonitor:', newList)
+  return newList
+})
+//-e
+
+// 存储变化后的数据，{ [fieldKey]: newValue, ... }
+const changedData = ref<Record<string, any>>({})
+const initialModel = ref<Record<string, any>>({})
+
+// 监听 shouldMonitor 中 relValueField / relValueField3 对应的 model 字段
+watch(
+  () => {
+    const snapshot: Record<string, any> = {}
+    shouldMonitor.value?.forEach((item: any) => {
+      if (item.relValueField) snapshot.relValueField = model.value[item.relValueField]
+      if (item.relValueField3) snapshot.relValueField3 = model.value[item.relValueField3]
+    })
+    return snapshot
+  },
+  newVal => {
+    // 只存储与初始值不同的字段（表单变化的值）
+    const changed: Record<string, any> = {}
+    shouldMonitor.value?.forEach((item: any) => {
+      if (item.relValueField && newVal.relValueField !== initialModel.value[item.relValueField]) {
+        changed.relValueField = newVal.relValueField
+      }
+      if (item.relValueField3 && newVal.relValueField3 !== initialModel.value[item.relValueField3]) {
+        changed.relValueField3 = newVal.relValueField3
+      }
+    })
+    changedData.value = changed
+
+    // 当所有被监听的字段都有值时，存入缓存供 select-list 页面读取
+    const values = Object.values(newVal)
+    const allExist = values.length > 0 && values.every(v => v !== null && v !== undefined && v !== '')
+    if (allExist) {
+      uni.setStorageSync('paramsData', {
+        changedData: changedData.value,
+        rawData: shouldMonitor.value,
+      })
+      console.log('changedData:', changedData.value)
+    }
+  }
+)
+
+onBeforeMount(() => {
+  action.value = uni.getStorageSync('BASE_URL')
+  hydrocarbonProgramToken.value = uni.getStorageSync('HYDROCARBON_PROGRAM_TOKEN')
+  token.value = uni.getStorageSync('TOKEN')
+  initFormData()
+  initialModel.value = JSON.parse(JSON.stringify(model.value))
+})
+function formatSelectColumns(columns: any) {
+  return columns.map((item: any) => {
+    return {
+      ...item,
+      label: item.title,
+    }
+  })
+}
+
+const schema = computed((): FormSchema => {
+  return {
+    validate(_model: Record<string, any>): FormSchemaIssue[] {
+      const issues: FormSchemaIssue[] = []
+      props.fieldGroup?.fields.forEach((item: Fields) => {
+        if (item.required) {
+          const value = _model[item.sourceId]
+          if (Array.isArray(value) && value.length < 1) {
+            issues.push({ path: [item.sourceId], message: `请填写${item.title}` })
+          } else if (!value) {
+            issues.push({ path: [item.sourceId], message: `请填写${item.title}` })
+          }
+        }
+      })
+      return issues
+    },
+    isRequired(path: string) {
+      return props.fieldGroup?.fields.some(f => f.sourceId === path && f.required) ?? false
+    },
+  }
+})
+
+// 监听文件上传成功
+function handleFileChange(e: any, item: Fields) {
+  model.value[item.sourceId] = e.fileList
+}
+
+function submit() {
+  return new Promise((resolve, reject) => {
+    form.value
+      .validate()
+      .then(({ valid }: any) => {
+        if (valid) {
+          const data: { [key: string]: any } = {}
+          for (const key in model.value) {
+            if (Object.prototype.hasOwnProperty.call(model.value, key)) {
+              fields.value?.forEach((item: Fields) => {
+                if (item.sourceId === key) {
+                  if (ControlTypeSupportor.getControlType(item) === 'file') {
+                    data[key] = toRaw(model.value[key][0])
+                  } else if (
+                    ControlTypeSupportor.getControlType(item) === 'relselect' ||
+                    ControlTypeSupportor.getControlType(item) === 'tree-entity-select'
+                  ) {
+                    if (Array.isArray(model.value[key])) {
+                      data[key] = model.value[key].join('@,@')
+                    } else {
+                      data[key] = model.value[key]
+                    }
+                  } else {
+                    data[key] = model.value[key]
+                  }
+                }
+              })
+            }
+          }
+          resolve(data)
+        } else {
+          reject(valid)
+        }
+      })
+      .catch((error: any) => {
+        console.log(error, 'error')
+        reject(error)
+      })
+  })
+}
+
+// 暴露方法/变量给父组件
+defineExpose({
+  submit,
+})
+</script>
+
+<template>
+  <view>
+    <wd-form ref="form" :model="model" :schema="schema" error-type="toast" :label-width="120" class="custom-from-style">
+      <addAddressPage v-if="props?.smartPaste" v-model="model" :group="props.fieldGroup" />
+      <view v-for="item in fields" :key="item.sourceId">
+        <view v-show="!item.title?.includes('y') && !item.hidden">
+          <wd-form-item
+            v-if="ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'text'"
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <wd-input
+              v-model="model[item.sourceId]"
+              :readonly="item.disabled || item.rowEditType === 'readonly'"
+              :clearable="!item.disabled"
+              :placeholder="`请输入${item.title}`"
+              :class="{ 'disabled-input': item.disabled || item.rowEditType === 'readonly' }"
+            />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'decimal'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <wd-input
+              v-model="model[item.sourceId]"
+              type="number"
+              :readonly="item.disabled || item.rowEditType === 'readonly'"
+              :clearable="!item.disabled"
+              :placeholder="`请输入${item.title}`"
+            />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'password'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <wd-input
+              v-model="model[item.sourceId]"
+              show-password
+              :readonly="item.disabled || item.rowEditType === 'readonly'"
+              :clearable="!item.disabled"
+              :placeholder="`请输入${item.title}`"
+            />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'textarea'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <wd-textarea
+              v-model="model[item.sourceId]"
+              :readonly="item.disabled || item.rowEditType === 'readonly'"
+              :clearable="!item.disabled"
+              :placeholder="`请输入${item.title}`"
+              auto-height
+            />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'select'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+            :style="{ display: item.title?.includes('y') ? 'none' : null }"
+          >
+            <customSelectPicker
+              v-model="model[item.sourceId]"
+              :placeholder="`请选择${item.title}`"
+              :columns="enumColumn && formatSelectColumns(enumColumn[item.mstrucId])"
+              type="radio"
+            />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) ===
+              'relselect-extdis'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+            :style="{ display: item.title?.includes('y') ? 'none' : null }"
+          >
+            <userChoose
+              v-model="model[item.sourceId]"
+              :placeholder="`请选择${item.title}`"
+              :source-id="item.sourceId"
+              :title="item.title"
+              :add-event="addEvent"
+              :ext-control-type="item.extControlType"
+            />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'multiselect'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <customSelectPicker
+              v-model="model[item.sourceId]"
+              :placeholder="`请选择${item.title}`"
+              :columns="enumColumn && formatSelectColumns(enumColumn[item.mstrucId])"
+              type="checkbox"
+            />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'date'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <customDatePicker
+              v-model="model[item.sourceId]"
+              type="date"
+              :clearable="!item.disabled"
+              :placeholder="`请选择${item.title}`"
+            />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'datetime'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <customDatePicker
+              v-model="model[item.sourceId]"
+              type="datetime"
+              :clearable="!item.disabled"
+              :placeholder="`请选择${item.title}`"
+            />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'time'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <customDatePicker
+              v-model="model[item.sourceId]"
+              type="time"
+              use-second
+              :clearable="!item.disabled"
+              :placeholder="`请选择${item.title}`"
+            />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'date-YY'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <customDatePicker
+              v-model="model[item.sourceId]"
+              type="year"
+              use-second
+              :clearable="!item.disabled"
+              :placeholder="`请选择${item.title}`"
+            />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'file' ||
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'relfile'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <wd-radio-group v-if="!item.disabled" v-model="fileType" inline shape="dot" custom-class="custom-radio">
+              <wd-radio v-for="(titem, index) in fileTypes" :key="index" :value="titem.value">
+                {{ titem.label }}
+              </wd-radio>
+            </wd-radio-group>
+            <wd-upload
+              :accept="fileType"
+              :disabled="item.disabled || item.rowEditType === 'readonly'"
+              :limit="1"
+              :header="{
+                'hydrocarbon-program-token': hydrocarbonProgramToken,
+                'hydrocarbon-token': token,
+              }"
+              :file-list="model[item.sourceId]"
+              :action="`${action}/v3/upload`"
+              @success="
+                e => {
+                  handleFileChange(e, item)
+                }
+              "
+            />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'relselect'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+            :style="{ display: item.title?.includes('y') ? 'none' : null }"
+          >
+            <WuiSelectPopup
+              v-model="model[item.sourceId]"
+              :source-id="item.sourceId"
+              :title="item.title"
+              :ext-control-type="Number(item.max) === 1 ? 'relselect' : 'ss'"
+              :readonly="item.disabled || item.rowEditType === 'readonly'"
+              :clearable="!item.disabled"
+              :default-select-first="!!item.defaultSelectFirst"
+            />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) ===
+              'relselectvalue'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <WuiSelectPopup
+              v-model="model[item.sourceId]"
+              :source-id="item.sourceId"
+              :title="item.title"
+              :ext-control-type="item.extControlType"
+              :readonly="item.disabled || item.rowEditType === 'readonly'"
+              :clearable="!item.disabled"
+              :default-select-first="!!item.defaultSelectFirst"
+            />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) ===
+                'tree-entity-select' ||
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) ===
+                'table-entity-select'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <WuiSelectPopup
+              v-model="model[item.sourceId]"
+              :source-id="item.sourceId"
+              :title="item.title"
+              :ext-control-type="Number(item.max) === 1 ? 'relselect' : 'ss'"
+              :readonly="item.disabled || item.rowEditType === 'readonly'"
+              :clearable="!item.disabled"
+              :default-select-first="!!item.defaultSelectFirst"
+              fold-card-model="complex"
+            />
+          </wd-form-item>
+          <!-- done -->
+          <wd-form-item
+            v-else-if="ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'int'"
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <view style="text-align: left">
+              <wd-input-number
+                v-model="model[item.sourceId]"
+                :disabled="item.disabled || item.rowEditType === 'readonly'"
+                :min="Number(item.min || 0)"
+                :max="Number(item.max || Infinity)"
+              />
+            </view>
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'QRCode'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <scanInput v-model="model[item.sourceId]" :disabled="item.disabled || item.rowEditType === 'readonly'" />
+          </wd-form-item>
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'progress'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <wd-rate
+              allow-half
+              v-model="model[item.sourceId]"
+              :disabled="item.disabled || item.rowEditType === 'readonly'"
+            />
+          </wd-form-item>
+          <!-- done -->
+          <wd-form-item
+            v-else-if="
+              ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'yes-no-switch'
+            "
+            :class="{ 'no-border-top': fields.indexOf(item) === 0 }"
+            :prop="item.sourceId"
+            :title="item.title"
+          >
+            <view style="text-align: left">
+              <wd-switch
+                v-model="model[item.sourceId]"
+                size="16"
+                :disabled="item.disabled || item.rowEditType === 'readonly'"
+                active-value="是"
+                inactive-value="否"
+              />
+            </view>
+          </wd-form-item>
+        </view>
+      </view>
+    </wd-form>
+  </view>
+</template>
+
+<style scoped>
+.custom-from-style {
+  :deep(.custom-radio) {
+    display: flex;
+    padding: 4px;
+  }
+
+  :deep(.wd-form-item .wd-cell__wrapper) {
+    gap: 12px;
+  }
+  :deep(.wd-form-item) {
+    border-top: 0.6px solid #e8e8e8;
+    padding: 12px 6px;
+    margin: auto 6px;
+    width: calc(100% - 12px);
+  }
+  :deep(.no-border-top) {
+    border-top: none;
+  }
+}
+:deep(.disabled-input) {
+  background-color: #e8e8e8 !important;
+}
+
+/* 暗黑模式适配 */
+:global(.wot-theme-dark) .custom-from-style :deep(.wd-form-item) {
+  border-top-color: #3d3d3d;
+}
+:global(.wot-theme-dark) ::deep(.disabled-input) {
+  background-color: #2f2f2f !important;
+}
+</style>