|
|
@@ -0,0 +1,332 @@
|
|
|
+<!--
|
|
|
+ * @Author: your name
|
|
|
+ * @Date: 2020-10-22 18:26:27
|
|
|
+ * @LastEditTime: 2020-11-26 08:14:05
|
|
|
+ * @LastEditors: Please set LastEditors
|
|
|
+ * @Description: In User Settings Edit
|
|
|
+ * @FilePath: \vue-manage-system-master\src\views\system\users\popups\AddOrEdit.vue
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div class="alert-body__main_content">
|
|
|
+ <zz-form :cols="formCols" :data="formData" :rules="formRules" :errors="formErrors" labelWidth="110" ref="form">
|
|
|
+ <el-select slot="status" v-model="formData.enableState">
|
|
|
+ <el-option v-for="(item, index) in allStatus" :key="index" :label="item.label" :value="item.id">{{ item.label }}</el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select slot="roleId" v-model="formData.roleId">
|
|
|
+ <el-option v-for="(item, index) in allRoleId" :key="index" :label="item.roleName" :value="item.id">{{
|
|
|
+ item.roleName
|
|
|
+ }}</el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select slot="userType" v-model="formData.userType">
|
|
|
+ <el-option v-for="(item, index) in allUserType" :key="index" :label="item.dictValue" :value="item.id">{{
|
|
|
+ item.dictValue
|
|
|
+ }}</el-option>
|
|
|
+ </el-select>
|
|
|
+ <select-tree
|
|
|
+ :props="defaultProps"
|
|
|
+ slot="companyOrgId"
|
|
|
+ class="new-select-tree"
|
|
|
+ selectTreeTitle='组织机构'
|
|
|
+ width="320"
|
|
|
+ treeWidth="320"
|
|
|
+ :options="organListCompany"
|
|
|
+ @selected="selectedcompanyOrgId"
|
|
|
+ v-model="formData.companyOrgId"
|
|
|
+ :labelModel="formData.companyOrgName"
|
|
|
+ />
|
|
|
+ <select-tree
|
|
|
+ :props="defaultProps"
|
|
|
+ slot="deptOrgId"
|
|
|
+ class="new-select-tree"
|
|
|
+ selectTreeTitle='组织机构'
|
|
|
+ width="320"
|
|
|
+ treeWidth="320"
|
|
|
+ :options="organListdepartment"
|
|
|
+ @selected="selecteddeptOrgId"
|
|
|
+ v-model="formData.deptOrgId"
|
|
|
+ />
|
|
|
+ <div class="imgdis-div" slot="companylogo" v-show="formData.photo">
|
|
|
+ <i class="el-icon-delete" @click="delformphoto"></i>
|
|
|
+ <img :src="envConfig.baseImgApi + formData.photo" alt="" width="60" height="60" />
|
|
|
+ <!-- <div class="tips"><img style="width:12px;height:12px;vertical-align: middle;" src="@assets/img/icon-warning.png"/><span>支持jpg,jpeg,gif,png,bmp格式的图片</span></div> -->
|
|
|
+ </div>
|
|
|
+ <el-upload
|
|
|
+ v-show="!formData.photo"
|
|
|
+ :headers="token"
|
|
|
+ ref="uploaduserlogo"
|
|
|
+ class="mini-upload"
|
|
|
+ slot="companylogo"
|
|
|
+ limit="1"
|
|
|
+ action="/user-center/user/addUserPhoto"
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-success="uploadsuccess"
|
|
|
+ :auto-upload="true"
|
|
|
+ name="avatarfile"
|
|
|
+ >
|
|
|
+ <i slot="default" class="el-icon-plus"></i>
|
|
|
+ <div slot="file" slot-scope="{ file }">
|
|
|
+ <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
|
|
+ <span class="el-upload-list__item-actions">
|
|
|
+ <!-- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
|
|
+ <i class="el-icon-zoom-in"></i>
|
|
|
+ </span> -->
|
|
|
+ <!-- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
|
|
|
+ <i class="el-icon-download"></i>
|
|
|
+ </span> -->
|
|
|
+ <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="tips"><img style="width:12px;height:12px;vertical-align: middle;" src="@assets/img/icon-warning.png"/><span>支持jpg,jpeg,gif,png,bmp格式的图片</span></div>
|
|
|
+ </el-upload>
|
|
|
+ <el-dialog :visible.sync="dialogVisible">
|
|
|
+ <img width="100%" :src="dialogImageUrl" alt="" />
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </zz-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import envConfig from '@/config';
|
|
|
+import SelectTree from '@/components/common/SelectTree.vue';
|
|
|
+export default {
|
|
|
+ props: ['params'],
|
|
|
+ components: {
|
|
|
+ SelectTree
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ token: {
|
|
|
+ [localStorage.getItem('SC_token') && 'Authorization']: 'Bearer ' + localStorage.getItem('SC_token')
|
|
|
+ },
|
|
|
+ envConfig: envConfig,
|
|
|
+ organList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ tenantId: 'string123',
|
|
|
+ orgName: '公司',
|
|
|
+ parentOrgId: 0,
|
|
|
+ orgs: [{ id: 2, tenantId: 'string123', orgName: '部门', parentOrgId: 1, orgs: null, display: true }],
|
|
|
+ display: true
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ organListCompany:[],
|
|
|
+ organListdepartment:[],
|
|
|
+ phoneNumber:'',
|
|
|
+ defaultProps: {
|
|
|
+ value: 'id', // 唯一标识
|
|
|
+ label: 'orgName', // 标签显示
|
|
|
+ children: 'orgs' // 子级
|
|
|
+ },
|
|
|
+ formData: {
|
|
|
+ companyOrgId: '',
|
|
|
+ companyOrgName: '',
|
|
|
+ createBy: '',
|
|
|
+ dateCreate: '',
|
|
|
+ dateUpdate: '',
|
|
|
+ deptOrgId: '',
|
|
|
+ deptOrgName: '',
|
|
|
+ email: '',
|
|
|
+ enableState: '',
|
|
|
+ id: '',
|
|
|
+ phone: '',
|
|
|
+ photo: '',
|
|
|
+ remark: '',
|
|
|
+ roleId: '',
|
|
|
+ status: '',
|
|
|
+ tenantId: '',
|
|
|
+ updateBy: '',
|
|
|
+ userGroupId: '',
|
|
|
+ userTags: '',
|
|
|
+ userType: '',
|
|
|
+ username: ''
|
|
|
+ },
|
|
|
+ dialogImageUrl: '',
|
|
|
+ dialogVisible: false,
|
|
|
+ disabled: false,
|
|
|
+ allStatus: [
|
|
|
+ {
|
|
|
+ id: '0',
|
|
|
+ label: '停用'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ label: '启用'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ allRoleId: [],
|
|
|
+ allUserType: [],
|
|
|
+ formCols: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ label: '用户名',
|
|
|
+ prop: 'username',
|
|
|
+ input: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '手机号码',
|
|
|
+ prop: 'phone',
|
|
|
+ input: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '头像',
|
|
|
+ prop: 'photo',
|
|
|
+ slot: 'companylogo'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '邮箱',
|
|
|
+ prop: 'email',
|
|
|
+ input: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '备注',
|
|
|
+ prop: 'remark',
|
|
|
+ input: true
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ ],
|
|
|
+ formRules: {
|
|
|
+ companyOrgId: [this.$valid.selectRequired('所属公司')],
|
|
|
+ // deptOrgId: [this.$valid.selectRequired('所属部门')],
|
|
|
+ username: [this.$valid.inputRequired('用户名')],
|
|
|
+ phone: [this.$valid.patternPhone()],
|
|
|
+ enableState: [this.$valid.inputRequired('状态')]
|
|
|
+ },
|
|
|
+ formErrors: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ delformphoto() {
|
|
|
+ this.formData.photo = '';
|
|
|
+ this.$refs.uploaduserlogo.clearFiles();
|
|
|
+ },
|
|
|
+ getselectAll() {},
|
|
|
+ submit() {
|
|
|
+ new Promise((resolve) => {
|
|
|
+ this.$refs.form.validate(resolve);
|
|
|
+ }).then(() => {
|
|
|
+ var loading = this.$loading();
|
|
|
+ var posturl = '/user-center/user/updateUserById';
|
|
|
+ this.$http
|
|
|
+ .post(posturl, this.formData)
|
|
|
+ .then(({ status, data, msg }) => {
|
|
|
+ loading.close();
|
|
|
+ if (0 == status) {
|
|
|
+ this.$message.success(msg);
|
|
|
+ if(this.phoneNumber!==this.formData.phone){
|
|
|
+ this.$alert('你的手机号已变更，需重新登录', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ showClose:false,
|
|
|
+ }).then(()=>{
|
|
|
+ window.open('http://114.135.61.186:21020/sc-login/', '_self');
|
|
|
+ window.relogin = false;
|
|
|
+ localStorage.removeItem('UMIS_token');
|
|
|
+ sessionStorage.removeItem("tabs");
|
|
|
+ return;
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this.params.callback && this.params.callback();
|
|
|
+ this.$emit('close');
|
|
|
+ if(this.$route.path==='/userInfo'){
|
|
|
+ this.$router.go(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.error(msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ loading.close();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleRemove(file) {
|
|
|
+ this.$refs.uploaduserlogo.clearFiles();
|
|
|
+ },
|
|
|
+ uploadsuccess(response, file, fileList) {
|
|
|
+ if (0 === response.status) {
|
|
|
+ this.formData.photo = response.data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getselectAll();
|
|
|
+ // this.getcompanyTree();
|
|
|
+ this.phoneNumber=this.params.data.phone;
|
|
|
+ this.formData = this.params.data ? this.params.data : this.formData;
|
|
|
+ this.organList = this.params.organList ? this.params.organList : this.organList;
|
|
|
+ this.organListCompany = this.params.organListCompany ? this.params.organListCompany : this.organListCompany;
|
|
|
+ this.organListdepartment = this.params.organListdepartment ? this.params.organListdepartment : this.organListdepartment;
|
|
|
+ this.allRoleId = this.params.allRoleId ? this.params.allRoleId : this.allRoleId;
|
|
|
+ this.allUserType = this.params.allUserType ? this.params.allUserType : this.allUserType;
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang='scss' scoped>
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.mini-upload .el-upload-list--picture-card .el-upload-list__item {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+}
|
|
|
+.mini-upload .el-upload--picture-card {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.mini-upload .el-upload--picture-card i {
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+.imgdis-div {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.imgdis-div i {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+}
|
|
|
+// .imgdis-div .notice{
|
|
|
+// display: contents;
|
|
|
+// font-size: 12px;
|
|
|
+// }
|
|
|
+.imgdis-div:hover i {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+// .imgdis-div .tips{
|
|
|
+// position: absolute;
|
|
|
+// font-size: 0.12px;
|
|
|
+// font-family: MicrosoftYaHei;
|
|
|
+// color: #7D7F87;
|
|
|
+// top: 10px;
|
|
|
+// right: -261px;
|
|
|
+// }
|
|
|
+.el-upload .tips {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #7D7F87;
|
|
|
+ // font-size: 12px;
|
|
|
+ // span{
|
|
|
+ // position: absolute;
|
|
|
+ // font-size: 12px;
|
|
|
+ // font-family: MicrosoftYaHei;
|
|
|
+ // color: #7D7F87;
|
|
|
+ // top: 0px;
|
|
|
+ // right: 0px;
|
|
|
+ // }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+
|
Shannon_mu