From 0d7d6fc9a5c40ccc90190b0f24039ec1362f120f Mon Sep 17 00:00:00 2001
From: “dzb” <2632970487@qq.com>
Date: 星期一, 17 十月 2022 11:33:10 +0800
Subject: [PATCH] 新增设备管理、完善消息新增,修改bug

---
 src/views/systemSetting/baseSetting/user/components/createUser/index.vue |  389 ++++++++++++++++++++++++++++++++++++-------------------
 1 files changed, 256 insertions(+), 133 deletions(-)

diff --git a/src/views/systemSetting/baseSetting/user/components/createUser/index.vue b/src/views/systemSetting/baseSetting/user/components/createUser/index.vue
index ab14172..2ef5e07 100644
--- a/src/views/systemSetting/baseSetting/user/components/createUser/index.vue
+++ b/src/views/systemSetting/baseSetting/user/components/createUser/index.vue
@@ -5,93 +5,163 @@
                 <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
                     label-position="right">
                     <!-- 鐢ㄦ埛鍚嶇О -->
-                    <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="username">
-                        <el-input v-model="user.username" placeholder="濉啓鐢ㄦ埛鍚嶇О" autoComplete="new-username"></el-input>
-                    </el-form-item>
-                    <!-- 鐢ㄦ埛瀵嗙爜 -->
-                    <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>
-                    <!-- 鎵�灞炵敤鎴峰鍚� -->
-                    <el-form-item class="optionItem" label="鎵�灞炵敤鎴峰鍚�:" prop="nickName">
-                        <el-input v-model="user.nickName" placeholder="璇峰~鍐欑敤鎴峰鍚�"></el-input>
-                    </el-form-item>
-                    <!-- 鎬у埆 -->
-                    <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>
-                    <!-- 鏄惁鍏氬憳 -->
-                    <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" maxlength="11" 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="璇烽�夋嫨鎵�灞炶鑹�" multiple collapse-tags>
-                            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
-                            </el-option>
-                        </el-select>
-                        <!-- <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">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <!-- 搴ф満/鍒嗘満 -->
                     <div class="user-item">
-                        <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 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>
+                        <div class="item-right"></div>
+                    </div>
+                    <!-- 鐢ㄦ埛瀵嗙爜 -->
+                    <div 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">閲嶆柊杈撳叆瀵嗙爜鍗充负淇敼锛屽瘑鐮佹湁鏁堟湡榛樿涓�3涓湀</div>
+                    </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="璇烽�夋嫨鎵�灞為儴闂�" @change="getDepartName">
-                            <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">
+                                <el-select v-model="user.departmentId" placeholder="璇烽�夋嫨鎵�灞為儴闂�" @change="getDepartName">
+                                    <el-option :value="mylabel">
+                                        <el-tree ref="tree" :check-strictly="true" :data="departList"
+                                            :props="defaultProps" show-checkbox @check-change="handleCheck"
+                                            default-expand-all node-key="id">
+                                        </el-tree>
+                                    </el-option>
+                                </el-select>
+                            </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>
                     <el-form-item>
                         <div class="optionBtn">
                             <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦
@@ -106,6 +176,7 @@
     </div>
 </template>
 <script>
+import { getTypeList } from '@/utils/helper'
 export default {
     data() {
         const validateNickname = (rule, value, callback) => {
@@ -131,12 +202,7 @@
             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) => {
@@ -156,10 +222,10 @@
                 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{
+                } else {
                     callback();
                 }
-            }else{
+            } else {
                 callback();
             }
         };
@@ -194,14 +260,14 @@
         const validateMac = (rule, value, callback) => {
             if (value) {
                 callback();
-            }else{
+            } else {
                 callback()
             }
         };
         const validateIp = (rule, value, callback) => {
             if (value) {
                 callback();
-            }else{
+            } else {
                 callback()
             }
         };
@@ -244,7 +310,7 @@
                     { required: true, trigger: "blur", validator: validatePhone },
                 ],
                 email: [
-                    { required: false, trigger: "blur", validator: validateMail },
+                    { required: true, trigger: "blur", validator: validateMail },
                 ],
                 role: [
                     { required: true, trigger: "change", validator: validateRole },
@@ -269,24 +335,34 @@
                 ],
             },
             roleList: [
-                
+
             ],
             typeList: [
-                
+
             ],
-            departList: []
+            departList: [],
+            mylabel: '',
+            defaultProps: {
+                children: 'children',
+                label: 'departName',
+                disabled: (data, node) => {
+                    if (node.level === 1 && node.childNodes.length !== 0) {
+                        return !data.leaf
+                    }
+                }
+            },
+            selectOrg: {
+                orgsid: []
+            },
         }
     },
     created() {
-        const that = this;
         // 鑾峰彇瑙掕壊鍒楄〃
         this.getRoleList();
-        // 鑾峰彇鍏ㄩ儴閮ㄩ棬鍒楄〃
-        this.$axios.get('sccg/depart/page').then(res => {
-            that.departList = res.data.records;
-        })
         // 鑾峰彇鐢ㄦ埛绫诲瀷
         this.getUserTypeList();
+        // 鑾峰彇閮ㄩ棬
+        this.getDepartList();
     },
     methods: {
         // 鎻愪氦娉ㄥ唽
@@ -294,41 +370,41 @@
             this.$refs['user'].validate((valid) => {
                 console.log(valid);
                 if (valid) {
-                    const { user } = this;
+                    const { user, selectOrg } = this;
                     console.log(user);
                     this.$axios.post('sccg/admin/register', {
-                        departmentId: user.departmentId,
+                        departmentId: selectOrg.orgsid[0],
                         email: user.email,
-                        icon:'',
+                        icon: '',
                         isDy: `${user.isDy}`,
                         jobTitle: user.jobTitle,
                         mobile: user.mobile,
-                        note:'',
-                        roleIds:user.role,
+                        note: '',
+                        roleIds: user.role,
                         // nickName: user.nickName,
-                        sex:`${user.sex}`,
+                        sex: `${user.sex}`,
                         password: user.password,
                         userType: `${user.userType}`,
                         username: user.username,
-                        zj:user.zjarea+`${user.zjnumber}`+user.zjother,
+                        zj: user.zjarea + `${user.zjnumber}` + user.zjother,
                         // departName:user.departName,
                     }).then(res => {
                         if (res.code === 200) {
                             console.log(1);
                             this.$message({
-                                type:'success',
-                                message:res.message,
+                                type: 'success',
+                                message: res.message,
                             })
                             this.$emit('sendDialog', { flag: false });
-                        }else if(res.code === 500 && res.message === "鎿嶄綔澶辫触"){
+                        } else if (res.code === 500 && res.message === "鎿嶄綔澶辫触") {
                             this.$message({
-                                type:'warning',
-                                message:'璇ョ敤鎴峰凡娉ㄥ唽'
+                                type: 'warning',
+                                message: '璇ョ敤鎴峰凡娉ㄥ唽'
                             })
-                        }else{
+                        } else {
                             this.$message({
-                                type:'warning',
-                                message:res.message
+                                type: 'warning',
+                                message: res.message
                             })
                         }
                     })
@@ -360,16 +436,47 @@
             })
         },
         // 鑾峰彇鐢ㄦ埛绫诲瀷
-        getUserTypeList(){
+        async getUserTypeList() {
+            this.typeList = await getTypeList(1, '07');
+        },
+        // 鑾峰彇閮ㄩ棬鏍�
+        getDepartList() {
             this.$axios({
-                method:'get',
-                url:'sccg/dict/query_user_type'
+                method: 'get',
+                url: 'sccg/depart/tree'
             })
-            .then(res=>{
-                console.log(res);
-                this.typeList = res.data;
-            })
-        }
+                .then(res => {
+                    this.departList = res.data;
+                })
+        },
+        handleCheck(data, checked) {
+            this.user.departmentId = data.departName;
+            // 鑾峰彇褰撳墠閫夋嫨鐨刬d鍦ㄦ暟缁勪腑鐨勭储寮�
+            const indexs = this.selectOrg.orgsid.indexOf(data.id)
+            // 濡傛灉涓嶅瓨鍦ㄦ暟缁勪腑锛屽苟涓旀暟缁勪腑宸茬粡鏈変竴涓猧d骞朵笖checked涓簍rue鐨勬椂鍊欙紝浠h〃涓嶈兘鍐嶆閫夋嫨銆�
+            if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
+                this.$message({
+                    message: '鍙兘閫夋嫨涓�涓儴闂紒',
+                    type: 'warning',
+                    showClose: true
+                })
+                // 璁剧疆宸查�夋嫨鐨勮妭鐐逛负false 寰堥噸瑕�
+                this.$refs.tree.setChecked(data, false)
+            } else if (this.selectOrg.orgsid.length === 0 && checked) {
+                // 鍙戠幇鏁扮粍涓虹┖ 骞朵笖鏄凡閫夋嫨
+                // 闃叉鏁扮粍鏈夊�硷紝棣栧厛娓呯┖锛屽啀push
+                this.selectOrg.orgsid = []
+                this.selectOrg.orgsid.push(data.id)
+            } else if (
+                indexs >= 0 &&
+                this.selectOrg.orgsid.length === 1 &&
+                !checked
+            ) {
+                // 鍐嶆鐩存帴杩涜璧嬪�间负绌烘搷浣�
+                this.selectOrg.orgsid = []
+                this.user.departmentId = '';
+            }
+        },
     },
     props: ['sendDialog']
 }
@@ -388,9 +495,9 @@
 
         .mainContent {
             display: flex;
-            justify-content: center;
+            // justify-content: center;
             margin-top: 50px;
-
+            width: 100%;
             &::v-deep .el-form-item__label {
                 color: #4b9bb7;
             }
@@ -402,29 +509,45 @@
 
             .el-form-item__content {
                 width: 400px;
-
                 .el-select {
                     width: 100%;
                 }
             }
 
+            .sp-item {
+                .item-left{
+                    display: flex;
+                }
+            }
+
             .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;
+                }
 
                 .left-px :deep(.el-form-item__content) {
                     margin-left: 0px !important;
                 }
             }
-                .optionBtn {
-                    display: flex;
-                    margin-top: 20px;
 
-                    .btn {
-                        padding: 12px 50px;
-                    }
+            .optionBtn {
+                display: flex;
+                margin-top: 20px;
+
+                .btn {
+                    padding: 12px 50px;
                 }
-
             }
+
         }
     }
+}
 </style>
\ No newline at end of file

--
Gitblit v1.8.0