perf(表单组件): 下拉框新增默认值，优化布局

src/components/common/CustomDialog.vue

@@ -24,7 +24,7 @@ interface DialogProps {
 // 临时用的close
 const { dialogClose } = useDialog()
 
-const emits = defineEmits(['formSubmit'])
+const emits = defineEmits(['formSubmit', 'customSubmit'])
 
 // 新增的URL与更新URL，因为有时候更新和新增在一起，有时候是分开的，所以在这里去区分
 const addUrl = ref<string>('')
@@ -50,9 +50,15 @@ const dialogConfig = reactive({
 })
 
 /**
- * 游戏配置提交
+ * 表单提交
+ * 根据传入的配置决定是由用户自定义提交过程，还是由组件内部进行提交
  */
-const submitGameChange = () => {
+const submitForm = () => {
+  // if (props.config.customSubmit) {
+  //   emits('customSubmit', dialogFormRef.value?.getFormData(), dialogConfig.type)
+  //   return
+  // }
+
   dialogFormRef.value
     ?.submitFormData()
     .then((formData) => {
@@ -62,6 +68,15 @@ const submitGameChange = () => {
       dialogConfig.dialogVisible = false
     })
 }
+//
+const handleSubmit = () => {
+  // 待定，并没有使用
+  if (props.config.customSubmit) {
+    emits('customSubmit', dialogFormRef.value?.getFormData(), dialogConfig.type)
+    return
+  }
+  submitForm()
+}
 
 // 表单关闭
 const closeDialog = () => {
@@ -136,7 +151,7 @@ defineExpose({
         <div class="dialog-footer">
           <slot name="otherBtn"></slot>
           <slot name="btnGroup">
-            <el-button class="dialogBtn" type="primary" @click="submitGameChange()">
+            <el-button class="dialogBtn" type="primary" @click="handleSubmit()">
               {{ configBtnText }}
             </el-button>
             <el-button class="dialogBtn" @click="closeDialog">取消</el-button>

src/components/form/CustomForm.vue

@@ -39,6 +39,14 @@ const formData = reactive<Record<string, any>>({})
 const backupData = reactive<Record<string, any>>({})
 
 /**
+ * @description: 设置自定义的表单数据，当需要对表单中部分数据进行裁剪时可能用到
+ * @param customFormData 自定义的表单数据
+ */
+const setCustomFormData = (customFormData: any) => {
+  Object.assign(formData, customFormData)
+}
+
+/**
  * @description: 表单数据提交
  */
 const submitFormData = (otherOption?: any) => {
@@ -70,6 +78,7 @@ const submitFormData = (otherOption?: any) => {
  */
 const resetForm = () => {
   formRef.value?.resetFields()
+  setDefaultValue()
 }
 
 /**
@@ -160,6 +169,7 @@ onMounted(() => {
 
 defineExpose({
   submitFormData,
+  setCustomFormData,
   resetForm,
   fillForm,
   encryptData,
@@ -219,6 +229,26 @@ defineExpose({
             type="textarea"
             :placeholder="item.otherOptions?.placeholder"
           />
+          <div
+            v-if="item.type === FormFieldType.SWITCH"
+            class="itemVerticalCenter"
+            style="width: 300px"
+          >
+            <el-switch :id="item.name" v-model="formData[item.name]" style="margin-right: 5px" />
+            <el-tooltip placement="top">
+              <template #content>
+                <div>
+                  {{ item.otherOptions?.placeholder }}
+                  <pre v-if="item.otherOptions?.tip">{{
+                    typeof item.otherOptions.tip === 'function'
+                      ? item.otherOptions.tip()
+                      : item.otherOptions.tip
+                  }}</pre>
+                </div>
+              </template>
+              <el-icon><QuestionFilled /></el-icon>
+            </el-tooltip>
+          </div>
         </el-form-item>
       </template>
     </el-form>
@@ -253,4 +283,9 @@ defineExpose({
 .richTextItem {
   flex-basis: 100%;
 }
+
+.itemVerticalCenter {
+  display: flex;
+  align-items: center;
+}
 </style>

src/types/dialog.ts

@@ -7,13 +7,14 @@
  * @Description:
  *
  */
-import type {FormRules} from 'element-plus'
-import type {ReqConfig} from './dataAnalysis'
-import type {FormField} from './form'
+import type { FormRules } from 'element-plus'
+import type { ReqConfig } from './dataAnalysis'
+import type { FormField } from './form'
 
 export interface DialogConfig {
   title: string
   rules: FormRules
   reqConfig: ReqConfig
   fieldsInfo: Array<FormField>
+  customSubmit?: boolean // 是否需要自定义提交过程
 }

src/types/form.ts

@@ -1,12 +1,14 @@
 import type { ReqConfig } from '@/types/dataAnalysis'
 import type { FormRules } from 'element-plus'
+import type { VNode } from 'vue'
 
-export type ValueTypes = 'string' | 'int' | 'float'
+export type ValueTypes = 'string' | 'int' | 'float' | 'boolean'
 
 export enum FormFieldType {
   SELECT = 'select',
   INPUT = 'input',
-  RICHTEXT = 'richText'
+  RICHTEXT = 'richText',
+  SWITCH = 'switch'
 }
 
 export interface FormField {
@@ -17,6 +19,7 @@ export interface FormField {
   defaultValue?: any
   otherOptions?: {
     placeholder?: string
+    tip?: string | (() => string | VNode)
     options?: Array<{ name: string; label: string; value: any }>
   }
 }