详情路由编写，界面UI调整

2 years ago · cc7b9c7cae
6 changed files with 87 additions and 49 deletions
--- a/package.json
+++ b/package.json
@ -10,9 +10,11 @@
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
+    "axios": "^1.6.5",
    "element-plus": "^2.5.1",
    "pinia": "^2.1.7",
    "vue": "^3.3.11",
+    "vue-json-excel": "^0.3.0",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
--- a/src/components/MailDetail.vue
+++ b/src/components/MailDetail.vue
@ -0,0 +1,22 @@
+<template>
+    <div>
+        <h1>{{ mailID }}</h1>
+    </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import router from '../router';
+import axios from 'axios';
+const mailID = router.currentRoute.value.params.id;
+
+onMounted(() => {
+    console.log(mailID);
+    axios.post('/api/mailbox/detail', { id: mailID }).then(res => {
+        console.log(res.data);
+    }).catch(err => {
+        console.log(err);
+    });
+});
+
+</script>
--- a/src/components/ManageMail.vue
+++ b/src/components/ManageMail.vue
@ -2,52 +2,55 @@
    <el-form :model="form" label-width="100px" :inline="true">
        <el-form-item label="来信时间">
            <el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期"
-                end-placeholder="结束日期"></el-date-picker>
+                end-placeholder="结束日期" value-format="YYYY-MM-DD"></el-date-picker>
        </el-form-item>
        <el-form-item label="群众姓名">
-            <el-input v-model="form.name"></el-input>
+            <el-input v-model="form.contactName"></el-input>
        </el-form-item>
        <el-form-item label="群众手机号">
-            <el-input v-model="form.phone"></el-input>
+            <el-input v-model="form.contactPhone"></el-input>
        </el-form-item>
        <el-form-item label="群众身份证号">
-            <el-input v-model="form.id_card"></el-input>
+            <el-input v-model="form.contactIdCard"></el-input>
        </el-form-item>
        <el-form-item label="案件编号">
-            <el-input v-model="form.mail_id"></el-input>
+            <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="信件内容">
-            <el-input v-model="form.mail_context"></el-input>
+            <el-input v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="评价结果">
-            <el-input v-model="form.mail_appraise"></el-input>
+            <el-input v-model="form.evaluate"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
        <el-form-item>
-            <el-button type="primary" @click="reset">重置</el-button>
+            <el-button type="default" @click="reset">重置</el-button>
        </el-form-item>
    </el-form>

    <el-button type="primary" @click="out">导出信件</el-button>
-    <el-table :data="tableData" border height="500">
+    <el-table :data="tableData" border height="680px" table-layout="fixed"
+        :header-cell-style="{ 'background-color': '#EBEEFC', 'color': '#1D2C86' }">
        <el-table-column fixed="left" prop="id" label="案件编号" width="flexColumnWidth(label,prop)">
        </el-table-column>
-        <el-table-column prop="date" label="日期" width="flexColumnWidth(label,prop)">
+        <el-table-column prop="createTime" label="来信日期" width="flexColumnWidth(label,prop)">
        </el-table-column>
-        <el-table-column prop="source" label="信件来源" width="flexColumnWidth(label,prop)">
+        <el-table-column prop="contactName" label="联系人姓名" width="flexColumnWidth(label,prop)">
        </el-table-column>
-        <el-table-column prop="status" label="信件状态" width="flexColumnWidth(label,prop)">
+        <el-table-column prop="contactIdCard" label="联系人身份证号码" width="flexColumnWidth(label,prop)">
        </el-table-column>
-        <el-table-column prop="category" label="信件分类" width="flexColumnWidth(label,prop)">
+        <el-table-column prop="contactPhone" label="联系人手机号码" width="flexColumnWidth(label,prop)">
        </el-table-column>
-        <el-table-column prop="unit" label="信件内容" width="flexColumnWidth(label,prop)">
+        <el-table-column prop="content" label="信件内容" width="flexColumnWidth(label,prop)">
        </el-table-column>
-        <el-table-column prop="title" label="评价结果" width="flexColumnWidth(label,prop)">
+        <el-table-column prop="evaluate" label="评价结果" width="flexColumnWidth(label,prop)">
        </el-table-column>
        <el-table-column fixed="right" label="详情" width="100">
-            <el-button @click="handleEdit(index)">详情</el-button>
+            <template v-slot="scope">
+                <el-button @click="handleDetail(scope.$index + 1)">详情</el-button>
+            </template>
        </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="currentPage"
@ -58,42 +61,36 @@

 <script setup>
 import { ref } from 'vue'
-
+import axios from 'axios'
+import { onMounted } from 'vue';
+import router from '../router';

 const form = ref({
    date: '',
-    name: '',
-    phone: '',
-    id_card: '',
-    mail_id: '',
-    mail_context: '',
-    mail_appraise: ''
+    contactName: '',
+    contactPhone: '',
+    contactIdCard: '',
+    id: '',
+    content: '',
+    evaluate: ''
+})
+
+// 定义可变的tableData变量，并用axios请求数据
+const tableData = ref([])
+
+
+onMounted(() => {
+    axios.get('api/mailbox/list')
+        .then(function (response) {
+            console.log(response);
+            tableData.value = response.data;
+            totalSize.value = response.data.length;
+        })
+        .catch(function (error) { console.log(error) })
 })

 const currentPage = ref(1)
-const totalSize = ref(100)
-const tableData = ref([
-    {
-        id: 1,
-        date: '2022-01-01',
-        source: '信访部门',
-        status: '已办结',
-        level: '一级',
-        category: '群众来信',
-        unit: '信访室',
-        title: '关于信访事项的投诉举报'
-    },
-    {
-        id: 2,
-        date: '2022-01-02',
-        source: '信访部门',
-        status: '已办结',
-        level: '一级',
-        category: '群众来信',
-        unit: '信访室',
-        title: '关于信访事项的投诉举报'
-    },]
-)
+const totalSize = ref(2)


 const flexColumnWidth = (label, prop) => {
@ -101,8 +98,14 @@ const flexColumnWidth = (label, prop) => {
    return `${width}px`
 }

-const handleEdit = (index) => {
+const handleDetail = (index) => {
    console.log(index)
+    console.log(tableData.value[index - 1].id)
+    router.push('/mailbox/detail/' + tableData.value[index - 1].id)
+}
+
+const handleSizeChange = (size) => {
+    console.log(size)
 }

 const handlePageChange = (currentPage) => {
@ -110,7 +113,13 @@ const handlePageChange = (currentPage) => {
 }

 const search = () => {
-    console.log(form.value)
+    const data = JSON.stringify(form.value)
+    console.log(data)
+    axios.post('api/mailbox/list-submit', data)
+        .then(function (response) {
+            console.log(response);
+        })
+        .catch(function (error) { console.log(error) })
 }

 const reset = () => {
--- a/src/main.js
+++ b/src/main.js
@ -8,6 +8,7 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

 import './assets/style/style.scss'

+
 createApp(App)
    .use(router)
    .use(ElementPlus, { locale: zhCn })
--- a/src/router/index.js
+++ b/src/router/index.js
@ -21,6 +21,10 @@ const constantRoutes = [
            {
                path: '/mailbox',
                component: () => import('@/components/ManageMail.vue'),
+            },
+            {
+                path: '/mailbox/detail/:id',
+                component: () => import('@/components/MailDetail.vue')
            }
        ]
    },
--- a/vite.config.js
+++ b/vite.config.js
@ -45,7 +45,7 @@ export default defineConfig({
    host: '0.0.0.0',
    proxy: {
      '/api': {
-        target: 'http://127.0.0.1:8081',
+        target: 'http://127.0.0.1:8083',
        changeOrigin: true,
        rewrite: (p) => p.replace(/^\/api/, '')
      }