SmartCommunity/userCenter/src/views/system/users/popups/edituser.vue

<!--
 * @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-input slot="password" type="password" clearable v-model="formData.password"></el-input>
            <el-input slot="passwordOK" type="password" clearable v-model="formData.passwordOK"></el-input>
            <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" style="object-fit: cover" />
                <!-- <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="/sc-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 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() {
        var validatePassContrast = (rule, value, callback) => {
            if (value == '' || value == null) {
                callback(new Error('请输入密码'));
            } else {
                if (this.formData.password !== value) {
                    callback(new Error('两次密码不一致'));
                }
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value == '' || value == null) {
                callback(new Error('请输入密码'));
            } else {
                if (value.length < 6) {
                    callback(new Error('密码位数不得少于6位'));
                }
                callback();
            }
        };

        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: '',
                password: '**********',
                passwordOK: '**********'
            },
            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: 'password',
                        slot: 'password'
                    },
                    {
                        label: '确认密码',
                        prop: 'passwordOK',
                        slot: 'passwordOK'
                    },
                    {
                        label: '头像',
                        prop: 'photo',
                        slot: 'companylogo'
                    },
                    {
                        label: '邮箱',
                        prop: 'email',
                        input: true
                    },
                    {
                        label: '备注',
                        prop: 'remark',
                        input: true
                    }
                ]
            ],
            formRules: {
                companyOrgId: [this.$valid.selectRequired('所属公司')],
                username: [this.$valid.inputRequired('用户名')],
                password: [{ required: true, validator: validatePass, trigger: 'blur' }],
                passwordOK: [{ required: true, validator: validatePassContrast, trigger: 'blur' }],
                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 = '/sc-user-center/user/updateUserById';
                if (this.formData.password === '**********' || this.formData.passwordOK === '**********') {
                    delete this.formData.password;
                    delete this.formData.passwordOK;
                }
                this.$http
                    .post(posturl, this.formData)
                    .then(({ status, data, msg }) => {
                        debugger;
                        loading.close();
                        if (0 == status) {
                            this.$message.success(msg);

                            if (this.phoneNumber !== this.formData.phone) {
                                this.$alert('你的手机号已变更，需重新登录', '提示', {
                                    confirmButtonText: '确定',
                                    showClose: false
                                }).then(() => {
                                    window.open(`${envConfig.loginUrl}`, '_self');
                                    window.relogin = false;
                                    localStorage.removeItem('SC_token');
                                    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.phoneNumber = this.params.data.phone;
        let val = Object.assign(this.formData, this.params.data);
        this.formData = val;
        this.$set(this.formData, 'password', '**********');
        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>