Jeecg-Boot 2.1.4 版本发布 | 重构较大,较多新功能

ant-design-vue-jeecg/src/views/system/modules/UserModal.vue

@@ -36,8 +36,8 @@
           </a-form-item>
         </template>
 
-        <a-form-item label="用户名字" :labelCol="labelCol" :wrapperCol="wrapperCol" >
-          <a-input placeholder="请输入用户名称" v-decorator="[ 'realname', validatorRules.realname]" />
+        <a-form-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" >
+          <a-input placeholder="请输入用户姓名" v-decorator="[ 'realname', validatorRules.realname]" />
         </a-form-item>
 
         <a-form-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol">
@@ -71,23 +71,33 @@
             <a-button slot="enterButton" icon="search">选择</a-button>
           </a-input-search>
         </a-form-item>
-        <a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <a-upload
-            listType="picture-card"
-            class="avatar-uploader"
-            :showUploadList="false"
-            :action="uploadAction"
-            :data="{'isup':1}"
-            :headers="headers"
-            :beforeUpload="beforeUpload"
-            @change="handleChange"
+       <!-- update--begin--autor:wangshuai-----date:20200108------for：新增身份和负责部门------ -->
+        <a-form-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-radio-group
+            v-model="identity"
+            @change="identityChange">
+            <a-radio value="1">普通用户</a-radio>
+            <a-radio value="2">上级</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="负责部门" :labelCol="labelCol" :wrapperCol="wrapperCol"  v-if="departIdShow==true">
+          <a-select
+            mode="multiple"
+            style="width: 100%"
+            placeholder="请选择负责部门"
+            v-model="departIds"
+            optionFilterProp = "children"
+            :getPopupContainer = "(target) => target.parentNode"
+            :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
           >
-            <img v-if="picUrl" :src="getAvatarView()" alt="头像" style="height:104px;max-width:300px"/>
-            <div v-else>
-              <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
-              <div class="ant-upload-text">上传</div>
-            </div>
-          </a-upload>
+            <a-select-option v-for="item in resultDepartOptions" :key="item.key" :value="item.key"
+            >{{item.title}}</a-select-option
+            >
+          </a-select>
+        </a-form-item>
+        <!-- update--end--autor:wangshuai-----date:20200108------for：新增身份和负责部门------ -->
+        <a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <j-image-upload class="avatar-uploader" text="上传" v-model="fileList" ></j-image-upload>
         </a-form-item>
 
         <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
@@ -145,10 +155,12 @@
   import {addUser,editUser,queryUserRole,queryall } from '@/api/api'
   import { disabledAuthFilter } from "@/utils/authFilter"
   import {duplicateCheck } from '@/api/api'
+  import JImageUpload from '../../../components/jeecg/JImageUpload'
 
   export default {
     name: "UserModal",
     components: {
+      JImageUpload,
       departWindow,
       JSelectPosition
     },
@@ -164,6 +176,7 @@
         checkedDepartKeys:[],
         checkedDepartNames:[], // 保存部门的名称 =>title
         checkedDepartNameString:"", // 保存部门的名称 =>title
+        resultDepartOptions:[],
         userId:"", //保存用户id
         disableSubmit:false,
         userDepartModel:{userId:'',departIdList:[]}, // 保存SysUserDepart的用户部门中间表数据需要的对象
@@ -213,6 +226,8 @@
             ]
           }
         },
+        departIdShow:false,
+        departIds:[], //负责部门id
         title:"操作",
         visible: false,
         model: {},
@@ -233,11 +248,13 @@
         picUrl: "",
         url: {
           fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
-          imgerver: window._CONFIG['domianURL']+"/sys/common/view",
+          imgerver: window._CONFIG['staticDomainURL'],
           userWithDepart: "/sys/user/userDepartList", // 引入为指定用户查看部门信息需要的url
           userId:"/sys/user/generateUserId", // 引入生成添加用户情况下的url
           syncUserByUserName:"/process/extActProcess/doSyncUserByUserName",//同步用户到工作流
         },
+        identity:"1",
+        fileList:[],
       }
     },
     created () {
@@ -287,6 +304,9 @@
           this.checkedDepartNames=[];
           this.checkedDepartNameString = "";
           this.userId=""
+          this.resultDepartOptions=[];
+          this.departId=[];
+          this.departIdShow=false;
       },
       add () {
         this.picUrl = "";
@@ -301,7 +321,9 @@
         that.form.resetFields();
         if(record.hasOwnProperty("id")){
           that.loadUserRoles(record.id);
-          this.picUrl = "Has no pic url yet";
+          setTimeout(() => {
+            this.fileList = record.avatar;
+          }, 5)
         }
         that.userId = record.id;
         that.visible = true;
@@ -309,6 +331,14 @@
         that.$nextTick(() => {
           that.form.setFieldsValue(pick(this.model,'username','sex','realname','email','phone','activitiSync','workNo','telephone','post'))
         });
+        //身份为上级显示负责部门，否则不显示
+        if(this.model.identity=="2"){
+            this.identity="2";
+            this.departIdShow=true;
+        }else{
+            this.identity="1";
+            this.departIdShow=false;
+        }
         // 调用查询用户对应的部门信息的方法
         that.checkedDepartKeys = [];
         that.loadCheckedDeparts();
@@ -320,10 +350,25 @@
         getAction(that.url.userWithDepart,{userId:that.userId}).then((res)=>{
           that.checkedDepartNames = [];
           if(res.success){
+            var depart=[];
+            var departId=[];
             for (let i = 0; i < res.result.length; i++) {
               that.checkedDepartNames.push(res.result[i].title);
               this.checkedDepartNameString = this.checkedDepartNames.join(",");
               that.checkedDepartKeys.push(res.result[i].key);
+              //新增负责部门选择下拉框
+              depart.push({
+                  key:res.result[i].key,
+                  title:res.result[i].title
+              })
+              departId.push(res.result[i].key)
+            }
+            that.resultDepartOptions=depart;
+            //判断部门id是否存在，不存在择直接默认当前所在部门
+            if(this.model.departIds){
+                this.departIds=this.model.departIds.split(",");
+            }else{
+                this.departIds=departId;
             }
             that.userDepartModel.departIdList = that.checkedDepartKeys
           }else{
@@ -341,6 +386,11 @@
         this.checkedDepartNameString='';
         this.checkedDepartKeys = [];
         this.selectedDepartKeys = [];
+        this.resultDepartOptions=[];
+        this.departIds=[];
+        this.departIdShow=false;
+        this.identity="1";
+        this.fileList=[];
       },
       moment,
       handleSubmit () {
@@ -350,17 +400,22 @@
         this.form.validateFields((err, values) => {
           if (!err) {
             that.confirmLoading = true;
-            let avatar = that.model.avatar;
             if(!values.birthday){
               values.birthday = '';
             }else{
               values.birthday = values.birthday.format(this.dateFormat);
             }
             let formData = Object.assign(this.model, values);
-            formData.avatar = avatar;
+            formData.avatar = that.fileList;
             formData.selectedroles = this.selectedRole.length>0?this.selectedRole.join(","):'';
             formData.selecteddeparts = this.userDepartModel.departIdList.length>0?this.userDepartModel.departIdList.join(","):'';
-
+            formData.identity=this.identity;
+            //如果是上级择传入departIds,否则为空
+            if(this.identity==="2"){
+              formData.departIds=this.departIds.join(",");
+            }else{
+              formData.departIds="";
+            }
             // that.addDepartsToUser(that,formData); // 调用根据当前用户添加部门信息的方法
             let obj;
             if(!this.model.id){
@@ -380,7 +435,6 @@
               that.confirmLoading = false;
               that.checkedDepartNames = [];
               that.userDepartModel.departIdList = {userId:'',departIdList:[]};
-
               that.close();
             })
 
@@ -528,9 +582,6 @@
           }
         }
       },
-      getAvatarView(){
-        return this.url.imgerver +"/"+ this.model.avatar;
-      },
       // 搜索用户对应的部门API
       onSearch(){
         this.$refs.departWindow.add(this.checkedDepartKeys,this.userId);
@@ -543,11 +594,21 @@
         this.checkedDepartNameString = '';
         this.userId = formData.userId;
         this.userDepartModel.userId = formData.userId;
+        this.departIds=[];
+        this.resultDepartOptions=[];
+        var depart=[];
         for (let i = 0; i < formData.departIdList.length; i++) {
           this.selectedDepartKeys.push(formData.departIdList[i].key);
           this.checkedDepartNames.push(formData.departIdList[i].title);
           this.checkedDepartNameString = this.checkedDepartNames.join(",");
+          //新增部门选择，如果上面部门选择后不为空直接付给负责部门
+          depart.push({
+              key:formData.departIdList[i].key,
+              title:formData.departIdList[i].title
+          })
+          this.departIds.push(formData.departIdList[i].key)
         }
+        this.resultDepartOptions=depart;
         this.userDepartModel.departIdList = this.selectedDepartKeys;
         this.checkedDepartKeys = this.selectedDepartKeys  //更新当前的选择keys
        },
@@ -560,6 +621,13 @@
           this.drawerWidth = 700;
         }
       },
+      identityChange(e){
+        if(e.target.value==="1"){
+            this.departIdShow=false;
+        }else{
+            this.departIdShow=true;
+        }
+      }
     }
   }
 </script>