部分接口对接

auto-imports.d.ts

@@ -5,5 +5,5 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
 }

components.d.ts

@@ -19,6 +19,9 @@ declare module 'vue' {
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeade: typeof import('element-plus/es')['ElHeade']
@@ -56,4 +59,7 @@ declare module 'vue' {
     TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
     WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/App.vue

@@ -65,5 +65,8 @@ import zhCn from 'element-plus/es/locale/lang/zh-cn'
     height:100%;
     overflow: hidden;
   }
+  .el-loading-mask{
+    background:rgba(255,255,255,0.4)!important
+  }
 
 </style>

src/request/api.js

@@ -0,0 +1,36 @@
+import service from './index.ts'
+
+export const  login = query => {
+    return service({
+        url: '/api/auth/login',
+        method: 'POST',
+		data:query
+    });
+};
+
+export const  apiauthlogout = query => {
+    return service({
+        url: '/api/auth/logout',
+        method: 'POST',
+		data:query
+    });
+};
+
+//https://khy.xiaole.vip/api/system/dzbcArea/list查询定制班车-区域列表
+
+export const  apisystemdzbcArealist = query => {
+    return service({
+        url: '/api/system/dzbcArea/list',
+        method: 'GET',
+		data:query
+    });
+};
+
+//https://khy.xiaole.vip/api/system/dzbcArea/export导出定制班车-区域列表
+export const  apisystemdzbcArealist = query => {
+    return service({
+        url: '/api/system/dzbcArea/list',
+        method: 'GET',
+		data:query
+    });
+};

src/request/index.ts

@@ -3,18 +3,27 @@ import NProgress from 'NProgress'
 import { ElMessage } from 'element-plus'
 // 创建axios实例
 const service = axios.create({
-  baseURL: '', // api的base_url
+  baseURL: 'https://khy.xiaole.vip', // api的base_url
   timeout: 5000 // 请求超时时间
 });
  
 // 请求拦截器
+// localStorage.setItem('access_token',res.data.access_token)
 service.interceptors.request.use(
   config => {
     // 可以在这里添加请求头，例如：'Authorization'
-    // if (store.getters.token) {
+    // if (!store.getters.token) {
     //   config.headers['Authorization'] = `Bearer ${store.getters.token}`;
+    // }else{
+      
+    //   config.headers['Authorization'] = `Bearer 2f68dbbf-519d-4f01-9636-e2421b68f379`;
     // }
-    console.log('收到请求')
+    let Authorization=localStorage.getItem('access_token')
+
+    config.headers['clientId'] = 'e5cd7e4891bf95d1d19206ce24a7b32e';
+    if(Authorization){
+      config.headers['Authorization'] = 'Bearer'+` ${Authorization}`;
+    }
     NProgress.start();
     return config;
   },
@@ -31,34 +40,26 @@ service.interceptors.response.use(
     // 可以在这里对响应数据进行处理，例如：对返回的状态码进行判断
     const res = response.data;
     NProgress.done(true);   // 强制完成
-    ElMessage({
-        message: '调用成功',
-        type: 'error',
-        duration: 5 * 1000
-      });
-    // if (res.code !== 200) {
-    //   Message({
-    //     message: res.message,
-    //     type: 'error',
-    //     duration: 5 * 1000
-    //   });
-    //   // 50008: 非法用户; 50012: 其他客户端; 50014: 令牌超时
-    //   if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-    //     MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确认登出', {
-    //       confirmButtonText: '重新登录',
-    //       cancelButtonText: '取消',
-    //       type: 'warning'
-    //     }).then(() => {
-    //       store.dispatch('user/resetToken').then(() => {
-    //         location.reload();
-    //       });
-    //     });
-    //   }
-    //   return Promise.reject('error');
-    // } else {
-    //   return res;
-    // }
-    return response;
+    switch(res.code){
+      case 200:
+        break;
+        case 401:
+        ElMessage({
+          message: ''+res.msg,
+          type: 'error',
+          duration: 5 * 1000
+        });
+        break;
+      case 500:
+        ElMessage({
+          message: '服务器错误'+res.msg,
+          type: 'error',
+          duration: 5 * 1000
+        });
+        break;
+    }
+    return res
+    //return response.data;
   },
   error => {
     console.log('err' + error); // for debug

src/router/index.ts

@@ -56,6 +56,11 @@ const router = createRouter({
       ]
     },
     {
+      path: '/login',
+      name: 'login',
+      component: () => import("../views/login/index.vue"),
+    },
+    {
       path: '/about',
       name: 'about',
       

src/views/HomeView.vue

@@ -1,6 +1,10 @@
 
 <script lang="ts" setup>
-import { RouterView,useRoute  } from 'vue-router'
+import {apiauthlogout} from '../request/api.js'
+import { ElMessage } from 'element-plus'
+import { RouterView,useRoute,useRouter   } from 'vue-router'
+const route = useRoute();
+const router = useRouter();
 import {usenowrouteStore} from '../stores/nowroute.ts'
 const routerStore=usenowrouteStore()
 let {routename,setroute}=routerStore
@@ -21,7 +25,27 @@ const handleOpen = (key: string, keyPath: string[]) => {
 const handleClose = (key: string, keyPath: string[]) => {
  
 }
-const route = useRoute();
+const clickUser=(type: string)=>{
+  switch(type){
+    case 'logout':
+        apiauthlogout({}).then(res=>{
+          ElMessage({
+                message: '成功退出',
+                type: 'success',
+                duration: 3 * 1000
+          });
+          router.replace({
+            path:'/login'
+          })
+        }).catch(err=>{
+          console.log(err)
+        })
+        
+      break;
+  }
+  console.log(type)
+}
+
 
 // 使用 watch 监听路由对象的变化
 watch(() => route, (newRoute, oldRoute) => {
@@ -133,13 +157,27 @@ watch(() => route, (newRoute, oldRoute) => {
             </el-breadcrumb>
           </div>
           <div class="right-part">
-            <el-icon><BellFilled /></el-icon>
-            <div class="person-photo">
+            <el-icon :size="22"><BellFilled  /></el-icon>
+           
+            <el-dropdown @command="clickUser">
+              <div style="display:flex;align-items:center">
+                <div class="person-photo" style="cursor:pointer"></div>
+               
+                <div style="margin-right:24px;padding-left:6px;cursor:pointer">
+                  管理员
+                </div>
 
-            </div>
-            <div style="margin-right:24px;">
-              管理员
-            </div>
+                <el-icon class="el-icon--right">
+                  <arrow-down />
+                </el-icon>
+              </div>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+           
           </div>
         </el-header>
         <el-main>
@@ -193,7 +231,6 @@ watch(() => route, (newRoute, oldRoute) => {
           align-items: center;
           .person-photo{
             margin-left:24px;
-            margin-right:8px;
             height:32px;
             width:32px;
             background:red;

src/views/areaman/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { apisystemdzbcArealist } from '../../request/api.js'
 import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
 
 interface RuleForm {
@@ -107,49 +108,12 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 import { ref,onMounted,reactive } from 'vue'
 import { Search,Download,Tools,Plus,Check,Close } from "@element-plus/icons-vue";
 let searchWord=ref('')
+let total=ref(0)
+let pageNum=ref(1)
 let dialogVisible=ref(false)
 let logtitle=ref('新增用户')
-const tableData = [
-  {
-    date: '2016-05-03',
-    name: '天府新区',
-    latlon: '104.0647° E, 30.5702° N',
-    num:'3',
-    by:'天府新区客运中心',
-    status:'活跃'
-  },
-  {
-    date: '2016-05-03',
-    name: '高新西区',
-    latlon: '104.0647° E, 30.5702° N',
-    num:'3',
-    by:'高新西站',
-    status:'活跃'
-  },
-  {
-    date: '2016-05-03',
-    name: '武侯区',
-    latlon: '104.0647° E, 30.5702° N',
-    num:'3',
-    by:'武侯客运站',
-    status:'活跃'
-  },
-  {
-    date: '2016-05-03',
-    name: '锦江区',
-    latlon: '104.0647° E, 30.5702° N',
-    num:'3',
-    by:'锦江客运站',
-    status:'活跃'
-  }, {
-    date: '2016-05-03',
-    name: '双流区',
-    latlon: '104.0647° E, 30.5702° N',
-    num:'3',
-    by:'双流西站',
-    status:'活跃'
-  },
-]
+let loading=ref(true)
+const tableData = ref([])
 
 let activeName=ref('first')
 
@@ -157,8 +121,20 @@ const addUser=val=>{
   dialogVisible.value=val
 }
 
+const getTableData=()=>{
+  apisystemdzbcArealist({
+    
+  }).then(res=>{
+    loading.value=false
+    tableData.value=res.data.rows
+  }).catch(err=>{
+    console.log(err)
+  })
+}
+
+
 onMounted(()=>{
-  
+  getTableData()
 })
 
 
@@ -201,7 +177,7 @@ onMounted(()=>{
                         <el-button :icon="Tools">设置</el-button> -->
                       </div>
                     </div>
-                    <el-table header-row-class-name="reset-gray-head" :data="tableData"  style="width: 100%">
+                    <el-table element-loading-text='加载中' header-row-class-name="reset-gray-head" :data="tableData"  style="width: 100%" v-loading="loading">
                         <el-table-column prop="name" label="区域名称">
                           
                         </el-table-column>
@@ -226,14 +202,14 @@ onMounted(()=>{
                     <div class="common-page-wrap">
                       <div class="left-part">
                         <span>显示第 </span>
-                        <span>1 </span>
+                        <span>{{pageNum}}</span>
                         <span>至 </span>
                         <span>10 </span>
                         <span>条, </span>
-                        <span>共1000条记录 </span>
+                        <span>共{{total}}条记录 </span>
                       </div>
                       <div class="right-part">
-                        <el-pagination background layout="prev, pager, next" :total="1000" />
+                        <el-pagination background layout="prev, pager, next" :total="total" />
                       </div>
                     </div>
                   </div> 

src/views/login/index.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { useRouter,useRoute  } from 'vue-router'
+const route = useRoute();
+const router = useRouter();
+import { ref,onMounted,reactive } from 'vue'
+import {Lock,User } from "@element-plus/icons-vue";
+import type { ComponentSize, FormInstance } from 'element-plus'
+import {login} from '../../request/api.js'
+interface RuleForm {
+    username: string
+    password: string
+  
+}
+
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive<RuleForm>({
+    username: 'admin',
+    password: 'g350488F'
+})
+
+let loading=ref(false)
+
+
+
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+    loading.value=true
+    login({
+    "clientId": "e5cd7e4891bf95d1d19206ce24a7b32e",
+    "grantType": "password",
+    "username":ruleForm.username,
+    "password":ruleForm.password
+}).then((res: any)=>{
+        if(res.msg=='操作成功'){
+            ElMessage({
+                message: '登陆成功',
+                type: 'success',
+                duration: 3 * 1000
+            });
+            localStorage.setItem('access_token',res.data.access_token)
+            loading.value=false
+            router.push({
+                path:'/'
+            })
+        }
+    }).catch((err: any)=>{
+        loading.value=false
+        console.log(err)
+    })
+
+}
+
+
+
+
+
+onMounted(()=>{
+  
+})
+
+
+</script>
+
+<template>
+    <div class="login-wrap">
+    
+        <div class="ms-login">
+            <div class="right">
+                <div class="ms-title">车辆调度管理系统</div>
+                <div style="padding-bottom:20px">
+                    请登录以继续使用
+                </div>
+                <el-form
+                label-position="top"
+                :model="ruleForm"
+                label-width="auto"
+                class="form-wrap"
+               
+                status-icon
+            >
+                <el-form-item label="账号" prop="name">
+                    <el-input :prefix-icon="User" v-model="ruleForm.username" />
+                </el-form-item>
+               
+                <el-form-item label="密码" prop="name">
+                    <el-input  type="password" :prefix-icon="Lock"  show-password  v-model="ruleForm.password" />
+                </el-form-item>
+                
+              
+               
+                <el-form-item label="" prop="name">
+                    <el-checkbox v-model="checked1" label="记住我" size="large" />
+                </el-form-item>
+                
+                <el-form-item>
+                    <el-button :loading="loading" style="width:100%;background:#2563eb;height:40px" type="primary" @click="submitForm">
+                        {{ loading?'登录中':'登录' }}
+                    </el-button>
+              
+                </el-form-item>
+            </el-form>
+
+            <div style="padding:10px 0 20px 0;">
+                <span style="margin-right:5px">首次使用吗?</span>
+                <span style="color:#326cec">联系管理员</span>
+            </div>
+               
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<style scoped>
+.form-wrap{
+    width:80%;
+    margin:0 auto;
+    border-bottom:1px solid rgba(0,0,0,0.1)
+   
+}
+
+.bold-title{
+    text-align:center;
+    font-size:32px;
+    font-weight:bold;
+    color:#fff;
+    position:absolute;
+    top:20%;
+    left:0;
+    right:0;
+}
+
+.login-wrap {
+    text-align: center;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background:#4e6ef2;
+    background-size: 100% 100%;
+}
+.ms-title {
+    width: 100%;
+    padding:40px 0 10px 0;
+    text-align: center;
+    font-size: 26px;
+    font-weight: 700;
+    
+}
+.ms-login {
+    position: absolute;
+    left: 50%;
+    z-index:10000;
+    top: 50%;
+    width: 520px;
+    margin: -190px 0 0 -260px;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.9);
+    overflow: hidden;
+    border-bottom:1px solid #edf0f2;
+}
+
+
+.ms-content {
+    padding: 30px 30px;
+}
+.login-btn {
+    text-align: center;
+}
+.login-btn button {
+    width: 100%;
+    height: 36px;
+    margin-bottom: 10px;
+}
+.login-tips {
+    padding-left:20px;
+    font-size: 12px;
+    line-height: 30px;
+    color: #333;
+}
+</style>