表格操作提示以及二次确认组件封装，表单样式修改

src/components/Confirmation.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-11-15 14:15:58
+ * @LastEditTime: 2021-11-15 14:34:26
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \founder_vue\src\components\confrim.vue
+-->
+<template>
+  <div>
+    <el-tooltip
+      class="item"
+      effect="dark"
+      :content="content"
+      placement="top"
+      :open-delay="500"
+    >
+      <slot></slot>
+      <el-popconfirm
+        v-if="hintBoo"
+        placement="top-start"
+        :hide-icon="true"
+        confirm-button-text="确认"
+        @onConfirm="$emit('onConfirm')"
+        class="icon del"
+        title="确认要删除该数据吗？该操作无法撤消！"
+      >
+        <div slot="reference">
+          <slot name="reference"></slot>
+        </div>
+      </el-popconfirm>
+    </el-tooltip>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    //提示词
+    content: String,
+    //是否出现二次选择框
+    hintBoo: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+<style lang="scss">
+.el-popconfirm__main {
+  margin: 23px 24px 17px 24px;
+  font-size: 14px;
+  font-family: MicrosoftYaHei;
+  color: #333333;
+}
+.el-popconfirm__action {
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  // 交换 确定 和 取消 按钮的位置
+  .el-button:nth-child(1) {
+    float: right;
+    margin-right: 23%;
+    width: 72px;
+    height: 32px;
+    background: #055fe7;
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: MicrosoftYaHei;
+    color: #ffffff;
+  }
+  .el-button:nth-child(2) {
+    float: left;
+    margin-left: 23%;
+    width: 72px;
+    height: 32px;
+    background: #ffffff;
+    border-radius: 4px;
+    border: 1px solid #aeb5c2;
+    font-size: 14px;
+    font-family: MicrosoftYaHei;
+    color: #2e3846;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.el-popconfirm__action {
+  text-align: right;
+}
+/deep/.el-popconfirm__action {
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file

src/views/Home.vue

@@ -225,14 +225,20 @@ export default {
         let res = this.paths.filter((item) => {
           return item.name != pathName;
         });
-        this.paths = res;
-        console.log(pathName == this.$route.meta.title);
         if (pathName == this.$route.meta.title) {
           if (this.paths.length > 0) {
-            this.$router.push(this.paths[0].path);
-            this.routePath = this.paths[0].routeName;
+            debugger;
+            let routerIndex = this.paths.findIndex((i) => i.routeName == name);
+            if (routerIndex == 0) {
+              this.$router.push(this.paths[1].path);
+              this.routePath = this.paths[1].routeName;
+            } else {
+              this.$router.push(this.paths[routerIndex - 1].path);
+              this.routePath = this.paths[routerIndex - 1].routeName;
+            }
           }
         }
+        this.paths = res;
       }
       sessionStorage.setItem("crumbs", JSON.stringify(this.paths));
       this.setKeepAlive();
@@ -247,10 +253,9 @@ export default {
         cachePageName = "";
       }
       this.$store.commit("layout/resetcachePageName", cachePageName);
-      this.$store.commit("layout/delcachePageName", 'ryzwbj');
-      this.$store.commit("layout/delcachePageName", 'ajzwbj');
-      console.log(1111222222211111,this.$store.state.layout.cachePageName)
-
+      this.$store.commit("layout/delcachePageName", "ryzwbj");
+      this.$store.commit("layout/delcachePageName", "ajzwbj");
+      console.log(1111222222211111, this.$store.state.layout.cachePageName);
     },
     /**
      * @description: 调回任务管理
@@ -313,8 +318,8 @@ export default {
   watch: {
     $route: {
       handler(newValue, oldValue) {
-        console.log(this.routePath,11111111111)
-        console.log(newValue,11111111111)
+        console.log(this.routePath, 11111111111);
+        console.log(newValue, 11111111111);
         this.routePath = newValue.name;
         setTimeout(() => {
           console.log(1);

src/views/SystemManage/UserManage.vue

@@ -157,21 +157,32 @@
         </el-table-column>
         <el-table-column prop="active" label="操作">
           <template slot-scope="scope">
-            <img
-              style="
-                width: 1.125rem;
-                height: 1.125rem;
-                margin-right: 1.125rem;
-                cursor: pointer;
-              "
-              src="../../assets/img/qbryk/bj.png"
-              @click="openedit(scope.row.userId)"
-            />
-            <img
-              style="width: 1.125rem; height: 1.125rem; cursor: pointer"
-              src="../../assets/img/qbryk/del.png"
-              @click="del(scope.row.userId)"
-            />
+            <div @click="offMultiple()">
+              <Confirmation content="编辑用户">
+                <img
+                  style="
+                    width: 1.125rem;
+                    height: 1.125rem;
+                    margin-right: 1.125rem;
+                    cursor: pointer;
+                  "
+                  src="../../assets/img/qbryk/bj.png"
+                  @click="openedit(scope.row.userId)"
+                />
+              </Confirmation>
+              <Confirmation
+                @onConfirm="del(scope.row.id)"
+                content="删除"
+                :hintBoo="true"
+              >
+                <div slot="reference">
+                  <img
+                    style="width: 1.125rem; height: 1.125rem; cursor: pointer"
+                    src="../../assets/img/qbryk/del.png"
+                  />
+                </div>
+              </Confirmation>
+            </div>
           </template>
         </el-table-column>
       </el-table>
@@ -203,7 +214,7 @@
       v-if="isShowAddUserDialogBg"
       @click="canceladd"
     ></div>
-    <div class="addUserDialog" v-if="isShowAddUserDialog">
+    <div class="addUserDialog dialog" v-if="isShowAddUserDialog">
       <div class="head-title">
         <div class="left">新增用户</div>
         <div class="close" @click="canceladd">
@@ -395,9 +406,13 @@
 <script>
 import "@/icons/ic_add.svg";
 import qs from "qs";
+import Confirmation from "@/components/Confirmation.vue";
 
 export default {
   name: "UserManage",
+  components: {
+    Confirmation,
+  },
   created() {
     let w1 = 1920;
     let w2 = window.innerWidth;
@@ -746,7 +761,10 @@ export default {
         this.tableData = res.data;
       });
     },
-
+    offMultiple() {
+      this.selectBoo = false;
+      this.$refs.multipleTable.clearSelection();
+    },
     // 清除所有选项
     toggleSelection(rows) {
       if (rows) {
@@ -766,11 +784,6 @@ export default {
     //是否是批量操作
     batch() {
       this.selectBoo = !this.selectBoo;
-      if (this.selectBoo) {
-        this.isShowTip = true;
-      } else {
-        this.isShowTip = false;
-      }
       this.toggleSelection();
     },
     // 当期页发生变化
@@ -897,6 +910,17 @@ export default {
   mounted() {
     this.search();
   },
+  watch: {
+    selectBoo: {
+      handler(newval) {
+        if (this.selectBoo) {
+          this.isShowTip = true;
+        } else {
+          this.isShowTip = false;
+        }
+      },
+    },
+  },
 };
 
 const data1 = [
@@ -963,8 +987,9 @@ const data1 = [
   margin-bottom: 0 !important;
   padding: 15px 0 !important;
 }
-.info{
-  margin-top: 0px!important
+.info {
+  margin-top: 0px !important;
 }
 @import "scss/user";
+@import './scss/dialog_table'
 </style>

src/views/SystemManage/scss/dialog_table.scss

+.dialog /deep/ {
+  .el-form-item__content {
+    margin-left: 20px !important;
+    position: relative !important;
+  }
+  .el-form-item__error {
+    left: 100%;
+    width: 100%;
+    top: 50%;
+    box-sizing: border-box;
+    transform: translateY(-50%);
+    padding-left: 10px;
+    padding-top: 0!important;
+  }
+  .is-error {
+    .el-input {
+      &::after {
+        display: block;
+        content: "";
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        background: url("~@/assets/img/warn.png") 100% 100% / cover;
+      }
+    }
+    .el-input__inner {
+      border-color: #e6e6e8 !important;
+      color: #e60012;
+      box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
+    }
+  }
+}

src/views/SystemManage/scss/group.scss

@@ -234,7 +234,7 @@
 .dialog{
   width: 823px;
   padding: 0;
-  margin-left: 30%;
+  // margin-left: 30%;
   .title-img{
     width: 21px;
     height: 21px;