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>&nbsp;{{
               $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