feat: 职位设置的新增和编辑功能完成

src/api/system.js

@@ -122,3 +122,16 @@ export const delJob = (id) => {
     }
   })
 }
+
+// /position/getPositionPermissionsById
+export const getPositionPermissionsById = (id) => {
+  return request({
+    url: '/position/getPositionPermissionsById',
+    method: 'POST',
+    data: {
+      reqdata: {
+        id
+      }
+    }
+  })
+}

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

@@ -513,9 +513,10 @@ export default {
     },
     // 显示更新服务器dialog
     showUpdate(item) {
+      const server = this.serverList.find(el => el.ip === item.serverIp)
       this.projectFormData = Object.assign(item, {
         member: item.member.split(',').map(el => parseInt(el)),
-        serverId: this.serverList.find(el => el.ip === item.serverIp).id
+        serverId: server && server.id || ''
       })
       console.log(item)
       this.dialogFormVisible = true

src/views/system/job-settings/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>
 
     <!-- 表格数据展示区 -->
@@ -49,7 +49,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="showUpdate(scope.row.id)">编辑</el-button>
           <el-divider direction="vertical" />  <!-- 中间的小竖线 -->
           <el-button type="text" :style="{color: '#E51C23'}" @click="del(scope.row.id)">删除</el-button>
         </template>
@@ -71,30 +71,29 @@
         <el-form-item label="职位名" prop="positionName">
           <el-input v-model="serverFormData.positionName" />
         </el-form-item>
-        <el-form-item label="所属公司" prop="own">
-          <el-input v-model="serverFormData.own" />
+        <el-form-item label="菜单权限">
+          <el-tree
+            ref="tree"
+            :data="menuAuthorityList"
+            show-checkbox
+            node-key="id"
+            :default-expand-all="true"
+            :props="defaultProps"
+            @check="nodeChecked"
+          />
         </el-form-item>
-        <el-tree
-          ref="tree"
-          :data="data"
-          show-checkbox
-          default-expand-all
-          node-key="id"
-          highlight-current
-          :props="defaultProps"
-        />
-
         <el-form-item>
           <el-button @click="close('addServerForm')">取 消</el-button>
           <el-button type="primary" @click="submitForm('addServerForm')">确 认</el-button>
         </el-form-item>
       </el-form>
+      <el-button @click="$refs.tree.setCheckedKeys([9,10,11,12]);">通过 key 设置</el-button>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getJobList, addJob, delJob, updateJob, getMenuAuthorityList } from '@/api/system'
+import { getJobList, addJob, delJob, updateJob, getMenuAuthorityList, getPositionPermissionsById } from '@/api/system'
 import Pagination from '@/components/Pagination/index'
 export default {
   name: 'JobSettings',
@@ -103,51 +102,13 @@ export default {
   },
   data() {
     return {
-      data: [{
-        id: 1,
-        label: '一级 1',
-        children: [{
-          id: 4,
-          label: '二级 1-1',
-          children: [{
-            id: 9,
-            label: '三级 1-1-1'
-          }, {
-            id: 10,
-            label: '三级 1-1-2'
-          }]
-        }]
-      }, {
-        id: 2,
-        label: '一级 2',
-        children: [{
-          id: 5,
-          label: '二级 2-1'
-        }, {
-          id: 6,
-          label: '二级 2-2'
-        }]
-      }, {
-        id: 3,
-        label: '一级 3',
-        children: [{
-          id: 7,
-          label: '二级 3-1'
-        }, {
-          id: 8,
-          label: '二级 3-2'
-        }]
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      },
       // 搜索关键词
       content: '',
       // 服务器列表数据
       list: [],
       // 总条数
       totalrecords: 0,
+      isAdd: true,
       // 当前页
       currentPage: 1,
       // 总页数
@@ -160,83 +121,18 @@ export default {
         menuIds: [],
         urlIds: []
       },
-      tableData: [{
-        id: '12987122',
-        name: '王小虎',
-        amount1: '234',
-        amount2: '3.2',
-        amount3: 10
-      }, {
-        id: '12987123',
-        name: '王小虎',
-        amount1: '165',
-        amount2: '4.43',
-        amount3: 12
-      }, {
-        id: '12987124',
-        name: '王小虎',
-        amount1: '324',
-        amount2: '1.9',
-        amount3: 9
-      }, {
-        id: '12987125',
-        name: '王小虎',
-        amount1: '621',
-        amount2: '2.2',
-        amount3: 17
-      }, {
-        id: '12987126',
-        name: '王小虎',
-        amount1: '539',
-        amount2: '4.1',
-        amount3: 15
-      }],
       // 菜单权限列表
       menuAuthorityList: [],
+      defaultProps: {
+        children: 'childrenMenu',
+        label: 'menuName'
+      },
       // 服务器信息表单校验规则
       rules: {
-        cpu: [
-          {
-            required: true,
-            message: 'CPU核数不能为空'
-          },
-          {
-            type: 'number',
-            message: 'CPU核数必须为数字'
-          }
-        ],
-        memory: [
-          {
-            required: true,
-            message: '内存不能为空'
-          },
-          {
-            type: 'number',
-            message: '内存必须为数字'
-          }
-        ],
-        ip: [
-          {
-            required: true,
-            message: 'IP地址不能为空'
-          }
-        ],
-        osinfo: [
-          {
-            required: true,
-            message: '操作系统信息不能为空'
-          }
-        ],
-        own: [
+        positionName: [
           {
             required: true,
-            message: '拥有者不能为空'
-          }
-        ],
-        remark: [
-          {
-            required: true,
-            message: '备注不能为空'
+            message: '职位名称不能为空'
           }
         ]
       }
@@ -250,6 +146,29 @@ export default {
     handleSelectionChange() {
       console.log('handleSelectionChange')
     },
+    nodeChecked(a, { 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)
+          }
+        } else {
+          if (!urlIds.includes(el.id)) {
+            urlIds.push(el.id)
+          }
+        }
+      })
+      this.$set(this.serverFormData, 'menuIds', menuIds)
+      this.$set(this.serverFormData, 'urlIds', urlIds)
+      console.log(this.serverFormData)
+    },
     // 获取服务器列表数据
     async fetchList(params) {
       const res = await getJobList(params)
@@ -263,7 +182,19 @@ export default {
     // 获取菜单权限列表
     async fetchMenuAuthorityList() {
       const { list } = await getMenuAuthorityList()
+      // 针对获取回来的数据处理，符合el-tree的数据格式
+      list.forEach(el => {
+        const childrenMenu = el.childrenMenu
+        childrenMenu.forEach(el => {
+          el.childrenMenu = el.menuUrlDtoList.slice(0)
+          const childrenMenu = el.childrenMenu
+          childrenMenu.forEach(el => {
+            el.menuName = el.urldesc
+          })
+        })
+      })
       this.menuAuthorityList = list
+      console.log(list)
     },
     // 处理分页模块
     handlePaginate(params) {
@@ -272,10 +203,24 @@ export default {
       this.fetchList(params)
     },
     // 显示更新服务器dialog
-    showUpdate(item) {
+    async showUpdate(id) {
+      // 修改添加状态为修改状态
+      this.isAdd = false
       // console.log(item)
-      this.serverFormData = item
+      const { object } = await getPositionPermissionsById(id)
       this.dialogFormVisible = true
+      console.log(object)
+      this.serverFormData = {
+        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删除服务器数据
     del(id) {
@@ -321,8 +266,12 @@ export default {
       this.dialogFormVisible = false
       // 清空serverFormData
       this.serverFormData = {}
+      // 清空树状控件数据
+      this.$refs.tree.setCheckedKeys([])
       // 清除校验的效果
       this.$refs[formName].resetFields()
+      // 重新将添加的状态设置为true
+      this.isAdd = true
     },
     // 当搜索框点击清除按钮时
     clearContent() {
@@ -337,10 +286,10 @@ export default {
         // 通过就发送请求
         if (valid) {
           let res
-          if (this.serverFormData.id) {
-            res = await updateJob(this.serverFormData)
-          } else {
+          if (this.isAdd) {
             res = await addJob(this.serverFormData)
+          } else {
+            res = await updateJob(this.serverFormData)
           }
           // console.log(res)