SmartCommunity/operationSupport/src/views/communityoperation/advertisingManagement/index.vue

<template>
    <div class="main">
        <div class="search">
            <el-input placeholder="输入广告名称/编号" class="search-input" clearable v-model="mixins_query.name"></el-input>
            <el-select placeholder="状态" v-model="mixins_query.adStatus" clearable>
                <el-option v-for="(item, index) in advertisingStatus" :key="index" :label="item.label" :value="item.status">{{
                    item.label
                }}</el-option>
            </el-select>
            <el-date-picker
                v-model="times"
                value-format="yyyyMMdd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="effectiveDateToggle"
            ></el-date-picker>
            <el-button type="primary" placeholder="状态" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>

            <div class="search-icon">
                <el-tooltip class="item" effect="light" placement="bottom" content="新增">
                    <i class="zoniot_font zoniot-icon-tianjia2" @click="addOrEdit('add')"></i>
                </el-tooltip>
            </div>
        </div>
        <div class="roles-wrap">
            <zz-table
                :cols="cols"
                :settings="{ showIndex: true, stripe: true }"
                :loading="mixins_onQuery"
                :data="mixins_list"
                :pageset="mixins_pageset"
                @page-change="pageChange"
                @selection-change="selectionChange"
            >
                <template slot-scope="scope" slot="opt">
                    <div class="opt">
                        <el-tooltip effect="light" placement="bottom" content="编辑">
                            <i class="zoniot_font zoniot-icon-bianji" @click="addOrEdit('edit', scope.row)"></i>
                        </el-tooltip>
                        <el-tooltip effect="light" placement="bottom" content="删除">
                            <i class="zoniot_font zoniot-icon-shanchu redText" @click="deluserbyidFn(scope.row.id)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </zz-table>
        </div>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    name: 'advertisingManagement',
    data() {
        return {
            // 数据列表
            advertisingStatus: [
                {
                    status: 0,
                    label: '未开始'
                },
                {
                    status: 1,
                    label: '播放中'
                },
                {
                    status: 2,
                    label: '已结束'
                },
                {
                    status: 3,
                    label: '已终止'
                }
            ],
            times: [],
            cols: [
                {
                    label: '广告编号',
                    prop: 'communityId'
                },
                {
                    label: '广告名称',
                    prop: 'name'
                },
                {
                    label: '投放社区',
                    prop: 'communityNames'
                },
                {
                    label: '开始播放日期',
                    prop: 'startTime'
                },
                {
                    label: '结束播放日期',
                    prop: 'endTime'
                },
                {
                    label: '创建时间',
                    prop: 'createDate'
                },
                {
                    label: '状态',
                    prop: 'adStatus',
                    format(val) {
                        if (val == 0) {
                            return '未开始';
                        } else if (val == 1) {
                            return '播放中';
                        } else if (val == 2) {
                            return '已结束';
                        } else if (val == 3) {
                            return '已终止';
                        }
                    }
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt',
                    width: 150
                }
            ],
            mixins_post: 'get'
        };
    },
    created() {
        if (this.$store.getters['getAreaSelect'].length === 0) {
            this.getorgTree();
        }
        this.mixins_dataUrl = '/sc-community/advertising/page';
        this.mixins_query = {};
        this.mixins_search();
    },
    mounted() {},
    methods: {
        effectiveDateToggle(va) {
            let arr = va;
            if (!arr) {
                arr = ['', ''];
            }
            this.mixins_query.startDate = arr[0];
            this.mixins_query.endDate = arr[1];
        },
        getorgTree() {
            this.$http
                .get('/sc-community/assets/community/list')
                .then((data) => {
                    this.$store.commit('setAreaSelect', data.data);
                })

                .catch(function () {});
        },
        deluserbyidFn(id) {
            let ids = [];
            if (!!id) {
                ids = [id];
            } else {
                if (!this.selectRow.length) {
                    this.$message.error('您尚未选择要删除的记录，请选择后再操作批量删除');
                    return;
                }
                this.selectRow.forEach((v) => {
                    ids.push(v.id);
                });
            }

            const h = this.$createElement;
            this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
                .then(() => {
                    this.$http.post('/sc-community/device/delete', ids).then(({ status, data, msg }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.mixins_search();
                        }
                    });
                })
                .catch(() => {});
        },
        Scrap(id) {
            this.$msgBox(`确认提示`, '设备报废后将无法正常接收数据，请问是否继续?')
                .then(() => {
                    this.$http
                        .post('/sc-community/device/deviceScrapInterface', { id: id, deviceStatus: 5 })
                        .then(({ status, data, msg }) => {
                            if (0 === status) {
                                this.$message({
                                    type: 'success',
                                    message: '报废成功!'
                                });
                                this.mixins_search();
                            }
                        });
                })
                .catch(() => {});
        },
        addOrEdit(todo, data = {}) {
            new Promise((resolve) => {
                let title = '添加设备';
                if (todo !== 'add') {
                    title = '修改设备';
                }
                this.$store.dispatch('addPopup', {
                    url: '/deviceManagement/popups/addDeviceManagement.vue',
                    width: '500px',
                    height: '400px',
                    props: {
                        data,
                        todo,
                        productOptions: this.productOptions,
                        callback: resolve
                    },
                    title: title
                });
            }).then(() => {
                this.mixins_search();
            });
        }
    }
};
</script>
<style scoped lang='scss'>
.QRImg > div {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}
</style>