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

<template>
    <div class="content main">
        <organ-tree @organId="currentOrganId"></organ-tree>
        <div class="content-right">
            <div class="search">
                <el-input
                    clearable
                    placeholder="输入费用名称"
                    class="search-input"
                    v-trim
                    v-model.trim="mixins_query.chargeName"
                ></el-input>
                <el-button class="search-btn" type="primary" @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-shoufeishezhi" @click="addOrEdit('add')"></i>
                    </el-tooltip>
                </div>
            </div>
            <div class="redText title">注：房屋若没有单独设置收费项目，将使用社区、楼栋或单元设置的收费项(以最下级设置的收费项目为准)</div>
            <zz-table
                :settings="{ showIndex: true, stripe: true }"
                :cols="cols"
                :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">价格*面积收费</span>
                    <span v-if="scope.row.chargeMode === 3">阶梯计费 </span>
                    <span v-if="scope.row.chargeMode === 4">单价*用量</span>
                </template>
                <template slot-scope="scope" slot="chargePrice">
                    <!-- <template v-if="scope.row.chargePriceLadder !== 'null' || scope.row.chargePriceLadder !== null">
                        <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> -->
                    <div >{{ scope.row.chargePrice }}</div>
                </template>
                <template slot-scope="scope" slot="opt">
                    <div class="opt">
                        <el-tooltip class="item" effect="light" placement="bottom" content="移除">
                            <i class="zoniot_font zoniot-icon-shanchu redText" @click="deleteRow(scope.row)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </zz-table>
        </div>
    </div>
</template>

<script>
import list from '@/js/list.js';

export default {
    mixins: [list],
    name: 'chargeSetting',
    data() {
        return {
            currentId: '',
            cols: [
                {
                    label: '地址',
                    prop: 'address'
                },
                {
                    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 == '6') {
                            return '卫生费';
                        } else if (val == '7') {
                            return '其他费用';
                        }
                    }
                },
                {
                    label: '计费方式',
                    prop: 'chargeMode',
                    slot: 'chargeMode'
                },
                {
                    label: '价格（元）',
                    prop: 'chargePrice',
                    slot: 'chargePrice'
                },
                {
                    label: '计费周期',
                    prop: 'chargeCycle',
                    format(val) {
                        if (val) {
                            return val + '个月';
                        }
                    }
                },

                {
                    label: '首次生效时间',
                    prop: 'firstEffectiveDate'
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            chiData: {
                type: '',
                value: '',
                address: ''
            }
        };
    },
    methods: {
        addOrEdit(todo) {
            new Promise((resolve) => {
                let title = '设置收费项目';
                this.$store.dispatch('addPopup', {
                    url: '/payService/chargeSetting/stepPage/add.vue',
                    width: '524px',
                    height: '415px',
                    props: {
                        data: this.chiData,
                        todo,
                        productOptions: this.productOptions,
                        callback: resolve
                    },
                    title: title
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        deleteRow(row) {
            const { chargeName } = row;
            let title = `您确定要移除“${chargeName}”`;
            this.$msgBox(title)
                .then(() => {
                    this.$http
                        .postForm('/sc-charge/scChargeStrategyConfig/delete', { id: row.id })
                        .then(({ status, msg }) => {
                            if (0 === status) {
                                this.$message.success(msg);
                                this.mixins_search('del');
                            } else {
                                this.$message.error(msg);
                            }
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        currentOrganId(data) {
            this.currentId = data || '';
        }
    },
    watch: {
        currentId(newValue, oldValue) {
            if (newValue.type) {
                let newValueIds = newValue.id.split('-');
                this.chiData.type = newValueIds.length;
                if (newValue.type === 'community') {
                    this.mixins_query.value = newValue.communityId;
                    this.mixins_query.type = 1;
                    this.chiData.value = newValue.communityId;
                    this.chiData.address = newValue.communityName;
                } else if (newValue.type === 'building') {
                    this.mixins_query.value = newValue.buildingId;
                    this.mixins_query.type = 2;
                    this.chiData.value = newValue.buildingId;
                    this.chiData.address = newValue.communityName + ' ' + newValue.buildingName;
                } else if (newValue.type === 'unit') {
                    this.mixins_query.value = newValue.buildingId + ':' + newValue.unitId;
                    this.mixins_query.type = 3;
                    this.chiData.value = newValue.buildingId + ':' + newValue.unitId;
                    this.chiData.address = newValue.communityName + ' ' + newValue.buildingName + ' ' + newValue.unitName;
                } else if (newValue.type === 'room') {
                    this.mixins_query.value = newValue.houseId;
                    this.mixins_query.type = 4;
                    this.chiData.value = newValue.houseId;
                    this.chiData.address =
                        newValue.communityName + ' ' + newValue.buildingName + ' ' + newValue.unitName + ' ' + newValue.houseName;
                }
            }

            this.mixins_search();
        }
    },
    created() {
        this.mix_path = ''; // 权限
        this.mixins_dataUrl = '/sc-charge/scChargeStrategyConfig/page'; // 分页查询接口
        this.mixins_query = {};
    }
};
</script>
<style lang='scss' scoped >
.title {
    font-size: 12px;
    background: white;
    padding: 20px;
}
</style>