使用ruo-yi框架增加部门展示(非树)示例

若依默认展示的是树形结构,对于我的使用场景不符合,增加一个展示非树结构的部门

下面是详细步骤

1.首先增加查询一级部门的接口

1.1controller

    /**
     * 查询一级部门
     */
    @PreAuthorize("@ss.hasPermi('system:dept:list')")
    @GetMapping("/listLevelOneDept")
    public AjaxResult listLevelOneDept()
    {
        List<SysDept> depts = deptService.selectLevelOneDeptList();
        return success(depts);
    }

1.2service 

    /**
     * 查询一级部门
     * @return 一级部门
     */
    List<SysDept> selectLevelOneDeptList();

1.3serviceImpl

    /**
     * 查询一级部门
     * @return 一级部门
     */
    @Override
    public List<SysDept> selectLevelOneDeptList() {
        List<SysDept> children = deptMapper.selectLevelOneDeptList();
        return children;
    }

1.4mapper

    /**
     * 查询一级部门
     * @return 一级部门
     */
    List<SysDept> selectLevelOneDeptList();

1.5xml

	<select id="selectLevelOneDeptList" resultMap="SysDeptResult">
		select * from sys_dept where parent_id="100"
	</select>

2.增加组件

2.1dept.js新增如下方法

// 查询一级部
export function listLevelOneDept(query) {
  return request({
    url: '/system/dept/listLevelOneDept',
    method: 'get',
    params: query
  })
}

2.2增加组件DeptTag

内容如下

<template>
  <div>
    <template v-for="(item, index) in options">
      <template v-if="values.includes(''+item.deptId+'')">
        <span
          v-if="true"
          :key="item.deptId"
          :index="index"
          :class=null
        >{{ item.deptName + ' ' }}</span
        >
        <el-tag
          v-else
          :disable-transitions="true"
          :key="item.deptId"
          :index="index"
          :type="true"
          :class=null
        >
          {{ item.deptName + ' ' }}
        </el-tag>
      </template>
    </template>
    <template v-if="unmatch && showValue">
      {{ unmatchArray | handleArray }}
    </template>
  </div>
</template>

<script>
export default {
  name: "DeptTag",
  props: {
    options: {
      type: Array,
      default: null,
    },
    value: [Number, String, Array],
    // 当未找到匹配的数据时，显示value
    showValue: {
      type: Boolean,
      default: true,
    },
    separator: {
      type: String,
      default: ","
    }
  },
  data() {
    return {
      unmatchArray: [], // 记录未匹配的项
    }
  },
  computed: {
    values() {
      if (this.value === null || typeof this.value === 'undefined' || this.value === '') return []
      return Array.isArray(this.value) ? this.value.map(item => '' + item) : String(this.value).split(this.separator)
    },
    unmatch() {
      this.unmatchArray = []
      // 没有value不显示
      if (this.value === null || typeof this.value === 'undefined' || this.value === '' || this.options.length === 0) return false
      console.log("values:",this.values)
      console.log("options:",this.options)
      // 传入值为数组
      let unmatch = false // 添加一个标志来判断是否有未匹配项
      this.values.forEach(item => {

        if (!this.options.some(v => v.deptId == item)) {
          this.unmatchArray.push(item)
          console.log("unmatchArray:"+this.unmatchArray)
          unmatch = true // 如果有未匹配项，将标志设置为true
        }
      })
      return unmatch // 返回标志的值
    },

  },
  filters: {
    handleArray(array) {
      if (array.length === 0) return '';
      console.log("array:",array);
      console.log("pre:",pre);
      return array.reduce((pre, cur) => {
        return pre + ' ' + cur;
      })
    },
  }
};
</script>
<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>

3.使用

3.1页面引入新组件

import { listLevelOneDept } from "@/api/system/dept";
import DeptTag from '@/components/DeptTag/index.vue'

3.2增加一级部参数

export default {
  components: { DeptTag },

  data() {
    return {
      // 一级部门
      levelOneDept:[]
    }

3.3初始化的时候获取一级部

在created方法中新增如下内容

    listLevelOneDept(this.queryParams).then(response => {
      this.levelOneDept = response.data;
    });

3.4在搜索框使用

      <el-form-item label="所属部门" prop="belongDeptId">
         <el-select v-model="form.belongDeptId" placeholder="请选择所属部门">
            <el-option
              v-for="dept in levelOneDept"
              :key="dept.deptId"
              :label="dept.deptName"
              :value="dept.deptId"
            ></el-option>
         </el-select>
      </el-form-item>

3.5新增/编辑使用

        <el-form-item label="所属部门" prop="belongDeptId">
         <el-select v-model="form.belongDeptId" placeholder="请选择所属部门">
            <el-option
              v-for="dept in levelOneDept"
              :key="dept.deptId"
              :label="dept.deptName"
              :value="dept.deptId"
            ></el-option>
         </el-select>

3.6在列表使用

      <el-table-column label="所属部门" align="center" prop="belongDeptId" >
        <template slot-scope="scope">
          <dept-tag :options="levelOneDept" :value="scope.row.belongDeptId"/>
        </template>
      </el-table-column>

4.最终效果

4.1搜索框

4.2列表

4.3添加/编辑