成员管理表格查询 增删改 分配成员 统计 下载导入模板

 Source/plt-web/plt-web-ui/src/api/system/departMent/api.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,89 @@
import request from '@/router/axios';

// åˆ—表查询
export function refTree(params) {
  return request({
    url: "/api/departmentQueryController/refTree",
    method: "get",
    params
  });
}

// æ–°å¢ž
export function addDept(params) {
  return request({
    url: "/api/departmentQueryController/addDept",
    method: "post",
    data:params
  });
}

// ä¿®æ”¹
export function updateDept(params) {
  return request({
    url: "/api/departmentQueryController/updateDept",
    method: "put",
    data:params
  });
}

// ä¿®æ”¹
export function deleteDept(params) {
  return request({
    url: "/api/departmentQueryController/deleteDept",
    method: "delete",
    params
  });
}

// ç»Ÿè®¡
export function countSmUserByDeptOid(params) {
  return request({
    url: "/api/userQueryController/countSmUserByDeptOid",
    method: "get",
    params
  });
}

// å¾…选人员查询
export function listUserUnInDeptOid(params) {
  return request({
    url: "/api/userQueryController/listUserUnInDeptOid",
    method: "get",
    params
  });
}

// å·²é€‰äººå‘˜æŸ¥è¯¢
export function listUserByDeptOid(params) {
  return request({
    url: "/api/userQueryController/listUserByDeptOid",
    method: "get",
    params
  });
}

// å·²é€‰äººå‘˜æŸ¥è¯¢
export function saveUsersDepts(params) {
  let formData = new FormData;
  for (let key in params){
    formData.append(key,params[key])
  }
  return request({
    url: "/api/departmentQueryController/saveUsersDepts",
    method: "post",
    data:formData
  });
}

// ä¸‹è½½
export const download = (params) => {
  return request({
    url: '/api/departmentQueryController/downloadImportTemplate',
    method: 'get',
    headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
    responseType: 'blob',
    params
  })
}


 Source/plt-web/plt-web-ui/src/views/system/department/index.vue

@@ -1,15 +1,353 @@
<template>
  <basic-container>
    <avue-crud
      ref="departCrud"
      :data="tableData"
      :option="option"
      :page.sync="page"
      :table-loading="tableLoading"
      @on-load="getTableList"
      @refresh-change="handleRefresh"
      @selection-change="selectChange"
      @row-save="rowSaveHandler"
      @row-update="rowUpdateHandler"
      @row-del="rowDeleteHandler"
      @current-row-change="handleCurrentRowChange"
    >
      <template slot="menu" slot-scope="{row,size,type}">
        <el-button icon="el-icon-circle-plus-outline" size="small" type="text" @click="handleAdd()">新增子级</el-button>
        <el-button v-if="row.ALLDept !== 'ALLDept'" icon="el-icon-edit" size="small" type="text"
                   @click="editBtnClick(row)">编辑
        </el-button>
        <el-button v-if="row.ALLDept !== 'ALLDept'" icon="el-icon-delete" size="small" type="text"
                   @click="rowDeleteHandler(row)">删除
        </el-button>
      </template>

      <template slot="menuLeft" slot-scope="scope">
        <el-button icon="el-icon-school" plain size="small" type="primary" @click="assignMembersHandler">分配成员</el-button>
        <el-button icon="el-icon-user" plain size="small" type="primary" @click="statisticsHandler">统计</el-button>
        <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="statisticsHandler">导入部门</el-button>
        <el-button icon="el-icon-download" plain size="small" type="primary" @click="downLoadHandler">下载导入模板</el-button>
      </template>
    </avue-crud>

    <!-- ç»Ÿè®¡å¯¹è¯æ¡†   -->
    <el-dialog
      v-dialogDrag
      v-loading="statisticsLoading"
      :destroy-on-close="true"
      :visible.sync="statisticsVisible"
      append-to-body="true"
      class="avue-dialog"
      title="人员信息"
      width="50%"
    >
      <avue-crud
        :data="countData"
        :option="countOption"
      >
      </avue-crud>
      <div slot="footer" class="dialog-footer" style="display: flex;gap: 20px;justify-content: center">
        <div>
          <el-tag>当前角色总人数: {{ this.countData.length }}</el-tag>
        </div>
        <el-button icon="el-icon-close" size="small" type="danger" @click="statisticsVisible = false">关 é—­</el-button>
      </div>
    </el-dialog>


    <!-- åˆ†é…æˆå‘˜ç©¿æ¢­æ¡†   -->
    <transfer ref="transfer" :left-role-data="leftTransferData" :right-role-data="rightTransferData"
              :transferTitle="transferTitle" title="部门添加成员"
              @transferSend="departTransferSend">
    </transfer>

  </basic-container>
</template>

<script>
import {
  refTree,
  addDept,
  updateDept,
  deleteDept,
  countSmUserByDeptOid,
  listUserUnInDeptOid,
  listUserByDeptOid,
  saveUsersDepts,
  download
} from "@/api/system/departMent/api";
import basicOption from '@/util/basic-option';
import {column} from './option'
import func from "@/util/func";

export default {
  name: "departmentManage",
  data() {
    return {
      tableData: [],
      option: {
        ...basicOption,
        rowKey: 'oid',
        rowParentKey: 'parentId',
        selection: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        gridBtn: false,
        highlightCurrentRow: true,
        column: column
      },
      tableLoading: false,
      departCurrenRow: {},
      parentId: '',
      statisticsLoading: false,
      statisticsVisible: false,
      countData: [],
      countOption: {
        ...basicOption,
        selection: false,
        refreshBtn: false,
        addBtn: false,
        menu: false,
        column: [
          {
            label: '部门',
            prop: 'pkDepartmentName',
            sortable: true,
          },
          {
            label: '用户名',
            prop: 'id',
            sortable: true,
          },
          {
            label: '真实姓名',
            prop: 'name',
            sortable: true,
          },
          {
            label: '角色',
            prop: 'pkPersonName',
            sortable: true,
          },
        ]
      },
      leftTransferData: [],
      rightTransferData: [],
      transferTitle: ['待选人员', '已选人员'],
    }
  },
  methods: {
    // è¡¨æ ¼åˆå§‹åŒ–请求
    getTableList() {
      refTree({queryAllLevel: true, 'extandParamsMap[showAllDepartmentNode]': true}).then(res => {
        this.tableData = this.departDtaFormAtter(res.data.treeData);
      })
    },

    // åˆ†é…éƒ¨é—¨æ•°æ®è½¬æ¢
    departDtaFormAtter(items) {
      return items.map(item => {
        // è½¬æ¢å½“前节点的属性
        const formList = {
          oid: item.oid,
          id: item.attributes.id,
          name: item.attributes.name,
          description: item.attributes.description,
          code: item.attributes.code,
          specialties: item.attributes.specialties,
          uniqueId: item.attributes.uniqueId,
          ALLDept: item.attributes.ALLDept ? item.attributes.ALLDept : "",
          parentId: item.parentId,
          parentName: item.parentName,
          parentBtmName: item.parentBtmName,
          // å¦‚æžœchildren存在且不为空，则递归转换children
          children: item.children && item.children.length > 0 ? this.departDtaFormAtter(item.children) : undefined
        };
        return formList;
      });
    },

    // åˆ—头刷新
    handleRefresh() {
      this.getTableList();
    },

    // ä¸‹æ‹‰
    selectChange() {

    },

    // è¡¨æ ¼è¡Œæ–°å¢žå­çº§
    handleAdd() {
      this.$refs.departCrud.rowAdd();
    },

    // æ·»åŠ 
    rowSaveHandler(row, done, loading) {
      row = {...row, ...{pkFatherDepartment: this.parentId}};
      addDept(row).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTableList();
          done();
        }
      }).catch(err => {
        console.log(err);
        loading();
      })

    },

    // ç¼–辑按钮点击事件
    editBtnClick(row) {
      this.$refs.departCrud.rowEdit(row);
    },

    // ç¼–辑
    rowUpdateHandler(row, index, done, loading) {
      let params = {
        name: row.name,
        id: row.id,
        code: row.code,
        specialties: row.specialties,
        description: row.description,
        oid: row.oid
      }
      updateDept(params).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTableList();
          done();
        }
      }).catch(err => {
        console.log(err);
        loading();
      })
    },

    // åˆ é™¤
    rowDeleteHandler(row) {
      let params = {
        ids: row.oid
      }

      this.$confirm('您确定要删除当前部门吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDept(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getTableList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // è¡¨æ ¼è¡Œ è¡Œå•é€‰
    handleCurrentRowChange(row) {
      // å•ç‹¬æ·»åŠ  ALLDept å±žæ€§åˆ¤æ–­æ˜¯å¦æ˜¯é¡¶å±‚节点所有部门
      if (row.ALLDept === "ALLDept") {
        this.parentId = "";
      } else {
        this.parentId = row.oid;
      }

      this.departCurrenRow = row;
    },
    // ç»Ÿè®¡
    statisticsHandler() {
      console.log(this.departCurrenRow);
      if (func.isEmptyObject(this.departCurrenRow)) {
        this.$message.warning('请选择部门！');
        return
      }

      countSmUserByDeptOid({pkDepartment: this.departCurrenRow.ALLDept === 'ALLDept' ? null : this.departCurrenRow.oid}).then(res => {
        console.log(res);
        if (res.data.code === 200) {
          const data = res.data.data;
          this.countData = data.map(item => {
            return {
              pkDepartmentName: item.pkDepartmentName,
              name: item.name,
              id: item.id,
              pkPersonName: item.pkPersonName
            }
          });
          this.statisticsVisible = true;
        }
      }).catch(err => {
        console.log(err)
      })
    },

    // åˆ†é…æˆå‘˜
    assignMembersHandler() {
      if (func.isEmptyObject(this.departCurrenRow)) {
        this.$message.error('请选择部门节点');
        return
      }
      if (this.departCurrenRow.ALLDept === "ALLDept") {
        this.$message.error('此节点为部门标识，不能执行分配成员操作，请选择其他节点！')
        return
      }

      Promise.all([
        listUserUnInDeptOid({pkDepartment: this.departCurrenRow.oid}),
        listUserByDeptOid({pkDepartment: this.departCurrenRow.oid})
      ]).then(([unInRoleRes, byRoleRes]) => {
        if (unInRoleRes.data.code === 200 && byRoleRes.data.code === 200) {
          const leftData = [...unInRoleRes.data.data, ...byRoleRes.data.data];
          // ç»„装好穿梭框可用数据
          this.leftTransferData = leftData.map(item => {
            return {
              name: item.name + `(${item.id})`,
              oid: item.oid
            }
          })
          this.rightTransferData = byRoleRes.data.data.map(item => item.oid);
          this.$refs.transfer.visible = true;
        }
      }).catch(err => {
        console.error(err);
      });
    },

    // åˆ†é…æˆå‘˜ç©¿æ¢­æ¡†å›žå¡«
    departTransferSend(row) {
      let params = {
        userOids: row.join(','),
        deptId: this.departCurrenRow.oid
      }
      saveUsersDepts(params).then(res => {
        console.log(res);
        this.$message.success(res.data.obj);
        this.getTableList();
      }).catch(err => {
        console.log(err);
      })
    },

    // ä¸‹è½½å¯¼å…¥æ¨¡æ¿
    downLoadHandler(){
      download().then(res => {
        func.downloadFileByBlobHandler(res);
        this.$message.success('下载成功')
      }).catch(err => {
        this.$message.error(err);
      })
    }
  }
}
</script>


 Source/plt-web/plt-web-ui/src/views/system/department/option.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,34 @@
export const column = [
  {
    label: '名称',
    prop: 'name',
    rules: [
      {
        required: true,
        message: '请输入名称',
        trigger: 'blur'
      }
    ]
  },
  {
    label: '编号',
    prop: 'id',
  },
  {
    label: '代号',
    prop: 'code'
  },
  {
    label:'专业',
    prop: 'specialties'
  },
  {
    label:'部门唯一标识ID',
    prop: 'uniqueId',
    display:false,
  },
  {
    label: '描述',
    prop: 'description',
  },
];

 Source/plt-web/plt-web-ui/src/views/system/role/index.vue

@@ -177,30 +177,34 @@
    },

    // æ·»åŠ 
    rowSaveHandler(row, done) {
    rowSaveHandler(row, done,loading) {
      delete row.roleClassifyText;
      addRole(row).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTableList();
          done();
        }
      }).catch(err =>{
        console.log(err);
        loading();
      })
      done();
    },

    // ç¼–辑
    rowUpdateHandler(row, index, done) {
    rowUpdateHandler(row, index, done,loading) {
      delete row.roleClassifyText;
      updateRole(row).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTableList();
          done();
        }
      }).catch(err => {
        loading();
        console.log(err);
      });
      done()
    },

    // åˆ é™¤
@@ -208,14 +212,24 @@
      let params = {
        ids: row.oid
      }
      deleteRole(params).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTableList();
        }
      }).catch(err => {
        console.log(err);
      })

      this.$confirm('您确定要删除当前角色吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRole(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getTableList();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // å¤šé€‰åˆ é™¤

 Source/plt-web/plt-web-ui/src/views/system/user/index.vue

@@ -53,7 +53,7 @@
        <el-button icon="el-icon-delete" size="small" type="text" @click.stop="rowDeleteHandler(row)">删除</el-button>
        <el-button size="small" type="text" @click.stop="stopUserHandler(row)">
          <span v-if="row.status === 0" style="color: #fa3434"><i class="el-icon-video-pause"></i> åœç”¨</span>
          <span v-if="row.status === 1" style="color: #55b61d"><i class="el-icon-video-pause"></i> å¯ç”¨</span>
          <span v-if="row.status === 1" style="color: #55b61d"><i class="el-icon-video-play"></i> å¯ç”¨</span>
        </el-button>
      </template>

@@ -387,7 +387,7 @@
    },

    // æ–°å¢ž
    rowSaveHandler(row, done) {
    rowSaveHandler(row, done,loading) {
      if (row.password != row.confirmPassword) {
        this.$message.error('请检查两次密码是否输入一致！')
        return this.$refs.userCrud.$refs.dialogForm.$refs.tableForm.allDisabled = false;
@@ -397,11 +397,12 @@
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTableList();
          done()
        }
      }).catch(err => {
        loading()
        console.log(err);
      })
      done()
    },

    // æ“ä½œæ ç¼–辑
@@ -417,7 +418,7 @@
    },

    // ç¼–辑
    rowUpdateHandler(row, index, done) {
    rowUpdateHandler(row, index, done,loading) {
      if (row.password != row.confirmPassword) {
        this.$message.error('请检查两次密码是否输入一致！')
        return this.$refs.userCrud.$refs.dialogForm.$refs.tableForm.allDisabled = false;
@@ -427,11 +428,12 @@
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTableList();
          done()
        }
      }).catch(err => {
        loading()
        console.log(err);
      });
      done()
    },

    // åˆ é™¤
@@ -439,14 +441,24 @@
      let params = {
        ids: row.oid
      }
      deleteUser(params).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTableList();
        }
      }).catch(err => {
        console.log(err);
      })

      this.$confirm('您确定要删除当前的成员吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getTableList();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // å¤šé€‰åˆ é™¤

 Source/plt-web/plt-web-ui/src/views/system/user/option.js

@@ -80,6 +80,8 @@
    align:'center',
    search:true,
    sortable:true,
    overHidden: true,
    width:200,
  },
  {
    label: '专业',