新用户修改密码

src/api/system/user.js

@@ -1,145 +1,146 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 import { parseStrEmpty } from "@/utils/ruoyi";
 
 // 查询用户列表
 export function listUser(query) {
   return request({
-    url: '/system/user/list',
-    method: 'get',
-    params: query
-  })
+    url: "/system/user/list",
+    method: "get",
+    params: query,
+  });
 }
 
 // 查询用户详细
 export function getUser(userId) {
   return request({
-    url: '/system/user/getInfo/' + parseStrEmpty(userId),
-    method: 'get'
-  })
+    url: "/system/user/getInfo/" + parseStrEmpty(userId),
+    method: "get",
+  });
 }
 
 // 新增用户
 export function addUser(data) {
   return request({
-    url: '/system/user/add',
-    method: 'post',
-    data: data
-  })
+    url: "/system/user/add",
+    method: "post",
+    data: data,
+  });
 }
 
 // 修改用户
 export function updateUser(data) {
   return request({
-    url: '/system/user/edit',
-    method: 'post',
-    data: data
-  })
+    url: "/system/user/edit",
+    method: "post",
+    data: data,
+  });
 }
 
 // 删除用户
 export function delUser(userId) {
   return request({
-    url: '/system/user/remove/' + userId,
-    method: 'get'
-  })
+    url: "/system/user/remove/" + userId,
+    method: "get",
+  });
 }
 
 // 用户密码重置
-export function resetUserPwd(userId, password) {
+export function resetUserPwd(userId, password, is) {
+  console.log(is);
   const data = {
     userId,
-    password
-  }
+    password,
+    type: is,
+  };
   return request({
-    url: '/system/user/resetPwd',
-    method: 'post',
-    data: data
-  })
+    url: "/system/user/resetPwd",
+    method: "post",
+    data: data,
+  });
 }
 
 // 用户状态修改
 export function changeUserStatus(userId, status) {
   const data = {
     userId,
-    status
-  }
+    status,
+  };
   return request({
-    url: '/system/user/changeStatus',
-    method: 'post',
-    data: data
-  })
+    url: "/system/user/changeStatus",
+    method: "post",
+    data: data,
+  });
 }
 
 // 查询用户个人信息
 export function getUserProfile() {
   return request({
-    url: '/system/user/profile',
-    method: 'get'
-  })
+    url: "/system/user/profile",
+    method: "get",
+  });
 }
 
 // 修改用户个人信息
 export function updateUserProfile(data) {
   return request({
-    url: '/system/user/profile/edit',
-    method: 'post',
-    data: data
-  })
+    url: "/system/user/profile/edit",
+    method: "post",
+    data: data,
+  });
 }
 
 // 用户密码重置
 export function updateUserPwd(oldPassword, newPassword) {
   const data = {
     oldPassword,
-    newPassword
-  }
+    newPassword,
+  };
   return request({
-    url: '/system/user/profile/updatePwd',
-    method: 'post',
-    params: data
-  })
+    url: "/system/user/profile/updatePwd",
+    method: "post",
+    params: data,
+  });
 }
 
 // 用户头像上传
 export function uploadAvatar(data) {
   return request({
-    url: '/system/user/profile/avatar',
-    method: 'post',
-    data: data
-  })
+    url: "/system/user/profile/avatar",
+    method: "post",
+    data: data,
+  });
 }
 
 // 查询授权角色
 export function getAuthRole(userId) {
   return request({
-    url: '/system/user/authRole/' + userId,
-    method: 'get'
-  })
+    url: "/system/user/authRole/" + userId,
+    method: "get",
+  });
 }
 
 // 保存授权角色
 export function updateAuthRole(data) {
   return request({
-    url: '/system/user/authRole',
-    method: 'post',
-    params: data
-  })
+    url: "/system/user/authRole",
+    method: "post",
+    params: data,
+  });
 }
 
 // 查询部门下拉树结构
 export function deptTreeSelect() {
   return request({
-    url: '/system/user/deptTree',
-    method: 'get'
-  })
+    url: "/system/user/deptTree",
+    method: "get",
+  });
 }
 
-
 // 上传文件
 export function upload(data) {
   return request({
-    url: '/common/upload/',
-    method: 'post',
-    data:data
-  })
+    url: "/common/upload/",
+    method: "post",
+    data: data,
+  });
 }

src/layout/components/Navbar.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="navbar">
-    <div style="display: flex; justify-content: center; color: white; line-height: 47px">
+    <div
+      style="
+        display: flex;
+        justify-content: center;
+        color: white;
+        line-height: 47px;
+      "
+    >
       <div class="cursor index" @click="handlerIndex">
         <span class="icon">&#xe712;</span>
         <div class="mtt">首页</div>
@@ -9,20 +16,32 @@
         <top-nav></top-nav>
       </div>
       <search />
-      <hamburger id="hamburger-container" :is-active="sidebar.opened" v-show="isShowHamBurger" class="hamburger-container" @toggleClick="toggleSideBar" />
+      <hamburger
+        id="hamburger-container"
+        :is-active="sidebar.opened"
+        v-show="isShowHamBurger"
+        class="hamburger-container"
+        @toggleClick="toggleSideBar"
+      />
     </div>
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
+    <breadcrumb
+      id="breadcrumb-container"
+      class="breadcrumb-container"
+      v-if="!topNav"
+    />
     <div class="right-menu">
       <div class="cursor index right-menu-item">
         <header-notice-vue />
       </div>
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
-
+      <el-dropdown
+        class="avatar-container right-menu-item hover-effect"
+        trigger="click"
+      >
         <div class="avatar-wrapper">
           <img :src="avatar" class="user-avatar" />
           <div class="cons">
             <div class="nickName">{{ user.nickName }}</div>
-            <div>{{ user.deptName ? user.deptName : '无部门' }}</div>
+            <div>{{ user.deptName ? user.deptName : "无部门" }}</div>
           </div>
           <i class="el-icon-caret-bottom" />
         </div>
@@ -39,39 +58,70 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+
+    <el-dialog
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      :visible.sync="open"
+      :append-to-body="true"
+      title="修改密码"
+      width="70%"
+    >
+      <p>注：由于您首次登录请您尽快修改密码，保护您的账号安全！</p>
+      <el-row>
+        <el-col :span="24">
+          <div style="display: flex; align-items: center; margin-bottom: 20px">
+            <p style="width: 100px; color: #606266">新密码：</p>
+            <el-input type="password" show-password v-model="newPassword"></el-input>
+          </div>
+        </el-col>
+      </el-row>
+      <div
+        style="display: flex; justify-content: center; align-items: center"
+        class="dialog-footer"
+      >
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
-import Breadcrumb from '@/components/Breadcrumb';
-import TopNav from '@/components/TopNav';
-import Hamburger from '@/components/Hamburger';
-import Screenfull from '@/components/Screenfull';
-import SizeSelect from '@/components/SizeSelect';
-import Search from '@/components/HeaderSearch';
-import RuoYiGit from '@/components/RuoYi/Git';
-import RuoYiDoc from '@/components/RuoYi/Doc';
-import HeaderNoticeVue from './HeaderNotice.vue';
+import { resetUserPwd } from "@/api/system/user.js";
+import { getInfo } from "@/api/login.js";
+import { mapGetters } from "vuex";
+import Breadcrumb from "@/components/Breadcrumb";
+import TopNav from "@/components/TopNav";
+import Hamburger from "@/components/Hamburger";
+import Screenfull from "@/components/Screenfull";
+import SizeSelect from "@/components/SizeSelect";
+import Search from "@/components/HeaderSearch";
+import RuoYiGit from "@/components/RuoYi/Git";
+import RuoYiDoc from "@/components/RuoYi/Doc";
+import HeaderNoticeVue from "./HeaderNotice.vue";
 
 export default {
   data() {
     return {
+      newPassword: null,
+      userData: {},
+      open: false,
       // 菜单列表显示、隐藏
       isShowMenu: false,
       user: this.$store.state.user,
       // 伸缩按钮显示、隐藏
       isShowHamBurger: false,
       routeImgs: [
-        require('@/assets/route_images/u211.svg'),
-        require('@/assets/route_images/u217.svg'),
-        require('@/assets/route_images/u226.svg'),
-        require('@/assets/route_images/u214.svg'),
-        require('@/assets/route_images/u223.svg'),
-        require('@/assets/route_images/u229.svg'),
-        require('@/assets/route_images/u220.svg'),
-        require('@/assets/route_images/u232.svg')
-      ]
+        require("@/assets/route_images/u211.svg"),
+        require("@/assets/route_images/u217.svg"),
+        require("@/assets/route_images/u226.svg"),
+        require("@/assets/route_images/u214.svg"),
+        require("@/assets/route_images/u223.svg"),
+        require("@/assets/route_images/u229.svg"),
+        require("@/assets/route_images/u220.svg"),
+        require("@/assets/route_images/u232.svg"),
+      ],
     };
   },
   components: {
@@ -83,40 +133,76 @@ export default {
     SizeSelect,
     Search,
     RuoYiGit,
-    RuoYiDoc
+    RuoYiDoc,
   },
   computed: {
-    ...mapGetters(['sidebar', 'avatar', 'device', 'sidebarRouters', 'deptName','nickName']),
+    ...mapGetters([
+      "sidebar",
+      "avatar",
+      "device",
+      "sidebarRouters",
+      "deptName",
+      "nickName",
+    ]),
     setting: {
       get() {
         return this.$store.state.settings.showSettings;
       },
       set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'showSettings',
-          value: val
+        this.$store.dispatch("settings/changeSetting", {
+          key: "showSettings",
+          value: val,
         });
-      }
+      },
     },
     topNav: {
       get() {
         return this.$store.state.settings.topNav;
-      }
-    }
+      },
+    },
+  },
+  created() {
+    this.getUserInfo();
   },
   methods: {
+    submitForm() {
+      let reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w\s]).{8,}$/;
+
+
+      if(reg.test(this.newPassword)){
+
+        resetUserPwd(this.user.userId, this.newPassword, false).then(
+          (res) => {
+            if (res.code == 200) {
+              this.$message.success("修改成功");
+              this.open = false;
+            }
+          }
+        );
+      }else{
+        this.$message.error("密码需包含大小写字母 + 数字 + 特殊字符,且不小于8位");
+      }
+    },
+
+    getUserInfo() {
+      getInfo().then((res) => {
+        this.userData = res.user;
+        console.log(res.user);
+        if (res.user.type == true) this.open = true;
+      });
+    },
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar');
+      this.$store.dispatch("app/toggleSideBar");
     },
     async logout() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+      this.$confirm("确定注销并退出系统吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
       })
         .then(() => {
-          this.$store.dispatch('LogOut').then(() => {
-            location.href = '/index';
+          this.$store.dispatch("LogOut").then(() => {
+            location.href = "/index";
           });
         })
         .catch(() => {});
@@ -127,22 +213,22 @@ export default {
 
     handlerIndex() {
       this.isShowHamBurger = false;
-      this.$router.push('/');
-    }
+      this.$router.push("/");
+    },
   },
 
   watch: {
-    '$route.fullPath': {
+    "$route.fullPath": {
       handler: function (newV, oldV) {
-        if (newV == '/index') {
+        if (newV == "/index") {
           this.isShowHamBurger = false;
         } else {
           this.isShowHamBurger = true;
         }
-      }
+      },
       // deep:true,
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -246,9 +332,9 @@ export default {
             height: 15px;
             margin-top: -7px;
             margin-bottom: 5px;
-
           }
-          .deptName {}
+          .deptName {
+          }
           .desc {
             margin-top: 7px;
           }

src/views/system/dept/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+    >
       <el-form-item label="部门名称" prop="deptName">
         <el-input
           v-model="queryParams.deptName"
@@ -10,7 +16,11 @@
         />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="部门状态" clearable>
+        <el-select
+          v-model="queryParams.status"
+          placeholder="部门状态"
+          clearable
+        >
           <el-option
             v-for="dict in dict.type.sys_normal_disable"
             :key="dict.value"
@@ -20,8 +30,16 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
@@ -34,7 +52,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:dept:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -43,32 +62,55 @@
           icon="el-icon-sort"
           size="mini"
           @click="toggleExpandAll"
-        >展开/折叠</el-button>
+          >展开/折叠</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
     <el-table
       v-if="refreshTable"
-
       :data="deptList"
       row-key="deptId"
       :default-expand-all="isExpandAll"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
     >
-      <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
-      <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
+      <el-table-column
+        prop="deptName"
+        label="部门名称"
+        width="260"
+      ></el-table-column>
+      <el-table-column
+        prop="orderNum"
+        label="排序"
+        width="200"
+      ></el-table-column>
       <el-table-column prop="status" label="状态" width="100">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+          <dict-tag
+            :options="dict.type.sys_normal_disable"
+            :value="scope.row.status"
+          />
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="200"
+      >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -76,14 +118,16 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:dept:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-plus"
             @click="handleAdd(scope.row)"
             v-hasPermi="['system:dept:add']"
-          >新增</el-button>
+            >新增</el-button
+          >
           <el-button
             v-if="scope.row.parentId != 0"
             size="mini"
@@ -91,18 +135,30 @@
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:dept:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 添加或修改部门对话框 -->
-    <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="600px" append-to-body>
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      :close-on-click-modal="false"
+      width="600px"
+      append-to-body
+    >
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="24" v-if="form.parentId !== 0">
             <el-form-item label="上级部门" prop="parentId">
-              <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
+              <treeselect
+                v-model="form.parentId"
+                :options="deptOptions"
+                :normalizer="normalizer"
+                placeholder="选择上级部门"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -114,26 +170,42 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="显示排序" prop="orderNum">
-              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+              <el-input-number
+                v-model="form.orderNum"
+                controls-position="right"
+                :min="0"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="负责人" prop="leader">
-              <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
+              <el-input
+                v-model="form.leader"
+                placeholder="请输入负责人"
+                maxlength="20"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="联系电话" prop="phone">
-              <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
+              <el-input
+                v-model="form.phone"
+                placeholder="请输入联系电话"
+                maxlength="11"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
-            <el-form-item label="邮箱" prop="email">
-              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+            <el-form-item label="机构代码" prop="email">
+              <el-input
+                v-model="form.email"
+                placeholder="请输入邮箱"
+                maxlength="50"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -143,7 +215,8 @@
                   v-for="dict in dict.type.sys_normal_disable"
                   :key="dict.value"
                   :label="dict.value"
-                >{{dict.label}}</el-radio>
+                  >{{ dict.label }}</el-radio
+                >
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -154,10 +227,47 @@
               v-for="item in options"
               :key="item.value"
               :label="item.label"
-              :value="item.value">
+              :value="item.value"
+            >
             </el-option>
           </el-select>
         </el-form-item>
+
+        <el-col :span="24">
+          <el-form-item label="附件">
+            <el-upload
+              class="upload-demo"
+              ref="upload"
+              :headers="{
+                Authorization: 'Bearer ' + token,
+              }"
+              name="file"
+              list-type="picture"
+              :action="ip + '/common/upload'"
+              :show-file-list="changeShow"
+              :on-change="handleSelect"
+              :on-remove="handleRemove"
+              :on-success="handleSuccess"
+              :before-upload="handleBeforeUpload"
+              :file-list="fileList"
+              :auto-upload="false"
+            >
+              <el-button slot="trigger" size="small" type="primary"
+                >选取文件</el-button
+              >
+              <!-- <el-button
+          style="margin-left: 10px"
+          size="small"
+          type="success"
+          @click="submitUpload"
+          >上传到服务器</el-button
+        > -->
+              <div slot="tip" class="el-upload__tip">
+                只能上传 jpg / png 文件
+              </div>
+            </el-upload>
+          </el-form-item>
+        </el-col>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -168,31 +278,50 @@
 </template>
 
 <script>
-import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
+import {
+  listDept,
+  getDept,
+  delDept,
+  addDept,
+  updateDept,
+  listDeptExcludeChild,
+} from "@/api/system/dept";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "Dept",
-  dicts: ['sys_normal_disable'],
+  dicts: ["sys_normal_disable"],
   components: { Treeselect },
   data() {
     return {
-      options: [{
-        value: 1,
-        label: '一级单位(湾办)'
-      }, {
-        value: 2,
-        label: '二级单位(保税区)'
-      }, {
-        value: 3,
-        label: '三级单位(企业)'
-      }, {
-        value: 4,
-        label: '市级单位(地级市)'
-      }
+      changeShow:false,
+      // 文件列表
+      fileList: [],
+      uploadIs: false,
+
+      ip: null,
+      token: null,
+
+      options: [
+        {
+          value: 1,
+          label: "一级单位(湾办)",
+        },
+        {
+          value: 2,
+          label: "二级单位(保税区)",
+        },
+        {
+          value: 3,
+          label: "三级单位(企业)",
+        },
+        {
+          value: 4,
+          label: "市级单位(地级市)",
+        },
       ],
-      value: '',
+      value: "",
       // 遮罩层
       loading: true,
       // 显示搜索条件
@@ -212,49 +341,106 @@ export default {
       // 查询参数
       queryParams: {
         deptName: undefined,
-        status: undefined
+        status: undefined,
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         parentId: [
-          { required: true, message: "上级部门不能为空", trigger: "blur" }
+          { required: true, message: "上级部门不能为空", trigger: "blur" },
         ],
         deptName: [
-          { required: true, message: "部门名称不能为空", trigger: "blur" }
+          { required: true, message: "部门名称不能为空", trigger: "blur" },
         ],
         orderNum: [
-          { required: true, message: "显示排序不能为空", trigger: "blur" }
+          { required: true, message: "显示排序不能为空", trigger: "blur" },
         ],
         type: [
-          { required: true, message: "部门类型不能为空", trigger: "blur" }
+          { required: true, message: "部门类型不能为空", trigger: "blur" },
         ],
         email: [
           {
             type: "email",
             message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
+            trigger: ["blur", "change"],
+          },
         ],
         phone: [
           {
             pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
             message: "请输入正确的手机号码",
-            trigger: "blur"
-          }
-        ]
-      }
+            trigger: "blur",
+          },
+        ],
+      },
     };
   },
   created() {
+    this.token = this.$store.state.user.token;
+    this.ip = process.env.VUE_APP_BASE_IP;
     this.getList();
   },
   methods: {
+
+        // 文件上传选择
+        handleSelect(file, list) {
+      this.fileList = list;
+    },
+    // 文件移除
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    // 文件上传成功
+    handleSuccess(response, file, fileList) {
+      console.log(fileList);
+      let imgList = [];
+      fileList.forEach((i) => {
+        if (i.response.fileName) {
+          imgList.push(i.response.fileName + "");
+        }
+      });
+      this.form.sinfo03 = imgList.toString();
+
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.deptId != undefined) {
+            updateDept(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addDept(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    // 文件上传之前
+    handleBeforeUpload(file) {
+      // 截取上传文件的后缀名
+      let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
+      // 判断文件名的类型，允许多种就判断多个
+      if (fileType == "jpg" || fileType == "png") {
+        console.log(file, "jpg || png");
+      } else {
+        this.$message.error("文件类型必须为 jpg / png 格式");
+        // 返回false 就不会执行上传操作了
+        return false;
+      }
+    },
+
     /** 查询部门列表 */
     getList() {
       this.loading = true;
-      listDept(this.queryParams).then(response => {
+      listDept(this.queryParams).then((response) => {
         this.deptList = this.handleTree(response.data, "deptId");
         this.loading = false;
       });
@@ -267,7 +453,7 @@ export default {
       return {
         id: node.deptId,
         label: node.deptName,
-        children: node.children
+        children: node.children,
       };
     },
     // 取消按钮
@@ -285,8 +471,9 @@ export default {
         leader: undefined,
         phone: undefined,
         email: undefined,
-        status: "0"
+        status: "0",
       };
+      this.fileList = [];
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -306,7 +493,7 @@ export default {
       }
       this.open = true;
       this.title = "添加部门";
-      listDept().then(response => {
+      listDept().then((response) => {
         this.deptOptions = this.handleTree(response.data, "deptId");
       });
     },
@@ -320,45 +507,34 @@ export default {
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
+      this.changeShow = true;
       this.reset();
-      getDept(row.deptId).then(response => {
+      getDept(row.deptId).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改部门";
       });
-      listDeptExcludeChild(row.deptId).then(response => {
+      listDeptExcludeChild(row.deptId).then((response) => {
         this.deptOptions = this.handleTree(response.data, "deptId");
       });
     },
     /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.deptId != undefined) {
-            updateDept(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addDept(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
+    submitForm: function () {
+      this.$refs["upload"].submit();
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function() {
-        return delDept(row.deptId);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    }
-  }
+      this.$modal
+        .confirm('是否确认删除名称为"' + row.deptName + '"的数据项？')
+        .then(function () {
+          return delDept(row.deptId);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+  },
 };
 </script>