From 7aceca2fd1064c0788403e7147cf66ac31d7ec85 Mon Sep 17 00:00:00 2001 From: Surpriseplus <845948745@qq.com> Date: 星期三, 21 九月 2022 18:09:02 +0800 Subject: [PATCH] 用户信息管理 --- src/assets/lang/zh.js | 59 +++++- src/assets/lang/en.js | 88 +++++++--- src/views/userManage/userInfoManage.vue | 296 ++++++++++++++++++++++++++++++++++++ 3 files changed, 400 insertions(+), 43 deletions(-) diff --git a/src/assets/lang/en.js b/src/assets/lang/en.js index df864d2..8159ad1 100644 --- a/src/assets/lang/en.js +++ b/src/assets/lang/en.js @@ -13,6 +13,10 @@ update: 'Modify', append: 'Append', operate: 'Operate', + clickupload: 'Click Upload', + upload: 'Upload', + preservation: 'Preservation', + close: 'Close', }, dataManage: { dataManage: 'Data Manage', @@ -285,25 +289,53 @@ state: 'State', post: 'Post', addtime: 'Add Time', + userAccount: 'User account', + userInformation: 'User information', + username: 'User name', + userpssword: 'Password', + userstate: 'User state', + accountinformation: 'Account information', + toapplied: 'To be applied', + phoneticAlphabet: 'Phonetic initials', + userchinesename: 'Chinese name', + sex: 'Sex', + userMan: 'Man', + userWoMan: 'Female', + nativePlace: 'Native place', + identityCard: 'Identity card', + education: 'Education', + pleaseSelect: '- Please select -', + occupation: 'Occupation name', + email: 'Email', + receiveSMS: 'Receive SMS', + major: 'Major', + phoneNumber: 'cell-phone number', + officeTelephone: 'Office telephone', + addressbook: 'Address of address book', + remarks: 'Remarks', + scanningcopy: 'Scanning copy', + spantitle1: '(Recommended picture size: 262 脳 146 pixels)', + spantitle2: + '(Scanned copy of user account application form, file format: PDF, size shall not exceed 20M)', }, orgManage: 'Org Manage', userAuditing: 'User Auditing', UA: { - userName: "User Name", + userName: 'User Name', usernameInfo: '', - all: "all", - approvalPassed: "The Approval Passed", - disable: "The disabled", - delete: "The deleted", - pendingReview: "Pending Review", - auditFailed: "The Audit Failed", - userState: "User State", - unitName: "Unit Name", - pass: "Pass", - deny: "Deny", - query: "Query", - reset: "Reset", - ChineseName: "ChineseName銆恥sername銆�", + all: 'all', + approvalPassed: 'The Approval Passed', + disable: 'The disabled', + delete: 'The deleted', + pendingReview: 'Pending Review', + auditFailed: 'The Audit Failed', + userState: 'User State', + unitName: 'Unit Name', + pass: 'Pass', + deny: 'Deny', + query: 'Query', + reset: 'Reset', + ChineseName: 'ChineseName銆恥sername銆�', affiliatedUnit: 'Affiliated Unit', auditUser: 'Audit User', auditDate: 'Audit Date', @@ -311,28 +343,28 @@ }, roleManage: 'Role Manage', RM: { - roleName: "roleName", + roleName: 'roleName', ownedSystem: 'ownedSystem', add: 'add', - query: "query", - reset: "reset", - index: "index", - Permission: "Permission", - resourcePermission: "Resource Permission", - groupSetting: "groupSetting", + query: 'query', + reset: 'reset', + index: 'index', + Permission: 'Permission', + resourcePermission: 'Resource Permission', + groupSetting: 'groupSetting', one: 'one', }, groupManage: 'groupManage', GM: { - groupName: "groupName", + groupName: 'groupName', ownedSystem: 'ownedSystem', add: 'add', - index: "index", - query: "query", - reset: "reset", - applicationName: "applicationName", - userSetting: "userSetting", - roleSetting: "roleSetting", + index: 'index', + query: 'query', + reset: 'reset', + applicationName: 'applicationName', + userSetting: 'userSetting', + roleSetting: 'roleSetting', one: 'A picture', }, }, diff --git a/src/assets/lang/zh.js b/src/assets/lang/zh.js index 6c1ba96..efa5f93 100644 --- a/src/assets/lang/zh.js +++ b/src/assets/lang/zh.js @@ -13,6 +13,10 @@ update: '淇敼', append: '鏂板', operate: '鎿嶄綔', + clickupload: '鐐瑰嚮涓婁紶', + upload: '涓婁紶', + preservation: '淇濆瓨', + close: '鍏抽棴', }, dataManage: { dataManage: '鏁版嵁绠$悊', @@ -284,25 +288,52 @@ state: '鐘舵��', post: '鑱屽姟', addtime: '娣诲姞鏃堕棿', + userAccount: '鐢ㄦ埛璐﹀彿', + userInformation: '鐢ㄦ埛璧勬枡', + username: '鐢ㄦ埛鍚�', + userpssword: '瀵嗙爜', + userstate: '鐢ㄦ埛鐘舵��', + accountinformation: '璐﹀彿淇℃伅', + toapplied: '寰呯敵璇�', + phoneticAlphabet: '鎷奸煶棣栧瓧姣�', + userchinesename: '涓枃鍚�', + sex: '鎬у埆', + userMan: '鐢�', + userWoMan: '濂�', + nativePlace: '绫嶈疮', + identityCard: '韬唤璇�', + education: '瀛﹀巻', + pleaseSelect: '- 璇烽�夋嫨 -', + occupation: '鑱屼笟鍚嶇О', + email: 'Email', + receiveSMS: '鎺ユ敹鐭俊', + major: '鎵�瀛︿笓涓�', + phoneNumber: '鎵嬫満鍙�', + officeTelephone: '鍔炲叕瀹ょ數璇�', + addressbook: '閫氳褰曞湴鍧�', + remarks: '澶囨敞璇存槑', + scanningcopy: '鎵弿浠�', + spantitle1: '锛堝缓璁浘鐗囧ぇ灏忥細262 脳 146 鍍忕礌锛�', + spantitle2: '锛堢敤鎴疯处鍙风敵璇峰崟鎵弿浠讹紝鏂囦欢鏍煎紡锛歅DF锛屽ぇ灏忎笉寰楄秴杩�20M锛�', }, orgManage: '缁勭粐鏈烘瀯绠$悊', userAuditing: '鐢ㄦ埛瀹℃牳', UA: { - userName: "鐢ㄦ埛鍚嶇О", + userName: '鐢ㄦ埛鍚嶇О', usernameInfo: '杈撳叆鐢ㄦ埛鍚嶃�佷腑鏂囧悕鎴栨嫾闊抽瀛楁瘝鏌ヨ', - all: "鍏ㄩ儴", - approvalPassed: "瀹℃牳宸查�氳繃", - disable: "绂佺敤", - delete: "鍒犻櫎", - pendingReview: "寰呭鏍�", - auditFailed: "瀹℃牳涓嶉�氳繃", - userState: "鐢ㄦ埛鐘舵��", - unitName: "鍗曚綅鍚嶇О", - pass: "閫氳繃", - deny: "涓嶉�氳繃", - query: "鏌ヨ", - reset: "娓呴櫎", - ChineseName: "涓枃鍚嶃�愮敤鎴峰悕銆�", + all: '鍏ㄩ儴', + approvalPassed: '瀹℃牳宸查�氳繃', + disable: '绂佺敤', + delete: '鍒犻櫎', + pendingReview: '寰呭鏍�', + auditFailed: '瀹℃牳涓嶉�氳繃', + userState: '鐢ㄦ埛鐘舵��', + unitName: '鍗曚綅鍚嶇О', + pass: '閫氳繃', + deny: '涓嶉�氳繃', + query: '鏌ヨ', + reset: '娓呴櫎', + ChineseName: '涓枃鍚嶃�愮敤鎴峰悕銆�', affiliatedUnit: '鎵�灞炲崟浣嶏紙鍦ㄨ亴锛�', auditUser: '瀹℃牳浜�', auditDate: '瀹℃牳鏃堕棿', diff --git a/src/views/userManage/userInfoManage.vue b/src/views/userManage/userInfoManage.vue index 221cec0..f1242fe 100644 --- a/src/views/userManage/userInfoManage.vue +++ b/src/views/userManage/userInfoManage.vue @@ -57,7 +57,7 @@ </el-form-item> <br /> <el-form-item> - <el-button type="success" size="small" + <el-button type="success" size="small" @click="showAddDialog" ><i class="el-icon-plus"></i> {{ $t('common.append') }}</el-button @@ -165,6 +165,255 @@ </el-pagination> </div> </div> + <el-dialog :visible.sync="dialogTableVisible" width="57%" > + <el-tabs v-model="activeName" @tab-click="handleClick"> + <el-tab-pane + :label="$t('userManage.userInfoObj.userAccount')" + name="first" + > + <el-form + :model="ruleForm" + :rules="rules" + ref="ruleForm" + label-width="100px" + class="demo-ruleForm" + > + <el-form-item + :label="$t('userManage.userInfoObj.username')" + prop="name" + > + <el-input v-model="ruleForm.name"></el-input> + </el-form-item> + <el-form-item + :label="$t('userManage.userInfoObj.userpssword')" + prop="password" + > + <el-input type="password" v-model="ruleForm.password"></el-input> + </el-form-item> + <el-form-item + :label="$t('userManage.userInfoObj.userstate')" + prop="password" + > + <label>{{ $t('userManage.userInfoObj.toapplied') }}</label> + </el-form-item> + </el-form> + </el-tab-pane> + <el-tab-pane + :label="$t('userManage.userInfoObj.userInformation')" + name="second" + > + <el-form + :model="ruleForm" + :rules="rules" + ref="ruleForm" + label-width="180px" + class="demo-ruleForm" + > + <el-row> + <el-col :span="12"> + <el-form-item + <el-form-item + :label="$t('userManage.userInfoObj.userchinesename')" + prop="name" + > + <el-input v-model="ruleForm.name"></el-input> + </el-form-item> + <el-form-item + <el-form-item + :label="$t('userManage.userInfoObj.username')" + prop="name" + > + <el-input v-model="ruleForm.name"></el-input> + </el-form-item> + <el-form-item + <el-form-item + :label="$t('userManage.userInfoObj.sex')" + > + <el-radio v-model="radio" label="1">{{$t('userManage.userInfoObj.userMan')}}</el-radio> + <el-radio v-model="radio" label="2">{{$t('userManage.userInfoObj.userWoMan')}}</el-radio> + </el-form-item> + <el-form-item + <el-form-item + :label="$t('userManage.userInfoObj.nativePlace')" + > + <el-input v-model="ruleForm.name"></el-input> + </el-form-item> + </el-col> + <el-col :span="12"> + <div style="margin-left: 35px"> + <div + style=" + width: 205px; + height: 185px; + border: 1px solid gray; + margin: 5px; + " + > + <img /> + </div> + <el-upload + class="upload-demo" + action="https://jsonplaceholder.typicode.com/posts/" + list-type="picture" + > + <el-button size="small" type="primary">{{$t('common.clickupload')}}</el-button> + <span style="color: red" + > {{$t('userManage.userInfoObj.spantitle1')}}</span + > + </el-upload> + </div> + </el-col> + </el-row> + <el-row> + <el-col :span="12"> + <el-form-item + <el-form-item + :label="$t('userManage.userInfoObj.identityCard')" + > + <el-input v-model="ruleForm.name"></el-input> + </el-form-item> + </el-col> + <el-col :span="12" + ><el-form-item + <el-form-item + :label="$t('userManage.userInfoObj.education')" + + > + <el-select + v-model="form.region" + class="select" + :placeholder="$t('userManage.userInfoObj.pleaseSelect')" + > + <el-option label="Zone one" value="shanghai" /> + <el-option label="Zone two" value="beijing" /> + </el-select> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="12"> + <el-form-item + <el-form-item + :label="$t('userManage.userInfoObj.occupation')" + > + <el-select + v-model="form.region" + class="select" + :placeholder="$t('userManage.userInfoObj.pleaseSelect')" + > + <el-option label="Zone one" value="shanghai" /> + <el-option label="Zone two" value="beijing" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12" + ><el-form-item + <el-form-item + :label="$t('userManage.userInfoObj.post')" + + > + <el-select + class="select" + v-model="form.region" + :placeholder="$t('userManage.userInfoObj.pleaseSelect')" + > + <el-option label="Zone one" value="shanghai" /> + <el-option label="Zone two" value="beijing" /> + </el-select> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="12"> + <el-form-item + <el-form-item + :label="$t('userManage.userInfoObj.email')" + + > + <el-input v-model="ruleForm.name"></el-input> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item + <el-form-item + :label="$t('userManage.userInfoObj.major')" + + > + <el-input v-model="ruleForm.name"></el-input> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="12"> + <el-form-item + :label="$t('userManage.userInfoObj.phoneNumber')" + + > + <el-input + v-model="ruleForm.name" + style="width: 225px" + ></el-input> + <el-checkbox style="margin-left: 10px" v-model="checked" + >{{$t('userManage.userInfoObj.receiveSMS')}}</el-checkbox + > + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item + :label="$t('userManage.userInfoObj.officeTelephone')" + + > + <el-input v-model="ruleForm.name"></el-input> + </el-form-item> + </el-col> + </el-row> + + <el-row> + <el-col :span="24"> + <el-form-item + :label="$t('userManage.userInfoObj.addressbook')" + + > + <el-input style="width:755px" v-model="ruleForm.name"></el-input> + </el-form-item> + </el-col> + </el-form-item> + </el-row> + <el-row> + <el-col :span="24"> + <el-form-item + :label="$t('userManage.userInfoObj.remarks')" + > + <el-input type="textarea" style="width:755px" v-model="ruleForm.name"></el-input> + </el-form-item> + </el-col> + </el-form-item> + </el-row> + <el-row> + <el-col :span="24"> + <el-form-item + :label="$t('userManage.userInfoObj.scanningcopy')" + + > + <el-upload + class="upload-demo" + action="https://jsonplaceholder.typicode.com/posts/" + list-type="picture" + > + <el-button size="small" type="primary">{{$t('common.upload')}}</el-button> + <span style="color: red" + > {{$t('userManage.userInfoObj.spantitle2')}}</span> + </el-upload> + </el-form-item> + </el-col> + </el-form-item> + </el-row> + </el-form> + </el-tab-pane> + </el-tabs> + <el-button type="primary" @click="onSubmit">{{$t('common.preservation')}}</el-button> + <el-button>{{$t('common.close')}}</el-button> + </el-dialog> </div> </template> @@ -180,6 +429,36 @@ data() { return { currentPage: 1, + dialogTableVisible: false, + activeName: 'first', + ruleForm: { name: '', password: '' }, + ruleForm1: { + name: '', + value: '', + }, + rules: { + name: [ + { required: true, message: '璇疯緭鍏ョ敤鎴峰悕', trigger: 'blur' }, + { min: 3, max: 5, message: '闀垮害鍦� 3 鍒� 5 涓瓧绗�', trigger: 'blur' }, + ], + password: [ + { required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' }, + { + trigger: 'blur', + validator: (rule, value, callback) => { + var passwordreg = + /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}/; + if (!passwordreg.test(value)) { + callback( + new Error('瀵嗙爜蹇呴』鐢辨暟瀛椼�佸瓧姣嶃�佺壒娈婂瓧绗︾粍鍚�,璇疯緭鍏�8-20浣�') + ); + } else { + callback(); + } + }, + }, + ], + }, form: { username: '', ownedSystem: 'all', @@ -294,6 +573,9 @@ resetForm(formName) { this.$refs[formName].resetFields(); }, + showAddDialog() { + this.dialogTableVisible = true; + }, }, created() {}, }; @@ -337,5 +619,17 @@ .text-center { text-align: center; } + .select { + width: 300px; + } +} +/deep/ .el-card__header { + padding: 10px 10px !important; +} +/deep/ .el-dialog { + margin-top: 2vh !important; +} +/deep/ .el-dialog__wrapper{ + overflow: hidden !important; } </style> -- Gitblit v1.9.3