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

<template>
    <div>
        <div class="bar-container">
            <el-row>
                <el-col :xs="24" :sm="12" :lg="4" :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.nodeCode" placeholder="流程节点" clearable filterable class="filter-item" >
                     <el-option v-for="(item, index) in nodes" :key="index" :label="item.name" :value="item.code" />
                    </el-select>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                        <el-date-picker 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="9" :span="6">
                    <el-button class="filter-item"  type="success" @click="searchList" 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-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:true
        },
        keyword:{
            type: Boolean,
            require:false,
            default:true
        },
        business:{
            type: String,
            require:true,
        },
        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
        },
        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
        },
    },

    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:[],
        }

    },
    methods: {
        resetSearch() {
            this.orderDate = '';
            this.$emit('resetParams');
        },

        searchList() {
            // 重置分页
            this.listQuery.page = 1
            this.listQuery.size = 10
            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);
        },

        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>