Skip to content

fix: 修复单选框多选框 选择器未使用label作为选项 #1719

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 30, 2024
Merged

fix: 修复单选框多选框 选择器未使用label作为选项 #1719

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion ui/src/components/dynamics-form/constructor/items/JsonInputConstructor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import JsonInput from '@/components/dynamics-form/items/JsonInput.vue'
const props = defineProps<{
modelValue: any
}>()
const formField = ref<any>({})
const emit = defineEmits(['update:modelValue'])
const formValue = computed({
set: (item) => {
Expand Down
6 changes: 3 additions & 3 deletions ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
<el-option
v-for="(option, index) in formValue.option_list"
:key="index"
:label="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
Expand Down Expand Up @@ -102,8 +102,8 @@ const getData = () => {
input_type: 'MultiSelect',
attrs: {},
default_value: formValue.value.default_value,
textField: 'label',
valueField: 'value',
text_field: 'label',
value_field: 'value',
option_list: formValue.value.option_list
}
}
Copy link

@fit2cloudrd fit2cloudrd Nov 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

该段代码没有明显问题，逻辑清晰且语法正确。

Expand Down
6 changes: 3 additions & 3 deletions ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
<el-option
v-for="(option, index) in formValue.option_list"
:key="index"
:label="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
Expand Down Expand Up @@ -94,8 +94,8 @@ const getData = () => {
input_type: 'SingleSelect',
attrs: {},
default_value: formValue.value.default_value,
textField: 'label',
valueField: 'value',
text_field: 'label',
value_field: 'value',
option_list: formValue.value.option_list
}
}
Copy link

@fit2cloudrd fit2cloudrd Nov 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

该段代码没有明显的差错或优化机会，只是简单的 HTML + Vue 实现了一个单选框表单组件，它包含一个 select 和两个输入字段 textField 和 valueField 。Vue 的 data 属性和方法也已正确设置。

在这个版本中：

  1. 标签选择 (input-type为singleselect)，默认绑定到 "label" 字段，并可将值指定为"value".
  2. 使用 options 列出不同的选项。

尽管如此，如果你希望使用更现代的元素，请尝试移除 <el-form> 元素以及替换相应的数据属性。这可能包括将其更改为更具表现力的方式（例如通过 React 进行封装）：

// 导入必要的库
import { ElForm } from 'element-plus';

const FormElementProps = {
  inputType: 'SingleSelect',
  defaultValues: null,
};

class SingleSelect extends HTMLElement {
  constructor() {
    super();
    // 在这里添加额外的信息和逻辑处理
  }

  connectedCallback(event) {
    this.$parent.addEventListeners(this);
  }

  handleInputChange = event => {
    console.log("Input changed:", event.detail.value); // 示例：在控制台打印获取的用户输入值
  };
}

请注意，在实际项目中可能需要对上述部分进行适当的修改以适应具体的业务需求。

Expand Down
9 changes: 5 additions & 4 deletions ui/src/workflow/nodes/form-node/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,18 +113,19 @@ import { type FormInstance } from 'element-plus'
import { ref, onMounted, computed } from 'vue'
import { input_type_list } from '@/components/dynamics-form/constructor/data'
import { MsgError } from '@/utils/message'
import { set } from 'lodash'
import { set,cloneDeep } from 'lodash'
const props = defineProps<{ nodeModel: any }>()
const formNodeFormRef = ref<FormInstance>()
const editFormField = (form_field_data: any, field_index: number) => {
form_data.value.form_field_list = form_data.value.form_field_list.map(
const _value=form_data.value.form_field_list.map(
(item: any, index: number) => {
if (field_index === index) {
return form_field_data
return cloneDeep(form_field_data)
}
return item
return cloneDeep(item)
}
)
form_data.value.form_field_list = _value
sync_form_field_list()
}
const addFormField = (form_field_data: any) => {
Copy link

@fit2cloudrd fit2cloudrd Nov 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

该部分有轻微逻辑问题：

  1. useSync 方法名称应更改为 sync_form_field_list。
  2. 处理新增字段的操作可以合并为以下代码：
// 在这里添加 new field data 到数组里，并通过 sync 函数同步到表单结构中

export function syncFieldLists(fieldTypeList: Array<any>, formData: any) {
  // 先将新的字段列表复制一份以防止原数据被修改影响到新数据 
  const newFieldTypeList = cloneSpreadDeep(formData.form_field_list);
  
  for (let i = 0; i < fieldTypeList.length; i++) {
    const itemToAdd = fieldTypeList[i];
    
    // 同步已存在的字段到新创建的字段对象上，但需要确保不会替换掉原来的值
    try {
      newFieldTypeList.find((f: any) => f.fieldValue === itemToAdd.addValue)
      .setFieldValue(itemToAdd.getValue())
    } catch(e: any) {

注意：这段代码中的处理方法没有考虑到类型匹配的情况。如果在传递给 addFormField 的参数和之前已经有的属性冲突，则可能不会正确处理。

其他地方整体来看语法无误。

Expand Down