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

2024-04-18 16:05:01 +08:00 · 2024-04-18 16:05:01 +08:00 · 4a785953a5
commit 4a785953a5
parent 0f8c188be6
14 changed files with 1067 additions and 552 deletions
--- a/auto-imports.d.ts
+++ b/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']
 }
--- a/components.d.ts
+++ b/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']
+  }
 }
--- a/src/api/examine.js
+++ b/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()
+        }
+    });
+}
--- a/src/api/message.js
+++ b/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',
-        data,
+        method: 'get',
+        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()
+        }
+    })
+}
--- a/src/layout/components/Navbar.vue
+++ b/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}`);
    }
  }
--- a/src/router/index.ts
+++ b/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',
-  //   component: Layout,
-  //   redirect: '/excel/export-excel',
-  //   name: 'Excel',
-  //   meta: {
-  //     title: 'Excel',
-  //     icon: 'excel'
-  //   },
-  //   children: [
-  //     {
-  //       path: 'export-excel',
-  //       component: () => import('@/views/excel/export-excel.vue'),
-  //       name: 'ExportExcel',
-  //       meta: { title: 'Export Excel' }
-  //     },
-  //     {
-  //       path: 'export-selected-excel',
-  //       component: () => import('@/views/excel/select-excel.vue'),
-  //       name: 'SelectExcel',
-  //       meta: { title: 'Export Selected' }
-  //     },
-  //     {
-  //       path: 'export-merge-header',
-  //       component: () => import('@/views/excel/merge-header.vue'),
-  //       name: 'MergeHeader',
-  //       meta: { title: 'Merge Header' }
-  //     },
-  //     {
-  //       path: 'upload-excel',
-  //       component: () => import('@/views/excel/upload-excel.vue'),
-  //       name: 'UploadExcel',
-  //       meta: { title: 'Upload Excel' }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/excel',
+    component: Layout,
+    redirect: '/excel/export-excel',
+    name: 'Excel',
+    meta: {
+      title: '申请和审批',
+      icon: 'excel'
+    },
+    children: [
+      {
+        path: 'export-excel',
+        component: () => import('@/views/excel/export-excel.vue'),
+        name: 'ExportExcel',
+        meta: { title: '提交申请' }
+      },
+      {
+        path: 'export-selected-excel',
+        component: () => import('@/views/excel/select-excel.vue'),
+        name: 'SelectExcel',
+        meta: { title: '我的审批' }
+      },
+      {
+        path: 'export-update-excel',
+        component: () => import('@/views/excel/upload-excel.vue'),
+        name: 'MergeHeader',
+        meta: { title: '记录查询' }
+      }
+    ]
+  },

  // {
  //   path: '/zip',
--- a/src/store/modules/user.ts
+++ b/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");
--- a/src/utils/request.js
+++ b/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("返回登录成功")
--- a/src/views/error-log/index.vue
+++ b/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>
-                    时间
-                    <el-date-picker
-                        v-model="value2"
-                        type="daterange"
-                        unlink-panels
-                        range-separator="——"
-                        start-placeholder="开始时间"
-                        end-placeholder="结束时间"
-                        :shortcuts="shortcuts"
-                        :size="large"
-                        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 class="block">
+                        <span class="demonstration" style="margin-right: 8px">时间</span>
+                        <el-date-picker
+                                v-model="value2"
+                                type="datetimerange"
+                                :shortcuts="shortcuts"
+                                range-separator="To"
+                                start-placeholder="Start date"
+                                end-placeholder="End date"
+                        />
+                    </div>

                <div>
-                  <el-button type="primary" style="width:80px">查询</el-button>
-                    <el-button style="width:80px">重置</el-button>
+                  <el-button type="primary" style="width:80px" @click="selectMessage">查询</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 class="table-cell">
-                    <div class="date" style="display:flex;flex-direction: column">
-                        <span style="color:skyblue">{{row.name}}</span>
+            <div style="height: 43vh">
+                <div v-for="(row, index) in messageData.data" :key="index" class="table-row">
+                    <div class="table-author" style="text-align: left">
+                    <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"
-                background
-                layout="prev, pager, next"
-                :total="50"
-                style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
+                    @current-change="pagination"
+                    background layout="prev, pager, next"
+                    :total="messageData.total"
+                    v-model:page-size="requestData.pageSize"
+                    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',
-    value: () => {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-      return [start, end];
+    {
+        text: 'Last week',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setDate(start.getDate() - 7)
+            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])
    }
-  },
-  {
-    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];
-    }
-  }
-];
+})
+// watch(currentPage, async (newPage, oldPage) => {
+//     requestData.page = newPage
+//     flushData()
+// })
+const messageData = reactive({
+    data:[],
+    total: 0
+
+})
+
+
+onMounted(() => {
+  flushData()
+})

 // 状态选择器

-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[] = [
-  {
-      id:1 ,
-    createdAt: '2016-05-03',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-    {
-        id:1 ,
-        createdAt: '2016-05-03',
-        name: 'Tom',
-        text: 'No. 189, Grove St, Los Angeles'
-    },
-    {
-        id:1 ,
-        createdAt: '2016-05-03',
-        name: 'Tom',
-        text: 'No. 189, Grove St, Los Angeles'
-    },
-    {
-        id:1 ,
-        createdAt: '2016-05-03',
-        name: 'Tom',
-        text: 'No. 189, Grove St, Los Angeles'
-    },
+function  selectMessage (){
+    try {
+        flushData()
+        console.log(requestData)
+        ElMessage.success('查询成功')
+    }catch (e) {
+        ElMessage.success('查询失败')
+    }
+}
+function resetting(){
+    requestData.begin = ''
+    requestData.end = ''
+    value2.value = ''
+}
+//自定义方法：格式化时间
+function formatDateTime(dateTimeString: string): string {
+    const dateTime = new Date(dateTimeString);
+    const year = dateTime.getFullYear();
+    const month = String(dateTime.getMonth() + 1).padStart(2, '0');
+    const date = String(dateTime.getDate()).padStart(2, '0');
+    const hours = String(dateTime.getHours()).padStart(2, '0');
+    const minutes = String(dateTime.getMinutes()).padStart(2, '0');
+    const seconds = String(dateTime.getSeconds()).padStart(2, '0');

-];
+    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;
--- a/src/views/excel/export-excel.vue
+++ b/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;">
-      <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>
+  </el-card>
 </template>
+<script setup lang="ts">
+import {onMounted, reactive, ref} from "vue";

-<script>
-import { defineComponent, markRaw } from 'vue';
-import { fetchList } from '@/api/article';
-import { parseTime } from '@/utils';
-// options components
-import FilenameOption from './components/FilenameOption';
-import AutoWidthOption from './components/AutoWidthOption';
-import BookTypeOption from './components/BookTypeOption';
-import { Document as IconDocument, Timer as IconTimer } from '@element-plus/icons-vue';
+const textarea = ref('')
+const form = reactive({
+    region:'',
+    childSystem:''
+})
+interface RestaurantItem {
+    value: string
+    link: string
+}

-export default defineComponent({
-  name: 'ExportExcel',
-  components: { FilenameOption, AutoWidthOption, BookTypeOption, IconTimer },
-  data() {
-    return {
-      IconDocument: markRaw(IconDocument),
-      list: null,
-      listLoading: true,
-      downloadLoading: false,
-      filename: '',
-      autoWidth: true,
-      bookType: 'xlsx'
-    };
-  },
-  created() {
-    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 state2 = ref('')
+
+const restaurants = ref<RestaurantItem[]>([])
+const querySearch = (queryString: string, cb: any) => {
+    const results = queryString
+        ? restaurants.value.filter(createFilter(queryString))
+        : restaurants.value
+    // call callback function to return suggestions
+    cb(results)
+}
+const createFilter = (queryString: string) => {
+    return (restaurant: RestaurantItem) => {
+        return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+        )
    }
-  }
-});
+}
+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>
-.radio-label {
-  font-size: 14px;
-  color: #606266;
-  line-height: 40px;
-  padding: 0 12px 0 30px;
+<style scoped>
+.selectedHeader{
+    font-weight: bold;
+    margin-right: 2vw;
+}
+.selectedContent{
+    margin-left: 35vw;
+    margin-top:5vh
+}
+.selectedChild{
+    margin-left: 7.7vw;
 }
 </style>
--- a/src/views/excel/merge-header.vue
+++ b/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>
--- a/src/views/excel/select-excel.vue
+++ b/src/views/excel/select-excel.vue
@ -1,113 +1,396 @@
 <template>
-  <div class="app-container">
-    <div style="margin-bottom:20px">
-      <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:350px;" :prefix-icon="IconDocument" />
-      <el-button :loading="downloadLoading" type="primary" :icon="IconDocument" @click="handleDownload">
-        Export Selected Items
-      </el-button>
-      <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>
-      </a>
+    <div style=" width:100%">
+        <el-card style="max-width: 100vw;margin: 1.5vw;">
+<!--            <template #header><span>我的审批</span></template>-->
+            <template #header><strong >我的审批</strong></template>
+            <div style="display:flex;flex-direction:row;justify-content: space-around ">
+                <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 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>
-import { defineComponent, markRaw } from 'vue';
-import { fetchList } from '@/api/article';
-import { Document as IconDocument, Timer as IconTimer } from '@element-plus/icons-vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElTable } from 'element-plus';
+import { ArrowDownBold, InfoFilled } from '@element-plus/icons-vue';

-export default defineComponent({
-  name: 'SelectExcel',
-  components: { IconTimer },
-  data() {
-    return {
-      IconDocument: markRaw(IconDocument),
-      list: null,
-      listLoading: true,
-      multipleSelection: [],
-      downloadLoading: false,
-      filename: ''
+const confirmEvent = () => {
+    console.log('confirm!')
+}
+const cancelEvent = () => {
+    console.log('cancel!')
+}
+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;
+};
+
+// 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() {
-    this.fetchData();
-  },
-  methods: {
-    fetchData() {
-      this.listLoading = true;
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.items;
-        this.listLoading = false;
-      });
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-    handleDownload() {
-      if (this.multipleSelection.length) {
-        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.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 loadAll = () => {
+    return [
+        { value: '1' },
+        { value: '2' },
+        { value: '3' },
+        { value: '4' },
+        { value: '5' }
+
+    ];
+};
+const handleSelect = (item: LinkItem) => {
+    console.log(item);
+};
+
+const handleIconClick = (ev: Event) => {
+    console.log(ev);
+};
+
+onMounted(() => {
+    links.value = loadAll();
 });
+
+// 时间选择器
+
+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>
--- a/src/views/excel/upload-excel.vue
+++ b/src/views/excel/upload-excel.vue
@ -1,43 +1,267 @@
 <template>
-  <div class="app-container">
-    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
-    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
-      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
-    </el-table>
-  </div>
+    <div style=" width:100%">
+        <el-card style="max-width: 100vw;margin: 1.5vw;">
+            <!--            <template #header><span>我的审批</span></template>-->
+            <template #header><strong >记录查询</strong></template>
+            <div style="display:flex;flex-direction:row;justify-content: space-around ">
+                <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>
-import { defineComponent } from 'vue';
-import UploadExcelComponent from '@/components/UploadExcel/index.vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElTable } from 'element-plus';
+import { ArrowDownBold, InfoFilled } from '@element-plus/icons-vue';

-export default defineComponent({
-  name: 'UploadExcel',
-  components: { UploadExcelComponent },
-  data() {
-    return {
-      tableData: [],
-      tableHeader: []
+const confirmEvent = () => {
+    console.log('confirm!')
+}
+const cancelEvent = () => {
+    console.log('cancel!')
+}
+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: {
-    beforeUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
+};
+const loadAll = () => {
+    return [
+        { value: '1' },
+        { value: '2' },
+        { value: '3' },
+        { value: '4' },
+        { value: '5' }

-      if (isLt1M) {
-        return true;
-      }
+    ];
+};
+const handleSelect = (item: LinkItem) => {
+    console.log(item);
+};

-      ElMessage({
-        message: 'Please do not upload files larger than 1m in size.',
-        type: 'warning'
-      });
-      return false;
-    },
-    handleSuccess({ results, header }) {
-      this.tableData = results;
-      this.tableHeader = header;
-    }
-  }
+const handleIconClick = (ev: Event) => {
+    console.log(ev);
+};
+
+onMounted(() => {
+    links.value = loadAll();
 });
+
+// 时间选择器
+
+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>
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -113,8 +113,8 @@ export default defineComponent({
    };
    return {
      loginForm: {
-        username: 'teacher_user',
-        password: '123456'
+        username: 'principal_user',
+        password: 'jsl_nbxt'
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],