From b2618f208620b1e1abb71223361c5066d46bf933 Mon Sep 17 00:00:00 2001
From: Gary Fu <xuebaiyouling@gmail.com>
Date: Sat, 13 Jan 2024 15:23:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=A1=A8=E5=8D=95=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/tools/Forms.vue | 67 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 65 insertions(+), 2 deletions(-)

diff --git a/src/views/tools/Forms.vue b/src/views/tools/Forms.vue
index 6cc7b97..d266f54 100644
--- a/src/views/tools/Forms.vue
+++ b/src/views/tools/Forms.vue
@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue'
 import { useCityAutocompleteConfig, useCitySelectPageConfig } from '@/services/city/CityService'
 import { $i18nMsg } from '@/messages'
+import { ElMessage } from 'element-plus'
 
 const defaultCity = ref({})
 
@@ -149,7 +150,37 @@ const formOptions = computed(() => {
     }
   }]
 })
-const userDto = ref({})
+const userDto = ref({
+  contacts: [{
+    name: 'Jerry',
+    phone: '1234567890'
+  }]
+})
+/**
+ * @type {CommonFormOption[]}
+ */
+const contactsOptions = ref([{
+  label: '联系人姓名',
+  prop: 'name',
+  required: true
+}, {
+  label: '联系电话',
+  prop: 'phone',
+  required: true
+}])
+
+const addContact = () => {
+  if (userDto.value.contacts.length < 3) {
+    userDto.value.contacts.push({})
+  } else {
+    ElMessage.error('联系人不能超过3个')
+  }
+}
+
+const deleteContact = idx => {
+  userDto.value.contacts.splice(idx, 1)
+}
+
 const submitForm = (form) => {
   console.info(form)
   form.validate((valid) => {
@@ -171,11 +202,43 @@ const submitForm = (form) => {
       label-width="120px"
       @submit-form="submitForm"
     >
+      <template #default>
+        <el-form-item>
+          <el-button
+            type="primary"
+            size="small"
+            @click="addContact"
+          >
+            添加联系人
+          </el-button>
+        </el-form-item>
+        <template
+          v-for="(contact, index) in userDto.contacts"
+          :key="index"
+        >
+          <common-form-control
+            v-for="(option, optIdx) in contactsOptions"
+            :key="`${index}-${optIdx}`"
+            :model="contact"
+            :option="option"
+            :prop="`contacts.${index}.${option.prop}`"
+          />
+          <el-form-item>
+            <el-button
+              type="danger"
+              size="small"
+              @click.prevent="deleteContact(index)"
+            >
+              Delete
+            </el-button>
+          </el-form-item>
+        </template>
+      </template>
       <template
         #buttons="{form}"
       >
         <el-button @click="form.resetFields()">
-          自定义按钮
+          重置
         </el-button>
       </template>
     </common-form>