修改表单构建

src/views/tool/draggable/elements/hw-radio-group.vue

@@ -4,9 +4,7 @@
     <tool v-if="selectUuid === options.uuid" :options="options" />
     <el-form-item :label="options.name" :required="options.required">
       <el-radio-group v-model="formData[options.key || ('radio-group-'+options.uuid)]" :disabled="options.disabled">
-        <el-radio :value="3">Option A</el-radio>
+        <el-radio :value="i.value" v-for="i in options.radioItems">{{ i.label }}</el-radio>
-        <el-radio :value="6">Option B</el-radio>
-        <el-radio :value="9">Option C</el-radio>
       </el-radio-group>
     </el-form-item>
   </div>

src/views/tool/draggable/index.vue

@@ -149,7 +149,7 @@ const dragList = [
   },
   {
     type: 'hw-radio-group', isContainer: false,
-    options: { name: '单选框组', items: [{ value: '1', label: '1' }, { value: '1', label: '1' }] },
+    options: { name: '单选框组', radioItems: [{ value: '1', label: '1' }, { value: '1', label: '1' }] },
     name: '单选框组',
     id: 5
   },
@@ -279,7 +279,6 @@ const exportFile = () => {
   margin: 8px;
   border: 1px solid #ccc;
   min-height: 100px;
-  //user-select: none;
 }
 
 //user-select: none;

src/views/tool/draggable/option/optionForm.vue

@@ -2,10 +2,11 @@
 
 import inputType from './inputType.vue';
 import inputNumberType from './inputNumberType.vue';
-import tableType from './tableType.vue';
+import tableType from './table/tableType.vue';
 import inputAreaType from './inputAreaType.vue';
 import switchType from './switchType.vue';
 import functionType from './functionType.vue';
+import radioItems from './table/radioItem.vue';
 
 export default {
   name: 'option-form',
@@ -15,7 +16,8 @@ export default {
     tableType,
     inputAreaType,
     switchType,
-    functionType
+    functionType,
+    radioItems
   }
 };
 </script>
@@ -38,6 +40,7 @@ const typeEnum = {
   inputAreaType: [],
   inputNumberType: ['min', 'max', 'step'],
   tableType: ['thTdMap'],
+  radioItems: ['radioItems'],
   switchType: ['isReset', 'isResetBottom', 'isSubmitBottom', 'disabled', 'isPagination', 'isInLine', 'isOperate', 'controlsPosition'],
   functionType: ['submitFunction', 'updateFunction', 'deleteFunction', 'addFunction']
 };
@@ -67,7 +70,8 @@ const nameEnum = {
   min: '最小值',
   max: '最大值',
   step: '步长',
-  controlsPosition: '按钮是否位于右侧'
+  controlsPosition: '按钮是否位于右侧',
+  radioItems: '单选框数据设置'
 };
 const getType = (e) => {
   let res = '';

src/views/tool/draggable/option/table/radioItem.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-form-item :label="itemName">
+    <div style="overflow:auto;">
+      <el-table :data="formData[keyValue]" style="min-width:700px">
+        <el-table-column prop="label" label="字段名">
+          <template #default="scope">
+            <el-input v-model="formData[keyValue][scope.$index]['label']" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="value" label="字段值">
+          <template #default="scope">
+            <el-input v-model="formData[keyValue][scope.$index]['value']" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="" label="" width="50">
+          <template #default="scope">
+            <el-button size="small" type="danger" :icon="Delete" circle @click="delItem(scope.$index)" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-button @click="onAddItem">
+      添加字段
+    </el-button>
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import {
+  Delete
+} from '@element-plus/icons-vue';
+
+const props = defineProps({
+  formData: String,
+  keyValue: String,
+  itemName: String
+});
+
+const { formData, keyValue, itemName } = toRefs(props);
+
+const onAddItem = () => {
+  formData.value[keyValue.value].push({
+    value: '',
+    label: ''
+  });
+};
+const delItem = (e) => {
+  formData.value[keyValue.value].splice(e, 1);
+};
+</script>
+<style scoped lang="less">
+</style>
+
+
+

src/views/tool/draggable/viewElements/hw-radio-group-view.vue

@@ -1,9 +1,7 @@
 <template>
   <el-form-item :label="options.name" :required="options.required">
     <el-radio-group v-model="formData[options.key || ('radio-group-'+options.uuid)]" :disabled="options.disabled">
-      <el-radio :value="3">Option A</el-radio>
+      <el-radio :value="i.value" v-for="i in options.radioItems">{{ i.label }}</el-radio>
-      <el-radio :value="6">Option B</el-radio>
-      <el-radio :value="9">Option C</el-radio>
     </el-radio-group>
   </el-form-item>
 </template>