diff --git a/src/main.js b/src/main.js
index aeab4aa..70962fe 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,8 @@ import VxeUI from 'vxe-pc-ui'
 import 'vxe-pc-ui/lib/style.css'
 import VxeUITable from 'vxe-table'
 import 'vxe-table/lib/style.css'
+import domZIndex from 'dom-zindex'
+domZIndex.setCurrent(2000)
 
 Vue.use(VxeUI)
 Vue.use(VxeUITable)
diff --git a/src/settings.js b/src/settings.js
index e1d2f09..d827221 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -12,5 +12,6 @@ module.exports = {
    * @type {boolean} true | false
    * @description Whether show the logo in sidebar
    */
-  sidebarLogo: true
+  sidebarLogo: true,
+  uploadSize: 20 * 1024 * 1024,
 }
diff --git a/src/utils/index.js b/src/utils/index.js
index 32825fb..13a8ced 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -171,3 +171,15 @@ export function debounce(func, delay) {
   }
 }
 
+export function formatFileSize(size) {
+  if (size < 1024 * 1024) {
+    const temp = size / 1024;
+    return temp.toFixed(2) + "KB";
+  } else if (size < 1024 * 1024 * 1024) {
+    const temp = size / (1024 * 1024);
+    return temp.toFixed(2) + "MB";
+  } else {
+    const temp = size / (1024 * 1024 * 1024);
+    return temp.toFixed(2) + "GB";
+  }
+}
diff --git a/src/views/site/site.vue b/src/views/site/site.vue
index e47a4cb..af54fbb 100644
--- a/src/views/site/site.vue
+++ b/src/views/site/site.vue
@@ -1,161 +1,197 @@
 <template>
     <div>
-        <vxe-toolbar export print ref="toolbar">
-            <template #buttons>
-                <el-button
-                        icon="el-icon-plus"
-                        type="primary"
-                        size="small"
-                        @click="isShowAdd = true"
-                >新增</el-button
-                >
-                <el-button
-                        icon="el-icon-search"
-                        type="primary"
-                        plain
-                        size="small"
-                        @click="getList"
-                >搜索</el-button
-                >
+        <el-card shadow="never" style="margin-top: 20px;">
+            <template #header>
+                <slot name="header">
+                    <div>
+                        <Icon :icon="$route.meta.icon"></Icon>
+                        <span style="font-weight: 600;letter-spacing: 1px;padding-left: 10px;">{{ $route.meta.title }}</span>
+                    </div>
+                </slot>
             </template>
-        </vxe-toolbar>
-        <vxe-table
-                ref="table"
-                stripe
-                style="margin-top: 10px"
-                :loading="loading"
-                keep-source
-                show-overflow
-                :column-config="{ resizable: true }"
-                :edit-rules="validRules"
-                :edit-config="{
+
+            <vxe-toolbar export print custom ref="toolbar">
+                <template #buttons>
+                    <el-button
+                            v-if="isHasAuth('create')"
+                            icon="el-icon-plus"
+                            type="primary"
+                            size="small"
+                            @click="isShowAdd = true"
+                    >新增</el-button
+                    >
+                    <el-button
+                            v-if="isHasAuth('search')"
+                            icon="el-icon-search"
+                            type="primary"
+                            plain
+                            size="small"
+                            @click="getList"
+                    >搜索</el-button
+                    >
+                </template>
+            </vxe-toolbar>
+            <vxe-table
+                    ref="table"
+                    stripe
+                    style="margin-top: 10px"
+                    :loading="loading"
+                    :height="tableHeight"
+                    keep-source
+                    show-overflow
+                    :column-config="{ resizable: true }"
+                    :edit-rules="validRules"
+                    :export-config="{}"
+                    :edit-config="{
           trigger: 'manual',
           mode: 'row',
           showStatus: true,
           isHover: true,
           autoClear: false,
         }"
-                :align="allAlign"
-                :data="tableData"
-        >
-            <vxe-column type="seq" width="58" align="center" />
-
-
-
-
-                    <vxe-column
-                            field="name"
-                            width="160"
-                            title="名称"
-                            :edit-render="{ name: 'input', attrs: { type: 'text' } }"
-                    />
-
-
-
-
-                    <vxe-column
-                            field="status"
-                            width="140"
-                            title="状态"
-                            :edit-render="{ name: 'VxeSelect', options: [{ name: '是', value: 1 },{ name: '否', value: 0 }] }"
-                    />
-
-
-
-
-                    <vxe-column
-                            field="content"
-                            width="160"
-                            title="内容"
-                            :edit-render="{ name: 'input', attrs: { type: 'text' } }"
-                    />
-
-
-
-
-                    <vxe-column
-                            field="sort"
-                            width="160"
-                            title="排序"
-                            :edit-render="{ name: 'input', attrs: { type: 'number' } }"
-                    />
-
-            <vxe-column field="operate" title="操作" min-width="220">
-                <template #default="{ row }">
-                    <template v-if="isActiveStatus(row)">
-                        <el-button size="small" type="primary" @click="saveRowEvent(row)"
-                        >保存</el-button
-                        >
-                        <el-button
-                                size="small"
-                                type="primary"
-                                plain
-                                @click="cancelRowEvent(row)"
-                        >取消</el-button
-                        >
-                    </template>
-                    <template v-else>
-                        <el-button size="small" type="warning" @click="editRowEvent(row)"
-                        >编辑</el-button
-                        >
-                        <el-button
-                                size="small"
-                                type="danger"
-                                @click="destroyRowEvent(row)"
-                        >删除</el-button
-                        >
+                    :align="allAlign"
+                    :data="tableData"
+            >
+                <vxe-column type="seq" width="58" align="center" />
+                
+                    
+                    
+                        
+                        <vxe-column
+                                field="name"
+                                width="160"
+                                title="名称"
+                                :edit-render="{ name: 'input', attrs: { type: 'text' } }"
+                        />
+                        
+                    
+                    
+                        
+                        <vxe-column
+                                field="status"
+                                width="140"
+                                title="状态"
+                                :edit-render="{ name: 'VxeSelect', options: [{ label: '是', value: 1 },{ label: '否', value: 0 }] }"
+                        />
+                        
+                    
+                    
+                        
+                        <vxe-column
+                                field="content"
+                                width="160"
+                                title="内容"
+                                :edit-render="{ name: 'input', attrs: { type: 'text' } }"
+                        />
+                        
+                    
+                    
+                        
+                        <vxe-column
+                                field="sort"
+                                width="160"
+                                title="排序"
+                                :edit-render="{ name: 'input', attrs: { type: 'number' } }"
+                        />
+                        
+                <vxe-column field="operate" title="操作" min-width="220">
+                    <template #default="{ row }">
+                        <template v-if="isActiveStatus(row)">
+                            <el-button size="small" type="primary" @click="saveRowEvent(row)"
+                            >保存</el-button
+                            >
+                            <el-button
+                                    size="small"
+                                    type="primary"
+                                    plain
+                                    @click="cancelRowEvent(row)"
+                            >取消</el-button
+                            >
+                        </template>
+                        <template v-else>
+                            <el-button v-if="isHasAuth('detail')" size="small" type="primary" plain @click="detail(row)"
+                            >查看</el-button
+                            >
+                            <el-button v-if="isHasAuth('edit')" size="small" type="warning" @click="editRowEvent(row)"
+                            >编辑</el-button
+                            >
+                            <el-button
+                                    v-if="isHasAuth('delete')"
+                                    size="small"
+                                    type="danger"
+                                    @click="destroyRowEvent(row)"
+                            >删除</el-button
+                            >
+                        </template>
                     </template>
-                </template>
-            </vxe-column>
-        </vxe-table>
-
-        <el-pagination
-                style="margin-top: 10px"
-                :current-page.sync="select.page"
-                :page-sizes="[20, 30, 40, 50]"
-                :page-size.sync="select.page_size"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total"
-                @size-change="
+                </vxe-column>
+            </vxe-table>
+
+            <el-pagination
+                    style="margin-top: 10px"
+                    :current-page.sync="select.page"
+                    :page-sizes="[20, 30, 40, 50]"
+                    :page-size.sync="select.page_size"
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="total"
+                    @size-change="
           (e) => {
             select.page_size = e;
             select.page = 1;
             getList();
           }
         "
-                @current-change="
+                    @current-change="
           (e) => {
             select.page = e;
             getList();
           }
         "
+            />
+        </el-card>
+
+        <AddSite
+                ref="AddSite"
+                
+                :is-show.sync="isShowAdd"
+                @refresh="getList"
+        />
+        <ShowSite
+                ref="ShowSite"
+        
+                :is-show.sync="isShowDetail"
         />
-<!--        <AddSite-->
-<!--                ref="AddSite"-->
-<!--                :rooms="rooms"-->
-<!--                :is-show.sync="isShowAdd"-->
-<!--                @refresh="getList"-->
-<!--        />-->
     </div>
 </template>
 
 <script>
-  import { deepCopy } from "@/utils";
+  import Icon from "@/layout/components/Sidebar/Item.vue"
+  import { authMixin } from "@/mixin/authMixin"
+  import { uploadSize } from "@/settings";
+  import { deepCopy, formatFileSize } from "@/utils";
   import { destroy, index, save } from "@/api/site/site";
-  // import AddMeeting from "./components/AddSite.vue";
+  import AddSite from "./components/AddSite.vue";
+  import ShowSite from "./components/ShowSite.vue";
   import axios from "axios";
   import { getToken } from "@/utils/auth";
-
+  
   export default {
+    name: "Site",
+    mixins: [authMixin],
     components: {
-      //AddMeeting
+      Icon,
+      AddSite,
+      ShowSite,
     },
     data() {
       return {
+        uploadSize,
         examineKey: 0,
         isShowAdd: false,
+        isShowDetail: false,
 
         loading: false,
+        tableHeight: 400,
         select: {
           page: 1,
           page_size: 20,
@@ -166,16 +202,19 @@
         tableData: [],
         validRules: {},
         form: {
-
-            name: "",
-
-            status: "",
-
-            content: "",
-
-            sort: 0,
-
+          id: '',
+          
+            name: '',
+          
+            status: 1,
+          
+            content: '',
+          
+            sort: '',
+          
         },
+
+        
       };
     },
     computed: {
@@ -186,22 +225,49 @@
           }
         };
       },
+      isHasAuth() {
+        return function (auth) {
+          return this.auths_auth_mixin.indexOf(auth) !== -1
+        }
+      }
     },
     created() {
+      
       this.getList();
     },
     mounted() {
       this.bindToolbar()
+      this.calcTableHeight()
     },
     methods: {
+      calcTableHeight() {
+        let clientHeight = document.documentElement.clientHeight;
+        let cardTitle = document.querySelector(".el-card__header")?.getBoundingClientRect()?.height;
+        let search = document.querySelector(".vxe-toolbar")?.getBoundingClientRect()?.height;
+        let paginationHeight = (document.querySelector(".el-pagination")?.getBoundingClientRect()?.height ?? 0) + 10; //分页的高度
+        let topHeight = 50; //页面 头部
+        let padding = 80;
+        let margin = 20;
+        this.tableHeight =
+          clientHeight - cardTitle - search - paginationHeight - topHeight - padding - margin;
+      },
+      async detail (row) {
+        await this.$refs["ShowSite"].getDetail(row.id)
+        this.isShowDetail = true
+      },
+
+      
+
       uploadMethod(file, row, fieldName) {
         const formData = new FormData()
         formData.append('file', file)
+        window.$_uploading = true
         return axios.post(process.env.VUE_APP_UPLOAD_API, formData, {
           headers: {
             Authorization: `Bearer ${getToken()}`,
           }
         }).then((response) => {
+          window.$_uploading = false
           if (response.status === 200 && !response.data.code) {
             if (!(this.form[fieldName] instanceof Array)) {
               this.form[fieldName] = []
@@ -214,6 +280,8 @@
           } else {
             this.$message.error("上传失败")
           }
+        }).catch(err => {
+          window.$_uploading = false
         })
       },
       bindToolbar() {
@@ -241,7 +309,7 @@
       async getList() {
         this.loading = true;
         try {
-          const res = await index(this.select);
+          const res = await index(this.select, false);
           this.tableData = res.data;
           this.total = res.total;
           this.loading = false;
@@ -252,6 +320,10 @@
       },
 
       async saveRowEvent(row) {
+        if (window.$_uploading) {
+          this.$message.warning("文件正在上传中")
+          return
+        }
         try {
           const errMap = await this.$refs["table"].validate();
           if (errMap) {
@@ -267,7 +339,6 @@
             form[key] = row[key];
           }
           this.loading = true;
-          // TODO: 如果有附件初始值赋值一下
           await save(form);
           await this.getList();
           this.loading = false;