单点登录,动态新增

2024-03-28 18:04:52 +08:00
parent 14f6838c50
commit dfa4c3d4da
7 changed files with 815 additions and 338 deletions
@@ -0,0 +1,79 @@
+<template>
+    <div>
+        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+            <el-form-item prop="email" label="邮箱" :rules="[
+            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+        ]">
+                <el-input v-model="dynamicValidateForm.email"></el-input>
+            </el-form-item>
+            <div v-for="(item, index) in dynamicValidateForm.domains" :key="item.key">
+                <el-form-item :label="'域名' + index" :prop="'domains.' + index + '.value.name'" :rules="{
+            required: true, message: '域名不能为空', trigger: 'blur'
+        }">
+                    <el-input v-model="item.value.name"></el-input>
+                </el-form-item>
+                <el-form-item :label="'链接' + index" :prop="'domains.' + index + '.value.url'" :rules="{
+            required: true, message: '链接不能为空', trigger: 'blur'
+        }">
+                    <el-input v-model="item.value.url"></el-input>
+                </el-form-item>
+                <el-button @click.prevent="removeDomain(item)">删除</el-button>
+            </div>
+            <el-form-item>
+                <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
+                <el-button @click="addDomain">新增域名</el-button>
+                <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            dynamicValidateForm: {
+                domains: [{
+                    value: {
+                        name: "",
+                        url: ""
+                    }
+                }],
+                email: ''
+            },
+            data: { "applicant": { "id": 123, "caseAppliId": 5453163805296176, "userId": null, "applicantDeptId": null, "code": null, "compLegalPerson": null, "roleType": 1, "groupOrder": 2, "operatorFlag": 0, "phone": "17691225077", "email": "1129801211@qq.com", "name": "白贵勇", "home": "西安", "address": "西安", "idCard": "612429198708193335", "idType": null, "nationality": null, "birth": null, "sex": null, "resName": null }, "applicantAgent": null, "res": { "id": 124, "caseAppliId": 5453163805296176, "userId": null, "applicantDeptId": null, "code": null, "compLegalPerson": null, "roleType": 3, "groupOrder": 2, "operatorFlag": 0, "phone": "18792927508", "email": "1322446236@qq.com", "name": "王琼", "home": "西安", "address": "西安", "idCard": "14050219970814622X", "idType": null, "nationality": null, "birth": null, "sex": null, "resName": null }, "resAgent": null }
+        };
+    },
+    methods: {
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    alert('submit!');
+                    console.log(this.dynamicValidateForm);
+
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        removeDomain(item) {
+            var index = this.dynamicValidateForm.domains.indexOf(item)
+            if (index !== -1) {
+                this.dynamicValidateForm.domains.splice(index, 1)
+            }
+        },
+        addDomain() {
+            this.dynamicValidateForm.domains.push({
+                value: {
+                    name: "",
+                    key: Date.now()
+                },
+            });
+        }
+    }
+}
+</script>