JeecgBoot 2.1.1 代码生成器AI版本发布

ant-design-vue-jeecg/src/components/jeecgbiz/modal/JSelectMultiUserModal.vue

@@ -1,274 +0,0 @@
-<template>
-  <a-modal
-    centered
-    :title="title"
-    :width="1000"
-    :visible="visible"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    cancelText="关闭">
-    <a-row :gutter="18">
-      <a-col :span="16">
-        <a-card title="选择人员" :bordered="true">
-          <!-- 查询区域 -->
-          <div class="table-page-search-wrapper">
-            <a-form layout="inline">
-              <a-row :gutter="24">
-
-                <a-col :span="10">
-                  <a-form-item label="姓名">
-                    <a-input placeholder="请输入姓名" v-model="queryParam.name"></a-input>
-                  </a-form-item>
-                </a-col>
-                <a-col :span="8" >
-                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-                    <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-                  </span>
-                </a-col>
-
-              </a-row>
-            </a-form>
-          </div>
-          <!-- table区域-begin -->
-          <div>
-            <a-table
-              size="small"
-              bordered
-              rowKey="id"
-              :columns="columns1"
-              :dataSource="dataSource1"
-              :pagination="ipagination"
-              :loading="loading"
-              :scroll="{ y: 240 }"
-              :rowSelection="{selectedRowKeys: selectedRowKeys,onSelectAll:onSelectAll,onSelect:onSelect,onChange: onSelectChange}"
-              @change="handleTableChange">
-
-            </a-table>
-          </div>
-          <!-- table区域-end -->
-        </a-card>
-      </a-col>
-      <a-col :span="8">
-        <a-card title="用户选择" :bordered="true">
-          <!-- table区域-begin -->
-          <div>
-            <a-table
-              size="small"
-              bordered
-              rowKey="id"
-              :columns="columns2"
-              :dataSource="dataSource2"
-              :loading="loading"
-              :scroll="{ y: 240 }"
-            >
-              <span slot="action" slot-scope="text, record">
-                <a-button type="primary" size="small" @click="handleDelete(record)" icon="delete">删除</a-button>
-              </span>
-            </a-table>
-          </div>
-          <!-- table区域-end -->
-        </a-card>
-      </a-col>
-    </a-row>
-  </a-modal>
-</template>
-
-<script>
-  import { filterObj } from '@/utils/util'
-  import { getAction } from '@/api/manage'
-
-  export default {
-    name: 'JSelectMultiUserModal',
-    data () {
-      return {
-        title: "用户列表",
-        names: [],
-        visible: false,
-        placement: 'right',
-        description: '人员管理页面',
-        // 查询条件
-        queryParam: {},
-        // 表头
-        columns1: [
-          {
-            title: '#',
-            dataIndex: '',
-            key:'rowIndex',
-            width:50,
-            align:"center",
-            customRender:function (t,r,index) {
-              return parseInt(index)+1;
-            }
-          },
-          {
-            title: '姓名',
-            align:"center",
-            width:113,
-            dataIndex: 'name'
-          },
-          {
-            title: '年龄',
-            align:"center",
-            width:100,
-            dataIndex: 'age'
-          },
-          {
-            title: '出生日期',
-            align:"center",
-            width:100,
-            dataIndex: 'birthday'
-          }
-        ],
-        columns2: [
-
-          {
-            title: '用户账号',
-            align:"center",
-            width:100,
-            dataIndex: 'name'
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            align:"center",
-            width:100,
-            scopedSlots: { customRender: 'action' },
-          }
-        ],
-        //数据集
-        dataSource1:[],
-        dataSource2:[],
-        // 分页参数
-        ipagination:{
-          current: 1,
-          pageSize: 10,
-          pageSizeOptions: ['10', '20', '30'],
-          showTotal: (total, range) => {
-            return range[0] + "-" + range[1] + " 共" + total + "条"
-          },
-          showQuickJumper: true,
-          showSizeChanger: true,
-          total: 0
-        },
-        isorter:{
-          column: 'createTime',
-          order: 'desc',
-        },
-        loading:false,
-        selectedRowKeys: [],
-        selectedRows: [],
-        url: {
-          list: "/test/jeecgDemo/list",
-        },
-
-      }
-    },
-    created() {
-      this.loadData();
-    },
-    methods: {
-      searchQuery(){
-        this.loadData(1);
-      },
-      searchReset(){
-        this.queryParam={};
-        this.loadData(1);
-      },
-      handleCancel() {
-        this.visible = false;
-      },
-      handleOk() {
-        this.$emit("selectFinished",this.dataSource2);
-        this.visible = false;
-      },
-      add() {
-        this.visible = true;
-      },
-      loadData (arg){
-        //加载数据 若传入参数1则加载第一页的内容
-        if(arg===1){
-          this.ipagination.current = 1;
-        }
-        var params = this.getQueryParams();//查询条件
-        getAction(this.url.list,params).then((res)=>{
-          if(res.success){
-            this.dataSource1 = res.result.records;
-            this.ipagination.total = res.result.total;
-          }
-        })
-      },
-      getQueryParams(){
-        var param = Object.assign({}, this.queryParam,this.isorter);
-        param.field = this.getQueryField();
-        param.pageNo = this.ipagination.current;
-        param.pageSize = this.ipagination.pageSize;
-        return filterObj(param);
-      },
-      getQueryField(){
-        //TODO 字段权限控制
-      },
-      onSelectAll (selected, selectedRows, changeRows) {
-        if(selected===true){
-          for(var a = 0;a<changeRows.length;a++){
-            this.dataSource2.push(changeRows[a]);
-          }
-        }else{
-          for(var b = 0;b<changeRows.length;b++){
-            this.dataSource2.splice(this.dataSource2.indexOf(changeRows[b]),1);
-          }
-        }
-        // console.log(selected, selectedRows, changeRows);
-      },
-      onSelect (record,selected) {
-        if(selected===true){
-          this.dataSource2.push(record);
-        }else{
-          var index = this.dataSource2.indexOf(record);
-          //console.log();
-          if(index >=0 ){
-            this.dataSource2.splice(this.dataSource2.indexOf(record),1);
-          }
-
-        }
-      },
-      onSelectChange (selectedRowKeys,selectedRows) {
-        this.selectedRowKeys = selectedRowKeys;
-        this.selectionRows = selectedRows;
-      },
-      onClearSelected(){
-        this.selectedRowKeys = [];
-        this.selectionRows = [];
-      },
-      handleDelete: function(record){
-        this.dataSource2.splice(this.dataSource2.indexOf(record),1);
-      },
-      handleTableChange(pagination, filters, sorter){
-        //分页、排序、筛选变化时触发
-        console.log(sorter);
-        //TODO 筛选
-        if (Object.keys(sorter).length>0){
-          this.isorter.column = sorter.field;
-          this.isorter.order = "ascend"==sorter.order?"asc":"desc"
-        }
-        this.ipagination = pagination;
-        this.loadData();
-      }
-    }
-  }
-</script>
-<style lang="less" scoped>
-  .ant-card-body .table-operator{
-    margin-bottom: 18px;
-  }
-  .ant-table-tbody .ant-table-row td{
-    padding-top:15px;
-    padding-bottom:15px;
-  }
-  .anty-row-operator button{margin: 0 5px}
-  .ant-btn-danger{background-color: #ffffff}
-
-  .ant-modal-cust-warp{height: 100%}
-  .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
-  .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
-</style>

ant-design-vue-jeecg/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue

@@ -15,9 +15,9 @@
           <!--组织机构-->
           <a-directory-tree
             selectable
-            :selectedKeys="selectedKeys"
+            :selectedKeys="selectedDepIds"
             :checkStrictly="true"
-            @select="this.onSelect"
+            @select="onDepSelect"
             :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
             :treeData="departTree"
           />
@@ -42,7 +42,7 @@
             :columns="columns"
             :dataSource="dataSource"
             :pagination="ipagination"
-            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}"
             @change="handleTableChange">
           </a-table>
         </a-card>
@@ -52,16 +52,17 @@
 </template>
 
 <script>
-  import { filterObj } from '@/utils/util'
-  import { queryDepartTreeList, getUserList, queryUserByDepId, queryUserRoleMap } from '@/api/api'
+  import {filterObj} from '@/utils/util'
+  import {queryDepartTreeList, getUserList, queryUserByDepId} from '@/api/api'
+
   export default {
     name: 'JSelectUserByDepModal',
     components: {},
-    props:['modalWidth'],
+    props: ['modalWidth', 'multi', 'userIds'],
     data() {
       return {
         queryParam: {
-          username:"",
+          username: "",
         },
         columns: [
           {
@@ -83,7 +84,7 @@
             title: '性别',
             align: 'center',
             dataIndex: 'sex',
-            customRender: function(text) {
+            customRender: function (text) {
               if (text === 1) {
                 return '男'
               } else if (text === 2) {
@@ -106,10 +107,9 @@
         ],
         scrollTrigger: {},
         dataSource: [],
-        selectedKeys: [],
-        userNameArr: [],
-        departName: '',
-        userRolesMap: {},
+        selectedRowKeys: [],
+        selectUserRows: [],
+        selectUserIds: [],
         title: '根据部门选择用户',
         ipagination: {
           current: 1,
@@ -126,53 +126,73 @@
           column: 'createTime',
           order: 'desc'
         },
-        selectedRowKeys: [],
-        selectedRows: [],
+        selectedDepIds: [],
         departTree: [],
         visible: false,
         form: this.$form.createForm(this)
       }
     },
+    computed: {
+      // 计算属性的 getter
+      getType: function () {
+        console.log("multi: ", this.multi);
+        return this.multi == true ? 'checkbox' : 'radio';
+      }
+    },
+    watch: {
+      userIds() {
+        this.initUserNames()
+      }
+    },
     created() {
       // 该方法触发屏幕自适应
       this.resetScreenSize();
-      this.queryUserRoleMap();
+      this.loadData().then((res) => {
+        this.initUserNames();
+      })
     },
     methods: {
-      loadData(arg) {
+      initUserNames() {
+        let names = ''
+        console.log("props userIds: ", this.userIds)
+        if (this.userIds) {
+          let currUserIds = this.userIds
+          for (let item of this.dataSource) {
+            if (currUserIds.indexOf(item.username) >= 0) {
+              names += "," + item.realname
+            }
+          }
+          if (names) {
+            names = names.substring(1)
+          }
+          this.$emit("initComp", names)
+        }
+      },
+      async loadData(arg) {
         if (arg === 1) {
           this.ipagination.current = 1;
         }
         let params = this.getQueryParams();//查询条件
-        getUserList(params).then((res) => {
+        await getUserList(params).then((res) => {
           if (res.success) {
             this.dataSource = res.result.records;
-            this.assignRoleName(this.dataSource);
             this.ipagination.total = res.result.total;
           }
         })
       },
-      queryUserRoleMap(){
-        queryUserRoleMap().then((res) => {
-          if (res.success) {
-            this.userRolesMap = res.result;
-            this.loadData();
-          }
-        })
-      },
       // 触发屏幕自适应
       resetScreenSize() {
         let screenWidth = document.body.clientWidth;
         if (screenWidth < 500) {
-          this.scrollTrigger = { x: 800 };
+          this.scrollTrigger = {x: 800};
         } else {
           this.scrollTrigger = {};
         }
       },
       showModal() {
         this.visible = true;
-        this.assignRoleName(this.dataSource);
         this.queryDepartTree();
+        this.loadData();
         this.form.resetFields();
       },
       getQueryParams() {
@@ -191,13 +211,13 @@
       },
       searchReset(num) {
         let that = this;
-        if(num !== 0){
+        if (num !== 0) {
           that.queryParam = {};
           that.loadData(1);
         }
         that.selectedRowKeys = [];
-        that.userNameArr = [];
-        that.selectedKeys = [];
+        that.selectUserIds = [];
+        that.selectedDepIds = [];
       },
       close() {
         this.searchReset(0);
@@ -214,27 +234,31 @@
       },
       handleSubmit() {
         let that = this;
-        for (let i = 0, len = this.selectedRowKeys.length; i < len; i++) {
-          this.getUserNames(this.selectedRowKeys[i]);
-        }
-        that.$emit('ok', that.userNameArr.join(','));
+        this.getSelectUserRows();
+        console.log(that.selectUserRows)
+        that.$emit('ok', that.selectUserRows, that.selectUserIds);
+        that.searchReset(0)
         that.close();
       },
-      // 遍历匹配,获取用户真实姓名
-      getUserNames(rowId) {
+      //获取选择用户信息
+      getSelectUserRows(rowId) {
         let dataSource = this.dataSource;
+        let userIds = "";
+        this.selectUserRows = [];
         for (let i = 0, len = dataSource.length; i < len; i++) {
-          if (rowId === dataSource[i].id) {
-            this.userNameArr.push(dataSource[i].realname);
+          if (this.selectedRowKeys.includes(dataSource[i].id)) {
+            this.selectUserRows.push(dataSource[i]);
+            userIds = userIds + "," + dataSource[i].username
           }
         }
+        this.selectUserIds = userIds.substring(1);
       },
       // 点击树节点,筛选出对应的用户
-      onSelect(selectedKeys) {
-        if (selectedKeys[0] != null) {
-          this.queryUserByDepId(selectedKeys); // 调用方法根据选选择的id查询用户信息
-          if (this.selectedKeys[0] !== selectedKeys[0]) {
-            this.selectedKeys = [selectedKeys[0]];
+      onDepSelect(selectedDepIds) {
+        if (selectedDepIds[0] != null) {
+          this.initQueryUserByDepId(selectedDepIds); // 调用方法根据选选择的id查询用户信息
+          if (this.selectedDepIds[0] !== selectedDepIds[0]) {
+            this.selectedDepIds = [selectedDepIds[0]];
           }
         }
       },
@@ -246,26 +270,14 @@
         this.loadData(1);
       },
       // 根据选择的id来查询用户信息
-      queryUserByDepId(selectedKeys) {
-        queryUserByDepId({ id: selectedKeys.toString() }).then((res) => {
+      initQueryUserByDepId(selectedDepIds) {
+        queryUserByDepId({id: selectedDepIds.toString()}).then((res) => {
           if (res.success) {
             this.dataSource = res.result;
             this.ipagination.total = res.result.length;
-            this.assignRoleName(this.dataSource);
           }
         })
       },
-      // 传入用户id,找到匹配的角色名称
-      queryUserRole(userId) {
-        let map = this.userRolesMap;
-        let roleName = [];
-        for (var key in map) {
-          if (userId === key) {
-            roleName.push(map[key]);
-          }
-        }
-        return roleName.join(',');
-      },
       queryDepartTree() {
         queryDepartTreeList().then((res) => {
           if (res.success) {
@@ -273,16 +285,6 @@
           }
         })
       },
-      // 为角色名称赋值
-      assignRoleName(data) {
-        let userId = '';
-        let role = '';
-        for (let i = 0, length = data.length; i < length; i++) {
-          userId = this.dataSource[i].id;
-          role = this.queryUserRole(userId);
-          this.dataSource[i].roleName = role;
-        }
-      },
       modalFormOk() {
         this.loadData();
       }