From b4d6e0923d825f3a6cbb12c29b5a522d56362ff8 Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期六, 18 三月 2023 13:04:17 +0800
Subject: [PATCH] 用户管理导入导出

---
 src/views/systemSetting/baseSetting/user/components/createUser/index.vue |  432 +++++++++++++++++++++++++++++------------------------
 1 files changed, 236 insertions(+), 196 deletions(-)

diff --git a/src/views/systemSetting/baseSetting/user/components/createUser/index.vue b/src/views/systemSetting/baseSetting/user/components/createUser/index.vue
index 1070b5e..2009dba 100644
--- a/src/views/systemSetting/baseSetting/user/components/createUser/index.vue
+++ b/src/views/systemSetting/baseSetting/user/components/createUser/index.vue
@@ -2,13 +2,27 @@
   <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
+          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-form-item
+                class="optionItem"
+                label="鐢ㄦ埛鍚嶇О:"
+                prop="username"
+              >
+                <el-input
+                  v-model="user.username"
+                  placeholder="濉啓鐢ㄦ埛鍚嶇О"
+                  autoComplete="new-username"
+                >
                 </el-input>
               </el-form-item>
             </div>
@@ -17,9 +31,17 @@
           <!-- 鐢ㄦ埛瀵嗙爜 -->
           <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
+                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>
@@ -28,8 +50,15 @@
           <!-- 鎵�灞炵敤鎴峰鍚� -->
           <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
+                class="optionItem"
+                label="鎵�灞炵敤鎴峰鍚�:"
+                prop="nickName"
+              >
+                <el-input
+                  v-model="user.nickName"
+                  placeholder="璇峰～鍐欑敤鎴峰鍚�"
+                ></el-input>
               </el-form-item>
             </div>
             <div class="item-right"></div>
@@ -61,8 +90,16 @@
           <!-- 鎵�灞炴墜鏈哄彿鐮� -->
           <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
+                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>
@@ -71,7 +108,10 @@
           <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-input
+                  v-model="user.email"
+                  placeholder="璇峰～鍐欓偖绠卞湴鍧�"
+                ></el-input>
               </el-form-item>
             </div>
             <div class="item-right"></div>
@@ -80,9 +120,18 @@
           <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-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>
@@ -92,10 +141,18 @@
           <!-- 鐢ㄦ埛绫诲瀷 -->
           <div class="user-item">
             <div class="item-left">
-              <el-form-item class="optionItem" label="鐢ㄦ埛绫诲瀷:" prop="userType">
+              <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
+                    v-for="item in typeList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  >
                   </el-option>
                 </el-select>
               </el-form-item>
@@ -123,15 +180,15 @@
           <!-- 鎵�灞為儴闂� -->
           <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
+                class="optionItem"
+                label="鎵�灞為儴闂�:"
+                prop="departmentId"
+              >
+                <departTree
+                  :depart="userDepart"
+                  @selectDepart="selectDepart"
+                ></departTree>
               </el-form-item>
             </div>
             <div class="item-right"></div>
@@ -139,8 +196,15 @@
           <!-- 褰撳墠鑱屽姟 -->
           <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
+                class="optionItem"
+                label="褰撳墠鑱屽姟:"
+                prop="jobTitle"
+              >
+                <el-input
+                  v-model="user.jobTitle"
+                  placeholder="璇疯緭鍏ュ綋鍓嶈亴鍔�"
+                ></el-input>
               </el-form-item>
             </div>
             <div class="item-right"></div>
@@ -148,8 +212,15 @@
           <!-- 濉啓鎵�灞瀖ac鍦板潃 -->
           <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
+                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>
@@ -157,28 +228,44 @@
           <!-- 濉啓鎵�灞瀒p鍦板潃 -->
           <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
+                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">鎻愪氦
+              <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 { getTypeList } from "@/utils/helper";
+import departTree from "@/components/departTree/index.vue";
 export default {
+  components: {
+    departTree,
+  },
   data() {
     const validateNickname = (rule, value, callback) => {
       if (!value) {
@@ -189,12 +276,16 @@
     };
     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();
-          }
+      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("鐢ㄦ埛瀵嗙爜涓嶈兘涓虹┖"));
@@ -222,7 +313,7 @@
       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 {
@@ -232,9 +323,10 @@
     };
     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}$/;
+        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("璇疯緭鍏ユ纭殑閭"))
+          callback(new Error("璇疯緭鍏ユ纭殑閭"));
         } else {
           callback();
         }
@@ -246,21 +338,21 @@
       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) => {
@@ -274,35 +366,36 @@
       if (value) {
         callback();
       } else {
-        callback()
+        callback();
       }
     };
     const validateIp = (rule, value, callback) => {
       if (value) {
         callback();
       } else {
-        callback()
+        callback();
       }
     };
     return {
       user: {
-        nickName: '',
-        password: '',
-        username: '',
+        nickName: "",
+        password: "",
+        username: "",
         sex: 1,
         isDy: 0,
-        mobile: '',
-        email: '',
+        mobile: "",
+        email: "",
         role: null,
         userType: null,
-        zjarea: '',
-        zjnumber: '',
-        zjother: '',
+        zjarea: "",
+        zjnumber: "",
+        zjother: "",
         departmentId: null,
         jobTitle: null,
-        mac: '',
-        ip: '',
-      },
+        mac: "",
+        ip: "",
+      },      
+      userDepart: {},
       createUserRules: {
         nickName: [
           { required: true, trigger: "blur", validator: validateNickname },
@@ -313,187 +406,131 @@
         username: [
           { required: true, trigger: "blur", validator: validateTruename },
         ],
-        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 },
-        ],
+        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: [
-
-      ],
-      typeList: [
-
-      ],
+      roleList: [],
+      typeList: [],
       departList: [],
-      mylabel: '',
+      mylabel: "",
       defaultProps: {
-        children: 'children',
-        label: 'departName',
+        children: "children",
+        label: "departName",
         disabled: (data, node) => {
           if (node.level === 1 && node.childNodes.length !== 0) {
-            return !data.leaf
+            return !data.leaf;
           }
-        }
+        },
       },
-      selectOrg: {
-        orgsid: []
-      },
-    }
+    };
   },
   created() {
     // 鑾峰彇瑙掕壊鍒楄〃
     this.getRoleList();
     // 鑾峰彇鐢ㄦ埛绫诲瀷
     this.getUserTypeList();
-    // 鑾峰彇閮ㄩ棬
-    this.getDepartList();
   },
   methods: {
     // 鎻愪氦娉ㄥ唽
     handleUser() {
-      this.$refs['user'].validate((valid) => {
+      this.$refs["user"].validate((valid) => {
         console.log(valid);
         if (valid) {
-          const { user, selectOrg } = this;
+          const { user } = this;
           console.log(user);
-          this.$axios.post('sccg/admin/register', {
-            departmentId: selectOrg.orgsid[0],
-            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
-            // 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
-              })
-            }
-          })
+          this.$axios
+            .post("sccg/admin/register", {
+              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,
+              // 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
+          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;
+      });
     },
     // 閲嶇疆琛ㄥ崟
     resetForm() {
-      this.$refs['user'].resetFields();
+      this.$refs["user"].resetFields();
     },
     // 鑾峰緱閮ㄩ棬鍚嶇О
     getDepartName(data) {
-      this.departList.forEach(item => {
+      this.departList.forEach((item) => {
         if (item.id === data) {
-          this.user.departName = item.departName
+          this.user.departName = item.departName;
         }
-      })
+      });
     },
     // 鑾峰彇鐢ㄦ埛绫诲瀷
     async getUserTypeList() {
-      this.typeList = await getTypeList(1, '07');
+      this.typeList = await getTypeList(1, "07");
     },
-    // 鑾峰彇閮ㄩ棬鏍�
-    getDepartList() {
-      this.$axios({
-        method: 'get',
-        url: 'sccg/depart/tree'
-      })
-          .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鐨勬椂鍊欙紝浠ｈ〃涓嶈兘鍐嶆閫夋嫨銆�
-      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 = '';
+    selectDepart(depart) {
+      if (depart) {
+        this.user.departmentId = depart.departId;
+        this.user.departName = depart.departName;
       }
     },
   },
-  props: ['sendDialog']
-}
+  props: ["sendDialog"],
+};
 </script>
 <style lang="scss" scoped>
 .createUser {
@@ -509,7 +546,7 @@
 
     .mainContent {
       display: flex;
-      // justify-content: center;
+      justify-content: center;
       margin-top: 50px;
       width: 100%;
       // &::v-deep .el-form-item__label {
@@ -529,7 +566,7 @@
       }
 
       .sp-item {
-        .item-left{
+        .item-left {
           display: flex;
         }
       }
@@ -560,8 +597,11 @@
           padding: 12px 50px;
         }
       }
-
     }
   }
 }
+
+::v-deep .el-form-item__error {
+  width: 608px;
+}
 </style>

--
Gitblit v1.8.0