SmartCommunity/operationSupport/src/views/payService/call/callSet.vue

<template>
    <div class="content">
        <div class="search">
            <div class="title">催缴设置</div>
            <div class="search-icon">
                <el-button type="primary" @click="goBack">返回</el-button>
            </div>
        </div>
        <div class="organ-tree">
            <el-input v-model="filterText" placeholder="请输入关键字" clearable suffix-icon="el-icon-search"></el-input>
            <div class="tops">
                <template v-for="(item, index) in communityArr">
                    <div
                        class="organ-tree-item"
                        :class="activeIndex === index ? 'active' : ''"
                        :key="index"
                        @click="toggle(index, item.id)"
                    >
                        {{ item.communityName }}
                    </div>
                </template>
            </div>
        </div>
        <div class="content-right">
            <div class="">
                <div class="blockName">催缴设置（<span class="show-required-icon-star"></span>为必填项）</div>
                <el-form label-width="120px" :rules="formRules">
                    <el-form-item label="催缴方式" prop="callType">

                        <el-radio v-model="callPayment.callType" :label="1">短信</el-radio>
                        <el-radio v-model="callPayment.callType" :label="2">微信</el-radio>
                    </el-form-item>
                    <el-form-item label="欠费时间">
                        >
                        <el-input style="width: 40%; margin: 0 15px" clearable v-trim v-model.trim="callPayment.arrearageDays"></el-input>天
                    </el-form-item>
                    <el-form-item label="催缴时间">
                        <el-time-picker
                            style="display: block"
                            @change="toggleTime"
                            v-model="callTime"
                            placeholder="选择日期"
                        ></el-time-picker>
                        <el-radio v-model="callPayment.callFrequency" :label="1">一次</el-radio>
                        <el-radio v-model="callPayment.callFrequency" :label="2">每天</el-radio>
                    </el-form-item>
                </el-form>
                <div class="blockName">短信模板配置<span class="show-required-icon-star"></span>为必填项）</div>
                <zz-form :cols="formCols" :data="smsTemplate" :rules="formRules" labelWidth="120" ref="form" class="width50">
                    <template slot="smsTemplate">
                        <el-input
                            v-model="smsTemplate.smsTemplate"
                            type="textarea"
                            resize="none"
                            rows="6"
                            :placeholder="textareaMsg"
                            maxlength="300"
                            show-word-limit="300"
                        ></el-input>
                    </template>
                    <template slot="titleMsg">
                        <div class="titleMsg">
                            <div class="msgTitle">特别说明：</div>
                            {accountname} ：业主姓名 <br />
                            {address}：房产信息<br />
                            {Accountperiod}：费用账期 <br />
                            {expenditure}：费用名称<br />
                            {amount}：费用金额
                            <div class="msgred">注意: 请勿随意修改模板字段名称，如需修改模板字段或字段含义，请联系相关技术人员</div>
                        </div>
                    </template>
                </zz-form>
            </div>
            <div class="buttons">
                <el-button type="primary" @click="addEdit()">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            filterText: '',
            communityArr: [],
            textareaMsg:
                '尊敬的业主{accountname}，您位于{address} 的房产，需要缴纳 {Accountperiod} 的{expenditure}{amount}。请您尽快缴纳,谢谢合作。如已缴纳，请忽略本信息。',
            smsTemplate: {
                gatewaySign: '',
                smsName: '',
                smsPassword: '',
                smsSign: '',
                smsTemplate: ''
            },
            communityId: '',
            callTime: '',
            callPayment: {
                arrearageDays: '',
                callTime: '',
                callType: 1,
                callFrequency: 1
            },
            formCols: [
                [
                    {
                        label: 'SMS用户名',
                        prop: 'smsName',
                        slot: 'smsName',
                        input: true
                    },
                    {
                        label: 'SMS密码',
                        prop: 'smsPassword',
                        slot: 'smsPassword',
                        input: true
                    },
                    {
                        label: '短信签名',
                        prop: 'smsSign',
                        slot: 'smsSign',
                        input: true
                    },
                    {
                        label: '网关签名编码',
                        prop: 'gatewaySign',
                        input: true
                    },
                    {
                        label: ' 短信模板',
                        prop: 'smsTemplate',
                        slot: 'smsTemplate'
                    },
                    {
                        label: ' ',
                        slot: 'titleMsg'
                    }
                ]
            ],
            formRules: {
                gatewaySign: [this.$valid.inputRequired('网关签名编码')],
                smsName: [this.$valid.inputRequired('SMS用户名')],
                smsPassword: [this.$valid.inputRequired('SMS密码')],
                smsSign: [this.$valid.inputRequired('短信签名')],
                smsTemplate: [this.$valid.inputRequired('短信模板')],
                callType: [this.$valid.selectRequired('催缴方式')]
            },
            activeIndex: 0
        };
    },
    watch: {
        filterText(val) {
            this.communityArr.forEach((item, index) => {
                if (val) {
                    if (JSON.stringify(item.communityName).indexOf(val) !== -1) {
                        this.activeIndex = index;
                    }
                } else {
                    if (item.id === this.communityId) {
                        this.activeIndex = index;
                    }
                }
            });
        }
    },
    created() {
        this.getorgTree();
    },
    mounted() {},
    methods: {
        getorgTree() {
            this.$http
                .get('/sc-community/assets/community/list')
                .then((data) => {
                    this.communityArr = data.data;
                    this.$store.commit('setAreaSelect', data.data);
                    if (data.data.length !== 0) {
                        this.toggle(0, data.data[0].id);
                    }
                })
                .catch(function () {});
        },
        toggle(index, id) {
            const time = new Date();
            this.communityId = id;
            this.$http.post('/sc-charge/scChargeCallPayment/find/' + id).then(({ status, data, msg }) => {
                if (status === 0) {
                    const { callPayment, smsTemplate } = data;
                    this.callPayment = {
                        arrearageDays: '',
                        callTime: '',
                        callType: 1,
                        callFrequency: 1
                    };
                    this.callTime = '';
                    this.smsTemplate = {
                        gatewaySign: '',
                        smsName: '',
                        smsPassword: '',
                        smsSign: '',
                        smsTemplate: ''
                    };
                    this.$nextTick(() => {
                        if (!!smsTemplate) {
                            this.smsTemplate = smsTemplate;
                        }
                        if (!!callPayment) {
                            this.callPayment = callPayment;
                            let hfm = callPayment.callTime.split(':');
                            this.callTime = new Date(time.getFullYear(), time.getMonth(), time.getDate(), hfm[0], hfm[1], hfm[2]);
                        }
                    });
                }
            });
            this.activeIndex = index;
        },
        toggleTime(e) {
            this.callPayment.callTime = this.timeFi(e.getHours()) + ':' + this.timeFi(e.getMinutes()) + ':' + this.timeFi(e.getSeconds());
        },
        timeFi(val) {
            let time = val;
            time = time.toString().length === 2 ? time : '0' + time;
            return time;
        },
        addEdit() {
            new Promise((resolve) => {
                this.$refs.form.validate(resolve);
            })
                .then(() => {
                    let url = '/sc-charge/scChargeCallPayment/save';
                    let params = {
                        smsTemplate: this.smsTemplate,
                        callPayment: this.callPayment,
                        communityId: this.communityId
                    };
                    this.$http
                        .post(url, params)
                        .then(({ status, msg }) => {
                            if (status == 0) {
                                this.$message.success(msg);
                                this.closes();
                            } else {
                                this.$message.error(msg);
                            }
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        goBack() {
            this.$parent.isShowStatus = 'list';
            this.$parent.mixins_search();
        }
    }
};
</script>
<style scoped lang="scss">
.title {
    float: left;
    font-size: 16px;
    font-weight: 600;
    color: #424656;
    line-height: 30px;
}
.organ-tree {
    width: 260px;
    background: #ffffff;
    padding: 20px;
    box-sizing: border-box;
    float: left;

    overflow: auto;
    &::before {
        clear: both;
    }
    .tops {
        margin-top: 15px;
    }
    .organ-tree-item {
        line-height: 30px;
        position: relative;
        color: #7a7d88;
        padding-left: 10px;
        cursor: pointer;
        &.active {
            color: #0eaeff;
            &::before {
                background: #0eaeff;
            }
        }
        &::before {
            position: absolute;
            left: 0px;
            top: 12px;
            width: 4px;
            height: 4px;
            border-radius: 4px;
            background: #7a7d88;
            display: block;
            content: ' ';
        }
    }
    // .tree-style-box {
    //     margin-top: 20px;
    //     max-height: calc(100vh - 200px);
    //     overflow: scroll;
    // }
}
.content-right {
    background: white;
    padding: 20px;
    .blockName {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e0e1e3;
    }
    .width50 {
        width: 50%;
    }
    .show-required-icon-star {
        &:before {
            content: '*';
            color: #f56c6c;
        }
    }
}
.titleMsg {
    font-size: 12px;
    font-weight: 400;
    color: #424656;
    line-height: 17px;
    .msgTitle {
        color: #0eaeff;
        margin-bottom: 10px;
    }
    .msgred {
        color: #ff7171;
        margin-top: 15px;
    }
}
.buttons {
    text-align: right;
}
</style>