feat: 标识生成规则调整

src/components/packages/formEditor/components/Panels/Config/components/PropsPanel.vue

@@ -17,1061 +17,930 @@ import PanelsConfigComponentsSubformDefaultValue from './SubformDefaultValue.vue
 import Icon from '@ER/icon'
 import _ from 'lodash-es'
 export default {
-  name: 'ConfigPropsPanel',
-  inheritAttrs: false,
-  customOptions: {}
+	name: 'ConfigPropsPanel',
+	inheritAttrs: false,
+	customOptions: {}
 }
 </script>
 <script setup>
 const ER = inject('Everright')
 const ns = hooks.useNamespace('PropsPanel')
+const { t } = hooks.useI18n()
 const {
-  t
-} = hooks.useI18n()
-const {
-  type,
-  state,
-  checkTypeBySelected,
-  target,
-  isSelectField,
-  isSelectGrid,
-  isSelectTabs,
-  isSelectCollapse,
-  isSelectTable,
-  isPc,
-  isSelectSubform
+	type,
+	state,
+	checkTypeBySelected,
+	target,
+	isSelectField,
+	isSelectGrid,
+	isSelectTabs,
+	isSelectCollapse,
+	isSelectTable,
+	isPc,
+	isSelectSubform
 } = hooks.useTarget()
 defineEmits(['changePanel'])
 const bgStatus = ref(false)
 provide('Everright-propsPanel', {
-  bgStatus
+	bgStatus
 })
 const dialogVisible = ref(false)
 const dataRef = ref()
 const titleRef = ref()
 const options = [
-  {
-    value: 'date',
-    label: 'date'
-  },
-  {
-    value: 'dates',
-    label: 'dates'
-  },
-  {
-    value: 'datetime',
-    label: 'datetime'
-  },
-  // {
-  //   value: 'week',
-  //   label: 'week'
-  // },
-  // {
-  //   value: 'datetimerange',
-  //   label: 'datetimerange'
-  // },
-  {
-    value: 'daterange',
-    label: 'daterange'
-  }
-  // {
-  //   value: 'monthrange',
-  //   label: 'monthrange'
-  // }
+	{
+		value: 'date',
+		label: 'date'
+	},
+	{
+		value: 'dates',
+		label: 'dates'
+	},
+	{
+		value: 'datetime',
+		label: 'datetime'
+	},
+	// {
+	//   value: 'week',
+	//   label: 'week'
+	// },
+	// {
+	//   value: 'datetimerange',
+	//   label: 'datetimerange'
+	// },
+	{
+		value: 'daterange',
+		label: 'daterange'
+	}
+	// {
+	//   value: 'monthrange',
+	//   label: 'monthrange'
+	// }
 ]
 const options0 = computed(() => {
-  let result = []
-  if (checkTypeBySelected(['time'])) {
-    result = [
-      {
-        label: 'HH:mm:ss',
-        value: 'HH:mm:ss'
-      },
-      {
-        label: 'HH时mm分ss秒',
-        value: 'HH时mm分ss秒'
-      }
-    ]
-  }
-  if (checkTypeBySelected(['date'])) {
-    if (target.value.options.type === 'datetime') {
-      result = [
-        {
-          label: 'YYYY-MM-DD HH:mm:ss',
-          value: 'YYYY-MM-DD HH:mm:ss'
-        },
-        {
-          label: 'YYYY-MM-DD hh:mm:ss',
-          value: 'YYYY-MM-DD hh:mm:ss'
-        }
-      ]
-    } else {
-      result = [
-        {
-          label: 'YYYY-MM-DD',
-          value: 'YYYY-MM-DD'
-        },
-        {
-          label: 'YYYY/MM/DD',
-          value: 'YYYY/MM/DD'
-        },
-        {
-          label: 'YYYY年MM月DD日',
-          value: 'YYYY年MM月DD日'
-        }
-      ]
-    }
-  }
-  return result
+	let result = []
+	if (checkTypeBySelected(['time'])) {
+		result = [
+			{
+				label: 'HH:mm:ss',
+				value: 'HH:mm:ss'
+			},
+			{
+				label: 'HH时mm分ss秒',
+				value: 'HH时mm分ss秒'
+			}
+		]
+	}
+	if (checkTypeBySelected(['date'])) {
+		if (target.value.options.type === 'datetime') {
+			result = [
+				{
+					label: 'YYYY-MM-DD HH:mm:ss',
+					value: 'YYYY-MM-DD HH:mm:ss'
+				},
+				{
+					label: 'YYYY-MM-DD hh:mm:ss',
+					value: 'YYYY-MM-DD hh:mm:ss'
+				}
+			]
+		} else {
+			result = [
+				{
+					label: 'YYYY-MM-DD',
+					value: 'YYYY-MM-DD'
+				},
+				{
+					label: 'YYYY/MM/DD',
+					value: 'YYYY/MM/DD'
+				},
+				{
+					label: 'YYYY年MM月DD日',
+					value: 'YYYY年MM月DD日'
+				}
+			]
+		}
+	}
+	return result
 })
 const widthOptions = ['1/4', '1/3', '1/2', '2/3', '3/4', '1']
 const options1 = computed(() => {
-  return widthOptions.map((e, index) => {
-    const result = {
-      value: e,
-      disabled: false,
-      icon: `widthRatioP${index + 1}`
-    }
-    const otherNodes = target.value.context.parent.columns
-    switch (otherNodes.length) {
-      case 2:
-        result.disabled = /^(1)$/.test(result.value)
-        break
-      case 3:
-        result.disabled = /^(1|3\/4|2\/3|1\/4)$/.test(result.value)
-        break
-    }
-    return result
-  })
+	return widthOptions.map((e, index) => {
+		const result = {
+			value: e,
+			disabled: false,
+			icon: `widthRatioP${index + 1}`
+		}
+		const otherNodes = target.value.context.parent.columns
+		switch (otherNodes.length) {
+			case 2:
+				result.disabled = /^(1)$/.test(result.value)
+				break
+			case 3:
+				result.disabled = /^(1|3\/4|2\/3|1\/4)$/.test(result.value)
+				break
+		}
+		return result
+	})
 })
-const options2 = [
-  'none',
-  'solid',
-  'dotted',
-  'dashed',
-  'double',
-  'groove',
-  'ridge',
-  'inset',
-  'outset'
-]
+const options2 = ['none', 'solid', 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', 'outset']
 const options4 = computed(() => {
-  return [
-    {
-      label: t('er.config.tabsLayout.style.options[0]'),
-      value: '',
-      icon: 'tabStyleP1'
-    },
-    {
-      label: t('er.config.tabsLayout.style.options[1]'),
-      value: 'card',
-      icon: 'tabStyleP2'
-    },
-    {
-      label: t('er.config.tabsLayout.style.options[2]'),
-      value: 'border-card',
-      icon: 'tabStyleP3'
-    }
-  ]
+	return [
+		{
+			label: t('er.config.tabsLayout.style.options[0]'),
+			value: '',
+			icon: 'tabStyleP1'
+		},
+		{
+			label: t('er.config.tabsLayout.style.options[1]'),
+			value: 'card',
+			icon: 'tabStyleP2'
+		},
+		{
+			label: t('er.config.tabsLayout.style.options[2]'),
+			value: 'border-card',
+			icon: 'tabStyleP3'
+		}
+	]
 })
 const options5 = computed(() => {
-  return [
-    {
-      label: t('er.config.tabsLayout.tabPosition.options[0]'),
-      value: 'top',
-      icon: 'tabsLocationP1'
-    },
-    {
-      label: t('er.config.tabsLayout.tabPosition.options[1]'),
-      value: 'bottom',
-      icon: 'tabsLocationP2'
-    },
-    {
-      label: t('er.config.tabsLayout.tabPosition.options[2]'),
-      value: 'left',
-      icon: 'tabsLocationP3'
-    },
-    {
-      label: t('er.config.tabsLayout.tabPosition.options[3]'),
-      value: 'right',
-      icon: 'tabsLocationP4'
-    }
-  ]
+	return [
+		{
+			label: t('er.config.tabsLayout.tabPosition.options[0]'),
+			value: 'top',
+			icon: 'tabsLocationP1'
+		},
+		{
+			label: t('er.config.tabsLayout.tabPosition.options[1]'),
+			value: 'bottom',
+			icon: 'tabsLocationP2'
+		},
+		{
+			label: t('er.config.tabsLayout.tabPosition.options[2]'),
+			value: 'left',
+			icon: 'tabsLocationP3'
+		},
+		{
+			label: t('er.config.tabsLayout.tabPosition.options[3]'),
+			value: 'right',
+			icon: 'tabsLocationP4'
+		}
+	]
 })
 const options6 = computed(() => {
-  return [
-    {
-      label: t('er.config.gridLayout.justify.options[0]'),
-      value: 'start',
-      icon: 'horizontalLayoutP1'
-    },
-    {
-      label: t('er.config.gridLayout.justify.options[1]'),
-      value: 'end',
-      icon: 'horizontalLayoutP2'
-    },
-    {
-      label: t('er.config.gridLayout.justify.options[2]'),
-      value: 'center',
-      icon: 'horizontalLayoutP3'
-    },
-    {
-      label: t('er.config.gridLayout.justify.options[3]'),
-      value: 'space-around',
-      icon: 'horizontalLayoutP4'
-    },
-    {
-      label: t('er.config.gridLayout.justify.options[4]'),
-      value: 'space-between',
-      icon: 'horizontalLayoutP5'
-    }
-  ]
+	return [
+		{
+			label: t('er.config.gridLayout.justify.options[0]'),
+			value: 'start',
+			icon: 'horizontalLayoutP1'
+		},
+		{
+			label: t('er.config.gridLayout.justify.options[1]'),
+			value: 'end',
+			icon: 'horizontalLayoutP2'
+		},
+		{
+			label: t('er.config.gridLayout.justify.options[2]'),
+			value: 'center',
+			icon: 'horizontalLayoutP3'
+		},
+		{
+			label: t('er.config.gridLayout.justify.options[3]'),
+			value: 'space-around',
+			icon: 'horizontalLayoutP4'
+		},
+		{
+			label: t('er.config.gridLayout.justify.options[4]'),
+			value: 'space-between',
+			icon: 'horizontalLayoutP5'
+		}
+	]
 })
 const options7 = computed(() => {
-  return [
-    {
-      label: t('er.config.propsPanel.layout.options[0]'),
-      value: 'block'
-    },
-    {
-      label: t('er.config.propsPanel.layout.options[1]'),
-      value: 'inline'
-    }
-  ]
+	return [
+		{
+			label: t('er.config.propsPanel.layout.options[0]'),
+			value: 'block'
+		},
+		{
+			label: t('er.config.propsPanel.layout.options[1]'),
+			value: 'inline'
+		}
+	]
 })
 const options8 = computed(() => {
-  return [
-    {
-      label: t('er.config.propsPanel.region.options[0]'),
-      value: 1
-    },
-    {
-      label: t('er.config.propsPanel.region.options[1]'),
-      value: 2
-    },
-    {
-      label: t('er.config.propsPanel.region.options[2]'),
-      value: 3
-    }
-  ]
+	return [
+		{
+			label: t('er.config.propsPanel.region.options[0]'),
+			value: 1
+		},
+		{
+			label: t('er.config.propsPanel.region.options[1]'),
+			value: 2
+		},
+		{
+			label: t('er.config.propsPanel.region.options[2]'),
+			value: 3
+		}
+	]
 })
 const options9 = computed(() => {
-  return [
-    {
-      icon: 'numberButtonP2',
-      value: false
-    },
-    {
-      icon: 'numberButtonP1',
-      value: true
-    }
-  ]
+	return [
+		{
+			icon: 'numberButtonP2',
+			value: false
+		},
+		{
+			icon: 'numberButtonP1',
+			value: true
+		}
+	]
 })
 const options10 = computed(() => {
-  return [
-    {
-      icon: 'dividerLocationP1',
-      value: 'left'
-    },
-    {
-      icon: 'dividerLocationP2',
-      value: 'center'
-    },
-    {
-      icon: 'dividerLocationP3',
-      value: 'right'
-    }
-  ]
+	return [
+		{
+			icon: 'dividerLocationP1',
+			value: 'left'
+		},
+		{
+			icon: 'dividerLocationP2',
+			value: 'center'
+		},
+		{
+			icon: 'dividerLocationP3',
+			value: 'right'
+		}
+	]
 })
 // const typeProps = computed(() => {
 //   return utils.bindProps(target.value, true)
 // })
 const typeProps = hooks.useProps(state, target, true, false, (type, props) => {
-  switch (type) {
-    case 'time':
-    case 'cascader':
-    case 'number':
-    case 'date':
-    case 'rate':
-    case 'switch':
-    case 'slider':
-      delete props.disabled
-      break
-  }
+	switch (type) {
+		case 'time':
+		case 'cascader':
+		case 'number':
+		case 'date':
+		case 'rate':
+		case 'switch':
+		case 'slider':
+			delete props.disabled
+			break
+	}
 })
 const checkLogicData = () => {
-  if (utils.checkIdExistInLogic(target.value.id, state.logic)) {
-    ElMessage({
-      showClose: true,
-      duration: 4000,
-      message: t('er.logic.logicSuggests'),
-      type: 'warning'
-    })
-    utils.removeLogicDataByid(target.value.id, state.logic)
-  }
+	if (utils.checkIdExistInLogic(target.value.id, state.logic)) {
+		ElMessage({
+			showClose: true,
+			duration: 4000,
+			message: t('er.logic.logicSuggests'),
+			type: 'warning'
+		})
+		utils.removeLogicDataByid(target.value.id, state.logic)
+	}
 }
-const handleChange0 = (value) => {
-  checkLogicData()
-  if (/^(dates|datarange)$/.test(value)) {
-    target.value.options.defaultValue = []
-  } else {
-    target.value.options.defaultValue = ''
-  }
-  if (!options0.value.includes(value)) {
-    target.value.options.format = options0.value[0].value
-  }
+const handleChange0 = value => {
+	checkLogicData()
+	if (/^(dates|datarange)$/.test(value)) {
+		target.value.options.defaultValue = []
+	} else {
+		target.value.options.defaultValue = ''
+	}
+	if (!options0.value.includes(value)) {
+		target.value.options.format = options0.value[0].value
+	}
 }
 const handleChange1 = () => {
-  checkLogicData()
-  target.value.options.defaultValue = ''
+	checkLogicData()
+	target.value.options.defaultValue = ''
 }
-const handleMultipleChange = (value) => {
-  checkLogicData()
-  if (value) {
-    target.value.options.defaultValue = []
-  } else {
-    target.value.options.defaultValue = ''
-  }
+const handleMultipleChange = value => {
+	checkLogicData()
+	if (value) {
+		target.value.options.defaultValue = []
+	} else {
+		target.value.options.defaultValue = ''
+	}
 }
 const handleAction = (type, value) => {
-  switch (type) {
-    case 1:
-      if (state.mode === 'config') {
-        unref(dataRef).getData().then(({ data }) => {
-          dialogVisible.value = false
-        })
-        return false
-      }
-      if (checkTypeBySelected(['cascader'])) {
-        unref(dataRef).getData().then(({ data }) => {
-          state.data[target.value.options.dataKey].list = data
-          dialogVisible.value = false
-        })
-      } else {
-        unref(dataRef).getData().then(({ data, defaultValue }) => {
-          state.data[target.value.options.dataKey].list = data
-          target.value.options.defaultValue = defaultValue
-          dialogVisible.value = false
-        })
-      }
-      break
-    case 2:
-      dialogVisible.value = false
-      break
-  }
+	switch (type) {
+		case 1:
+			if (state.mode === 'config') {
+				unref(dataRef)
+					.getData()
+					.then(({ data }) => {
+						dialogVisible.value = false
+					})
+				return false
+			}
+			if (checkTypeBySelected(['cascader'])) {
+				unref(dataRef)
+					.getData()
+					.then(({ data }) => {
+						state.data[target.value.options.dataKey].list = data
+						dialogVisible.value = false
+					})
+			} else {
+				unref(dataRef)
+					.getData()
+					.then(({ data, defaultValue }) => {
+						state.data[target.value.options.dataKey].list = data
+						target.value.options.defaultValue = defaultValue
+						dialogVisible.value = false
+					})
+			}
+			break
+		case 2:
+			dialogVisible.value = false
+			break
+	}
 }
 const handleTypeListener = ({ property, data }) => {
-  switch (property) {
-    case 'width':
-      // eslint-disable-next-line
+	switch (property) {
+		case 'width':
+			// eslint-disable-next-line
       const val = Number((eval(data.value) * 100).toFixed(2))
-      utils.syncWidthByPlatform(target.value, state.platform, false, val)
-      break
-    case 'type':
-      target.value.options.type = data.value
-      break
-    case 'tabPosition':
-      target.value.options.tabPosition = data.value
-      break
-    case 'justify':
-      target.value.options.justify = data.value
-      break
-    case 'displayStyle':
-      target.value.options.displayStyle = data.value
-      break
-    case 'selectType':
-      target.value.options.selectType = data.value
-      target.value.options.defaultValue = ''
-      break
-    case 'controlsPosition':
-      target.value.options.controlsPosition = data.value
-      break
-    case 'contentPosition':
-      target.value.options.contentPosition = data.value
-      break
-  }
+			utils.syncWidthByPlatform(target.value, state.platform, false, val)
+			break
+		case 'type':
+			target.value.options.type = data.value
+			break
+		case 'tabPosition':
+			target.value.options.tabPosition = data.value
+			break
+		case 'justify':
+			target.value.options.justify = data.value
+			break
+		case 'displayStyle':
+			target.value.options.displayStyle = data.value
+			break
+		case 'selectType':
+			target.value.options.selectType = data.value
+			target.value.options.defaultValue = ''
+			break
+		case 'controlsPosition':
+			target.value.options.controlsPosition = data.value
+			break
+		case 'contentPosition':
+			target.value.options.contentPosition = data.value
+			break
+	}
 }
 onMounted(() => {
-  titleRef.value && titleRef.value.focus()
+	titleRef.value && titleRef.value.focus()
 })
 </script>
 <template>
-  <div :class="ns.b()">
-<!--    <el-form-item label="唯一标识" prop="id">-->
-<!--      <el-tag type="warning">-->
-<!--        {{target.id}}-->
-<!--      </el-tag>-->
-<!--    </el-form-item>-->
-    <el-form-item v-bind="utils.addTestId('configPanel:id')" v-if="isSelectField" :label="t('er.config.propsPanel.id')" prop="key">
-      <el-input
-        v-model="target.key"
-      />
-    </el-form-item>
-    <PanelsConfigComponentsCollapseComponent
-      v-if="isSelectField"
-      :label="t('er.config.propsPanel.title')"
-      operationKey="options"
-      field="isShowLabel"
-      v-bind="utils.addTestId('propsPanel:title')"
-    >
-      <template v-slot:content>
-        <div :class="[ns.e('collapseWrap'), ns.e('collapseWrap-left')]">
-          <el-row justify="space-between" align="middle">
-            <el-col :span="isSelectSubform ? 24 : (isPc ? 11 : 24)">
-              <el-form-item v-bind="utils.addTestId('configPanel:title')">
-                <template v-slot:label>
-                  <Icon icon="title"/>
-                </template>
-                <el-input
-                  ref="titleRef"
-                  clearable
-                  v-model="target.label"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12" v-if="isPc && !isSelectSubform">
-              <el-form-item v-bind="utils.addTestId('configPanel:titleWidth')">
-                <template v-slot:label>
-                  <Icon icon="dragWidth"/>
-                </template>
-                <el-input-number
-                  controls-position="right"
-                  v-model="target.options.labelWidth"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </div>
-      </template>
-    </PanelsConfigComponentsCollapseComponent>
-    <PanelsConfigComponentsTypeComponent
-      :label="t('er.config.propsPanel.defaultContent')"
-      :layoutType="0"
-      v-if="checkTypeBySelected(['subform'], 'defaultValue') ? target.list[0].length : checkTypeBySelected([
-      'input',
-      'textarea',
-      'time',
-      'date',
-      'number',
-      'rate',
-      'color',
-      'switch',
-      'slider',
-      'button',
-      'divider',
-      'cascader',
-      'region'
-    ], 'defaultValue') || ([2, 3].indexOf(target.options.renderType) > -1 && target.type === 'select')">
-      <template v-if="checkTypeBySelected(['cascader', 'region'], 'defaultValue')">
-        <el-cascader
-          :class="[utils.addTestId('configPanel-defaultValue', 'id')]"
-          v-model="target.options.defaultValue"
-          v-bind="typeProps"
-          clearable
-          style="width: 100%;"
-        />
-      </template>
-      <template v-else-if="checkTypeBySelected(['textarea'], 'defaultValue')">
-        <el-input
-          type="textarea"
-          rows="4"
-          v-model="target.options.defaultValue"
-          v-bind="utils.addTestId('configPanel:defaultValue')"
-        />
-      </template>
-      <template v-else-if="checkTypeBySelected(['input', 'divider'], 'defaultValue')">
-        <el-input
-          v-model="target.options.defaultValue"
-          clearable
-          v-bind="utils.addTestId('configPanel:defaultValue')"
-        />
-      </template>
-      <template v-else-if="checkTypeBySelected(['number'], 'defaultValue')">
-        <el-input-number
-          style="width: 100%;"
-          v-bind="_.merge(typeProps, utils.addTestId('configPanel:defaultValue'))"
-          v-model="target.options.defaultValue"
-        />
-      </template>
-      <template v-else-if="checkTypeBySelected(['time'], 'defaultValue')">
-        <el-time-picker
-          v-bind="typeProps"
-          style="width: 100%"
-          clearable
-          v-model="target.options.defaultValue"
-        />
-      </template>
-      <template v-else-if="checkTypeBySelected(['date'], 'defaultValue')">
-        <el-date-picker
-          :class="[utils.addTestId('configPanel-defaultValue', 'id')]"
-          v-bind="typeProps"
-          style="width: 100%"
-          v-model="target.options.defaultValue"
-          clearable
-        />
-      </template>
-      <template v-else-if="checkTypeBySelected(['rate'], 'defaultValue')">
-        <el-rate
-          v-bind="_.merge(typeProps, utils.addTestId('configPanel:defaultValue'))"
-          v-model="target.options.defaultValue"
-        />
-        <el-button v-if="target.options.defaultValue > 0" link @click="target.options.defaultValue = 0">{{t('er.public.clear')}}</el-button>
-      </template>
-      <template v-else-if="checkTypeBySelected(['switch'], 'defaultValue')">
-        <el-switch
-          v-bind="_.merge(typeProps, utils.addTestId('configPanel:defaultValue'))"
-          v-model="target.options.defaultValue"
-        />
-      </template>
-      <template v-else-if="checkTypeBySelected(['slider'], 'defaultValue')">
-        <el-slider
-          v-bind="_.merge(typeProps, utils.addTestId('configPanel:defaultValue'))"
-          v-model="target.options.defaultValue"
-          style="padding: 0 14px;"
-        />
-      </template>
-      <template v-else-if="checkTypeBySelected(['subform'], 'defaultValue')">
-        <PanelsConfigComponentsSubformDefaultValue/>
-      </template>
-      <template v-else-if="checkTypeBySelected(['select'], 'defaultValue') && [2, 3, 4].indexOf(target.options.renderType) > -1 ">
-        <el-select
-          v-model="target.options.defaultValue"
-          :class="[utils.addTestId('configPanel-defaultValue', 'id')]"
-          v-bind="typeProps">
-          <el-option
-            v-for="item in typeProps.options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </template>
-    </PanelsConfigComponentsTypeComponent>
-    <PanelsConfigComponentsTypeComponent
-      :label="t('er.public.Data')"
-      :layoutType="0"
-      v-if="checkTypeBySelected(['radio', 'checkbox', 'cascader'], 'dataEntry') || (target.options.renderType === 1 && target.type === 'select')">
-      <el-button
-        style="width: 100%;"
-        type="primary"
-        @click="dialogVisible = true"
-        v-bind="utils.addTestId('configPanel:dataEntry')"
-      >
-        {{t('er.public.dataEntry')}}
-      </el-button>
-    </PanelsConfigComponentsTypeComponent>
-    <PanelsConfigComponentsTypeComponent
-      :label="t('er.config.propsPanel.star')"
-      :layoutType="0"
-      v-if="checkTypeBySelected(['rate'], 'star')">
-      <el-input-number
-        v-bind="utils.addTestId('configPanel:star')"
-        :min="1"
-        controls-position="right"
-        v-model="target.options.max" />
-    </PanelsConfigComponentsTypeComponent>
-    <!-- placeholder -->
-    <PanelsConfigComponentsTypeComponent
-      :layoutType="0"
-      :label="t('er.config.propsPanel.placeholder')"
-      v-if="checkTypeBySelected([
-      'input',
-      'textarea',
-      'select',
-      'cascader',
-      'time',
-      'date',
-      'html',
-      'region'
-    ], 'placeholder')">
-      <el-input
-        v-if="checkTypeBySelected(['input', 'select', 'cascader', 'time', 'date', 'html', 'region'], 'placeholder')"
-        v-model="target.options.placeholder"
-        clearable
-        v-bind="utils.addTestId('configPanel:placeholder')"
-      />
-      <el-input
-        v-else-if="checkTypeBySelected(['textarea'], 'placeholder')"
-        type="textarea"
-        v-model="target.options.placeholder"
-        clearable
-        v-bind="utils.addTestId('configPanel:placeholder')"
-      />
-    </PanelsConfigComponentsTypeComponent>
-    <PanelsConfigComponentsTypeComponent
-      :layoutType="0"
-      v-if="checkTypeBySelected(['signature'], 'brushColor')"
-      :label="t('er.config.propsPanel.brushColor')"
-      v-bind="utils.addTestId('configPanel:brushColor')"
-    >
-      <el-color-picker
-        color-format="rgb"
-        v-model="target.options.penColor"
-      />
-    </PanelsConfigComponentsTypeComponent>
-    <PanelsConfigComponentsTypeComponent
-      v-if="checkTypeBySelected(['time', 'date'], 'format')"
-      :layoutType="0"
-      :label="t('er.config.propsPanel.format')">
-      <el-select
-        v-model="target.options.format"
-        style="width: 100%"
-        v-bind="utils.addTestId('configPanel:format')">
-        <el-option
-          v-for="item in options0"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-select>
-    </PanelsConfigComponentsTypeComponent>
-    <PanelsConfigComponentsTypeComponent
-      v-if="checkTypeBySelected(['date'], 'dateType')"
-      :layoutType="0"
-      :label="t('er.config.propsPanel.dateType')">
-      <el-select
-        v-model="target.options.type"
-        @change="handleChange0"
-        style="width: 100%"
-        v-bind="utils.addTestId('configPanel:dateType')"
-      >
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-select>
-    </PanelsConfigComponentsTypeComponent>
-    <PanelsConfigComponentsTypeComponent
-      v-if="checkTypeBySelected(['radio', 'checkbox'], 'displayStyle')"
-      @listener="handleTypeListener"
-      property="displayStyle"
-      :label="t('er.config.propsPanel.layout.label')"
-      :val="target.options.displayStyle"
-      :nodes="options7"
-      :layoutType="2"
-      v-bind="utils.addTestId('configPanel:displayStyle')"
-    />
-    <PanelsConfigComponentsTypeComponent
-      v-if="checkTypeBySelected(['divider'], 'contentPosition')"
-      :label="t('er.config.propsPanel.contentPosition.label')"
-      @listener="handleTypeListener"
-      property="contentPosition"
-      :height="50"
-      :fontSize="80"
-      :nodes="options10"
-      :val="target.options.contentPosition"
-      v-bind="utils.addTestId('configPanel:contentPosition')"
-    />
-    <PanelsConfigComponentsTypeComponent
-      :layoutType="0"
-      v-if="checkTypeBySelected(['textarea'], 'textareaHeight')"
-      :label="t('er.config.propsPanel.textareaHeight')">
-      <el-slider
-        v-model="target.options.rows"
-        :max="10"
-        show-input
-        v-bind="utils.addTestId('configPanel:textareaHeight')"
-      />
-    </PanelsConfigComponentsTypeComponent>
-    <div v-if="checkTypeBySelected(['uploadfile'], 'uploadfile')">
-      <el-form-item
-        :label="t('er.config.propsPanel.uploadfile.fileType')"
-        v-bind="utils.addTestId('configPanel:accept')"
-      >
-        <el-input
-          v-model="target.options.accept"
-          placeholder="输入只接受的文件类型后缀。例如 .png,.jpg" />
-      </el-form-item>
-      <el-row :gutter="8">
-        <el-col :span="12">
-          <el-form-item
-            :label="t('er.config.propsPanel.uploadfile.uploadLimit')"
-            v-bind="utils.addTestId('configPanel:uploadLimit')"
-          >
-            <el-input-number
-              style="width: 100%;"
-              :min="1"
-              controls-position="right"
-              v-model="target.options.limit" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item
-            :label="`${t('er.config.propsPanel.uploadfile.fileSize')}(MB)`"
-            v-bind="utils.addTestId('configPanel:fileSize')"
-          >
-            <el-input-number
-              style="width: 100%;"
-              v-model="target.options.size"
-              controls-position="right"
-              :min="1"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </div>
-    <el-row v-if="checkTypeBySelected(['input'], 'affix') && target.options.renderType === 1 && isPc" :gutter="8">
-      <el-col :span="12">
-        <el-form-item
-          :label="t('er.config.propsPanel.prepend')"
-          v-bind="utils.addTestId('configPanel:prepend')"
-        >
-          <el-input
-            style="width: 100%;"
-            v-model="target.options.prepend" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item
-          :label="t('er.config.propsPanel.append')"
-          v-bind="utils.addTestId('configPanel:append')"
-        >
-          <el-input
-            style="width: 100%;"
-            v-model="target.options.append"
-          />
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <el-row :gutter="8" v-if="checkTypeBySelected(['number', 'slider'], 'step')">
-      <el-col :span="type !== 'slider' ? 12 : 24">
-        <el-form-item
-          :label="t('er.config.propsPanel.step')"
-          v-bind="utils.addTestId('configPanel:step')"
-        >
-          <el-input-number
-            :min="0"
-            style="width: 100%;"
-            controls-position="right" v-model="target.options.step" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item
-          v-if="type !== 'slider'"
-          :label="t('er.config.propsPanel.precision')"
-          v-bind="utils.addTestId('configPanel:precision')"
-        >
-          <el-input-number
-            :min="0"
-            controls-position="right" v-model="target.options.precision" />
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <el-row
-      :gutter="8"
-      v-if="checkTypeBySelected(['slider'], 'sliderCount')"
-      v-bind="utils.addTestId('configPanel:sliderCount')">
-      <el-col :span="12">
-        <el-form-item :label="t('er.public.max')">
-          <el-input-number
-            controls-position="right"
-            v-model="target.options.max" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item :label="t('er.public.min')">
-          <el-input-number
-            controls-position="right" v-model="target.options.min" />
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <PanelsConfigComponentsTypeComponent
-      v-if="checkTypeBySelected(['region'], 'regionType')"
-      :label="t('er.config.propsPanel.region.label')"
-      :layoutType="0"
-      v-bind="utils.addTestId('configPanel:regionType')"
-    >
-      <el-select v-model="target.options.selectType" @change="handleChange1">
-        <el-option
-          v-for="item in options8"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-select>
-    </PanelsConfigComponentsTypeComponent>
-    <PanelsConfigComponentsTypeComponent
-      v-if="utils.checkIslineChildren(target) && target.context.parent.columns.length !== 4 && !(ER.props.layoutType === 1 && !isPc)"
-      @listener="handleTypeListener"
-      property="width"
-      :label="t('er.public.width')"
-      :height="40"
-      :fontSize="28"
-      :nodes="options1"
-      v-bind="utils.addTestId('configPanel:width')"
-    />
-    <PanelsConfigComponentsCheckboxComponent
-      v-if="checkTypeBySelected(['input', 'textarea'], 'isShowTrim')"
-      :label="t('er.config.propsPanel.trim')"
-      field="isShowTrim"
-      v-bind="utils.addTestId('configPanel:isShowTrim')"
-    />
-    <PanelsConfigComponentsCheckboxComponent
-      v-if="(checkTypeBySelected(['input'], 'wordLimit') && target.options.renderType === 1) || checkTypeBySelected(['textarea', 'number'], 'wordLimit')"
-      :label="t('er.config.propsPanel.wordLimit')"
-      field="isShowWordLimit"
-      v-bind="utils.addTestId('configPanel:wordLimit')"
-    >
-      <el-row align="middle" :gutter="8">
-        <el-col :span="11">
-          <el-form-item :label="t('er.public.min')">
-            <el-input-number
-              controls-position="right"
-              :max="(target.options.max === null || target.options.max === undefined) ? undefined : target.options.max - 1"
-              v-model="target.options.min" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="2">~</el-col>
-        <el-col :span="11">
-          <el-form-item :label="t('er.public.max')">
-            <el-input-number
-              :min="target.options.min + 1"
-              controls-position="right"
-              :step="10"
-              v-model="target.options.max" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </PanelsConfigComponentsCheckboxComponent>
-    <PanelsConfigComponentsCheckboxComponent
-      v-if="checkTypeBySelected(['date'], 'dateRange')"
-      :label="t('er.config.propsPanel.dateRange')"
-      field="isShowWordLimit"
-      v-bind="utils.addTestId('configPanel:dateRange')"
-    >
-      <PanelsConfigComponentsLimitComponent/>
-    </PanelsConfigComponentsCheckboxComponent>
-    <PanelsConfigComponentsCheckboxComponent
-      v-if="isSelectField && !checkTypeBySelected(['rate', 'switch', 'slider', 'divider'], 'required')"
-      :label="t('er.validateMsg.required')"
-      field="required"
-      v-bind="utils.addTestId('configPanel:required')"
-    />
-    <PanelsConfigComponentsTypeComponent
-      v-if="isSelectGrid"
-      @listener="handleTypeListener"
-      property="justify"
-      :label="t('er.config.gridLayout.justify.label')"
-      :height="40"
-      :fontSize="40"
-      :val="target.options.justify"
-      :nodes="options6"
-      v-bind="utils.addTestId('configPanel:justify')"
-    />
-    <PanelsConfigComponentsDataComponent3
-      v-if="checkTypeBySelected(['collapse', 'tabs'], 'Data3')"
-      v-bind="utils.addTestId('configPanel:dataEntry3')"
-    />
-    <PanelsConfigComponentsTypeComponent
-      v-if="isSelectTabs"
-      @listener="handleTypeListener"
-      property="type"
-      :label="t('er.config.tabsLayout.style.label')"
-      :height="66"
-      :fontSize="70"
-      :val="target.options.type"
-      :nodes="options4"
-      v-bind="utils.addTestId('configPanel:tabsType')"
-    />
-    <PanelsConfigComponentsTypeComponent
-      v-if="isSelectTabs"
-      @listener="handleTypeListener"
-      property="tabPosition"
-      :label="t('er.config.tabsLayout.tabPosition.label')"
-      :height="40"
-      :fontSize="66"
-      :val="target.options.tabPosition"
-      :nodes="options5"
-      v-bind="utils.addTestId('configPanel:tabPosition')"
-    />
-    <!--  <PanelsConfigComponentsTabsLayout-->
-    <!--    v-if="isSelectTabs"-->
-    <!--  />-->
-    <PanelsConfigComponentsCollapseComponent
-      v-if="checkTypeBySelected(['table', 'grid', 'col', 'collapse', 'collapseCol', 'tabs', 'tabsCol'], 'margin')"
-      :label="t('er.public.margin')"
-      operationKey="style"
-      field="isShowMargin"
-      v-bind="utils.addTestId('configPanel:margin')"
-    >
-      <template v-slot:content>
-        <PanelsConfigComponentsAllsidesComponent
-          field="margin"
-        />
-      </template>
-    </PanelsConfigComponentsCollapseComponent>
+	<div :class="ns.b()">
+		<!--    <el-form-item label="唯一标识" prop="id">-->
+		<!--      <el-tag type="warning">-->
+		<!--        {{target.id}}-->
+		<!--      </el-tag>-->
+		<!--    </el-form-item>-->
+		<el-form-item v-if="isSelectField" v-bind="utils.addTestId('configPanel:id')" :label="t('er.config.propsPanel.id')" prop="key">
+			<el-input v-model="target.key" />
+		</el-form-item>
+		<PanelsConfigComponentsCollapseComponent
+			v-if="isSelectField"
+			:label="t('er.config.propsPanel.title')"
+			operation-key="options"
+			field="isShowLabel"
+			v-bind="utils.addTestId('propsPanel:title')"
+		>
+			<template #content>
+				<div :class="[ns.e('collapseWrap'), ns.e('collapseWrap-left')]">
+					<el-row justify="space-between" align="middle">
+						<el-col :span="isSelectSubform ? 24 : isPc ? 11 : 24">
+							<el-form-item v-bind="utils.addTestId('configPanel:title')">
+								<template #label>
+									<Icon icon="title" />
+								</template>
+								<el-input ref="titleRef" v-model="target.label" clearable />
+							</el-form-item>
+						</el-col>
+						<el-col v-if="isPc && !isSelectSubform" :span="12">
+							<el-form-item v-bind="utils.addTestId('configPanel:titleWidth')">
+								<template #label>
+									<Icon icon="dragWidth" />
+								</template>
+								<el-input-number v-model="target.options.labelWidth" controls-position="right" />
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</div>
+			</template>
+		</PanelsConfigComponentsCollapseComponent>
+		<PanelsConfigComponentsTypeComponent
+			v-if="
+				checkTypeBySelected(['subform'], 'defaultValue')
+					? target.list[0].length
+					: checkTypeBySelected(
+							['input', 'textarea', 'time', 'date', 'number', 'rate', 'color', 'switch', 'slider', 'button', 'divider', 'cascader', 'region'],
+							'defaultValue'
+					  ) ||
+					  ([2, 3].indexOf(target.options.renderType) > -1 && target.type === 'select')
+			"
+			:label="t('er.config.propsPanel.defaultContent')"
+			:layout-type="0"
+		>
+			<template v-if="checkTypeBySelected(['cascader', 'region'], 'defaultValue')">
+				<el-cascader
+					v-model="target.options.defaultValue"
+					:class="[utils.addTestId('configPanel-defaultValue', 'id')]"
+					v-bind="typeProps"
+					clearable
+					style="width: 100%"
+				/>
+			</template>
+			<template v-else-if="checkTypeBySelected(['textarea'], 'defaultValue')">
+				<el-input v-model="target.options.defaultValue" type="textarea" rows="4" v-bind="utils.addTestId('configPanel:defaultValue')" />
+			</template>
+			<template v-else-if="checkTypeBySelected(['input', 'divider'], 'defaultValue')">
+				<el-input v-model="target.options.defaultValue" clearable v-bind="utils.addTestId('configPanel:defaultValue')" />
+			</template>
+			<template v-else-if="checkTypeBySelected(['number'], 'defaultValue')">
+				<el-input-number
+					v-bind="_.merge(typeProps, utils.addTestId('configPanel:defaultValue'))"
+					v-model="target.options.defaultValue"
+					style="width: 100%"
+				/>
+			</template>
+			<template v-else-if="checkTypeBySelected(['time'], 'defaultValue')">
+				<el-time-picker v-bind="typeProps" v-model="target.options.defaultValue" style="width: 100%" clearable />
+			</template>
+			<template v-else-if="checkTypeBySelected(['date'], 'defaultValue')">
+				<el-date-picker
+					v-bind="typeProps"
+					v-model="target.options.defaultValue"
+					:class="[utils.addTestId('configPanel-defaultValue', 'id')]"
+					style="width: 100%"
+					clearable
+				/>
+			</template>
+			<template v-else-if="checkTypeBySelected(['rate'], 'defaultValue')">
+				<el-rate v-bind="_.merge(typeProps, utils.addTestId('configPanel:defaultValue'))" v-model="target.options.defaultValue" />
+				<el-button v-if="target.options.defaultValue > 0" link @click="target.options.defaultValue = 0">{{ t('er.public.clear') }}</el-button>
+			</template>
+			<template v-else-if="checkTypeBySelected(['switch'], 'defaultValue')">
+				<el-switch v-bind="_.merge(typeProps, utils.addTestId('configPanel:defaultValue'))" v-model="target.options.defaultValue" />
+			</template>
+			<template v-else-if="checkTypeBySelected(['slider'], 'defaultValue')">
+				<el-slider
+					v-bind="_.merge(typeProps, utils.addTestId('configPanel:defaultValue'))"
+					v-model="target.options.defaultValue"
+					style="padding: 0 14px"
+				/>
+			</template>
+			<template v-else-if="checkTypeBySelected(['subform'], 'defaultValue')">
+				<PanelsConfigComponentsSubformDefaultValue />
+			</template>
+			<template v-else-if="checkTypeBySelected(['select'], 'defaultValue') && [2, 3, 4].indexOf(target.options.renderType) > -1">
+				<el-select v-model="target.options.defaultValue" :class="[utils.addTestId('configPanel-defaultValue', 'id')]" v-bind="typeProps">
+					<el-option v-for="item in typeProps.options" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
+			</template>
+		</PanelsConfigComponentsTypeComponent>
+		<PanelsConfigComponentsTypeComponent
+			v-if="checkTypeBySelected(['radio', 'checkbox', 'cascader'], 'dataEntry') || (target.options.renderType === 1 && target.type === 'select')"
+			:label="t('er.public.Data')"
+			:layout-type="0"
+		>
+			<el-button style="width: 100%" type="primary" v-bind="utils.addTestId('configPanel:dataEntry')" @click="dialogVisible = true">
+				{{ t('er.public.dataEntry') }}
+			</el-button>
+		</PanelsConfigComponentsTypeComponent>
+		<PanelsConfigComponentsTypeComponent v-if="checkTypeBySelected(['rate'], 'star')" :label="t('er.config.propsPanel.star')" :layout-type="0">
+			<el-input-number v-bind="utils.addTestId('configPanel:star')" v-model="target.options.max" :min="1" controls-position="right" />
+		</PanelsConfigComponentsTypeComponent>
+		<!-- placeholder -->
+		<PanelsConfigComponentsTypeComponent
+			v-if="checkTypeBySelected(['input', 'textarea', 'select', 'cascader', 'time', 'date', 'html', 'region'], 'placeholder')"
+			:layout-type="0"
+			:label="t('er.config.propsPanel.placeholder')"
+		>
+			<el-input
+				v-if="checkTypeBySelected(['input', 'select', 'cascader', 'time', 'date', 'html', 'region'], 'placeholder')"
+				v-model="target.options.placeholder"
+				clearable
+				v-bind="utils.addTestId('configPanel:placeholder')"
+			/>
+			<el-input
+				v-else-if="checkTypeBySelected(['textarea'], 'placeholder')"
+				v-model="target.options.placeholder"
+				type="textarea"
+				clearable
+				v-bind="utils.addTestId('configPanel:placeholder')"
+			/>
+		</PanelsConfigComponentsTypeComponent>
+		<PanelsConfigComponentsTypeComponent
+			v-if="checkTypeBySelected(['signature'], 'brushColor')"
+			:layout-type="0"
+			:label="t('er.config.propsPanel.brushColor')"
+			v-bind="utils.addTestId('configPanel:brushColor')"
+		>
+			<el-color-picker v-model="target.options.penColor" color-format="rgb" />
+		</PanelsConfigComponentsTypeComponent>
+		<PanelsConfigComponentsTypeComponent
+			v-if="checkTypeBySelected(['time', 'date'], 'format')"
+			:layout-type="0"
+			:label="t('er.config.propsPanel.format')"
+		>
+			<el-select v-model="target.options.format" style="width: 100%" v-bind="utils.addTestId('configPanel:format')">
+				<el-option v-for="item in options0" :key="item.value" :label="item.label" :value="item.value" />
+			</el-select>
+		</PanelsConfigComponentsTypeComponent>
+		<PanelsConfigComponentsTypeComponent
+			v-if="checkTypeBySelected(['date'], 'dateType')"
+			:layout-type="0"
+			:label="t('er.config.propsPanel.dateType')"
+		>
+			<el-select v-model="target.options.type" style="width: 100%" v-bind="utils.addTestId('configPanel:dateType')" @change="handleChange0">
+				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+			</el-select>
+		</PanelsConfigComponentsTypeComponent>
+		<PanelsConfigComponentsTypeComponent
+			v-if="checkTypeBySelected(['radio', 'checkbox'], 'displayStyle')"
+			property="displayStyle"
+			:label="t('er.config.propsPanel.layout.label')"
+			:val="target.options.displayStyle"
+			:nodes="options7"
+			:layout-type="2"
+			v-bind="utils.addTestId('configPanel:displayStyle')"
+			@listener="handleTypeListener"
+		/>
+		<PanelsConfigComponentsTypeComponent
+			v-if="checkTypeBySelected(['divider'], 'contentPosition')"
+			:label="t('er.config.propsPanel.contentPosition.label')"
+			property="contentPosition"
+			:height="50"
+			:font-size="80"
+			:nodes="options10"
+			:val="target.options.contentPosition"
+			v-bind="utils.addTestId('configPanel:contentPosition')"
+			@listener="handleTypeListener"
+		/>
+		<PanelsConfigComponentsTypeComponent
+			v-if="checkTypeBySelected(['textarea'], 'textareaHeight')"
+			:layout-type="0"
+			:label="t('er.config.propsPanel.textareaHeight')"
+		>
+			<el-slider v-model="target.options.rows" :max="10" show-input v-bind="utils.addTestId('configPanel:textareaHeight')" />
+		</PanelsConfigComponentsTypeComponent>
+		<div v-if="checkTypeBySelected(['uploadfile'], 'uploadfile')">
+			<el-form-item :label="t('er.config.propsPanel.uploadfile.fileType')" v-bind="utils.addTestId('configPanel:accept')">
+				<el-input v-model="target.options.accept" placeholder="输入只接受的文件类型后缀。例如 .png,.jpg" />
+			</el-form-item>
+			<el-row :gutter="8">
+				<el-col :span="12">
+					<el-form-item :label="t('er.config.propsPanel.uploadfile.uploadLimit')" v-bind="utils.addTestId('configPanel:uploadLimit')">
+						<el-input-number v-model="target.options.limit" style="width: 100%" :min="1" controls-position="right" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item :label="`${t('er.config.propsPanel.uploadfile.fileSize')}(MB)`" v-bind="utils.addTestId('configPanel:fileSize')">
+						<el-input-number v-model="target.options.size" style="width: 100%" controls-position="right" :min="1" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</div>
+		<el-row v-if="checkTypeBySelected(['input'], 'affix') && target.options.renderType === 1 && isPc" :gutter="8">
+			<el-col :span="12">
+				<el-form-item :label="t('er.config.propsPanel.prepend')" v-bind="utils.addTestId('configPanel:prepend')">
+					<el-input v-model="target.options.prepend" style="width: 100%" />
+				</el-form-item>
+			</el-col>
+			<el-col :span="12">
+				<el-form-item :label="t('er.config.propsPanel.append')" v-bind="utils.addTestId('configPanel:append')">
+					<el-input v-model="target.options.append" style="width: 100%" />
+				</el-form-item>
+			</el-col>
+		</el-row>
+		<el-row v-if="checkTypeBySelected(['number', 'slider'], 'step')" :gutter="8">
+			<el-col :span="type !== 'slider' ? 12 : 24">
+				<el-form-item :label="t('er.config.propsPanel.step')" v-bind="utils.addTestId('configPanel:step')">
+					<el-input-number v-model="target.options.step" :min="0" style="width: 100%" controls-position="right" />
+				</el-form-item>
+			</el-col>
+			<el-col :span="12">
+				<el-form-item v-if="type !== 'slider'" :label="t('er.config.propsPanel.precision')" v-bind="utils.addTestId('configPanel:precision')">
+					<el-input-number v-model="target.options.precision" :min="0" controls-position="right" />
+				</el-form-item>
+			</el-col>
+		</el-row>
+		<el-row v-if="checkTypeBySelected(['slider'], 'sliderCount')" :gutter="8" v-bind="utils.addTestId('configPanel:sliderCount')">
+			<el-col :span="12">
+				<el-form-item :label="t('er.public.max')">
+					<el-input-number v-model="target.options.max" controls-position="right" />
+				</el-form-item>
+			</el-col>
+			<el-col :span="12">
+				<el-form-item :label="t('er.public.min')">
+					<el-input-number v-model="target.options.min" controls-position="right" />
+				</el-form-item>
+			</el-col>
+		</el-row>
+		<PanelsConfigComponentsTypeComponent
+			v-if="checkTypeBySelected(['region'], 'regionType')"
+			:label="t('er.config.propsPanel.region.label')"
+			:layout-type="0"
+			v-bind="utils.addTestId('configPanel:regionType')"
+		>
+			<el-select v-model="target.options.selectType" @change="handleChange1">
+				<el-option v-for="item in options8" :key="item.value" :label="item.label" :value="item.value" />
+			</el-select>
+		</PanelsConfigComponentsTypeComponent>
+		<PanelsConfigComponentsTypeComponent
+			v-if="utils.checkIslineChildren(target) && target.context.parent.columns.length !== 4 && !(ER.props.layoutType === 1 && !isPc)"
+			property="width"
+			:label="t('er.public.width')"
+			:height="40"
+			:font-size="28"
+			:nodes="options1"
+			v-bind="utils.addTestId('configPanel:width')"
+			@listener="handleTypeListener"
+		/>
+		<PanelsConfigComponentsCheckboxComponent
+			v-if="checkTypeBySelected(['input', 'textarea'], 'isShowTrim')"
+			:label="t('er.config.propsPanel.trim')"
+			field="isShowTrim"
+			v-bind="utils.addTestId('configPanel:isShowTrim')"
+		/>
+		<PanelsConfigComponentsCheckboxComponent
+			v-if="
+				(checkTypeBySelected(['input'], 'wordLimit') && target.options.renderType === 1) || checkTypeBySelected(['textarea', 'number'], 'wordLimit')
+			"
+			:label="t('er.config.propsPanel.wordLimit')"
+			field="isShowWordLimit"
+			v-bind="utils.addTestId('configPanel:wordLimit')"
+		>
+			<el-row align="middle" :gutter="8">
+				<el-col :span="11">
+					<el-form-item :label="t('er.public.min')">
+						<el-input-number
+							v-model="target.options.min"
+							controls-position="right"
+							:max="target.options.max === null || target.options.max === undefined ? undefined : target.options.max - 1"
+						/>
+					</el-form-item>
+				</el-col>
+				<el-col :span="2">~</el-col>
+				<el-col :span="11">
+					<el-form-item :label="t('er.public.max')">
+						<el-input-number v-model="target.options.max" :min="target.options.min + 1" controls-position="right" :step="10" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</PanelsConfigComponentsCheckboxComponent>
+		<PanelsConfigComponentsCheckboxComponent
+			v-if="checkTypeBySelected(['date'], 'dateRange')"
+			:label="t('er.config.propsPanel.dateRange')"
+			field="isShowWordLimit"
+			v-bind="utils.addTestId('configPanel:dateRange')"
+		>
+			<PanelsConfigComponentsLimitComponent />
+		</PanelsConfigComponentsCheckboxComponent>
+		<PanelsConfigComponentsCheckboxComponent
+			v-if="isSelectField && !checkTypeBySelected(['rate', 'switch', 'slider', 'divider'], 'required')"
+			:label="t('er.validateMsg.required')"
+			field="required"
+			v-bind="utils.addTestId('configPanel:required')"
+		/>
+		<PanelsConfigComponentsTypeComponent
+			v-if="isSelectGrid"
+			property="justify"
+			:label="t('er.config.gridLayout.justify.label')"
+			:height="40"
+			:font-size="40"
+			:val="target.options.justify"
+			:nodes="options6"
+			v-bind="utils.addTestId('configPanel:justify')"
+			@listener="handleTypeListener"
+		/>
+		<PanelsConfigComponentsDataComponent3
+			v-if="checkTypeBySelected(['collapse', 'tabs'], 'Data3')"
+			v-bind="utils.addTestId('configPanel:dataEntry3')"
+		/>
+		<PanelsConfigComponentsTypeComponent
+			v-if="isSelectTabs"
+			property="type"
+			:label="t('er.config.tabsLayout.style.label')"
+			:height="66"
+			:font-size="70"
+			:val="target.options.type"
+			:nodes="options4"
+			v-bind="utils.addTestId('configPanel:tabsType')"
+			@listener="handleTypeListener"
+		/>
+		<PanelsConfigComponentsTypeComponent
+			v-if="isSelectTabs"
+			property="tabPosition"
+			:label="t('er.config.tabsLayout.tabPosition.label')"
+			:height="40"
+			:font-size="66"
+			:val="target.options.tabPosition"
+			:nodes="options5"
+			v-bind="utils.addTestId('configPanel:tabPosition')"
+			@listener="handleTypeListener"
+		/>
+		<!--  <PanelsConfigComponentsTabsLayout-->
+		<!--    v-if="isSelectTabs"-->
+		<!--  />-->
+		<PanelsConfigComponentsCollapseComponent
+			v-if="checkTypeBySelected(['table', 'grid', 'col', 'collapse', 'collapseCol', 'tabs', 'tabsCol'], 'margin')"
+			:label="t('er.public.margin')"
+			operation-key="style"
+			field="isShowMargin"
+			v-bind="utils.addTestId('configPanel:margin')"
+		>
+			<template #content>
+				<PanelsConfigComponentsAllsidesComponent field="margin" />
+			</template>
+		</PanelsConfigComponentsCollapseComponent>
 
-    <PanelsConfigComponentsCollapseComponent
-      v-if="checkTypeBySelected(['grid', 'col', 'collapse', 'collapseCol', 'tabs', 'tabsCol', 'td'], 'padding')"
-      :label="t('er.public.padding')"
-      operationKey="style"
-      field="isShowPadding"
-      v-bind="utils.addTestId('configPanel:padding')"
-    >
-      <template v-slot:content>
-        <PanelsConfigComponentsAllsidesComponent
-          field="padding"
-        />
-      </template>
-    </PanelsConfigComponentsCollapseComponent>
-    <PanelsConfigComponentsCollapseComponent
-      v-if="checkTypeBySelected(['grid', 'col', 'collapse', 'collapseCol', 'tabs', 'tabsCol', 'td', 'table'], 'background')"
-      :label="t('er.public.background')"
-      operationKey="style"
-      field="isShowBackground"
-      v-bind="utils.addTestId('configPanel:background')"
-    >
-      <template v-slot:subSelect>
-        <div :class="[ns.e('collapseSubSelect')]">
-          <el-dropdown
-            @command="(command) => { bgStatus = command }"
-          >
-        <span>
-          {{ bgStatus ? t('er.public.image') : t('er.public.color') }}<el-icon class="el-icon--right">
-          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path></svg>
-        </el-icon>
-        </span>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item :command="0">{{t('er.public.color')}}</el-dropdown-item>
-                <el-dropdown-item :command="1">{{t('er.public.image')}}</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-      </template>
-      <template v-slot:content>
-        <PanelsConfigComponentsBackgroundComponent/>
-      </template>
-    </PanelsConfigComponentsCollapseComponent>
-    <!--  <PanelsConfigComponentsBackgroundComponent-->
-    <!--    v-if="checkTypeBySelected(['grid', 'col', 'collapse', 'collapseCol', 'tabs', 'tabsCol', 'td', 'table'])"-->
-    <!--  />-->
-    <PanelsConfigComponentsCollapseComponent
-      v-if="checkTypeBySelected(['grid', 'col', 'collapse', 'collapseCol', 'tabs', 'tabsCol', 'table'], 'borderLine')"
-      :label="t('er.config.borderComponent.borderLine')"
-      operationKey="style"
-      field="isShowBorder"
-      v-bind="utils.addTestId('configPanel:borderLine')"
-    >
-      <template v-if="!checkTypeBySelected(['table', 'borderLine'])" v-slot:subSelect>
-        <div :class="[ns.e('collapseSubSelect')]">
-          <el-dropdown
-            @command="(command) => target.style.border.style = command"
-          >
-        <span>
-          {{ target.style.border && target.style.border.style }}<el-icon class="el-icon--right">
-          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path></svg>
-        </el-icon>
-        </span>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item :command="item" v-for="item in options2" :key="item">{{ item }}</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-      </template>
-      <template v-slot:content>
-        <div :class="[ns.e('collapseWrap'), ns.e('collapseWrap-left')]">
-          <PanelsConfigComponentsBorderComponent
-          />
-        </div>
-      </template>
-    </PanelsConfigComponentsCollapseComponent>
-    <PanelsConfigComponentsCheckboxComponent
-      v-if="isSelectCollapse" :label="t('er.config.propsPanel.accordion')"
-      field="accordion"
-      v-bind="utils.addTestId('configPanel:accordion')"
-    >
-    </PanelsConfigComponentsCheckboxComponent>
-    <template v-if="isSelectField && !checkTypeBySelected(['divider'])">
-      <PanelsConfigComponentsCheckboxComponent
-        :label="t('er.public.disabled')"
-        field="disabled"
-        v-bind="utils.addTestId('configPanel:disabled')"
-      >
-      </PanelsConfigComponentsCheckboxComponent>
-      <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['input'], 'showPassword') && target.options.renderType === 1" :label="t('er.config.propsPanel.showPassword')" field="showPassword">
-      </PanelsConfigComponentsCheckboxComponent>
-      <PanelsConfigComponentsCheckboxComponent
-        v-if="checkTypeBySelected(['select', 'cascader', 'uploadfile'], 'multiple')"
-        :label="t('er.config.propsPanel.multiple')"
-        @change="handleMultipleChange"
-        field="multiple"
-        v-bind="utils.addTestId('configPanel:multiple')"
-      >
-      </PanelsConfigComponentsCheckboxComponent>
-      <PanelsConfigComponentsCheckboxComponent
-        v-if="checkTypeBySelected(['select', 'cascader', 'transfer', 'region'], 'filterable')"
-        :label="t('er.config.propsPanel.filterable')"
-        field="filterable"
-        v-bind="utils.addTestId('configPanel:filterable')"
-      >
-      </PanelsConfigComponentsCheckboxComponent>
-      <PanelsConfigComponentsCheckboxComponent
-        v-if="isPc && checkTypeBySelected(['number'], 'controls')"
-        :label="t('er.config.propsPanel.numberControls.label')"
-        field="controls"
-        v-bind="utils.addTestId('configPanel:controls')"
-      >
-        <PanelsConfigComponentsTypeComponent
-          @listener="handleTypeListener"
-          property="controlsPosition"
-          :height="30"
-          :fontSize="50"
-          :nodes="options9"
-          :val="target.options.controlsPosition"
-        />
-      </PanelsConfigComponentsCheckboxComponent>
-      <PanelsConfigComponentsCheckboxComponent
-        v-if="checkTypeBySelected(['rate'], 'allowHalf')"
-        :label="t('er.config.propsPanel.allowHalf')"
-        field="allowHalf"
-        v-bind="utils.addTestId('configPanel:allowHalf')"
-      >
-      </PanelsConfigComponentsCheckboxComponent>
-      <PanelsConfigComponentsCheckboxComponent v-if="checkTypeBySelected(['color'], 'alpha')" :label="t('er.config.propsPanel.alpha')" field="showAlpha">
-      </PanelsConfigComponentsCheckboxComponent>
-      <PanelsConfigComponentsCheckboxComponent
-        v-if="checkTypeBySelected(['cascader'], 'anyNode')"
-        :label="t('er.config.propsPanel.anyNode')"
-        field="checkStrictly"
-        @change="checkLogicData"
-        v-bind="utils.addTestId('configPanel:anyNode')"
-      />
-      <PanelsConfigComponentsCheckboxComponent
-        v-if="checkTypeBySelected(['input', 'select', 'time', 'date', 'cascader', 'region'], 'clearable')"
-        :label="t('er.config.propsPanel.clearable')"
-        field="clearable"
-        v-bind="utils.addTestId('configPanel:clearable')"
-      >
-      </PanelsConfigComponentsCheckboxComponent>
-    </template>
-  </div>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="t('er.public.dataEntry')"
-    :destroy-on-close="true"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    append-to-body
-    width="80%"
-    draggable
-  >
-    <PanelsConfigComponentsDataComponent2 v-if="checkTypeBySelected(['cascader'], 'data2')" ref="dataRef"></PanelsConfigComponentsDataComponent2>
-    <PanelsConfigComponentsDataComponent1 v-else ref="dataRef"></PanelsConfigComponentsDataComponent1>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="handleAction(2)">
-          {{t('er.public.cancel')}}
-        </el-button>
-        <el-button type="primary" @click="handleAction(1)">
-          {{t('er.public.confirm')}}
-        </el-button>
-      </span>
-    </template>
-  </el-dialog>
+		<PanelsConfigComponentsCollapseComponent
+			v-if="checkTypeBySelected(['grid', 'col', 'collapse', 'collapseCol', 'tabs', 'tabsCol', 'td'], 'padding')"
+			:label="t('er.public.padding')"
+			operation-key="style"
+			field="isShowPadding"
+			v-bind="utils.addTestId('configPanel:padding')"
+		>
+			<template #content>
+				<PanelsConfigComponentsAllsidesComponent field="padding" />
+			</template>
+		</PanelsConfigComponentsCollapseComponent>
+		<PanelsConfigComponentsCollapseComponent
+			v-if="checkTypeBySelected(['grid', 'col', 'collapse', 'collapseCol', 'tabs', 'tabsCol', 'td', 'table'], 'background')"
+			:label="t('er.public.background')"
+			operation-key="style"
+			field="isShowBackground"
+			v-bind="utils.addTestId('configPanel:background')"
+		>
+			<template #subSelect>
+				<div :class="[ns.e('collapseSubSelect')]">
+					<el-dropdown
+						@command="
+							command => {
+								bgStatus = command
+							}
+						"
+					>
+						<span>
+							{{ bgStatus ? t('er.public.image') : t('er.public.color')
+							}}<el-icon class="el-icon--right">
+								<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728="">
+									<path
+										fill="currentColor"
+										d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
+									></path>
+								</svg>
+							</el-icon>
+						</span>
+						<template #dropdown>
+							<el-dropdown-menu>
+								<el-dropdown-item :command="0">{{ t('er.public.color') }}</el-dropdown-item>
+								<el-dropdown-item :command="1">{{ t('er.public.image') }}</el-dropdown-item>
+							</el-dropdown-menu>
+						</template>
+					</el-dropdown>
+				</div>
+			</template>
+			<template #content>
+				<PanelsConfigComponentsBackgroundComponent />
+			</template>
+		</PanelsConfigComponentsCollapseComponent>
+		<!--  <PanelsConfigComponentsBackgroundComponent-->
+		<!--    v-if="checkTypeBySelected(['grid', 'col', 'collapse', 'collapseCol', 'tabs', 'tabsCol', 'td', 'table'])"-->
+		<!--  />-->
+		<PanelsConfigComponentsCollapseComponent
+			v-if="checkTypeBySelected(['grid', 'col', 'collapse', 'collapseCol', 'tabs', 'tabsCol', 'table'], 'borderLine')"
+			:label="t('er.config.borderComponent.borderLine')"
+			operation-key="style"
+			field="isShowBorder"
+			v-bind="utils.addTestId('configPanel:borderLine')"
+		>
+			<template v-if="!checkTypeBySelected(['table', 'borderLine'])" #subSelect>
+				<div :class="[ns.e('collapseSubSelect')]">
+					<el-dropdown @command="command => (target.style.border.style = command)">
+						<span>
+							{{ target.style.border && target.style.border.style
+							}}<el-icon class="el-icon--right">
+								<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728="">
+									<path
+										fill="currentColor"
+										d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
+									></path>
+								</svg>
+							</el-icon>
+						</span>
+						<template #dropdown>
+							<el-dropdown-menu>
+								<el-dropdown-item v-for="item in options2" :key="item" :command="item">{{ item }}</el-dropdown-item>
+							</el-dropdown-menu>
+						</template>
+					</el-dropdown>
+				</div>
+			</template>
+			<template #content>
+				<div :class="[ns.e('collapseWrap'), ns.e('collapseWrap-left')]">
+					<PanelsConfigComponentsBorderComponent />
+				</div>
+			</template>
+		</PanelsConfigComponentsCollapseComponent>
+		<PanelsConfigComponentsCheckboxComponent
+			v-if="isSelectCollapse"
+			:label="t('er.config.propsPanel.accordion')"
+			field="accordion"
+			v-bind="utils.addTestId('configPanel:accordion')"
+		>
+		</PanelsConfigComponentsCheckboxComponent>
+		<template v-if="isSelectField && !checkTypeBySelected(['divider'])">
+			<PanelsConfigComponentsCheckboxComponent :label="t('er.public.disabled')" field="disabled" v-bind="utils.addTestId('configPanel:disabled')">
+			</PanelsConfigComponentsCheckboxComponent>
+			<PanelsConfigComponentsCheckboxComponent
+				v-if="checkTypeBySelected(['input'], 'showPassword') && target.options.renderType === 1"
+				:label="t('er.config.propsPanel.showPassword')"
+				field="showPassword"
+			>
+			</PanelsConfigComponentsCheckboxComponent>
+			<PanelsConfigComponentsCheckboxComponent
+				v-if="checkTypeBySelected(['select', 'cascader', 'uploadfile'], 'multiple')"
+				:label="t('er.config.propsPanel.multiple')"
+				field="multiple"
+				v-bind="utils.addTestId('configPanel:multiple')"
+				@change="handleMultipleChange"
+			>
+			</PanelsConfigComponentsCheckboxComponent>
+			<PanelsConfigComponentsCheckboxComponent
+				v-if="checkTypeBySelected(['select', 'cascader', 'transfer', 'region'], 'filterable')"
+				:label="t('er.config.propsPanel.filterable')"
+				field="filterable"
+				v-bind="utils.addTestId('configPanel:filterable')"
+			>
+			</PanelsConfigComponentsCheckboxComponent>
+			<PanelsConfigComponentsCheckboxComponent
+				v-if="isPc && checkTypeBySelected(['number'], 'controls')"
+				:label="t('er.config.propsPanel.numberControls.label')"
+				field="controls"
+				v-bind="utils.addTestId('configPanel:controls')"
+			>
+				<PanelsConfigComponentsTypeComponent
+					property="controlsPosition"
+					:height="30"
+					:font-size="50"
+					:nodes="options9"
+					:val="target.options.controlsPosition"
+					@listener="handleTypeListener"
+				/>
+			</PanelsConfigComponentsCheckboxComponent>
+			<PanelsConfigComponentsCheckboxComponent
+				v-if="checkTypeBySelected(['rate'], 'allowHalf')"
+				:label="t('er.config.propsPanel.allowHalf')"
+				field="allowHalf"
+				v-bind="utils.addTestId('configPanel:allowHalf')"
+			>
+			</PanelsConfigComponentsCheckboxComponent>
+			<PanelsConfigComponentsCheckboxComponent
+				v-if="checkTypeBySelected(['color'], 'alpha')"
+				:label="t('er.config.propsPanel.alpha')"
+				field="showAlpha"
+			>
+			</PanelsConfigComponentsCheckboxComponent>
+			<PanelsConfigComponentsCheckboxComponent
+				v-if="checkTypeBySelected(['cascader'], 'anyNode')"
+				:label="t('er.config.propsPanel.anyNode')"
+				field="checkStrictly"
+				v-bind="utils.addTestId('configPanel:anyNode')"
+				@change="checkLogicData"
+			/>
+			<PanelsConfigComponentsCheckboxComponent
+				v-if="checkTypeBySelected(['input', 'select', 'time', 'date', 'cascader', 'region'], 'clearable')"
+				:label="t('er.config.propsPanel.clearable')"
+				field="clearable"
+				v-bind="utils.addTestId('configPanel:clearable')"
+			>
+			</PanelsConfigComponentsCheckboxComponent>
+		</template>
+	</div>
+	<el-dialog
+		v-model="dialogVisible"
+		:title="t('er.public.dataEntry')"
+		:destroy-on-close="true"
+		:close-on-click-modal="false"
+		:close-on-press-escape="false"
+		append-to-body
+		width="80%"
+		draggable
+	>
+		<PanelsConfigComponentsDataComponent2 v-if="checkTypeBySelected(['cascader'], 'data2')" ref="dataRef"></PanelsConfigComponentsDataComponent2>
+		<PanelsConfigComponentsDataComponent1 v-else ref="dataRef"></PanelsConfigComponentsDataComponent1>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="handleAction(2)">
+					{{ t('er.public.cancel') }}
+				</el-button>
+				<el-button type="primary" @click="handleAction(1)">
+					{{ t('er.public.confirm') }}
+				</el-button>
+			</span>
+		</template>
+	</el-dialog>
 </template>

src/components/packages/formEditor/components/Selection/selectElement.jsx

@@ -1,346 +1,383 @@
-import {
-  withModifiers,
-  resolveComponent,
-  ref,
-  useSlots,
-  onMounted,
-  useAttrs,
-  unref,
-  onBeforeUnmount,
-  inject,
-  computed
-} from 'vue'
+import { withModifiers, resolveComponent, ref, useSlots, onMounted, useAttrs, unref, onBeforeUnmount, inject, computed } from 'vue'
 import { isHTMLTag } from '@vue/shared'
 import hooks from '@ER/hooks'
 import utils from '@ER/utils'
 import _ from 'lodash-es'
 import Icon from '@ER/icon'
 export default {
-  name: 'SelectElement',
-  inheritAttrs: false,
-  customOptions: {},
-  props: {
-    data: Object,
-    tag: {
-      type: String,
-      default: 'div'
-    },
-    parent: Object,
-    hasMask: {
-      type: Boolean,
-      default: false
-    },
-    hasDrag: {
-      type: Boolean,
-      default: false
-    },
-    hasDel: {
-      type: Boolean,
-      default: false
-    },
-    hasCopy: {
-      type: Boolean,
-      default: false
-    },
-    hasTableCellOperator: {
-      type: Boolean,
-      default: false
-    },
-    hasWidthScale: {
-      type: Boolean,
-      default: false
-    },
-    hasInserColumn: {
-      type: Boolean,
-      default: false
-    },
-    hasInserRow: {
-      type: Boolean,
-      default: false
-    },
-    hasAddCol: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup (props) {
-    const ER = inject('Everright')
-    const {
-      t
-    } = hooks.useI18n()
-    const ns = hooks.useNamespace('selectElement')
-    const isHover = ref(false)
-    const isInlineChildren = utils.checkIslineChildren(props.data)
-    const {
-      target,
-      setSelection,
-      state,
-      isEditModel,
-      isSelectRoot,
-      isPc
-    } = hooks.useTarget()
-    const id = hooks.useCss(props.data, state.platform)
-    const visible = ref(false)
-    const slots = useSlots()
-    const isWarning = ref(false)
-    const isField = utils.checkIsField(props.data)
-    const handleClick = (e) => {
-      setSelection(props.data)
-    }
-    if (props.data.type && isField) {
-      state.validateStates.push({
-        data: props.data,
-        isWarning
-      })
-    }
-    onBeforeUnmount(() => {
-      const index = _.findIndex(state.validateStates, { data: { id: props.data.id } })
-      if (index !== -1) {
-        state.validateStates.splice(index, 1)
-      }
-    })
-    const handleCommand = (command) => {
-      const [fn, param] = command.split(' ')
-      props.data.context[fn](param)
-    }
-    const isShowCell = ref(false)
-    const renderTableCellOperator = () => {
-      const slots = {
-        dropdown: () => {
-          let node = (
-            <el-dropdown-menu>
-              <el-dropdown-item command="insert left">{t('er.selection.insertLeft')}</el-dropdown-item>
-              <el-dropdown-item command="insert right">{t('er.selection.insertRight')}</el-dropdown-item>
-              <el-dropdown-item command="insert top">{t('er.selection.insertTop')}</el-dropdown-item>
-              <el-dropdown-item command="insert bottom">{t('er.selection.insertBottom')}</el-dropdown-item>
-              <el-dropdown-item command="merge left" disabled={props.data.context.isDisableMargeLeft} divided>{t('er.selection.mergeLeft')}</el-dropdown-item>
-              <el-dropdown-item command="merge right" disabled={props.data.context.isDisableMargeRight}>{t('er.selection.mergeRight')}</el-dropdown-item>
-              <el-dropdown-item command="merge row" disabled={props.data.context.isDisableMargeRow}>{t('er.selection.mergeRow')}</el-dropdown-item>
-              <el-dropdown-item command="merge top" disabled={props.data.context.isDisableMargeTop} divided>{t('er.selection.mergeTop')}</el-dropdown-item>
-              <el-dropdown-item command="merge bottom" disabled={props.data.context.isDisableMargeBottom}>{t('er.selection.mergeBottom')}</el-dropdown-item>
-              <el-dropdown-item command="merge column" disabled={props.data.context.isDisableMargeColumn}>{t('er.selection.mergeColumn')}</el-dropdown-item>
-              <el-dropdown-item command="del row" divided disabled={props.data.context.isDisableDelRow}>{t('er.selection.delRow')}</el-dropdown-item>
-              <el-dropdown-item command="del column" disabled={props.data.context.isDisableDelColumn}>{t('er.selection.delColumn')}</el-dropdown-item>
-              <el-dropdown-item command="split column" disabled={props.data.context.isDisableSplitColumn} divided>{t('er.selection.splitColumn')}</el-dropdown-item>
-              <el-dropdown-item command="split row" disabled={props.data.context.isDisableSplitRow}>{t('er.selection.splitRow')}</el-dropdown-item>
-            </el-dropdown-menu>
-          )
-          if (!isShowCell.value) {
-            node = ''
-          }
-          return node
-        }
-      }
-      return (
-        <el-dropdown
-          trigger="hover"
-          onCommand={handleCommand}
-          onVisible-change={(val) => {
-            isShowCell.value = val
-            if (!val) {
-              isHover.value = false
-            }
-          }}
-          v-slots={slots}>
-          <Icon class={[ns.e('tableOperator')]} icon="tableOperation"></Icon>
-        </el-dropdown>
-      )
-    }
-    const handleAction = (type) => {
-      const index = type !== 5 && props.parent.indexOf(props.data)
-      switch (type) {
-        case 1:
-          if (ER.props.delHandle(props.data) === false) return false
-          props.data.context.delete()
-          utils.deepTraversal(props.data, (node) => {
-            if (utils.checkIsField(node)) {
-              ER.delField(node)
-            }
-          })
-          if (/^(radio|checkbox|select)$/.test(props.data.type)) {
-            delete state.data[props.data.options.dataKey]
-          }
-          if (props.parent.length > 0) {
-            if (index === props.parent.length) {
-              setSelection(props.parent[index - 1])
-            } else {
-              setSelection(props.parent[index])
-            }
-          } else {
-            setSelection('root')
-          }
-          break
-        case 2:
-          if (ER.props.copyHandle(props.data) === false) return false
-          props.data.context.copy()
-          const copyData = props.parent[index + 1]
-          setSelection(copyData)
-          utils.deepTraversal(copyData, (node) => {
-            ER.addFieldData(node, true)
-            if (utils.checkIsField(node)) {
-              ER.addField(node)
-            }
-          })
-          break
-        case 3:
-          _.last(props.data.context.columns[0]).context.insert('bottom')
-          break
-        case 4:
-          _.last(props.data.context.columns)[0].context.insert('right')
-          break
-        case 5:
-          let parent = props.data.context.parent
-          if (/^(inline|tr)$/.test(parent.type)) {
-            parent = parent.context.parent
-          }
-          setSelection(Array.isArray(parent) ? 'root' : parent)
-          break
-        case 6:
-          props.data.context.appendCol()
-          break
-      }
-    }
-    const elementRef = ref()
-    const widthScaleElement = ref()
-    const isScale = ref(false)
-    const isShowWidthScale = computed(() => props.hasWidthScale && !(ER.props.layoutType === 1 && !isPc.value))
-    onMounted(() => {
-      if (!unref(isEditModel)) return false
-      const hoverEl = elementRef.value.$el || elementRef.value
-      const widthScaleEl = widthScaleElement.value
-      hoverEl.addEventListener('mouseover', (e) => {
-        if (!state.widthScaleLock) {
-          isHover.value = true
-        }
-        e.stopPropagation()
-      })
-      hoverEl.addEventListener('mouseout', (e) => {
-        // console.log(elementRef.value.contains(e.target))
-        if (isShowCell.value) return false
-        isHover.value = false
-        e.stopPropagation()
-      })
-      if (isShowWidthScale.value) {
-        // if (!hoverEl.offsetParent) return false
-        widthScaleEl.addEventListener('mousedown', (e) => {
-          e.preventDefault()
-          const columnWidth = hoverEl.offsetParent.offsetWidth / 24
-          state.widthScaleLock = isScale.value = true
-          const oldX = e.clientX
-          const oldWidth = hoverEl.offsetWidth
-          const onMouseMove = (e) => {
-            if (!isInlineChildren) {
-              let offset = Math.ceil((oldWidth + Math.round((e.clientX - oldX) / columnWidth) * columnWidth) / columnWidth)
-              if (offset >= 24) {
-                offset = 24
-              }
-              if (offset <= 6) {
-                offset = 6
-              }
-              props.data.options.span = offset
-            } else {
-              // const isFieldWidth = _.isObject(props.data.style.width)
-              const curNewWidth = oldWidth + e.clientX - oldX
-              let curWidth = Math.round(curNewWidth / hoverEl.parentNode.offsetWidth * 100)
-              if (curWidth <= 25) {
-                curWidth = 25
-              }
-              utils.syncWidthByPlatform(props.data, state.platform, false, curWidth)
-            }
-          }
-          const onMouseUp = () => {
-            document.removeEventListener('mouseup', onMouseUp)
-            document.removeEventListener('mousemove', onMouseMove)
-            state.widthScaleLock = isScale.value = false
-          }
-          document.addEventListener('mouseup', onMouseUp)
-          document.addEventListener('mousemove', onMouseMove)
-        })
-      }
-    })
-    const TagComponent = isHTMLTag(props.tag) ? props.tag : resolveComponent(props.tag)
-    const Selected = computed(() => {
-      return target.value.id === props.data.id && ns.is('Selected')
-    })
-    const maskNode = (
-      <div class={[ns.e('mask')]}>
-      </div>
-    )
-    const isShowCopy = computed(() => isInlineChildren ? props.hasCopy && props.data.context.parent.columns.length < ER.props.inlineMax : props.hasCopy)
-    // const isShowSelectParent = computed(() => {
-    //   return !isSelectRoot.value
-    // })
-    return () => {
-      return (
-        <TagComponent
-          class={id.value}
-          {...useAttrs()}
-          class={[
-            ns.b(),
-            unref(isEditModel) && ER.props.dragMode === 'full' && props.hasDrag && 'ER-handle',
-            !isField && ns.e('borderless'),
-            unref(isEditModel) && ns.e('editor'),
-            unref(isEditModel) && Selected.value,
-            unref(isEditModel) && isHover.value && ns.e('hover'),
-            unref(isEditModel) && isScale.value && ns.e('isScale'),
-            unref(isEditModel) && isWarning.value && ns.is('Warning')
-          ]}
-          ref={elementRef} onClick={unref(isEditModel) && withModifiers(handleClick, ['stop'])}
-        >
-          {slots.default()}
-          {!isPc.value && (<span></span>)}
-          {
-            ER.props.dragMode === 'icon' &&
-            unref(isEditModel) && (
-              <div class={[ns.e('topLeft')]}>
-                {props.hasDrag && (<Icon class={['ER-handle', ns.e('dragIcon')]} icon="Rank"></Icon>)}
-              </div>
-            )
-          }
-          {
-            unref(isEditModel) && (
-              <div class={[ns.e('bottomRight')]}>
-                {/* {isShowSelectParent.value && (<Icon class={['handle', ns.e('selectParent')]} icon="top"></Icon>)} */}
-                <Icon class={['handle', ns.e('selectParent')]} onClick={withModifiers((e) => {
-                  handleAction(5)
-                }, ['stop'])} icon="top"></Icon>
-                {props.hasDel && (
-                  <Icon class={[ns.e('copy')]} onClick={withModifiers((e) => {
-                    handleAction(1)
-                  }, ['stop'])} icon="delete"></Icon>
-                )}
-                {
-                  props.hasInserColumn && (<Icon class={[ns.e('charulieIcon')]} onClick={withModifiers((e) => {
-                    handleAction(4)
-                  }, ['stop'])} icon="tableInsertCol"></Icon>)
-                }
-                {
-                  props.hasInserRow && (<Icon class={[ns.e('charuhangIcon')]} onClick={withModifiers((e) => {
-                    handleAction(3)
-                  }, ['stop'])} icon="tableInsertRow"></Icon>)
-                }
-                {
-                  props.hasAddCol && (<Icon class={[ns.e('addCol')]} onClick={withModifiers((e) => {
-                    handleAction(6)
-                  }, ['stop'])} icon="plus"></Icon>)
-                }
-                {
-                  isShowCopy.value && (<Icon class={[ns.e('copyIcon')]} onClick={withModifiers((e) => {
-                    handleAction(2)
-                  }, ['stop'])} icon="copy"></Icon>)
-                }
-                {isShowWidthScale.value && (
-                  <div ref={widthScaleElement}><Icon class={[ns.e('widthScale')]} icon="dragWidth"></Icon></div>)}
-                {props.hasTableCellOperator && renderTableCellOperator()}
-              </div>
-            )
-          }
+	name: 'SelectElement',
+	inheritAttrs: false,
+	customOptions: {},
+	props: {
+		data: Object,
+		tag: {
+			type: String,
+			default: 'div'
+		},
+		parent: Object,
+		hasMask: {
+			type: Boolean,
+			default: false
+		},
+		hasDrag: {
+			type: Boolean,
+			default: false
+		},
+		hasDel: {
+			type: Boolean,
+			default: false
+		},
+		hasCopy: {
+			type: Boolean,
+			default: false
+		},
+		hasTableCellOperator: {
+			type: Boolean,
+			default: false
+		},
+		hasWidthScale: {
+			type: Boolean,
+			default: false
+		},
+		hasInserColumn: {
+			type: Boolean,
+			default: false
+		},
+		hasInserRow: {
+			type: Boolean,
+			default: false
+		},
+		hasAddCol: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props) {
+		const ER = inject('Everright')
+		const { t } = hooks.useI18n()
+		const ns = hooks.useNamespace('selectElement')
+		const isHover = ref(false)
+		const isInlineChildren = utils.checkIslineChildren(props.data)
+		const { target, setSelection, state, isEditModel, isSelectRoot, isPc } = hooks.useTarget()
+		const id = hooks.useCss(props.data, state.platform)
+		const visible = ref(false)
+		const slots = useSlots()
+		const isWarning = ref(false)
+		const isField = utils.checkIsField(props.data)
+		const handleClick = e => {
+			setSelection(props.data)
+		}
+		if (props.data.type && isField) {
+			state.validateStates.push({
+				data: props.data,
+				isWarning
+			})
+		}
+		onBeforeUnmount(() => {
+			const index = _.findIndex(state.validateStates, { data: { id: props.data.id } })
+			if (index !== -1) {
+				state.validateStates.splice(index, 1)
+			}
+		})
+		const handleCommand = command => {
+			const [fn, param] = command.split(' ')
+			props.data.context[fn](param)
+		}
+		const isShowCell = ref(false)
+		const renderTableCellOperator = () => {
+			const slots = {
+				dropdown: () => {
+					let node = (
+						<el-dropdown-menu>
+							<el-dropdown-item command="insert left">{t('er.selection.insertLeft')}</el-dropdown-item>
+							<el-dropdown-item command="insert right">{t('er.selection.insertRight')}</el-dropdown-item>
+							<el-dropdown-item command="insert top">{t('er.selection.insertTop')}</el-dropdown-item>
+							<el-dropdown-item command="insert bottom">{t('er.selection.insertBottom')}</el-dropdown-item>
+							<el-dropdown-item command="merge left" disabled={props.data.context.isDisableMargeLeft} divided>
+								{t('er.selection.mergeLeft')}
+							</el-dropdown-item>
+							<el-dropdown-item command="merge right" disabled={props.data.context.isDisableMargeRight}>
+								{t('er.selection.mergeRight')}
+							</el-dropdown-item>
+							<el-dropdown-item command="merge row" disabled={props.data.context.isDisableMargeRow}>
+								{t('er.selection.mergeRow')}
+							</el-dropdown-item>
+							<el-dropdown-item command="merge top" disabled={props.data.context.isDisableMargeTop} divided>
+								{t('er.selection.mergeTop')}
+							</el-dropdown-item>
+							<el-dropdown-item command="merge bottom" disabled={props.data.context.isDisableMargeBottom}>
+								{t('er.selection.mergeBottom')}
+							</el-dropdown-item>
+							<el-dropdown-item command="merge column" disabled={props.data.context.isDisableMargeColumn}>
+								{t('er.selection.mergeColumn')}
+							</el-dropdown-item>
+							<el-dropdown-item command="del row" divided disabled={props.data.context.isDisableDelRow}>
+								{t('er.selection.delRow')}
+							</el-dropdown-item>
+							<el-dropdown-item command="del column" disabled={props.data.context.isDisableDelColumn}>
+								{t('er.selection.delColumn')}
+							</el-dropdown-item>
+							<el-dropdown-item command="split column" disabled={props.data.context.isDisableSplitColumn} divided>
+								{t('er.selection.splitColumn')}
+							</el-dropdown-item>
+							<el-dropdown-item command="split row" disabled={props.data.context.isDisableSplitRow}>
+								{t('er.selection.splitRow')}
+							</el-dropdown-item>
+						</el-dropdown-menu>
+					)
+					if (!isShowCell.value) {
+						node = ''
+					}
+					return node
+				}
+			}
+			return (
+				<el-dropdown
+					trigger="hover"
+					onCommand={handleCommand}
+					onVisible-change={val => {
+						isShowCell.value = val
+						if (!val) {
+							isHover.value = false
+						}
+					}}
+					v-slots={slots}
+				>
+					<Icon class={[ns.e('tableOperator')]} icon="tableOperation"></Icon>
+				</el-dropdown>
+			)
+		}
+		const handleAction = type => {
+			const index = type !== 5 && props.parent.indexOf(props.data)
+			switch (type) {
+				case 1:
+					if (ER.props.delHandle(props.data) === false) return false
+					props.data.context.delete()
+					utils.deepTraversal(props.data, node => {
+						if (utils.checkIsField(node)) {
+							ER.delField(node)
+						}
+					})
+					if (/^(radio|checkbox|select)$/.test(props.data.type)) {
+						delete state.data[props.data.options.dataKey]
+					}
+					if (props.parent.length > 0) {
+						if (index === props.parent.length) {
+							setSelection(props.parent[index - 1])
+						} else {
+							setSelection(props.parent[index])
+						}
+					} else {
+						setSelection('root')
+					}
+					break
+				case 2:
+					if (ER.props.copyHandle(props.data) === false) return false
+					props.data.context.copy()
+					const copyData = props.parent[index + 1]
+					setSelection(copyData)
+					utils.deepTraversal(copyData, node => {
+						ER.addFieldData(node, true)
+						if (utils.checkIsField(node)) {
+							ER.addField(node)
+						}
+					})
+					break
+				case 3:
+					_.last(props.data.context.columns[0]).context.insert('bottom')
+					break
+				case 4:
+					_.last(props.data.context.columns)[0].context.insert('right')
+					break
+				case 5:
+					let parent = props.data.context.parent
+					if (/^(inline|tr)$/.test(parent.type)) {
+						parent = parent.context.parent
+					}
+					setSelection(Array.isArray(parent) ? 'root' : parent)
+					break
+				case 6:
+					props.data.context.appendCol()
+					break
+			}
+		}
+		const elementRef = ref()
+		const widthScaleElement = ref()
+		const isScale = ref(false)
+		const isShowWidthScale = computed(() => props.hasWidthScale && !(ER.props.layoutType === 1 && !isPc.value))
+		onMounted(() => {
+			if (!unref(isEditModel)) return false
+			const hoverEl = elementRef.value.$el || elementRef.value
+			const widthScaleEl = widthScaleElement.value
+			hoverEl.addEventListener('mouseover', e => {
+				if (!state.widthScaleLock) {
+					isHover.value = true
+				}
+				e.stopPropagation()
+			})
+			hoverEl.addEventListener('mouseout', e => {
+				// console.log(elementRef.value.contains(e.target))
+				if (isShowCell.value) return false
+				isHover.value = false
+				e.stopPropagation()
+			})
+			if (isShowWidthScale.value) {
+				// if (!hoverEl.offsetParent) return false
+				widthScaleEl.addEventListener('mousedown', e => {
+					e.preventDefault()
+					const columnWidth = hoverEl.offsetParent.offsetWidth / 24
+					state.widthScaleLock = isScale.value = true
+					const oldX = e.clientX
+					const oldWidth = hoverEl.offsetWidth
+					const onMouseMove = e => {
+						if (!isInlineChildren) {
+							let offset = Math.ceil((oldWidth + Math.round((e.clientX - oldX) / columnWidth) * columnWidth) / columnWidth)
+							if (offset >= 24) {
+								offset = 24
+							}
+							if (offset <= 6) {
+								offset = 6
+							}
+							props.data.options.span = offset
+						} else {
+							// const isFieldWidth = _.isObject(props.data.style.width)
+							const curNewWidth = oldWidth + e.clientX - oldX
+							let curWidth = Math.round((curNewWidth / hoverEl.parentNode.offsetWidth) * 100)
+							if (curWidth <= 25) {
+								curWidth = 25
+							}
+							utils.syncWidthByPlatform(props.data, state.platform, false, curWidth)
+						}
+					}
+					const onMouseUp = () => {
+						document.removeEventListener('mouseup', onMouseUp)
+						document.removeEventListener('mousemove', onMouseMove)
+						state.widthScaleLock = isScale.value = false
+					}
+					document.addEventListener('mouseup', onMouseUp)
+					document.addEventListener('mousemove', onMouseMove)
+				})
+			}
+		})
+		const TagComponent = isHTMLTag(props.tag) ? props.tag : resolveComponent(props.tag)
+		const Selected = computed(() => {
+			return target.value.id === props.data.id && ns.is('Selected')
+		})
+		const maskNode = <div class={[ns.e('mask')]}></div>
+		const isShowCopy = computed(() =>
+			isInlineChildren ? props.hasCopy && props.data.context.parent.columns.length < ER.props.inlineMax : props.hasCopy
+		)
+		// const isShowSelectParent = computed(() => {
+		//   return !isSelectRoot.value
+		// })
+		return () => {
+			return (
+				<TagComponent
+					class={id.value}
+					{...useAttrs()}
+					class={[
+						ns.b(),
+						unref(isEditModel) && ER.props.dragMode === 'full' && props.hasDrag && 'ER-handle',
+						!isField && ns.e('borderless'),
+						unref(isEditModel) && ns.e('editor'),
+						unref(isEditModel) && Selected.value,
+						unref(isEditModel) && isHover.value && ns.e('hover'),
+						unref(isEditModel) && isScale.value && ns.e('isScale'),
+						unref(isEditModel) && isWarning.value && ns.is('Warning')
+					]}
+					ref={elementRef}
+					onClick={unref(isEditModel) && withModifiers(handleClick, ['stop'])}
+				>
+					{slots.default()}
+					{!isPc.value && <span></span>}
+					{ER.props.dragMode === 'icon' && unref(isEditModel) && (
+						<div class={[ns.e('topLeft')]}>{props.hasDrag && <Icon class={['ER-handle', ns.e('dragIcon')]} icon="Rank"></Icon>}</div>
+					)}
+					{unref(isEditModel) && (
+						<div class={[ns.e('bottomRight')]}>
+							{/* {isShowSelectParent.value && (<Icon class={['handle', ns.e('selectParent')]} icon="top"></Icon>)} */}
+							<Icon
+								class={['handle', ns.e('selectParent')]}
+								onClick={withModifiers(
+									e => {
+										handleAction(5)
+									},
+									['stop']
+								)}
+								icon="top"
+							></Icon>
+							{props.hasDel && (
+								<Icon
+									class={[ns.e('copy')]}
+									onClick={withModifiers(
+										e => {
+											handleAction(1)
+										},
+										['stop']
+									)}
+									icon="delete"
+								></Icon>
+							)}
+							{props.hasInserColumn && (
+								<Icon
+									class={[ns.e('charulieIcon')]}
+									onClick={withModifiers(
+										e => {
+											handleAction(4)
+										},
+										['stop']
+									)}
+									icon="tableInsertCol"
+								></Icon>
+							)}
+							{props.hasInserRow && (
+								<Icon
+									class={[ns.e('charuhangIcon')]}
+									onClick={withModifiers(
+										e => {
+											handleAction(3)
+										},
+										['stop']
+									)}
+									icon="tableInsertRow"
+								></Icon>
+							)}
+							{props.hasAddCol && (
+								<Icon
+									class={[ns.e('addCol')]}
+									onClick={withModifiers(
+										e => {
+											handleAction(6)
+										},
+										['stop']
+									)}
+									icon="plus"
+								></Icon>
+							)}
+							{isShowCopy.value && (
+								<Icon
+									class={[ns.e('copyIcon')]}
+									onClick={withModifiers(
+										e => {
+											handleAction(2)
+										},
+										['stop']
+									)}
+									icon="copy"
+								></Icon>
+							)}
+							{isShowWidthScale.value && (
+								<div ref={widthScaleElement}>
+									<Icon class={[ns.e('widthScale')]} icon="dragWidth"></Icon>
+								</div>
+							)}
+							{props.hasTableCellOperator && renderTableCellOperator()}
+						</div>
+					)}
 
-          {
-            unref(isEditModel) && props.hasMask && maskNode
-          }
-        </TagComponent>
-      )
-    }
-  }
+					{unref(isEditModel) && props.hasMask && maskNode}
+				</TagComponent>
+			)
+		}
+	}
 }

src/components/packages/formEditor/index.vue

@@ -21,7 +21,7 @@ export default {
 import { ls } from '@/utils/index'
 import user from '@/api/system/user'
 import role from '@/api/system/role'
-import department from '@/api/system/department'
+// import department from '@/api/system/department'
 
 const token = ls.get('token')
 const userOptList = ref([])
@@ -159,16 +159,16 @@ const getRoleList = async () => {
 getRoleList()
 
 // 部门列表
-const getDepartmentList = async () => {
-	let res = await department.departmentPageApi({ page: 1, pageSize: 99999 })
-	departmentOptList.value = res.records.map(item => {
-		return {
-			value: item.id,
-			label: item.name
-		}
-	})
-}
-getDepartmentList()
+// const getDepartmentList = async () => {
+// 	let res = await department.departmentPageApi({ page: 1, pageSize: 99999 })
+// 	departmentOptList.value = res.records.map(item => {
+// 		return {
+// 			value: item.id,
+// 			label: item.name
+// 		}
+// 	})
+// }
+// getDepartmentList()
 
 const setSelection = node => {
 	let result = ''

src/components/packages/utils/addContext.js

@@ -6,882 +6,814 @@ import { wrapElement } from './field'
 import utils from '@ER/utils/index.js'
 
 const getNodes = (node, key) => {
-  const {
-    context: {
-      root,
-      col,
-      row
-    }
-  } = node
-  let nodes = []
-  if (key === 'rowspan') {
-    nodes = root.context.columns[col]
-  } else if (key === 'colspan') {
-    nodes = root.rows[row].columns
-  }
-  return nodes
+	const {
+		context: { root, col, row }
+	} = node
+	let nodes = []
+	if (key === 'rowspan') {
+		nodes = root.context.columns[col]
+	} else if (key === 'colspan') {
+		nodes = root.rows[row].columns
+	}
+	return nodes
 }
 const findNode = (node, dir, key, fn, ignore = false) => {
-  const {
-    context: {
-      root,
-      col,
-      row
-    }
-  } = node
-  let count = key === 'rowspan' ? row : col
-  let passArr = []
-  const nodes = getNodes(node, key)
-  const callBack = () => {
-    // rowspan
-    if (key === 'rowspan') {
-      passArr.forEach((e, index) => {
-        e.options.rowspan = passArr.length
-        e.options.isMerged = !!index
-        if (e.options.colspan > 1) {
-          const nodes = getNodes(e, 'colspan')
-          nodes.slice(col + 1, col + e.options.colspan).forEach((e) => {
-            e.options.rowspan = passArr.length
-          })
-        }
-        if (index) {
-          passArr[0].list = passArr[0].list.concat(e.list)
-          e.list = []
-        }
-      })
-    } else if (key === 'colspan') {
-      passArr.forEach((e, index) => {
-        e.options.colspan = passArr.length
-        e.options.isMerged = !!index
-        if (e.options.colspan > 1) {
-          const nodes = getNodes(e, 'rowspan')
-          nodes.slice(row + 1, row + e.options.rowspan).forEach((e) => {
-            e.options.colspan = passArr.length
-          })
-        }
-        if (index) {
-          passArr[0].list = passArr[0].list.concat(e.list)
-          addContext(passArr[0], passArr[0].context.parent)
-          // console.log(passArr[0], passArr[0].context.parent)
-          e.list = []
-        }
-      })
-    }
-  }
-  if (dir === 'after') {
-    while (++count) {
-      const item = nodes[count]
-      if (!item) {
-        fn(passArr)
-        break
-      }
-      passArr.push(item)
-      if (!item.options.isMerged) {
-        if (item.options[key] > 1) {
-          const lastNode = passArr[passArr.length - 1]
-          passArr = passArr.concat(nodes.slice(lastNode.context[key.slice(0, 3)] + 1, lastNode.context[key.slice(0, 3)] + item.options[key]))
-        }
-        passArr.unshift(node)
-        fn(passArr, callBack)
-        break
-      }
-    }
-  } else {
-    while (count--) {
-      const item = nodes[count]
-      if (!item) {
-        fn(passArr)
-        break
-      }
-      let arr = []
-      passArr.unshift(item)
-      if (!item.options.isMerged) {
-        if (node.options[key] > 1) {
-          findNode(passArr[0], 'after', key, (nodes) => {
-            arr = nodes
-          })
-        }
-        passArr.push(node)
-        if (arr.length) {
-          passArr = arr
-        }
-        fn(passArr, callBack)
-        break
-      }
-    }
-  }
+	const {
+		context: { root, col, row }
+	} = node
+	let count = key === 'rowspan' ? row : col
+	let passArr = []
+	const nodes = getNodes(node, key)
+	const callBack = () => {
+		// rowspan
+		if (key === 'rowspan') {
+			passArr.forEach((e, index) => {
+				e.options.rowspan = passArr.length
+				e.options.isMerged = !!index
+				if (e.options.colspan > 1) {
+					const nodes = getNodes(e, 'colspan')
+					nodes.slice(col + 1, col + e.options.colspan).forEach(e => {
+						e.options.rowspan = passArr.length
+					})
+				}
+				if (index) {
+					passArr[0].list = passArr[0].list.concat(e.list)
+					e.list = []
+				}
+			})
+		} else if (key === 'colspan') {
+			passArr.forEach((e, index) => {
+				e.options.colspan = passArr.length
+				e.options.isMerged = !!index
+				if (e.options.colspan > 1) {
+					const nodes = getNodes(e, 'rowspan')
+					nodes.slice(row + 1, row + e.options.rowspan).forEach(e => {
+						e.options.colspan = passArr.length
+					})
+				}
+				if (index) {
+					passArr[0].list = passArr[0].list.concat(e.list)
+					addContext(passArr[0], passArr[0].context.parent)
+					// console.log(passArr[0], passArr[0].context.parent)
+					e.list = []
+				}
+			})
+		}
+	}
+	if (dir === 'after') {
+		while (++count) {
+			const item = nodes[count]
+			if (!item) {
+				fn(passArr)
+				break
+			}
+			passArr.push(item)
+			if (!item.options.isMerged) {
+				if (item.options[key] > 1) {
+					const lastNode = passArr[passArr.length - 1]
+					passArr = passArr.concat(nodes.slice(lastNode.context[key.slice(0, 3)] + 1, lastNode.context[key.slice(0, 3)] + item.options[key]))
+				}
+				passArr.unshift(node)
+				fn(passArr, callBack)
+				break
+			}
+		}
+	} else {
+		while (count--) {
+			const item = nodes[count]
+			if (!item) {
+				fn(passArr)
+				break
+			}
+			let arr = []
+			passArr.unshift(item)
+			if (!item.options.isMerged) {
+				if (node.options[key] > 1) {
+					findNode(passArr[0], 'after', key, nodes => {
+						arr = nodes
+					})
+				}
+				passArr.push(node)
+				if (arr.length) {
+					passArr = arr
+				}
+				fn(passArr, callBack)
+				break
+			}
+		}
+	}
 }
 
-const getValidNode = (node) => {
-  const {
-    context: {
-      root,
-      col,
-      row
-    }
-  } = node
-  const result = []
-  const rows = root.rows
-  for (let i0 = 0; i0 < rows.length; i0++) {
-    for (let i1 = 0; i1 < rows[i0].columns.length; i1++) {
-      const item = rows[i0].columns[i1]
-      if (!item.options.isMerged) {
-        result.push(item)
-      }
-    }
-  }
-  return result.filter((e) => {
-    const {
-      context: {
-        root,
-        col,
-        row
-      },
-      options: {
-        colspan,
-        rowspan
-      }
-    } = e
-    const offsetx = [col, col + (colspan > 1 ? colspan - 1 : 0)]
-    const offsety = [row, row + (rowspan > 1 ? rowspan - 1 : 0)]
-    const status = node.context.col >= offsetx[0] && node.context.col <= offsetx[1] && node.context.row >= offsety[0] && node.context.row <= offsety[1]
-    // if (status) {
-    //   console.log(offsetx)
-    //   console.log(offsety)
-    //   console.log(col)
-    //   console.log(row)
-    // }
-    return status
-  })[0]
+const getValidNode = node => {
+	const {
+		context: { root, col, row }
+	} = node
+	const result = []
+	const rows = root.rows
+	for (let i0 = 0; i0 < rows.length; i0++) {
+		for (let i1 = 0; i1 < rows[i0].columns.length; i1++) {
+			const item = rows[i0].columns[i1]
+			if (!item.options.isMerged) {
+				result.push(item)
+			}
+		}
+	}
+	return result.filter(e => {
+		const {
+			context: { root, col, row },
+			options: { colspan, rowspan }
+		} = e
+		const offsetx = [col, col + (colspan > 1 ? colspan - 1 : 0)]
+		const offsety = [row, row + (rowspan > 1 ? rowspan - 1 : 0)]
+		const status =
+			node.context.col >= offsetx[0] && node.context.col <= offsetx[1] && node.context.row >= offsety[0] && node.context.row <= offsety[1]
+		// if (status) {
+		//   console.log(offsetx)
+		//   console.log(offsety)
+		//   console.log(col)
+		//   console.log(row)
+		// }
+		return status
+	})[0]
 }
 const checkStatus = (nodes, node, key) => {
-  const data = {
-    x: -1,
-    y: -1,
-    status: -1
-  }
-  for (let i0 = 0; i0 < nodes.length; i0++) {
-    for (let i1 = 0; i1 < nodes[i0].length; i1++) {
-      if (nodes[i0][i1].id === node.id) {
-        data.x = i1
-        data.y = i0
-        if (key === 'colspan') {
-          if (nodes[i0].length === 1) {
-            data.status = 0
-          } else {
-            if (i1 === nodes[i0].length - 1) {
-              data.status = 3
-            }
-            if (i1 === 0) {
-              data.status = 1
-            }
-            if (i1 > 0 && i1 < nodes[i0].length - 1) {
-              data.status = 2
-            }
-          }
-        } else {
-          if (nodes.length === 1) {
-            data.status = 0
-          } else {
-            if (i0 === nodes.length - 1) {
-              data.status = 3
-            }
-            if (i0 === 0) {
-              data.status = 1
-            }
-            if (i0 > 0 && i0 < nodes.length - 1) {
-              data.status = 2
-            }
-          }
-        }
-      }
-    }
-  }
-  return data
+	const data = {
+		x: -1,
+		y: -1,
+		status: -1
+	}
+	for (let i0 = 0; i0 < nodes.length; i0++) {
+		for (let i1 = 0; i1 < nodes[i0].length; i1++) {
+			if (nodes[i0][i1].id === node.id) {
+				data.x = i1
+				data.y = i0
+				if (key === 'colspan') {
+					if (nodes[i0].length === 1) {
+						data.status = 0
+					} else {
+						if (i1 === nodes[i0].length - 1) {
+							data.status = 3
+						}
+						if (i1 === 0) {
+							data.status = 1
+						}
+						if (i1 > 0 && i1 < nodes[i0].length - 1) {
+							data.status = 2
+						}
+					}
+				} else {
+					if (nodes.length === 1) {
+						data.status = 0
+					} else {
+						if (i0 === nodes.length - 1) {
+							data.status = 3
+						}
+						if (i0 === 0) {
+							data.status = 1
+						}
+						if (i0 > 0 && i0 < nodes.length - 1) {
+							data.status = 2
+						}
+					}
+				}
+			}
+		}
+	}
+	return data
 }
-const getNodeRange = (node) => {
-  const {
-    context: {
-      root,
-      col,
-      row
-    },
-    options: {
-      rowspan,
-      colspan
-    }
-  } = node
-  let count = row
-  const xNodes = root.rows[row].columns
-  const yNodes = root.context.columns[col]
-  const result = [] // x , y
-  while (count < row + rowspan) {
-    result.push([...root.rows[count].columns.slice(col, col + colspan)])
-    count++
-  }
-  return result
+const getNodeRange = node => {
+	const {
+		context: { root, col, row },
+		options: { rowspan, colspan }
+	} = node
+	let count = row
+	const xNodes = root.rows[row].columns
+	const yNodes = root.context.columns[col]
+	const result = [] // x , y
+	while (count < row + rowspan) {
+		result.push([...root.rows[count].columns.slice(col, col + colspan)])
+		count++
+	}
+	return result
 }
 const appendNodes = (node, dir, key) => {
-  const {
-    context: {
-      root,
-      col,
-      row
-    },
-    options: {
-      colspan,
-      rowspan
-    }
-  } = node
-  let index = -1
-  let nodes = []
-  if (dir === 'before') {
-    if (key === 'colspan') {
-      index = col
-      if (index !== 0) {
-        nodes = root.context.columns[index - 1]
-      } else {
-        nodes = root.context.columns[0]
-      }
-    } else {
-      index = row
-      if (index !== 0) {
-        nodes = root.rows[index - 1].columns
-      }
-    }
-  } else {
-    if (key === 'colspan') {
-      if (node.options.colspan > 1) {
-        index = col + colspan - 1
-      } else {
-        index = col
-      }
-      nodes = root.context.columns[index]
-    } else {
-      if (node.options.rowspan > 1) {
-        index = row + rowspan - 1
-      } else {
-        index = row
-      }
-      nodes = root.rows[index].columns
-    }
-  }
-  if (key === 'colspan') {
-    nodes.forEach((e, index0) => {
-      const newNode = wrapElement({
-        type: 'td',
-        options: {
-          colspan: 1,
-          rowspan: 1,
-          isMerged: false
-        },
-        list: [],
-        style: {}
-      })
-      e.context.parent.columns.splice(dir === 'before' ? index : index + 1, 0, newNode)
-      addContext(e.context.parent, root)
-      if (!(index === 0 && dir === 'before')) {
-        const validNode = getValidNode(e)
-        const ranges = getNodeRange(validNode)
-        const {
-          status,
-          x,
-          y
-        } = checkStatus(ranges, e, 'colspan')
-        if (/[1, 2]/.test(status)) {
-          newNode.options.isMerged = true
-          ranges[y].forEach(e => {
-            e.options.colspan = newNode.options.colspan = ranges[y].length + (y === 0 ? 1 : 0)
-            newNode.options.rowspan = e.options.rowspan
-          })
-        }
-      }
-    })
-  } else {
-    const arr = nodes.map((e) => {
-      const validNode = getValidNode(e)
-      const ranges = getNodeRange(validNode)
-      return {
-        ...checkStatus(ranges, e, 'rowspan'),
-        ranges
-      }
-    })
-    const tr = wrapElement({
-      type: 'tr',
-      columns: Array.from(Array(node.context.parent.columns.length), (e, i0) => {
-        const newNode = {
-          type: 'td',
-          options: {
-            colspan: 1,
-            rowspan: 1,
-            isMerged: false
-          },
-          list: [],
-          style: {}
-        }
-        if (index !== 0) {
-          const {
-            status,
-            x,
-            y,
-            ranges
-          } = arr[i0]
-          if (/[1, 2]/.test(status)) {
-            newNode.options.isMerged = true
-            for (let i0 = 0; i0 < ranges.length; i0++) {
-              for (let i1 = 0; i1 < ranges[i0].length; i1++) {
-                if (i1 === 0) {
-                  ranges[i0].forEach(e => {
-                    e.options.rowspan = newNode.options.rowspan = ranges.length + 1
-                    newNode.options.colspan = e.options.colspan
-                  })
-                }
-              }
-            }
-          }
-        }
-        return newNode
-      })
-    })
-    root.rows.splice(dir === 'before' ? index : index + 1, 0, tr)
-    root.rows.forEach((item) => {
-      addContext(item, root)
-    })
-  }
+	const {
+		context: { root, col, row },
+		options: { colspan, rowspan }
+	} = node
+	let index = -1
+	let nodes = []
+	if (dir === 'before') {
+		if (key === 'colspan') {
+			index = col
+			if (index !== 0) {
+				nodes = root.context.columns[index - 1]
+			} else {
+				nodes = root.context.columns[0]
+			}
+		} else {
+			index = row
+			if (index !== 0) {
+				nodes = root.rows[index - 1].columns
+			}
+		}
+	} else {
+		if (key === 'colspan') {
+			if (node.options.colspan > 1) {
+				index = col + colspan - 1
+			} else {
+				index = col
+			}
+			nodes = root.context.columns[index]
+		} else {
+			if (node.options.rowspan > 1) {
+				index = row + rowspan - 1
+			} else {
+				index = row
+			}
+			nodes = root.rows[index].columns
+		}
+	}
+	if (key === 'colspan') {
+		nodes.forEach((e, index0) => {
+			const newNode = wrapElement({
+				type: 'td',
+				options: {
+					colspan: 1,
+					rowspan: 1,
+					isMerged: false
+				},
+				list: [],
+				style: {}
+			})
+			e.context.parent.columns.splice(dir === 'before' ? index : index + 1, 0, newNode)
+			addContext(e.context.parent, root)
+			if (!(index === 0 && dir === 'before')) {
+				const validNode = getValidNode(e)
+				const ranges = getNodeRange(validNode)
+				const { status, x, y } = checkStatus(ranges, e, 'colspan')
+				if (/[1, 2]/.test(status)) {
+					newNode.options.isMerged = true
+					ranges[y].forEach(e => {
+						e.options.colspan = newNode.options.colspan = ranges[y].length + (y === 0 ? 1 : 0)
+						newNode.options.rowspan = e.options.rowspan
+					})
+				}
+			}
+		})
+	} else {
+		const arr = nodes.map(e => {
+			const validNode = getValidNode(e)
+			const ranges = getNodeRange(validNode)
+			return {
+				...checkStatus(ranges, e, 'rowspan'),
+				ranges
+			}
+		})
+		const tr = wrapElement({
+			type: 'tr',
+			columns: Array.from(Array(node.context.parent.columns.length), (e, i0) => {
+				const newNode = {
+					type: 'td',
+					options: {
+						colspan: 1,
+						rowspan: 1,
+						isMerged: false
+					},
+					list: [],
+					style: {}
+				}
+				if (index !== 0) {
+					const { status, x, y, ranges } = arr[i0]
+					if (/[1, 2]/.test(status)) {
+						newNode.options.isMerged = true
+						for (let i0 = 0; i0 < ranges.length; i0++) {
+							for (let i1 = 0; i1 < ranges[i0].length; i1++) {
+								if (i1 === 0) {
+									ranges[i0].forEach(e => {
+										e.options.rowspan = newNode.options.rowspan = ranges.length + 1
+										newNode.options.colspan = e.options.colspan
+									})
+								}
+							}
+						}
+					}
+				}
+				return newNode
+			})
+		})
+		root.rows.splice(dir === 'before' ? index : index + 1, 0, tr)
+		root.rows.forEach(item => {
+			addContext(item, root)
+		})
+	}
 }
 export const addContext = (node, parent, fn) => {
-  // console.log(node)
-  // if (isAddId) {
-  //   node.id = nanoid()
-  //   node.key = `${node.type}_${nanoid()}`
-  // }
-  let arr = []
-  const isArray = Array.isArray(parent)
-  if (isArray) {
-    arr = parent
-  } else {
-    arr = parent.columns || parent.list || parent.rows
-  }
-  fn && fn(node)
-  const context = {
-    get props () {
-      return (isPc) => computed(() => {
-        const {
-          options
-        } = node
-        const result = {
-          disabled: options.disabled,
-          placeholder: options.placeholder,
-          clearable: options.clearable,
-          required: options.required
-        }
-        if (isPc) {
-          // result.style = {
-          //   width: options.width + options.widthType
-          // }
-        } else {
-          result.label = node.label
-        }
-        switch (node.type) {
-          case 'input':
-            if (options.isShowWordLimit) {
-              result.maxlength = options.max
-              result['show-word-limit'] = options.isShowWordLimit
-            }
-            if (isPc) {
-              result.showPassword = options.showPassword
-              result.prepend = options.prepend
-              result.append = options.append
-            } else {
-              if (options.showPassword) {
-                result.type = 'password'
-              }
-              if (options.renderType === 4) {
-                result.type = 'tel'
-              }
-            }
-            break
-          case 'textarea':
-            result.type = 'textarea'
-            result.rows = options.rows
-            break
-          case 'number':
-            if (isPc) {
-              result.controls = options.controls
-              if (options.controls) {
-                result['controls-position'] = options.controlsPosition ? 'right' : ''
-              }
-            }
-            if (options.isShowWordLimit) {
-              result.min = options.min
-              result.max = options.max
-            }
-            result.step = options.step
-            result.precision = options.precision
-            break
-          case 'radio':
-          case 'checkbox':
-            break
-          case 'select':
-            break
-          case 'time':
-            result.format = options.format
-            if (isPc) {
-              result.valueFormat = options.valueFormat
-            }
-            break
-          case 'date':
-            result.placeholder = options.placeholder
-            result.startPlaceholder = options.startPlaceholder
-            result.endPlaceholder = options.endPlaceholder
-            result.format = options.format
-            result.type = options.type
-            if (isPc) {
-              result.disabledDate = (time) => {
-                const {
-                  startTime,
-                  endTime,
-                  weeks,
-                  isShowWeeksLimit
-                } = options
-                const startDate = dayjs.unix(startTime)
-                const endDate = dayjs.unix(endTime)
-                const currentDate = dayjs(time)
-                const result = currentDate.isBefore(startDate) || currentDate.isAfter(endDate)
-                return result
-              }
-            } else {
-              const {
-                startTime,
-                endTime,
-                weeks,
-                isShowWeeksLimit
-              } = options
-              switch (options.type) {
-                case 'date':
-                case 'datetime':
-                  if (startTime) {
-                    result.minDate = dayjs.unix(startTime).toDate()
-                  } else {
-                    result.minDate = dayjs.unix(0).toDate()
-                  }
-                  if (endTime) {
-                    result.maxDate = dayjs.unix(endTime).toDate()
-                  } else {
-                    result.maxDate = dayjs().add(20, 'year').toDate()
-                  }
-                  break
-                case 'dates':
-                  if (options.defaultValue) {
-                    result.defaultDate = options.defaultValue.map(e => dayjs.unix(e).toDate())
-                  } else {
-                    result.defaultDate = null
-                  }
-                  if (startTime) {
-                    result.minDate = dayjs.unix(startTime).toDate()
-                  } else {
-                    result.minDate = dayjs().subtract(1, 'year').toDate()
-                  }
-                  if (endTime) {
-                    result.maxDate = dayjs.unix(endTime).toDate()
-                  } else {
-                    result.maxDate = dayjs().add(1, 'year').toDate()
-                  }
-                  break
-                case 'daterange':
-                  if (options.defaultValue) {
-                    result.defaultDate = options.defaultValue.map(e => dayjs.unix(e).toDate())
-                  } else {
-                    result.defaultDate = null
-                  }
-                  if (startTime) {
-                    result.minDate = dayjs.unix(startTime).toDate()
-                  } else {
-                    result.minDate = dayjs().subtract(1, 'year').toDate()
-                  }
-                  if (endTime) {
-                    result.maxDate = dayjs.unix(endTime).toDate()
-                  } else {
-                    result.maxDate = dayjs().add(1, 'year').toDate()
-                  }
-                  break
-              }
-            }
-            break
-          case 'cascader':
-            result.props = {
-              multiple: options.multiple,
-              checkStrictly: options.checkStrictly
-            }
-            result.options = options.options
-            break
-          case 'slider':
-            result.step = options.step
-            result.min = options.min
-            result.max = options.max
-            break
-          case 'divider':
-            result.contentPosition = options.contentPosition
-            break
-          case 'uploadfile':
-            result.multiple = options.multiple
-            result.action = options.action
-            result.limit = options.limit
-            result.size = options.size
-            result.accept = options.accept
-            break
-        }
-        return result
-      })
-    },
-    get row () {
-      let result = ''
-      if (isArray || node.type === 'tr') {
-        result = arr.indexOf(node)
-      } else {
-        result = parent.context.row
-      }
-      return result
-    },
-    get col () {
-      let result = ''
-      if (isArray) {
-        result = 0
-      } else {
-        if (parent.type === 'grid' || parent.type === 'tr' || parent.type === 'td' || parent.type === 'col' || parent.type === 'tabsCol' || parent.type === 'collapseCol') {
-          result = arr.indexOf(node)
-        } else {
-          result = parent.context.col
-        }
-      }
-      return result
-    },
-    get root () {
-      let result = {}
-      switch (node.type) {
-        case 'grid':
-        case 'table':
-          result = node
-          break
-        default:
-          result = parent.context.root
-      }
-      return result
-    },
-    state: node,
-    parent,
-    get parents () {
-      const result = []
-      let cursor = node
-      while (cursor) {
-        result.unshift(cursor)
-        if (cursor.context.parent && !_.isArray(cursor.context.parent)) {
-          cursor = cursor.context.parent
-        } else {
-          cursor = ''
-        }
-      }
-      return result
-    },
-    copy () {
-      const index = arr.indexOf(node)
-      const newNode = reactive(_.cloneDeep(toRaw(node)))
-      delete newNode.context
-      newNode.id = nanoid()
-      newNode.key = `${newNode.type}_${newNode.id}`
-      addContext(newNode, parent, (node) => {
-        node.id = nanoid()
-        node.key = `${node.type}_${node.id}-copy`
-      })
-      arr.splice(index + 1, 0, newNode)
-    },
-    delete () {
-      if (utils.checkIsInSubform(node) && node.type === 'inline') {
-        arr[0].splice(arr[0].indexOf(node), 1)
-      } else {
-        arr.splice(arr.indexOf(node), 1)
-      }
-    },
-    appendCol () {
-      const newNode = wrapElement({
-        options: {
-          span: 6,
-          offset: 0,
-          pull: 0,
-          push: 0
-        },
-        type: 'col',
-        list: [
-        ]
-      })
-      node.columns.push(newNode)
-      addContext(newNode, node)
-    },
-    get columns () {
-      const result = []
-      switch (node.type) {
-        case 'table':
-          node.rows.forEach((item0, index0) => {
-            item0.columns.forEach((item1, index1) => {
-              if (!index0) {
-                result.push([])
-              }
-              result[index1].push(item1)
-            })
-          })
-          break
-        default:
-      }
-      return result
-    },
-    get isDisableMargeLeft () {
-      const {
-        context: {
-          root,
-          col,
-          row
-        }
-      } = node
-      const nodes = root.rows[row].columns
-      let result = col <= 0
-      if (!result) {
-        let onOff = true
-        findNode(node, 'before', 'colspan', (nodes) => {
-          onOff = result = !nodes.every(e => e.options.rowspan === node.options.rowspan) || nodes.every(e => e.options.isMerged)
-        })
-        result = onOff
-      }
-      return result
-    },
-    get isDisableMargeRight () {
-      const {
-        context: {
-          root,
-          col,
-          row
-        }
-      } = node
-      const nodes = root.rows[row].columns
-      let result = col >= nodes.length - 1
-      if (!result) {
-        let onOff = true
-        findNode(node, 'after', 'colspan', (nodes) => {
-          onOff = result = !nodes.every(e => e.options.rowspan === node.options.rowspan) || nodes.every(e => e.options.isMerged)
-        })
-        result = onOff
-      }
-      return result
-    },
-    get isDisableMargeRow () {
-      const nodes = getNodes(node, 'colspan')
-      return this.isDisableDelRow || nodes.length === node.options.colspan
-    },
-    get isDisableMargeColumn () {
-      const nodes = getNodes(node, 'rowspan')
-      return this.isDisableDelColumn || nodes.length === node.options.rowspan
-    },
-    get isDisableMargeBottom () {
-      const {
-        context: {
-          root,
-          col,
-          row
-        }
-      } = node
-      const columns = root.context.columns
-      let result = row >= columns[col].length - 1
-      if (!result) {
-        let onOff = true
-        findNode(node, 'after', 'rowspan', (nodes) => {
-          onOff = result = !nodes.every(e => e.options.colspan === node.options.colspan) || nodes.every(e => e.options.isMerged)
-        })
-        result = onOff
-      }
-      return result
-    },
-    get isDisableMargeTop () {
-      const {
-        context: {
-          root,
-          col,
-          row
-        }
-      } = node
-      const columns = root.context.columns
-      let result = row <= 0
-      if (!result) {
-        let onOff = true
-        findNode(node, 'before', 'rowspan', (nodes) => {
-          onOff = result = !nodes.every(e => e.options.colspan === node.options.colspan) || nodes.every(e => e.options.isMerged)
-        })
-        result = onOff
-      }
-      return result
-    },
-    get isDisableSplitColumn () {
-      return node.options.colspan === 1
-    },
-    get isDisableSplitRow () {
-      return node.options.rowspan === 1
-    },
-    get isDisableDelRow () {
-      const nodes = getNodes(node, 'colspan')
-      const rowspanNodes = getNodes(node, 'rowspan')
-      return (rowspanNodes.length === 1 || rowspanNodes.filter(e => !e.options.isMerged).length === 1) || !nodes.every(e => e.options.rowspan === node.options.rowspan)
-    },
-    get isDisableDelColumn () {
-      const nodes = getNodes(node, 'rowspan')
-      const colspanNodes = getNodes(node, 'colspan')
-      return (colspanNodes.length === 1 || colspanNodes.filter(e => !e.options.isMerged).length === 1) || !nodes.every(e => e.options.colspan === node.options.colspan)
-    },
-    merge (type) {
-      const {
-        context: {
-          root,
-          col,
-          row
-        }
-      } = node
-      switch (type) {
-        case 'left':
-          findNode(node, 'before', 'colspan', (nodes, callBack) => {
-            callBack()
-          })
-          break
-        case 'right':
-          findNode(node, 'after', 'colspan', (nodes, callBack) => {
-            callBack()
-          })
-          break
-        case 'top':
-          findNode(node, 'before', 'rowspan', (nodes, callBack) => {
-            callBack()
-          })
-          break
-        case 'bottom':
-          findNode(node, 'after', 'rowspan', (nodes, callBack) => {
-            callBack()
-          })
-          break
-        case 'row':
-          while (root.rows[row].columns.length > root.rows[row].columns[0].options.colspan) {
-            findNode(root.rows[row].columns[0], 'after', 'colspan', (nodes, callBack) => {
-              callBack()
-            })
-          }
-          break
-        case 'column':
-          while (root.context.columns[col].length > root.context.columns[col][0].options.rowspan) {
-            findNode(root.context.columns[col][0], 'after', 'rowspan', (nodes, callBack) => {
-              callBack()
-            })
-          }
-          break
-        default:
-      }
-    },
-    insert (type) {
-      const {
-        context: {
-          root,
-          col,
-          row
-        }
-      } = node
-      switch (type) {
-        case 'left':
-          appendNodes(node, 'before', 'colspan')
-          // root.rows.forEach(e => {
-          //   addContext(e, root, false)
-          // })
-          break
-        case 'right':
-          appendNodes(node, 'after', 'colspan')
-          break
-        case 'top':
-          appendNodes(node, 'before', 'rowspan')
-          break
-        case 'bottom':
-          appendNodes(node, 'after', 'rowspan')
-          break
-      }
-    },
-    split (type) {
-      const {
-        context: {
-          root,
-          col,
-          row
-        }
-      } = node
-      const nodes = getNodes(node, type === 'column' ? 'colspan' : 'rowspan')
-      switch (type) {
-        case 'column':
-          //  zheliyoudu  没有考虑底层
-          nodes.slice(col, col + node.options.colspan).forEach(e => {
-            e.options.colspan = 1
-            e.options.isMerged = false
-            if (e.options.rowspan > 1) {
-              const nodes = getNodes(e, 'rowspan')
-              nodes.slice(row + 1, row + e.options.rowspan).forEach((e) => {
-                e.options.colspan = 1
-              })
-            }
-          })
-          break
-        case 'row':
-          nodes.slice(row, row + node.options.rowspan).forEach(e => {
-            e.options.rowspan = 1
-            e.options.isMerged = false
-            if (e.options.colspan > 1) {
-              const nodes = getNodes(e, 'colspan')
-              nodes.slice(col + 1, col + e.options.colspan).forEach((e) => {
-                e.options.rowspan = 1
-              })
-            }
-          })
-          break
-      }
-    },
-    del (type) {
-      const {
-        context: {
-          root,
-          col,
-          row
-        }
-      } = node
-      const nodes = getNodes(node, type === 'column' ? 'colspan' : 'rowspan')
-      // let result = false
-      switch (type) {
-        case 'column':
-          root.rows.forEach(e => {
-            e.columns.splice(col, node.options.colspan)
-            addContext(e, root)
-          })
-          break
-        case 'row':
-          root.rows.splice(row, node.options.rowspan)
-          root.rows.forEach(e => {
-            addContext(e, root)
-          })
-          break
-      }
-    }
-  }
-  Object.defineProperty(node, 'context', {
-    value: context,
-    writable: false,
-    enumerable: false,
-    configurable: true
-  })
-  let nodes = []
-  if (node.type === 'subform') {
-    nodes = node.list[0]
-  } else {
-    nodes = node.columns || node.list || node.rows || []
-  }
-  nodes.forEach(e => {
-    addContext(e, node, fn)
-  })
+	// console.log(node)
+	// if (isAddId) {
+	//   node.id = nanoid()
+	//   node.key = `${node.type}_${nanoid()}`
+	// }
+	let arr = []
+	const isArray = Array.isArray(parent)
+	if (isArray) {
+		arr = parent
+	} else {
+		arr = parent.columns || parent.list || parent.rows
+	}
+	fn && fn(node)
+	const context = {
+		get props() {
+			return isPc =>
+				computed(() => {
+					const { options } = node
+					const result = {
+						disabled: options.disabled,
+						placeholder: options.placeholder,
+						clearable: options.clearable,
+						required: options.required
+					}
+					if (isPc) {
+						// result.style = {
+						//   width: options.width + options.widthType
+						// }
+					} else {
+						result.label = node.label
+					}
+					switch (node.type) {
+						case 'input':
+							if (options.isShowWordLimit) {
+								result.maxlength = options.max
+								result['show-word-limit'] = options.isShowWordLimit
+							}
+							if (isPc) {
+								result.showPassword = options.showPassword
+								result.prepend = options.prepend
+								result.append = options.append
+							} else {
+								if (options.showPassword) {
+									result.type = 'password'
+								}
+								if (options.renderType === 4) {
+									result.type = 'tel'
+								}
+							}
+							break
+						case 'textarea':
+							result.type = 'textarea'
+							result.rows = options.rows
+							break
+						case 'number':
+							if (isPc) {
+								result.controls = options.controls
+								if (options.controls) {
+									result['controls-position'] = options.controlsPosition ? 'right' : ''
+								}
+							}
+							if (options.isShowWordLimit) {
+								result.min = options.min
+								result.max = options.max
+							}
+							result.step = options.step
+							result.precision = options.precision
+							break
+						case 'radio':
+						case 'checkbox':
+							break
+						case 'select':
+							break
+						case 'time':
+							result.format = options.format
+							if (isPc) {
+								result.valueFormat = options.valueFormat
+							}
+							break
+						case 'date':
+							result.placeholder = options.placeholder
+							result.startPlaceholder = options.startPlaceholder
+							result.endPlaceholder = options.endPlaceholder
+							result.format = options.format
+							result.type = options.type
+							if (isPc) {
+								result.disabledDate = time => {
+									const { startTime, endTime, weeks, isShowWeeksLimit } = options
+									const startDate = dayjs.unix(startTime)
+									const endDate = dayjs.unix(endTime)
+									const currentDate = dayjs(time)
+									const result = currentDate.isBefore(startDate) || currentDate.isAfter(endDate)
+									return result
+								}
+							} else {
+								const { startTime, endTime, weeks, isShowWeeksLimit } = options
+								switch (options.type) {
+									case 'date':
+									case 'datetime':
+										if (startTime) {
+											result.minDate = dayjs.unix(startTime).toDate()
+										} else {
+											result.minDate = dayjs.unix(0).toDate()
+										}
+										if (endTime) {
+											result.maxDate = dayjs.unix(endTime).toDate()
+										} else {
+											result.maxDate = dayjs().add(20, 'year').toDate()
+										}
+										break
+									case 'dates':
+										if (options.defaultValue) {
+											result.defaultDate = options.defaultValue.map(e => dayjs.unix(e).toDate())
+										} else {
+											result.defaultDate = null
+										}
+										if (startTime) {
+											result.minDate = dayjs.unix(startTime).toDate()
+										} else {
+											result.minDate = dayjs().subtract(1, 'year').toDate()
+										}
+										if (endTime) {
+											result.maxDate = dayjs.unix(endTime).toDate()
+										} else {
+											result.maxDate = dayjs().add(1, 'year').toDate()
+										}
+										break
+									case 'daterange':
+										if (options.defaultValue) {
+											result.defaultDate = options.defaultValue.map(e => dayjs.unix(e).toDate())
+										} else {
+											result.defaultDate = null
+										}
+										if (startTime) {
+											result.minDate = dayjs.unix(startTime).toDate()
+										} else {
+											result.minDate = dayjs().subtract(1, 'year').toDate()
+										}
+										if (endTime) {
+											result.maxDate = dayjs.unix(endTime).toDate()
+										} else {
+											result.maxDate = dayjs().add(1, 'year').toDate()
+										}
+										break
+								}
+							}
+							break
+						case 'cascader':
+							result.props = {
+								multiple: options.multiple,
+								checkStrictly: options.checkStrictly
+							}
+							result.options = options.options
+							break
+						case 'slider':
+							result.step = options.step
+							result.min = options.min
+							result.max = options.max
+							break
+						case 'divider':
+							result.contentPosition = options.contentPosition
+							break
+						case 'uploadfile':
+							result.multiple = options.multiple
+							result.action = options.action
+							result.limit = options.limit
+							result.size = options.size
+							result.accept = options.accept
+							break
+					}
+					return result
+				})
+		},
+		get row() {
+			let result = ''
+			if (isArray || node.type === 'tr') {
+				result = arr.indexOf(node)
+			} else {
+				result = parent.context.row
+			}
+			return result
+		},
+		get col() {
+			let result = ''
+			if (isArray) {
+				result = 0
+			} else {
+				if (
+					parent.type === 'grid' ||
+					parent.type === 'tr' ||
+					parent.type === 'td' ||
+					parent.type === 'col' ||
+					parent.type === 'tabsCol' ||
+					parent.type === 'collapseCol'
+				) {
+					result = arr.indexOf(node)
+				} else {
+					result = parent.context.col
+				}
+			}
+			return result
+		},
+		get root() {
+			let result = {}
+			switch (node.type) {
+				case 'grid':
+				case 'table':
+					result = node
+					break
+				default:
+					result = parent.context.root
+			}
+			return result
+		},
+		state: node,
+		parent,
+		get parents() {
+			const result = []
+			let cursor = node
+			while (cursor) {
+				result.unshift(cursor)
+				if (cursor.context.parent && !_.isArray(cursor.context.parent)) {
+					cursor = cursor.context.parent
+				} else {
+					cursor = ''
+				}
+			}
+			return result
+		},
+		copy() {
+			const index = arr.indexOf(node)
+			const newNode = reactive(_.cloneDeep(toRaw(node)))
+			delete newNode.context
+			// newNode.id = nanoid()
+			newNode.id = new Date().getTime()
+			newNode.key = `${newNode.type}${newNode.id}`
+			addContext(newNode, parent, node => {
+				// node.id = nanoid()
+				node.id = new Date().getTime()
+				node.key = `${node.type}${node.id}copy`
+			})
+			arr.splice(index + 1, 0, newNode)
+		},
+		delete() {
+			if (utils.checkIsInSubform(node) && node.type === 'inline') {
+				arr[0].splice(arr[0].indexOf(node), 1)
+			} else {
+				arr.splice(arr.indexOf(node), 1)
+			}
+		},
+		appendCol() {
+			const newNode = wrapElement({
+				options: {
+					span: 6,
+					offset: 0,
+					pull: 0,
+					push: 0
+				},
+				type: 'col',
+				list: []
+			})
+			node.columns.push(newNode)
+			addContext(newNode, node)
+		},
+		get columns() {
+			const result = []
+			switch (node.type) {
+				case 'table':
+					node.rows.forEach((item0, index0) => {
+						item0.columns.forEach((item1, index1) => {
+							if (!index0) {
+								result.push([])
+							}
+							result[index1].push(item1)
+						})
+					})
+					break
+				default:
+			}
+			return result
+		},
+		get isDisableMargeLeft() {
+			const {
+				context: { root, col, row }
+			} = node
+			const nodes = root.rows[row].columns
+			let result = col <= 0
+			if (!result) {
+				let onOff = true
+				findNode(node, 'before', 'colspan', nodes => {
+					onOff = result = !nodes.every(e => e.options.rowspan === node.options.rowspan) || nodes.every(e => e.options.isMerged)
+				})
+				result = onOff
+			}
+			return result
+		},
+		get isDisableMargeRight() {
+			const {
+				context: { root, col, row }
+			} = node
+			const nodes = root.rows[row].columns
+			let result = col >= nodes.length - 1
+			if (!result) {
+				let onOff = true
+				findNode(node, 'after', 'colspan', nodes => {
+					onOff = result = !nodes.every(e => e.options.rowspan === node.options.rowspan) || nodes.every(e => e.options.isMerged)
+				})
+				result = onOff
+			}
+			return result
+		},
+		get isDisableMargeRow() {
+			const nodes = getNodes(node, 'colspan')
+			return this.isDisableDelRow || nodes.length === node.options.colspan
+		},
+		get isDisableMargeColumn() {
+			const nodes = getNodes(node, 'rowspan')
+			return this.isDisableDelColumn || nodes.length === node.options.rowspan
+		},
+		get isDisableMargeBottom() {
+			const {
+				context: { root, col, row }
+			} = node
+			const columns = root.context.columns
+			let result = row >= columns[col].length - 1
+			if (!result) {
+				let onOff = true
+				findNode(node, 'after', 'rowspan', nodes => {
+					onOff = result = !nodes.every(e => e.options.colspan === node.options.colspan) || nodes.every(e => e.options.isMerged)
+				})
+				result = onOff
+			}
+			return result
+		},
+		get isDisableMargeTop() {
+			const {
+				context: { root, col, row }
+			} = node
+			const columns = root.context.columns
+			let result = row <= 0
+			if (!result) {
+				let onOff = true
+				findNode(node, 'before', 'rowspan', nodes => {
+					onOff = result = !nodes.every(e => e.options.colspan === node.options.colspan) || nodes.every(e => e.options.isMerged)
+				})
+				result = onOff
+			}
+			return result
+		},
+		get isDisableSplitColumn() {
+			return node.options.colspan === 1
+		},
+		get isDisableSplitRow() {
+			return node.options.rowspan === 1
+		},
+		get isDisableDelRow() {
+			const nodes = getNodes(node, 'colspan')
+			const rowspanNodes = getNodes(node, 'rowspan')
+			return (
+				rowspanNodes.length === 1 ||
+				rowspanNodes.filter(e => !e.options.isMerged).length === 1 ||
+				!nodes.every(e => e.options.rowspan === node.options.rowspan)
+			)
+		},
+		get isDisableDelColumn() {
+			const nodes = getNodes(node, 'rowspan')
+			const colspanNodes = getNodes(node, 'colspan')
+			return (
+				colspanNodes.length === 1 ||
+				colspanNodes.filter(e => !e.options.isMerged).length === 1 ||
+				!nodes.every(e => e.options.colspan === node.options.colspan)
+			)
+		},
+		merge(type) {
+			const {
+				context: { root, col, row }
+			} = node
+			switch (type) {
+				case 'left':
+					findNode(node, 'before', 'colspan', (nodes, callBack) => {
+						callBack()
+					})
+					break
+				case 'right':
+					findNode(node, 'after', 'colspan', (nodes, callBack) => {
+						callBack()
+					})
+					break
+				case 'top':
+					findNode(node, 'before', 'rowspan', (nodes, callBack) => {
+						callBack()
+					})
+					break
+				case 'bottom':
+					findNode(node, 'after', 'rowspan', (nodes, callBack) => {
+						callBack()
+					})
+					break
+				case 'row':
+					while (root.rows[row].columns.length > root.rows[row].columns[0].options.colspan) {
+						findNode(root.rows[row].columns[0], 'after', 'colspan', (nodes, callBack) => {
+							callBack()
+						})
+					}
+					break
+				case 'column':
+					while (root.context.columns[col].length > root.context.columns[col][0].options.rowspan) {
+						findNode(root.context.columns[col][0], 'after', 'rowspan', (nodes, callBack) => {
+							callBack()
+						})
+					}
+					break
+				default:
+			}
+		},
+		insert(type) {
+			const {
+				context: { root, col, row }
+			} = node
+			switch (type) {
+				case 'left':
+					appendNodes(node, 'before', 'colspan')
+					// root.rows.forEach(e => {
+					//   addContext(e, root, false)
+					// })
+					break
+				case 'right':
+					appendNodes(node, 'after', 'colspan')
+					break
+				case 'top':
+					appendNodes(node, 'before', 'rowspan')
+					break
+				case 'bottom':
+					appendNodes(node, 'after', 'rowspan')
+					break
+			}
+		},
+		split(type) {
+			const {
+				context: { root, col, row }
+			} = node
+			const nodes = getNodes(node, type === 'column' ? 'colspan' : 'rowspan')
+			switch (type) {
+				case 'column':
+					//  zheliyoudu  没有考虑底层
+					nodes.slice(col, col + node.options.colspan).forEach(e => {
+						e.options.colspan = 1
+						e.options.isMerged = false
+						if (e.options.rowspan > 1) {
+							const nodes = getNodes(e, 'rowspan')
+							nodes.slice(row + 1, row + e.options.rowspan).forEach(e => {
+								e.options.colspan = 1
+							})
+						}
+					})
+					break
+				case 'row':
+					nodes.slice(row, row + node.options.rowspan).forEach(e => {
+						e.options.rowspan = 1
+						e.options.isMerged = false
+						if (e.options.colspan > 1) {
+							const nodes = getNodes(e, 'colspan')
+							nodes.slice(col + 1, col + e.options.colspan).forEach(e => {
+								e.options.rowspan = 1
+							})
+						}
+					})
+					break
+			}
+		},
+		del(type) {
+			const {
+				context: { root, col, row }
+			} = node
+			const nodes = getNodes(node, type === 'column' ? 'colspan' : 'rowspan')
+			// let result = false
+			switch (type) {
+				case 'column':
+					root.rows.forEach(e => {
+						e.columns.splice(col, node.options.colspan)
+						addContext(e, root)
+					})
+					break
+				case 'row':
+					root.rows.splice(row, node.options.rowspan)
+					root.rows.forEach(e => {
+						addContext(e, root)
+					})
+					break
+			}
+		}
+	}
+	Object.defineProperty(node, 'context', {
+		value: context,
+		writable: false,
+		enumerable: false,
+		configurable: true
+	})
+	let nodes = []
+	if (node.type === 'subform') {
+		nodes = node.list[0]
+	} else {
+		nodes = node.columns || node.list || node.rows || []
+	}
+	nodes.forEach(e => {
+		addContext(e, node, fn)
+	})
 }

src/components/packages/utils/field.js

@@ -16,10 +16,11 @@ const wrapElement = (element, fn) => {
       node.style = {}
     }
     if (!node.id) {
-      node.id = nanoid()
+      // node.id = nanoid()
+			node.id = new Date().getTime()
     }
     if (!node.key) {
-      node.key = `${node.type}_${node.id}`
+      node.key = `${node.type}${node.id}`
     }
     if (/^(grid|tabs|collapse|table|divider)$/.test(node.type)) {
       node.style = {

src/views/flow/create/components/FormDesign.vue

@@ -2,7 +2,7 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 // import { erFormEditor } from 'everright-formeditor'
 import { erFormEditor } from '@ER/formEditor'
-import 'Everright-formEditor/dist/style.css'
+// import 'Everright-formEditor/dist/style.css'
 import useFlowStore from '@/store/modules/flow'
 import { storeToRefs } from 'pinia'
 const flowStore = useFlowStore()