From 999f9a47da7783388d0214b9f8d987ea2d9f2916 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 11 四月 2022 13:55:05 +0800
Subject: [PATCH] 子账户管理新

---
 src/views/personalCenter/components/SubAccount.vue |  504 ++++++++++++++++++++++++++++---------------------------
 1 files changed, 253 insertions(+), 251 deletions(-)

diff --git a/src/views/personalCenter/components/SubAccount.vue b/src/views/personalCenter/components/SubAccount.vue
index 4721b7c..377c64f 100644
--- a/src/views/personalCenter/components/SubAccount.vue
+++ b/src/views/personalCenter/components/SubAccount.vue
@@ -10,7 +10,7 @@
 
         <div class="cluster">
           鎺堟潈鏃堕暱
-          <el-select v-model="cluster" placeholder="璇烽�夋嫨">
+          <el-select v-model="timeLength" placeholder="璇烽�夋嫨">
             <el-option
               v-for="item in durationArr"
               :key="item.value"
@@ -23,8 +23,8 @@
       </div>
 
       <div class="right">
-        <div class="button searchBtn" @click="save">鎼滅储</div>
-        <div class="button resetBtn" @click="save">閲嶇疆</div>
+        <div class="button searchBtn" @click="findUserList">鎼滅储</div>
+        <div class="button resetBtn" @click="reset">閲嶇疆</div>
       </div>
     </div>
 
@@ -55,19 +55,25 @@
           }}</template>
         </el-table-column>
         <el-table-column
-          prop="name"
+          prop="trueName"
           label="濮撳悕"
           show-overflow-tooltip
         ></el-table-column>
         <el-table-column
-          prop="phone"
-          label="鎵嬫満鍙�"
+          prop="username"
+          label="鐢ㄦ埛鍚�"
           show-overflow-tooltip
         ></el-table-column>
-        <el-table-column prop="userType" label="鐢ㄦ埛绫诲瀷"></el-table-column>
-        <el-table-column prop="duration" label="鎺堟潈鏃堕暱"></el-table-column>
-        <el-table-column prop="authList" label="鏉冮檺"></el-table-column>
-       
+        <el-table-column prop="userType" label="鐢ㄦ埛绫诲瀷">
+          <template slot-scope="scope">
+            <span>{{ scope.row.userType == 1 ? "涓汉" : "鍏徃" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="authDuration" label="鎺堟潈鏃堕暱" > </el-table-column>
+        <el-table-column prop="dataNames" label="鏉冮檺">
+
+        </el-table-column>
+
         <el-table-column label="鐘舵��">
           <template slot-scope="scope">
             <div v-if="scope.row.isBind == 1" class="status green">宸茬粦瀹�</div>
@@ -78,13 +84,13 @@
         <el-table-column label="鎿嶄綔">
           <template slot-scope="scope">
             <!-- 缂栬緫 -->
-            <span class="iconfont option" @click="joinCluster(scope.row)"
-              >&#xe640;</span
+            <span class="iconfont option" @click="editUser(scope.row)"
+              >缂栬緫</span
             >
             <!-- 瑙g粦 -->
-            <span class="iconfont option" @click="Untying(scope.row)"
-              >&#xe617;</span
-            >
+            <!-- <span class="iconfont option" @click="Untying(scope.row)"
+              >瑙g粦</span
+            > -->
           </template>
         </el-table-column>
       </el-table>
@@ -101,34 +107,9 @@
         ></el-pagination>
       </div>
     </div>
-
-    <!-- 瑙g粦寮圭獥 -->
-    <UnbindBox
-      @close="closeUnbindBox"
-      v-if="isShowUnbind"
-      :id="unbindId"
-      @reflash="reflash"
-    ></UnbindBox>
-
-    <!-- 娣诲姞璁惧寮圭獥 -->
-    <!-- <AddBox @close="closeAddBox" v-if="isShowAdd"></AddBox> -->
-
-    <!-- 閫�鍑洪泦缇ゅ脊绐� -->
-    <QuitClusterBox
-      :equipment="activeEquipment"
-      v-if="showQuit"
-      @close="showQuit = false"
-    ></QuitClusterBox>
-
-    <!-- 鍔犲叆闆嗙兢寮圭獥 -->
-    <JoinClusterBox
-      :equipment="activeEquipment"
-      v-if="showJoin"
-      @close="showJoin = false"
-    ></JoinClusterBox>
   </div>
   <div class="sub-account" v-else-if="isShowAdd">
-    <div class="add-title" @click="isShowAdd=false">
+    <div class="add-title" @click="isShowAdd = false">
       <span class="iconfont">&#xe614;</span>
       <span>娣诲姞瀛愯处鎴�</span>
     </div>
@@ -140,57 +121,97 @@
       label-width="100px"
       class="add-ruleForm"
     >
-      <el-form-item label="鐢ㄦ埛鍚�" prop="name">
-        <el-input v-model="ruleForm.name"></el-input>
+      <el-form-item label="鐢ㄦ埛鍚�" prop="username">
+        <el-input v-model="ruleForm.username" style="width: 350px"></el-input>
       </el-form-item>
-      <el-form-item label="瀵嗙爜" prop="name">
-        <el-input v-model="ruleForm.password"></el-input>
+      <el-form-item label="瀵嗙爜" prop="password">
+        <el-input v-model="ruleForm.password" style="width: 350px"></el-input>
       </el-form-item>
-      <el-form-item label="閲嶇疆瀵嗙爜" prop="delivery">
-        <el-checkbox v-model="ruleForm.delivery">棣栨鐧婚檰淇敼瀵嗙爜</el-checkbox>
+      <el-form-item label="閲嶇疆瀵嗙爜" prop="isChangePwd">
+        <el-checkbox v-model="ruleForm.isChangePwd"
+          >棣栨鐧婚檰淇敼瀵嗙爜</el-checkbox
+        >
       </el-form-item>
-      <el-form-item label="鐢ㄦ埛绫诲瀷" prop="type">
-        <el-radio v-model="ruleForm.type" label="1">涓汉</el-radio>
-        <el-radio v-model="ruleForm.type" label="2">鍏徃</el-radio>
+      <el-form-item label="鐢ㄦ埛绫诲瀷" prop="userType">
+        <el-radio v-model="ruleForm.userType" :label="1">涓汉</el-radio>
+        <el-radio v-model="ruleForm.userType" :label="2">鍏徃</el-radio>
       </el-form-item>
-      <el-form-item label="濮撳悕" prop="name">
-        <el-input v-model="ruleForm.name"></el-input>
+      <el-form-item label="濮撳悕" prop="trueName">
+        <el-input v-model="ruleForm.trueName" style="width: 350px"></el-input>
       </el-form-item>
-      <el-form-item label="閭" prop="name">
-        <el-input v-model="ruleForm.password"></el-input>
+      <el-form-item label="閭" prop="email">
+        <el-input v-model="ruleForm.email" style="width: 350px"></el-input>
       </el-form-item>
 
-      <el-form-item label="琛屼笟" prop="region">
-        <el-select v-model="ruleForm.region" placeholder="璇烽�夋嫨琛屼笟">
-          <el-option label="鍖哄煙涓�" value="shanghai"></el-option>
-          <el-option label="鍖哄煙浜�" value="beijing"></el-option>
+      <el-form-item label="琛屼笟" prop="industryId">
+        <el-select
+          v-model="ruleForm.industryId"
+          placeholder="璇烽�夋嫨琛屼笟"
+          style="width: 350px"
+        >
+          <el-option
+            v-for="(item, index) in industrys"
+            :label="item.name"
+            :value="item.id"
+            :key="index"
+          ></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="鍦板尯" prop="region">
-        <el-select v-model="ruleForm.region" placeholder="璇烽�夋嫨琛屼笟">
-          <el-option label="鍖哄煙涓�" value="shanghai"></el-option>
-          <el-option label="鍖哄煙浜�" value="beijing"></el-option>
-        </el-select>
+      <el-form-item label="鍦板尯" prop="address">
+        <el-cascader
+          v-model="ruleForm.address"
+          :props="options"
+          style="width: 350px"
+          @change="handleChange"
+        ></el-cascader>
       </el-form-item>
-      <el-form-item label="鎺堟潈鏃堕暱" prop="region">
-        <el-select v-model="ruleForm.region" placeholder="璇烽�夋嫨琛屼笟">
-          <el-option label="鍖哄煙涓�" value="shanghai"></el-option>
-          <el-option label="鍖哄煙浜�" value="beijing"></el-option>
+      <el-form-item label="鎺堟潈鏃堕暱" prop="authDuration">
+        <el-select
+          v-model="ruleForm.authDuration"
+          style="width: 350px"
+          placeholder="璇烽�夋嫨鎺堟潈鏃堕暱"
+        >
+          <el-option label="涓�骞�" value="涓�骞�"></el-option>
+          <el-option label="涓ゅ勾" value="涓ゅ勾"></el-option>
         </el-select>
       </el-form-item>
 
-      <el-form-item label="鐢ㄦ埛鏉冮檺" prop="authList" class="user-tree">
-        
-        <TreeBox :defaultProp="defaultProp1" :treeData="data1"></TreeBox>
-
-       
-        <TreeBox :defaultProp="defaultProp2" :treeData="data2"></TreeBox>
+      <el-form-item label="鐢ㄦ埛鏉冮檺" prop="menuIds" class="user-tree">
+        <!-- <TreeBox :defaultProp="defaultProp" :treeData="sysMenus"></TreeBox> -->
+        <!-- <TreeBox :defaultProp="defaultProp2" :treeData="data2"></TreeBox> -->
+        <div class="tree-box">
+          <div class="t">鑿滃崟鏉冮檺</div>
+          <el-tree
+            ref="treeMenus"
+            :data="sysMenus"
+            show-checkbox
+            default-expand-all
+            node-key="id"
+            :props="defaultProp"
+            :default-checked-keys="checkedMenu"
+            check-on-click-node
+          >
+          </el-tree>
+        </div>
+        <div class="tree-box">
+          <div class="t">鏁版嵁鏉冮檺</div>
+          <el-tree
+            ref="treeData"
+            :data="DataTree"
+            show-checkbox
+            default-expand-all
+            node-key="id"
+            :props="defaultProp"
+            :default-checked-keys="checkedData"
+            check-on-click-node
+          >
+          </el-tree>
+        </div>
       </el-form-item>
-      
     </el-form>
     <div class="right">
-      <div class="button searchBtn" @click="save">鎼滅储</div>
-      <div class="button resetBtn" @click="save">閲嶇疆</div>
+      <div class="button searchBtn" @click="saveSubUser">淇濆瓨</div>
+      <div class="button resetBtn" @click="resetUser">閲嶇疆</div>
     </div>
   </div>
   <div class="sub-account" v-else-if="isShowRelate">
@@ -207,18 +228,14 @@
 </template>
 
 <script>
-import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox";
-import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox";
-import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox";
+import { findUserList, saveSubUser, getMenu, getDataTree } from "@/api/user";
+import { getAreas, getDic } from "@/api/login";
+
 import Steps from "./Steps";
 import StepsCard from "./StepCard";
 import TreeBox from "./TreeBox";
 export default {
   components: {
-    // AddBox,
-    UnbindBox,
-    QuitClusterBox,
-    JoinClusterBox,
     Steps,
     StepsCard,
     TreeBox,
@@ -234,49 +251,66 @@
       inputText: "", //杈撳叆妗嗗唴瀹�
       activeStep: 0,
       activeIndex: 0,
+      industrys: [],
       total: 0, //鎬绘暟
-      dataList: [
-        {
-          name: "basic",
-          phone: "1121313232",
-          userType: "涓汉",
-          duration: "姘镐箙",
-          authList: "闆嗙兢1锛岄泦缇�2",
-          isBind: 1,
+      options: {
+        lazy: true,
+        lazyLoad(node, resolve) {
+          // 鎳掑姞杞借妭鐐圭渷甯傛暟鎹�
+          const { level } = node;
+          let nodes;
+          getAreas({ parentId: level == 0 ? 0 : node.value })
+            .then((json) => {
+              nodes = json.data.list;
+              nodes = nodes.map((item) => ({
+                value: item.id,
+                label: item.name,
+                level: item.level,
+                leaf: level >= 1,
+              }));
+              resolve(nodes);
+            })
+            .catch((err) => {
+              console.log(err);
+            });
         },
-      ],
+      },
+      dataList: [],
       isShowAdd: false, //鏄惁灞曠ず鏂板寮圭獥
       isShowUnbind: false, //鏄惁灞曠ず瑙g粦寮圭獥
-      isShowRelate: false,
+      isShowRelate: false,isEditing: false,
       unbindId: "",
       durationArr: [
         {
-          value: 0,
+          value: "涓�骞�",
           label: "涓�骞�",
         },
         {
-          value: 1,
+          value: "涓ゅ勾",
           label: "涓ゅ勾",
         },
       ], //鎵�灞為泦缇や笅鎷夋
-      cluster: null, //閫変腑鐨勯泦缇ょ被鍨�
+      timeLength: null, //閫変腑鐨勬巿鏉冩椂闀�
       showQuit: false, //灞曠ず閫�鍑洪泦缇ょ殑寮圭獥
       showJoin: false, //灞曠ず鍔犲叆闆嗙兢鐨勫脊绐�
       activeEquipment: null, //澶勭悊涓殑璁惧
+      checkedData:[],
+      checkedMenu:[],
       ruleForm: {
-        name: "",
-        region: "",
+        id: "",
+        username: "",
+        userType: "",
         password: "",
-        date1: "",
-        date2: "",
-        delivery: false,
-        type: [],
-        resource: "",
-        desc: "",
-        authList: {
-          menuAuth: [],
-          dataAuth: [],
-        },
+        trueName: "",
+        email: "",
+        isChangePwd: false,
+        industryId: "",
+        address: [],
+        authDuration: "",
+        areaId: "",
+        provinceId: "",
+        menuIds: [],
+        dataIds: [],
       },
       rules: {
         name: [
@@ -286,153 +320,131 @@
         region: [
           { required: true, message: "璇烽�夋嫨娲诲姩鍖哄煙", trigger: "change" },
         ],
-        date1: [
-          {
-            type: "date",
-            required: true,
-            message: "璇烽�夋嫨鏃ユ湡",
-            trigger: "change",
-          },
-        ],
-        date2: [
-          {
-            type: "date",
-            required: true,
-            message: "璇烽�夋嫨鏃堕棿",
-            trigger: "change",
-          },
-        ],
-        type: [
-          {
-            type: "array",
-            required: true,
-            message: "璇疯嚦灏戦�夋嫨涓�涓椿鍔ㄦ�ц川",
-            trigger: "change",
-          },
-        ],
         resource: [
           { required: true, message: "璇烽�夋嫨娲诲姩璧勬簮", trigger: "change" },
         ],
         desc: [{ required: true, message: "璇峰~鍐欐椿鍔ㄥ舰寮�", trigger: "blur" }],
       },
-      data1: [
-        {
-          id: 1,
-          label: "涓�绾� 1",
-          children: [
-            {
-              id: 4,
-              label: "浜岀骇 1-1",
-              children: [
-                {
-                  id: 9,
-                  label: "涓夌骇 1-1-1",
-                },
-                {
-                  id: 10,
-                  label: "涓夌骇 1-1-2",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          id: 2,
-          label: "涓�绾� 2",
-          children: [
-            {
-              id: 5,
-              label: "浜岀骇 2-1",
-            },
-            {
-              id: 6,
-              label: "浜岀骇 2-2",
-            },
-          ],
-        },
-        {
-          id: 3,
-          label: "涓�绾� 3",
-          children: [
-            {
-              id: 7,
-              label: "浜岀骇 3-1",
-            },
-            {
-              id: 8,
-              label: "浜岀骇 3-2",
-            },
-          ],
-        },
-      ],
-      defaultProps1: {
+      sysMenus: [],
+      DataTree: [],
+      userInfo: {},
+      curEditId: "",
+      defaultProp: {
         children: "children",
-        label: "label",
-      },
-      data2: [
-        {
-          id: 1,
-          label: "涓�绾� 1",
-          children: [
-            {
-              id: 4,
-              label: "浜岀骇 1-1",
-              children: [
-                {
-                  id: 9,
-                  label: "涓夌骇 1-1-1",
-                },
-                {
-                  id: 10,
-                  label: "涓夌骇 1-1-2",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          id: 2,
-          label: "涓�绾� 2",
-          children: [
-            {
-              id: 5,
-              label: "浜岀骇 2-1",
-            },
-            {
-              id: 6,
-              label: "浜岀骇 2-2",
-            },
-          ],
-        },
-        {
-          id: 3,
-          label: "涓�绾� 3",
-          children: [
-            {
-              id: 7,
-              label: "浜岀骇 3-1",
-            },
-            {
-              id: 8,
-              label: "浜岀骇 3-2",
-            },
-          ],
-        },
-      ],
-      defaultProps2: {
-        children: "children",
-        label: "label",
+        label: "name",
       },
     };
   },
+  created() {
+    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
+    this.findUserList();
+    this.getIndustrys();
+    this.fetchSysMenus();
+    this.fetchDataTree();
+  },
   methods: {
+    fetchDataTree() {
+      getDataTree({ userId: this.userInfo.id }).then((res) => {
+        this.DataTree = res.data.dataTree;
+      });
+    },
+    fetchSysMenus() {
+      getMenu().then((rsp) => {
+        if (rsp && rsp.success) {
+          this.sysMenus = rsp.data.menus;
+          // this.userMenus = [];
+        }
+      });
+    },
+    editUser(row) {
+      this.isShowAdd = true;
+      this.isEditing = true
+      this.ruleForm.id = row.id;
+      this.ruleForm.username = row.username;
+      this.ruleForm.userType = row.userType;
+      this.ruleForm.password = row.password;
+      this.ruleForm.trueName = row.trueName;
+      this.ruleForm.email = row.email;
+      this.ruleForm.isChangePwd = row.isChangePwd;
+      this.ruleForm.industryId = row.industryId;
+      this.ruleForm.areaId =row.areaId ;
+      debugger
+      this.ruleForm.address  = [ row.provinceId,row.areaId]
+      this.ruleForm.provinceId = row.provinceId;
+      this.ruleForm.authDuration = row.authDuration;
+      this.checkedMenu = row.menuIds;
+      this.checkedData = row.dataIds;
+    },
+    resetUser() {
+      this.ruleForm = {
+        id: "",
+        username: "",
+        userType: "",
+        password: "",
+        trueName: "",
+        email: "",
+        isChangePwd: false,
+        industryId: "",
+        areaId: "",
+        provinceId: "",
+        authDuration: "",
+      };
+      this.$refs.treeMenus.setCheckedKeys([]);
+      this.$refs.treeData.setCheckedKeys([]);
+    },
+    async getIndustrys() {
+      let res = await getDic();
+      if (res.success) {
+        this.industrys = res.data.dics;
+      } else {
+        console.log("鏌ヨ琛屼笟鍒楄〃澶辫触锛�");
+      }
+    },
+    saveSubUser() {
+      this.ruleForm.menuIds = this.$refs.treeMenus.getCheckedKeys();
+      this.ruleForm.dataIds = this.$refs.treeData.getCheckedKeys();
+      let json = {
+        id: this.isEditing? this.ruleForm.id:"",
+        username: this.ruleForm.username,
+        password: this.ruleForm.password,
+        isChangePwd: this.ruleForm.isChangePwd,
+        userType: this.ruleForm.userType,
+        trueName: this.ruleForm.trueName,
+        email: this.ruleForm.email,
+        industryId: this.ruleForm.industryId,
+        areaId: this.ruleForm.address[1],
+        authDuration: this.ruleForm.authDuration,
+        menuIds: this.ruleForm.menuIds,
+        dataIds: this.ruleForm.dataIds,
+      };
+      debugger
+      saveSubUser(json).then((res) => {
+        debugger;
+      });
+    },
+    findUserList() {
+      findUserList({
+        inputText: this.inputText,
+        page: this.page,
+        size: this.size,
+      }).then((res) => {
+        if (res.success) {
+          this.dataList = res.data.dataList;
+        }
+      });
+    },
     goback() {
-      this.isShowAdd=false
+      this.isShowAdd = false;
+      this.isEditing =false
       this.isShowRelate = false;
       this.activeIndex = 0;
     },
     goto(i) {
       this.activeIndex = i;
+    },
+    reset() {
+      this.inputText = "";
+      this.timeLength = null;
     },
     // 璺冲埌璁惧璇︽儏
     checkDetail(row) {
@@ -460,10 +472,8 @@
     },
 
     // 鏌ヨ鍒楄〃
-   
-    save(){
 
-    },
+    save() {},
     //鍒嗛〉鍔熻兘
     handleSizeChange(size) {
       this.size = size;
@@ -498,10 +508,6 @@
       ];
     },
 
-    //鍏抽棴鏂板寮圭獥
-    closeAddBox() {
-      this.isShowAdd = false;
-    },
     // 鍏抽棴瑙g粦寮圭獥
     closeUnbindBox() {
       this.isShowUnbind = false;
@@ -528,9 +534,6 @@
       this.activeEquipment = equipment;
       this.showJoin = true;
     },
-  },
-  mounted() {
-    
   },
 };
 </script>
@@ -561,7 +564,6 @@
   }
   .add-ruleForm::v-deep {
     .el-input__inner {
-      width: 350px;
       color: #3d3d3d;
       border-radius: 4px;
       border-color: #c0c5cc;
@@ -771,7 +773,7 @@
 
     .option {
       margin-right: 10px;
-      font-size: 24px;
+         font-size: 14px;
       color: rgb(0, 101, 255);
       cursor: pointer;
     }

--
Gitblit v1.8.0