From 17792a8900da5a2dbdc32c1dd865a92c027a1ca6 Mon Sep 17 00:00:00 2001
From: ColorWhiteDeveloper <2632970487@qq.com>
Date: 星期一, 19 九月 2022 11:02:50 +0800
Subject: [PATCH] 系统框架重新搭建
---
src/views/systemSetting/baseSetting/user/createUser/index.vue | 295 +++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 236 insertions(+), 59 deletions(-)
diff --git a/src/views/systemSetting/baseSetting/user/createUser/index.vue b/src/views/systemSetting/baseSetting/user/createUser/index.vue
index c67f1ca..c70b8e7 100644
--- a/src/views/systemSetting/baseSetting/user/createUser/index.vue
+++ b/src/views/systemSetting/baseSetting/user/createUser/index.vue
@@ -10,96 +10,99 @@
<main>
<div class="mainTitle">鍩虹淇℃伅</div>
<div class="mainContent">
- <el-form ref="form" :model="user">
+ <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
+ label-position="right">
<!-- 鐢ㄦ埛鍚嶇О -->
- <el-form-item class="optionItem">
- <div><span style="color: #ff3b6c;">*</span><label>鐢ㄦ埛鍚嶇О:</label></div>
- <div><el-input v-model="user.nick_name"></el-input></div>
+ <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="nick_name">
+ <el-input v-model="user.nick_name" placeholder="濉啓鐢ㄦ埛鍚嶇О"></el-input>
</el-form-item>
<!-- 鐢ㄦ埛瀵嗙爜 -->
- <el-form-item class="optionItem">
- <div><span style="color: #ff3b6c;">*</span><label>鐢ㄦ埛瀵嗙爜:</label></div>
- <div><el-input v-model="user.nick_name"></el-input></div>
+ <el-form-item class="optionItems" label="鐢ㄦ埛瀵嗙爜:" prop="password">
+ <el-input v-model="user.password" type="password" placeholder="璇疯緭鍏ョ敤鎴峰瘑鐮�"></el-input>
</el-form-item>
<!-- 鎵�灞炵敤鎴峰鍚� -->
- <el-form-item class="optionItem">
- <div><span style="color: #ff3b6c;">*</span><label>鎵�灞炵敤鎴峰鍚�:</label></div>
- <div><el-input v-model="user.nick_name"></el-input></div>
+ <el-form-item class="optionItem" label="鎵�灞炵敤鎴峰鍚�:" prop="true_name">
+ <el-input v-model="user.true_name" placeholder="璇峰～鍐欑敤鎴峰鍚�"></el-input>
</el-form-item>
<!-- 鎬у埆 -->
- <el-form-item class="optionItem">
- <div><span style="color: #ff3b6c;">*</span><label>鎬у埆:</label></div>
+ <el-form-item class="optionItem" label="鎬у埆:" prop="gender">
<el-radio-group v-model="user.gender">
<el-radio :label="1">鐢�</el-radio>
<el-radio :label="2">濂�</el-radio>
</el-radio-group>
</el-form-item>
<!-- 鏄惁鍏氬憳 -->
- <el-form-item class="optionItem">
- <div><span style="color: #ff3b6c;">*</span><label>鏄惁鍏氬憳:</label></div>
+ <el-form-item class="optionItem" label="鏄惁鍏氬憳:" prop="member">
<el-radio-group v-model="user.member">
<el-radio :label="1">鏄�</el-radio>
<el-radio :label="0">鍚�</el-radio>
</el-radio-group>
</el-form-item>
<!-- 鎵�灞炴墜鏈哄彿鐮� -->
- <el-form-item class="optionItem">
- <div><span style="color: #ff3b6c;">*</span><label>鎵�灞炴墜鏈哄彿鐮�:</label></div>
- <el-input v-model="user.phone"></el-input>
+ <el-form-item class="optionItem" label="鎵�灞炴墜鏈哄彿鐮�:" prop="phone">
+ <el-input v-model="user.phone" placeholder="璇峰～鍐欐墜鏈哄彿鐮�"></el-input>
</el-form-item>
<!-- 閭鍦板潃 -->
- <el-form-item class="optionItem">
- <div><label>閭鍦板潃:</label></div>
- <el-input v-model="user.mail"></el-input>
+ <el-form-item class="optionItem" label="閭鍦板潃:" prop="mail">
+ <el-input v-model="user.mail" placeholder="璇峰～鍐欓偖绠卞湴鍧�"></el-input>
</el-form-item>
<!-- 閫夋嫨瑙掕壊 -->
- <el-form-item class="optionItem">
- <div><span style="color: #ff3b6c;">*</span><label>閫夋嫨瑙掕壊:</label></div>
- <el-select v-model="user.role">
+ <el-form-item class="optionItem" label="閫夋嫨瑙掕壊:" prop="role">
+ <el-select v-model="user.role" placeholder="璇烽�夋嫨鎵�灞炶鑹�">
<el-option v-for="item in roleList" :key="item.name" :label="item.name" :value="item.value"
:disabled="item.disabled">
</el-option>
</el-select>
</el-form-item>
<!-- 鐢ㄦ埛绫诲瀷 -->
- <el-form-item class="optionItem">
- <div><span style="color: #ff3b6c;">*</span><label>鐢ㄦ埛绫诲瀷:</label></div>
- <el-select v-model="user.type">
+ <el-form-item class="optionItem" label="鐢ㄦ埛绫诲瀷:" prop="type">
+ <el-select v-model="user.type" placeholder="璇烽�夋嫨鐢ㄦ埛绫诲瀷">
<el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
:disabled="item.disabled">
</el-option>
</el-select>
</el-form-item>
<!-- 搴ф満/鍒嗘満 -->
- <el-form-item class="optionItem">
- <div><label>搴ф満/鍒嗘満:</label></div>
- <el-input v-model="user.nick_name"></el-input>
+ <el-form-item class="optionItem" label="搴ф満/鍒嗘満:" prop="telPhone">
+ <div class="optionHandleSp">
+ <el-input class="areaNumber" v-model="user.telPhone.areaNumber" placeholder="鐢佃瘽鍖哄彿">
+ </el-input>
+ <el-input class="telNumber" v-model="user.telPhone.phoneNumber" placeholder="鐢佃瘽鍙风爜">
+ </el-input>
+ <el-input class="moreNumber" v-model="user.telPhone.moreNumber" placeholder="鍒嗘満鍙风爜">
+ </el-input>
+ </div>
</el-form-item>
<!-- 鎵�灞為儴闂� -->
- <el-form-item class="optionItem">
- <div><span style="color: #ff3b6c;">*</span><label>鎵�灞為儴闂�:</label></div>
- <el-input v-model="user.nick_name"></el-input>
+ <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="department">
+ <el-select v-model="user.department" placeholder="璇烽�夋嫨鎵�灞為儴闂�">
+ <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
+ :disabled="item.disabled">
+ </el-option>
+ </el-select>
</el-form-item>
<!-- 褰撳墠鑱屽姟 -->
- <el-form-item class="optionItem">
- <div><span style="color: #ff3b6c;">*</span><label>褰撳墠鑱屽姟:</label></div>
- <!-- <el-select v-model="value" placeholder="璇烽�夋嫨">
- <el-option v-for="item in options" :key="item.value" :label="item.label"
- :value="item.value">
+ <el-form-item class="optionItem" label="褰撳墠鑱屽姟:" prop="work">
+ <el-select v-model="user.work" placeholder="璇烽�夋嫨褰撳墠鑱屽姟">
+ <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
+ :disabled="item.disabled">
</el-option>
- </el-select> -->
+ </el-select>
</el-form-item>
<!-- 濉啓鎵�灞瀖ac鍦板潃 -->
- <el-form-item class="optionItem">
- <div><label>濉啓鎵�灞瀖ac鍦板潃:</label></div>
- <el-input v-model="user.nick_name"></el-input>
+ <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac">
+ <el-input v-model="user.mac" placeholder="璇峰～鍐欐墍灞瀖ac鍦板潃"></el-input>
</el-form-item>
<!-- 濉啓鎵�灞瀒p鍦板潃 -->
- <el-form-item class="optionItem">
- <div><label>濉啓鎵�灞瀒p鍦板潃:</label></div>
- <el-input v-model="user.nick_name"></el-input>
+ <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip">
+ <el-input v-model="user.ip" placeholder="璇峰～鍐欐墍灞瀒p鍦板潃"></el-input>
+ </el-form-item>
+ <el-form-item class="optionBtn">
+ <el-button type="primary" class="btn submit" @click="handleUser">鎻愪氦</el-button>
+ <el-button class="btn reset">閲嶇疆</el-button>
</el-form-item>
</el-form>
+
</div>
</main>
</div>
@@ -107,24 +110,172 @@
<script>
export default {
data() {
+ const validateNickname = (rule, value, callback) => {
+ if (!value) {
+ callback(new Error("璇峰～鍐欑敤鎴峰悕绉�"));
+ }
+ };
+ const validatePass = (rule, value, callback) => {
+ if (!value) {
+ callback(new Error("璇峰～鍐欑櫥褰曞瘑鐮�"));
+ } else {
+ const rep = /^\w+$/;
+ if(!rep.test(value)){
+ callback(new Error("瀵嗙爜鍙兘鏄互鏁板瓧銆�26涓嫳鏂囧瓧姣嶆垨鑰呬笅鍒掔嚎缁勬垚鐨勫瓧绗︿覆"));
+ }
+ }
+ };
+ const validateTruename = (rule, value, callback) => {
+ if (!value) {
+ callback(new Error("璇峰～鍐欑敤鎴峰鍚�"));
+ } else {
+ const rep = /^[\u4E00-\u9FA5]{2,4}$/;
+ if(!rep.test(value)){
+ callback("璇疯緭鍏ユ纭殑鐢ㄦ埛濮撳悕");
+ }
+ }
+ };
+ const validatePhone = (rule, value, callback) => {
+ if (!value) {
+ callback(new Error("璇峰～鍐欐墜鏈哄彿鐮�"));
+ } else {
+ const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/
+ if(!rep.test(value)){
+ callback("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜");
+ }
+ }
+ };
+ const validateMail = (rule, value, callback) => {
+ if (value) {
+ const rep = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
+ if(!rep.test(value)){
+ callback(new Error("璇疯緭鍏ユ纭殑閭"))
+ }
+ }
+ };
+ const validateRole = (rule, value, callback) => {
+ if (!value) {
+ callback(new Error("璇峰～鍐欑櫥褰曞瘑鐮�"));
+ } else {
+ callback();
+ }
+ };
+ const validateType = (rule, value, callback) => {
+ if (!value) {
+ callback(new Error("璇峰～鍐欑櫥褰曞瘑鐮�"));
+ } else {
+ callback();
+ }
+ };
+ const validateDepartment = (rule, value, callback) => {
+ if (!value) {
+ callback(new Error("璇峰～鍐欑櫥褰曞瘑鐮�"));
+ } else {
+ callback();
+ }
+ };
+ const validateWork = (rule, value, callback) => {
+ if (!value) {
+ callback(new Error("璇峰～鍐欑櫥褰曞瘑鐮�"));
+ } else {
+ callback();
+ }
+ };
+ const validateMac = (rule, value, callback) => {
+ if (!value) {
+ callback(new Error("璇峰～鍐欑櫥褰曞瘑鐮�"));
+ } else {
+ callback();
+ }
+ };
+ const validateIp = (rule, value, callback) => {
+ if (!value) {
+ callback(new Error("璇峰～鍐欑櫥褰曞瘑鐮�"));
+ } else {
+ callback();
+ }
+ };
return {
user: {
nick_name: '',
password: '',
true_name: '',
gender: 1,
- member: 0,
+ member: 1,
phone: '',
mail: '',
- role: 0,
- type: 0,
+ role: null,
+ type: null,
+ telPhone: {
+ areaNumber: '',
+ phoneNumber: "",
+ moreNumber: "",
+ },
+ department: null,
+ work: null,
+ mac: '',
+ ip: '',
+ },
+ createUserRules: {
+ nick_name: [
+ { required: true, trigger: "blur", validator: validateNickname },
+ ],
+ password: [
+ { required: true, trigger: "blur", validator: validatePass },
+ ],
+ true_name: [
+ { required: true, trigger: "blur", validator: validateTruename },
+ ],
+ gender: [
+ { required: true, trigger: "blur" },
+ ],
+ member: [
+ { required: true, trigger: "blur" },
+ ],
+ phone: [
+ { required: true, trigger: "blur", validator: validatePhone },
+ ],
+ mail: [
+ { required: false, trigger: "blur", validator: validateMail },
+ ],
+ role: [
+ { required: true, trigger: "blur", validator: validateRole },
+ ],
+ type: [
+ { required: true, trigger: "blur", validator: validateType },
+ ],
+ telPhone: [
+ { required: false, trigger: "blur" },
+ ],
+ department: [
+ { required: true, trigger: "blur", validator: validateDepartment },
+ ],
+ work: [
+ { required: true, trigger: "blur", validator: validateWork },
+ ],
+ mac: [
+ { required: false, trigger: "blur", validator: validateMac },
+ ],
+ ip: [
+ { required: false, trigger: "blur", validator: validateIp },
+ ],
},
roleList: [
- { name: '璇烽�夋嫨鎵�灞炶鑹�', value: 0, disabled: true }, { name: '瑙掕壊1', value: 1 }, { name: '瑙掕壊2', value: 2 }
+ { name: '瑙掕壊1', value: 1 }, { name: '瑙掕壊2', value: 2 }
],
typeList: [
- { name: '璇烽�夋嫨鐢ㄦ埛绫诲瀷', value: 0, disabled: true }, { name: '绫诲瀷1', value: 1 }, { name: '绫诲瀷2', value: 2 }
+ { name: '绫诲瀷1', value: 1 }, { name: '绫诲瀷2', value: 2 }
]
+ }
+ },
+ created() {
+ this.$axios.get("http://42.193.1.25:8082/sccg/role/listAll").then(res=>{
+ console.log(res);
+ });
+ },
+ methods: {
+ handleUser() {
+ console.log(this.user);
}
},
}
@@ -132,8 +283,11 @@
<style lang="scss" scpoed>
.createUser {
border-radius: 1px;
+ // min-width: 1024px;
+ // min-height: 1450px;
+ background-color: #fff;
+
header {
- background-color: #fff;
display: flex;
justify-content: space-between;
height: 60px;
@@ -143,33 +297,56 @@
font-weight: 600;
color: #666;
}
+
.headerTip span {
color: #ff3b6c;
}
+
.headerTip label {
color: #999999;
}
}
+
main {
- background-color: #fff;
- margin-top: 1px;
+ border-top: 1px solid #f0f2f5;
text-align: left;
+ padding: 0 55px;
.mainTitle {
- margin-left: 60px;
+ // margin-left: 60px;
color: #666;
font-weight: 600;
+ line-height: 100px;
font-size: 14px;
}
+
.mainContent {
- padding: 0px 100px;
+ display: flex;
+ justify-content: center;
.el-form-item__content {
- display: flex;
- justify-content: center;
- div{
- width: 160px;
- text-align: right;
+ width: 400px;
+
+ .el-select {
+ width: 100%;
}
}
+ .optionHandleSp{
+ display: flex;
+ .areaNumber,.moreNumber{
+ flex: 1;
+ }
+ .telNumber{
+ flex: 2;
+ }
+ }
+ .optionBtn{
+ display: flex;
+ justify-content: center;
+ margin-top: 80px;
+ .btn{
+ padding: 12px 50px;
+ }
+ }
+
}
}
}
--
Gitblit v1.8.0