2020年7月7日11:28:30

src/store/index.js

@@ -7,7 +7,7 @@ Vue.use(Vuex)
 export default new Vuex.Store({
 	strict: true,
 	state: {
-		token: null,
+		token: localStorage.getItem("token"),
 	},
 	getters: {
 		token: state => state.token,

src/views/Home/Home.vue

@@ -82,8 +82,6 @@ export default {
         };
     },
     created() {
-        console.log(localStorage.getItem("defaultUnfoldedMenu"));
-        console.log(this.defaultUnfoldedMenu);
         this.defaultUnfoldedMenu = [
             localStorage.getItem("defaultUnfoldedMenu")
         ];
@@ -111,7 +109,6 @@ export default {
             // 如果要跳转的路由和当前路由一致就 return
             if (this.$router.history.current.name == e.$attrs.routerName)
                 return;
-            console.log(e);
             this.$router.push({
                 path: "/" + e.$attrs.routerName
             });

src/views/deviceManagement/DeviceInfo.vue

@@ -108,6 +108,7 @@
 <script>
 import { mapActions } from "vuex";
 import rtspPlayer from "../common/rtsp-player/index";
+
 export default {
     name: "deviceInfo",
     components: { rtspPlayer },

src/views/deviceManagement/DeviceType.vue

@@ -1,145 +1,253 @@
 <template>
-    <div class="UnitType">
-        <el-button type="primary" size="mini">新建分类</el-button>
-        <el-input class="searchFrame" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
-
+    <div class="DeviceType">
+        <el-button size="mini" type="primary" @click="isShowDialog=true">新建分类</el-button>
         <el-tree
             class="filter-tree"
-            :data="data"
+            :data="typeDataTree"
             :props="defaultProps"
-            default-expand-all
-            :filter-node-method="filterNode"
+            @node-click="handleNodeClick"
             ref="tree"
         ></el-tree>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>1</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>d</p>
-        <p>22</p>
+        <el-dialog title="新建分类" :visible.sync="isShowDialog" append-to-body>
+            <el-form :model="formData" label-width="100px">
+                <el-form-item label="父分类：">
+                    <el-select
+                        :disabled="isRoot"
+                        v-for="(arrItem,key) in selectList"
+                        :key="key"
+                        v-model="selectArr[key]"
+                        filterable
+                        placeholder="请选择"
+                        value-key="id"
+                        @change="selectedEvt"
+                        @focus="position=key"
+                    >
+                        <el-option
+                            v-for="item in arrItem"
+                            :key="item.id"
+                            :value="item.id"
+                            :label="item.name"
+                        ></el-option>
+                    </el-select>
+                    <el-checkbox v-model="isRoot" style="margin-left: 10px">根目录</el-checkbox>
+                </el-form-item>
+                <el-form-item label="分类名称：">
+                    <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
+                </el-form-item>
+                <el-form-item label="配置数据：">
+                    <el-input type="textarea" v-model="formData.meta" placeholder="请输入内容,JSON格式"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer">
+                <el-button @click="isShowDialog=false">取 消</el-button>
+                <el-button type="primary" @click="handleSave">保 存</el-button>
+            </div>
+        </el-dialog>
+        <div>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>1</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>d</p>
+            <p>22</p>
+        </div>
     </div>
 </template>
 <script>
+import { mapActions } from "vuex";
+// tree配置选项 
+const defaultProps = { children: "children", label: "name" };
+
 export default {
-    name: "UnitType",
+    name: "DeviceType",
     data() {
         return {
-            filterText: "",
-            data: [
-                {
-                    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"
-                        }
-                    ]
-                }
-            ],
-            defaultProps: {
-                children: "children",
-                label: "label"
-            }
+            isShowDialog: false,
+            isRoot: false,
+            position: null,
+            selectArr: [],
+            selectList: [],
+            formData: {
+                name: "",
+                meta: ""
+            },
+            typeDataTree: [], // tree 数据
+            selectedItem: null,
+            // tree配置选项
+            defaultProps
         };
     },
+    mounted() {
+        this.loadTypes(-1); //根级别分类
+    },
     watch: {
         filterText(val) {
             this.$refs.tree.filter(val);
+        },
+        selectArr(ov, nv) {
+            console.log("selectArr", ov, nv);
+        },
+        isRoot(ov, nv) {
+            console.log("isRoot", ov, nv);
+            if (ov) {
+                //清理所有选择
+                this.selectList.splice(1, this.selectList.length);
+                this.selectArr.splice(0, this.selectArr.length);
+            }
         }
     },
     methods: {
-        filterNode(value, data) {
-            if (!value) return true;
-            return data.label.indexOf(value) !== -1;
+        ...mapActions(["fetch"]),
+        loadTypes(pid) {
+            this.fetch({
+                api: "/device/device-type/list-parent",
+                method: "GET",
+                data: { parentId: pid },
+                success: res => {
+                    console.log(res);
+                    if (pid > 0) {
+                        let p = this.findTypesByid(
+                            { id: -1, children: this.typeDataTree },
+                            pid
+                        );
+                        if (p) this.$set(p, "children", res);
+                        //这里的切入点很特别，需要等待截取数据后再加入
+                        let arr = [];
+                        for (let i = 0; i < res.length; i++) {
+                            arr.push({ id: res[i].id, name: res[i].name });
+                        }
+                        if (arr.length > 0)
+                            this.selectList.splice(
+                                this.position + 1,
+                                this.selectList.length,
+                                arr
+                            );
+                        else
+                            this.selectList.splice(
+                                this.position + 1,
+                                this.selectList.length
+                            );
+                        this.selectArr.splice(
+                            this.position + 1,
+                            this.selectArr.length
+                        );
+                    } else {
+                        this.typeDataTree = res;
+                        // 初始化第一级
+                        let arr = [];
+                        for (let i = 0; i < res.length; i++) {
+                            arr.push({ id: res[i].id, name: res[i].name });
+                        }
+                        this.selectList.push(arr);
+                    }
+                },
+                fail: err => {
+                    console.log("loadTypes");
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        findTypesByid(root, id) {
+            if (!root) return null;
+            else if (root.id === id) return root;
+            else if (root.children) {
+                for (let i = 0; i < root.children.length; i++) {
+                    let ret = this.findTypesByid(root.children[i], id);
+                    if (ret) return ret;
+                }
+                return null;
+            } else return null;
+        },
+        // 节点被点击时的回调
+        handleNodeClick(e) {
+            console.log(e);
+            // 获取下一级列表
+            this.loadTypes(e.id);
+            setTimeout(() => {
+                // this.handleNodeClick(e)
+            }, 1000);
+            // let count = 0
+            // if(count++ == 0) {
+            //     this.handleNodeClick()
+            // }else return
+        },
+        selectedEvt(item) {
+            console.log("看看啥", item, this.position);
+            // 获取下一级列表
+            this.loadTypes(item);
+        },
+        handleSave(e) {
+            console.log(e);
+            let data = { name: this.formData.name, meta: this.formData.meta };
+            if (!this.isRoot)
+                data.parentId = this.selectArr[this.selectArr.length - 1];
+            this.fetch({
+                api: "/device/device-type/add",
+                data,
+                success: res => {
+                    console.log(res);
+                    this.$message.info("添加成功！");
+                    this.isShowDialog = false; //关闭
+                    //页面所有数据初始化
+                    this.init();
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        init() {
+            this.selectArr.splice(0, this.selectArr.length);
+            this.selectList.splice(0, this.selectList.length);
+            this.position = null;
+            this.loadTypes(-1); //加载根
         }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-.UnitType {
-	.searchFrame{
-		width: 30%;
-		display: block;
-		margin-top: 20px;
-	}
-}
 </style>