refactor: server模块文件和样式优化

src/api/server.js

@@ -16,7 +16,7 @@ export const getServerList = (data = {}) => {
   })
 }
 
-// 添加服务器信息
+// 添加服务器
 export const addServer = (data) => {
   return request({
     url: '/server/insert',
@@ -27,7 +27,7 @@ export const addServer = (data) => {
   })
 }
 
-// 更新服务器信息
+// 更新服务器
 export const updateServer = (data) => {
   return request({
     url: '/server/update',
@@ -38,7 +38,7 @@ export const updateServer = (data) => {
   })
 }
 
-// 删除服务器信息
+// 删除服务器
 export const delServer = (serverId) => {
   return request({
     url: '/server/delete',

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

@@ -10,7 +10,7 @@
         @clear="clearContent"
       />
       <el-button class="search" @click="searchServer(content)">搜索</el-button>
-      <el-button type="primary" class="add" @click="dialogFormVisible = true"> 新增服务器 </el-button>
+      <el-button type="primary" class="add" @click="dialogFormVisible = isAdd = true"> 新增服务器 </el-button>
     </div>
 
     <!-- 表格数据展示区 -->
@@ -19,8 +19,7 @@
       :data="list"
       tooltip-effect="dark"
       style="width: 100%"
-      :header-cell-style="{color: '#000', fontWeight: 700}"
-      @selection-change="handleSelectionChange"
+      :header-cell-style="{background:'#fafafa',color:'#000', fontWeight: 700, borderTop: '1px solid #ebeef5'}"
     >
       <el-table-column
         type="selection"
@@ -63,7 +62,7 @@
         prop="remark"
       >
         <template #default="scope">
-          {{ scope.row.remark ? scope.row.remark : '暂无备注' }}
+          {{ scope.row.remark }}
         </template>
       </el-table-column>
       <el-table-column
@@ -81,14 +80,14 @@
         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>
       </el-table-column>
     </el-table>
 
-    <!--  分页模块  -->
+    <!--  分页模块，总页数大于0的情况下显示  -->
     <pagination
       v-show="totalpages>0"
       :total="totalrecords"
@@ -98,29 +97,29 @@
     />
 
     <!--  添加服务器信息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('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="serverFormData.ip" />
+          <el-input v-model="formData.ip" />
         </el-form-item>
         <el-form-item label="所属公司" prop="own">
-          <el-input v-model="serverFormData.own" />
+          <el-input v-model="formData.own" />
         </el-form-item>
         <el-form-item label="操作系统" prop="osinfo">
-          <el-input v-model="serverFormData.osinfo" />
+          <el-input v-model="formData.osinfo" />
         </el-form-item>
         <el-form-item label="CPU核数" prop="cpu">
-          <el-input v-model.number="serverFormData.cpu" type="number" />
+          <el-input v-model.number="formData.cpu" type="number" />
         </el-form-item>
         <el-form-item label="内存大小" prop="memory">
-          <el-input v-model.number="serverFormData.memory" type="number" />
+          <el-input v-model.number="formData.memory" type="number" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="serverFormData.remark" type="textarea" />
+          <el-input v-model="formData.remark" type="textarea" />
         </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('form')">提交</el-button>
+          <el-button @click="cancelSubmitForm('form')">返回</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -141,6 +140,8 @@ export default {
       content: '',
       // 服务器列表数据
       list: [],
+      // 控制添加还是修改
+      isAdd: true,
       // 总条数
       totalrecords: 0,
       // 当前页
@@ -149,8 +150,8 @@ export default {
       totalpages: 0,
       // 控制dialog显示和隐藏
       dialogFormVisible: false,
-      // 服务器信息
-      serverFormData: {
+      // 表单数据对象
+      formData: {
         ip: '',
         own: '',
         osinfo: '',
@@ -158,7 +159,7 @@ export default {
         memory: '',
         remark: ''
       },
-      // 服务器信息表单校验规则
+      // 校验规则
       rules: {
         cpu: [
           {
@@ -205,32 +206,50 @@ 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 getServerList(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 getServerList(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
-    showUpdate(item) {
-      // console.log(item)
-      this.serverFormData = 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 = item
     },
-    // 根据id删除服务器数据
+
+    /**
+     * 根据id删除服务器信息
+     * @param id
+     */
     del(id) {
       // 弹出提示框，询问是否确认删除
       this.$confirm('你将要删除一条数据, 是否继续?', '温馨提示', {
@@ -244,7 +263,6 @@ export default {
           type: 'success',
           message: '删除成功!'
         })
-        await this.fetchList({ page: this.currentPage, content: this.content })
         // 删除完后，如果当前页没有数据并且当前页不是第一页，那么就重新请求上一页的数据
         if (this.list.length === 0 && this.currentPage > 1) {
           this.currentPage -= 1
@@ -257,54 +275,68 @@ export default {
         })
       })
     },
-    // 搜索服务器数据
+
+    /**
+     * 根据content查询服务器信息
+     * @param content
+     */
     searchServer(content) {
-      // console.log(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
-      // 清空serverFormData
-      this.serverFormData = {}
-      // 清除校验的效果
-      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.serverFormData.id) {
-            res = await updateServer(this.serverFormData)
+          if (this.formData.id) {
+            res = await updateServer(this.formData)
           } else {
-            res = await addServer(this.serverFormData)
+            res = await addServer(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
         }