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-item label="排序方式" labelWidth="70" @click="openSortPicker">
				<Cell :val="curSortType.label" :isDelete="false" :border="true"></Cell>
                <u-picker ref="sortPicker" :show="sortPickerShow" :columns="sortColumns" keyName="label" @confirm="handleSortChange"
                    @cancel="sortPickerShow = false"></u-picker>
			</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,
			curSortType: {
				id: 4,
				label: '按入库最新',
			},
			sortPickerShow: false,
			sortColumns: [[
				{
					label: '按最久未下载',
					id: 1
				},
				{
					label: '按最近更新',
					id: 2
				},
				{
					label: '按最久更新',
					id: 3
				},
				{
					label: '按入库最新',
					id: 4
				},
				{
					label: '按入库最久',
					id: 5
				},
				{
					label: '按价格最高',
					id: 6
				},
				{
					label: '按价格最低',
					id: 7
				},
			]],
           
        }
    },
    props: {
    },
    emits: [],
    methods: {
        handleSearch() {
			const filters = { ...this.formData, sortType: this.curSortType.id };
			const text = this.generateSelectText(filters);
            this.$emit('confirm', { filters, text });
            this.close();
        },
        resetForm() {
            this.formData = {
                dictLabel: '',
                dictValue: '',
                minPrice: '',
                maxPrice: '',
                location: '',
                startTime: '',
                endTime: '',
                recyclePerson:'',
                recyclePersonId: '',
                identifyingPerson:'',
                identifyingPersonId: '',
                productAttribute: [],
                stockStatus: '',
            };
			this.time = '';
			this.$emit('confirm', { filters: this.formData, text: '' });
        },
        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;
        },
		openSortPicker() {
			this.sortPickerShow = true;
			const selectedIndex = this.sortColumns[0].findIndex(item => item.id === this.curSortType.id);
			this.$nextTick(() => {
				this.$refs.sortPicker.setIndexs(selectedIndex > -1 ? [selectedIndex] : [0]);
			});
		},
		handleSortChange(e) {
			this.curSortType = e.value[0];
			this.sortPickerShow = false;
		},
		generateSelectText(filters) {
			let parts = [];
			if (filters.dictLabel) parts.push(`品牌: ${filters.dictLabel}`);
			if (filters.minPrice || filters.maxPrice) parts.push(`实价范围: ${filters.minPrice || '不限'} - ${filters.maxPrice || '不限'}`);
			if (filters.location) parts.push(`位置: ${filters.location}`);
			if (filters.startTime || filters.endTime) parts.push(`回收时间: ${filters.startTime || ''} 至 ${filters.endTime || ''}`);
			if (filters.recyclePerson) parts.push(`回收人员: ${filters.recyclePerson}`);
			if (filters.identifyingPerson) parts.push(`鉴定人员: ${filters.identifyingPerson}`);
			if (filters.productAttribute && filters.productAttribute.length > 0) {
				const attrNames = filters.productAttribute.map(val => {
					const item = this.productAttributeList.find(i => i.value === val);
					return item ? item.name : '';
				}).filter(Boolean).join(', ');
				if (attrNames) parts.push(`商品属性: ${attrNames}`);
			}
			if (filters.stockStatus) {
				const status = this.stockStatusListAll.find(i => i.value === filters.stockStatus);
				if (status) parts.push(`是否入库: ${status.name}`);
			}
			return parts.join(' | ');
		},
    }
}
</script>

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