签证修改

src/components/OP/visaEdit.vue

@@ -0,0 +1,224 @@
+<template>
+    <div class="visaedit-box">
+        <div class="visaedit-title">
+            添加团组客户资料
+        </div>
+        <div class="small-title">
+            <span>基础信息</span>
+        </div>
+        <div class="tips">
+            姓名等需要与护照所示一致；曾用姓名包括未婚时称呼、宗教用称呼、工作用称呼、化名
+        </div>
+        <div class="foundation-form">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+                <div class="foundation-box">
+                    <el-form-item label="姓:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="名:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="曾用姓名:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="移动电话:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="身份证号" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="身份证地址" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="护照号:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="婚姻状况:" prop="name">
+                        <el-input v-model="ruleForm.name" placeholder="(已婚/单身(未婚)/丧偶/离异/分居)"></el-input>
+                    </el-form-item>
+                    <el-form-item label="证件有效期:" prop="name">
+                        <el-input v-model="ruleForm.name" placeholder="身份证有效期"></el-input>
+                    </el-form-item>
+                    <el-form-item label="至:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="护照号:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="国籍:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="性别" prop="resource">
+                        <el-radio-group v-model="ruleForm.resource">
+                            <el-radio label="男"></el-radio>
+                            <el-radio label="女"></el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="出生地 城市:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="省份:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="出生日期:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="最高学历:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="家庭电话:" prop="name">
+                        <el-input v-model="ruleForm.name" placeholder="(座机)"></el-input>
+                    </el-form-item>
+                    <el-form-item label="电子信箱:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="现居地址:" prop="name">
+                        <el-input v-model="ruleForm.name" placeholder="(国家-省-市-街道-单元-门牌号)"></el-input>
+                    </el-form-item>
+                    <el-form-item label="邮编:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                </div>
+            </el-form>
+        </div>
+        <div class="small-title">
+            现就职单位
+        </div>
+        <div class="flats-form">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+                <div class="foundation-box">
+                    <el-form-item label="单位名称:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="单位地址:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="单位邮编:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="职务:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="入职时间" prop="name">
+                        <el-input v-model="ruleForm.name" placeholder="(注明年月日)"></el-input>
+                    </el-form-item>
+                    <el-form-item label="月薪" prop="name">
+                        <el-input v-model="ruleForm.name" placeholder="(人民币)"></el-input>
+                    </el-form-item>
+                    <el-form-item label="单位电话:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="单位传真:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="单位邮箱:" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="单位主管:" prop="name">
+                        <el-input v-model="ruleForm.name" placeholder="姓名:(除本人以外)"></el-input>
+                    </el-form-item>
+                </div>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+      return {
+        ruleForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        rules: {
+          name: [
+            { required: true, message: '请输入活动名称', trigger: 'blur' },
+            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+          ],
+          region: [
+            { required: true, message: '请选择活动区域', trigger: 'change' }
+          ],
+          date1: [
+            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+          ],
+          date2: [
+            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
+          ],
+          type: [
+            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
+          ],
+          resource: [
+            { required: true, message: '请选择活动资源', trigger: 'change' }
+          ],
+          desc: [
+            { required: true, message: '请填写活动形式', trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+}
+</script>
+<style>
+    .visaedit-box{
+        background-color: #fff;
+        padding: 10px;
+        box-shadow: 0 0 5px #0005;
+        border-radius: 10px;
+    }
+    .visaedit-title{
+        display: flex;
+        font-size: 17px;
+        font-weight:600 ;
+        color: #555;
+        margin-top: 8px;
+        margin-bottom: 2px;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .tips{
+        margin-bottom: 10px;
+        font-size: 12px;
+        color: #555;
+    }
+    .foundation-box{
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .foundation-box .el-form-item{
+        width: 25%;
+    }
+    .small-title{
+        font-size: 14px;
+        font-weight:600 ;
+        color: #555;
+        margin: 10px 0;
+    }
+    .small-title>span{
+        display: inline;
+        padding: 5px 10px;
+        border: 1px solid #606266;
+        border-radius: 5px;
+    }
+</style>

src/components/OP/visaform.vue

@@ -112,7 +112,7 @@
         </div>
         <div class="form-box">
             <div class="visas-title">
-                <div>外部存储用户信息处</div>
+                <div>历史用户信息处</div>
                 <div class="visas-box">
                     <el-input
                         @input="clickUsers()"
@@ -353,6 +353,10 @@ export default {
     .search-li:nth-child(1){
         width: 20%;
     }
+    .search-li:nth-child(1) .el-select{
+        width: 100%;
+        margin: 0;
+    }
     .search-li:nth-child(2){
         width: 80%;
         justify-content: end;

src/router/index.js

@@ -33,6 +33,7 @@ import ThreeCode from '@/components/Resource/ThreeCode'
 import ThreeCodeOperation from '@/components/Resource/ThreeCodeOperation'
 import HotelData from '@/components/Resource/HotelData'
 import visaform from '@/components/OP/visaform'
+import visaEdit from '@/components/OP/visaEdit'
 Vue.use(Router)
 
 export default new Router({
@@ -183,6 +184,11 @@ export default new Router({
           path: '/home/visaform',
           name: 'visaform',
           component: visaform
+        },
+        {
+          path: '/home/visaEdit',
+          name: 'visaEdit',
+          component: visaEdit
         }
       ]
     },