SmartCommunity/operationSupport/src/views/payService/billingRules/index.vue

<template>
    <div class="main">
        <div class="search">
            <el-input placeholder="输入费用名称" class="search-input" clearable v-model="mixins_query.chargeName"></el-input>
            <el-select v-model="mixins_query.communityId" placeholder="所属社区" clearable>
                <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
            </el-select>
            <el-select v-model="mixins_query.chargeType" placeholder="费用类型" clearable>
                <el-option label="物业费" :value="1"></el-option>
                <el-option label="水费" :value="2"></el-option>
                <el-option label="电费" :value="3"></el-option>
                <!-- <el-option label="车位费" :value="4"></el-option>
                <el-option label="二次供水费" :value="5"></el-option> -->
            </el-select>
            <el-button type="primary" 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="iconfont" @click="addOrEdit('add')">&#xe641;</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"
            >
                <template slot-scope="scope" slot="chargeMode">
                    <span v-if="scope.row.chargeMode === 1">固定收费 </span>
                    <span v-if="scope.row.chargeMode === 2">{{ scope.row.chargeType === 1 ? '价格*面积收费 ' : '单价*用量' }}</span>
                    <span v-if="scope.row.chargeMode === 3">阶梯计费 </span>
                </template>
                <template slot-scope="scope" slot="chargePrice">
                    <div v-if="!!scope.row.chargePrice">{{ scope.row.chargePrice }}</div>
                    <template v-else>
                        <div v-for="(item, index) in JSON.parse(scope.row.chargePriceLadder)" :key="index">
                            <div>
                                <span v-if="item.ladder === 1">一 阶价格：{{ item.price }}</span>
                                <span v-else-if="item.ladder === 2">二 阶价格：{{ item.price }}</span>
                                <span v-else-if="item.ladder === 3">三 阶价格：{{ item.price }}</span>
                                <span v-else-if="item.ladder === 4">四 阶价格：{{ item.price }}</span>
                                <span v-else-if="item.ladder === 5">五 阶价格：{{ item.price }}</span>
                                <span v-else>{{ scope.row.chargePrice }}</span>
                            </div>
                        </div>
                    </template>
                </template>

                <template slot-scope="scope" slot="opt">
                    <div class="opt">
                        <el-tooltip
                            class="item"
                            effect="light"
                            placement="bottom"
                            :content="scope.row.chargeStatus === 1 ? '禁用' : '启用'"
                        >
                            <i
                                v-if="scope.row.chargeStatus === 1"
                                class="zoniot_font zoniot-icon-qiyong1"
                                @click="enabledStatus(scope.row)"
                            ></i>
                            <i v-else class="zoniot_font zoniot-icon-jinyong1" @click="enabledStatus(scope.row)"></i>
                        </el-tooltip>
                        <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';
const sunm = ['一', '二', '三', '四', '五'];
export default {
    mixins: [list],
    name:'billingRules',
    data() {
        return {
            cols: [
                {
                    label: '社区名称',
                    prop: 'communityName'
                },
                {
                    label: '费用名称',
                    prop: 'chargeName'
                },
                {
                    label: '费用类型',
                    prop: 'chargeType',
                    format(val) {
                        if (val == '1') {
                            return '物业费';
                        } else if (val == '2') {
                            return '水费';
                        } else if (val == '3') {
                            return '电费';
                        } else if (val == '4') {
                            return '车位费';
                        } else if (val == '5') {
                            return '二次供水费';
                        }
                    }
                },
                {
                    label: '计费方式',
                    prop: 'chargeMode',
                    slot: 'chargeMode'
                },
                {
                    label: '价格（元）',
                    prop: 'chargePrice',
                    slot: 'chargePrice'
                },
                {
                    label: '计费周期',
                    prop: 'chargeCycle',
                    format(val) {
                        if (val) {
                            return val + '个月';
                        }
                    }
                },
                {
                    label: '状态',
                    prop: 'chargeStatus',
                    format(val) {
                        if (val == '1') {
                            return '启用';
                        } else if (val == '2') {
                            return '禁用';
                        }
                    }
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            productOptions: [],
            communityArr: [],
            mixins_post: 'get'
        };
    },
    created() {
        this.getorgTree();
        this.mixins_dataUrl = '/sc-charge/scChargeStrategy/page';
        this.mixins_query = {};
        this.mixins_search();
    },
    mounted() {
        this.getProductOptions();
    },
    methods: {
        getorgTree() {
            this.$http
                .get('/sc-community/assets/community/list')
                .then((data) => {
                    this.communityArr = data.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.postForm('/sc-charge/scChargeStrategy/delete', { id: id }).then(({ status, data, msg }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.mixins_search();
                        } else {
                            this.$message.error(msg);
                        }
                    });
                })
                .catch(() => {});
        },
        enabledStatus(rowinfo) {
            let status = 1;
            if (rowinfo.chargeStatus === 1) {
                status = 2;
            }
            this.$http.postForm(`/sc-charge/scChargeStrategy/enabled`, { id: rowinfo.id, chargeStatus: status }).then(({ status, msg }) => {
                if (status == 0) {
                    this.$message.success(msg);
                    this.mixins_search();
                } else {
                    this.$message.error(msg);
                }
            });
        },
        addOrEdit(todo, data = {}) {
            new Promise((resolve) => {
                let title = '新增收费项目';
                if (todo == 'add') {
                } else {
                    title = '修改收费项目';
                }
                this.$store.dispatch('addPopup', {
                    url: '/payService/billingRules/stepPage/add.vue',
                    width: '524px',
                    height: '600px',
                    props: {
                        data,
                        todo,
                        productOptions: this.productOptions,
                        callback: resolve
                    },
                    title: title
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        getProductOptions() {
            this.$http.postForm('/sc-community/devicetype/selectList', { name: '' }).then((data) => {
                this.productOptions = data;
            });
        }
    }
};
</script>