item-management-web/src/components/MoreSearchBar/index.vue

<template>
    <div>
        <div class="bar-container">
            <el-row>
                <el-col :xs="24" :sm="12" :lg="3" :span="6" style="margin-right: 8px;">
                    <el-input v-if="keyword" v-model="listQuery.keyword" placeholder="关键字搜索..." clearable>
                    </el-input>
                </el-col>

                <el-col :xs="24" :sm="12" :lg="3" :span="6">
                    <el-select v-if="nodeCode" v-model="listQuery.nodeId" placeholder="流程节点" clearable filterable
                        class="filter-item">
                        <el-option v-for="(item, index) in nodes" :key="index" :label="item.name" :value="item.id" />
                    </el-select>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                    <el-date-picker class="filter-item" v-if="orderDateSearch" clearable v-model="orderDate"
                        type="daterange" align="center" unlink-panels range-separator="至" start-placeholder="下单日期（开始）"
                        end-placeholder="下单日期（结束）" :picker-options="pickerOptions" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="2" :span="6" style="margin-right: 5px;">
                    <el-select v-if="delivery" v-model="listQuery.delivery" @change="searchList" placeholder="送达状态">
                        <el-option label="(送达)全部">(送达)全部</el-option>
                        <el-option :value="true" label="已送达">已送达</el-option>
                        <el-option :value="false" label="未送达">未送达</el-option>
                    </el-select>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="2" :span="6" style="margin-right: 5px;">
                    <el-select v-if="hasRealAmount" v-model="listQuery.hasRealAmount" @change="searchList" placeholder="收款状态">
                        <el-option label="(实收款)全部">(实收款)全部</el-option>
                        <el-option :value="true" label="已收款">已收款</el-option>
                        <el-option :value="false" label="未收款">未收款</el-option>
                    </el-select>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="3" :span="6" style="margin-right: 5px; margin-left: -55px;">
                    <el-select v-if="personalRealAmount" v-model="listQuery.personalRealAmount" @change="searchList" placeholder="实收款状态" clearable>
                        <el-option :value="true" label="已收款">已收款</el-option>
                        <el-option :value="false" label="未收款">未收款</el-option>
                    </el-select>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="3" :span="6" style="margin-right: 5px; margin-left: -15px;">
                    <el-select v-if="productions" v-model="listQuery.productions" @change="searchList" placeholder="已出产品" clearable>
                        <el-option value="价值意见书" label="价值意见书">价值意见书</el-option>
                        <el-option value="技术报告" label="技术报告">技术报告</el-option>
                        <el-option value="结果报告" label="结果报告">结果报告</el-option>
                        <el-option value="复评函" label="复评函">复评函</el-option>
                    </el-select>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8" :span="6">
                    <el-button class="filter-item" type="success" @click="searchList" v-loading.fullscreen.lock="loading"
                        round>搜索
                    </el-button>
                    <el-button class="filter-item" round type="info" @click="resetSearch()">重置
                    </el-button>
                    <el-button class="filter-item" @click="moreSearch()" round>更多搜索<i :class="moreSearchIcon"></i>
                    </el-button>
                    <slot name="otherButton"></slot>
                </el-col>
            </el-row>
            <div v-if="business === 'MAJOR_BUSINESS'" v-show="moreSearchBar" class="moreSearchStyle">
                <el-row class="row">
                    <el-col :xs="24" :sm="12" :lg="3" :span="6">
                        <el-select v-if="financial" clearable v-model="listQuery.financial" placeholder="金融类型">
                            <el-option :value="true" label="金融">金融</el-option>
                            <el-option :value="false" label="非金融">非金融</el-option>
                        </el-select>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6" style="margin-right: 8px;">
                        <el-input v-if="orderId" v-model="listQuery.orderId" placeholder="订单号" clearable>
                        </el-input>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6" style="margin-right: 8px;">
                        <el-input v-if="productionNo" v-model="listQuery.productionNo" placeholder="产品号" clearable>
                        </el-input>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6" style="margin-right: 8px;">
                        <el-input v-if="clientName" v-model="listQuery.clienteleName" placeholder="客户名称" clearable>
                        </el-input>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6" style="margin-right: 8px;">
                        <el-input v-if="clientSubName" v-model="listQuery.clienteleSubName" placeholder="业务来源" clearable>
                        </el-input>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6">
                        <el-select v-if="clientManager" clearable filterable v-model="listQuery.clientManagerId"
                            placeholder="客户经理">
                            <el-option v-for="(item, id) in clientManagers" :key="id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6">
                        <el-select v-if="principal" v-model="listQuery.principalId" placeholder="负责人" clearable filterable
                            class="filter-item">
                            <el-option v-for="(item, id) in principals" :key="id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6">
                        <el-select v-if="businessObjectType" clearable v-model="listQuery.businessObjectType"
                            placeholder="评估对象类型">
                            <el-option value="土地" label="土地">土地</el-option>
                            <el-option value="房地产" label="房地产">房地产</el-option>
                        </el-select>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6">
                        <el-select v-if="department" clearable v-model="listQuery.departmentId" placeholder="接单部门">
                            <el-option v-for="(d, id) in trunDep" :key="id" :label="d.name" :value="d.id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6">
                        <el-select v-if="productionType" clearable v-model="listQuery.production" placeholder="产品类型" @change="searchList">
                            <el-option value="STATEMENT" label="意见书">意见书</el-option>
                            <el-option value="REPORT" label="报告">报告</el-option>
                            <el-option value="LETTER" label="复评函">复评函</el-option>
                            <el-option value="ORDER" label="订单">订单</el-option>
                        </el-select>
                    </el-col>

                </el-row>
            </div>
            <div v-if="business === 'PERSONAL_BUSINESS'" v-show="moreSearchBar" class="moreSearchStyle">
                <el-row class="row">
                    <el-col :xs="24" :sm="12" :lg="3" :span="6" style="margin-right: 8px;">
                        <el-input v-if="clientName" v-model="listQuery.clientName" placeholder="客户名称" clearable>
                        </el-input>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6" style="margin-right: 8px;">
                        <el-input v-if="clientSubName" v-model="listQuery.clientSubName" placeholder="业务来源" clearable>
                        </el-input>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6" style="margin-right: 8px;">
                        <el-input v-if="clientManager" v-model="listQuery.clientManager" placeholder="客户经理" clearable>
                        </el-input>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6" style="margin-right: 8px;">
                        <el-input v-if="outwardStaffName" v-model="listQuery.outwardStaffName" placeholder="外业人员" clearable>
                        </el-input>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6" style="margin-right: 8px;">
                        <el-input v-if="inwardStaffName" v-model="listQuery.inwardStaffName" placeholder="内业人员" clearable>
                        </el-input>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6" style="margin-right: 8px;">
                        <el-input v-if="pricingStaffName" v-model="listQuery.pricingStaffName" placeholder="定价内业" clearable>
                        </el-input>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="3" :span="6" style="margin-right: 8px;">
                        <el-input v-if="handlerName" v-model="listQuery.handlerName" placeholder="处理人" clearable>
                        </el-input>
                    </el-col>
                </el-row>
            </div>
        </div>

    </div>
</template>

<script>

export default {
    name: "moreSerachBar",
    components: {

    },
    props: {
        listQuery: {
            type: Object,
            require: false
        },
        keyword: {
            type: Boolean,
            require: false,
            default: true
        },
        business: {
            type: String,
            require: false,
        },
        financial: {
            type: Boolean,
            require: false,
            default: true
        },
        nodeCode: {
            type: Boolean,
            require: false,
            default: true
        },
        clientName: {
            type: Boolean,
            require: false,
            default: true
        },
        orderId: {
            type: Boolean,
            require: false,
            default: false
        },
        productionNo: {
            type: Boolean,
            require: false,
            default: false
        },
        clientManager: {
            type: Boolean,
            require: false,
            default: true
        },
        principal: {
            type: Boolean,
            require: false,
            default: true
        },
        department: {
            type: Boolean,
            require: false,
            default: true
        },
        orderDateSearch: {
            type: Boolean,
            require: false,
            default: true
        },
        delivery: {
            type: Boolean,
            require: false,
            default: false
        },
        hasRealAmount: {
            type: Boolean,
            require: false,
            default: false
        },
        hasShouldAmount: {
            type: Boolean,
            require: false,
            default: false
        },
        businessObjectType: {
            type: Boolean,
            require: false,
            default: true
        },
        nodes: {
            type: Array,
            require: false,
            default: function () {
                return [];
            }
        },
        clientName: {
            type: Boolean,
            require: false,
            default: true
        },
        clientSubName: {
            type: Boolean,
            require: false,
            default: true
        },
        clientManager: {
            type: Boolean,
            require: false,
            default: true
        },
        outwardStaffName: {
            type: Boolean,
            require: false,
            default: true
        },
        inwardStaffName: {
            type: Boolean,
            require: false,
            default: true
        },
        pricingStaffName: {
            type: Boolean,
            require: false,
            default: true
        },
        handlerName: {
            type: Boolean,
            require: false,
            default: true
        },
        productionType: {
            type: Boolean,
            require: false,
            default: false
        },
        personalRealAmount: {
            type: Boolean,
            require: false,
            default: false
        },
        productions: {
            type: Boolean,
            require: false,
            default: false
        },
    },


    computed: {

    },
    created() {
        if (this.business === 'MAJOR_BUSINESS') {
            this.getMajorTurnDepartment();
            this.getAllotDepartmentUser();
            this.getClientManager();
        }

    },
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            moreSearchBar: false,
            moreSearchIcon: "el-icon-arrow-right",
            orderDate: '',
            trunDep: [],
            allotDepartment: [],
            clientManagers: [],
            principals: [],
            loading: false
        }

    },
    methods: {
        resetSearch() {
            // 重置分页
            this.loading = true;
            this.orderDate = '';
            this.$emit('resetParams');
            setTimeout(() => {
                this.loading = false;
            }, 500);
        },

        searchList() {
            // 重置分页
            this.loading = true;
            this.listQuery.page = 1
            this.listQuery.size = 20
            if (this.orderDate) {
                this.listQuery.startDate = this.orderDate[0] + ' 00:00:00';
                this.listQuery.endDate = this.orderDate[1] + ' 23:59:59';
            }
            this.$emit('fliterSearch', this.listQuery);
            setTimeout(() => {
                this.loading = false;
            }, 500);
        },

        moreSearch() {
            this.moreSearchBar = !this.moreSearchBar;
            if (this.moreSearchBar) {
                this.moreSearchIcon = "el-icon-arrow-down";
            } else {
                this.moreSearchIcon = "el-icon-arrow-right";
            }
        },

        getMajorTurnDepartment() {
            this.$api.department.trunDep("MAJOR_BUSINESS").then(res => {
                if (res.code === 200) {
                    this.trunDep = res.data;
                }
            })
        },
        getAllotDepartment() {
            this.$api.department.allot(this.business).then(res => {
                if (res.code === 200) {
                    this.allotDepartment = res.data;
                }
            })
        },
        getClientManager() {
            const post = "客户经理"
            this.$api.user.postUser(post).then(res => {
                if (res.code === 200) {
                    this.clientManagers = res.data;
                }
            })
        },
        getAllotDepartmentUser() {
            const businessType = "MAJOR_BUSINESS"
            this.$api.user.allotDepartmentUser(businessType).then(res => {
                if (res.code === 200 && res.data != null) {
                    this.principals = res.data;
                }
            })
        }
    }
}
</script>
<style scoped lang="css">
.row {
    margin-top: 10px;
}

.bar-container {
    width: 1650px;
}

.moreSearchStyle {
    animation: scale-in-ver-top .2s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes scale-in-ver-top {
    0% {
        transform: scaleY(0);
        transform-origin: 100% 0;
        opacity: 1
    }

    100% {
        transform: scaleY(1);
        transform-origin: 100% 0;
        opacity: 1
    }
}
</style>