SmartCommunity/operationSupport/src/views/businessManagement/contractManagement/index.vue

<template>
    <div class="main">
        <div class="search">
            <el-input placeholder="请输入合同编号/名称" class="search-input" clearable v-model="mixins_query.contractName"></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" 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>
                <!-- <el-tooltip class="item" effect="light" placement="bottom" content="导出">
                    <i class="zoniot_font zoniot-icon-daochu2" @click="exportExcel"></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-xiangqing" @click="lookDetail(scope.row)"></i>
                        </el-tooltip>
                        <el-tooltip effect="light" placement="bottom" content="续期">
                            <i class="zoniot_font zoniot-icon-xuqi" @click="renewal(scope.row)"></i>
                        </el-tooltip>

                        <el-tooltip effect="light" placement="bottom" content="退租">
                            <i
                                class="zoniot_font zoniot-icon-tuifang redText"
                                v-if="scope.row.contractStatus !== 2"
                                @click="rentWithdrawal(scope.row)"
                            ></i>
                            <i class="zoniot_font zoniot-icon-tuifang ashText" v-else></i>
                        </el-tooltip>
                    </div>
                </template>
            </zz-table>
        </div>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        return {
            times: [],
            advertisingStatus: [
                {
                    status: 0,
                    label: '已签约'
                },
                {
                    status: 1,
                    label: '生效中'
                },
                {
                    status: 2,
                    label: '到期'
                }
            ],
            cols: [
                {
                    label: '合同编号',
                    prop: 'contractNo'
                },
                {
                    label: '客户名称',
                    prop: 'customerName'
                },
                {
                    label: '客户类型',
                    prop: 'customerType',
                    format(val) {
                        if (val == 1) {
                            return '企业';
                        } else if (val == 2) {
                            return '个人';
                        }
                    },
                    width: '100'
                },
                {
                    label: '合同类型',
                    prop: 'contractType'
                },
                {
                    label: '房间',
                    prop: 'houseName'
                },
                {
                    label: '合同状态',
                    prop: 'contractStatus',
                    format(val) {
                        if (val == 0) {
                            return '已签约';
                        } else if (val == 1) {
                            return '生效中';
                        } else if (val == 2) {
                            return '到期';
                        }
                    }
                },
                {
                    label: '开始时间',
                    prop: 'startTime'
                },
                {
                    label: '结束时间',
                    prop: 'endTime'
                },
                {
                    label: '合同到期天数',
                    prop: 'endTime'
                },
                {
                    label: '操作',
                    slot: 'opt',
                    width: '180'
                }
            ],
            mixins_post: 'post',
            CommunityTree: []
        };
    },
    created() {
        this.getorgTree();
        this.getCommunityArr();
        this.mixins_dataUrl = '/sc-community/contract/page';
        this.mixins_search();
    },
    mounted() {},
    methods: {
        getorgTree() {
            this.$http
                .get('/sc-community/assets/community/list')
                .then((data) => {
                    this.communityArr = data.data;
                    this.$store.commit('setAreaSelect', data.data);
                })

                .catch(function () {});
        },
        getCommunityArr() {
            this.$http
                .get('/sc-community/assets/tree/community/find')
                .then(({ data }) => {
                    this.CommunityTree = data;
                })
                .catch(function () {});
        },
        effectiveDateToggle(va) {
            let arr = va;
            if (!arr) {
                arr = ['', ''];
            }
            this.mixins_query.startTime = arr[0];
            this.mixins_query.endTime = arr[1];
        },
        addOrEdit(todo, data = {}) {
            new Promise((resolve) => {
                let title = '添加合同';
                if (todo !== 'add') {
                    title = '修改合同';
                }
                this.$store.dispatch('addPopup', {
                    url: '/businessManagement/contractManagement/stepPage/add.vue',
                    width: '850px',
                    height: '600px',
                    props: {
                        data,
                        todo,
                        communityArr: this.communityArr,
                        communityTree: this.CommunityTree,
                        callback: resolve
                    },
                    title: title,
                    showIndex: 0,
                    previousStepButton: false,
                    showConfirmButton: true,
                    nextStepButton: true
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        exportExcel() {
            this.__exportExcel('/sc-community/enterprise/excel', this.mixins_query);
        },
        lookDetail(row) {
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/businessManagement/contractManagement/stepPage/details.vue',
                    width: '850px',
                    height: '600px',
                    props: {
                        row,
                        callback: resolve
                    },
                    title: '合同详情',
                    hideStar: true,
                    showCancelButton: true,
                    showConfirmButton: true
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        rentWithdrawal(row) {
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/businessManagement/contractManagement/stepPage/rentWithdrawal.vue',
                    width: '850px',
                    height: '600px',
                    props: {
                        row,
                        callback: resolve
                    },
                    title: '退租',
                    hideStar: true
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        renewal(row) {
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/businessManagement/contractManagement/stepPage/renewal.vue',
                    width: '850px',
                    height: '600px',
                    props: {
                        row,
                        callback: resolve
                    },
                    title: '续租'
                });
            }).then(() => {
                this.mixins_search();
            });
        }
    }
};
</script>