huimv.cloud.client/src/components/mountForm/mountForm.vue

<template>
    <div>
        <el-form :model="mountform" :ref="_ref" :rules="mountRules" label-width="120px">
            <el-form-item label="挂载区域：">
                <el-cascader
                    :options="areaTree"
                    :props="{ checkStrictly: true, children: 'childs', label: 'nodeName' ,value:'id'}"
                    
                    @change="change"
                    clearable
                    placeholder="请选择挂载区域"
                >
                    <template slot-scope="{ node, data }">
                        <span>{{ data.nodeName }}</span>
                    </template>
                </el-cascader>
            </el-form-item>

            <el-form-item label="配置信息：" prop="meta">
                <el-input
                    v-model="mountform.meta"
                    placeholder="请输入JSON格式的配置信息"
                    type="textarea"
                    :rows="3"
                    :autosize="{ minRows: 4 }"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="confirm(_ref)">确认挂载</el-button>
        </div>
    </div>
</template>

<script>
/* 用在的地方 分别是 设备信息 摄像头管理*/
import { mapActions } from "vuex";

// 区域树 code
const arearCode = "area-info";
// 挂载设备 表单验证规则
const mountRules = {
    moumtArea: [
        {
            type: "array",
            required: true,
            message: "请选择挂载区域",
            trigger: "change"
        }
    ],
    meta: [{ required: true, message: "请输入配置信息", trigger: "blur" }]
};

export default {
    data() {
        return {
            id: "",
            mountform: {
                areaId: null,
                areaName: null,
                meta: null
            },
            areaTree: [],
            mountRules
        };
    },
    props: {
        rowData: {},
        _ref: String
    },
    created() {
        this.getTreeByCode(arearCode);
    },
    methods: {
        ...mapActions(["fetch"]),
        // 通过code获取树
        getTreeByCode(code) {
            this.fetch({
                api: "/publics/treenode/getTreeByCode",
                method: "POST",
                data: { code }, //目前只有一个组织,其他参数调整钟
                success: res => {
                    this.id = res.id;
                    this.getAreaTree(res.id);
                },
                fail: err => {
                    console.log(err);
                    if (err.errCode == "request_not_authorize") {
                        this.$message({
                            message: "请重新登录",
                            type: "warning"
                        });
                    }
                }
            });
        },
        // 请求 区域树
        getAreaTree(parentId) {
            this.fetch({
                api: "/publics/treenode/listNodeByParent",
                method: "POST",
                data: {
                    parentId,
                    hasSub: true
                },
                success: res => {
                    this.areaTree = res;
                },
                fail: err => {
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },
        // 选择器改变
        change(value) {
            // this.$emit('change')
            console.log(value);

            let areaId = value[value.length - 1];
            this.mountform.areaId = areaId
            let areaTree = this.areaTree;
            this.mountform.areaName = findName(areaId);

            function findName(id) {
                let nodeName = undefined;
                loopFind(areaTree);
                function loopFind(tree) {
                    tree.forEach(item => {
                        if (item.id == id) {
                            nodeName = item.nodeName;
                        } else if (item.childs) {
                            loopFind(item.childs);
                        } else {
                            return;
                        }
                    });
                }
                return nodeName;
            }
        },
        //确认
        confirm(formName) {
            // this.$emit('submitMountForm', formName)
            if (this.mountform.areaId) this.mountRules.moumtArea = null;
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // 请求 挂载设备
                    this.getMountDevice(this.mountform);
                } else {
                    return false;
                }
            });
        },
        // 取消
        cancel() {
            this.$emit("cancel");
        },
        // 请求 挂载设备
        getMountDevice(data) {
            data.id = this.rowData.id
            data.categoryId = this.rowData.categoryId
            this.fetch({
                api: "/device/device/mount",
                method: "POST",
                data,
                success: res => {
                    this.$message.success("挂载设备成功！");
                    // this.isShowDialogMount = false;
                    // this.$parent.$props.visible = false
                    this.$emit('cancel')
                },
                fail: err => {
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        }
    }
};
</script>