职级模块

src/views/modules/rank/tabs/RankForm.vue

@@ -9,19 +9,19 @@
       @keyup.enter.native="doSubmit"
       :visible.sync="visible">
       <el-form size="middle" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
-               label-width="100px" @submit.native.prevent>
-        <el-row  :gutter="15">
+                @submit.native.prevent>
+        <el-row  :gutter="30">
           <el-col :span="12">
             <el-form-item label="分组名称" prop="groupName"
                           :rules="[{required: true, message: '分组名称不能为空', trigger: 'blur'}
                  ]">
-              <el-input v-model="inputForm.groupName" placeholder="请填写分组名称"     ></el-input>
+              <el-input v-model="inputForm.groupName" placeholder="请填写分组名称"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="适用序列" prop="sequenceIdList" :rules="[
             {required: true, message: '适用序列不能为空', trigger: 'blur'}]">
-              <el-select v-model="inputForm.sequenceIdList" style="width:100%" multiple placeholder="请选择">
+              <el-select v-model="inputForm.sequenceIdList" style="width: 100%" multiple placeholder="请选择">
                 <el-option
                   v-for="sequence in sequenceList"
                   :key="sequence.id"
@@ -31,18 +31,66 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="21">
+          <el-col :span="12">
             <el-form-item label="状态" prop="useFlag"
                           :rules="[{required: true, message: '状态不能为空', trigger: 'blur'}
                  ]">
-              <el-radio v-model="inputForm.useFlag" label="1" size="mini" border>已启用</el-radio>
-              <el-radio v-model="inputForm.useFlag" label="2" size="mini" border>禁用</el-radio>
+              <div>
+                <el-radio style="margin-right: 0px" v-model="inputForm.useFlag" label="1" size="mini" border>启用</el-radio>
+                <el-radio v-model="inputForm.useFlag" label="2" size="mini" border>禁用</el-radio>
+              </div>
+
             </el-form-item>
           </el-col>
 
 
         </el-row>
+        <el-divider content-position="left"><i class="el-icon-document"></i> 职级信息</el-divider>
+        <vxe-toolbar style="margin-top: 20px">
+          <template #buttons>
+            <el-select size="small" @change="changeIsInclude" v-model="isInclude" style="margin-right: 20px">
+              <el-option :value="false" label="不包含子职级"></el-option>
+              <el-option :value="true" label="包含子职级"></el-option>
+            </el-select>
+            <el-button type="primary" size="small" icon="el-icon-plus" @click="addLine()">添加职级</el-button>
+          </template>
+        </vxe-toolbar>
+          <el-table ref="inputTable"  :data="inputForm.rankList" >
+            <el-table-column label="职级"  >
+              <template slot-scope="scope">
+                <el-form-item  :prop="'rankList.'+scope.$index+'.name'"  :rules="[{required: true, message: '职级不能为空', trigger: 'blur'}]">
+                  <el-input v-model="scope.row.name" placeholder="请输入职级" clearable></el-input>
+                </el-form-item>
+                  <el-table v-if="isInclude == true" ref="inputTable2" :show-header="false"  :data="inputForm.rankList[scope.$index].rankListChildren" >
+                    <el-table-column label="职级" >
+                      <template slot-scope="scope1">
+                        <el-form-item :prop="'rankList['+scope.$index+'].rankListChildren['+scope1.$index+'].name'" :rules="[{required: true, message: '子职级不能为空', trigger: 'blur'}]">
+                          <el-input v-model="scope1.row.name" placeholder="请输入子职级" clearable></el-input>
+                        </el-form-item>
+                      </template>
+                    </el-table-column>
+                    <el-table-column width="80" prop="" label="操作">
+                      <template scope="scope1">
+                        <el-form-item>
+                          <el-button v-if="inputForm.rankList[scope.$index].rankListChildren.length !== 1" size="small" type="danger" @click="delLine(scope.$index,scope1.$index)">删除</el-button>
+                        </el-form-item>
+                      </template>
+                    </el-table-column>
+                  </el-table>
 
+              </template>
+            </el-table-column>
+            <el-table-column width="150" prop="" label="操作">
+              <template scope="scope">
+                <div>
+                  <el-form-item >
+                  <el-button v-if="isInclude == true" size="small" type="primary" @click="addLine(scope.$index)">增加</el-button>
+                  <el-button size="small" type="danger" @click="delLine(scope.$index,null)">删除</el-button>
+                  </el-form-item>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
       </el-form>
       <span slot="footer" class="dialog-footer">
       <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
@@ -64,9 +112,11 @@
         inputForm: {
           groupName: '',
           sequenceIdList: [],
-          useFlag: ''
+          useFlag: '',
+          rankList: []
         },
-        sequenceList: []
+        sequenceList: [],
+        isInclude: false
       }
     },
     rankService: null,
@@ -81,15 +131,16 @@
         this.inputForm = {
           groupName: '',
           sequenceIdList: [],
-          useFlag: ''
+          useFlag: '',
+          rankList: []
         }
         this.inputForm.id = id
         if (method === 'add') {
-          this.title = `新建序列`
+          this.title = `新建职级`
         } else if (method === 'edit') {
-          this.title = '修改序列'
+          this.title = '修改职级'
         } else if (method === 'view') {
-          this.title = '查看序列'
+          this.title = '查看职级'
         }
         this.visible = true
         this.loading = false
@@ -100,6 +151,11 @@
             this.rankService.queryById(this.inputForm.id).then(({data}) => {
               this.inputForm = this.recover(this.inputForm, data)
               this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
+              this.inputForm.rankList.forEach(item => {
+                if (item.rankListChildren.length !== 0) {
+                  this.isInclude = true
+                }
+              })
               this.loading = false
             })
           }
@@ -107,6 +163,7 @@
       },
       // 表单提交
       doSubmit () {
+        console.log('inputForm', this.inputForm)
         this.$refs['inputForm'].validate((valid) => {
           if (valid) {
             this.loading = true
@@ -129,7 +186,52 @@
         this.rankService.queryAllSequence().then(({data}) => {
           this.sequenceList = JSON.parse(JSON.stringify(data))
         })
+      },
+      delLine (index, childIndex) {
+        if (childIndex !== null && childIndex !== undefined && childIndex !== '') {
+          this.inputForm.rankList[index].rankListChildren.splice(childIndex, 1)
+        } else {
+          this.inputForm.rankList.splice(index, 1)
+        }
+      },
+      addLine (rowIndex) {
+        const newLine = {
+          name: ''
+        }
+        if (rowIndex !== null && rowIndex !== undefined && rowIndex !== '') {
+          this.inputForm.rankList[rowIndex].rankListChildren.push(newLine)
+        } else {
+          this.inputForm.rankList.push(newLine)
+          this.$set(this.inputForm.rankList[this.inputForm.rankList.length - 1], 'rankListChildren', [{}])
+        }
+      },
+      changeIsInclude () {
+        if (this.isInclude === false) {
+          this.inputForm.rankList.forEach(item => {
+            item.rankListChildren = []
+          })
+        } else {
+          this.inputForm.rankList.forEach(item => {
+            item.rankListChildren = [{}]
+          })
+        }
       }
     }
   }
 </script>
+
+<style>
+  .el-table .cell .el-form-item {
+    margin-bottom: 2px
+  }
+  .el-divider__text {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .avatar{
+    height: 100px;
+  }
+  .el-table__body .el-table__row .el-table__cell{
+    padding: 1px;
+  }
+</style>

src/views/modules/rank/tabs/RankList.vue

@@ -46,7 +46,6 @@
           size="small"
           ref="rankTable"
           show-header-overflow
-          show-overflow
           highlight-hover-row
           :menu-config="{}"
           @sort-change="sortChangeHandle"
@@ -56,6 +55,17 @@
           <vxe-column type="seq" width="40"></vxe-column>
           <vxe-column type="checkbox" width="40" ></vxe-column>
           <vxe-column field="groupName" title="分组名称" :edit-render="{}"></vxe-column>
+          <vxe-column field="groupName" width="300px" title="职级" :edit-render="{}">
+            <template scope="scope">
+              <el-tree
+                :data="scope.row.rankList"
+                :props="defaultProps"
+                >
+<!--            默认展开树结构    el-table__cell-->
+              </el-tree>
+            </template>
+          </vxe-column>
+
           <vxe-column field="sequenceDTOList" title="适用序列" :edit-render="{}">
             <template scope="scope" >
               <el-tag v-for="(item, index) in scope.row.sequenceDTOList">{{item.name}}</el-tag>
@@ -67,7 +77,7 @@
               <el-tag type="danger" v-if="scope.row.useFlag === '2' ">禁用</el-tag>
             </template>
           </vxe-column>
-          <vxe-column title="操作" width="200px" fixed="right" align="center">
+          <vxe-column title="操作" width="" fixed="right" align="center">
             <template  slot-scope="scope">
 
               <el-button v-if="hasPermission('rank:rank:edit')" type="text" icon="el-icon-edit" size="small" @click="edit(scope.row.id)">修改</el-button>
@@ -107,6 +117,10 @@
     },
     data () {
       return {
+        defaultProps: {
+          children: 'rankListChildren',
+          label: 'name'
+        },
         sequenceList: [],
         searchForm: {
           groupName: '',