|
|
@@ -0,0 +1,439 @@
|
|
|
+<!--
|
|
|
+ * @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="组织机构"
|
|
|
+ :options="organListCompany"
|
|
|
+ @selected="selectedcompanyOrgId"
|
|
|
+ v-model="formData.companyOrgId"
|
|
|
+ :labelModel="formData.companyOrgName"
|
|
|
+ />
|
|
|
+ <select-tree
|
|
|
+ :props="defaultProps"
|
|
|
+ slot="deptOrgId"
|
|
|
+ class="new-select-tree"
|
|
|
+ selectTreeTitle="组织机构"
|
|
|
+ :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="/czc-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('CZC_token') && 'Authorization']: 'Bearer ' + localStorage.getItem('CZC_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 = '/czc-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('CZC_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>
|
|
|
+
|
