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">
                <Cell :val="formData.dictLabel" :isDelete="true" :border="true" @handleClear="clear('dictLabel')"></Cell>
                <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="openTimePicker">
                <Cell :val="time" :isDelete="true" :border="true" @handleClear="clear('time')">  </Cell>
                <JTimePicker :isShowShortTimeList="true" shortTimeTitle="快捷时间" :shortTimeList="shortTimeList"
                    :isShowSeletTimeTitle="true" seletTimeTitle="时间选择" cancelText="取消" confirmText="确认"
                    :endSelectMonth="-1" :endSelectDay="-1" beginTimePlaceHolder='开始时间' endTimePlaceHolder="结束时间"
                    :isDateTypeRange="true" :isShowSelectedTimeEcho="true" @confirm="getSelectTime" :defaultSelect="0"
                    ref="jtimePickerPopupRef">
                </JTimePicker>
            </u-form-item>
            <u-form-item label="回收人员" labelWidth="70" @click="recyclePersonClick">
                <Cell :val="formData.recyclePerson" :isDelete="true" :border="true" @handleClear="clear('recyclePerson')"></Cell>
                <PersonPicker ref="recyclePersonPickerRef" title="请选择回收人员" @selectPerson="handleSelectRecyclePerson"></PersonPicker>
            </u-form-item>
            <u-form-item label="鉴定人员" labelWidth="70" @click="identifyingPersonClick">
                <Cell :val="formData.identifyingPerson" :isDelete="true" :border="true" @handleClear="clear('identifyingPerson')"></Cell>
                <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-item label="是否入库" labelWidth="70">
                <TabSelect :tabList="stockStatusListAll" :colNum="4" :echoInfo="formData.stockStatus" mode="single" @tabChange="handleTabChangeStockStatus"></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 Cell from '@/components/custom-cell/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'
import JTimePicker from '@/uni_modules/jtime-picker-popup/components/JTimePicker/JTimePicker.vue'
import { productAttributeList, stockStatusListAll,shortTimeList } from '../js/public.js'
export default {
    components: {
        Cell,
        BrandList,
        PersonPicker,
        TabSelect,
        JTimePicker,
    },
    name: 'searchFilter',
    emits: ['confirm'],
    data() {
        return {
            show: false,
            formData: {
                dictLabel: '',
                dictValue: '',
                minPrice: '',
                maxPrice: '',
                location: '',
                startTime: '',
                endTime: '',
                recyclePerson:'',
                recyclePersonId: '',
                identifyingPerson:'',
                identifyingPersonId: '',
                productAttribute: [],
                stockStatus: '',
            },
            time:'',
            shortTimeList: shortTimeList,
            recyclePersonList: [],
            // 将导入的变量在data中重新定义，确保模板能够访问
            productAttributeList: productAttributeList,
            stockStatusListAll: stockStatusListAll,
           
        }
    },
    props: {
    },
    emits: [],
    methods: {
        handleSearch() {
            this.$emit('confirm', this.formData);
            this.close();
        },
        resetForm() {
            this.formData = {
                dictLabel: '',
                dictValue: '',
                minPrice: '',
                maxPrice: '',
                location: '',
                startTime: '',
                endTime: '',
                recyclePerson:'',
                recyclePersonId: '',
                identifyingPerson:'',
                identifyingPersonId: '',
                productAttribute: [],
                stockStatus: '',
            };
        },
        open() {
            this.show = true
            setTimeout(() => {
                this.$refs.jtimePickerPopupRef.handleInit();
            }, 300)
        },
        openTimePicker() {
            this.$nextTick(()=>{
                this.$refs.jtimePickerPopupRef.pickerShow();
            })
        },
        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;
            }
            // 回收时间
            if(field == 'time'){
                this.time = '';
                this.formData.startTime = '';
                this.formData.endTime = '';
                return;
            }
            this.formData[field] = '';
        },
        getSelectTime(val) {
            this.formData.startTime = this.$dayjs(val.beginTime).format('YYYY-MM-DD');
            this.formData.endTime = this.$dayjs(val.endTime).format('YYYY-MM-DD');
            this.time = this.$dayjs(val.beginTime).format('YYYY-MM-DD') + ' 至 ' + this.$dayjs(val.endTime).format('YYYY-MM-DD');
        },
        
        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;
        },
        handleTabChangeStockStatus(e) {
            this.formData.stockStatus = e;
        },
    }
}
</script>

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