crm-app-vue3/pages/wareHouse/components/searchFilter.vue

<template>
    <u-popup mode="bottom" :round="10" :show="show" @close="close" @open="open" closeable>
        <u--form labelPosition="left" :model="formData" ref="uForm">
            <u-form-item label="品牌" @click="showBrandList" labelWidth="70">
                <FormSelectToPage :val="formData.dictLabel" :isDelete="true" borderType="bottom" @handleClear="clear('dictLabel')"></FormSelectToPage>
                <BrandList ref="brandListRef" @selectedBrand="handleSelectedBrand"></BrandList>
            </u-form-item>
            <u-form-item label="价格范围" labelWidth="70">
                <u-input v-model="formData.minPrice" placeholder="最小价格" fontSize="14" border="bottom" clearable></u-input>
                &nbsp;&nbsp;——&nbsp;&nbsp;
                <u-input v-model="formData.maxPrice" placeholder="最大价格" fontSize="14" border="bottom" clearable></u-input>
            </u-form-item>
            <u-form-item label="位置" labelWidth="70">
                <u-input v-model="formData.location" fontSize="14" clearable border="bottom"></u-input>
            </u-form-item>
            <u-form-item label="回收时间" labelWidth="70" @click="recycleTimeShow = true">
                <FormSelectToPage :val="formData.recycleTime" :isDelete="true" borderType="bottom" @handleClear="clear('recycleTime')">  </FormSelectToPage>
                <u-datetime-picker  :show="recycleTimeShow" v-model="recycleTimeDefault" mode="date"  @confirm="confirmRecycleTime" @close="recycleTimeShow = false"
                            @cancel="recycleTimeShow = false"></u-datetime-picker>
            </u-form-item>
            <u-form-item label="回收人员" labelWidth="70" @click="recyclePersonClick">
                <FormSelectToPage :val="formData.recyclePerson" :isDelete="true" borderType="bottom" @handleClear="clear('recyclePerson')"></FormSelectToPage>
                <PersonPicker ref="recyclePersonPickerRef" title="请选择回收人员" @selectPerson="handleSelectRecyclePerson"></PersonPicker>
            </u-form-item>
            <u-form-item label="鉴定人员" labelWidth="70" @click="identifyingPersonClick">
                <FormSelectToPage :val="formData.identifyingPerson" :isDelete="true" borderType="bottom" @handleClear="clear('identifyingPerson')"></FormSelectToPage>
                <PersonPicker ref="identifyingPersonPickerRef" title="请选择鉴定人员" @selectPerson="handleSelectIdentifyingPerson"></PersonPicker>
            </u-form-item>
            <u-form-item label="商品属性" labelWidth="70">
                <TabSelect :tabList="productAttributeList" :colNum="3" :echoInfo="formData.productAttribute" mode="multiple" @tabChange="handleTabChangeProductAttribute"></TabSelect>
            </u-form-item>
        </u--form>
        <view class="btns">
            <u-button text="重置" @click="resetForm"></u-button>
            <u-button type="primary" text="确定" @click="handleSearch"></u-button>
        </view>
    </u-popup>
</template>

<script>
import FormSelectToPage from '@/components/form-select-to-page/index.vue'
import BrandList from '@/components/brand-list/index.vue'
import PersonPicker from '@/components/person-picker/index.vue'
import TabSelect from '@/components/custom-tab-select/index.vue'
export default {
    components: {
        FormSelectToPage,
        BrandList,
        PersonPicker,
        TabSelect,
    },
    name: 'searchFilter',
    emits: ['confirm'],
    data() {
        return {
            show: false,
            formData: {
                dictLabel: '',
                dictValue: '',
                minPrice: '',
                maxPrice: '',
                location: '',
                recycleTime: '',
                recyclePerson:'',
                recyclePersonId: '',
                identifyingPerson:'',
                identifyingPersonId: '',
                productAttribute: '',
            },
            recycleTimeDefault: new Date().getTime(),
            recycleTimeShow: false,
            recyclePersonList: [],
            productAttributeList: [
                {
                    name: '自有商品',
                    value: '1',
                },
                {
                    name: '寄卖商品',
                    value: '2',
                },
                {
                    name: '质押商品',
                    value: '3',
                },
                {
                    name: '其它',
                    value: '4',
                },
            ],
        }
    },
    props: {
    },
    emits: [],
    methods: {
        handleSearch() {
            this.$emit('confirm', this.formData);
            this.close();
        },
        resetForm() {
            this.formData = {
                dictLabel: '',
                dictValue: '',
                minPrice: '',
                maxPrice: '',
                location: '',
                recycleTime: '',
                recyclePerson:'',
                recyclePersonId: '',
                identifyingPerson:'',
                identifyingPersonId: '',
                productAttribute: '',
            };
            this.recycleTimeDefault = new Date().getTime();
        },
        open() {
            this.show = true
            
        },
        close() {
            this.show = false
        },
        showBrandList() {
            this.$refs.brandListRef.showBrandList();
        },
        handleSelectedBrand(info) {
            this.formData.dictLabel = info.dictLabel;
            this.formData.dictValue = info.dictValue;
        },
        // 处理清空事件
        clear(field) {
            // 品牌
            if(field == 'dictLabel'){
                this.formData.dictLabel = '';
                this.formData.dictValue = '';
                return;
            }
            // 回收人
            if(field == 'recyclePerson'){
                this.formData.recyclePerson = '';
                this.formData.recyclePersonId = '';
                return;
            }
            // 鉴定人
            if(field == 'identifyingPerson'){
                this.formData.identifyingPerson = '';
                this.formData.identifyingPersonId = '';
                return;
            }
            this.formData[field] = '';
        },
        confirmRecycleTime(val) {
            this.$nextTick(()=>{
                this.formData.recycleTime = this.$dayjs(val.value).format('YYYY-MM-DD');
            })
            this.recycleTimeShow = false;
        },
        recyclePersonClick() {
            this.$refs.recyclePersonPickerRef.open();
        },
        handleSelectRecyclePerson(info) {
            this.formData.recyclePerson = info.label;
            this.formData.recyclePersonId = info.id;
        },
        identifyingPersonClick() {
            this.$refs.identifyingPersonPickerRef.open();
        },
        handleSelectIdentifyingPerson(info) {
            this.formData.identifyingPerson = info.label;
            this.formData.identifyingPersonId = info.id;
        },
        handleTabChangeProductAttribute(e) {
            this.formData.productAttribute = e;
        },
    }
}
</script>

<style lang="scss" scoped>
    @import "../styles/searchFilter.scss";
</style>