SmartCommunity/operationSupport/src/views/businessManagement/contractManagement/stepPage/add.vue

<template>
    <div>
        <div class="steps">
            <div class="steps-item active">
                <div class="circularText"><span>1</span></div>
                <div>基本信息</div>
                <div class="steps-item-line" :class="showIndex > 0 ? 'active' : ''"></div>
            </div>
            <div class="steps-item" :class="showIndex > 0 ? 'active' : ''">
                <div class="circularText"><span>2</span></div>
                <div>金额条款</div>
                <div class="steps-item-line" :class="showIndex > 1 ? 'active' : ''"></div>
            </div>
            <div class="steps-item" :class="showIndex > 1 ? 'active' : ''">
                <div class="circularText"><span>3</span></div>
                <div>收款计划</div>
            </div>
        </div>
        <first-step v-show="showIndex == 0" ref="firststepRef"></first-step>
        <step-two ref="steptwoRef" v-show="showIndex == 1"></step-two>
        <last-step v-show="showIndex == 2"></last-step>
    </div>
</template>
<script >
import firstStep from './firstStep.vue';
import stepTwo from './stepTwo.vue';
import lastStep from './lastStep.vue';
import { Promise } from 'q';

export default {
    props: ['params'],
    components: {
        firstStep,
        stepTwo,
        lastStep
    },
    data() {
        return {
            showIndex: 0,
            formData: {
                contractNo: '',
                filePath: '',
                contractType: 0,
                customerType: null,
                communityId: '',
                signTime: '',
                startTime: '',
                endTime: '',
                customerName: '',
                customerPhone: '',
                customerAddress: '',
                contractHouseDtoList: []
            },

            //租赁规则
            rules: {
                ruleId: '',
                enable: 1,
                earnestMoney: '',
                freeTime: ''
            },
            contractPlanDtos: [],
            chargeCycle: '',
            times: [],
            timesTwo: [],
            pictureArr: [],
            relationTable: {},
            formRules: {
                customerName: [this.$valid.inputRequired('客户名称')],
                customerPhone: [this.$valid.inputRequired('客户手机')],
                customerAddress: [this.$valid.inputRequired('联系地址')],
                communityId: [this.$valid.selectRequired('社区')],
                signTime: [this.$valid.selectRequired('签订时间')],
                startTime: this.$valid.custome({
                    validator(rule, value, cb) {
                        const rl = rule;
                        if (!value) {
                            rl.message = '请选择合同时间';
                            cb(new Error());
                        } else {
                            cb();
                        }
                    }
                })
            },
            //多选
            idsObj: [],
            //社区
            communityArr: [],
            //社区树
            communityTree: [],
            //楼栋树
            communityTreeArr: [],
            //楼栋ids
            communityTreeIds: [],
            tableArr: [],
            defaultProps: {
                multiple: true,
                emitPath: false,
                value: 'value', // 唯一标识
                label: 'name', // 标签显示
                children: 'children' // 子级
            },
            loadings: false
        };
    },
    watch: {
        pictureArr(val) {
            this.formData.filePath = val.join();
        }
    },
    methods: {
        submit() {
            let nameArr = [];
            this.tableArr.map((item) => {
                nameArr.push(`${item.communityName}-${item.buildingName}-${!!item.unitName ? item.unitName + '-' : ''}${item.roomNumber}`);
            });
            let installData = this.formData;

            let installObj = JSON.parse(JSON.stringify(this.idsObj));
            installObj.map((item, index) => {
                delete item.thisArr;
                delete item.timesTwo;
                delete item.increasingYear;
                delete item.increasingPercentage;
            });
            installData.houseName = nameArr.join(',');
            installData.contractHouseDtoList = installObj;

            var loading = this.$loading();
            this.$http
                .post(`/sc-community/contract/${this.params.todo == 'add' ? 'add' : 'edit'}`, installData)
                .then(({ status, msg }) => {
                    if (status == 0) {
                        this.$message.success(msg);
                        this.params.callback();
                        this.$emit('close');
                    } else {
                        this.$message.error(msg);
                    }
                    loading.close();
                })
                .catch(() => {
                    loading.close();
                });
        },
        findDetali(id) {
            this.$http
                .get('/sc-community/enterprise/find/' + id)
                .then(({ data, status, msg }) => {
                    if (0 === status) {
                        if (data !== null) {
                            this.pictureArr = !!data.businessLicense ? data.businessLicense.split(',') : [];
                            Object.assign(this.formData, data);
                        }
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        },
        effectiveDateToggle(e) {
            this.formData.startTime = `${!!e ? e[0] : ''}`;
            this.formData.endTime = `${!!e ? e[1] : ''}`;
        },
        relation() {
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/businessManagement/enterpriseManagement/index.vue',
                    width: '850px',
                    height: '400px',
                    props: {
                        callback: resolve
                    },
                    hideStar: true,
                    title: '关联企业'
                });
            }).then((res) => {
                this.relationTable = res;
            });
        },

        modePop(id) {
            let indexs = null;
            this.$store.getters['getPopups'].map((item, index) => {
                if (item.id == id) {
                    indexs = index;
                }
            });
            return indexs;
        },
        nextStep(id) {
            let thisPopArr = this.$store.getters['getPopups'];
            let thisPop = thisPopArr[this.modePop(id)];
            // 0  取消 下一步 ，1 取消 上一步 下一步 ，2 确认 取消 上一步
            if (thisPop.showIndex == 0) {
                this.$refs.firststepRef.$refs.form.validate((valid) => {
                    if (valid) {
                        thisPop.showIndex++;
                        thisPop.nextStepButton = true;
                        thisPop.previousStepButton = true;
                        thisPop.showConfirmButton = true;
                        this.showIndex = thisPop.showIndex;
                    }
                });
            } else if (thisPop.showIndex == 1) {
                new Promise((resolve) => {
                    this.$refs.steptwoRef.chanIndexSumit(resolve);
                }).then(() => {
                    thisPop.showIndex++;
                    this.$refs.steptwoRef.getList();
                    // 第二流程 下一步
                    thisPop.nextStepButton = false;
                    thisPop.showConfirmButton = false;
                    thisPop.previousStepButton = true;
                    this.showIndex = thisPop.showIndex;
                });
            }
        },
        previousStep(id) {
            let thisPopArr = this.$store.getters['getPopups'];
            let thisPop = thisPopArr[this.modePop(id)];

            thisPop.showIndex--;
            if (thisPop.showIndex == 0) {
                thisPop.nextStepButton = true;
                thisPop.previousStepButton = false;
                thisPop.showConfirmButton = true;
            } else if (thisPop.showIndex == 1) {
                thisPop.nextStepButton = true;
                thisPop.previousStepButton = true;
                thisPop.showConfirmButton = true;
            }
            this.showIndex = thisPop.showIndex;
        },
        randomPassword() {
            let sun = 15;
            let randomNumber = [];
            for (let numb = 0; numb < sun; numb++) {
                randomNumber.push(parseInt(Math.ceil(Math.random() * sun)));
            }
            this.formData.contractNo = randomNumber.toString().replace(/,/g, '');
        }
    },
    created() {
        this.randomPassword();
        const { todo, data, communityArr, communityTree } = this.params;
        this.communityArr = communityArr;
        this.communityTree = communityTree;
        if (todo !== 'add') {
            this.findDetali(data.id);
        }
    }
};
</script>
<style lang="scss" scoped>
.formContent-item_title {
    clear: both;
}
.timeWidth {
    width: 100%;
}
.mrbt20 {
    margin-bottom: 20px;
}
/deep/ .el-date-editor .el-range-separator {
    padding: 0;
}
/deep/ .el-form-item__label,
/deep/ .el-input__inner {
    font-size: 12px;
}
.steps {
    display: flex;
    justify-content: space-between;
    color: #dbdbdb;
    .steps-item {
        display: flex;
        line-height: 36px;
        position: relative;
        margin-bottom: 24px;
        .circularText {
            height: 36px;
            width: 36px;
            display: inline-block;
            line-height: 36px;
            border-radius: 50%;
            position: relative;
            text-align: center;
            margin-right: 10px;
            color: #dbdbdb;
            span {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: inline-block;

                background: #f8fcff;
                height: 28px;
                width: 28px;
                line-height: 28px;
                border-radius: 50%;
            }
        }
        .steps-item-line {
            position: absolute;
            left: 130px;
            top: 50%;
            width: 200px;
            height: 2px;
            background: #f8fcff;
            border-radius: 2px;
            &.active {
                background: #0eaeff;
            }
        }
        &.active {
            color: #424656;
            .circularText {
                background: #b5e6ff;
                color: white;
                span {
                    background: #0eaeff;
                }
            }
        }
    }
}
</style>