成员管理 分配部门 部门搜索 添加 修改 导入人员 下载导入模板

 Source/plt-web/plt-web-ui/src/App.vue

@@ -32,7 +32,7 @@
  margin: 50px auto;
}
.avue-dialog .el-dialog{
  top:43%;
  top:50%;
  max-height: calc(100% - 100px);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, -50%);

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

@@ -25,7 +25,7 @@
// è§’色全查询
export function gridRoles(page,limit) {
  return request({
    url: "/api/roleQueryController/gridRoles",
    url: "/api/roleQueryController/refDataGrid",
    method: "get",
    params:{
      page,limit
@@ -101,3 +101,33 @@
    data:formData
  });
}

// ä¸‹è½½æ¨¡æ¿æŽ¥å£
export const download = (params) => {
  return request({
    url: '/api/userQueryController/downloadImportTemplate',
    method: 'get',
    headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
    responseType: 'blob',
    params
  })
}

//获取密码策略
export function departmentQueryController(params) {
  return request({
    url: "/api/departmentQueryController/refTree",
    method: "get",
    params
  });
}

//获取密码策略
export function saveUsersDepts(params) {
  return request({
    url: "/api/departmentQueryController/saveUsersDepts",
    method: "post",
    params
  });
}


 Source/plt-web/plt-web-ui/src/components/PLT-basic-component/Upload-files.vue

ÎļþÒÑɾ³ý

 Source/plt-web/plt-web-ui/src/components/PLT-basic-component/upload-file.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,146 @@
<template>
  <el-dialog
    v-dialogDrag
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :title="title"
    :visible.sync="visible"
    width="40%"
    append-to-body
    class="avue-dialog"
    style="margin-top: -20vh !important;"
  >
    <Divider left="30px" text="导入提示"></Divider>
    <ul>
      <li>
        è¯·ç‚¹å‡»æµè§ˆæ–‡ä»¶è¿›è¡Œä¸Šä¼ 
      </li>
    </ul>
    <Divider left="30px" text="选择文件后会自动上传"></Divider>
    <el-upload
      :action="fileUrl"
      :before-upload="beforeUpload"
      :data="fileData"
      :headers="uploadHeaders"
      :on-change="uploadChange"
      :on-error="onError"
      :on-success="onSuccess"
      :show-file-list="false"
      class="upload-demo">
      <el-button size="small" style="margin: 15px 35px" type="primary">浏览文件</el-button>
    </el-upload>
    <template #footer>
      <el-button size="small" @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
import {getToken} from "@/util/auth";
import func from "@/util/func";
import {validatenull} from "@/util/validate";

export default {
  name: "upload-file",
  props: {
    fileType: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: '上传文件'
    },
    fileUrl: {
      type: String,
      default: ''
    },
    fileData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      flga: true,
      pageLoading: null,
      downloadLoading: false,
      visible: false,
    }
  },
  created() {
  },
  watch: {
    visible: {
      handler(newval, oldval) {
        // console.log('newval',newval)
      }
    }
  },
  computed: {
    uploadHeaders() {
      return {
        "Authorizationtoken": getToken(),
      };
    },
  },
  methods: {
    //文件上传前
    async beforeUpload(file) {
      // èŽ·å–文件扩展名
      const fileExtension = file.name.split(".").pop().toLowerCase(); // è½¬æ¢ä¸ºå°å†™ä»¥é¿å…å¤§å°å†™ä¸åŒ¹é…çš„问题
      if (this.fileType) {
        if (!this.fileType.includes(fileExtension)) {
          // ä¸Šä¼ æ ¼å¼ä¸ç¬¦åˆè¦æ±‚，提示错误信息并取消上传
          this.$message.error(`只允许上传${this.fileType.toString()}格式的文件`);
          return Promise.reject(false);
        }
      }
      this.pageLoading = this.$loading({
        lock: true,
        text: "文件上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      return true;
    },
    // æ–‡ä»¶ä¸Šä¼ æˆåŠŸ
    onSuccess(resbonse) {
      console.log(resbonse);
      if (resbonse.code === 200) {
        this.$message.success("导入成功！");
        this.visible = false;
      } else {
        this.$message.error(resbonse.msg);
      }
    },
    //文件上传失败
    onError(res) {
      this.pageLoading.close();
      this.$message.error(res);
    },
    //文件状态改变
    uploadChange(file) {
      console.log( this.pageLoading);
      if (file.status === "success" || file.status === "error") {
        this.pageLoading.close();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
ul {
  color: rgb(188, 188, 188);
  margin: 20px 0 20px 0;
  padding: 0 0 0 30px;
  list-style: none;

  li {
    margin-bottom: 5px;
    font-size: 13px;
  }
}
</style>

 Source/plt-web/plt-web-ui/src/components/actions/base/uploadFile.vue

@@ -118,14 +118,13 @@
    async beforeUpload(file) {
      // èŽ·å–文件扩展名
      const fileExtension = file.name.split(".").pop().toLowerCase(); // è½¬æ¢ä¸ºå°å†™ä»¥é¿å…å¤§å°å†™ä¸åŒ¹é…çš„问题
      const allowedExtensions = this.paramVOS.fileType || ['css', 'csv', 'doc', 'gif', 'html', 'jpe', 'jpg', 'jpeg', 'png', 'js', 'json',
        'mp3', 'mp4', 'xlsx', 'xml', 'zip', 'xhtml', 'wps', 'ppt', 'xls', 'word', 'pdf', 'txt'];

      // æ£€æŸ¥æ–‡ä»¶æ‰©å±•åæ˜¯å¦åœ¨å…è®¸çš„文件扩展名数组中
      if (!allowedExtensions.includes(fileExtension)) {
        // ä¸Šä¼ æ ¼å¼ä¸ç¬¦åˆè¦æ±‚，提示错误信息并取消上传
        this.$message.error(`只允许上传${allowedExtensions.toString()}格式的文件`);
        return Promise.reject(false);
      if(this.paramVOS.fileType){
        if (!this.paramVOS.fileType.includes(fileExtension)) {
          // ä¸Šä¼ æ ¼å¼ä¸ç¬¦åˆè¦æ±‚，提示错误信息并取消上传
          this.$message.error(`只允许上传${this.paramVOS.fileType.toString()}格式的文件`);
          return Promise.reject(false);
        }
      }

      this.pageLoading = this.$loading({

 Source/plt-web/plt-web-ui/src/main.js

@@ -39,7 +39,7 @@
// å¯Œæ–‡æœ¬ç»„件
import richText from '@/components/PLT-basic-component/richText'
// ä¸Šä¼ æ–‡ä»¶ç»„件
import UploadFiles from  '@/components/PLT-basic-component/Upload-files'
import uploadFile from '@/components/PLT-basic-component/upload-file'
// è¡¨å•ä¸Šä¼ æ–‡ä»¶ç»„件
import formUpload from "@/components/PLT-basic-component/formUpload";
// ç©¿æ¢­æ¡†ç»„件
@@ -56,7 +56,7 @@
Vue.component('dynamicTableForm', dynamicTableForm);
Vue.component('dynamicForm', dynamicForm);
Vue.component('richText', richText);
Vue.component('UploadFiles', UploadFiles);
Vue.component('uploadFile', uploadFile);
Vue.component('formUpload', formUpload);
Vue.component('Divider', Divider);
Vue.component('transfer', transfer);

 Source/plt-web/plt-web-ui/src/util/basic-option.js

@@ -7,8 +7,11 @@
  searchIcon:true,
  selection:true,
  stripe:true,
  headerAlign: 'center',
  align: 'center',
  // selection æ˜¯å¦æœ‰é€‰æ‹©æ¡†
  // indexFixed:true/left/right, å›ºå®šåˆ—
  // menu:false, æ˜¯å¦æœ‰æ“ä½œæ 
  // menuTitle:xxx, æ“ä½œæ æ ‡é¢˜
  // stripe æ¡çº¹
}

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

@@ -2,6 +2,7 @@
  <basic-container>
    <avue-crud
      ref="userCrud"
      :before-open="beforeOpen"
      :data="tableData"
      :option="option"
      :page.sync="page"
@@ -16,8 +17,27 @@
      @row-click="rowClickHandler"
      @row-save="rowSaveHandler"
      @row-update="rowUpdateHandler"
      @row-del="rowDelHandler"
    >
      <!-- éƒ¨é—¨å¤´éƒ¨æœç´¢æ’槽  -->
      <template slot-scope="{disabled,size}" slot="pkDepartmentNameSearch">
        <div style="display: flex;gap: 5px">
          <el-select v-model="departSearchValue" clearable placeholder="请选择部门">
            <el-option :label="departSearchObj.name" :value="departSearchObj.oid"></el-option>
          </el-select>
          <el-button size="small" type="success" @click="dialogDepartSearchHandler">选择部门</el-button>
        </div>
      </template>

      <!-- å¯¹è¯æ¡†éƒ¨é—¨æ’槽     -->
      <template slot="pkDepartmentNameForm" slot-scope="scope">
        <div style="display: flex;gap: 5px">
          <el-select v-model="departValue" clearable placeholder="请选择部门">
            <el-option :label="departObj.name" :value="departObj.oid"></el-option>
          </el-select>
          <el-button size="small" type="success" @click="dialogDepartHandler">选择部门</el-button>
        </div>
      </template>

      <template slot="status" slot-scope="{row}">
        <el-tag v-if="row.status === 0" type="success">启用</el-tag>
        <el-tag v-if="row.status === 1" type="danger">停用</el-tag>
@@ -29,7 +49,9 @@
      </template>

      <template #menu="{row,index,size}">
        <el-button size="small" type="text" @click="stopUserHandler(row)">
        <el-button icon="el-icon-edit" size="small" type="text" @click.stop="rowEditHandler(row,index)">编辑</el-button>
        <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>
        </el-button>
@@ -38,12 +60,13 @@
      <template slot="menuLeft" slot-scope="scope">
        <el-button icon="el-icon-delete" plain size="small" type="danger" @click="allDelHandler">删除</el-button>
        <el-button icon="el-icon-user" plain size="small" type="primary" @click="roleHandler">分配角色</el-button>
        <el-button icon="el-icon-school" plain size="small" type="primary">分配部门</el-button>
        <el-button icon="el-icon-school" plain size="small" type="primary" @click="departmentHandler">分配部门</el-button>
        <el-button icon="el-icon-key" plain size="small" type="success" @click="setPwsHandler">设置密码策略</el-button>
        <el-button icon="el-icon-upload2" plain size="small" type="primary">导入人员</el-button>
        <el-button icon="el-icon-download" plain size="small" type="primary">下载导入模板</el-button>
        <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadRole">导入人员</el-button>
        <el-button icon="el-icon-download" plain size="small" type="primary" @click="downloadHandler">下载导入模板</el-button>
      </template>
    </avue-crud>

    <!-- åˆ†é…è§’色穿梭框   -->
    <transfer ref="transfer" :left-role-data="leftRoleData" :right-role-data="rightRoleData"
              :transferTitle="transferTitle" title="分配角色"
@@ -58,7 +81,7 @@
      :visible.sync="pwdVisible"
      append-to-body="true"
      class="avue-dialog"
      style="margin-top: -20vh !important;"
      style="margin-top: -15vh !important;"
      title="设置密码策略"
      width="30%"
    >
@@ -73,6 +96,33 @@
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="pwdVisible = false">取 æ¶ˆ</el-button>
        <el-button size="small" type="primary" @click="savePwdHandler">ç¡® å®š</el-button>
      </div>
    </el-dialog>

    <!-- å¯¼å…¥äººå‘˜   -->
    <upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" title="导入人员"></upload-file>

    <!-- åˆ†é…éƒ¨é—¨å¯¹è¯æ¡†    -->
    <el-dialog
      v-dialogDrag
      v-loading="departLoading"
      :destroy-on-close="true"
      :visible.sync="departVisible"
      append-to-body="true"
      class="avue-dialog"
      title="分配部门"
      width="50%"
    >
      <avue-crud
        ref="departCrud"
        :data="departData"
        :option="departOption"
        @current-row-change="handleCurrentRowChange"
      >
      </avue-crud>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="departVisible = false">取 æ¶ˆ</el-button>
        <el-button size="small" type="primary" @click="saveDepartHandler">ç¡® å®š</el-button>
      </div>
    </el-dialog>
  </basic-container>
@@ -90,15 +140,55 @@
  updateUser,
  deleteUser,
  selectPwdStrategyMap,
  saveUserPasswordStrateg
  saveUserPasswordStrateg,
  download,
  departmentQueryController,
  saveUsersDepts
} from '@/api/system/user/api'
import {column} from "./option"
import func from '@/util/func'

export default {
  name: "userManage",
  data() {
  data: function () {
    return {
      departSearchObj:{},
      departSearchValue:'',
      loadKey: 0,
      departStatus: '', // åŒºåˆ†ä¸åŒæ–¹å¼æ‰“开部门对话框
      departValue: '', // éƒ¨é—¨å¯¹è¯æ¡†ä¸‹æ‹‰æ¡†ç»‘定值
      departObj: {},  // éƒ¨é—¨å¯¹è¯æ¡†ä¸‹æ‹‰æ¡†é€‰é¡¹ç»‘定值
      departCurrenRow: {},
      departOption: {
        ...basicOption,
        rowKey: 'oid',
        rowParentKey: 'parentId',
        selection: false,
        highlightCurrentRow: true,
        stripe: false,
        menu: false,
        refreshBtn: false,
        gridBtn: false,
        column: [
          {
            label: '名称',
            prop: 'name',
          },
          {
            label: '编号',
            prop: 'id',
          },
          {
            label: '描述',
            prop: 'description',
          },
        ]
      },
      departData: [],
      departLoading: false,
      departVisible: false,
      upFileType: ['xls', 'xlsx'],
      fileUrl: 'api/userQueryController/importUser',
      pwdVisible: false,
      pwdLoading: false,
      pwdValue: '',
@@ -107,6 +197,8 @@
      tableData: [],
      option: {
        ...basicOption,
        editBtn: false,
        delBtn: false,
        dialogWidth: '50%',
        calcHeight: -60,
        column: column
@@ -127,6 +219,14 @@
  created() {
  },
  methods: {
    // æ–°å¢žæˆ–修改对话框打开前
    beforeOpen(done, type) {
      if(type == 'add'){
        this.departObj = {};
        this.departValue = "";
      }
      done();
    },
    // è¡¨æ ¼è¯·æ±‚
    getTableList() {
      this.tableLoading = true;
@@ -147,6 +247,11 @@

    // æœç´¢æŸ¥è¯¢
    handleSearch(params, done) {
      this.searchParams = {};
      if(this.departSearchObj && this.departSearchValue){
        this.searchParams['conditionMap["pkDepartment"]'] = this.departSearchValue;
      }

      if (!func.isEmptyObject(params)) {
        for (let key in params) {
          if (params.hasOwnProperty(key)) {
@@ -155,15 +260,20 @@
            this.searchParams[`conditionMap["${newKey}"]`] = params[key];
          }
        }
      } else {
      }

      if (func.isEmptyObject(params) && !this.departSearchValue) {
        this.searchParams = {};
      }

      this.getTableList();
      done();
    },

    // é‡ç½®æœç´¢æ¡ä»¶
    handleReset() {
      this.departSearchObj = {};
      this.departSearchValue = "";
      this.searchParams = {};
      this.getTableList();
    },
@@ -282,6 +392,7 @@
        this.$message.error('请检查两次密码是否输入一致！')
        return this.$refs.userCrud.$refs.dialogForm.$refs.tableForm.allDisabled = false;
      }
      row.pkDepartment = this.departValue; // å°†å½“前行的部门参数pkDepartment èµ‹å€¼ä¸ºä¸‹æ‹‰æ¡†ç»‘定的值
      addUser(row).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
@@ -293,12 +404,25 @@
      done()
    },

    // æ“ä½œæ ç¼–辑
    rowEditHandler(row, index) {
      let obj = { name: row.pkDepartmentName, oid: row.pkDepartment, rowOid: row.oid };
      this.departValue = row.pkDepartment;
      this.departObj = obj;

      if (this.departObj.rowOid) {
        this.$refs.userCrud.rowEdit(row, index);
      }

    },

    // ç¼–辑
    rowUpdateHandler(row, index, done) {
      if (row.password != row.confirmPassword) {
        this.$message.error('请检查两次密码是否输入一致！')
        return this.$refs.userCrud.$refs.dialogForm.$refs.tableForm.allDisabled = false;
      }
      row.pkDepartment = this.departValue; // å°†å½“前行的部门参数pkDepartment èµ‹å€¼ä¸ºä¸‹æ‹‰æ¡†ç»‘定的值
      updateUser(row).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
@@ -311,7 +435,7 @@
    },

    // åˆ é™¤
    rowDelHandler(row) {
    rowDeleteHandler(row) {
      let params = {
        ids: row.oid
      }
@@ -351,7 +475,119 @@
          message: '已取消删除'
        });
      });
    }
    },

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

    // å¯¼å…¥äººå‘˜
    uploadRole() {
      this.$refs.upload.visible = true;
    },

    // åˆ†é…éƒ¨é—¨
    departmentHandler() {
      if (this.selectList.length <= 0) {
        this.$message.warning('清先选择人员再进行操作！')
        return;
      }
      this.departStatus = 'default'; // åŒºåˆ†ä¸åŒæ–¹å¼æ‰“开部门对话框
      this.departmentQueryOnLoad();
    },

    // åˆ†é…éƒ¨é—¨è¡¨æ ¼åˆå§‹åŒ–请求
    departmentQueryOnLoad() {
      departmentQueryController({queryAllLevel: true}).then(res => {
        const data = res.data.treeData;
        this.departData = this.departDtaFormAtter(data);
        this.departVisible = true;
      }).catch(err => {
        this.$message.error(err);
      })
    },

    // åˆ†é…éƒ¨é—¨æ•°æ®è½¬æ¢
    departDtaFormAtter(items) {
      return items.map(item => {
        // è½¬æ¢å½“前节点的属性
        const formList = {
          oid: item.oid,
          id: item.attributes.id,
          name: item.attributes.name,
          description: item.attributes.description,
          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;
      });
    },

    // åˆ†é…éƒ¨é—¨ è¡Œå•é€‰
    handleCurrentRowChange(row) {
      this.departCurrenRow = row;
    },

    // åˆ†é…éƒ¨é—¨ ä¿å­˜
    saveDepartHandler() {
      if (func.isEmptyObject(this.departCurrenRow)) {
        this.$message.warning('请选择部门节点！')
        return;
      }

      if (this.departStatus == 'default') {
        let params = {
          userOIds: this.selectList.map(item => item.oid).join(','),
          deptId: this.departCurrenRow.oid,
        };
        saveUsersDepts(params).then(res => {
          if (res.data.code === 200) {
            this.departVisible = false;
            this.getTableList();
            this.$message.success('分配成功！')
          }
        }).catch(err => {
          console.log(err);
        })
        return;
      }

      if (this.departStatus == 'handle') {
        this.departObj = this.departCurrenRow;
        this.departValue = this.departCurrenRow.oid;
        this.departVisible = false;
        return;;
      }

      if(this.departStatus == 'search'){
        this.departSearchObj =  this.departCurrenRow;
        this.departSearchValue =  this.departCurrenRow.oid;
        this.departVisible = false;
        return;
      }
    },

    // å¯¹è¯æ¡†åˆ†é…éƒ¨é—¨æŒ‰é’®
    dialogDepartHandler() {
      this.departmentQueryOnLoad();
      this.departStatus = 'handle'; // åŒºåˆ†ä¸åŒæ–¹å¼æ‰“开部门对话框
    },

    // æœç´¢å¯¹è¯æ¡†åˆ†é…éƒ¨é—¨æŒ‰é’®
    dialogDepartSearchHandler(){
      this.departmentQueryOnLoad();
      this.departStatus = 'search'; // åŒºåˆ†ä¸åŒæ–¹å¼æ‰“开部门对话框
    },
  }

}

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

@@ -2,7 +2,6 @@
  {
    label: '账号',
    prop: 'id',
    align:'center',
    search:true,
    sortable:true,
    rules: [
@@ -16,7 +15,6 @@
  {
    label: '姓名',
    prop: 'name',
    align:'center',
    search:true,
    sortable:true,
    rules: [
@@ -61,7 +59,6 @@
  {
    label: '状态',
    prop: 'status',
    align: 'center',
    display:false,
    sortable:true,
    slot: true,
@@ -75,7 +72,6 @@
  {
    label: '锁定状态',
    prop: 'lockFlag',
    align:'center',
    sortable:true,
    display:false,
  },
@@ -86,20 +82,18 @@
    search:true,
    sortable:true,
    searchslot:true,
    row:true,
    formslot:true,
  },
  {
    label: '专业',
    prop: 'specialties',
    align:'center',
    sortable:true,
  },
  {
    label: '角色',
    prop: 'pkPersonName',
    align:'center',
    type:'select',
    dicUrl: 'api/roleQueryController/gridRoles',
    dicUrl: 'api/roleQueryController/refDataGrid',
    props: {
      label: 'name',
      value: 'oid'
@@ -112,27 +106,26 @@
  {
    label: '电子邮件',
    prop: 'email',
    align:'center',
    sortable:true,
    overHidden: true,
    row:true
  },
  {
    label: '描述',
    type:'textarea',
    prop: 'description',
    align:'center',
    sortable:true,
    overHidden: true,
  },
  {
    label: '部门领导',
    prop: 'isDeptLeader',
    align:'center',
    sortable:true,
    display:false,
  },
  {
    label: '所属密级',
    prop: 'secretGradeText',
    align:'center',
    sortable:true,
    display:false,
  },