From 7aceca2fd1064c0788403e7147cf66ac31d7ec85 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期三, 21 九月 2022 18:09:02 +0800
Subject: [PATCH] 用户信息管理
---
src/views/userManage/userInfoManage.vue | 296 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 295 insertions(+), 1 deletions(-)
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