信息模块完成，审批假界面

auto-imports.d.ts

@@ -2,6 +2,4 @@
 export {}
 declare global {
   const ElMessage: typeof import('element-plus/es')['ElMessage']
-  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
-  const ElNotification: typeof import('element-plus/es')['ElNotification']
 }

components.d.ts

@@ -36,6 +36,7 @@ declare module '@vue/runtime-core' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
@@ -75,4 +76,7 @@ declare module '@vue/runtime-core' {
     UploadExcel: typeof import('./src/components/UploadExcel/index.vue')['default']
     VueCountTo: typeof import('./src/components/vue-count-to/vue-countTo.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/api/examine.js

@@ -0,0 +1,57 @@
+import request from '../utils/request';
+function getCurrentTimestamp() {
+    return new Date().getTime();
+}
+
+
+// 提交申请
+export function ReviewAdd(data, token) {
+    return request({
+        url: '/review/add',
+        method: 'post',
+        params: data,
+        headers: {
+            'Authorization':'Bearer '+token,
+            'Timestamp':getCurrentTimestamp()
+        }
+    });
+}
+// 获取我的审核列表
+export function GetMyReview(data, token) {
+    return request({
+        url: '/review/getMyReview',
+        method: 'get',
+        params: data,
+        headers: {
+            'Authorization':'Bearer '+token,
+            'Timestamp':getCurrentTimestamp()
+        }
+    });
+}
+
+//修改审核状态
+// id result
+export function UpdateReviewResult(data, token) {
+    return request({
+        url: '/review/updateReviewResult',
+        method: 'get',
+        params: data,
+        headers: {
+            'Authorization':'Bearer '+token,
+            'Timestamp':getCurrentTimestamp()
+        }
+    });
+}
+
+//获取审核记录
+export function ReviewRecords(data, token) {
+    return request({
+        url: '/review/getReviewRecords',
+        method: 'get',
+        params: data,
+        headers: {
+            'Authorization':'Bearer '+token,
+            'Timestamp':getCurrentTimestamp()
+        }
+    });
+}

src/api/message.js

@@ -1,15 +1,29 @@
+import request from '../utils/request';
 
 
 function getCurrentTimestamp() {
     return new Date().getTime();
 }
-export function login(data) {
+export function messageGet(data, token) {
     return request({
         url: '/message/get',
-        method: 'post',
+        method: 'get',
-        data,
+        params: data,
         headers: {
+            'Authorization':'Bearer '+token,
             'Timestamp':getCurrentTimestamp()
         }
     });
 }
+
+export function messageDelete(data, token) {
+    return request({
+        url: '/message/delete',
+        method: 'delete',
+        params: data,
+        headers: {
+            'Authorization':'Bearer '+token,
+            'Timestamp':getCurrentTimestamp()
+        }
+    })
+}

src/layout/components/Navbar.vue

@@ -89,8 +89,9 @@ export default defineComponent({
     async logout() {
         console.log('5989569898')
         // store.user().login()
-        // await store.user().logout();
+        // await store.user().logoutBug();
         await store.user().logout();
+        // await store.user().logoutTest();
       this.$router.push(`/login?redirect=${this.$route.fullPath}`);
     }
   }

src/router/index.ts

@@ -163,7 +163,7 @@ export const asyncRoutes:RouteRecordRaw[] = [
       alwaysShow: true, // will always show the root menu
       title: '个人项目',
       icon: 'nested',
-      roles: ['admin', 'teacher_user']
+      roles: ['admin', 'teacher_user', 'principle', 'developer', 'console']
     },
     children: [
       {
@@ -171,21 +171,21 @@ export const asyncRoutes:RouteRecordRaw[] = [
         path: 'charge',
         component: () => import('@/views/personal/project/charge.vue'),
         name: 'Charge',
-        meta: { title: '我负责的', icon: 'user', affix: true }
+        meta: { title: '我负责的', icon: 'user', affix: true, role: ['console'] }
       },
       {
         // 我管理的
         path: 'manage',
         component: () => import('@/views/personal/project/manage.vue'),
         name: 'Manage',
-        meta: { title: '我管理的', icon: 'user', affix: true }
+        meta: { title: '我管理的', icon: 'user', affix: true, role: ['principle', 'developer', 'console'] }
       },
       {
         // 我参与的
         path: 'participate',
         component: () => import('@/views/personal/project/participate.vue'),
         name: 'Participate',
-        meta: { title: '我参与的', icon: 'user', affix: true }
+        meta: { title: '我参与的', icon: 'user', affix: true, role: ['principle', 'developer', 'console'] }
       },
 
 
@@ -253,7 +253,7 @@ export const asyncRoutes:RouteRecordRaw[] = [
         path: 'd',
         component: () => import('@/views/tab/index.vue'),
         name: 'Tab',
-        meta: { title: '日报', icon: 'tab' }
+        meta: { title: '日报', icon: 'tab', role: ['principle', 'developer', 'console'] }
       }
     ]
   },
@@ -291,47 +291,41 @@ export const asyncRoutes:RouteRecordRaw[] = [
         path: 'ms',
         component: () => import('@/views/error-log/index.vue'),
         name: 'ErrorLog',
-        meta: { title: '信息', icon: 'bug' }
+        meta: { title: '信息', icon: 'bug', role: ['principle', 'developer', 'console'] }
       }
     ]
   },
 
-  // {
+  {
-  //   path: '/excel',
+    path: '/excel',
-  //   component: Layout,
+    component: Layout,
-  //   redirect: '/excel/export-excel',
+    redirect: '/excel/export-excel',
-  //   name: 'Excel',
+    name: 'Excel',
-  //   meta: {
+    meta: {
-  //     title: 'Excel',
+      title: '申请和审批',
-  //     icon: 'excel'
+      icon: 'excel'
-  //   },
+    },
-  //   children: [
+    children: [
-  //     {
+      {
-  //       path: 'export-excel',
+        path: 'export-excel',
-  //       component: () => import('@/views/excel/export-excel.vue'),
+        component: () => import('@/views/excel/export-excel.vue'),
-  //       name: 'ExportExcel',
+        name: 'ExportExcel',
-  //       meta: { title: 'Export Excel' }
+        meta: { title: '提交申请' }
-  //     },
+      },
-  //     {
+      {
-  //       path: 'export-selected-excel',
+        path: 'export-selected-excel',
-  //       component: () => import('@/views/excel/select-excel.vue'),
+        component: () => import('@/views/excel/select-excel.vue'),
-  //       name: 'SelectExcel',
+        name: 'SelectExcel',
-  //       meta: { title: 'Export Selected' }
+        meta: { title: '我的审批' }
-  //     },
+      },
-  //     {
+      {
-  //       path: 'export-merge-header',
+        path: 'export-update-excel',
-  //       component: () => import('@/views/excel/merge-header.vue'),
+        component: () => import('@/views/excel/upload-excel.vue'),
-  //       name: 'MergeHeader',
+        name: 'MergeHeader',
-  //       meta: { title: 'Merge Header' }
+        meta: { title: '记录查询' }
-  //     },
+      }
-  //     {
+    ]
-  //       path: 'upload-excel',
+  },
-  //       component: () => import('@/views/excel/upload-excel.vue'),
-  //       name: 'UploadExcel',
-  //       meta: { title: 'Upload Excel' }
-  //     }
-  //   ]
-  // },
 
   // {
   //   path: '/zip',

src/store/modules/user.ts

@@ -131,6 +131,7 @@ export default defineStore({
 
       });
     },
+    //logoutBug: 只删除后端的token，不删除浏览器的token
     logoutBug():Promise<void> {
       console.log("token",this.token)
       return new Promise((resolve, reject) => {
@@ -148,6 +149,7 @@ export default defineStore({
 
       });
     },
+    //logoutTest: 只删除浏览器的token，后端不删除
     logoutTest(): void {
       removeToken();
       console.log("removeTokenTestSuccess");

src/utils/request.js

@@ -15,9 +15,9 @@ const service = axios.create({
 
 // request interceptor
 service.interceptors.request.use(
+
   config => {
     // do something before request is sent
-
     if (store.user().token) {
       // let each request carry token
       // ['X-Token'] is a custom headers key
@@ -48,7 +48,7 @@ service.interceptors.response.use(
   response => {
     const res = response.data;
     // console.log("removeToken:",removeToken())
-    console.log('999999',res)
+    console.log('999999',response)
     if (res.code === 40103) {
       store.user().logoutTest();
       console.log("返回登录成功")

src/views/error-log/index.vue

@@ -6,41 +6,21 @@
                 <span>消息</span>
             </template>
             <div style="display:flex;flex-direction:row;justify-content: space-between ">
-                <div>
+                    <div class="block">
-                    时间
+                        <span class="demonstration" style="margin-right: 8px">时间</span>
-                    <el-date-picker
+                        <el-date-picker
-                        v-model="value2"
+                                v-model="value2"
-                        type="daterange"
+                                type="datetimerange"
-                        unlink-panels
+                                :shortcuts="shortcuts"
-                        range-separator="——"
+                                range-separator="To"
-                        start-placeholder="开始时间"
+                                start-placeholder="Start date"
-                        end-placeholder="结束时间"
+                                end-placeholder="End date"
-                        :shortcuts="shortcuts"
+                        />
-                        :size="large"
+                    </div>
-                        style="margin-left:0.5vw"
-                    />
-                </div>
-<!--                <div>-->
-<!--                    状态-->
-<!--                    <el-select-->
-<!--                        v-model="value"-->
-<!--                        clearable-->
-<!--                        placeholder="Status"-->
-<!--                        style="width: 240px;margin-left:0.5vw"-->
-<!--                    >-->
-<!--                        <el-option-->
-<!--                            v-for="item in options"-->
-<!--                            :key="item.value"-->
-<!--                            :label="item.label"-->
-<!--                            :value="item.value"-->
-<!--                        />-->
-<!--                    </el-select>-->
-
-<!--                </div>-->
 
                 <div>
-                  <el-button type="primary" style="width:80px">查询</el-button>
+                  <el-button type="primary" style="width:80px" @click="selectMessage">查询</el-button>
-                    <el-button style="width:80px">重置</el-button>
+                    <el-button  style="width:80px" @click="resetting">重置</el-button>
 
                 </div>
             </div>
@@ -49,44 +29,53 @@
             <div style="display:flex;flex-direction: row;justify-content: space-between">
                 <el-button
                         text
-                        type=''
                 >历史记录</el-button
                 >
+                <el-tag type="primary" style="margin-right: 1.7vw">总数：{{messageData.total}}</el-tag>
             </div>
 
-            <div v-for="(row, index) in tableData" :key="index" class="table-row">
+            <div style="height: 43vh">
-                <div class="table-cell">
+                <div v-for="(row, index) in messageData.data" :key="index" class="table-row">
-                    <div class="date" style="display:flex;flex-direction: column">
+                    <div class="table-author" style="text-align: left">
-                        <span style="color:skyblue">{{row.name}}</span>
+                    <span class="date" style="display:flex;flex-direction: column">
+                        <span style="color:skyblue">{{row.senderName}}</span>
                         <span>{{ row.text }}</span>
+                    </span>
+                    </div>
+                    <div class="table-time createdTime">
+                        <span>{{ formatDateTime(row.createdAt) }}</span>
+                    </div>
+                    <div class="table-btn table-cell-right">
+                        <el-button size="small" type="danger" @click="handleDelete(index, row);centerDialogVisible = true">Delete</el-button>
+                        <el-dialog v-model="centerDialogVisible" title="删除" width="500"  :modal="false">
+                        <span>
+                          是否确认删除此条信息？
+                        </span>
+                            <template #footer>
+                                <div class="dialog-footer">
+                                    <el-button @click="centerDialogVisible = false">取消</el-button>
+                                    <el-button type="primary" @click="deleteItem">
+                                        确认
+                                    </el-button>
+                                </div>
+                            </template>
+                        </el-dialog>
                     </div>
                 </div>
-                <div class="table-cell createdTime">
-                            <div>{{ row.createdAt }}</div>
-                </div>
-                <div class="table-cell table-cell-right">
-                    <el-button size="small" type="danger" @click="handleDelete(index, row);centerDialogVisible = true">Delete</el-button>
-                    <el-dialog v-model="centerDialogVisible" title="删除" width="500"  :modal="false">
-    <span>
-是否确认删除此条信息？
-    </span>
-                        <template #footer>
-                            <div class="dialog-footer">
-                                <el-button @click="centerDialogVisible = false">取消</el-button>
-                                <el-button type="primary" @click="centerDialogVisible = false">
-                                    确认
-                                </el-button>
-                            </div>
-                        </template>
-                    </el-dialog>
-                </div>
             </div>
+<!--            <el-pagination page-size="5" v-model:current-page="currentPage"-->
+<!--                background-->
+<!--                layout="prev, pager, next"-->
+<!--                :total="messageData.total"-->
+<!--                style="display: flex;flex-direction: row;justify-content: center;margin-top: 0.5vh"-->
+<!--            />-->
+
             <el-pagination
-                size="large"
+                    @current-change="pagination"
-                background
+                    background layout="prev, pager, next"
-                layout="prev, pager, next"
+                    :total="messageData.total"
-                :total="50"
+                    v-model:page-size="requestData.pageSize"
-                style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
+                    style="display: flex;flex-direction: row;justify-content: center;margin-top: 0.5vh"
             />
         </el-card>
 
@@ -95,66 +84,86 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import {onMounted, reactive, ref, watch} from 'vue';
+import {messageGet, messageDelete} from '@/api/message'
+import {getToken} from "@/utils/auth";
 // 删除对话框
 const centerDialogVisible = ref(false);
 // 时间选择器
-const value2 = ref('');
+const value2 = ref('')
+
+let currentPage = ref(1);
+function flushData() {
+    messageGet(requestData, getToken()).then((res)=>{
+        console.log("getMessageResult:",res.data);
+        messageData.data = res.data.list
+        messageData.total = res.data.total
+        currentPage = res.data.currentPage
+    })
+}
+function pagination(currentPage: number) {
+    requestData.page = currentPage
+    flushData()
+}
 const shortcuts = [
-  {
+    {
-    text: 'Last week',
+        text: 'Last week',
-    value: () => {
+        value: () => {
-      const end = new Date();
+            const end = new Date()
-      const start = new Date();
+            const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            start.setDate(start.getDate() - 7)
-      return [start, end];
+            return [start, end]
+        },
+    },
+    {
+        text: 'Last month',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setMonth(start.getMonth() - 1)
+            return [start, end]
+        },
+    },
+    {
+        text: 'Last 3 months',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setMonth(start.getMonth() - 3)
+            return [start, end]
+        },
+    },
+]
+let requestData = reactive({
+    page:1,
+    pageSize: 5,
+    begin: '',
+    end: ''
+})
+// 监听时间选择器，对时间选择器的数据进行拆分并传到请求数据中。
+watch(value2, (newValue) => {
+    if (newValue !== '') {
+        requestData.begin = formatDateTime(newValue[0])
+        requestData.end = formatDateTime(newValue[1])
     }
-  },
+})
-  {
+// watch(currentPage, async (newPage, oldPage) => {
-    text: 'Last month',
+//     requestData.page = newPage
-    value: () => {
+//     flushData()
-      const end = new Date();
+// })
-      const start = new Date();
+const messageData = reactive({
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+    data:[],
-      return [start, end];
+    total: 0
-    }
+
-  },
+})
-  {
+
-    text: 'Last 3 months',
+
-    value: () => {
+onMounted(() => {
-      const end = new Date();
+  flushData()
-      const start = new Date();
+})
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-      return [start, end];
-    }
-  }
-];
 
 // 状态选择器
 
-const value = ref('');
-const options = [
-  {
-    value: 'Option1',
-    label: '未开始'
-  },
-  {
-    value: 'Option2',
-    label: '进行中'
-  },
-  {
-    value: 'Option3',
-    label: '暂停'
-  },
-  {
-    value: 'Option4',
-    label: 'Option4'
-  },
-  {
-    value: 'Option5',
-    label: '已完成'
-  }
-];
 
 // 表格
 interface Message {
@@ -163,38 +172,55 @@ interface Message {
     name: string
     text: string
 }
-
+const deleteData = reactive({
+    id: -1
+})
 const handleDelete = (index: number, row: Message) => {
+    deleteData.id = row.id
   console.log(index, row);
+    console.log("time:select", value2.value[1])
 };
+function deleteItem(){
+    if (deleteData.id === -1) {
+        ElMessage.error("删除异常，请重试！")
+    } else {
+        messageDelete(deleteData, getToken()).then((res) => {
+            console.log(res,'删除')
+            if (res.code === 200) {
+                flushData()
+                ElMessage.success("删除成功")
+            }
+        })
+    }
+    centerDialogVisible.value = false
+}
 
-const tableData: Message[] = [
+function  selectMessage (){
-  {
+    try {
-      id:1 ,
+        flushData()
-    createdAt: '2016-05-03',
+        console.log(requestData)
-    name: 'Tom',
+        ElMessage.success('查询成功')
-    text: 'No. 189, Grove St, Los Angeles'
+    }catch (e) {
-  },
+        ElMessage.success('查询失败')
-    {
+    }
-        id:1 ,
+}
-        createdAt: '2016-05-03',
+function resetting(){
-        name: 'Tom',
+    requestData.begin = ''
-        text: 'No. 189, Grove St, Los Angeles'
+    requestData.end = ''
-    },
+    value2.value = ''
-    {
+}
-        id:1 ,
+//自定义方法：格式化时间
-        createdAt: '2016-05-03',
+function formatDateTime(dateTimeString: string): string {
-        name: 'Tom',
+    const dateTime = new Date(dateTimeString);
-        text: 'No. 189, Grove St, Los Angeles'
+    const year = dateTime.getFullYear();
-    },
+    const month = String(dateTime.getMonth() + 1).padStart(2, '0');
-    {
+    const date = String(dateTime.getDate()).padStart(2, '0');
-        id:1 ,
+    const hours = String(dateTime.getHours()).padStart(2, '0');
-        createdAt: '2016-05-03',
+    const minutes = String(dateTime.getMinutes()).padStart(2, '0');
-        name: 'Tom',
+    const seconds = String(dateTime.getSeconds()).padStart(2, '0');
-        text: 'No. 189, Grove St, Los Angeles'
-    },
 
-];
+    return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
+}
 </script>
 <style>
 .my-autocomplete li {
@@ -219,19 +245,38 @@ const tableData: Message[] = [
     /*margin-bottom: 10px;*/
 }
 
-.table-cell {
+.table-author {
     flex: 1;
     padding: 10px;
     display: flex;
-    justify-content: center;
+    justify-content: left;
     align-items: center;
+    /*background-color: #04befe;*/
+}
+.table-time {
+    flex: 0.3;
+    padding: 10px;
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    /*background-color: #ff1439;*/
+}
+.table-btn {
+    flex: 0.3;
+    padding: 0px;
+
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    /*background-color: #32fe04;*/
 }
 .createdTime{
     margin-left: 50px;
+    margin-top: 10px;
 }
 .table-cell-right {
     justify-content: flex-end;
-    margin-right:5vw;
+    margin-right:2vw;
 }
 .date {
     display: flex;

src/views/excel/export-excel.vue

@@ -1,120 +1,119 @@
 <template>
-  <div class="app-container">
+  <el-card style="max-width: 100vw; margin: 1.5vw;height: 81vh">
+      <template #header>
+          <strong >提交申请</strong>
+      </template>
+      <div>
+          <div class="selectedContent">
+              <span class="selectedHeader">01.申请类别</span>
+              <el-select v-model="form.region" placeholder="请选择申请类别" style="width: 15vw">
+                  <el-option label="子系统" value="system" />
+                  <el-option label="模块" value="module" />
+              </el-select>
+          </div>
+          <div class="selectedContent">
+              <span class="selectedHeader">02.申请所属</span>
+              <el-autocomplete
+                      v-model="state2"
+                      :fetch-suggestions="querySearch"
+                      :trigger-on-focus="false"
+                      clearable
+                      class="inline-input w-50"
+                      placeholder="所属项目"
+                      @select="handleSelect"
+                      style="width: 15vw"
+              />
+          </div>
+          <div class="selectedContent">
+<!--              <span>02.申请所属</span>-->
+              <el-select v-model="form.childSystem" class="selectedChild"    v-show="form.region === 'module'" placeholder="所属子系统" style="width: 15vw">
+                  <el-option label="子系统" value="system" />
+                  <el-option label="模块" value="module" />
+              </el-select>
+          </div>
+          <div class="selectedContent">
+              <span class="selectedHeader">03.申请名称</span>
+              <el-select style="width: 15vw">
+                  <el-option></el-option>
+              </el-select>
+          </div>
+          <div class="selectedContent" style="display: flex;flex-direction: row">
+              <span class="selectedHeader">04.申请理由</span>
+              <el-input
+                      v-model="textarea"
+                      :rows="4"
+                      type="textarea"
+                      placeholder="Please input"
+                      style="width: 20vw"
+              />
+          </div>
+          <el-button type="primary" style="margin: 7vh 45vw ">提交申请</el-button>
+      </div>
 
-    <div style="margin: 0 0 20px 0;">
+  </el-card>
-      <FilenameOption v-model="filename" />
-      <AutoWidthOption v-model="autoWidth" />
-      <BookTypeOption v-model="bookType" />
-      <el-button :loading="downloadLoading" style="margin:0 0 0 20px;" type="primary" :icon="IconDocument" @click="handleDownload">
-        Export Excel
-      </el-button>
-      <a href="https://vue3-element-admin-site.midfar.com/feature/component/excel.html" target="_blank" style="margin-left:15px;">
-        <el-tag type="info" size="large">Documentation</el-tag>
-      </a>
-    </div>
-
-    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading..." border fit highlight-current-row>
-      <el-table-column align="center" label="Id" width="95">
-        <template v-slot="scope">
-          {{ scope.$index }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Title">
-        <template v-slot="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
-        <template v-slot="scope">
-          <el-tag>{{ scope.row.author }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="Readings" width="115" align="center">
-        <template v-slot="scope">
-          {{ scope.row.pageviews }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="Date" width="220">
-        <template v-slot="scope">
-          <el-icon><IconTimer /></el-icon>
-          <span>{{ parseTime(scope.row.timestamp, '{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
 </template>
+<script setup lang="ts">
+import {onMounted, reactive, ref} from "vue";
 
-<script>
+const textarea = ref('')
-import { defineComponent, markRaw } from 'vue';
+const form = reactive({
-import { fetchList } from '@/api/article';
+    region:'',
-import { parseTime } from '@/utils';
+    childSystem:''
-// options components
+})
-import FilenameOption from './components/FilenameOption';
+interface RestaurantItem {
-import AutoWidthOption from './components/AutoWidthOption';
+    value: string
-import BookTypeOption from './components/BookTypeOption';
+    link: string
-import { Document as IconDocument, Timer as IconTimer } from '@element-plus/icons-vue';
+}
 
-export default defineComponent({
+
-  name: 'ExportExcel',
+const state2 = ref('')
-  components: { FilenameOption, AutoWidthOption, BookTypeOption, IconTimer },
+
-  data() {
+const restaurants = ref<RestaurantItem[]>([])
-    return {
+const querySearch = (queryString: string, cb: any) => {
-      IconDocument: markRaw(IconDocument),
+    const results = queryString
-      list: null,
+        ? restaurants.value.filter(createFilter(queryString))
-      listLoading: true,
+        : restaurants.value
-      downloadLoading: false,
+    // call callback function to return suggestions
-      filename: '',
+    cb(results)
-      autoWidth: true,
+}
-      bookType: 'xlsx'
+const createFilter = (queryString: string) => {
-    };
+    return (restaurant: RestaurantItem) => {
-  },
+        return (
-  created() {
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-    this.fetchData();
+        )
-  },
-  methods: {
-    parseTime,
-    fetchData() {
-      this.listLoading = true;
-      fetchList().then(response => {
-        this.list = response.data.items;
-        this.listLoading = false;
-      });
-    },
-    handleDownload() {
-      this.downloadLoading = true;
-      import('@/vendor/Export2Excel').then(excel => {
-        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date'];
-        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'];
-        const list = this.list;
-        const data = this.formatJson(filterVal, list);
-        excel.export_json_to_excel({
-          header: tHeader,
-          data,
-          filename: this.filename,
-          autoWidth: this.autoWidth,
-          bookType: this.bookType
-        });
-        this.downloadLoading = false;
-      });
-    },
-    formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => {
-        if (j === 'timestamp') {
-          return parseTime(v[j]);
-        } else {
-          return v[j];
-        }
-      }));
     }
-  }
+}
-});
+const loadAll = () => {
+    return [
+        { value: 'vue', link: 'https://github.com/vuejs/vue' },
+        { value: 'element', link: 'https://github.com/ElemeFE/element' },
+        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+        { value: 'babel', link: 'https://github.com/babel/babel' },
+    ]
+}
+
+const handleSelect = (item: RestaurantItem) => {
+    console.log(item)
+}
+
+onMounted(() => {
+    restaurants.value = loadAll()
+})
 </script>
 
-<style>
+<style scoped>
-.radio-label {
+.selectedHeader{
-  font-size: 14px;
+    font-weight: bold;
-  color: #606266;
+    margin-right: 2vw;
-  line-height: 40px;
+}
-  padding: 0 12px 0 30px;
+.selectedContent{
+    margin-left: 35vw;
+    margin-top:5vh
+}
+.selectedChild{
+    margin-left: 7.7vw;
 }
 </style>

src/views/excel/merge-header.vue

@@ -1,106 +0,0 @@
-<template>
-  <div class="app-container">
-
-    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" :icon="IconDocument" @click="handleDownload">Export</el-button>
-
-    <el-table
-      ref="multipleTable"
-      v-loading="listLoading"
-      :data="list"
-      element-loading-text="Loading"
-      border
-      fit
-      highlight-current-row
-    >
-      <el-table-column align="center" label="Id" width="95">
-        <template v-slot="scope">
-          {{ scope.$index }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Main Information" align="center">
-        <el-table-column label="Title">
-          <template v-slot="scope">
-            {{ scope.row.title }}
-          </template>
-        </el-table-column>
-        <el-table-column label="Author" width="110" align="center">
-          <template v-slot="scope">
-            <el-tag>{{ scope.row.author }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="Readings" width="115" align="center">
-          <template v-slot="scope">
-            {{ scope.row.pageviews }}
-          </template>
-        </el-table-column>
-      </el-table-column>
-      <el-table-column align="center" label="Date" width="220">
-        <template v-slot="scope">
-          <el-icon><IconTimer /></el-icon>
-          <span>{{ parseTime(scope.row.timestamp, '{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-
-  </div>
-</template>
-
-<script>
-import { defineComponent, markRaw } from 'vue';
-import { fetchList } from '@/api/article';
-import { parseTime } from '@/utils';
-import { Document as IconDocument, Timer as IconTimer } from '@element-plus/icons-vue';
-
-export default defineComponent({
-  name: 'MergeHeader',
-  components: { IconTimer },
-  data() {
-    return {
-      IconDocument: markRaw(IconDocument),
-      list: null,
-      listLoading: true,
-      downloadLoading: false
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    parseTime,
-    fetchData() {
-      this.listLoading = true;
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.items;
-        this.listLoading = false;
-      });
-    },
-    handleDownload() {
-      this.downloadLoading = true;
-      import('@/vendor/Export2Excel').then(excel => {
-        const multiHeader = [['Id', 'Main Information', '', '', 'Date']];
-        const header = ['', 'Title', 'Author', 'Readings', ''];
-        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'];
-        const list = this.list;
-        const data = this.formatJson(filterVal, list);
-        const merges = ['A1:A2', 'B1:D1', 'E1:E2'];
-        excel.export_json_to_excel({
-          multiHeader,
-          header,
-          merges,
-          data
-        });
-        this.downloadLoading = false;
-      });
-    },
-    formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => {
-        if (j === 'timestamp') {
-          return parseTime(v[j]);
-        } else {
-          return v[j];
-        }
-      }));
-    }
-  }
-});
-</script>

src/views/excel/select-excel.vue

@@ -1,113 +1,396 @@
 <template>
-  <div class="app-container">
+    <div style=" width:100%">
-    <div style="margin-bottom:20px">
+        <el-card style="max-width: 100vw;margin: 1.5vw;">
-      <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:350px;" :prefix-icon="IconDocument" />
+<!--            <template #header><span>我的审批</span></template>-->
-      <el-button :loading="downloadLoading" type="primary" :icon="IconDocument" @click="handleDownload">
+            <template #header><strong >我的审批</strong></template>
-        Export Selected Items
+            <div style="display:flex;flex-direction:row;justify-content: space-around ">
-      </el-button>
+                <div>
-      <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
+                    名称
-        <el-tag type="info" size="large">Documentation</el-tag>
+                    <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
-      </a>
+                </div>
+                <div>
+                    状态
+                    <el-autocomplete
+                        v-model="state"
+                        :fetch-suggestions="querySearch"
+                        popper-class="my-autocomplete"
+                        placeholder="Please input"
+                        @select="handleSelect"
+                        style="margin-left:0.5vw"
+                    >
+                        <template #suffix>
+                            <el-icon class="el-input__icon" @click="handleIconClick">
+                                <ArrowDownBold />
+                            </el-icon>
+                        </template>
+                        <template #default="{ item }">
+                            <div class="value">{{ item.value }}</div>
+                            <span class="link">{{ item.link }}</span>
+                        </template>
+                    </el-autocomplete>
+                </div>
+                <div>
+                    <el-button type="primary" style="width:80px">查询</el-button>
+                    <el-button style="width:80px">重置</el-button>
+                </div>
+            </div>
+        </el-card>
+        <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
+            <div style="display:flex;flex-direction: row;justify-content: space-between">
+                <el-button text >历史记录</el-button>
+            </div>
+<!--            <el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"-->
+<!--                      @selection-change="handleSelectionChange">-->
+<!--                <el-table-column fixed type="selection" width="55" />-->
+<!--                <el-table-column  fixed label="序号" width="120">-->
+<!--                    <template #default="scope">{{ scope.row.date }}</template>-->
+<!--                </el-table-column>-->
+<!--                <el-table-column property="name" label="申请名称" width="120" />-->
+<!--                <el-table-column property="address" label="所属项目" show-overflow-tooltip />-->
+<!--                <el-table-column property="address" label="所属子系统" />-->
+<!--                <el-table-column property="address" label="申请者" >-->
+<!--                    <el-tag type="primary" property="address">Tag 1</el-tag>-->
+<!--                </el-table-column>-->
+<!--                <el-table-column property="address" label="类型" />-->
+<!--                <el-table-column property="address" label="状态" >-->
+<!--                    <el-tag type="success" property="address">已通过</el-tag>-->
+<!--                    <el-tag type="warning" property="address">待审核</el-tag>-->
+<!--                    <el-tag type="danger" property="address">已拒绝</el-tag>-->
+
+
+
+<!--                </el-table-column>-->
+<!--                <el-table-column property="address" label="申请理由" />-->
+<!--                <el-table-column property="address" label="申请时间" />-->
+<!--                <el-table-column fixed="right" property="address" label="操作" >-->
+<!--                    <el-button size="small" text style="color:deepskyblue" @click="EditDialogVisible = true">审核通过</el-button>-->
+<!--                    <el-divider direction="vertical" />-->
+<!--                    <el-button size="small" text style="color:red" @click="EditDialogVisible = true">拒绝申请</el-button>-->
+
+<!--                    <el-dialog v-model="EditDialogVisible"  width="500" center :modal="false" :show-close="false">-->
+<!--                        <template #header>-->
+<!--                            <div style="display:flex;flex-direction: row;justify-content: flex-start;color:#409eff;font-size:large" >编辑日报</div>-->
+<!--                            <el-divider content-position="left" style="background:red"><el-icon><CaretTop /></el-icon></el-divider>-->
+<!--                        </template>-->
+
+<!--                        <div>-->
+<!--                            &lt;!&ndash;                        <div style="margin-top:-4vh ">&ndash;&gt;-->
+<!--                            &lt;!&ndash;                            <span style="color:red">项目名称：</span>&ndash;&gt;-->
+<!--                            &lt;!&ndash;                            <el-input&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                    v-model="input"&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                    style="width: 200px"&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                    placeholder="请输入"&ndash;&gt;-->
+<!--                            &lt;!&ndash;                            />&ndash;&gt;-->
+<!--                            &lt;!&ndash;                        </div>&ndash;&gt;-->
+<!--                            <div style="margin-top:-4vh ">-->
+<!--                                <span style="color:red"> 工作时间：</span>-->
+<!--                                <el-date-picker-->
+<!--                                        v-model="value1"-->
+<!--                                        type="date"-->
+<!--                                        placeholder="请选择日期"-->
+<!--                                        style="width: 200px"-->
+<!--                                        :default-value="new Date(2010, 9, 1)"-->
+<!--                                />-->
+<!--                            </div>-->
+<!--                            <div style="margin-top:2vh ;display:flex;flex-direction:row;">-->
+<!--                                <span style="color: red">日报内容：</span>-->
+<!--                                <el-input-->
+<!--                                        v-model="textarea"-->
+<!--                                        style="width: 300px;"-->
+<!--                                        :rows="4"-->
+<!--                                        type="textarea"-->
+<!--                                        placeholder="请输入"-->
+<!--                                />-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                        <template #footer>-->
+<!--                            <div class="dialog-footer">-->
+<!--                                <el-button @click="EditDialogVisible = false">取消</el-button>-->
+<!--                                <el-button type="primary" @click="EditDialogVisible = false">-->
+<!--                                    确认-->
+<!--                                </el-button>-->
+<!--                            </div>-->
+<!--                        </template>-->
+<!--                    </el-dialog>-->
+
+
+<!--                </el-table-column>-->
+<!--            </el-table>-->
+            <el-table :data="tableData" style="width: 100%">
+                <el-table-column fixed prop="date" label="序号" width="150" />
+                <el-table-column prop="name" label="申请名称" width="120" />
+                <el-table-column prop="state" label="所属项目" width="120" />
+                <el-table-column prop="city" label="所属子系统" width="120" />
+                <el-table-column prop="address" label="申请者" width="180" >
+                    <el-tag type="primary" property="address">Tag 1</el-tag>
+                </el-table-column>
+                <el-table-column prop="zip" label="类型" width="120" />
+                <el-table-column prop="zip" label="状态" width="120" >
+<!--                    <el-tag type="success" property="address">已通过</el-tag>&ndash;&gt;-->
+                                        <el-tag type="warning" property="address">待审核</el-tag>
+                    <!--                    <el-tag type="danger" property="address">已拒绝</el-tag>-->
+                </el-table-column>
+                <el-table-column prop="zip" label="申请理由" width="400" />
+                <el-table-column prop="zip" label="申请时间" width="120" />
+                                <el-table-column fixed="right" property="address" label="操作" width="200">
+<!--                                    <el-button size="small" text style="color:deepskyblue" @click="EditDialogVisible = true">审核通过</el-button>-->
+                                    <el-popconfirm
+                                            confirm-button-text="通过"
+                                            cancel-button-text="关闭"
+                                            :icon="InfoFilled"
+                                            icon-color="#626AEF"
+                                            title="确定要通过审核吗？"
+                                            @confirm="confirmEvent"
+                                            @cancel="cancelEvent"
+                                    >
+                                        <template #reference>
+                                            <el-button size="small" text style="color:deepskyblue">审核通过</el-button>
+                                        </template>
+                                    </el-popconfirm>
+                                    <el-divider direction="vertical" />
+<!--                                    <el-button size="small" text style="color:red" @click="EditDialogVisible = true">拒绝申请</el-button>-->
+                                    <el-popconfirm
+                                            confirm-button-text="拒绝"
+                                            cancel-button-text="关闭"
+                                            :icon="InfoFilled"
+                                            icon-color="red"
+                                            title="确认要拒绝通过吗?确定后不能改变"
+                                            @confirm="confirmEvent"
+                                            @cancel="cancelEvent"
+                                    >
+                                        <template #reference>
+                                            <el-button size="small" text style="color:red">拒绝申请</el-button>
+                                        </template>
+                                    </el-popconfirm>
+                                </el-table-column>
+            </el-table>
+            <el-pagination
+                    larger
+                    background
+                    layout="prev, pager, next"
+                    :total="50" class="mt-4"
+                    style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
+            />
+        </el-card>
+
     </div>
-    <el-table
-      ref="multipleTable"
-      v-loading="listLoading"
-      :data="list"
-      element-loading-text="拼命加载中"
-      border
-      fit
-      highlight-current-row
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" align="center" />
-      <el-table-column align="center" label="Id" width="95">
-        <template v-slot="scope">
-          {{ scope.$index }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Title">
-        <template v-slot="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
-        <template v-slot="scope">
-          <el-tag>{{ scope.row.author }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="Readings" width="115" align="center">
-        <template v-slot="scope">
-          {{ scope.row.pageviews }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="PDate" width="220">
-        <template v-slot="scope">
-          <el-icon><IconTimer /></el-icon>
-          <span>{{ scope.row.display_time }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
 </template>
 
-<script>
+<script lang="ts" setup>
-import { defineComponent, markRaw } from 'vue';
+import { ref } from 'vue';
-import { fetchList } from '@/api/article';
+import { ElTable } from 'element-plus';
-import { Document as IconDocument, Timer as IconTimer } from '@element-plus/icons-vue';
+import { ArrowDownBold, InfoFilled } from '@element-plus/icons-vue';
 
-export default defineComponent({
+const confirmEvent = () => {
-  name: 'SelectExcel',
+    console.log('confirm!')
-  components: { IconTimer },
+}
-  data() {
+const cancelEvent = () => {
-    return {
+    console.log('cancel!')
-      IconDocument: markRaw(IconDocument),
+}
-      list: null,
+const value1 = ref('');
-      listLoading: true,
+// 修改对话框
-      multipleSelection: [],
+const EditDialogVisible = ref(false);
-      downloadLoading: false,
+// 新建对话框
-      filename: ''
+const AddDialogVisible = ref(false);
+interface User {
+    date: string
+    name: string
+    address: string
+}
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+const multipleSelection = ref<User[]>([]);
+
+const handleSelectionChange = (val: User[]) => {
+    multipleSelection.value = val;
+};
+
+// const tableData: User[] = [
+//     {
+//         date: '2016-05-03',
+//         name: 'Tom',
+//         address: 'No. 189, Grove St, Los Angeles'
+//     },
+//     {
+//         date: '2016-05-02',
+//         name: 'Tom',
+//         address: 'No. 189, Grove St, Los Angeles'
+//     },
+//     {
+//         date: '2016-05-04',
+//         name: 'Tom',
+//         address: 'No. 189, Grove St, Los Angeles'
+//     },
+//     {
+//         date: '2016-05-01',
+//         name: 'Tom',
+//         address: 'No. 189, Grove St, Los Angeles'
+//     }
+//
+// ];
+
+// 输入框1
+import { onMounted } from 'vue';
+
+
+interface LinkItem {
+    value: string
+    link: string
+}
+
+const state = ref('');
+const links = ref<LinkItem[]>([]);
+
+const querySearch = (queryString: string, cb) => {
+    const results = queryString
+        ? links.value.filter(createFilter(queryString))
+        : links.value;
+    // call callback function to return suggestion objects
+    cb(results);
+};
+const createFilter = (queryString) => {
+    return (restaurant) => {
+        return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+        );
     };
-  },
+};
-  created() {
+const loadAll = () => {
-    this.fetchData();
+    return [
-  },
+        { value: '1' },
-  methods: {
+        { value: '2' },
-    fetchData() {
+        { value: '3' },
-      this.listLoading = true;
+        { value: '4' },
-      fetchList(this.listQuery).then(response => {
+        { value: '5' }
-        this.list = response.data.items;
+
-        this.listLoading = false;
+    ];
-      });
+};
-    },
+const handleSelect = (item: LinkItem) => {
-    handleSelectionChange(val) {
+    console.log(item);
-      this.multipleSelection = val;
+};
-    },
+
-    handleDownload() {
+const handleIconClick = (ev: Event) => {
-      if (this.multipleSelection.length) {
+    console.log(ev);
-        this.downloadLoading = true;
+};
-        import('@/vendor/Export2Excel').then(excel => {
+
-          const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date'];
+onMounted(() => {
-          const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'];
+    links.value = loadAll();
-          const list = this.multipleSelection;
-          const data = this.formatJson(filterVal, list);
-          excel.export_json_to_excel({
-            header: tHeader,
-            data,
-            filename: this.filename
-          });
-          this.$refs.multipleTable.clearSelection();
-          this.downloadLoading = false;
-        });
-      } else {
-        ElMessage({
-          message: 'Please select at least one item',
-          type: 'warning'
-        });
-      }
-    },
-    formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => v[j]));
-    }
-  }
 });
+
+// 时间选择器
+
+const value2 = ref('');
+
+const shortcuts = [
+    {
+        text: 'Last week',
+        value: () => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            return [start, end];
+        }
+    },
+    {
+        text: 'Last month',
+        value: () => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            return [start, end];
+        }
+    },
+    {
+        text: 'Last 3 months',
+        value: () => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            return [start, end];
+        }
+    }
+];
+
+const handleClick = () => {
+    console.log('click')
+}
+
+const tableData = [
+    {
+        date: '2016-05-03',
+        name: 'Tom',
+        state: 'California',
+        city: 'Los Angeles',
+        address: 'No. 189, Grove St',
+        zip: 'CA 90036',
+        tag: 'Home',
+    },
+    {
+        date: '2016-05-02',
+        name: 'Tom',
+        state: 'California',
+        city: 'Los Angeles',
+        address: 'No. 189, Grove St',
+        zip: 'CA 90036',
+        tag: 'Office',
+    },
+    {
+        date: '2016-05-04',
+        name: 'Tom',
+        state: 'California',
+        city: 'Los Angeles',
+        address: 'No. 189, Grove St',
+        zip: 'CA 90036',
+        tag: 'Home',
+    },
+    {
+        date: '2016-05-01',
+        name: 'Tom',
+        state: 'California',
+        city: 'Los Angeles',
+        address: 'No. 189, Grove St',
+        zip: 'CA 90036',
+        tag: 'Office',
+    },
+    ,
+    {
+        date: '2016-05-01',
+        name: 'Tom',
+        state: 'California',
+        city: 'Los Angeles',
+        address: 'No. 189, Grove St',
+        zip: 'CA 90036',
+        tag: 'Office',
+    },
+    {
+        date: '2016-05-01',
+        name: 'Tom',
+        state: 'California',
+        city: 'Los Angeles',
+        address: 'No. 189, Grove St',
+        zip: 'CA 90036',
+        tag: 'Office',
+    },
+]
 </script>
+
+<style>
+.my-autocomplete li {
+    line-height: normal;
+    padding: 7px;
+}
+
+.my-autocomplete li .name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.my-autocomplete li .addr {
+    font-size: 12px;
+    color: #b4b4b4;
+}
+
+.my-autocomplete li .highlighted .addr {
+    color: #ddd;
+}
+</style>

src/views/excel/upload-excel.vue

@@ -1,43 +1,267 @@
 <template>
-  <div class="app-container">
+    <div style=" width:100%">
-    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
+        <el-card style="max-width: 100vw;margin: 1.5vw;">
-    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
+            <!--            <template #header><span>我的审批</span></template>-->
-      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
+            <template #header><strong >记录查询</strong></template>
-    </el-table>
+            <div style="display:flex;flex-direction:row;justify-content: space-around ">
-  </div>
+                <div>
+                    名称
+                    <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+                </div>
+                <div>
+                    状态
+                    <el-autocomplete
+                            v-model="state"
+                            :fetch-suggestions="querySearch"
+                            popper-class="my-autocomplete"
+                            placeholder="Please input"
+                            @select="handleSelect"
+                            style="margin-left:0.5vw"
+                    >
+                        <template #suffix>
+                            <el-icon class="el-input__icon" @click="handleIconClick">
+                                <ArrowDownBold />
+                            </el-icon>
+                        </template>
+                        <template #default="{ item }">
+                            <div class="value">{{ item.value }}</div>
+                            <span class="link">{{ item.link }}</span>
+                        </template>
+                    </el-autocomplete>
+                </div>
+                <div>
+                    <el-button type="primary" style="width:80px">查询</el-button>
+                    <el-button style="width:80px">重置</el-button>
+                </div>
+            </div>
+        </el-card>
+        <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
+            <div style="display:flex;flex-direction: row;justify-content: space-between">
+                <el-button text >历史记录</el-button>
+            </div>
+            <el-table :data="tableData" style="width: 100%">
+                <el-table-column fixed prop="date" label="序号" width="150" />
+                <el-table-column prop="name" label="申请名称" width="120" />
+                <el-table-column prop="state" label="所属项目" width="120" />
+                <el-table-column prop="city" label="所属子系统" width="120" />
+
+                <el-table-column prop="zip" label="类型" width="120" />
+                <el-table-column prop="zip" label="状态" width="120" >
+                    <!--                    <el-tag type="success" property="address">已通过</el-tag>&ndash;&gt;-->
+                    <el-tag type="warning" property="address">待审核</el-tag>
+                    <!--                    <el-tag type="danger" property="address">已拒绝</el-tag>-->
+                </el-table-column>
+                <el-table-column prop="address" label="申请者" width="180" >
+                    <el-tag type="primary" property="address">Tag 1</el-tag>
+                </el-table-column>
+                <el-table-column prop="zip" label="申请时间" width="120" />
+                <el-table-column prop="zip" label="申请理由" width="400" />
+
+            </el-table>
+            <el-pagination
+                    larger
+                    background
+                    layout="prev, pager, next"
+                    :total="50" class="mt-4"
+                    style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
+            />
+        </el-card>
+
+    </div>
 </template>
 
-<script>
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { ref } from 'vue';
-import UploadExcelComponent from '@/components/UploadExcel/index.vue';
+import { ElTable } from 'element-plus';
+import { ArrowDownBold, InfoFilled } from '@element-plus/icons-vue';
 
-export default defineComponent({
+const confirmEvent = () => {
-  name: 'UploadExcel',
+    console.log('confirm!')
-  components: { UploadExcelComponent },
+}
-  data() {
+const cancelEvent = () => {
-    return {
+    console.log('cancel!')
-      tableData: [],
+}
-      tableHeader: []
+const value1 = ref('');
+// 修改对话框
+const EditDialogVisible = ref(false);
+// 新建对话框
+const AddDialogVisible = ref(false);
+interface User {
+    date: string
+    name: string
+    address: string
+}
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+const multipleSelection = ref<User[]>([]);
+
+const handleSelectionChange = (val: User[]) => {
+    multipleSelection.value = val;
+};
+
+
+// 输入框1
+import { onMounted } from 'vue';
+
+
+interface LinkItem {
+    value: string
+    link: string
+}
+
+const state = ref('');
+const links = ref<LinkItem[]>([]);
+
+const querySearch = (queryString: string, cb) => {
+    const results = queryString
+        ? links.value.filter(createFilter(queryString))
+        : links.value;
+    // call callback function to return suggestion objects
+    cb(results);
+};
+const createFilter = (queryString) => {
+    return (restaurant) => {
+        return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+        );
     };
-  },
+};
-  methods: {
+const loadAll = () => {
-    beforeUpload(file) {
+    return [
-      const isLt1M = file.size / 1024 / 1024 < 1;
+        { value: '1' },
+        { value: '2' },
+        { value: '3' },
+        { value: '4' },
+        { value: '5' }
 
-      if (isLt1M) {
+    ];
-        return true;
+};
-      }
+const handleSelect = (item: LinkItem) => {
+    console.log(item);
+};
 
-      ElMessage({
+const handleIconClick = (ev: Event) => {
-        message: 'Please do not upload files larger than 1m in size.',
+    console.log(ev);
-        type: 'warning'
+};
-      });
+
-      return false;
+onMounted(() => {
-    },
+    links.value = loadAll();
-    handleSuccess({ results, header }) {
-      this.tableData = results;
-      this.tableHeader = header;
-    }
-  }
 });
+
+// 时间选择器
+
+const value2 = ref('');
+
+const shortcuts = [
+    {
+        text: 'Last week',
+        value: () => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            return [start, end];
+        }
+    },
+    {
+        text: 'Last month',
+        value: () => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            return [start, end];
+        }
+    },
+    {
+        text: 'Last 3 months',
+        value: () => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            return [start, end];
+        }
+    }
+];
+
+const handleClick = () => {
+    console.log('click')
+}
+
+const tableData = [
+    {
+        date: '2016-05-03',
+        name: 'Tom',
+        state: 'California',
+        city: 'Los Angeles',
+        address: 'No. 189, Grove St',
+        zip: 'CA 90036',
+        tag: 'Home',
+    },
+    {
+        date: '2016-05-02',
+        name: 'Tom',
+        state: 'California',
+        city: 'Los Angeles',
+        address: 'No. 189, Grove St',
+        zip: 'CA 90036',
+        tag: 'Office',
+    },
+    {
+        date: '2016-05-04',
+        name: 'Tom',
+        state: 'California',
+        city: 'Los Angeles',
+        address: 'No. 189, Grove St',
+        zip: 'CA 90036',
+        tag: 'Home',
+    },
+    {
+        date: '2016-05-01',
+        name: 'Tom',
+        state: 'California',
+        city: 'Los Angeles',
+        address: 'No. 189, Grove St',
+        zip: 'CA 90036',
+        tag: 'Office',
+    },
+    ,
+    {
+        date: '2016-05-01',
+        name: 'Tom',
+        state: 'California',
+        city: 'Los Angeles',
+        address: 'No. 189, Grove St',
+        zip: 'CA 90036',
+        tag: 'Office',
+    },
+    {
+        date: '2016-05-01',
+        name: 'Tom',
+        state: 'California',
+        city: 'Los Angeles',
+        address: 'No. 189, Grove St',
+        zip: 'CA 90036',
+        tag: 'Office',
+    },
+]
 </script>
+
+<style>
+.my-autocomplete li {
+    line-height: normal;
+    padding: 7px;
+}
+
+.my-autocomplete li .name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.my-autocomplete li .addr {
+    font-size: 12px;
+    color: #b4b4b4;
+}
+
+.my-autocomplete li .highlighted .addr {
+    color: #ddd;
+}
+</style>

src/views/login/index.vue

@@ -113,8 +113,8 @@ export default defineComponent({
     };
     return {
       loginForm: {
-        username: 'teacher_user',
+        username: 'principal_user',
-        password: '123456'
+        password: 'jsl_nbxt'
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],