feat: 部署信息中的编辑功能完成

src/api/project.js

@@ -130,3 +130,26 @@ export const getProjectDeployListById = (id) => {
     }
   })
 }
+
+// 根据id查询项目部署信息
+export const getProjectDepById = (id) => {
+  return request({
+    url: '/projectdep/getProjectDepById',
+    method: 'POST',
+    data: {
+      reqdata: {
+        id
+      }
+    }
+  })
+}
+// 修改项目部署信息
+export const updateProjectDeploy = (data) => {
+  return request({
+    url: '/projectdep/update',
+    method: 'POST',
+    data: {
+      reqdata: data
+    }
+  })
+}

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

@@ -156,8 +156,7 @@
 </template>
 
 <script>
-import { updateServer } from '@/api/server'
-import { getProjectAndEnvList } from '@/api/project'
+import { getProjectAndEnvList, updateProjectDeploy } from '@/api/project'
 import { getProjectDeployList, addProjectDeploy, delProjectDeploy } from '@/api/project'
 import Pagination from '@/components/Pagination/index'
 export default {
@@ -342,7 +341,7 @@ export default {
         if (valid) {
           let res
           if (this.projectDeployFormData.id) {
-            res = await updateServer(this.projectDeployFormData)
+            res = await updateProjectDeploy(this.projectDeployFormData)
           } else {
             res = await addProjectDeploy(this.projectDeployFormData)
           }

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

@@ -20,7 +20,7 @@
       tooltip-effect="dark"
       :header-cell-style="{color: '#000', fontWeight: 700}"
       style="width: 100%"
-      @expand-change="handleRowClick"
+      @expand-change="handleExpand"
       @selection-change="handleSelectionChange"
     >
       <el-table-column
@@ -83,9 +83,7 @@
               align="center"
             >
               <template #default="scope">
-                <el-button type="text" :style="{color: '#1990FF'}" @click="showUpdate(scope.row)">编辑</el-button>
-                <el-divider direction="vertical" />  <!-- 中间的小竖线 -->
-                <el-button type="text" :style="{color: '#E51C23'}" @click="del(scope.row.id)">删除</el-button>
+                <el-button type="text" :style="{color: '#1990FF'}" @click="deployShowUpdate(scope.row)">编辑</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -238,6 +236,64 @@
         </el-form-item>
       </el-form>
     </el-dialog>
+
+    <!--  添加项目部署信息dialog  -->
+    <el-dialog :visible.sync="deployDialogFormVisible" width="600px" :close-on-click-modal="false" @close="deployClose('deployForm')">
+      <el-form ref="deployForm" :model="projectDeployFormData" label-width="140px" :rules="deployRules" label-position="right">
+        <el-form-item label="项目名" prop="projectId">
+          <el-select v-model.number="projectDeployFormData.projectId" placeholder="项目名/环境">
+            <el-option
+              v-for="item in envList"
+              :key="item.id"
+              :label="item.projectname + '/' + item.env"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="功能描述" prop="projectDesc">
+          <el-input v-model="projectDeployFormData.projectDesc" />
+        </el-form-item>
+        <el-form-item label="端口" prop="port">
+          <el-input v-model.number="projectDeployFormData.port" type="number" />
+        </el-form-item>
+        <el-form-item label="文件路径" prop="filepath">
+          <el-input v-model="projectDeployFormData.filepath" />
+        </el-form-item>
+        <el-form-item label="域名" prop="domain">
+          <el-input v-model="projectDeployFormData.domain" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="projectDeployFormData.remark" type="textarea" />
+        </el-form-item>
+        <el-form-item label="安装监控" prop="monitorjarState">
+          <el-select v-model.number="projectDeployFormData.monitorjarState">
+            <el-option
+              v-for="item in monitorjarStateList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="部署状态" prop="state">
+          <el-select v-model.number="projectDeployFormData.state">
+            <el-option
+              v-for="item in projectStateOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <template #default>
+            <el-button @click="deployClose('deployForm')">取 消</el-button>
+            <el-button type="primary" @click="deploySubmitForm('deployForm', projectDeployFormData.projectId)">确 认</el-button>
+          </template>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
@@ -248,12 +304,12 @@ import {
   updateProject,
   delProject,
   getProjectDeployListById,
-  getProjectAndEnvList
+  getProjectAndEnvList,
+  delProjectDeploy, getProjectDepById, updateProjectDeploy
 } from '@/api/project'
 import Pagination from '@/components/Pagination/index'
 import { getStaffList } from '@/api/staff'
 import { getServerList } from '@/api/server'
-
 export default {
   name: 'ProjectList',
   components: {
@@ -278,8 +334,20 @@ export default {
       currentPage: 1,
       // 总页数
       totalpages: 0,
+      // 安装监控状态列表
+      monitorjarStateList: [
+        {
+          label: '未安装',
+          value: 1
+        },
+        {
+          label: '已安装',
+          value: 2
+        }
+      ],
       // 控制dialog显示和隐藏
       dialogFormVisible: false,
+      deployDialogFormVisible: false,
       // 项目状态选项
       projectStateOptions: [
         {
@@ -320,6 +388,16 @@ export default {
         // 项目状态 1正常 2关闭 3交付 4暂停
         state: ''
       },
+      projectDeployFormData: {
+        domain: '',
+        filepath: '',
+        monitorjarState: 1,
+        port: '',
+        projectDesc: '',
+        projectId: '',
+        remark: '',
+        state: 1
+      },
       // 服务器信息表单校验规则
       rules: {
         env: [
@@ -358,6 +436,30 @@ export default {
             message: '项目状态不能为空'
           }
         ]
+      },
+      deployRules: {
+        filepath: [
+          {
+            required: true,
+            message: '文件路径不能为空'
+          }
+        ],
+        projectDesc: [
+          {
+            required: true,
+            message: '项目描述不能为空'
+          }
+        ],
+        projectId: [
+          {
+            required: true,
+            message: '项目id不能为空'
+          },
+          {
+            type: 'number',
+            message: '项目id必须为数字'
+          }
+        ]
       }
     }
   },
@@ -371,7 +473,7 @@ export default {
     handleSelectionChange() {
       console.log('handleSelectionChange')
     },
-    async handleRowClick(row, column, event) {
+    async handleExpand(row, column, event) {
       // console.log(row, column, event)
       const { list } = await getProjectDeployListById(row.id)
       console.log(list)
@@ -497,6 +599,71 @@ export default {
           return false
         }
       })
+    },
+    // 项目部署信息的删除功能
+    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: '已取消删除'
+        })
+      })
+    },
+    async deployShowUpdate(item) {
+      console.log(item.id)
+      const { object } = await getProjectDepById(item.id)
+      console.log(object)
+      this.projectDeployFormData = object
+      this.deployDialogFormVisible = true
+    },
+    deployClose(formName) {
+      // 隐藏dialog
+      this.deployDialogFormVisible = false
+      // 清空projectDeployFormData
+      this.projectDeployFormData = {}
+      // 清除校验的效果
+      this.$refs[formName].resetFields()
+    },
+    deploySubmitForm(formName, projectId) {
+      console.log(projectId)
+      // 校验表单
+      this.$refs[formName].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
+        } else {
+          // 不通过就停止发送请求
+          console.log('error submit!!')
+          return false
+        }
+      })
     }
   }
 }