From e1aa0ecffbabd618c71e4ad94370fb8dffe6ee1c Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期日, 21 一月 2024 20:54:49 +0800
Subject: [PATCH] 优化

---
 src/views/systemSetting/baseSetting/user/components/createUser/index.vue |  797 +++++++++++++++++++++++++++++++++++++++-----------------
 1 files changed, 555 insertions(+), 242 deletions(-)

diff --git a/src/views/systemSetting/baseSetting/user/components/createUser/index.vue b/src/views/systemSetting/baseSetting/user/components/createUser/index.vue
index c3b9f52..70c6b20 100644
--- a/src/views/systemSetting/baseSetting/user/components/createUser/index.vue
+++ b/src/views/systemSetting/baseSetting/user/components/createUser/index.vue
@@ -2,175 +2,436 @@
     <div class="createUser">
         <main>
             <div class="mainContent">
-                <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
-                    label-position="right">
-                    <!-- 鐢ㄦ埛鍚嶇О
-                    <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="nickName">
-                        <el-input v-model="user.nickName" placeholder="濉啓鐢ㄦ埛鍚嶇О"></el-input>
-                    </el-form-item> -->
-                    <!-- 鐢ㄦ埛瀵嗙爜 -->
-                    <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" label="鎵�灞炵敤鎴峰鍚�:" prop="username">
-                        <el-input v-model="user.username" placeholder="璇峰~鍐欑敤鎴峰鍚�"></el-input>
-                    </el-form-item>
-                    <!-- 鎬у埆 -->
-                    <!-- <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" label="鏄惁鍏氬憳:" prop="isDy">
-                        <el-radio-group v-model="user.isDy">
-                            <el-radio :label="1">鏄�</el-radio>
-                            <el-radio :label="0">鍚�</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <!-- 鎵�灞炴墜鏈哄彿鐮� -->
-                    <el-form-item class="optionItem" label="鎵�灞炴墜鏈哄彿鐮�:" prop="mobile">
-                        <el-input v-model="user.mobile" placeholder="璇峰~鍐欐墜鏈哄彿鐮�"></el-input>
-                    </el-form-item>
-                    <!-- 閭鍦板潃 -->
-                    <el-form-item class="optionItem" label="閭鍦板潃:" prop="email">
-                        <el-input v-model="user.email" placeholder="璇峰~鍐欓偖绠卞湴鍧�"></el-input>
-                    </el-form-item>
-                    <!-- 閫夋嫨瑙掕壊 -->
-                    <el-form-item class="optionItem" label="閫夋嫨瑙掕壊:" prop="role">
-                        <el-select v-model="user.role" placeholder="璇烽�夋嫨鎵�灞炶鑹�">
-                            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"
-                                :disabled="item.disabled">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <!-- 鐢ㄦ埛绫诲瀷 -->
-                    <el-form-item class="optionItem" label="鐢ㄦ埛绫诲瀷:" prop="userType">
-                        <el-select v-model="user.userType" placeholder="璇烽�夋嫨鐢ㄦ埛绫诲瀷">
-                            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"
-                                :disabled="item.disabled">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <!-- 搴ф満/鍒嗘満 -->
-                    <el-form-item class="optionItem" label="搴ф満/鍒嗘満:" prop="zj">
-                        <div class="optionHandleSp">
-                            <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="鐢佃瘽鍖哄彿">
-                            </el-input>
-                            <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="鐢佃瘽鍙风爜">
-                            </el-input>
-                            <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="鍒嗘満鍙风爜">
-                            </el-input>
+                <el-form
+                    ref="user"
+                    label-width="140px"
+                    autoComplete="on"
+                    :model="user"
+                    :rules="createUserRules"
+                    label-position="right"
+                >
+                    <!-- 鐢ㄦ埛鍚嶇О -->
+                    <div class="user-item">
+                        <div class="item-left">
+                            <el-form-item
+                                class="optionItem"
+                                label="鐢ㄦ埛鍚嶇О:"
+                                prop="username"
+                            >
+                                <el-input
+                                    v-model="user.username"
+                                    placeholder="濉啓鐢ㄦ埛鍚嶇О"
+                                    autoComplete="new-username"
+                                >
+                                </el-input>
+                            </el-form-item>
                         </div>
-                    </el-form-item>
+                        <div class="item-right"></div>
+                    </div>
+                    <!-- 鐢ㄦ埛瀵嗙爜 -->
+                    <div v-if="!user.id" class="user-item">
+                        <div class="item-left">
+                            <el-form-item
+                                class="optionItems"
+                                label="鐢ㄦ埛瀵嗙爜:"
+                                prop="password"
+                            >
+                                <el-input
+                                    v-model="user.password"
+                                    type="password"
+                                    autoComplete="new-password"
+                                    placeholder="璇疯緭鍏ョ敤鎴峰瘑鐮�"
+                                ></el-input>
+                            </el-form-item>
+                        </div>
+                        <div class="item-right"></div>
+                        <!-- 閲嶆柊杈撳叆瀵嗙爜鍗充负淇敼锛屽瘑鐮佹湁鏁堟湡榛樿涓�3涓湀 -->
+                    </div>
+                    <!-- 鎵�灞炵敤鎴峰鍚� -->
+                    <div class="user-item">
+                        <div class="item-left">
+                            <el-form-item
+                                class="optionItem"
+                                label="鎵�灞炵敤鎴峰鍚�:"
+                                prop="nickName"
+                            >
+                                <el-input
+                                    v-model="user.nickName"
+                                    placeholder="璇峰~鍐欑敤鎴峰鍚�"
+                                ></el-input>
+                            </el-form-item>
+                        </div>
+                        <div class="item-right"></div>
+                    </div>
+                    <!-- 鎬у埆 -->
+                    <div class="user-item">
+                        <div class="item-left">
+                            <el-form-item
+                                class="optionItem"
+                                label="鎬у埆:"
+                                prop="sex"
+                            >
+                                <el-radio-group v-model="user.sex">
+                                    <el-radio :label="1">鐢�</el-radio>
+                                    <el-radio :label="0">濂�</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                        </div>
+                        <div class="item-right"></div>
+                    </div>
+                    <!-- 鏄惁鍏氬憳 -->
+                    <div class="user-item">
+                        <div class="item-left">
+                            <el-form-item
+                                class="optionItem"
+                                label="鏄惁鍏氬憳:"
+                                prop="isDy"
+                            >
+                                <el-radio-group v-model="user.isDy">
+                                    <el-radio :label="1">鏄�</el-radio>
+                                    <el-radio :label="0">鍚�</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                        </div>
+                        <div class="item-right"></div>
+                    </div>
+                    <!-- 鎵�灞炴墜鏈哄彿鐮� -->
+                    <div class="user-item">
+                        <div class="item-left">
+                            <el-form-item
+                                class="optionItem"
+                                label="鎵�灞炴墜鏈哄彿鐮�:"
+                                prop="mobile"
+                            >
+                                <el-input
+                                    v-model="user.mobile"
+                                    maxlength="11"
+                                    placeholder="璇峰~鍐欐墜鏈哄彿鐮�"
+                                ></el-input>
+                            </el-form-item>
+                        </div>
+                        <div class="item-right"></div>
+                    </div>
+                    <!-- 閭鍦板潃 -->
+                    <div class="user-item">
+                        <div class="item-left">
+                            <el-form-item
+                                class="optionItem"
+                                label="閭鍦板潃:"
+                                prop="email"
+                            >
+                                <el-input
+                                    v-model="user.email"
+                                    placeholder="璇峰~鍐欓偖绠卞湴鍧�"
+                                ></el-input>
+                            </el-form-item>
+                        </div>
+                        <div class="item-right"></div>
+                    </div>
+                    <!-- 閫夋嫨瑙掕壊 -->
+                    <div class="user-item">
+                        <div class="item-left">
+                            <el-form-item
+                                class="optionItem"
+                                label="閫夋嫨瑙掕壊:"
+                                prop="role"
+                            >
+                                <el-select
+                                    v-model="user.role"
+                                    placeholder="璇烽�夋嫨鎵�灞炶鑹�"
+                                    multiple
+                                    collapse-tags
+                                >
+                                    <el-option
+                                        v-for="item in roleList"
+                                        :key="item.id"
+                                        :label="item.name"
+                                        :value="item.id"
+                                    >
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </div>
+                        <div class="item-right"></div>
+                    </div>
+                    <!-- 鐢ㄦ埛绫诲瀷 -->
+                    <div class="user-item">
+                        <div class="item-left">
+                            <el-form-item
+                                class="optionItem"
+                                label="鐢ㄦ埛绫诲瀷:"
+                                prop="userType"
+                            >
+                                <el-select
+                                    v-model="user.userType"
+                                    placeholder="璇烽�夋嫨鐢ㄦ埛绫诲瀷"
+                                >
+                                    <el-option
+                                        v-for="item in typeList"
+                                        :key="item.id"
+                                        :label="item.name"
+                                        :value="item.id"
+                                    >
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </div>
+                        <div class="item-right"></div>
+                    </div>
+                    <!-- 搴ф満/鍒嗘満 -->
+                    <div class="user-item sp-item">
+                        <div class="item-left">
+                            <el-form-item label="搴ф満/鍒嗘満:" prop="zjarea">
+                                <el-input
+                                    v-model="user.zjarea"
+                                    placeholder="鐢佃瘽鍖哄彿"
+                                >
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item prop="zjnumber" class="left-px">
+                                <el-input
+                                    v-model="user.zjnumber"
+                                    placeholder="鐢佃瘽鍙风爜"
+                                >
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item prop="zjother" class="left-px">
+                                <el-input
+                                    v-model="user.zjother"
+                                    placeholder="鍒嗘満鍙风爜"
+                                >
+                                </el-input>
+                            </el-form-item>
+                        </div>
+                        <div class="item-right"></div>
+                    </div>
                     <!-- 鎵�灞為儴闂� -->
-                    <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="departmentId">
-                        <el-select v-model="user.departmentId" placeholder="璇烽�夋嫨鎵�灞為儴闂�">
-                            <el-option v-for="item in departList" :key="item.name" :label="item.departName"
-                                :value="item.id">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
+                    <div class="user-item">
+                        <div class="item-left">
+                            <el-form-item
+                                class="optionItem"
+                                label="鎵�灞為儴闂�:"
+                                prop="departmentId"
+                            >
+                                <departTree
+                                    :depart="userDepart"
+                                    @selectDepart="selectDepart"
+                                ></departTree>
+                            </el-form-item>
+                        </div>
+                        <div class="item-right"></div>
+                    </div>
                     <!-- 褰撳墠鑱屽姟 -->
-                    <el-form-item class="optionItem" label="褰撳墠鑱屽姟:" prop="jobTitle">
-                        <el-input v-model="user.jobTitle" placeholder="璇疯緭鍏ュ綋鍓嶈亴鍔�"></el-input>
-                    </el-form-item>
+                    <div class="user-item">
+                        <div class="item-left">
+                            <el-form-item
+                                class="optionItem"
+                                label="褰撳墠鑱屽姟:"
+                                prop="jobTitle"
+                            >
+                                <el-input
+                                    v-model="user.jobTitle"
+                                    placeholder="璇疯緭鍏ュ綋鍓嶈亴鍔�"
+                                ></el-input>
+                            </el-form-item>
+                        </div>
+                        <div class="item-right"></div>
+                    </div>
                     <!-- 濉啓鎵�灞瀖ac鍦板潃 -->
-                    <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac">
-                        <el-input v-model="user.mac" placeholder="璇峰~鍐欐墍灞瀖ac鍦板潃"></el-input>
-                    </el-form-item>
+                    <div class="user-item">
+                        <div class="item-left">
+                            <el-form-item
+                                class="optionItem"
+                                label="濉啓鎵�灞瀖ac鍦板潃:"
+                                prop="mac"
+                            >
+                                <el-input
+                                    v-model="user.mac"
+                                    placeholder="璇峰~鍐欐墍灞瀖ac鍦板潃"
+                                ></el-input>
+                            </el-form-item>
+                        </div>
+                        <div class="item-right"></div>
+                    </div>
                     <!-- 濉啓鎵�灞瀒p鍦板潃 -->
-                    <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip">
-                        <el-input v-model="user.ip" placeholder="璇峰~鍐欐墍灞瀒p鍦板潃"></el-input>
-                    </el-form-item>
+                    <div class="user-item">
+                        <div class="item-left">
+                            <el-form-item
+                                class="optionItem"
+                                label="濉啓鎵�灞瀒p鍦板潃:"
+                                prop="ip"
+                            >
+                                <el-input
+                                    v-model="user.ip"
+                                    placeholder="璇峰~鍐欐墍灞瀒p鍦板潃"
+                                ></el-input>
+                            </el-form-item>
+                        </div>
+                        <div class="item-right"></div>
+                    </div>
+                    <div class="user-item sp-item">
+                        <div class="item-left">
+                            <el-form-item
+                                class="optionItem"
+                                label="璐﹀彿鏈夋晥鏈�:"
+                                prop="days"
+                            >
+                                <el-input
+                                    v-model="user.days"
+                                    placeholder="璇峰~鍐欒处鍙锋湁鏁堟湡澶╂暟"
+                                ></el-input>
+                            </el-form-item>
+
+                            <el-form-item class="left-px">
+                                <span
+                                    style="
+                                        margin: 0 20px 0 10px;
+                                        font-size: 18px;
+                                    "
+                                    >澶�</span
+                                >
+                            </el-form-item>
+
+                            <el-form-item class="left-px">
+                                <el-checkbox
+                                    label="闀挎湡"
+                                    v-model="user.dayCheck"
+                                    @change="dayaCheck"
+                                ></el-checkbox>
+                            </el-form-item>
+                        </div>
+                        <!-- <div class="item-left">
+                            <el-form-item label="搴ф満/鍒嗘満:" prop="zjarea">
+                                <el-input
+                                    v-model="user.zjarea"
+                                    placeholder="鐢佃瘽鍖哄彿"
+                                >
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item prop="zjother" class="left-px">
+                                <el-input
+                                    v-model="user.zjother"
+                                    placeholder="鍒嗘満鍙风爜"
+                                >
+                                </el-input>
+                            </el-form-item>
+                        </div> -->
+                        <div class="item-right"></div>
+                    </div>
                     <el-form-item>
                         <div class="optionBtn">
-                            <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦
+                            <el-button
+                                type="primary"
+                                class="btn submit"
+                                @click.native.prevent="handleUser"
+                                >鎻愪氦
                             </el-button>
-                            <el-button class="btn reset" @click.native.prevent="resetForm">閲嶇疆</el-button>
+                            <el-button
+                                class="btn reset"
+                                @click.native.prevent="resetForm"
+                                >閲嶇疆</el-button
+                            >
                         </div>
                     </el-form-item>
                 </el-form>
-
             </div>
         </main>
     </div>
 </template>
 <script>
+import { getTypeList } from "@/utils/helper";
+import departTree from "@/components/departTree/index.vue";
 export default {
+    components: {
+        departTree,
+    },
     data() {
-        // const validateNickname = (rule, value, callback) => {
-        //     if (!value) {
-        //         callback(new Error("鐢ㄦ埛鍚嶇О涓嶈兘涓虹┖"));
-        //     }else{
-        //         callback();
-        //     }
-        // };
-        const validatePass = (rule, value, callback) => {
+        const validateNickname = (rule, value, callback) => {
             if (!value) {
-                callback(new Error("鐢ㄦ埛瀵嗙爜涓嶈兘涓虹┖"));
+                callback(new Error("鎵�灞炲鍚嶄笉鑳戒负绌�"));
             } else {
-                const rep = /^\w+$/;
-                if (!rep.test(value)) {
-                    callback(new Error("瀵嗙爜鍙兘鏄互鏁板瓧銆�26涓嫳鏂囧瓧姣嶆垨鑰呬笅鍒掔嚎缁勬垚鐨勫瓧绗︿覆"));
-                }else{
-                    callback();
-                }
+                callback();
             }
+        };
+        const validatePass = (rule, value, callback) => {
+            //蹇呴』鍖呭惈瀛楁瘝銆佹暟瀛椼�侀暱搴﹀啀6-16浣嶄箣闂�
+            var rep = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/;
+            if (!rep.test(value)) {
+                callback(
+                    new Error(
+                        "瀵嗙爜闀垮害8鍒�16浣嶄笖瀵嗙爜涓殑瀛楃蹇呴』鍖呭惈瀛楁瘝澶у啓鍜屽瓧姣嶅皬鍐欏拰蹇呴』鍖呭惈鏁板瓧锛屼笉鑳藉寘鍚┖鏍�"
+                    )
+                );
+            } else {
+                callback();
+            }
+
+            // if (!value) {
+            //     callback(new Error("鐢ㄦ埛瀵嗙爜涓嶈兘涓虹┖"));
+            // } else {
+            //     if (value.length < 6 || value.length > 16){
+            //         callback(new Error("鐢ㄦ埛瀵嗙爜闀垮害涓嶅悎娉�"));
+            //     }else {
+            //         const rep = /^\w+$/;
+            //         if (!rep.test(value)) {
+            //             callback(new Error("瀵嗙爜鍙兘鏄互鏁板瓧銆�26涓嫳鏂囧瓧姣嶆垨鑰呬笅鍒掔嚎缁勬垚鐨勫瓧绗︿覆"));
+            //         } else {
+            //             callback();
+            //         }
+            //     }
+            // }
         };
         const validateTruename = (rule, value, callback) => {
             if (!value) {
                 callback(new Error("鐢ㄦ埛濮撳悕涓嶈兘涓虹┖"));
             } else {
-                const rep = /^[\u4E00-\u9FA5]{2,4}$/;
-                if (!rep.test(value)) {
-                    callback("璇疯緭鍏ユ纭殑鐢ㄦ埛濮撳悕");
-                }else{
-                    callback();
-                }
+                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}$)/
+                const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/;
                 if (!rep.test(value)) {
                     callback("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜");
-                }else{
+                } else {
                     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 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("璇疯緭鍏ユ纭殑閭"));
+                } else {
+                    callback();
+                }
+            } else {
+                callback();
+            }
+        };
         const validateRole = (rule, value, callback) => {
             if (!value) {
                 callback(new Error("鎵�灞炶鑹蹭笉鑳戒负绌�"));
             } else {
-                callback()
+                callback();
             }
         };
         const validateType = (rule, value, callback) => {
             if (!value) {
                 callback(new Error("鐢ㄦ埛绫诲瀷涓嶈兘涓虹┖"));
             } else {
-                callback()
+                callback();
             }
         };
         const validateDepartment = (rule, value, callback) => {
             if (!value) {
                 callback(new Error("璇烽�夋嫨鐢ㄦ埛閮ㄩ棬"));
             } else {
-                callback()
+                callback();
             }
         };
         const validateWork = (rule, value, callback) => {
@@ -180,167 +441,206 @@
                 callback();
             }
         };
-        // const validateMac = (rule, value, callback) => {
-        //     if (value) {
-        //         callback(new Error(""));
-        //     }else{
-        //         callback()
-        //     }
-        // };
-        // const validateIp = (rule, value, callback) => {
-        //     if (value) {
-        //     }else{
-        //         callback()
-        //     }
-        // };
+        const validateMac = (rule, value, callback) => {
+            if (value) {
+                callback();
+            } else {
+                callback();
+            }
+        };
+        const validateIp = (rule, value, callback) => {
+            if (value) {
+                callback();
+            } else {
+                callback();
+            }
+        };
         return {
             user: {
-                // nickName: '',
-                password: '',
-                username: '',
-                gender: 1,
+                nickName: "",
+                password: "",
+                username: "",
+                sex: 1,
                 isDy: 0,
-                mobile: '',
-                email: '',
+                mobile: "",
+                email: "",
                 role: null,
                 userType: null,
-                zj: {
-                    areaNumber: '',
-                    phoneNumber: "",
-                    moreNumber: "",
-                },
+                zjarea: "",
+                zjnumber: "",
+                zjother: "",
                 departmentId: null,
                 jobTitle: null,
-                mac: '',
-                ip: '',
+                mac: "",
+                ip: "",
+                dayCheck: true
             },
+            userDepart: {},
             createUserRules: {
-                // nickName: [
-                //     { required: true, trigger: "blur", validator: validateNickname },
-                // ],
+                nickName: [
+                    { required: true, trigger: "blur", validator: validateNickname },
+                ],
                 password: [
                     { required: true, trigger: "blur", validator: validatePass },
                 ],
                 username: [
                     { required: true, trigger: "blur", validator: validateTruename },
                 ],
-                gender: [
-                    { required: true, trigger: "blur" },
-                ],
-                isDy: [
-                    { required: true, trigger: "blur" },
-                ],
-                mobile: [
-                    { required: true, trigger: "blur", validator: validatePhone },
-                ],
-                // email: [
-                //     { required: false, trigger: "blur", validator: validateMail },
-                // ],
-                role: [
-                    { required: true, trigger: "change", validator: validateRole },
-                ],
+                sex: [{ required: true, trigger: "blur" }],
+                isDy: [{ required: true, trigger: "blur" }],
+                mobile: [{ required: true, trigger: "blur", validator: validatePhone }],
+                email: [{ required: true, trigger: "blur", validator: validateMail }],
+                role: [{ required: true, trigger: "change", validator: validateRole }],
                 userType: [
                     { required: true, trigger: "change", validator: validateType },
                 ],
-                zj: [
-                    { required: false, trigger: "blur" },
-                ],
+                zj: [{ required: false, trigger: "blur" }],
                 departmentId: [
                     { required: true, trigger: "change", validator: validateDepartment },
                 ],
                 jobTitle: [
                     { required: true, trigger: "blur", validator: validateWork },
                 ],
-                // mac: [
-                //     { required: false, trigger: "blur", validator: validateMac },
-                // ],
-                // ip: [
-                //     { required: false, trigger: "blur", validator: validateIp },
-                // ],
+                mac: [{ required: false, trigger: "blur", validator: validateMac }],
+                ip: [{ required: false, trigger: "blur", validator: validateIp }],
             },
-            roleList: [
-                { name: '瑙掕壊1', id: 1 }, { name: '瑙掕壊2', id: 2 }
-            ],
-            typeList: [
-                { name: '绫诲瀷1', id: 1 }, { name: '绫诲瀷2', id: 2 }
-            ],
-            departList: []
-        }
+            roleList: [],
+            typeList: [],
+            departList: [],
+            mylabel: "",
+            defaultProps: {
+                children: "children",
+                label: "departName",
+                disabled: (data, node) => {
+                    if (node.level === 1 && node.childNodes.length !== 0) {
+                        return !data.leaf;
+                    }
+                },
+            },
+        };
     },
     created() {
-        const that = this;
         // 鑾峰彇瑙掕壊鍒楄〃
         this.getRoleList();
-        // 鑾峰彇鍏ㄩ儴閮ㄩ棬鍒楄〃
-        this.$axios.get('sccg/depart/page').then(res => {
-            that.departList = res.data.records;
-        })
+        // 鑾峰彇鐢ㄦ埛绫诲瀷
+        this.getUserTypeList();
+        if (this.userInfo) {
+            this.user = this.userInfo
+
+            this.user.role = this.userInfo.roles.map(o => o.id)
+
+            if (this.userInfo.depart && this.userInfo.depart.length > 0) {
+                this.userDepart = this.userInfo.depart[this.userInfo.depart.length - 1]
+                this.user.departmentId = this.userInfo.depart[this.userInfo.depart.length - 1].id
+            }
+            if (!this.userInfo.expirationDate || this.userInfo.expirationDate == '2199-12-31') {
+                this.userInfo.dayCheck = true
+            }
+        }
     },
     methods: {
         // 鎻愪氦娉ㄥ唽
         handleUser() {
-            this.$refs['user'].validate((valid) => {
-                console.log(valid);
+            this.$refs["user"].validate((valid) => {
                 if (valid) {
                     const { user } = this;
                     console.log(user);
-                    this.$axios.post('sccg/admin/register', {
-                        departmentId: user.departmentId,
-                        email: user.email,
-                        jsDy: user.isDy,
-                        jobTitle: user.jobTitle,
-                        mobile: user.mobile,
-                        nickName: user.nickName,
-                        password: user.password,
-                        userType: user.userType,
-                        username: user.username,
-                    }).then(res => {
-                        if (res.code === 200) {
-                            console.log(1);
-                            this.$message({
-                                type:'success',
-                                message:res.code,
-                            })
-                            this.$emit('sendDialog', { flag: false });
-                        }else if(res.code === 500 && res.message === "鎿嶄綔澶辫触"){
-                            this.$message({
-                                type:'warning',
-                                message:'璇ョ敤鎴峰凡娉ㄥ唽'
-                            })
-                        }
-                    })
-                }else{
-                    return false
+                    this.$axios
+                        .post("sccg/admin/register", {
+                            id: user.id,
+                            departmentId: user.departmentId,
+                            email: user.email,
+                            icon: "",
+                            isDy: `${user.isDy}`,
+                            jobTitle: user.jobTitle,
+                            mobile: user.mobile,
+                            note: "",
+                            roleIds: user.role,
+                            // nickName: user.nickName,
+                            sex: `${user.sex}`,
+                            password: user.password,
+                            userType: user.userType,
+                            username: user.username,
+                            zj: user.zjarea + `${user.zjnumber}` + user.zjother,
+                            nickName: user.nickName,
+                            days: user.days
+                            // departName:user.departName,
+                        })
+                        .then((res) => {
+                            if (res.code === 200) {
+                                console.log(1);
+                                this.$message({
+                                    type: "success",
+                                    message: res.message,
+                                });
+                                this.$emit("sendDialog", { flag: false });
+                            } else if (res.code === 500 && res.message === "鎿嶄綔澶辫触") {
+                                this.$message({
+                                    type: "warning",
+                                    message: "璇ョ敤鎴峰凡娉ㄥ唽",
+                                });
+                            } else {
+                                this.$message({
+                                    type: "warning",
+                                    message: res.message,
+                                });
+                            }
+                        });
+                } else {
+                    return false;
                 }
-            })
+            });
         },
         // 鑾峰彇瑙掕壊鍒楄〃
         getRoleList() {
             this.$axios({
-                method: 'get',
-                url: 'sccg/role/listAll',
-            })
-                .then(res => {
-                    this.roleList = res.data;
-                })
+                method: "get",
+                url: "sccg/role/listAll",
+            }).then((res) => {
+                this.roleList = res.data;
+            });
+        },
+        dayaCheck(e) {
+            if (e) {
+                this.user.days = null
+            }
+            this.user.dayCheck = e
         },
         // 閲嶇疆琛ㄥ崟
-        resetForm(){
-            this.$refs['user'].resetFields();
-        }
+        resetForm() {
+            this.$refs["user"].resetFields();
+        },
+        // 鑾峰緱閮ㄩ棬鍚嶇О
+        getDepartName(data) {
+            this.departList.forEach((item) => {
+                if (item.id === data) {
+                    this.user.departName = item.departName;
+                }
+            });
+        },
+        // 鑾峰彇鐢ㄦ埛绫诲瀷
+        async getUserTypeList() {
+            this.typeList = await getTypeList(1, "07");
+        },
+        selectDepart(depart) {
+            if (depart) {
+                this.user.departmentId = depart.departId;
+                this.user.departName = depart.departName;
+            }
+        },
     },
-    props: ['sendDialog']
-}
+    props: ["sendDialog", "userInfo"],
+};
 </script>
 <style lang="scss" scoped>
 .createUser {
     border-radius: 1px;
-    background-color: #09152f;
+    // background-color: #09152f;
 
     main {
         text-align: left;
         padding: 0 55px;
-        background-color: #09152f;
+        // background-color: #09152f;
         padding-bottom: 50px;
         padding-top: 20px;
 
@@ -348,34 +648,44 @@
             display: flex;
             justify-content: center;
             margin-top: 50px;
+            width: 100%;
+            // &::v-deep .el-form-item__label {
+            //   color: #4b9bb7;
+            // }
 
-            &::v-deep .el-form-item__label {
-                color: #4b9bb7;
-            }
-
-            &::v-deep .el-input__inner {
-                background-color: #09152f;
-                border: 1px solid #17324c;
-            }
+            // &::v-deep .el-input__inner {
+            //   background-color: #09152f;
+            //   border: 1px solid #17324c;
+            // }
 
             .el-form-item__content {
                 width: 400px;
-
                 .el-select {
                     width: 100%;
                 }
             }
 
-            .optionHandleSp {
-                display: flex;
+            .sp-item {
+                .item-left {
+                    display: flex;
+                }
+            }
 
-                .areaNumber,
-                .moreNumber {
-                    flex: 1;
+            .user-item {
+                display: flex;
+                justify-content: space-between;
+                .item-left {
+                    width: 500px;
+                }
+                .item-right {
+                    line-height: 40px;
+                    color: #4b9bb7;
+                    font-size: 12px;
+                    // margin-left: 16px;
                 }
 
-                .telNumber {
-                    flex: 2;
+                .left-px :deep(.el-form-item__content) {
+                    margin-left: 0px !important;
                 }
             }
 
@@ -387,8 +697,11 @@
                     padding: 12px 50px;
                 }
             }
-
         }
     }
 }
-</style>
\ No newline at end of file
+
+::v-deep .el-form-item__error {
+    width: 608px;
+}
+</style>

--
Gitblit v1.8.0