修改登录页；增加文创和文献的提交loading

src/components/VueQuillEditor/index.vue

@@ -62,7 +62,7 @@ export default {
       [{ font: [] }], // 字体种类-----[{ font: [] }]
       [{ align: [] }], // 对齐方式-----[{ align: [] }]
       ["clean"], // 清除文本格式-----['clean']
-      ["image"], // 链接、图片、视频-----['link', 'image', 'video']
+      // ["image"], // 链接、图片、视频-----['link', 'image', 'video']
     ];
     return {
       content: this.value, //内容

src/main.js

@@ -28,6 +28,22 @@ Vue.use(ElementUI)
 
 Vue.config.productionTip = false
 
+
+// 自定义指令，防止用户多次提交，点击一次后禁用，持续两秒
+Vue.directive('preventReClick', {
+  inserted(el, binding) {
+    el.addEventListener('click', () => {
+      if (!el.disabled) {
+        el.disabled = true
+        setTimeout(() => {
+          el.disabled = false
+        }, binding.value || 2000)
+      }
+    })
+  }
+});
+
+
 new Vue({
   el: '#app',
   router,

src/utils/file.js

@@ -118,6 +118,7 @@ export function previewFile(href, previewName) {
  * @param typeSuffix 文件后缀
  */
 export function downloadBlob(url, fileName, typeSuffix) {
+  return new Promise((resolve,reject)=>{
     axios({
       url,
       method: 'get',
@@ -137,7 +138,10 @@ export function downloadBlob(url, fileName, typeSuffix) {
       }
       link.click()
       URL.revokeObjectURL(link.href)
+      resolve()
     }).catch(err => {
       console.error(err);
+      reject(err)
+    })
   })
 };

src/views/culturalRelic/components/InfoEditDialog.vue

@@ -159,7 +159,6 @@
                   >
                   </el-option>
                 </el-select>
-              
               </el-form-item>
 
               <el-form-item label="是否上架" :label-width="formLabelWidth">
@@ -261,7 +260,11 @@
 
         <div class="dialog-footer">
           <el-button @click="cancelForm">取 消</el-button>
-          <el-button type="primary" @click="handleSubmit" :loading="loading"
+          <el-button
+            type="primary"
+            @click="handleSubmit"
+            :loading="loading"
+            preventReClick
             >确定<i class="el-icon-circle-check" style="margin-left: 5px"></i
           ></el-button>
         </div>
@@ -442,7 +445,7 @@ export default {
     await this.$store.dispatch("dict/getDictList", [
       "culturalRelicLevel",
       "culturalRelicType",
-      "culturalRelicSourceWay"
+      "culturalRelicSourceWay",
     ]);
 
     let res = await this.$store.dispatch("dict/getDictTree", [
@@ -739,32 +742,10 @@ export default {
   .relate {
     flex: 1;
   }
-  .dialog-footer {
+}
+.dialog-footer {
   display: flex;
   align-items: flex-end;
   margin: 20px 0;
-  }
-}
-
-.upload-box {
-  background-color: #fbfdff;
-  border: 1px dashed #c0ccda;
-  border-radius: 6px;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  width: 148px;
-  height: 148px;
-  line-height: 146px;
-  vertical-align: top;
-  text-align: center;
-  margin: 0 8px 8px 0;
-  i {
-    font-size: 28px;
-    color: #8c939d;
-  }
-}
-
-.video-lists {
-  display: flex;
 }
 </style>

src/views/literature/components/InfoEditDialog.vue

@@ -2,7 +2,6 @@
   <el-dialog
     :visible="dialogVisible"
     width="40%"
-    style="height: 98%"
     :before-close="handleClose"
     top="5vh"
     lock-scroll
@@ -11,9 +10,15 @@
       <div class="divider"></div>
       <div class="label">{{ title }}</div>
     </div>
+    <div class="el-dialog-div">
       <div class="dialog-content">
-      <el-form :model="dialogForm" class="basic-info">
-        <el-form-item label="名称" :label-width="formLabelWidth">
+        <el-form
+          :model="dialogForm"
+          class="basic-info"
+          ref="form"
+          :rules="rules"
+        >
+          <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
             <el-input
               v-model="dialogForm.name"
               autocomplete="off"
@@ -54,11 +59,7 @@
               :fileLimit="1"
               :fileSize="50"
               listType="text"
-<<<<<<< HEAD
-            :fileType="['pdf','ttf']"
-=======
               :fileType="['pdf']"
->>>>>>> f07b1c1b191bef418ce077a9c7b4d53fd7b72cee
               ref="pdf"
             />
           </el-form-item>
@@ -80,6 +81,7 @@
           >确定<i class="el-icon-circle-check" style="margin-left: 5px"></i
         ></el-button>
       </div>
+    </div>
   </el-dialog>
 </template>
 
@@ -147,64 +149,84 @@ export default {
       status: true,
       files: [], //文献文件
       dialogVisible: false,
-    };
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入文献名称",
+            trigger: "blur",
           },
-  methods: {
-    handlePreview({ type, file }) {
-      console.log(type, file);
+        ],
       },
-    handleRemove(file, fileList) {
-      console.log(file, fileList);
+    };
   },
+  methods: {
     // 取消编辑
     cancelForm() {
       this.$emit("handleClose");
-      this.faceImage = [];
+      this.reset();
+    },
+
+    resetChildData() {
+      this.files = [];
+      this.$refs.form.resetFields();
     },
 
-    async handleSubmit() {
-      let params = JSON.parse(JSON.stringify(this.dialogForm));
+    reloadParent() {
+      this.$emit("handleClose");
+      this.$emit("reloadParent");
+    },
+    handleSubmit() {
+      let that = this;
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          let params = JSON.parse(JSON.stringify(that.dialogForm));
           // 回填文件
-      let file = this.$refs.pdf.getFiles();
+          let file = that.$refs.pdf.getFiles();
           let formData = new FormData();
+          if (file.length > 0) {
             if (file[0].status == "ready") {
               formData.append("files", file[0].raw);
               let upLoadRes = await uploadFile(formData);
               if (upLoadRes.code == 0) {
                 params.pdfFile = upLoadRes.data[0].fileId;
               } else {
-          this.$message.error("上传失败！:" + upLoadRes.data.msg);
+                that.$message.error("上传失败！:" + upLoadRes.data.msg);
               }
             } else if (file[0].status == "success") {
               params.pdfFile = file[0].fileId;
             }
+          } else {
+            params.pdfFile = "";
+          }
+
           // 修改状态
-      params.status = this.status ? 1 : 0;
+          params.status = that.status ? 1 : 0;
           if (params.literatureId) {
             let res = await editLiterature(params);
             if (res.code == 0) {
-          this.$message.success("修改成功！");
-          this.reload();
+              that.$message.success("修改成功！");
+              that.reloadParent();
+              that.resetChildData();
             }
           } else {
             let res = await addLiterature(params);
             if (res.code == 0) {
-          this.$message.success("添加成功！");
-          this.reload();
+              that.$message.success("添加成功！");
+              that.reloadParent();
+              that.resetChildData();
             }
           }
+        }
+      });
     },
-    reload() {
-      this.$emit("refresh");
-      this.$emit("handleClose");
-      this.files = [];
-    },
+
     handleClose(done) {
       this.$confirm("确认关闭？")
         .then((_) => {
           done();
-          this.$emit("handleClose");
-          this.files = [];
+          this.reloadParent();
+          this.resetChildData();
         })
         .catch((_) => {});
     },
@@ -225,6 +247,12 @@ export default {
     font-weight: bold;
   }
 }
+
+.el-dialog-div {
+  height: 70vh;
+  overflow-x: hidden;
+}
+
 .dialog-content {
   padding: 0 32px;
   display: flex;
@@ -232,10 +260,13 @@ export default {
     flex: 1;
     margin-right: 48px;
   }
+  .relate {
+    flex: 1;
+  }
 }
-
 .dialog-footer {
   display: flex;
   justify-content: flex-end;
+  margin: 20px 0;
 }
 </style>
\ No newline at end of file

src/views/literature/index.vue

@@ -2,39 +2,70 @@
   <div class="app-container">
     <div class="top-bar">
       <SearchBar :config="searchConfig" @search="search" @reset="reset" />
-      <el-button type="primary" @click.native="handleOperation({ type: 'add' })" icon="el-icon-plus">
-        添加</el-button>
+      <el-button
+        type="primary"
+        @click.native="handleOperation({ type: 'add' })"
+        icon="el-icon-plus"
+      >
+        添加</el-button
+      >
     </div>
-    <TablePage :data="list.records" :tableTitle="tableTitle" :operates="tableOperates">
+    <TablePage
+      :data="list.records"
+      :tableTitle="tableTitle"
+      :operates="tableOperates"
+    >
       <template v-slot:status="data">
-        <el-popconfirm :title="getStatusTitle(data.scope.status)" @onConfirm="handleChangeStatus(data.scope)">
-          <el-switch slot="reference" :value="Boolean(Number(data.scope.status))"></el-switch>
+        <el-popconfirm
+          :title="getStatusTitle(data.scope.status)"
+          @onConfirm="handleChangeStatus(data.scope)"
+        >
+          <el-switch
+            slot="reference"
+            :value="Boolean(Number(data.scope.status))"
+          ></el-switch>
         </el-popconfirm>
       </template>
 
       <template v-slot:operates="scope">
-        <TableOperation :operations="tableOperations" :rawData="scope.scope.row" @handleOperation="handleOperation">
+        <TableOperation
+          :operations="tableOperations"
+          :rawData="scope.scope.row"
+          @handleOperation="handleOperation"
+        >
         </TableOperation>
       </template>
     </TablePage>
-    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-      :current-page="Number(list.current)" :page-sizes="[10, 20, 40, 50]" :page-size="Number(list.size)"
-      layout="total, sizes, prev, pager, next, jumper" :total="Number(list.total)" class="pagination">
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="Number(list.current)"
+      :page-sizes="[10, 20, 40, 50]"
+      :page-size="Number(list.size)"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="Number(list.total)"
+      class="pagination"
+    >
     </el-pagination>
-    <InfoEditDialog :visible="drawerVisible" :form="form" @handleClose="handleClose" @refresh="loadData" />
+    <InfoEditDialog
+      :visible="drawerVisible"
+      :form="form"
+      @handleClose="handleClose"
+      @reloadParent="loadData"
+    />
   </div>
 </template>
 
 <script>
-  import TablePage from "@/components/Table/TablePage.vue";
-  import TableOperation from "@/components/Table/TableOperation.vue";
-  import { title, operates, operations } from "./config";
-  import { editLiterature, deleteLt } from "@/api/literature";
-  import InfoEditDialog from "./components/InfoEditDialog";
-  import SearchBar from "@/components/SearchBar";
-  import { downloadFile, previewFile, downloadBlob } from "@/utils/file";
+import TablePage from "@/components/Table/TablePage.vue";
+import TableOperation from "@/components/Table/TableOperation.vue";
+import { title, operates, operations } from "./config";
+import { editLiterature, deleteLt } from "@/api/literature";
+import InfoEditDialog from "./components/InfoEditDialog";
+import SearchBar from "@/components/SearchBar";
+import { downloadFile, previewFile, downloadBlob } from "@/utils/file";
 
-  export default {
+export default {
   components: {
     TablePage,
     TableOperation,
@@ -147,24 +178,38 @@
       }
     },
     async handleOperation(value, row) {
-        console.log("handleOperation", value, row);
       switch (value.type) {
         case "add":
           this.drawerVisible = true;
           break;
         case "view":
-            if (row.files && row.files.length > 0 && row.files[0].url) {
+          if (row.files && row.files.length > 0 && row.files[0].url ) {
             previewFile(row.files[0].url, row.name);
           } else {
-              this.$message.info("暂无文献附件！");
+            let m = this.$message.info("暂无文献附件！");
+            setTimeout(() => {
+              m.close();
+            }, 1500);
           }
           break;
         case "download":
           if (row.files && row.files.length > 0 && row.files[0].url) {
-              let url = '/files' + row.files[0].url.split('files')[1]
-              downloadBlob(url, row.name, "pdf");
+            let start = this.$message.info("正在准备下载...");
+            let url = "/files" + row.files[0].url.split("files")[1];
+            downloadBlob(url, row.name, "pdf")
+              .then((res) => {
+                start.close();
+                this.$message.success("下载成功！");
+              })
+              .catch((err) => {
+                start.close();
+                this.$message.error("下载失败：" + err);
+              });
           } else {
-              this.$message.info("暂无文献！");
+            let m = this.$message.info("暂无文献！");
+            setTimeout(() => {
+              m.close();
+            }, 1500);
           }
           break;
         case "edit":
@@ -216,27 +261,27 @@
       };
     },
   },
-  };
+};
 </script>
 
 <style lang="scss" scoped>
-  .top-bar {
+.top-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
-  }
+}
 
-  .pagination {
+.pagination {
   margin: 16px;
-  }
+}
 
-  // .el-button {
-  //   margin-bottom: 22px;
-  // }
+// .el-button {
+//   margin-bottom: 22px;
+// }
 
-  ::v-deep .el-card__header {
+::v-deep .el-card__header {
   padding: 10px 20px;
   font-weight: bold;
-  }
+}
 </style>
\ No newline at end of file

src/views/login/index.vue

 <template>
-  <div class="login-container">
+  <div class="login-box">
+    <div class="left">
+      <div class="logo">
+        <div class="logo-container">
+          <img src="@/assets/imgs/login/logo.png" alt="" />
+        </div>
+        <div class="text">
+          <span class="ch"> 贵州博物馆精品展览展示平台管理后台</span>
+          <span class="en">
+            Management Background Of Guizhou Museum Boutique Exhibition
+            Platform</span
+          >
+        </div>
+      </div>
+    </div>
+    <div class="login-container right">
       <el-form
         ref="loginForm"
         :model="loginForm"
@@ -9,7 +24,7 @@
         label-position="left"
       >
         <div class="title-container">
-        <h3 class="title">欢迎登录贵州省精品展览展示管理系统</h3>
+          <h3 class="title">欢迎登录</h3>
         </div>
 
         <el-form-item prop="username">
@@ -19,7 +34,7 @@
           <el-input
             ref="username"
             v-model="loginForm.username"
-          placeholder="Username"
+            placeholder="用户名"
             name="username"
             type="text"
             tabindex="1"
@@ -36,7 +51,7 @@
             ref="password"
             v-model="loginForm.password"
             :type="passwordType"
-          placeholder="Password"
+            placeholder="密码"
             name="password"
             tabindex="2"
             auto-complete="on"
@@ -87,6 +102,8 @@
         >
       </el-form>
     </div>
+    <div class="footer">贵州省文化和旅游厅版权所有</div>
+  </div>
 </template>
 
 <script>
@@ -98,14 +115,14 @@ export default {
       loginForm: {
         username: "",
         password: "",
-        captcha:''
+        captcha: "",
       },
       loginRules: {
         username: [
           { required: true, trigger: "blur", message: "请输入用户名" },
         ],
         password: [{ required: true, trigger: "blur", message: "请输入密码" }],
-        captcha: [{ required: true, trigger: "blur", message: "请输入验证码" } ],
+        captcha: [{ required: true, trigger: "blur", message: "请输入验证码" }],
       },
       loading: false,
       passwordType: "password",
@@ -156,7 +173,7 @@ export default {
           this.loading = true;
           this.$store
             .dispatch("user/login", this.loginForm)
-            .then(async() => {
+            .then(async () => {
               // debugger
               // await this.$store.dispatch('user/getMenuList')
               this.$router.push({ path: this.redirect || "/" });
@@ -202,10 +219,11 @@ $cursor: #fff;
       -webkit-appearance: none;
       border-radius: 0px;
       padding: 12px 5px 12px 15px;
-      color: $light_gray;
+      // color: $light_gray;
+      color: #333;
       height: 47px;
-      caret-color: $cursor;
-
+      // caret-color: $cursor;
+      caret-color: #333;
       &:-webkit-autofill {
         box-shadow: 0 0 0px 1000px $bg inset !important;
         -webkit-text-fill-color: $cursor !important;
@@ -214,8 +232,10 @@ $cursor: #fff;
   }
 
   .el-form-item {
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(0, 0, 0, 0.1);
+    // border: 1px solid rgba(255, 255, 255, 0.1);
+    // background: rgba(0, 0, 0, 0.1);
+    border: 2px solid #e0e7ff;
+    background: transparent;
     border-radius: 5px;
     color: #454545;
   }
@@ -226,20 +246,74 @@ $cursor: #fff;
 $bg: #2d3a4b;
 $dark_gray: #889aa4;
 $light_gray: #eee;
+.login-box {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  background-image: url("~@/assets/imgs/login/bg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.left,
+.right {
+  width: 50%;
+  height: 100%;
+}
+
+.left {
+  padding: 80px 0 0 100px;
+
+  .logo {
+    display: flex;
+    .logo-container {
+      width: 140px;
+      height: 140px;
+      margin-right: 4px;
+      img {
+        width: 100%;
+      }
+    }
+
+    .ch {
+      color: #fff;
+      font-size: 38px;
+      display: inline-block;
+      margin: 6px 0 10px;
+      letter-spacing: 2px;
+    }
+    .en {
+      color: #fff;
+      font-size: 20px;
+      display: inline-block;
+      letter-spacing: 1px;
+    }
+  }
+}
 
 .login-container {
   min-height: 100%;
-  width: 100%;
-  background-color: $bg;
+  // width: 100%;
+  // background-color: $bg;
   overflow: hidden;
-
+  display: flex;
+  justify-content: center;
+  align-items: center;
   .login-form {
     position: relative;
     width: 520px;
     max-width: 100%;
-    padding: 160px 35px 0;
-    margin: 0 auto;
+    padding: 120px 35px;
+    // margin: 0 auto;
     overflow: hidden;
+    // background: #12417b;
+    // background: url("~@/assets/imgs/login/login-bg.png") 100% 100% no-repeat;
+    background-color: #fff;
+    border-radius: 16px;
+    box-shadow: 2px 6px 6px 2px rgba(0, 0, 0, 0.1);
   }
 
   .tips {
@@ -267,7 +341,8 @@ $light_gray: #eee;
 
     .title {
       font-size: 26px;
-      color: $light_gray;
+      // color: $light_gray;
+      color: #333;
       margin: 0px auto 40px auto;
       text-align: center;
       font-weight: bold;
@@ -294,4 +369,19 @@ $light_gray: #eee;
     }
   }
 }
+
+.el-button--primary {
+  background-color: #1d63c3;
+  color: #fff;
+  &:hover {
+    background-color: rgba($color: #1d63c3, $alpha: 0.8);
+  }
+}
+
+.footer {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+}
 </style>

src/views/product/components/InfoEditDialog.vue

@@ -2,9 +2,8 @@
   <el-dialog
     :visible.sync="dialogVisible"
     width="40%"
-    style="height: 98%"
     :before-close="handleClose"
-    top="5vh"
+    top="2vh"
     lock-scroll
     v-loading="submitLoading"
     element-loading-background="rgba(0, 0, 0, 0.5)"
@@ -14,6 +13,7 @@
       <div class="divider"></div>
       <div class="label">{{ title }}</div>
     </div>
+    <div class="el-dialog-div">
       <div class="dialog-content">
         <el-form :model="dialogForm" class="basic-info">
           <el-form-item label="名称" :label-width="formLabelWidth">
@@ -66,7 +66,7 @@
               :fileLimit="6"
               :fileSize="50"
               listType="picture-card"
-            :fileType="['png', 'jpeg', 'jpg','webp']"
+              :fileType="['png', 'jpeg', 'jpg', 'webp']"
               ref="images"
             />
           </el-form-item>
@@ -78,6 +78,7 @@
           >确定<i class="el-icon-circle-check" style="margin-left: 5px"></i
         ></el-button>
       </div>
+    </div>
   </el-dialog>
 </template>
 
@@ -231,7 +232,7 @@ export default {
       });
     },
     async handleSubmit() {
-      // this.submitLoading = true;
+      this.submitLoading = true;
       let params = { ...this.dialogForm };
       let deleteFileArr = [];
       let oldImageIds = [];
@@ -295,21 +296,23 @@ export default {
             }
           });
         }
-        // console.log("deleteFileArr", deleteFileArr);
-        // return;
+
+        if (deleteFileArr.length > 0) {
+          await deleteFiles(deleteFileArr);
+        }
+
         let res = await updateCcProduct(params);
         if (res.code == 0) {
           this.$message.success("修改成功！");
           this.reload();
-        }
-        if (deleteFileArr.length > 0) {
-          await deleteFiles(deleteFileArr);
+          this.submitLoading = false;
         }
       } else {
         let res = await addCcProduct(params);
         if (res.code == 0) {
           this.$message.success("添加成功！");
           this.reload();
+          this.submitLoading = false;
         }
       }
     },
@@ -344,6 +347,12 @@ export default {
     font-weight: bold;
   }
 }
+
+.el-dialog-div {
+  height: 80vh;
+  overflow-x: hidden;
+}
+
 .dialog-content {
   padding: 0 32px;
   display: flex;
@@ -354,13 +363,13 @@ export default {
   .relate {
     flex: 1;
   }
-}
 
+}
 .dialog-footer {
     display: flex;
-  justify-content: flex-end;
-}
-
+    align-items: flex-end;
+    margin: 20px;
+  }
 .upload-box {
   background-color: #fbfdff;
   border: 1px dashed #c0ccda;
@@ -378,8 +387,4 @@ export default {
     color: #8c939d;
   }
 }
-
-.video-lists {
-  display: flex;
-}
 </style>
\ No newline at end of file