vue版本上线

jshERP-web/src/views/system/modules/UserModal.vue

@@ -0,0 +1,367 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="800"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    wrapClassName="ant-modal-cust-warp"
+    style="top:5%;height: 100%;overflow-y: hidden">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="登录名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input placeholder="请输入登录名称" v-decorator.trim="[ 'loginName', validatorRules.loginName]" :readOnly="!!model.id"
+           suffix="初始密码：123456" />
+        </a-form-item>
+        <a-form-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" >
+          <a-input placeholder="请输入用户姓名" v-decorator.trim="[ 'username', validatorRules.username]" />
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色">
+          <a-select v-if="model.roleName!='租户'" placeholder="选择角色" v-decorator="[ 'roleId' ]" :dropdownMatchSelectWidth="false">
+            <a-select-option v-for="(item,index) in roleList" :key="index" :value="item.id">
+              {{ item.text }}
+            </a-select-option>
+          </a-select>
+          <a-col v-if="model.roleName=='租户'"><a-row>租户</a-row></a-col>
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="机构">
+          <a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
+             :treeData="orgaTree" v-decorator="[ 'orgaId' ]" placeholder="请选择机构">
+          </a-tree-select>
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="职位">
+          <a-input placeholder="请输入职位" v-decorator.trim="[ 'position' ]" />
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="电话号码">
+          <a-input placeholder="请输入电话号码" v-decorator.trim="[ 'phonenum' ]" />
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="电子邮箱">
+          <a-input placeholder="请输入电子邮箱" v-decorator.trim="[ 'email' ]" />
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
+          <a-input placeholder="请输入排序" v-decorator.trim="[ 'userBlngOrgaDsplSeq' ]" />
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述">
+          <a-textarea :rows="1" placeholder="请输入描述" v-decorator="[ 'description' ]" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+<script>
+  import pick from 'lodash.pick'
+  import Vue from 'vue'
+  import departWindow from './DepartWindow'
+  import JSelectPosition from '@/components/jeecgbiz/JSelectPosition'
+  import { ACCESS_TOKEN } from "@/store/mutation-types"
+  import { getAction } from '@/api/manage'
+  import {addUser,editUser,queryOrganizationTreeList,findUserRole} 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
+    },
+    data () {
+      return {
+        title:"操作",
+        visible: false,
+        departDisabled: false, //是否是我的部门调用该页面
+        roleDisabled: false, //是否是角色维护调用该页面
+        modalWidth:800,
+        drawerWidth:700,
+        modaltoggleFlag:true,
+        confirmDirty: false,
+        orgaTree: [],
+        roleList: [],
+        selectedDepartKeys:[], //保存用户选择部门id
+        checkedDepartKeys:[],
+        checkedDepartNames:[], // 保存部门的名称 =>title
+        checkedDepartNameString:"", // 保存部门的名称 =>title
+        resultDepartOptions:[],
+        userId:"", //保存用户id
+        disableSubmit:false,
+        userDepartModel:{userId:'',departIdList:[]}, // 保存SysUserDepart的用户部门中间表数据需要的对象
+        dateFormat:"YYYY-MM-DD",
+        validatorRules:{
+          loginName:{
+            rules: [{
+              required: true, message: '请输入登录名称!'
+            }]
+          },
+          username:{
+            rules: [{
+              required: true, message: '请输入用户账号!'
+            }]
+          }
+        },
+        departIdShow:false,
+        departIds:[], //负责部门id
+        model: {},
+        selectedRole:[],
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+        uploadLoading:false,
+        confirmLoading: false,
+        headers:{},
+        form:this.$form.createForm(this),
+        picUrl: "",
+        url: {
+          userId:"/sys/user/generateUserId", // 引入生成添加用户情况下的url
+          syncUserByUserName:"/process/extActProcess/doSyncUserByUserName",//同步用户到工作流
+        },
+        identity:"1",
+        fileList:[],
+      }
+    },
+    created () {
+      this.loadOrgaData()
+      this.loadRoleData()
+      const token = Vue.ls.get(ACCESS_TOKEN);
+      this.headers = {"X-Access-Token":token}
+    },
+    computed:{
+      uploadAction:function () {
+        return this.url.fileUpload;
+      }
+    },
+    methods: {
+      isDisabledAuth(code){
+        return disabledAuthFilter(code);
+      },
+      //窗口最大化切换
+      toggleScreen(){
+        if(this.modaltoggleFlag){
+          this.modalWidth = window.innerWidth;
+        }else{
+          this.modalWidth = 800;
+        }
+        this.modaltoggleFlag = !this.modaltoggleFlag;
+      },
+      refresh () {
+          this.selectedDepartKeys=[];
+          this.checkedDepartKeys=[];
+          this.checkedDepartNames=[];
+          this.checkedDepartNameString = "";
+          this.userId=""
+          this.resultDepartOptions=[];
+          this.departId=[];
+          this.departIdShow=false;
+      },
+      add () {
+        this.picUrl = "";
+        this.edit({activitiSync:'1'});
+      },
+      edit (record) {
+        let that = this;
+        that.checkedDepartNameString = "";
+        that.form.resetFields();
+        if(record.hasOwnProperty("id")){
+          setTimeout(() => {
+            this.fileList = record.avatar;
+          }, 5)
+        }
+        that.userId = record.id;
+        that.visible = true;
+        that.model = Object.assign({}, record);
+        that.$nextTick(() => {
+          that.form.setFieldsValue(pick(this.model,'loginName','username','roleId','orgaId','position',
+            'phonenum','email','userBlngOrgaDsplSeq','description'))
+        });
+        // 调用查询用户对应的部门信息的方法
+        that.checkedDepartKeys = [];
+        that.loadCheckedDeparts();
+      },
+      loadCheckedDeparts(){
+        let that = this;
+        if(!that.userId){return}
+        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{
+            console.log(res.message);
+          }
+        })
+      },
+      close() {
+        this.$emit('close');
+        this.visible = false;
+        this.disableSubmit = false;
+        this.selectedRole = [];
+        this.userDepartModel = {userId:'',departIdList:[]};
+        this.checkedDepartNames = [];
+        this.checkedDepartNameString='';
+        this.checkedDepartKeys = [];
+        this.selectedDepartKeys = [];
+        this.resultDepartOptions=[];
+        this.departIds=[];
+        this.departIdShow=false;
+        this.identity="1";
+        this.fileList=[];
+      },
+      handleOk() {
+        const that = this;
+        // 触发表单验证
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            that.confirmLoading = true;
+            if(!values.birthday){
+              values.birthday = '';
+            }else{
+              values.birthday = values.birthday.format(this.dateFormat);
+            }
+            let formData = Object.assign(this.model, values);
+            if(that.fileList != ''){
+              formData.avatar = that.fileList;
+            }else{
+              formData.avatar = null;
+            }
+            formData.selectedroles = this.selectedRole.length>0?this.selectedRole.join(","):'';
+            formData.selecteddeparts = this.userDepartModel.departIdList.length>0?this.userDepartModel.departIdList.join(","):'';
+            formData.userIdentity=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){
+              formData.id = this.userId;
+              obj=addUser(formData);
+            }else{
+              obj=editUser(formData);
+            }
+            obj.then((res)=>{
+              if(res.code === 200){
+                that.$emit('ok');
+              }else{
+                that.$message.warning(res.message);
+              }
+            }).finally(() => {
+              that.confirmLoading = false;
+              that.checkedDepartNames = [];
+              that.userDepartModel.departIdList = {userId:'',departIdList:[]};
+              that.close();
+            })
+
+          }
+        })
+      },
+      handleCancel() {
+        this.close()
+      },
+      handleConfirmBlur(e) {
+        const value = e.target.value;
+        this.confirmDirty = this.confirmDirty || !!value
+      },
+      handleChange(info) {
+        this.picUrl = "";
+        if (info.file.status === 'uploading') {
+          this.uploadLoading = true;
+          return
+        }
+        if (info.file.status === 'done') {
+          var response = info.file.response;
+          this.uploadLoading = false;
+          console.log(response);
+          if(response.success){
+            this.model.avatar = response.message;
+            this.picUrl = "Has no pic url yet";
+          }else{
+            this.$message.warning(response.message);
+          }
+        }
+      },
+      loadOrgaData(){
+        let that = this;
+        let params = {};
+        params.id='';
+        queryOrganizationTreeList(params).then((res)=>{
+          if(res){
+            that.orgaTree = res
+          }
+        })
+      },
+      loadRoleData(){
+        let that = this;
+        let params = {
+          'UBType': 'UserRole',
+          'UBKeyId': ''
+        };
+        findUserRole(params).then((res)=>{
+          if(res){
+            that.roleList = res
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .avatar-uploader > .ant-upload {
+    width:104px;
+    height:104px;
+  }
+  .ant-upload-select-picture-card i {
+    font-size: 49px;
+    color: #999;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    color: #666;
+  }
+
+  .ant-table-tbody .ant-table-row td{
+    padding-top:10px;
+    padding-bottom:10px;
+  }
+
+  .drawer-bootom-button {
+    position: absolute;
+    bottom: -8px;
+    width: 100%;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+</style>