'visa新增和详情对接'

Vuejs/Admin/src/components/horizontal-menu.js

@@ -30,20 +30,20 @@ export const menuItems = [
             // },
         // ]
     },
-    {
+    // {
-        id: 81,
+    //     id: 81,
-        label: 'menuitems.visa.text',
+    //     label: 'menuitems.visa.text',
-        icon: "bx-tone",
+    //     icon: "bx-tone",
-        link: '/tables/basic',
+    //     link: '/tables/basic',
-        // subItems: [
+    //     // subItems: [
-        //     {
+    //     //     {
-        //         id: 82,
+    //     //         id: 82,
-        //         label: 'menuitems.visa.list.basic',
+    //     //         label: 'menuitems.visa.list.basic',
-        //         link: '/tables/basic',
+    //     //         link: '/tables/basic',
-        //         parentId: 81
+    //     //         parentId: 81
-        //     },
+    //     //     },
-        // ]
+    //     // ]
-    },
+    // },
     {
         id: 66,
         label: "menuitems.blog.text",

Vuejs/Admin/src/plugins/axios.js

@@ -13,7 +13,7 @@ const service = axios.create({
     }
 })
 
-const needTokenURL = ['/visa/add','/visa/update','/auth/user/password/change']
+const needTokenURL = ['/api/visa/AddVisaCase','/visa/update','/auth/user/password/change']
 // 添加请求拦截器
 service.interceptors.request.use(
 	function (config) {

Vuejs/Admin/src/router/routes.js

@@ -99,6 +99,11 @@ export default [
     name: "addRecord",
     component: () => import("./views/visa/addRecord"),
   },
+  {
+    path: "/visa/detail",
+    name: "detailRecord",
+    component: () => import("./views/visa/detailRecord"),
+  },
   {
     path: "/account/user-active",
     name: "user-active",

Vuejs/Admin/src/router/views/home/list.vue

@@ -28,7 +28,8 @@ export default {
         "Last 7 Days' Complete Cases",
         "Last 30 Days' Complete Cases",
         "Last 90 Days' Complete Cases",
-        ]
+        ],
+    currentUser:{}
     };
   },
   watch:{
@@ -42,6 +43,7 @@ export default {
     }
   },
   mounted(){
+    this.currentUser = this.$store.getters['auth/getCurrentUser'];
     this.getList();
   },
   methods:{
@@ -50,6 +52,7 @@ export default {
       },
       showDetail(item){
           console.log('查看详情',JSON.stringify(item))
+          this.$router.push({path:'/visa/detail',query:{id:item.id}})
       },
       formSubmit(){
           alert('搜索---')
@@ -176,9 +179,10 @@ export default {
                         <td>{{item.visaStatus}}</td>
                         <td>{{item.dateVisaInterview}}</td>
                         <td>{{item.dateVisaCheckCompleted}}</td>
-                        <td><!-- {{item.visaStatus}} --></td>
+                        <td>{{item.waitDays}}</td>
                         <td>
                             <button
+                                v-if="item.saveUserId==currentUser.userId"
                                 type="button"
                                 class="btn btn-primary btn-sm btn-rounded"
                                 @click="showUpdate(item)"

Vuejs/Admin/src/router/views/visa/addRecord.vue

@@ -4,22 +4,18 @@ import appConfig from "@/app.config";
 import Datepicker from "vue3-datepicker";
 import useVuelidate from "@vuelidate/core";
 import { ref } from 'vue'
+
+import PageHeader from "@/components/page-header";
 import {
   required,
   helpers,
-  email,
-  minLength,
-  sameAs,
-  numeric,
-  url,
-  alphaNum,
 } from "@vuelidate/validators";
 export default {
   page: {
     title: "Add Record",
     meta: [{ name: "description", content: appConfig.description }],
   },
-  components: { Layout, Datepicker },
+  components: { Layout, Datepicker, PageHeader },
   data() {
     return {
       title: "Add Record",
@@ -30,52 +26,19 @@ export default {
         },
       ],
     typeform: {
-        date:ref(new Date()),
+        dateVisaInterview:ref(new Date()),
-        name: "",
+        dateVisaCheckCompleted: null,
-        password: "",
+        major: "",
-        confirmPassword: "",
+        visaCategory: "",
-        email: "",
+        visaStatus: "",
-        url: "",
+        visaEntry: "",
-        digit: "",
+        embassyConsulate: "",
-        number: "",
+        note: "",
-        alphanum: "",
+        saveUserId: "",
-        textarea: "",
       },
-    visaType:[{key:"F1",value:'F1'},
-              {key:"F2",value:'F2'},
-              {key:"H1",value:'H1'},
-              {key:"H4",value:'H4'},
-              {key:"J1",value:'J1'},
-              {key:"J2",value:'J2'},
-              {key:"B1",value:'B1'},
-              {key:"B2",value:'B2'},
-              {key:"L1",value:'L1'},
-              {key:"L2",value:'L2'},
-              {key:"O1",value:'O1'},
-              {key:"O2",value:'O2'},
-    ],
-    city:[
-        {key:'BeiJing',value:'BeiJing'},
-        {key:'ChengDu',value:'ChengDu'},
-        {key:'Chennai',value:'Chennai'},
-        {key:'Europe',value:'Europe'},
-        {key:'GuangZhou',value:'GuangZhou'},
-        {key:'HongKong',value:'HongKong'},
-        {key:'Kolkata',value:'Kolkata'},
-        {key:'MexicoCity',value:'MexicoCity'},
-        {key:'Montreal',value:'Montreal'},
-        {key:'Mumbai',value:'Mumbai'},
-        {key:'NewDelhi',value:'NewDelhi'},
-        {key:'Ottawa',value:'Ottawa'},
-        {key:'Quebec',value:'Quebec'},
-        {key:'ShangHai',value:'ShangHai'},
-        {key:'ShenYang',value:'ShenYang'},
-        {key:'Tijuana',value:'Tijuana'},
-        {key:'Toronto',value:'Toronto'},
-        {key:'Vancouver',value:'Vancouver'},
-        {key:'Others',value:'Others'},
-    ],
     typesubmit:false,
+    dictionaryCategory:{},
+    currentUser:{},
     };
   },
   
@@ -84,45 +47,47 @@ export default {
   },
   validations: {
     typeform: {
-        date:{ required: helpers.withMessage("CheckDate is required", required) },
+        dateVisaInterview:{ required: helpers.withMessage("CheckDate is required", required) },
-        name: { required: helpers.withMessage("Name is required", required) },
-        password: {
-            required: helpers.withMessage("Password is required", required),
-            minLength: minLength(6),
-        },
-        confirmPassword: {
-            required: helpers.withMessage("ConfirmPassword is required", required),
-            sameAsPassword: sameAs("password"),  
-        },
-        email: {
-            required: helpers.withMessage("Email is required", required),
-            email,
-        },
-        url: { required: helpers.withMessage("Url is required", required), url },
-        digit: {
-            required: helpers.withMessage("Digit is required", required),
-            numeric,
-        },
-        number: {
-            required: helpers.withMessage("Number is required", required),
-            numeric,
-        },
-        alphanum: {
-            required: helpers.withMessage("Alphanum is required", required),
-            alphaNum,
-        },
-        textarea: {
-            required: helpers.withMessage("Textarea is required", required),
-        },
     },
   },
+  mounted(){
+    this.currentUser = this.$store.getters['auth/getCurrentUser'];
+    this.typeform.saveUserId = this.currentUser.userId;
+    this.typeform.userName = this.currentUser.userName;
+    this.getAllDictionaries()
+  },
   methods: {
+    getAllDictionaries(){
+      this.dictionaryCategory = {}
+      this.$axios
+            .get("/api/dictionary/getAllDictionaries")
+            .then((res) => {
+              res.forEach(r => {
+                this.dictionaryCategory[r.category] = r.items
+              });
+              console.log(this.dictionaryCategory);
+            })
+            .catch(e=>{
+              console.log('getAllDictionaries()--error:',e)
+            })
+    },
     doClick(item){
         console.log('查看详情',JSON.stringify(item))
     },
     typeForm() {
         this.typesubmit = true;
         this.v$.$touch();
+        if (this.v$.$invalid) {
+          return;
+        }else{
+          this.$axios
+            .post("/api/visa/AddVisaCase", this.typeform)
+            .then((res) => {
+              return res;
+            }).catch(e=>{
+              console.log(e)
+            })
+        }
     },
   }
 };
@@ -130,233 +95,81 @@ export default {
 
 <template>
 <Layout>
-    <!-- <PageHeader :title="title" :items="items" /> -->
+    <PageHeader :title="title" :items="items" />
     <div class="row">
+      <div class="col-lg-3"></div>
       <div class="col-lg-6">
         <div class="card">
           <div class="card-body">
-            <h4 class="card-title">Validation type</h4>
+            <!-- <h4 class="card-title">Visa information</h4> -->
-            <p class="card-title-desc">
-              Parsley is a javascript form validation library. It helps you
-              provide your users with feedback on their form submission before
-              sending it to your server.
-            </p>
-
             <form action="#" @submit.prevent="typeForm">
                 <div class="mb-3">
                     <label>Check Date</label>
                     <div>
-                        <datepicker v-model="typeform.date" :first-day-of-week="1" lang="en" class="form-control"
+                        <datepicker v-model="typeform.dateVisaInterview" :first-day-of-week="1" :lang="$i18n.locale" class="form-control"
                         :class="{
-                        'is-invalid': typesubmit && v$.typeform.date.$error,
+                        'is-invalid': typesubmit && v$.typeform.dateVisaInterview.$error,
                         }"
                         ></datepicker>
                         <div
-                            v-for="(item, index) in v$.typeform.date.$errors"
+                            v-for="(item, index) in v$.typeform.dateVisaInterview.$errors"
                             :key="index"
                             class="invalid-feedback"
                         >
                             <span v-if="item.$message">{{ item.$message }}</span>
                         </div>
                     </div>
-                    
-                </div>
-                <div class="mb-3">
-                    <label>E-Mail</label>
-                    <div>
-                    <input
-                        v-model="typeform.email"
-                        type="email"
-                        name="email"
-                        class="form-control"
-                        :class="{
-                        'is-invalid': typesubmit && v$.typeform.email.$error,
-                        }"
-                        placeholder="Enter a valid e-mail"
-                    />
-                    <div
-                        v-for="(item, index) in v$.typeform.email.$errors"
-                        :key="index"
-                        class="invalid-feedback"
-                    >
-                        <span v-if="item.$message">{{ item.$message }}</span>
-                    </div>
-                    </div>
                 </div>
               <div class="mb-3">
-                <label>Required</label>
+                <label class="col-form-label">VISA TYPE:</label>
-                <input
+                <select class="form-control" v-model="typeform.visaCategory">
-                  v-model="typeform.name"
+                    <option v-for="item in dictionaryCategory['VISA_TYPE']" :value="item.value" :key="item.id">{{item.value}}</option>
-                  type="text"
+                </select>
-                  class="form-control"
-                  placeholder="Type something"
-                  name="name"
-                  :class="{
-                    'is-invalid': typesubmit && v$.typeform.name.$error,
-                  }"
-                />
-                <div
-                  v-if="typesubmit && v$.typeform.name.$error"
-                  class="invalid-feedback"
-                >
-                  <span v-if="v$.typeform.name.required.$message">{{
-                    v$.typeform.name.required.$message
-                  }}</span>
-                </div>
               </div>
 
               <div class="mb-3">
-                <label>Equal To</label>
+                <label class="col-form-label">VISA ENTRY:</label>
-                <div>
+                <select class="form-control" v-model="typeform.visaEntry">
-                  <input
+                    <option v-for="item in dictionaryCategory['VISA_ENTRY']" :value="item.value" :key="item.id">{{item.value}}</option>
-                    v-model="typeform.password"
+                </select>
-                    type="password"
-                    name="password"
-                    class="form-control"
-                    :class="{
-                      'is-invalid': typesubmit && v$.typeform.password.$error,
-                    }"
-                    placeholder="Password"
-                  />
-                  <div
-                    v-for="(item, index) in v$.typeform.password.$errors"
-                    :key="index"
-                    class="invalid-feedback"
-                  >
-                    <span v-if="item.$message">{{ item.$message }}</span>
-                  </div>
-                </div>
-                <div class="mt-2">
-                  <input
-                    v-model="typeform.confirmPassword"
-                    type="password"
-                    name="confirmPassword"
-                    class="form-control"
-                    :class="{
-                      'is-invalid':
-                        typesubmit && v$.typeform.confirmPassword.$error,
-                    }"
-                    placeholder="Re-Type Password"
-                  />
-                  <div
-                    v-for="(item, index) in v$.typeform.confirmPassword.$errors"
-                    :key="index"
-                    class="invalid-feedback"
-                  >
-                    <span v-if="item.$message">{{ item.$message }}</span>
-                  </div>
-                </div>
               </div>
-
               
               <div class="mb-3">
-                <label>URL</label>
+                <label class="col-form-label">US CONSULATE:</label>
-                <div>
+                <select class="form-control" v-model="typeform.embassyConsulate">
-                  <input
+                    <option v-for="item in dictionaryCategory['US_CONSULATE']" :value="item.value" :key="item.id">{{item.value}}</option>
-                    v-model="typeform.url"
+                </select>
-                    type="url"
+              </div>
-                    name="url"
+              
-                    class="form-control"
+              <div class="mb-3">
-                    placeholder="URL"
+                <label>Major</label>
-                    :class="{
+                <input
-                      'is-invalid': typesubmit && v$.typeform.url.$error,
+                  v-model="typeform.major"
-                    }"
+                  type="text"
-                  />
+                  name="major"
-                  <div
+                  class="form-control"
-                    v-for="(item, index) in v$.typeform.url.$errors"
+                  placeholder="major"
-                    :key="index"
+                />
-                    class="invalid-feedback"
-                  >
-                    <span v-if="item.$message">{{ item.$message }}</span>
-                  </div>
-                </div>
               </div>
               <div class="mb-3">
-                <label>Digits</label>
+                <label class="col-form-label">VISA_STATUS:</label>
-                <div>
+                <select class="form-control" v-model="typeform.visaStatus">
-                  <input
+                    <option v-for="item in dictionaryCategory['VISA_STATUS']" :value="item.value" :key="item.id">{{item.value}}</option>
-                    v-model="typeform.digit"
+                </select>
-                    type="text"
-                    name="digit"
-                    class="form-control"
-                    :class="{
-                      'is-invalid': typesubmit && v$.typeform.digit.$error,
-                    }"
-                    placeholder="Enter only digits"
-                  />
-                  <div
-                    v-for="(item, index) in v$.typeform.digit.$errors"
-                    :key="index"
-                    class="invalid-feedback"
-                  >
-                    <span v-if="item.$message">{{ item.$message }}</span>
-                  </div>
-                </div>
               </div>
               <div class="mb-3">
-                <label>Number</label>
+                <label>Complete Date:</label>
-                <div>
+                <datepicker v-model="typeform.dateVisaCheckCompleted" :first-day-of-week="1" :lang="$i18n.locale" class="form-control"></datepicker>
-                  <input
-                    v-model="typeform.number"
-                    type="text"
-                    name="number"
-                    class="form-control"
-                    :class="{
-                      'is-invalid': typesubmit && v$.typeform.number.$error,
-                    }"
-                    placeholder="Enter only numbers"
-                  />
-                  <div
-                    v-for="(item, index) in v$.typeform.number.$errors"
-                    :key="index"
-                    class="invalid-feedback"
-                  >
-                    <span v-if="item.$message">{{ item.$message }}</span>
-                  </div>
-                </div>
               </div>
               <div class="mb-3">
-                <label>Alphanumeric</label>
+                <label>Note:</label>
-                <div>
-                  <input
-                    v-model="typeform.alphanum"
-                    type="text"
-                    name="alphanum"
-                    class="form-control"
-                    :class="{
-                      'is-invalid': typesubmit && v$.typeform.alphanum.$error,
-                    }"
-                    placeholder="Enter alphanumeric value"
-                  />
-                  <div
-                    v-for="(item, index) in v$.typeform.alphanum.$errors"
-                    :key="index"
-                    class="invalid-feedback"
-                  >
-                    <span v-if="item.$message">{{ item.$message }}</span>
-                  </div>
-                </div>
-              </div>
-              <div class="mb-3">
-                <label>Textarea</label>
                 <div>
                   <textarea
-                    v-model="typeform.textarea"
+                    v-model="typeform.note"
                     class="form-control"
-                    name="textarea"
+                    name="note"
-                    :class="{
-                      'is-invalid': typesubmit && v$.typeform.textarea.$error,
-                    }"
                     rows="5"
                   ></textarea>
-                  <div
-                    v-if="typesubmit && v$.typeform.textarea.$error"
-                    class="invalid-feedback"
-                  >
-                    <span v-if="!v$.typeform.textarea.required"
-                      >This value is required.</span
-                    >
-                  </div>
                 </div>
               </div>
               <div class="mb-3 mb-0">

Vuejs/Admin/src/router/views/visa/detailRecord.vue

@@ -0,0 +1,135 @@
+<script>
+import Layout from "../../layouts/main";
+import appConfig from "@/app.config";
+
+import PageHeader from "@/components/page-header";
+import {
+  required,
+  helpers,
+} from "@vuelidate/validators";
+export default {
+  page: {
+    title: "Record Detail",
+    meta: [{ name: "description", content: appConfig.description }],
+  },
+  components: { Layout, PageHeader },
+  data() {
+    return {
+      title: "Record Detail",
+      items: [
+        {
+          text: "Record Detail",
+          href: "/visa/detail",
+        },
+      ],
+    // typeform: {
+    //     dateVisaInterview:ref(new Date()),
+    //     dateVisaCheckCompleted: null,
+    //     major: "",
+    //     visaCategory: "",
+    //     visaStatus: "",
+    //     visaEntry: "",
+    //     embassyConsulate: "",
+    //     note: "",
+    //     saveUserId: "",
+    //   },
+    typesubmit:false,
+    dictionaryCategory:{},
+    currentUser:{},
+    typeform:{},
+    };
+  },
+  
+  setup() {
+  },
+  validations: {
+    typeform: {
+        dateVisaInterview:{ required: helpers.withMessage("CheckDate is required", required) },
+    },
+  },
+  mounted(){
+    // this.currentUser = this.$store.getters['auth/getCurrentUser'];
+    // this.typeform.saveUserId = this.currentUser.userId;
+    // this.typeform.userName = this.currentUser.userName;
+    // this.getAllDictionaries()
+    this.getDetail()
+  },
+  methods: {
+    // getAllDictionaries(){
+    //   this.dictionaryCategory = {}
+    //   this.$axios
+    //         .get("/api/dictionary/getAllDictionaries")
+    //         .then((res) => {
+    //           res.forEach(r => {
+    //             this.dictionaryCategory[r.category] = r.items
+    //           });
+    //           console.log(this.dictionaryCategory);
+    //         })
+    //         .catch(e=>{
+    //           console.log('getAllDictionaries()--error:',e)
+    //         })
+    // },
+    getDetail() {
+      this.$axios
+        .get("/api/visa/GetById?id="+this.$route.query.id)
+        .then((res) => {
+          this.typeform = Object.assign(res);
+          return res;
+        }).catch(e=>{
+          console.log(e)
+        })
+    },
+  }
+};
+</script>
+
+<template>
+<Layout>
+    <PageHeader :title="title" :items="items" />
+    <div class="row">
+      <div class="col-lg-3"></div>
+      <div class="col-lg-6">
+        <div class="card">
+          <div class="card-body">
+              <div class="mb-3">
+                  <label class="col-form-label">Check Date:</label>
+                  <label class="col-form-label mx-lg-4">{{typeform.dateVisaInterview}}</label>
+              </div>
+              <div class="mb-3">
+                <label class="col-form-label">VISA TYPE:</label>
+                <label class="col-form-label mx-lg-4">{{typeform.visaCategory}}</label>
+              </div>
+
+              <div class="mb-3">
+                <label class="col-form-label">VISA ENTRY:</label>
+                <label class="col-form-label mx-lg-4">{{typeform.visaEntry}}</label>
+              </div>
+              
+              <div class="mb-3">
+                <label class="col-form-label">US CONSULATE:</label>
+                <label class="col-form-label mx-lg-4">{{typeform.embassyConsulate}}</label>
+              </div>
+              
+              <div class="mb-3">
+                <label class="col-form-label">Major</label>
+                <label class="col-form-label mx-lg-4">{{typeform.major}}</label>
+              </div>
+              <div class="mb-3">
+                <label class="col-form-label">VISA_STATUS:</label>
+                <label class="col-form-label mx-lg-4">{{typeform.visaStatus}}</label>
+              </div>
+              <div class="mb-3">
+                <label class="col-form-label">Complete Date:</label>
+                <label class="col-form-label mx-lg-4">{{typeform.dateVisaCheckCompleted}}</label>
+              </div>
+              <div class="mb-3">
+                <label class="col-form-label">Note:</label>
+                <label class="col-form-label">{{typeform.note}}</label>
+              </div>
+          </div>
+        </div>
+        <!-- end card -->
+      </div>
+    </div>
+</Layout>
+</template>