feat: 表单节点添加多选框,选项卡等组件

1Panel-dev · Nov 19, 2024 · 2bbb334 · 2bbb334
1 parent 54e0000
commit 2bbb334
Show file tree

Hide file tree

Showing 8 changed files with 528 additions and 54 deletions.
diff --git a/ui/src/components/dynamics-form/constructor/data.ts b/ui/src/components/dynamics-form/constructor/data.ts
@@ -15,13 +15,25 @@ const input_type_list = [
     label: '单选框',
     value: 'SingleSelect'
   },
+  {
+    label: '多选框',
+    value: 'MultiSelect'
+  },
   {
     label: '日期',
     value: 'DatePicker'
   },
   {
     label: 'JSON文本框',
     value: 'JsonInput'
+  },
+  {
+    label: '选项卡',
+    value: 'RadioCard'
+  },
+  {
+    label: '单行选项卡',
+    value: 'RadioRow'
   }
 ]
 export { input_type_list }
diff --git a/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue b/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
@@ -0,0 +1,129 @@
+<template>
+  <el-form-item>
+    <template #label>
+      <div class="flex-between">
+        选项值
+        <el-button link type="primary" @click.stop="addOption()">
+          <el-icon class="mr-4">
+            <Plus />
+          </el-icon>
+          添加
+        </el-button>
+      </div>
+    </template>
+    <el-row style="width: 100%" :gutter="10">
+      <el-col :span="10"
+        ><div class="grid-content ep-bg-purple" />
+        标签</el-col
+      >
+      <el-col :span="12"
+        ><div class="grid-content ep-bg-purple" />
+        选项值</el-col
+      >
+    </el-row>
+    <el-row
+      style="width: 100%"
+      v-for="(option, $index) in formValue.option_list"
+      :key="$index"
+      :gutter="10"
+    >
+      <el-col :span="10"
+        ><div class="grid-content ep-bg-purple" />
+        <el-input v-model="formValue.option_list[$index].label" placeholder="请输入选项标签"
+      /></el-col>
+      <el-col :span="12"
+        ><div class="grid-content ep-bg-purple" />
+        <el-input v-model="formValue.option_list[$index].value" placeholder="请输入选项值"
+      /></el-col>
+      <el-col :span="1"
+        ><div class="grid-content ep-bg-purple" />
+        <el-button link class="ml-8" @click.stop="delOption($index)">
+          <el-icon>
+            <Delete />
+          </el-icon> </el-button
+      ></el-col>
+    </el-row>
+  </el-form-item>
+  <el-form-item
+    label="默认值"
+    :required="formValue.required"
+    prop="default_value"
+    :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
+  >
+    <el-select
+      class="m-2"
+      multiple
+      collapse-tags
+      filterable
+      clearable
+      v-model="formValue.default_value"
+      :teleported="false"
+      popper-class="default-select"
+    >
+      <el-option
+        v-for="(option, index) in formValue.option_list"
+        :key="index"
+        :label="option.value"
+        :value="option.value"
+      />
+    </el-select>
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const formValue = computed({
+  set: (item) => {
+    emit('update:modelValue', item)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+
+const addOption = () => {
+  formValue.value.option_list.push({ value: '', label: '' })
+}
+
+const delOption = (index: number) => {
+  const option = formValue.value.option_list[index]
+  if (option.value && formValue.value.default_value == option.value) {
+    formValue.value.default_value = ''
+  }
+  formValue.value.option_list.splice(index, 1)
+}
+
+const getData = () => {
+  return {
+    input_type: 'MultiSelect',
+    attrs: {},
+    default_value: formValue.value.default_value,
+    textField: 'label',
+    valueField: 'value',
+    option_list: formValue.value.option_list
+  }
+}
+const rander = (form_data: any) => {
+  formValue.value.option_list = form_data.option_list || []
+  formValue.value.default_value = form_data.default_value
+}
+
+defineExpose({ getData, rander })
+onMounted(() => {
+  formValue.value.option_list = []
+  formValue.value.default_value = ''
+})
+</script>
+<style lang="scss" scoped>
+:deep(.el-form-item__label) {
+  display: block;
+}
+
+:deep(.el-select-dropdown) {
+  max-width: 400px;
+}
+</style>
diff --git a/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue b/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue
@@ -0,0 +1,122 @@
+<template>
+  <el-form-item>
+    <template #label>
+      <div class="flex-between">
+        选项值
+        <el-button link type="primary" @click.stop="addOption()">
+          <el-icon class="mr-4">
+            <Plus />
+          </el-icon>
+          添加
+        </el-button>
+      </div>
+    </template>
+
+    <el-row style="width: 100%" :gutter="10">
+      <el-col :span="10"
+        ><div class="grid-content ep-bg-purple" />
+        标签</el-col
+      >
+      <el-col :span="12"
+        ><div class="grid-content ep-bg-purple" />
+        选项值</el-col
+      >
+    </el-row>
+    <el-row
+      style="width: 100%"
+      v-for="(option, $index) in formValue.option_list"
+      :key="$index"
+      :gutter="10"
+    >
+      <el-col :span="10"
+        ><div class="grid-content ep-bg-purple" />
+        <el-input v-model="formValue.option_list[$index].label" placeholder="请输入选项标签"
+      /></el-col>
+      <el-col :span="12"
+        ><div class="grid-content ep-bg-purple" />
+        <el-input v-model="formValue.option_list[$index].value" placeholder="请输入选项值"
+      /></el-col>
+      <el-col :span="1"
+        ><div class="grid-content ep-bg-purple" />
+        <el-button link class="ml-8" @click.stop="delOption($index)">
+          <el-icon>
+            <Delete />
+          </el-icon> </el-button
+      ></el-col>
+    </el-row>
+  </el-form-item>
+  <el-form-item
+    label="默认值"
+    :required="formValue.required"
+    prop="default_value"
+    :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
+  >
+    <RadioCard
+      :form-field="formField"
+      v-model="formValue.default_value"
+      :other-params="{}"
+      field="default_value"
+    >
+    </RadioCard>
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import RadioCard from '@/components/dynamics-form/items/radio/RadioCard.vue'
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const formValue = computed({
+  set: (item) => {
+    emit('update:modelValue', item)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+
+const addOption = () => {
+  formValue.value.option_list.push({ value: '', label: '' })
+}
+
+const delOption = (index: number) => {
+  const option = formValue.value.option_list[index]
+  if (option.value && formValue.value.default_value == option.value) {
+    formValue.value.default_value = ''
+  }
+  formValue.value.option_list.splice(index, 1)
+}
+const formField = computed(() => {
+  return getData()
+})
+const getData = () => {
+  return {
+    input_type: 'RadioCard',
+    attrs: {},
+    default_value: formValue.value.default_value,
+    text_field: 'label',
+    value_field: 'value',
+    option_list: formValue.value.option_list
+  }
+}
+const rander = (form_data: any) => {
+  formValue.value.option_list = form_data.option_list || []
+  formValue.value.default_value = form_data.default_value
+}
+
+defineExpose({ getData, rander })
+onMounted(() => {
+  formValue.value.option_list = []
+  formValue.value.default_value = ''
+})
+</script>
+<style lang="scss" scoped>
+:deep(.el-form-item__label) {
+  display: block;
+}
+
+:deep(.el-select-dropdown) {
+  max-width: 400px;
+}
+</style>