refactor: 代码风格样式优化

src/api/home.js

@@ -1,6 +1,9 @@
 import request from '@/utils/request'
 
-// 获取首页展示信息
+/**
+ * 获取首页展示信息
+ * @returns {AxiosPromise}
+ */
 export const getInformation = () => {
   return request({
     url: '/home/showInfomation',

src/api/project.js

@@ -2,7 +2,11 @@
 
 import request from '@/utils/request'
 
-// 获取服务器列表信息
+/**
+ * 获取项目列表信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
 export const getProjectList = (data = {}) => {
   data.page = data.page || 1 // 当前页码
   data.content = data.content || undefined // 查询关键字
@@ -18,8 +22,12 @@ export const getProjectList = (data = {}) => {
   })
 }
 
-// 添加服务器信息
-export const addProject = (data) => {
+/**
+ * 添加项目信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export const addProject = data => {
   data.member = data.member.join(',')
   return request({
     url: '/project/add',
@@ -30,8 +38,12 @@ export const addProject = (data) => {
   })
 }
 
-// 更新服务器信息
-export const updateProject = (data) => {
+/**
+ * 更新项目信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export const updateProject = data => {
   data.member = data.member.join(',')
   return request({
     url: '/project/update',
@@ -42,8 +54,12 @@ export const updateProject = (data) => {
   })
 }
 
-// 删除服务器信息
-export const delProject = (id) => {
+/**
+ * 删除项目信息
+ * @param id
+ * @returns {AxiosPromise}
+ */
+export const delProject = id => {
   return request({
     url: '/project/delete',
     method: 'POST',
@@ -55,7 +71,11 @@ export const delProject = (id) => {
   })
 }
 
-// 服务器部署列表信息
+/**
+ * 服务器部署列表信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
 export const getProjectDeployList = (data = {}) => {
   data.page = data.page || 1 // 当前页码
   data.content = data.content || undefined // 查询关键字
@@ -71,8 +91,12 @@ export const getProjectDeployList = (data = {}) => {
   })
 }
 
-// 添加项目部署信息
-export const addProjectDeploy = (data) => {
+/**
+ * 添加项目部署信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export const addProjectDeploy = data => {
   return request({
     url: '/projectdep/add',
     method: 'POST',
@@ -82,8 +106,12 @@ export const addProjectDeploy = (data) => {
   })
 }
 
-// 删除项目部署信息
-export const delProjectDeploy = (id) => {
+/**
+ * 删除项目部署信息
+ * @param id
+ * @returns {AxiosPromise}
+ */
+export const delProjectDeploy = id => {
   return request({
     url: '/projectdep/delete',
     method: 'POST',
@@ -95,7 +123,11 @@ export const delProjectDeploy = (id) => {
   })
 }
 
-// 获取异常信息列表
+/**
+ *  获取异常信息列表
+ * @param data
+ * @returns {AxiosPromise}
+ */
 export const getProjectExceptionList = (data = {}) => {
   data.page = data.page || 1 // 当前页码
   data.content = data.content || undefined // 查询关键字
@@ -111,15 +143,23 @@ export const getProjectExceptionList = (data = {}) => {
   })
 }
 
-// 获取 项目/环境 列表
+/**
+ * 获取 项目/环境 列表
+ * @returns {AxiosPromise}
+ */
 export const getProjectAndEnvList = () => {
   return request({
     url: '/project/queryListProName',
     method: 'POST'
   })
 }
-// 根据项目id的查询项目部署列表
-export const getProjectDeployListById = (id) => {
+
+/**
+ * 根据项目id的查询项目部署列表
+ * @param id
+ * @returns {AxiosPromise}
+ */
+export const getProjectDeployListById = id => {
   return request({
     url: '/projectdep/queryListByProjectId',
     method: 'POST',
@@ -131,8 +171,12 @@ export const getProjectDeployListById = (id) => {
   })
 }
 
-// 根据id查询项目部署信息
-export const getProjectDepById = (id) => {
+/**
+ * 根据id查询项目部署信息
+ * @param id
+ * @returns {AxiosPromise}
+ */
+export const getProjectDepById = id => {
   return request({
     url: '/projectdep/getProjectDepById',
     method: 'POST',
@@ -143,8 +187,13 @@ export const getProjectDepById = (id) => {
     }
   })
 }
-// 修改项目部署信息
-export const updateProjectDeploy = (data) => {
+
+/**
+ * 修改项目部署信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export const updateProjectDeploy = data => {
   return request({
     url: '/projectdep/update',
     method: 'POST',

src/api/server.js

@@ -1,9 +1,13 @@
 import request from '@/utils/request'
 
-// 获取服务器列表信息
+/**
+ * 获取服务器列表信息
+ * @param data {Object} {page: '', content: ''}
+ * @returns {AxiosPromise}
+ */
 export const getServerList = (data = {}) => {
   data.page = data.page || 1 // 当前页码
-  data.content = data.content || undefined // 查询关键字
+  data.content = data.content || '' // 查询关键字
   return request({
     url: '/server/list',
     method: 'POST',
@@ -16,7 +20,11 @@ export const getServerList = (data = {}) => {
   })
 }
 
-// 添加服务器
+/**
+ * 添加服务器
+ * @param data
+ * @returns {AxiosPromise}
+ */
 export const addServer = (data) => {
   return request({
     url: '/server/insert',
@@ -27,7 +35,11 @@ export const addServer = (data) => {
   })
 }
 
-// 更新服务器
+/**
+ * 更新服务器
+ * @param data
+ * @returns {AxiosPromise}
+ */
 export const updateServer = (data) => {
   return request({
     url: '/server/update',
@@ -38,7 +50,11 @@ export const updateServer = (data) => {
   })
 }
 
-// 删除服务器
+/**
+ * 删除服务器
+ * @param serverId
+ * @returns {AxiosPromise}
+ */
 export const delServer = (serverId) => {
   return request({
     url: '/server/delete',

src/api/staff.js

@@ -1,7 +1,11 @@
 import request from '@/utils/request'
 import dayjs from 'dayjs'
 
-// 获取员工列表信息
+/**
+ * 获取员工列表信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
 export const getStaffList = (data = {}) => {
   data.page = data.page || 1 // 当前页码
   data.content = data.content || undefined // 查询关键字
@@ -17,7 +21,10 @@ export const getStaffList = (data = {}) => {
   })
 }
 
-// 获取所有用户/职位信息
+/**
+ * 获取所有用户/职位信息
+ * @returns {AxiosPromise}
+ */
 export const getAllUserPosition = () => {
   return request({
     url: '/user/queryAllUserPosition',
@@ -25,7 +32,11 @@ export const getAllUserPosition = () => {
   })
 }
 
-// 添加员工信息
+/**
+ * 添加员工信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
 export const addStaff = (data) => {
   data.entryTime = dayjs(data.entryTime).format('YYYY-MM-DD HH:mm:ss')
   // data.entryTime = data.entryTime.valueOf()
@@ -38,7 +49,11 @@ export const addStaff = (data) => {
   })
 }
 
-// 更新员工信息
+/**
+ * 更新员工信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
 export const updateStaff = (data) => {
   return request({
     url: '/user/update',
@@ -49,7 +64,11 @@ export const updateStaff = (data) => {
   })
 }
 
-// 删除员工信息
+/**
+ * 删除员工信息
+ * @param id
+ * @returns {AxiosPromise}
+ */
 export const delStaff = (id) => {
   return request({
     url: '/user/delete',

src/api/system.js

@@ -1,6 +1,10 @@
 import request from '@/utils/request'
 
-// 获取菜单列表信息
+/**
+ * 获取菜单列表信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
 export const getMenuList = (data = {}) => {
   data.page = data.page || 1 // 当前页码
   data.content = data.content || undefined // 查询关键字
@@ -16,7 +20,11 @@ export const getMenuList = (data = {}) => {
   })
 }
 
-// 添加菜单信息
+/**
+ * 添加菜单信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
 export const addMenu = (data) => {
   return request({
     url: '/menu/addMenu',
@@ -27,7 +35,11 @@ export const addMenu = (data) => {
   })
 }
 
-// 更新菜单信息
+/**
+ * 更新菜单信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
 export const updateMenu = (data) => {
   return request({
     url: '/menu/update',
@@ -38,7 +50,11 @@ export const updateMenu = (data) => {
   })
 }
 
-// 删除菜单信息
+/**
+ * 删除菜单信息
+ * @param id
+ * @returns {AxiosPromise}
+ */
 export const delMenu = (id) => {
   return request({
     url: '/menu/delete',
@@ -51,7 +67,11 @@ export const delMenu = (id) => {
   })
 }
 
-// 根据父id查询菜单
+/**
+ * 根据父id查询菜单
+ * @param id
+ * @returns {AxiosPromise}
+ */
 export const getMenuListByParentId = (id) => {
   return request({
     url: '/menu/queryListByParentId',
@@ -64,7 +84,10 @@ export const getMenuListByParentId = (id) => {
   })
 }
 
-// 获取菜单权限列表
+/**
+ * 获取菜单权限列表
+ * @returns {AxiosPromise}
+ */
 export const getMenuAuthorityList = () => {
   return request({
     url: '/menu/getMenuAuthorityList',
@@ -72,7 +95,11 @@ export const getMenuAuthorityList = () => {
   })
 }
 
-// 获取职位列表信息
+/**
+ * 获取职位列表信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
 export const getJobList = (data = {}) => {
   data.page = data.page || 1 // 当前页码
   data.content = data.content || undefined // 查询关键字
@@ -88,7 +115,11 @@ export const getJobList = (data = {}) => {
   })
 }
 
-// 添加职位信息
+/**
+ * 添加职位信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
 export const addJob = (data) => {
   return request({
     url: '/position/add',
@@ -99,7 +130,11 @@ export const addJob = (data) => {
   })
 }
 
-// 更新职位信息
+/**
+ * 更新职位信息
+ * @param data
+ * @returns {AxiosPromise}
+ */
 export const updateJob = (data) => {
   return request({
     url: '/position/update',
@@ -110,7 +145,11 @@ export const updateJob = (data) => {
   })
 }
 
-// 删除职位信息
+/**
+ * 删除职位信息
+ * @param id
+ * @returns {AxiosPromise}
+ */
 export const delJob = (id) => {
   return request({
     url: '/position/delete',
@@ -123,7 +162,11 @@ export const delJob = (id) => {
   })
 }
 
-// /position/getPositionPermissionsById
+/**
+ * 根据职位Id获取菜单权限列表
+ * @param id
+ * @returns {AxiosPromise}
+ */
 export const getPositionPermissionsById = (id) => {
   return request({
     url: '/position/getPositionPermissionsById',

src/components/Charts/Chart.vue

@@ -6,6 +6,7 @@
 import echarts from 'echarts'
 import resize from './mixins/resize'
 import request from '@/utils/request'
+
 export default {
   mixins: [resize],
   props: {
@@ -191,6 +192,7 @@ export default {
             backgroundColor: '#fff',
             borderColor: '#919191',
             borderWidth: 1,
+            // 设置tooltip的显示的样式
             formatter: (params, ticket, callback) => {
               const { name, seriesName, value } = params[0]
               const marker = `<span style="display:inline-block;margin-right:5px;border: 1px solid #999;width:13px;height:13px;background-color:${this.themeColor};"></span>`

src/views/home/index.vue

@@ -90,6 +90,7 @@ export default {
 <style lang="scss" scoped>
 .home-container {
   padding-top: 30px;
+
   .info-box {
     .title {
       background-color: #eee9e9;
@@ -102,31 +103,33 @@ export default {
       margin-right: 16px;
       padding-left: 16px;
     }
+
     .info-item-box {
       display: flex;
+
       .info-item {
         display: flex;
         flex-direction: column;
         width: 200px;
         height: 100px;
         border-radius: 10px;
-        margin-top: 14px;
-        margin-bottom: 30px;
-        margin-left: 30px;
-        margin-right: 40px;
+        margin: 14px 40px 30px 30px;
         padding-left: 15px;
         padding-top: 15px;
         font-size: 28px;
         border: 1px solid #d4d4d4;
         color: #101010;
+
         &-hd {
           flex: 1;
+
           span {
             display: inline-block;
             padding-bottom: 4px;
             border-bottom: 1px solid #bbbbbb;
           }
         }
+
         &-bd {
           flex: 1;
         }

src/views/project/project-deploy/index.vue

@@ -9,8 +9,8 @@
         @input="handleInputSearch"
         @clear="clearContent"
       />
-      <el-button class="search" @click="searchServer(content)">搜索</el-button>
-      <el-button type="primary" class="add" @click="dialogFormVisible = true"> 新增项目部署 </el-button>
+      <el-button class="search" @click="search(content)">搜索</el-button>
+      <el-button type="primary" class="add" @click="dialogFormVisible = isAdd = true"> 新增项目部署</el-button>
     </div>
 
     <!-- 表格数据展示区 -->
@@ -18,9 +18,8 @@
       ref="multipleTable"
       :data="list"
       tooltip-effect="dark"
-      :header-cell-style="{color: '#000', fontWeight: 700}"
+      :header-cell-style="{background:'#fafafa',color:'#000', fontWeight: 700, borderTop: '1px solid #ebeef5'}"
       style="width: 100%"
-      @selection-change="handleSelectionChange"
     >
       <el-table-column
         type="selection"
@@ -81,7 +80,7 @@
         align="center"
       >
         <template #default="scope">
-          <el-button type="text" :style="{color: '#1990FF'}" @click="showUpdate(scope.row)">编辑</el-button>
+          <el-button type="text" :style="{color: '#1990FF'}" @click="showDialog(scope.row)">编辑</el-button>
           <el-divider direction="vertical" />  <!-- 中间的小竖线 -->
           <el-button type="text" :style="{color: '#E51C23'}" @click="del(scope.row.id)">删除</el-button>
         </template>
@@ -98,10 +97,15 @@
     />
 
     <!--  添加项目部署信息dialog  -->
-    <el-dialog :visible.sync="dialogFormVisible" width="600px" :close-on-click-modal="false" @close="close('addProjectDeployForm')">
-      <el-form ref="addProjectDeployForm" :model="projectDeployFormData" label-width="140px" :rules="rules" label-position="right">
+    <el-dialog
+      :visible.sync="dialogFormVisible"
+      width="600px"
+      :close-on-click-modal="false"
+      @close="cancelSubmitForm('addProjectDeployForm')"
+    >
+      <el-form ref="formRef" :model="formData" label-width="140px" :rules="rules" label-position="right">
         <el-form-item label="项目名" prop="projectId">
-          <el-select v-model.number="projectDeployFormData.projectId" placeholder="项目名/环境">
+          <el-select v-model.number="formData.projectId" placeholder="项目名/环境">
             <el-option
               v-for="item in projectAndEnvList"
               :key="item.id"
@@ -111,22 +115,22 @@
           </el-select>
         </el-form-item>
         <el-form-item label="功能描述" prop="projectDesc">
-          <el-input v-model="projectDeployFormData.projectDesc" />
+          <el-input v-model="formData.projectDesc" />
         </el-form-item>
         <el-form-item label="端口" prop="port">
-          <el-input v-model.number="projectDeployFormData.port" type="number" />
+          <el-input v-model.number="formData.port" type="number" />
         </el-form-item>
         <el-form-item label="文件路径" prop="filepath">
-          <el-input v-model="projectDeployFormData.filepath" />
+          <el-input v-model="formData.filepath" />
         </el-form-item>
         <el-form-item label="域名" prop="domain">
-          <el-input v-model="projectDeployFormData.domain" />
+          <el-input v-model="formData.domain" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="projectDeployFormData.remark" type="textarea" />
+          <el-input v-model="formData.remark" type="textarea" />
         </el-form-item>
         <el-form-item label="安装监控" prop="monitorjarState">
-          <el-select v-model.number="projectDeployFormData.monitorjarState">
+          <el-select v-model.number="formData.monitorjarState">
             <el-option
               v-for="item in monitorjarStateList"
               :key="item.value"
@@ -136,7 +140,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="部署状态" prop="state">
-          <el-select v-model.number="projectDeployFormData.state">
+          <el-select v-model.number="formData.state">
             <el-option
               v-for="item in deployStateList"
               :key="item.value"
@@ -147,8 +151,8 @@
         </el-form-item>
 
         <el-form-item>
-          <el-button @click="close('addProjectDeployForm')">取 消</el-button>
-          <el-button type="primary" @click="submitForm('addProjectDeployForm')">确 认</el-button>
+          <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
+          <el-button @click="cancelSubmitForm('formRef')">返回</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -156,9 +160,15 @@
 </template>
 
 <script>
-import { getProjectAndEnvList, updateProjectDeploy } from '@/api/project'
-import { getProjectDeployList, addProjectDeploy, delProjectDeploy } from '@/api/project'
+import {
+  getProjectDeployList,
+  addProjectDeploy,
+  delProjectDeploy,
+  getProjectAndEnvList,
+  updateProjectDeploy
+} from '@/api/project'
 import Pagination from '@/components/Pagination/index'
+
 export default {
   name: 'ProjectDeploy',
   components: {
@@ -178,6 +188,8 @@ export default {
       totalpages: 0,
       // 控制dialog显示和隐藏
       dialogFormVisible: false,
+      // 控制添加还是修改
+      isAdd: true,
       // 项目和环境列表
       projectAndEnvList: [],
       // 安装监控状态列表
@@ -206,8 +218,8 @@ export default {
           value: 3
         }
       ],
-      // 项目部署信息
-      projectDeployFormData: {
+      // 表单数据
+      formData: {
         domain: '',
         filepath: '',
         monitorjarState: 1,
@@ -217,7 +229,7 @@ export default {
         remark: '',
         state: 1
       },
-      // 服务器信息表单校验规则
+      // 表单校验规则
       rules: {
         filepath: [
           {
@@ -249,38 +261,61 @@ export default {
     this.fetchProjectList()
   },
   methods: {
-    handleSelectionChange() {
-      console.log('handleSelectionChange')
-    },
-    // 获取项目部署列表数据
+    /**
+     * 获取项目部署列表
+     * @param params  Object {page: '', content: ''}
+     * @returns {Promise<void>}
+     */
     async fetchList(params) {
       const res = await getProjectDeployList(params)
       const { list, totalrecords, totalpages } = res
-      console.log(list)
-      // console.log(res)
-      this.list = list
-      this.totalrecords = totalrecords
-      this.totalpages = totalpages
+      this.list = list // 服务器列表
+      this.totalrecords = totalrecords // 总条数
+      this.totalpages = totalpages // 总页数
     },
-    // 获取项目列表数据
+
+    /**
+     * 获取项目列表数据
+     * @returns {Promise<void>}
+     */
     async fetchProjectList() {
       const res = await getProjectAndEnvList()
       const { list } = res
       this.projectAndEnvList = list
     },
-    // 处理分页模块
+
+    /**
+     * 处理分页模块
+     * @param params Object { page: '', li
+     */
     handlePaginate(params) {
-      // console.log(params)
+      // console.log(params)  // { page: '', limit: '' }
       params = Object.assign(params, { content: this.content })
       this.fetchList(params)
     },
-    // 显示更新项目部署dialog
-    showUpdate(item) {
-      console.log(item)
-      this.projectDeployFormData = item
+    /**
+     * 显示dialog
+     * @param item 编辑的数据
+     * @returns {Promise<void>}
+     */
+    async showDialog(item) {
       this.dialogFormVisible = true
+      // 将添加状态改为false，此时点击提交表单，发送的是修改请求
+      this.isAdd = false
+      // 等待dom更新完毕
+      await this.$nextTick()
+      /**
+       * 这里一定要等待dom更新完毕，然后再进行数据回显，
+       * 防止dialog中的el-form没有挂载完毕就对formData进行了赋值而导致el-form的resetFields方法不起效果
+       */
+      // 将数据复制一份，防止点击返回按钮的时候由于引用传值，而导致在表单重置的时候把该条数据清空了
+      this.formData = Object.assign({}, item)
     },
-    // 根据id删除服务器数据
+
+    /**
+     * 根据id删除服务器信息
+     * @param id
+     */
     del(id) {
       // 弹出提示框，询问是否确认删除
       this.$confirm('你将要删除一条数据, 是否继续?', '温馨提示', {
@@ -288,13 +323,12 @@ export default {
         cancelButtonText: '取消',
         type: 'error'
       }).then(async() => {
-        // 发送删除服务器信息请求
+        // 发送删除请求
         await delProjectDeploy(id)
         this.$message({
           type: 'success',
           message: '删除成功!'
         })
-        await this.fetchList({ page: this.currentPage, content: this.content })
         // 删除完后，如果当前页没有数据并且当前页不是第一页，那么就重新请求上一页的数据
         if (this.list.length === 0 && this.currentPage > 1) {
           this.currentPage -= 1
@@ -307,46 +341,47 @@ export default {
         })
       })
     },
-    // 搜索服务器数据
-    searchServer(content) {
-      // console.log(content)
+
+    /**
+     * 根据content查询服务器信息
+     * @param content
+     */
+    search(content) {
       this.fetchList({ content })
     },
+
+    /**
+     * 处理搜索框的输入
+     */
     async handleInputSearch() {
       // 当用户清除了搜索框中的文字时或者搜索框内容为空时，重新发送请求获取服务器列表数据
       if (!this.content) {
         await this.fetchList()
       }
     },
-    // dialog关闭时要做的事
-    close(formName) {
+
+    /**
+     * 点击返回按钮， 取消提交表单
+     * @param formRef 表单ref
+     */
+    cancelSubmitForm(formRef) {
+      // 清除校验的效果
+      this.$refs[formRef].resetFields()
       // 隐藏dialog
       this.dialogFormVisible = false
-      // 清空projectDeployFormData
-      this.projectDeployFormData = {}
-      // 清除校验的效果
-      this.$refs[formName].resetFields()
-    },
-    // 当搜索框点击清除按钮时
-    clearContent() {
-      // console.log(this.content)
-      // 让当前的页码为1
-      this.currentPage = 1
-      this.fetchList({ content: this.content })
     },
+
     submitForm(formName) {
       // 校验表单
       this.$refs[formName].validate(async(valid) => {
         // 通过就发送请求
         if (valid) {
           let res
-          if (this.projectDeployFormData.id) {
-            res = await updateProjectDeploy(this.projectDeployFormData)
+          if (this.isAdd) {
+            res = await addProjectDeploy(this.formData)
           } else {
-            res = await addProjectDeploy(this.projectDeployFormData)
+            res = await updateProjectDeploy(this.formData)
           }
-          // console.log(res)
-
           // 提示添加成功
           this.$message.success(res.msg)
           // 重新获取列表的数据
@@ -367,20 +402,25 @@ export default {
 <style lang="scss" scoped>
 .project-deploy-container {
   padding-left: 30px;
+
   .header {
     padding-top: 30px;
     margin-bottom: 15px;
+
     ::v-deep .el-input {
       width: 300px;
     }
+
     .search {
       margin-left: 15px;
     }
+
     .add {
       float: right;
       margin-right: 30px;
     }
   }
+
   ::v-deep .el-pagination {
     display: flex;
     justify-content: flex-end;

src/views/project/project-error-monitor/index.vue

@@ -9,7 +9,7 @@
         @input="handleInputSearch"
         @clear="clearContent"
       />
-      <el-button class="search" @click="searchServer(content)">搜索</el-button>
+      <el-button class="search" @click="search(content)">搜索</el-button>
     </div>
 
     <!-- 表格数据展示区 -->
@@ -19,7 +19,6 @@
       tooltip-effect="dark"
       :header-cell-style="{color: '#000', fontWeight: 700}"
       style="width: 100%"
-      @selection-change="handleSelectionChange"
     >
       <el-table-column
         type="selection"
@@ -71,6 +70,7 @@
 <script>
 import { getProjectExceptionList } from '@/api/project'
 import Pagination from '@/components/Pagination/index'
+
 export default {
   name: 'ProjectErrorMonitor',
   components: {
@@ -87,57 +87,57 @@ export default {
       // 当前页
       currentPage: 1,
       // 总页数
-      totalpages: 0,
-      // 控制dialog显示和隐藏
-      dialogFormVisible: false
+      totalpages: 0
     }
   },
   created() {
     this.fetchList({ content: this.content })
   },
   methods: {
-    handleSelectionChange() {
-      console.log('handleSelectionChange')
-    },
-    // 获取列表数据
+    /**
+     * 获取项目异常列表
+     * @param params  Object {page: '', content: ''}
+     * @returns {Promise<void>}
+     */
     async fetchList(params) {
-      const res = await getProjectExceptionList(params)
-      const { list, totalrecords, totalpages } = res
-      // console.log(list)
-      // console.log(res)
-      this.list = list
-      this.totalrecords = totalrecords
-      this.totalpages = totalpages
+      const { list, totalrecords, totalpages } = await getProjectExceptionList(params)
+      this.list = list // 服务器列表
+      this.totalrecords = totalrecords // 总条数
+      this.totalpages = totalpages // 总页数
     },
-    // 处理分页模块
+
+    /**
+     * 处理分页模块
+     * @param params Object { page: '', li
+     */
     handlePaginate(params) {
-      // console.log(params)
+      // console.log(params)  // { page: '', limit: '' }
       params = Object.assign(params, { content: this.content })
       this.fetchList(params)
     },
-    // 搜索服务器数据
-    searchServer(content) {
-      // console.log(content)
+
+    /**
+     * 根据content查询服务器信息
+     * @param content
+     */
+    search(content) {
       this.fetchList({ content })
     },
+
+    /**
+     * 处理搜索框的输入
+     */
     async handleInputSearch() {
       // 当用户清除了搜索框中的文字时或者搜索框内容为空时，重新发送请求获取服务器列表数据
       if (!this.content) {
         await this.fetchList()
       }
     },
-    // dialog关闭时要做的事
-    close(formName) {
-      // 隐藏dialog
-      this.dialogFormVisible = false
-      // 清空serverFormData
-      this.serverFormData = {}
-      // 清除校验的效果
-      this.$refs[formName].resetFields()
-    },
-    // 当搜索框点击清除按钮时
+
+    /**
+     * 当搜索框点击清除按钮时
+     */
     clearContent() {
-      // console.log(this.content)
       // 让当前的页码为1
       this.currentPage = 1
       this.fetchList({ content: this.content })
@@ -149,20 +149,25 @@ export default {
 <style lang="scss" scoped>
 .project-error-monitor-container {
   padding-left: 30px;
+
   .header {
     padding-top: 30px;
     margin-bottom: 15px;
+
     ::v-deep .el-input {
       width: 300px;
     }
+
     .search {
       margin-left: 15px;
     }
+
     .add {
       float: right;
       margin-right: 30px;
     }
   }
+
   ::v-deep .el-pagination {
     display: flex;
     justify-content: flex-end;

src/views/project/project-list/index.vue

@@ -9,8 +9,8 @@
         @input="handleInputSearch"
         @clear="clearContent"
       />
-      <el-button class="search" @click="searchServer(content)">搜索</el-button>
-      <el-button type="primary" class="add" @click="dialogFormVisible = true"> 新增项目</el-button>
+      <el-button class="search" @click="search(content)">搜索</el-button>
+      <el-button type="primary" class="add" @click="dialogFormVisible = isAdd = true"> 新增项目</el-button>
     </div>
 
     <!-- 表格数据展示区 -->
@@ -21,7 +21,6 @@
       :header-cell-style="{color: '#000', fontWeight: 700}"
       style="width: 100%"
       @expand-change="handleExpand"
-      @selection-change="handleSelectionChange"
     >
       <el-table-column
         type="selection"
@@ -36,7 +35,6 @@
             tooltip-effect="dark"
             :header-cell-style="{color: '#000', fontWeight: 700}"
             style="width: 100%"
-            @selection-change="handleSelectionChange"
           >
             <el-table-column
               label="部署内容"
@@ -144,7 +142,7 @@
         align="center"
       >
         <template #default="scope">
-          <el-button type="text" :style="{color: '#1990FF'}" @click="showUpdate(scope.row)">编辑</el-button>
+          <el-button type="text" :style="{color: '#1990FF'}" @click="showDialog(scope.row)">编辑</el-button>
           <el-divider direction="vertical" />  <!-- 中间的小竖线 -->
           <el-button type="text" :style="{color: '#E51C23'}" @click="del(scope.row.id)">删除</el-button>
         </template>
@@ -165,7 +163,7 @@
       :visible.sync="dialogFormVisible"
       width="600px"
       :close-on-click-modal="false"
-      @close="close('projectForm')"
+      @close="cancelSubmitForm('projectForm')"
     >
       <el-form ref="projectForm" :model="projectFormData" label-width="140px" :rules="rules" label-position="right">
         <el-form-item label="项目标识" prop="projectabbr">
@@ -288,8 +286,8 @@
 
         <el-form-item>
           <template #default>
-            <el-button @click="deployClose('deployForm')">取 消</el-button>
-            <el-button type="primary" @click="deploySubmitForm('deployForm', projectDeployFormData.projectId)">确 认</el-button>
+            <el-button @click="deployClose('deployForm')">返回</el-button>
+            <el-button type="primary" @click="deploySubmitForm('deployForm', projectDeployFormData.projectId)">提交</el-button>
           </template>
         </el-form-item>
       </el-form>
@@ -305,7 +303,7 @@ import {
   delProject,
   getProjectDeployListById,
   getProjectAndEnvList,
-  delProjectDeploy, getProjectDepById, updateProjectDeploy
+  getProjectDepById, updateProjectDeploy
 } from '@/api/project'
 import Pagination from '@/components/Pagination/index'
 import { getStaffList } from '@/api/staff'
@@ -347,6 +345,9 @@ export default {
       ],
       // 控制dialog显示和隐藏
       dialogFormVisible: false,
+      // 控制添加还是修改
+      isAdd: true,
+      // 控制部署信息的dialog显示和隐藏
       deployDialogFormVisible: false,
       // 项目状态选项
       projectStateOptions: [
@@ -386,7 +387,7 @@ export default {
         // 服务器id
         serverId: '',
         // 项目状态 1正常 2关闭 3交付 4暂停
-        state: ''
+        state: 1
       },
       projectDeployFormData: {
         domain: '',
@@ -470,58 +471,94 @@ export default {
     this.fetchEnvList()
   },
   methods: {
-    handleSelectionChange() {
-      console.log('handleSelectionChange')
-    },
-    async handleExpand(row, column, event) {
-      // console.log(row, column, event)
+    /**
+     * 展开项目部署的数据
+     * @param row 点击展开的项目数据
+     * @returns {Promise<void>}
+     */
+    async handleExpand(row) {
       const { list } = await getProjectDeployListById(row.id)
-      console.log(list)
       this.expandList = list
-      // this.$refs['expandTable'].toggleRowExpansion(1, true)
     },
-    // 获取服务器列表数据
+
+    /**
+     * 获取项目列表
+     * @param params
+     * @returns {Promise<void>}
+     */
     async fetchList(params) {
       const res = await getProjectList(params)
       const { list, totalrecords, totalpages } = res
-      // console.log(list)
-      // console.log(res)
       this.list = list
       this.totalrecords = totalrecords
       this.totalpages = totalpages
     },
-    // 获取员工列表数据
+
+    /**
+     * 获取员工列表
+     * @returns {Promise<void>}
+     */
     async fetchStaffList() {
       const { list } = await getStaffList()
       this.staffList = list
     },
+
+    /**
+     * 获取项目和环境列表
+     * @returns {Promise<void>}
+     */
     async fetchEnvList() {
       const { list } = await getProjectAndEnvList()
       // console.log(list)
       this.envList = list
     },
-    // 获取服务器列表数据
+
+    /**
+     * 获取服务器列表数据
+     * @returns {Promise<void>}
+     */
     async fetchServerList() {
       const { list } = await getServerList()
       this.serverList = list
     },
-    // 处理分页模块
+
+    /**
+     * 处理分页模块
+     * @param params Object { page: '', li
+     */
     handlePaginate(params) {
-      // console.log(params)
+      // console.log(params)  // { page: '', limit: '' }
       params = Object.assign(params, { content: this.content })
       this.fetchList(params)
     },
-    // 显示更新服务器dialog
-    showUpdate(item) {
+
+    /**
+     * 显示dialog
+     * @param item 编辑的数据
+     * @returns {Promise<void>}
+     */
+    async showDialog(item) {
+      this.dialogFormVisible = true
+      // 将添加状态改为false，此时点击提交表单，发送的是修改请求
+      this.isAdd = false
+      // 等待dom更新完毕
+      await this.$nextTick()
+      /**
+       * 这里一定要等待dom更新完毕，然后再进行数据回显，
+       * 防止dialog中的el-form没有挂载完毕就对formData进行了赋值而导致el-form的resetFields方法不起效果
+       */
       const server = this.serverList.find(el => el.ip === item.serverIp)
-      this.projectFormData = Object.assign(item, {
+      // 将数据复制一份，防止点击返回按钮的时候由于引用传值，而导致在表单重置的时候把该条数据清空了
+      this.projectFormData = Object.assign({}, item, {
         member: item.member.split(',').map(el => parseInt(el)),
         serverId: server && server.id || ''
       })
-      console.log(item)
-      this.dialogFormVisible = true
     },
-    // 根据id删除服务器数据
+
+    /**
+     * 根据id删除服务器信息
+     * @param id
+     */
     del(id) {
       // 弹出提示框，询问是否确认删除
       this.$confirm('你将要删除一条数据, 是否继续?', '温馨提示', {
@@ -529,7 +566,7 @@ export default {
         cancelButtonText: '取消',
         type: 'error'
       }).then(async() => {
-        // 发送删除服务器信息请求
+        // 发送删除请求
         await delProject(id)
         this.$message({
           type: 'success',
@@ -548,36 +585,52 @@ export default {
         })
       })
     },
-    // 搜索服务器数据
-    searchServer(content) {
-      // console.log(content)
+
+    /**
+     * 根据content查询服务器信息
+     * @param content
+     */
+    search(content) {
       this.fetchList({ content })
     },
+
+    /**
+     * 处理搜索框的输入
+     */
     async handleInputSearch() {
       // 当用户清除了搜索框中的文字时或者搜索框内容为空时，重新发送请求获取服务器列表数据
       if (!this.content) {
         await this.fetchList()
       }
     },
-    // dialog关闭时要做的事
-    close(formName) {
+
+    /**
+     * 取消提交表单
+     * @param formRef 表单ref
+     */
+    cancelSubmitForm(formRef) {
+      // 清除校验的效果
+      this.$refs[formRef].resetFields()
       // 隐藏dialog
       this.dialogFormVisible = false
-      // 清空projectFormData
-      this.projectFormData = {}
-      // 清除校验的效果
-      this.$refs[formName].resetFields()
     },
-    // 当搜索框点击清除按钮时
+
+    /**
+     * 当搜索框点击清除按钮时
+     */
     clearContent() {
-      // console.log(this.content)
       // 让当前的页码为1
       this.currentPage = 1
       this.fetchList({ content: this.content })
     },
-    submitForm(formName) {
+
+    /**
+     * 提交表单，添加或修改服务器信息
+     * @param formRef 表单ref
+     */
+    submitForm(formRef) {
       // 校验表单
-      this.$refs[formName].validate(async(valid) => {
+      this.$refs[formRef].validate(async(valid) => {
         // 通过就发送请求
         if (valid) {
           let res
@@ -601,61 +654,46 @@ export default {
         }
       })
     },
-    // 项目部署信息的删除功能
-    deployDel(id) {
-      // 弹出提示框，询问是否确认删除
-      this.$confirm('你将要删除一条数据, 是否继续?', '温馨提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'error'
-      }).then(async() => {
-        // 发送删除服务器信息请求
-        await delProjectDeploy(id)
-        this.$message({
-          type: 'success',
-          message: '删除成功!'
-        })
-        // 再重新发送请求根据id拿去部署信息
-        const { list } = await getProjectDeployListById(id)
-        // console.log(list)
-        this.expandList = list
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
-        })
-      })
-    },
+
+    /**
+     * 显示部署信息的dialog
+     * @param item
+     * @returns {Promise<void>}
+     */
     async deployShowUpdate(item) {
-      console.log(item.id)
       const { object } = await getProjectDepById(item.id)
-      console.log(object)
-      this.projectDeployFormData = object
       this.deployDialogFormVisible = true
+      // 等待dom更新完毕
+      await this.$nextTick()
+      this.projectDeployFormData = Object.assign({}, object)
     },
-    deployClose(formName) {
+
+    /**
+     * 部署信息的dialog关闭要做的事
+     * @param formRef
+     */
+    deployClose(formRef) {
+      // 清除校验的效果
+      this.$refs[formRef].resetFields()
       // 隐藏dialog
       this.deployDialogFormVisible = false
-      // 清空projectDeployFormData
-      this.projectDeployFormData = {}
-      // 清除校验的效果
-      this.$refs[formName].resetFields()
     },
-    deploySubmitForm(formName, projectId) {
-      console.log(projectId)
+
+    /**
+     * 提交表单，更新项目部署信息
+     * @param formRef
+     * @param projectId
+     */
+    deploySubmitForm(formRef, projectId) {
       // 校验表单
-      this.$refs[formName].validate(async(valid) => {
+      this.$refs[formRef].validate(async(valid) => {
         // 通过就发送请求
         if (valid) {
           const res = await updateProjectDeploy(this.projectDeployFormData)
-
-          // console.log(res)
-
           // 提示添加成功
           this.$message.success(res.msg)
           // 再重新发送请求根据id拿去部署信息
           const { list } = await getProjectDeployListById(projectId)
-          // console.log(list)
           this.expandList = list
           // 隐藏dialog
           this.deployDialogFormVisible = false

src/views/project/project-monitor/index.vue

@@ -8,6 +8,7 @@
       height="400px"
       url="/project/monitor/cpuUsage"
     />
+
     <!--  内存使用率图  -->
     <chart
       id="memory"
@@ -21,6 +22,7 @@
 
 <script>
 import Chart from '@/components/Charts/Chart'
+
 export default {
   name: 'ProjectMonitor',
   components: {

src/views/server/server-list/index.vue

@@ -9,8 +9,8 @@
         @input="handleInputSearch"
         @clear="clearContent"
       />
-      <el-button class="search" @click="searchServer(content)">搜索</el-button>
-      <el-button type="primary" class="add" @click="dialogFormVisible = isAdd = true"> 新增服务器 </el-button>
+      <el-button class="search" @click="search(content)">搜索</el-button>
+      <el-button type="primary" class="add" @click="dialogFormVisible = isAdd = true"> 新增服务器</el-button>
     </div>
 
     <!-- 表格数据展示区 -->
@@ -97,25 +97,30 @@
     />
 
     <!--  添加服务器信息dialog  -->
-    <el-dialog :visible.sync="dialogFormVisible" width="600px" :close-on-click-modal="false" @close="cancelSubmitForm('form')">
+    <el-dialog
+      :visible.sync="dialogFormVisible"
+      width="600px"
+      :close-on-click-modal="false"
+      @close="cancelSubmitForm('form')"
+    >
       <el-form ref="form" :model="formData" label-width="140px" :rules="rules" label-position="right">
         <el-form-item label="服务器IP" prop="ip">
-          <el-input v-model="formData.ip" />
+          <el-input v-model.lazy="formData.ip" />
         </el-form-item>
         <el-form-item label="所属公司" prop="own">
-          <el-input v-model="formData.own" />
+          <el-input v-model.lazy="formData.own" />
         </el-form-item>
         <el-form-item label="操作系统" prop="osinfo">
-          <el-input v-model="formData.osinfo" />
+          <el-input v-model.lazy="formData.osinfo" />
         </el-form-item>
         <el-form-item label="CPU核数" prop="cpu">
-          <el-input v-model.number="formData.cpu" type="number" />
+          <el-input v-model.number.lazy="formData.cpu" type="number" />
         </el-form-item>
         <el-form-item label="内存大小" prop="memory">
-          <el-input v-model.number="formData.memory" type="number" />
+          <el-input v-model.number.lazy="formData.memory" type="number" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="formData.remark" type="textarea" />
+          <el-input v-model.lazy="formData.remark" type="textarea" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="submitForm('form')">提交</el-button>
@@ -129,6 +134,7 @@
 <script>
 import { getServerList, addServer, delServer, updateServer } from '@/api/server'
 import Pagination from '@/components/Pagination/index'
+
 export default {
   name: 'ServerList',
   components: {
@@ -243,7 +249,8 @@ export default {
        * 这里一定要等待dom更新完毕，然后再进行数据回显，
        * 防止dialog中的el-form没有挂载完毕就对formData进行了赋值而导致el-form的resetFields方法不起效果
        */
-      this.formData = item
+      // 将数据复制一份，防止点击返回按钮的时候由于引用传值，而导致在表单重置的时候把该条数据清空了
+      this.formData = Object.assign({}, item)
     },
 
     /**
@@ -257,7 +264,7 @@ export default {
         cancelButtonText: '取消',
         type: 'error'
       }).then(async() => {
-        // 发送删除服务器信息请求
+        // 发送删除请求
         await delServer(id)
         this.$message({
           type: 'success',
@@ -280,7 +287,7 @@ export default {
      * 根据content查询服务器信息
      * @param content
      */
-    searchServer(content) {
+    search(content) {
       this.fetchList({ content })
     },
 
@@ -324,10 +331,10 @@ export default {
         // 校验通过
         if (valid) {
           let res
-          if (this.formData.id) {
-            res = await updateServer(this.formData)
-          } else {
+          if (this.isAdd) {
             res = await addServer(this.formData)
+          } else {
+            res = await updateServer(this.formData)
           }
           // 提示添加成功
           this.$message.success(res.msg)
@@ -349,20 +356,25 @@ export default {
 <style lang="scss" scoped>
 .server-list-container {
   padding-left: 30px;
+
   .header {
     padding-top: 30px;
     margin-bottom: 15px;
+
     ::v-deep .el-input {
       width: 300px;
     }
+
     .search {
       margin-left: 15px;
     }
+
     .add {
       float: right;
       margin-right: 30px;
     }
   }
+
   ::v-deep .el-pagination {
     display: flex;
     justify-content: flex-end;

src/views/server/server-monitor/index.vue

@@ -8,6 +8,7 @@
       height="400px"
       url="/server/monitor/cpuUsage"
     />
+
     <!--  内存使用率图  -->
     <chart
       id="memory"
@@ -21,6 +22,7 @@
 
 <script>
 import Chart from '@/components/Charts/Chart'
+
 export default {
   name: 'ServerMonitor',
   components: {

src/views/staff/staff-list/index.vue

@@ -9,8 +9,8 @@
         @input="handleInputSearch"
         @clear="clearContent"
       />
-      <el-button class="search" @click="searchServer(content)">搜索</el-button>
-      <el-button type="primary" class="add" @click="dialogFormVisible = true"> 新增员工</el-button>
+      <el-button class="search" @click="search(content)">搜索</el-button>
+      <el-button type="primary" class="add" @click="dialogFormVisible = isAdd = true"> 新增员工</el-button>
     </div>
 
     <!-- 表格数据展示区 -->
@@ -20,7 +20,6 @@
       tooltip-effect="dark"
       :header-cell-style="{background:'#fafafa',color:'#000', fontWeight: 700, borderTop: '1px solid #ebeef5'}"
       style="width: 100%"
-      @selection-change="handleSelectionChange"
     >
       <el-table-column
         type="selection"
@@ -66,7 +65,7 @@
         align="center"
       >
         <template #default="scope">
-          <el-button type="text" :style="{color: '#1990FF'}" @click="showUpdate(scope.row)">编辑</el-button>
+          <el-button type="text" :style="{color: '#1990FF'}" @click="showDialog(scope.row)">编辑</el-button>
           <el-divider direction="vertical" />  <!-- 中间的小竖线 -->
           <el-button type="text" :style="{color: '#E51C23'}" @click="del(scope.row.id)">删除</el-button>
         </template>
@@ -87,23 +86,23 @@
       :visible.sync="dialogFormVisible"
       width="600px"
       :close-on-click-modal="false"
-      @close="close('addStaffForm')"
+      @close="cancelSubmitForm('formRef')"
     >
-      <el-form ref="addStaffForm" :model="userFormData" label-width="140px" :rules="rules" label-position="right">
+      <el-form ref="formRef" :model="formData" label-width="140px" :rules="rules" label-position="right">
         <el-form-item label="姓名" prop="username">
-          <el-input v-model="userFormData.username" />
+          <el-input v-model="formData.username" />
         </el-form-item>
         <el-form-item label="联系方式" prop="telephone">
-          <el-input v-model="userFormData.telephone" />
+          <el-input v-model="formData.telephone" />
         </el-form-item>
         <el-form-item label="登录名" prop="account">
-          <el-input v-model="userFormData.account" />
+          <el-input v-model="formData.account" />
         </el-form-item>
         <el-form-item label="密码" prop="password">
-          <el-input v-model="userFormData.password" />
+          <el-input v-model="formData.password" />
         </el-form-item>
         <el-form-item label="职位" prop="positionId">
-          <el-select v-model.number="userFormData.positionId" clearable placeholder="请选择职位" style="width: 320px">
+          <el-select v-model.number="formData.positionId" clearable placeholder="请选择职位" style="width: 320px">
             <el-option
               v-for="item in staffList"
               :key="item.id"
@@ -114,13 +113,13 @@
         </el-form-item>
         <el-form-item label="入职时间" prop="entryTime">
           <el-date-picker
-            v-model="userFormData.entryTime"
+            v-model="formData.entryTime"
             type="datetime"
             placeholder="选择入职时间"
           />
         </el-form-item>
         <el-form-item label="在职状态" prop="status">
-          <el-select v-model.number="userFormData.status" clearable placeholder="请选择在职状态" style="width: 320px">
+          <el-select v-model.number="formData.status" clearable placeholder="请选择在职状态" style="width: 320px">
             <el-option
               v-for="item in statusList"
               :key="item.value"
@@ -130,11 +129,11 @@
           </el-select>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="userFormData.remark" type="textarea" />
+          <el-input v-model="formData.remark" type="textarea" />
         </el-form-item>
         <el-form-item>
-          <el-button @click="close('addStaffForm')">取 消</el-button>
-          <el-button type="primary" @click="submitForm('addStaffForm')">确 认</el-button>
+          <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
+          <el-button @click="cancelSubmitForm('formRef')">返回</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -158,7 +157,7 @@ export default {
       list: [],
       // 总条数
       totalrecords: 0,
-      // 是否是新增
+      // 控制添加还是修改
       isAdd: true,
       // 当前页
       currentPage: 1,
@@ -179,8 +178,8 @@ export default {
           value: 2
         }
       ],
-      // 用户信息
-      userFormData: {
+      // 表单数据
+      formData: {
         account: '',
         entryTime: '',
         id: 0,
@@ -191,7 +190,7 @@ export default {
         telephone: '',
         username: ''
       },
-      // 服务器信息表单校验规则
+      // 表单校验规则
       rules: {
         username: [
           {
@@ -225,39 +224,60 @@ export default {
     this.fetchAllUserPosition()
   },
   methods: {
-    handleSelectionChange() {
-      console.log('handleSelectionChange')
-    },
-    // 获取服务器列表数据
+    /**
+     * 获取员工列表
+     * @param params  Object {page: '', content: ''}
+     * @returns {Promise<void>}
+     */
     async fetchList(params) {
       const res = await getStaffList(params)
       const { list, totalrecords, totalpages } = res
-      // console.log(list)
-      // console.log(res)
-      this.list = list
-      this.totalrecords = totalrecords
-      this.totalpages = totalpages
+      this.list = list // 服务器列表
+      this.totalrecords = totalrecords // 总条数
+      this.totalpages = totalpages // 总页数
     },
-    // 获取所有用户和职位信息
+
+    /**
+     * 获取所有员工和职位信息
+     * @returns {Promise<void>}
+     */
     async fetchAllUserPosition() {
       const { list } = await getAllUserPosition()
       this.staffList = list
     },
-    // 处理分页模块
+
+    /**
+     * 处理分页模块
+     * @param params Object { page: '', li
+     */
     handlePaginate(params) {
-      // console.log(params)
+      // console.log(params)  // { page: '', limit: '' }
       params = Object.assign(params, { content: this.content })
       this.fetchList(params)
     },
-    // 显示更新服务器dialog
-    showUpdate(item) {
-      // console.log(item)
-      this.userFormData = item
+
+    /**
+     * 显示dialog
+     * @param item 编辑的数据
+     * @returns {Promise<void>}
+     */
+    async showDialog(item) {
       this.dialogFormVisible = true
-      // 修改为更新状态
+      // 将添加状态改为false，此时点击提交表单，发送的是修改请求
       this.isAdd = false
+      // 等待dom更新完毕
+      await this.$nextTick()
+      /**
+       * 这里一定要等待dom更新完毕，然后再进行数据回显，
+       * 防止dialog中的el-form没有挂载完毕就对formData进行了赋值而导致el-form的resetFields方法不起效果
+       */
+      // 将数据复制一份，防止点击返回按钮的时候由于引用传值，而导致在表单重置的时候把该条数据清空了
+      this.formData = Object.assign({}, item)
     },
-    // 根据id删除服务器数据
+    /**
+     * 根据id员工数据
+     * @param id
+     */
     del(id) {
       // 弹出提示框，询问是否确认删除
       this.$confirm('你将要删除一条数据, 是否继续?', '温馨提示', {
@@ -265,13 +285,12 @@ export default {
         cancelButtonText: '取消',
         type: 'error'
       }).then(async() => {
-        // 发送删除服务器信息请求
+        // 发送删除请求
         await delStaff(id)
         this.$message({
           type: 'success',
           message: '删除成功!'
         })
-        await this.fetchList({ page: this.currentPage, content: this.content })
         // 删除完后，如果当前页没有数据并且当前页不是第一页，那么就重新请求上一页的数据
         if (this.list.length === 0 && this.currentPage > 1) {
           this.currentPage -= 1
@@ -284,50 +303,63 @@ export default {
         })
       })
     },
-    // 搜索服务器数据
-    searchServer(content) {
-      // console.log(content)
+
+    /**
+     * 根据content查询服务器信息
+     * @param content
+     */
+    search(content) {
       this.fetchList({ content })
     },
+
+    /**
+     * 处理搜索框的输入
+     */
     async handleInputSearch() {
       // 当用户清除了搜索框中的文字时或者搜索框内容为空时，重新发送请求获取服务器列表数据
       if (!this.content) {
         await this.fetchList()
       }
     },
-    // dialog关闭时要做的事
-    close(formName) {
-      // 隐藏dialog
-      this.dialogFormVisible = false
-      this.isAdd = true
-      // 清空userFormData
-      this.userFormData = {}
-      // 清除校验的效果
-      this.$refs[formName].resetFields()
-    },
-    // 当搜索框点击清除按钮时
+
+    /**
+     * 当搜索框点击清除按钮时
+     */
     clearContent() {
-      // console.log(this.content)
       // 让当前的页码为1
       this.currentPage = 1
       this.fetchList({ content: this.content })
     },
-    submitForm(formName) {
+
+    /**
+     * 点击返回按钮， 取消提交表单
+     * @param formRef 表单ref
+     */
+    cancelSubmitForm(formRef) {
+      // 清除校验的效果
+      this.$refs[formRef].resetFields()
+      // 隐藏dialog
+      this.dialogFormVisible = false
+    },
+
+    /**
+     * 提交表单，添加或修改员工信息
+     * @param formRef 表单ref
+     */
+    submitForm(formRef) {
       // 校验表单
-      this.$refs[formName].validate(async(valid) => {
+      this.$refs[formRef].validate(async(valid) => {
         // 通过就发送请求
         if (valid) {
           let res
           if (this.isAdd) {
-            res = await addStaff(this.userFormData)
+            res = await addStaff(this.formData)
           } else {
-            res = await updateStaff(this.userFormData)
+            res = await updateStaff(this.formData)
           }
-          // console.log(res)
-
           // 提示添加成功
           this.$message.success(res.msg)
-          // 重新获取服务器列表的数据
+          // 重新获取列表数据
           await this.fetchList({ page: this.currentPage, content: this.content })
           // 隐藏dialog
           this.dialogFormVisible = false

src/views/system/job-settings/index.vue

@@ -9,8 +9,8 @@
         @input="handleInputSearch"
         @clear="clearContent"
       />
-      <el-button class="search" @click="searchServer(content)">搜索</el-button>
-      <el-button type="primary" class="add" @click="dialogFormVisible =isAdd = true"> 新增职位 </el-button>
+      <el-button class="search" @click="search(content)">搜索</el-button>
+      <el-button type="primary" class="add" @click="dialogFormVisible = isAdd = true"> 新增职位</el-button>
     </div>
 
     <!-- 表格数据展示区 -->
@@ -20,7 +20,6 @@
       tooltip-effect="dark"
       :header-cell-style="{background:'#fafafa',color:'#000', fontWeight: 700, borderTop: '1px solid #ebeef5'}"
       style="width: 100%"
-      @selection-change="handleSelectionChange"
     >
       <el-table-column
         type="selection"
@@ -49,7 +48,7 @@
         align="center"
       >
         <template #default="scope">
-          <el-button type="text" :style="{color: '#1990FF'}" @click="showUpdate(scope.row.id)">编辑</el-button>
+          <el-button type="text" :style="{color: '#1990FF'}" @click="showDialog(scope.row.id)">编辑</el-button>
           <el-divider direction="vertical" />  <!-- 中间的小竖线 -->
           <el-button type="text" :style="{color: '#E51C23'}" @click="del(scope.row.id)">删除</el-button>
         </template>
@@ -66,10 +65,15 @@
     />
 
     <!--  添加服务器信息dialog  -->
-    <el-dialog :visible.sync="dialogFormVisible" width="600px" :close-on-click-modal="false" @close="close('addServerForm')">
-      <el-form ref="addServerForm" :model="serverFormData" label-width="140px" :rules="rules" label-position="right">
+    <el-dialog
+      :visible.sync="dialogFormVisible"
+      width="600px"
+      :close-on-click-modal="false"
+      @close="cancelSubmitForm('formRef')"
+    >
+      <el-form ref="formRef" :model="formData" label-width="140px" :rules="rules" label-position="right">
         <el-form-item label="职位名" prop="positionName">
-          <el-input v-model="serverFormData.positionName" />
+          <el-input v-model="formData.positionName" />
         </el-form-item>
         <el-form-item label="菜单权限">
           <el-tree
@@ -83,11 +87,10 @@
           />
         </el-form-item>
         <el-form-item>
-          <el-button @click="close('addServerForm')">取 消</el-button>
-          <el-button type="primary" @click="submitForm('addServerForm')">确 认</el-button>
+          <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
+          <el-button @click="cancelSubmitForm('formRef')">返回</el-button>
         </el-form-item>
       </el-form>
-      <el-button @click="$refs.tree.setCheckedKeys([9,10,11,12]);">通过 key 设置</el-button>
     </el-dialog>
   </div>
 </template>
@@ -95,6 +98,7 @@
 <script>
 import { getJobList, addJob, delJob, updateJob, getMenuAuthorityList, getPositionPermissionsById } from '@/api/system'
 import Pagination from '@/components/Pagination/index'
+
 export default {
   name: 'JobSettings',
   components: {
@@ -108,6 +112,7 @@ export default {
       list: [],
       // 总条数
       totalrecords: 0,
+      // 控制是添加还是修改
       isAdd: true,
       // 当前页
       currentPage: 1,
@@ -115,8 +120,8 @@ export default {
       totalpages: 0,
       // 控制dialog显示和隐藏
       dialogFormVisible: false,
-      // 服务器信息
-      serverFormData: {
+      // 表单数据对象
+      formData: {
         positionName: '',
         menuIds: [],
         urlIds: []
@@ -127,7 +132,7 @@ export default {
         children: 'childrenMenu',
         label: 'menuName'
       },
-      // 服务器信息表单校验规则
+      // 表单校验规则
       rules: {
         positionName: [
           {
@@ -143,19 +148,20 @@ export default {
     this.fetchMenuAuthorityList()
   },
   methods: {
-    handleSelectionChange() {
-      console.log('handleSelectionChange')
-    },
+    /**
+     * 每次点击树状控件进行菜单权限时触发的回调
+     * @param checkedNodes 被选中的节点的数据列表
+     */
     nodeChecked(a, { checkedNodes }) {
-      console.log(checkedNodes)
+      // console.log(checkedNodes)
       const menuIds = []
       const urlIds = []
       /*
       * 遍历checkedNodes，有childrenMenu属性是菜单，把id加到菜单id，没有就是菜单urlId,把id加到菜单urlid
-      * */
+      */
       checkedNodes.forEach(el => {
         if ('childrenMenu' in el) {
-          // 判断是否为空
+          // 判断是否已经存在
           if (!menuIds.includes(el.id)) {
             menuIds.push(el.id)
           }
@@ -165,21 +171,28 @@ export default {
           }
         }
       })
-      this.$set(this.serverFormData, 'menuIds', menuIds)
-      this.$set(this.serverFormData, 'urlIds', urlIds)
-      console.log(this.serverFormData)
+      this.$set(this.formData, 'menuIds', menuIds)
+      this.$set(this.formData, 'urlIds', urlIds)
+      // console.log(this.formData)
     },
-    // 获取服务器列表数据
+
+    /**
+     * 获取服务器列表
+     * @param params  Object {page: '', content: ''}
+     * @returns {Promise<void>}
+     */
     async fetchList(params) {
       const res = await getJobList(params)
       const { list, totalrecords, totalpages } = res
-      // console.log(list)
-      // console.log(res)
-      this.list = list
-      this.totalrecords = totalrecords
-      this.totalpages = totalpages
+      this.list = list // 服务器列表
+      this.totalrecords = totalrecords // 总条数
+      this.totalpages = totalpages // 总页数
     },
-    // 获取菜单权限列表
+
+    /**
+     * 获取菜单权限列表
+     * @returns {Promise<void>}
+     */
     async fetchMenuAuthorityList() {
       const { list } = await getMenuAuthorityList()
       // 针对获取回来的数据处理，符合el-tree的数据格式
@@ -196,33 +209,48 @@ export default {
       this.menuAuthorityList = list
       console.log(list)
     },
-    // 处理分页模块
+
+    /**
+     * 处理分页模块
+     * @param params Object { page: '', li
+     */
     handlePaginate(params) {
-      // console.log(params)
+      // console.log(params)  // { page: '', limit: '' }
       params = Object.assign(params, { content: this.content })
       this.fetchList(params)
     },
-    // 显示更新服务器dialog
-    async showUpdate(id) {
+
+    /**
+     * 显示更新dialog
+     * @param id 要更新的id
+     * @returns {Promise<void>}
+     */
+    async showDialog(id) {
       // 修改添加状态为修改状态
       this.isAdd = false
-      // console.log(item)
       const { object } = await getPositionPermissionsById(id)
+      // console.log(object)
       this.dialogFormVisible = true
-      console.log(object)
-      this.serverFormData = {
+      /**
+       * 这里一定要等待dom更新完毕，然后再进行数据回显，
+       * 防止dialog中的el-form没有挂载完毕就对formData进行了赋值而导致el-form的resetFields方法不起效果
+       */
+      await this.$nextTick()
+      this.formData = Object.assign({}, {
         positionName: object.positionName,
         menuIds: object.positionMenu && object.positionMenu.split(','),
         urlIds: object.positionUrl && object.positionUrl.split(','),
         id
-      }
-      await this.$nextTick()
-      // console.log(this.$refs.tree)
+      })
       if (object.positionUrl) {
         this.$refs.tree.setCheckedKeys(object.positionUrl.split(',').map(el => parseInt(el)))
       }
     },
-    // 根据id删除服务器数据
+
+    /**
+     * 根据id删除职位
+     * @param id
+     */
     del(id) {
       // 弹出提示框，询问是否确认删除
       this.$confirm('你将要删除一条数据, 是否继续?', '温馨提示', {
@@ -230,13 +258,12 @@ export default {
         cancelButtonText: '取消',
         type: 'error'
       }).then(async() => {
-        // 发送删除服务器信息请求
+        // 发送删除请求
         await delJob(id)
         this.$message({
           type: 'success',
           message: '删除成功!'
         })
-        await this.fetchList({ page: this.currentPage, content: this.content })
         // 删除完后，如果当前页没有数据并且当前页不是第一页，那么就重新请求上一页的数据
         if (this.list.length === 0 && this.currentPage > 1) {
           this.currentPage -= 1
@@ -249,50 +276,64 @@ export default {
         })
       })
     },
-    // 搜索服务器数据
-    searchServer(content) {
-      // console.log(content)
+
+    /**
+     * 根据content查询服务器信息
+     * @param content
+     */
+    search(content) {
       this.fetchList({ content })
     },
+
+    /**
+     * 处理搜索框的输入
+     */
     async handleInputSearch() {
       // 当用户清除了搜索框中的文字时或者搜索框内容为空时，重新发送请求获取服务器列表数据
       if (!this.content) {
         await this.fetchList()
       }
     },
-    // dialog关闭时要做的事
-    close(formName) {
-      // 隐藏dialog
-      this.dialogFormVisible = false
-      // 清空serverFormData
-      this.serverFormData = {}
-      // 清空树状控件数据
-      this.$refs.tree.setCheckedKeys([])
-      // 清除校验的效果
-      this.$refs[formName].resetFields()
+
+    /**
+     * 点击返回按钮， 取消提交表单
+     * @param formRef 表单ref
+     */
+    cancelSubmitForm(formRef) {
       // 重新将添加的状态设置为true
       this.isAdd = true
+      // 清空树状控件数据
+      this.$refs.tree.setCheckedKeys([])
+      // 重置表单
+      this.$refs[formRef].resetFields()
+      // 隐藏dialog
+      this.dialogFormVisible = false
     },
-    // 当搜索框点击清除按钮时
+
+    /**
+     * 当搜索框点击清除按钮时
+     */
     clearContent() {
-      // console.log(this.content)
       // 让当前的页码为1
       this.currentPage = 1
       this.fetchList({ content: this.content })
     },
-    submitForm(formName) {
+
+    /**
+     * 提交表单，添加或修改职位信息
+     * @param formRef 表单ref
+     */
+    submitForm(formRef) {
       // 校验表单
-      this.$refs[formName].validate(async(valid) => {
+      this.$refs[formRef].validate(async(valid) => {
         // 通过就发送请求
         if (valid) {
           let res
           if (this.isAdd) {
-            res = await addJob(this.serverFormData)
+            res = await addJob(this.formData)
           } else {
-            res = await updateJob(this.serverFormData)
+            res = await updateJob(this.formData)
           }
-          // console.log(res)
-
           // 提示添加成功
           this.$message.success(res.msg)
           // 重新获取服务器列表的数据
@@ -313,26 +354,32 @@ export default {
 <style lang="scss" scoped>
 .job-settings-container {
   padding-left: 30px;
+
   .header {
     padding-top: 30px;
     margin-bottom: 15px;
+
     ::v-deep .el-input {
       width: 300px;
     }
+
     .search {
       margin-left: 15px;
     }
+
     .add {
       float: right;
       margin-right: 30px;
     }
   }
+
   ::v-deep .el-pagination {
     display: flex;
     justify-content: flex-end;
   }
+
   ::v-deep .el-dialog {
-    width: 80vw!important;
+    width: 80vw !important;
   }
 }
 </style>

src/views/system/menu-settings/index.vue

@@ -9,8 +9,8 @@
         @input="handleInputSearch"
         @clear="clearContent"
       />
-      <el-button class="search" @click="searchServer(content)">搜索</el-button>
-      <el-button type="primary" class="add" @click="dialogFormVisible = true"> 新增菜单 </el-button>
+      <el-button class="search" @click="search(content)">搜索</el-button>
+      <el-button type="primary" class="add" @click="dialogFormVisible = isAdd = true"> 新增菜单</el-button>
     </div>
 
     <!-- 表格数据展示区 -->
@@ -20,7 +20,6 @@
       tooltip-effect="dark"
       :header-cell-style="{background:'#fafafa',color:'#000', fontWeight: 700, borderTop: '1px solid #ebeef5'}"
       style="width: 100%"
-      @selection-change="handleSelectionChange"
     >
       <el-table-column
         type="selection"
@@ -53,7 +52,7 @@
         align="center"
       >
         <template #default="scope">
-          <el-button type="text" :style="{color: '#1990FF'}" @click="showUpdate(scope.row)">编辑</el-button>
+          <el-button type="text" :style="{color: '#1990FF'}" @click="showDialog(scope.row)">编辑</el-button>
           <el-divider direction="vertical" />  <!-- 中间的小竖线 -->
           <el-button type="text" :style="{color: '#E51C23'}" @click="del(scope.row.id)">删除</el-button>
         </template>
@@ -70,16 +69,21 @@
     />
 
     <!--  添加服务器信息dialog  -->
-    <el-dialog :visible.sync="dialogFormVisible" width="600px" :close-on-click-modal="false" @close="close('addMenuForm')">
-      <el-form ref="addMenuForm" :model="menuFormData" label-width="140px" :rules="rules" label-position="right">
+    <el-dialog
+      :visible.sync="dialogFormVisible"
+      width="600px"
+      :close-on-click-modal="false"
+      @close="cancelSubmitForm('formRef')"
+    >
+      <el-form ref="formRef" :model="formData" label-width="140px" :rules="rules" label-position="right">
         <el-form-item label="菜单名" prop="menuName">
-          <el-input v-model="menuFormData.menuName" />
+          <el-input v-model.lazy="formData.menuName" />
         </el-form-item>
         <el-form-item label="父级菜单" prop="parentId">
-          <el-input v-model="menuFormData.parentId" />
+          <el-input v-model.lazy="formData.parentId" />
         </el-form-item>
         <el-form-item
-          v-for="(item, index) in menuFormData.menuUrls"
+          v-for="(item, index) in formData.menuUrls"
           :key="index"
           prop="menuUrls"
           :label="index < 1 ? '菜单URL': ''"
@@ -93,11 +97,11 @@
           </span>
         </el-form-item>
         <el-form-item label="排序" prop="sort">
-          <el-input v-model="menuFormData.sort" />
+          <el-input v-model.lazy="formData.sort" />
         </el-form-item>
         <el-form-item>
-          <el-button @click="close('addMenuForm')">取 消</el-button>
-          <el-button type="primary" @click="submitForm('addMenuForm')">确 认</el-button>
+          <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
+          <el-button @click="cancelSubmitForm('formRef')">返回</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -105,8 +109,9 @@
 </template>
 
 <script>
-import { getMenuList, addMenu, delMenu, updateMenu, getMenuListByParentId } from '@/api/system'
+import { addMenu, delMenu, getMenuList, getMenuListByParentId, updateMenu } from '@/api/system'
 import Pagination from '@/components/Pagination/index'
+
 export default {
   name: 'MenuSettings',
   components: {
@@ -116,7 +121,7 @@ export default {
     return {
       // 搜索关键词
       content: '',
-      // 服务器列表数据
+      // 菜单列表数据
       list: [],
       // 总条数
       totalrecords: 0,
@@ -126,8 +131,10 @@ export default {
       totalpages: 0,
       // 控制dialog显示和隐藏
       dialogFormVisible: false,
-      // 服务器信息
-      menuFormData: {
+      // 控制添加还是修改
+      isAdd: true,
+      // 表单数据对象
+      formData: {
         menuName: '',
         menuUrls: [
           {
@@ -138,7 +145,7 @@ export default {
         parentId: '',
         sort: ''
       },
-      // 服务器信息表单校验规则
+      // 校验规则
       rules: {
         menuName: [
           {
@@ -159,49 +166,60 @@ export default {
     this.fetchList({ content: this.content })
   },
   methods: {
-    handleSelectionChange() {
-      console.log('handleSelectionChange')
-    },
-    // 获取服务器列表数据
+    /**
+     * 获取菜单列表
+     * @param params  Object {page: '', content: ''}
+     * @returns {Promise<void>}
+     */
     async fetchList(params) {
-      const res = await getMenuList(params)
-      const { list, totalrecords, totalpages } = res
-      // console.log(list)
-      // console.log(res)
-      this.list = list
-      this.totalrecords = totalrecords
-      this.totalpages = totalpages
+      const { list, totalrecords, totalpages } = await getMenuList(params)
+      this.list = list // 服务器列表
+      this.totalrecords = totalrecords // 总条数
+      this.totalpages = totalpages // 总页数
     },
-    // 处理分页模块
+
+    /**
+     * 处理分页模块
+     * @param params Object { page: '', li
+     */
     handlePaginate(params) {
-      // console.log(params)
+      // console.log(params)  // { page: '', limit: '' }
       params = Object.assign(params, { content: this.content })
       this.fetchList(params)
     },
-    // 显示更新服务器dialog
-    async showUpdate(item) {
-      // console.log(item)
-      this.menuFormData = Object.assign(item, {
-        menuUrls: [
-          {
-            menuUrl: '',
-            urldesc: ''
-          }
-        ]
-      })
+
+    /**
+     * 显示dialog
+     * @param item 编辑的数据
+     * @returns {Promise<void>}
+     */
+    async showDialog(item) {
+      console.log(item)
       // 根据父id去发送请求
       const { list } = await getMenuListByParentId(item.parentId)
-      console.log(list)
-      const menuUrls = list.map(el => {
+      this.dialogFormVisible = true
+      // 将添加状态改为false，此时点击提交表单，发送的是修改请求
+      this.isAdd = false
+      // 等待dom更新完毕
+      await this.$nextTick()
+      /**
+       * 这里一定要等待dom更新完毕，然后再进行数据回显，
+       * 防止dialog中的el-form没有挂载完毕就对formData进行了赋值而导致el-form的resetFields方法不起效果
+       */
+      // 将数据复制一份，防止点击返回按钮的时候由于引用传值，而导致在表单重置的时候把该条数据清空了
+      this.formData = Object.assign({}, item)
+      this.$set(this.formData, 'menuUrls', list.map(el => {
         return {
           menuUrl: el.menuUrlDtos,
           urldesc: el.menuName
         }
-      })
-      this.menuFormData.menuUrls = menuUrls
-      this.dialogFormVisible = true
+      }))
     },
-    // 根据id删除服务器数据
+
+    /**
+     * 根据id删除菜单信息
+     * @param id
+     */
     del(id) {
       // 弹出提示框，询问是否确认删除
       this.$confirm('你将要删除一条数据, 是否继续?', '温馨提示', {
@@ -209,13 +227,12 @@ export default {
         cancelButtonText: '取消',
         type: 'error'
       }).then(async() => {
-        // 发送删除服务器信息请求
+        // 发送删除请求
         await delMenu(id)
         this.$message({
           type: 'success',
           message: '删除成功!'
         })
-        await this.fetchList({ page: this.currentPage, content: this.content })
         // 删除完后，如果当前页没有数据并且当前页不是第一页，那么就重新请求上一页的数据
         if (this.list.length === 0 && this.currentPage > 1) {
           this.currentPage -= 1
@@ -228,76 +245,87 @@ export default {
         })
       })
     },
-    // 搜索服务器数据
-    searchServer(content) {
-      // console.log(content)
+
+    /**
+     * 根据content查询服务器信息
+     * @param content
+     */
+    search(content) {
       this.fetchList({ content })
     },
+
+    /**
+     * 处理搜索框的输入
+     */
     async handleInputSearch() {
       // 当用户清除了搜索框中的文字时或者搜索框内容为空时，重新发送请求获取服务器列表数据
       if (!this.content) {
         await this.fetchList()
       }
     },
-    // dialog关闭时要做的事
-    close(formName) {
+
+    /**
+     * 点击返回按钮， 取消提交表单
+     * @param formRef 表单ref
+     */
+    cancelSubmitForm(formRef) {
+      // 清除校验的效果
+      this.$refs[formRef].resetFields()
       // 隐藏dialog
       this.dialogFormVisible = false
-      // 清空menuFormData
-      this.menuFormData = {
-        menuName: '',
-        menuUrls: [
-          {
-            menuUrl: '',
-            urldesc: ''
-          }
-        ],
-        parentId: '',
-        sort: ''
-      }
-      // 清除校验的效果
-      this.$refs[formName].resetFields()
     },
-    // 当搜索框点击清除按钮时
+
+    /**
+     * 当搜索框点击清除按钮时
+     */
     clearContent() {
-      // console.log(this.content)
       // 让当前的页码为1
       this.currentPage = 1
       this.fetchList({ content: this.content })
     },
-    submitForm(formName) {
+
+    /**
+     * 提交表单，添加或修改服务器信息
+     * @param formRef 表单ref
+     */
+    submitForm(formRef) {
       // 校验表单
-      this.$refs[formName].validate(async(valid) => {
-        // 通过就发送请求
+      this.$refs[formRef].validate(async(valid) => {
+        // 校验通过
         if (valid) {
           let res
-          if (this.menuFormData.id) {
-            res = await updateMenu(this.menuFormData)
+          if (this.isAdd) {
+            res = await addMenu(this.formData)
           } else {
-            res = await addMenu(this.menuFormData)
+            res = await updateMenu(this.formData)
           }
-          // console.log(res)
-
           // 提示添加成功
           this.$message.success(res.msg)
-          // 重新获取服务器列表的数据
+          // 重新获取服务器列表
           await this.fetchList({ page: this.currentPage, content: this.content })
           // 隐藏dialog
           this.dialogFormVisible = false
         } else {
-          // 不通过就停止发送请求
+          // 校验不通过
           console.log('error submit!!')
           return false
         }
       })
     },
-    // 删除一个menuUrl项
+
+    /**
+     * 删除一个menuUrl项
+     * @param index 从哪个位置删
+     */
     removeMenuUrl(index) {
-      this.menuFormData.menuUrls.splice(index, 1)
+      this.formData.menuUrls.splice(index, 1)
     },
-    // 增加一个menuUrl项
-    addMenuUrl(item) {
-      this.menuFormData.menuUrls.push({
+
+    /**
+     * 增加一个menuUrl项
+     */
+    addMenuUrl() {
+      this.formData.menuUrls.push({
         menuUrl: '',
         urldesc: ''
       })
@@ -309,25 +337,31 @@ export default {
 <style lang="scss" scoped>
 .menu-settings-container {
   padding-left: 30px;
+
   .header {
     padding-top: 30px;
     margin-bottom: 15px;
+
     ::v-deep .el-input {
       width: 300px;
     }
+
     .search {
       margin-left: 15px;
     }
+
     .add {
       float: right;
       margin-right: 30px;
     }
   }
+
   .inline-input {
     ::v-deep .el-input {
       width: 150px;
     }
   }
+
   ::v-deep .el-pagination {
     display: flex;
     justify-content: flex-end;