init

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)

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,
 }

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";
+  }
+}

src/views/site/site.vue

@@ -1,8 +1,19 @@
 <template>
     <div>
-        <vxe-toolbar export print ref="toolbar">
+        <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 export print custom ref="toolbar">
                 <template #buttons>
                     <el-button
+                            v-if="isHasAuth('create')"
                             icon="el-icon-plus"
                             type="primary"
                             size="small"
@@ -10,6 +21,7 @@
                     >新增</el-button
                     >
                     <el-button
+                            v-if="isHasAuth('search')"
                             icon="el-icon-search"
                             type="primary"
                             plain
@@ -24,10 +36,12 @@
                     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',
@@ -57,7 +71,7 @@
                                 field="status"
                                 width="140"
                                 title="状态"
-                            :edit-render="{ name: 'VxeSelect', options: [{ name: '是', value: 1 },{ name: '否', value: 0 }] }"
+                                :edit-render="{ name: 'VxeSelect', options: [{ label: '是', value: 1 },{ label: '否', value: 0 }] }"
                         />
                         
                     
@@ -95,10 +109,14 @@
                             >
                         </template>
                         <template v-else>
-                        <el-button size="small" type="warning" @click="editRowEvent(row)"
+                            <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)"
@@ -130,32 +148,50 @@
           }
         "
             />
-<!--        <AddSite-->
-<!--                ref="AddSite"-->
-<!--                :rooms="rooms"-->
-<!--                :is-show.sync="isShowAdd"-->
-<!--                @refresh="getList"-->
-<!--        />-->
+        </el-card>
+
+        <AddSite
+                ref="AddSite"
+                
+                :is-show.sync="isShowAdd"
+                @refresh="getList"
+        />
+        <ShowSite
+                ref="ShowSite"
+        
+                :is-show.sync="isShowDetail"
+        />
     </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: {
+          id: '',
           
-            name: "",
+            name: '',
           
-            status: "",
+            status: 1,
           
-            content: "",
+            content: '',
           
-            sort: 0,
+            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;