职级体系

src/api/rank/RankSequenceService.js

@@ -8,6 +8,13 @@ export default class RankSequenceService {
       params: params
     })
   }
+  getList (params) {
+    return request({
+      url: '/rank/rank_sequence/getList',
+      method: 'get',
+      params: params
+    })
+  }
   queryById (id) {
     return request({
       url: '/rank/rank_sequence/queryById',

src/views/modules/rank/Rank.vue

@@ -19,9 +19,9 @@
           :index="activeName"
         />
       </el-tab-pane>
-      <el-tab-pane label="体系表" name="systemTable" style="height: calc(100vh - 210px)" lazy>
+      <el-tab-pane label="体系表" name="rankSystemTable" style="height: calc(100vh - 210px)" lazy>
         <system-table
-          i="systemTable"
+          i="rankSystemTable"
           :index="activeName"
         />
       </el-tab-pane>
@@ -29,18 +29,20 @@
   </div>
 </template>
 <script>
+  import rankSystemTable from './tabs/RankSystemTable'
   import rankSequence from './tabs/RankSequenceList'
   import rankLevel from './tabs/RankLevelList'
   import rank from './tabs/RankList'
   export default {
     components: {
+      rankSystemTable,
       rankSequence,
       rankLevel,
       rank
     },
     data () {
       return {
-        activeName: 'rankSequence'
+        activeName: 'rankSystemTable'
       }
     },
     created () {

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

@@ -127,6 +127,7 @@
     },
     methods: {
       init (method, id) {
+        this.isInclude = false
         this.method = method
         this.inputForm = {
           groupName: '',

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

@@ -55,13 +55,13 @@
           <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="{}">
+          <vxe-column field="rankList" title="职级" :edit-render="{}">
             <template scope="scope">
               <el-tree
                 :data="scope.row.rankList"
                 :props="defaultProps"
-                >
-<!--            默认展开树结构    el-table__cell-->
+                default-expand-all>
+<!--            默认展开树结构    default-expand-all-->
               </el-tree>
             </template>
           </vxe-column>

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

@@ -4,43 +4,81 @@
       :title="title"
       :close-on-click-modal="false"
       v-dialogDrag
-      width="1000px"
+      width="1200px"
       @close="close"
       @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">
-          <el-col :span="21">
-            <el-form-item label="序列名称" prop="name"
-                          :rules="[{required: true, message: '序列名称不能为空', trigger: 'blur'}
-                 ]">
-              <el-input v-model="inputForm.name" placeholder="请填写序列名称"     ></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="21">
-            <el-form-item label="适用范围" prop="officeIdList" :rules="[]">
-              <el-select v-model="inputForm.officeIdList" style="width:100%" multiple placeholder="请选择">
-                <el-option
-                  v-for="office in firmList"
-                  :key="office.id"
-                  :label="office.name"
-                  :value="office.id">
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="21">
-            <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>
-            </el-form-item>
-          </el-col>
-
+      <el-form  size="middle" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
+                @submit.native.prevent>
+        <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.rankSequenceDTOList" >
+          <el-table-column label="序列"  >
+            <template slot-scope="scope">
+              <el-form-item  :prop="'rankSequenceDTOList.'+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.rankSequenceDTOList[scope.$index].rankSequenceDTOList" >
+                <el-table-column label="职级" >
+                  <template slot-scope="scope1">
+                    <el-form-item :prop="'rankSequenceDTOList['+scope.$index+'].rankSequenceDTOList['+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.rankSequenceDTOList[scope.$index].rankSequenceDTOList.length !== 1" size="small" type="danger" @click="delLine(scope.$index,scope1.$index)">删除</el-button>
+                    </el-form-item>
+                  </template>
+                </el-table-column>
+              </el-table>
 
-        </el-row>
+            </template>
+          </el-table-column>
+          <el-table-column width="250" prop="" label="适用范围">
+            <template scope="scope">
+              <el-form-item :prop="'rankSequenceDTOList.'+scope.$index+'.officeIdList'" :rules="[]">
+                <el-select v-model="inputForm.rankSequenceDTOList[scope.$index].officeIdList" style="width:100%" multiple placeholder="请选择">
+                  <el-option
+                    v-for="office in firmList"
+                    :key="office.id"
+                    :label="office.name"
+                    :value="office.id">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column width="200" prop="" label="状态">
+            <template scope="scope">
+              <el-form-item :prop="'rankSequenceDTOList.'+scope.$index+'.useFlag'"
+                            :rules="[{required: true, message: '状态不能为空', trigger: 'blur'}
+                 ]">
+                <el-radio v-model="inputForm.rankSequenceDTOList[scope.$index].useFlag" label="1" size="mini" style="margin-right: 0px" border>启用</el-radio>
+                <el-radio v-model="inputForm.rankSequenceDTOList[scope.$index].useFlag" label="2" size="mini" border>禁用</el-radio>
+              </el-form-item>
+            </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">
@@ -61,10 +99,9 @@
         visible: false,
         loading: false,
         inputForm: {
-          name: '',
-          officeIdList: [],
-          useFlag: ''
+          rankSequenceDTOList: []
         },
+        isInclude: false,
         firmList: []
       }
     },
@@ -75,33 +112,19 @@
     mounted () {
     },
     methods: {
-      init (method, id) {
-        this.method = method
-        this.inputForm = {
-          name: '',
-          officeIdList: [],
-          useFlag: ''
-        }
-        this.inputForm.id = id
-        if (method === 'add') {
-          this.title = `新建序列`
-        } else if (method === 'edit') {
-          this.title = '修改序列'
-        } else if (method === 'view') {
-          this.title = '查看序列'
-        }
+      init () {
+        this.title = '编辑序列'
         this.visible = true
-        this.loading = false
-        this.$nextTick(() => {
-          this.$refs.inputForm.resetFields()
-          if (method === 'edit' || method === 'view') { // 修改或者查看
-            this.loading = true
-            this.rankSequenceService.queryById(this.inputForm.id).then(({data}) => {
-              this.inputForm = this.recover(this.inputForm, data)
-              this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
-              this.loading = false
-            })
-          }
+        this.loading = true
+        this.isInclude = false
+        this.rankSequenceService.getList().then(({data}) => {
+          this.inputForm.rankSequenceDTOList = data
+          this.inputForm.rankSequenceDTOList.forEach(item => {
+            if (item.rankSequenceDTOList.length !== 0) {
+              this.isInclude = true
+            }
+          })
+          this.loading = false
         })
       },
       // 表单提交
@@ -109,7 +132,7 @@
         this.$refs['inputForm'].validate((valid) => {
           if (valid) {
             this.loading = true
-            this.rankSequenceService.save(this.inputForm).then(({data}) => {
+            this.rankSequenceService.save(this.inputForm.rankSequenceDTOList).then(({data}) => {
               this.close()
               this.$message.success(data)
               this.$emit('refreshDataList')
@@ -128,7 +151,43 @@
         this.rankSequenceService.queryAllFirm().then(({data}) => {
           this.firmList = JSON.parse(JSON.stringify(data))
         })
+      },
+      changeIsInclude () {
+        if (this.isInclude === false) {
+          this.inputForm.rankSequenceDTOList.forEach(item => {
+            item.rankSequenceDTOList = []
+          })
+        } else {
+          this.inputForm.rankSequenceDTOList.forEach(item => {
+            item.rankSequenceDTOList = [{}]
+          })
+        }
+      },
+      delLine (index, childIndex) {
+        if (childIndex !== null && childIndex !== undefined && childIndex !== '') {
+          this.inputForm.rankSequenceDTOList[index].rankSequenceDTOList.splice(childIndex, 1)
+        } else {
+          this.inputForm.rankSequenceDTOList.splice(index, 1)
+        }
+      },
+      addLine (rowIndex) {
+        const newLine = {}
+        if (rowIndex !== null && rowIndex !== undefined && rowIndex !== '') {
+          this.inputForm.rankSequenceDTOList[rowIndex].rankSequenceDTOList.push(newLine)
+        } else {
+          this.inputForm.rankSequenceDTOList.push(newLine)
+          this.$set(this.inputForm.rankSequenceDTOList[this.inputForm.rankSequenceDTOList.length - 1], 'rankSequenceDTOList', [{}])
+        }
       }
     }
   }
 </script>
+
+
+<style>
+  .el-table__row .el-table__cell .el-form-item__error{
+    top: 55%;
+    margin-left: 2%;
+  }
+
+</style>

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

@@ -29,7 +29,7 @@
     <div class="bg-white top" style="">
       <vxe-toolbar :refresh="{query: refreshList}" custom>
         <template #buttons>
-          <el-button v-if="hasPermission('rank:rank_sequence:add')" type="primary" size="small" icon="el-icon-plus" @click="add()">新建</el-button>
+          <el-button v-if="hasPermission('rank:rank_sequence:add')" type="primary" size="small" icon="el-icon-plus" @click="add()">编辑</el-button>
           <el-button v-if="hasPermission('rank:rank_sequence:del')" type="danger"   size="small" icon="el-icon-delete" @click="del()" :disabled="$refs.rankSequenceTable && $refs.rankSequenceTable.getCheckboxRecords().length === 0" plain>删除</el-button>
           <el-button type="default" size="small"  @click="goLog()"  disabled plain>变更日志</el-button>
           <el-button v-if="hasPermission('rank:rank_sequence:view')" disabled type="default" size="small"  @click="openSortDialog"  plain>排序</el-button>
@@ -46,7 +46,6 @@
           size="small"
           ref="rankSequenceTable"
           show-header-overflow
-          show-overflow
           highlight-hover-row
           :menu-config="{}"
           @sort-change="sortChangeHandle"
@@ -55,7 +54,15 @@
           :checkbox-config="{}">
           <vxe-column type="seq" width="40"></vxe-column>
           <vxe-column type="checkbox" width="40" ></vxe-column>
-          <vxe-column field="name" title="序列名称" :edit-render="{}"></vxe-column>
+          <vxe-column field="name" title="序列名称" :edit-render="{}">
+            <template scope="scope">
+              <el-tree
+                :data="scope.row.rankSequenceDTOList"
+                :props="defaultProps"
+                default-expand-all>
+              </el-tree>
+            </template>
+          </vxe-column>
           <vxe-column field="officeList" title="适用范围" :edit-render="{}">
             <template scope="scope" >
                 <el-tag v-for="(item, index) in scope.row.officeList">{{item.name}}</el-tag>
@@ -69,8 +76,6 @@
           </vxe-column>
           <vxe-column title="操作" width="200px" fixed="right" align="center">
             <template  slot-scope="scope">
-
-              <el-button v-if="hasPermission('rank:rank_sequence:edit')" type="text" icon="el-icon-edit" size="small" @click="edit(scope.row.id)">修改</el-button>
               <el-button v-if="hasPermission('rank:rank_sequence:del')" type="text"  icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button>
             </template>
           </vxe-column>
@@ -88,12 +93,14 @@
       </div>
     </div>
     <RankSequenceForm  ref="rankSequenceForm" @refreshDataList="refreshList"></RankSequenceForm>
+    <SortTableDialog ref="sortTableDialog" @refreshDataList="refreshList" @dataSort="dataSort"></SortTableDialog>
   </div>
 </template>
 
 <script>
   import RankSequenceService from '@/api/rank/RankSequenceService'
   import RankSequenceForm from './RankSequenceForm'
+  import SortTableDialog from '../../../common/SortTableDialog'
   export default {
     props: {
       index: {
@@ -116,6 +123,10 @@
           pageSize: 10,
           orders: []
         },
+        defaultProps: {
+          children: 'rankSequenceDTOList',
+          label: 'name'
+        },
         loading: false,
         firmList: []
       }
@@ -133,7 +144,8 @@
       }
     },
     components: {
-      RankSequenceForm
+      RankSequenceForm,
+      SortTableDialog
     },
     mounted () {
       this.refreshList()
@@ -145,20 +157,7 @@
       },
       // 新增
       add () {
-        this.$refs.rankSequenceForm.init('add', '')
-        this.$refs.rankSequenceForm.getAllFirm()
-      },
-      // 修改
-      edit (id) {
-        id = id || this.$refs.rankSequenceTable.getCheckboxRecords().map(item => {
-          return item.id
-        })[0]
-        this.$refs.rankSequenceForm.init('edit', id)
-        this.$refs.rankSequenceForm.getAllFirm()
-      },
-      // 查看
-      view (id) {
-        this.$refs.rankSequenceForm.init('view', id)
+        this.$refs.rankSequenceForm.init()
         this.$refs.rankSequenceForm.getAllFirm()
       },
       // 获取数据列表