Project-Annex/userCenter/src/views/sysManage/deviceManage/sceneManage.vue

<!--
 * @Author: liyi
 * @Date: 2020-11-13 16:35:06
 * @LastEditTime: 2021-06-01 17:19:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \WEB\dispatchingManagement\src\views\sysManage\deviceManage\sceneManage.vue
-->
<template>
    <div style="padding-right: 20px">
        <div class="box-scene" v-show="isEntryPage">
            <div class="handle-box">
                <el-input class="servertype-serch" v-model.trim="mixins_query.sceneName" placeholder="请输入场景名称"></el-input>
                <select-tree
                    class="new-select-tree"
                    placeholder="请选择所属公司"
                    selectTreeTitle="所属公司"
                    width="240"
                    :options="organListCompany"
                    :props="defaultProps"
                    @selected="selectedcompanyOrgId"
                    v-model="mixins_query.companyOrgId"
                >
                </select-tree>
                <select-tree
                    class="new-select-tree"
                    placeholder="请选择所属部门"
                    selectTreeTitle="所属部门"
                    width="240"
                    :options="organListdepartment"
                    :props="defaultProps"
                    v-model="mixins_query.deptOrgId"
                >
                </select-tree>
                <el-button class="servertype-serch-btn" type="primary" @click="getlistpage"><i class="iconfont">&#xe6fc;</i>查询</el-button>
                <i class="fr fr-fs-fc fr-add iconfont" @click="addOrEdit" v-txt-tip data-txt="新增">&#xe641;</i>
                <!-- <i class="fr fr-fs-fc fr-del iconfont" @click="delusergroup">&#xe63b;</i> -->
            </div>

            <!-- 表格 -->
            <div class="scene-manage-table">
                <zz-table
                    :cols="cols"
                    :settings="{ showCheckbox: false, showIndex: false }"
                    :loading="mixins_onQuery"
                    :data="mixins_list"
                    row-key="id"
                    :treeProps="treeProps"
                    :pageset="mixins_pageset"
                    @page-change="pageChange"
                >
                    <template slot-scope="scope" slot="serviceTypeZN">
                        <span v-for="item in allserviceType" :key="item.dictCode" v-show="scope.row.serviceType == item.dictCode">{{
                            item.dictValue
                        }}</span>
                    </template>
                    <!-- <template slot="enableState" slot-scope="scope">
                     <p><span :style="{color:deviceLoader.getColor(scope.row.enableState)}">{{deviceLoader.getLabel(scope.row.enableState)}}</span></p>
                    </template> -->
                    <template slot-scope="scope" slot="opt">
                        <i
                            @click="bindDevice(scope.row.companyOrgId, scope.row.deptOrgId, scope.row.id)"
                            class="iconfont"
                            style="margin-right: 30px"
                            v-txt-tip
                            data-txt="绑定设备"
                            >&#xe685;</i
                        >
                        <i @click="openDecicePage(scope.row)" class="iconfont" style="margin-right: 30px" v-txt-tip data-txt="设备列表"
                            >&#xe671;</i
                        >
                        <i @click="addOrEdit('edit', scope.row)" class="iconfont" style="margin-right: 30px" v-txt-tip data-txt="编辑"
                            >&#xe645;</i
                        >
                        <i @click="delusergroup(scope.row)" class="iconfont" style="color: #ff7272" v-txt-tip data-txt="删除">&#xe63a;</i>
                    </template>
                </zz-table>
            </div>
        </div>
        <scenemanage-devicelist v-show="!isEntryPage" :clickid="clickid" @changeisEntryPage="changeisEntryPage"></scenemanage-devicelist>
    </div>
</template>

<script>
import list from '@utils/list.js';
// import {deviceLoader} from "@utils/commonLoader.js";
import sceneManageDevicelist from './popups/sceneManageDevicelist.vue';
export default {
    mixins: [list],
    components: {
        'scenemanage-devicelist': sceneManageDevicelist
    },
    data() {
        return {
            clickid: '',
            selectRow: '',
            isEntryPage: true,
            mixins_query: {
                companyOrgId: '',
                deptOrgId: '',
                sceneName: ''
            },
            mixins_list: [],
            scenetypeList: [],
            allsceneType: [],
            organListCompany: '',
            organListdepartment: '',
            allServiceScene: '',
            allServiceStatu: [
                {
                    id: 1,
                    label: '启用'
                },
                {
                    id: 0,
                    label: '停用'
                }
            ],
            defaultProps: {
                value: 'id', // 唯一标识
                label: 'orgName', // 标签显示
                children: 'orgs' // 子级
            },
            allSelectRow: [],
            cols: [
                {
                    label: '场景名称',
                    prop: 'sceneName'
                },
                {
                    label: '场景类型',
                    prop: 'sceneTypeName'
                },
                {
                    label: '所属公司',
                    prop: 'companyOrgName'
                },
                {
                    label: '所属部门',
                    prop: 'deptOrgName'
                },
                {
                    label: '状态',
                    prop: 'enableState',
                    format(val) {
                        if (val == 1) {
                            return '启用';
                        } else if (val == 0) {
                            return '停用';
                        }
                    }
                },
                {
                    label: '操作',
                    prop: 'opt',
                    slot: 'opt',
                    width: 260
                }
            ],
            treeProps: { children: 'children', hasChildren: 'hasChildren' }
        };
    },
    created() {
        this.getorgTree();
        this.getscenetypeTreeList();
        this.getlistpage();
        this.getAllScene();
    },
    methods: {
        /**
         * 获取设备列表页
         */
        getlistpage() {
            this.mixins_dataUrl = '/zoniot-water/scene/selectPage';
            this.mixins_pageset = {
                pageNum: this.mixins_pageset.pageNum,
                pageSize: this.mixins_pageset.pageSize
            };
            this.mixins_post = 'post';
            this.mixins_search();
        },
        addOrEdit(tip, item) {
            let row = {},
                title = '新增场景';
            new Promise((resolve) => {
                if (tip === 'edit') {
                    // row = item;
                    title = '修改场景';
                    this.$http.get('/zoniot-water/scene/selectById', { id: item.id }).then(({ status, data, msg }) => {
                        if (status === 0) {
                            let isExist = this.__calleArr(this.allServiceScene, data.parentSceneId, 'id');
                            data.parentSceneId = isExist ? data.parentSceneId : '';
                            row = data;
                            this.$http
                                .postForm('/sc-user-center/org/getOrgUserTree', { orgType: 'department', id: data.companyOrgId })
                                .then(({ status, data, msg }) => {
                                    if (status === 0) {
                                        this.organListdepartment = data ? data : [];
                                        this.$http
                                            .get('/zoniot-water/scene/selectListForParm', {
                                                comId: row.companyOrgId,
                                                deptId: row.deptOrgId
                                            })
                                            .then(({ status, data, msg }) => {
                                                if (status === 0) {
                                                    this.allsceneType = data ? data : [];
                                                    let current;
                                                    this.allsceneType.map((item, index) => {
                                                        if (item.id == row.parentSceneId) {
                                                            current = item.sceneTypeId;
                                                        }
                                                    });
                                                    current = current ? current : 0;
                                                    this.$http
                                                        .get('/zoniot-water/scenetype/selectListByParentId', { id: current })
                                                        .then(({ status, data, msg }) => {
                                                            if (status === 0) {
                                                                this.scenetypeList = data ? data : [];
                                                                resolve();
                                                            } else {
                                                                // this.$message.error(msg);
                                                            }
                                                        });
                                                } else {
                                                    this.$message.error(msg);
                                                }
                                            });
                                    } else {
                                        this.$message.error(msg);
                                    }
                                });
                        } else {
                            this.$message.error(msg);
                        }
                    });
                } else {
                    this.organListdepartment = [];
                    this.allsceneType = [];
                    row.enableState = 1;
                    resolve();
                }
            }).then(() => {
                new Promise((resolve) => {
                    this.$store.dispatch('openModal', {
                        url: '/sysManage/deviceManage/popups/addOrEditScene.vue',
                        width: '580px',
                        height: '700px',
                        props: {
                            data: row,
                            todo: tip,
                            organList: this.organList,
                            allServiceScene: this.allServiceScene,
                            allsceneType: this.allsceneType,
                            organListCompany: this.organListCompany,
                            scenetypeList: this.scenetypeList,
                            organListdepartment: this.organListdepartment,
                            // allRoleId: this.allRoleId,
                            // allUserType: this.allUserType,
                            callback: resolve
                        },
                        title: title
                    });
                }).then(() => {
                    this.mixins_search();
                    this.getAllScene();
                });
            });
        },

        delusergroup(item) {
            let ids = [];
            if (item.id) {
                ids.push(item.id);
            } else {
                if (!this.selectRow.length) {
                    this.$message.error('您尚未选择要删除的记录，请选择后再操作批量删除');
                    return;
                }
                this.selectRow.forEach((v) => {
                    ids.push(v.id);
                });
            }
            this.$msgBox(`确定要删除?`, '删除后将无法恢复，是否继续？').then(() => {
                this.$http.post('/zoniot-water/scene/deleteByIds', ids).then(({ status, data, msg }) => {
                    if (status === 0) {
                        this.$message.success('删除成功');
                        this.getlistpage();
                        this.getAllScene();
                    } else {
                        this.$message.error(msg);
                    }
                });
            });
        },
        selectionChange(val) {
            this.selectRow = val;
        },
        getorgTree() {
            // 获取 公司树
            this.$http.postForm('/sc-user-center/org/getOrgUserTree', { orgType: 'company', id: '000' }).then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    this.organListCompany = data;
                    // console.log(this.organListCompany );
                } else {
                    // this.$message.error(msg);
                }
            });
        },
        selectedcompanyOrgId(e) {
            if (!e) return;
            // 获取 部门树e
            this.$http.postForm('/sc-user-center/org/getOrgUserTree', { orgType: 'department', id: e }).then(({ status, data, msg }) => {
                if (status === 0) {
                    this.organListdepartment = data ? data : [];
                } else {
                    this.$message.error(msg);
                }
            });
        },
        // 获取场景树
        getscenetypeTreeList() {
            this.$http.get('/zoniot-water/scenetype/selectList', { sceneTypeName: this.sceneName }).then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    this.scenetypeList = data;
                } else {
                    // this.$message.error(msg);
                }
            });
        },
        // 上级 场景
        getAllScene() {
            this.$http.get('/zoniot-water/scene/selectList').then(({ status, data, msg }) => {
                if (status === 0) {
                    this.allServiceScene = data;
                } else {
                    this.$message.error(msg);
                }
            });
        },
        openDecicePage(row) {
            this.clickid = row.id + '-' + new Date();
            this.isEntryPage = !this.isEntryPage;
        },
        changeisEntryPage(val) {
            this.isEntryPage = val;
        },
        bindDevice(companyOrgId, deptOrgId, sceneId) {
            new Promise((resolve) => {
                let row,
                    title = '绑定设备';
                row = {
                    companyOrgId,
                    deptOrgId,
                    sceneId
                };
                this.$store.dispatch('openModal', {
                    url: '/sysManage/deviceManage/popups/bindDevice.vue',
                    title: title,
                    width: '1000px',
                    height: '610px',
                    notip: true,
                    showCancelButton: true,
                    showConfirmButton: true,
                    props: {
                        data: row,
                        callback: resolve
                    }
                });
            }).then(() => {
                this.mixins_search();
            });
        }
    }
};
</script>


<style lang="scss" scoped>
.handle-box {
    // width: 1660px;
    height: 60px;
    background: #ffffff;
    opacity: 1;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 15px 20px;
    margin-bottom: 20px;
}
.fr {
    float: right;
    margin-right: 20px;
}

.servertype-serch {
    width: 240px;
    height: 30px;
    margin-right: 20px;
    vertical-align: top;
}
.new-select-tree {
    vertical-align: top;
    display: inline-block;
    margin-right: 20px;
}
table p {
    display: inline-block;
}
.servertype-serch-btn {
    width: 60px;
    height: 30px;
    opacity: 1;
    border-radius: 4px;
    padding: 0;
    i {
        margin-right: 4px;
        vertical-align: text-top;
    }
}
</style>
<style lang="scss" >
.scene-manage-table {
    table p {
        display: inline-block;
    }
}
.el-table__expand-icon {
    vertical-align: super;
}
</style>