<template> <view class="salesSearch-wrap"> <u-popup v-model="isShow" class="search-popup" mode="right" @close="isShow=false" length="85%"> <u-form class="form-content" :model="form" ref="uForm" label-width="150"> <u-form-item label="创建时间" prop="date" class="form-item"> <u-input clearable v-model="form.date" type="select" placeholder="请选择创建时间区间" @click="showDate=true" @clear="clearTime" /> </u-form-item> <u-form-item label="客户名称" prop="buyerNameCurrent" class="form-item"> <u-input v-model="form.buyerNameCurrent" :maxlength="30" placeholder="请输入客户名称" /> </u-form-item> <u-form-item label="销售单号" prop="salesBillNo" class="form-item"> <u-input v-model="form.salesBillNo" :maxlength="30" placeholder="请输入销售单号" /> </u-form-item> <u-form-item label="采购单号" prop="purchaseBillNo" class="form-item"> <u-input v-model="form.purchaseBillNo" :maxlength="30" placeholder="请输入采购单号" /> </u-form-item> <u-form-item label="收款方式" prop="settleStyleSn" class="form-item" v-if="defaultParams&&defaultParams.payOnlineFlag==0"> <u-input clearable v-model="settleStyleName" @click="settleStyleModal=true" @clear="clearSettleStyle" type="select" placeholder="请选择收款方式"/> </u-form-item> <u-form-item label="单据来源" prop="settleStyleSn" class="form-item" v-if="defaultParams&&defaultParams.payOnlineFlag==0"> <u-input clearable v-model="sourceTypeName" @click="sourceTypeModal=true" placeholder="请选择单据来源" type="select" @clear="clearSourceType" /> </u-form-item> <!-- <u-form-item label="是否铺货" prop="settleStyleSn" class="form-item"> <v-select placeholder="请选择是否铺货" clearable @itemChange="e=>form.distributionFlag==e" @clear="form.distributionFlag==''" code="FLAG" style="width: 100%"></v-select> </u-form-item> <u-form-item label="客户关系" prop="settleStyleSn" class="form-item"> <v-select placeholder="请选择客户关系" clearable @itemChange="e=>form.buyerRelationType==e" @clear="form.buyerRelationType==''" code="CUSTOMER_RELATION_TYPE" style="width: 100%"></v-select> </u-form-item> --> </u-form> <view class="uni-list-btns"> <u-button class="handle-btn" size="medium" shape="circle" hover-class="none" @click="resetForm">重置</u-button> <u-button class="handle-btn search-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button> </view> </u-popup> <!-- 选择日期范围 --> <u-calendar v-model="showDate" @change="dateChange" mode="range"></u-calendar> <!-- 选择收款方式 --> <u-picker v-model="settleStyleModal" @confirm="settleStyleChange" :range="settleStyleList" range-key="dispName" mode="selector"></u-picker> <!-- 选择单据来源 --> <u-picker v-model="sourceTypeModal" @confirm="sourceTypeChange" :range="sourceTypeList" range-key="dispName" mode="selector"></u-picker> </view> </template> <script> import { settleStyleQueryAll } from '@/api/sales' import vSelect from '@/components/select/v-select' export default{ components:{ vSelect }, props: { openModal: { // 弹框显示状态 type: Boolean, default: false }, defaultParams: { // 默认查询条件 type: Object, default: () => { return {} } } }, data(){ return{ isShow: this.openModal, form: { date: '', beginDate: '', endDate: '', buyerNameCurrent: '', // 客户名称 salesBillNo: '', // 销售单号 purchaseBillNo: '', // 采购单号 settleStyleSn: undefined ,// 收款方式 distributionFlag: undefined, // 是否铺货 buyerRelationType: undefined, // 客户关系 }, customBtnStyle: { // 自定义按钮样式 borderColor: this.$config('primaryColor'), backgroundColor: this.$config('primaryColor'), color: '#fff' }, showDate: false, // 是否显示时间弹窗 settleStyleName: '', settleStyleModal: false, settleStyleList: [], sourceTypeName: '', sourceTypeModal: false, sourceTypeList: [] } }, mounted() { // this.init() }, methods: { closeBox(){ this.settleStyleModal = false this.sourceTypeModal = false }, // 初始化数据 init(){ if(this.defaultParams.beginDate && this.defaultParams.endDate){ this.form.date = this.defaultParams.beginDate + ' ~ ' + this.defaultParams.endDate }else{ this.form.date = '' } this.beginDate = this.defaultParams.beginDate ? this.defaultParams.beginDate : '' this.endDate = this.defaultParams.endDate ? this.defaultParams.endDate : '' this.form.buyerNameCurrent = this.defaultParams.buyerNameCurrent ? this.defaultParams.buyerNameCurrent : '' this.form.salesBillNo = this.defaultParams.salesBillNo ? this.defaultParams.salesBillNo : '' this.form.purchaseBillNo = this.defaultParams.purchaseBillNo ? this.defaultParams.purchaseBillNo : '' this.form.settleStyleSn = this.defaultParams.settleStyleSn ? this.defaultParams.settleStyleSn : '' this.form.sourceType = this.defaultParams.sourceType ? this.defaultParams.sourceType : '' this.form.distributionFlag= this.defaultParams.distributionFlag ? this.defaultParams.distributionFlag : undefined // 是否铺货 this.form.buyerRelationType= this.defaultParams.buyerRelationType ? this.defaultParams.buyerRelationType : undefined // 客户关系 }, // 查询 handleSearch() { let params = JSON.parse(JSON.stringify(this.form)) console.log(params) if(!params.settleStyleSn){ params.settleStyleSn = '' } if(!params.sourceType){ params.sourceType = '' } delete params.date this.$emit('refresh', params) this.isShow = false }, // 重置 resetForm() { this.settleStyleName = '' this.sourceTypeName = '' this.form.beginDate = '' this.form.endDate = '' this.$refs.uForm.resetFields() this.form.distributionFlag= undefined // 是否铺货 this.form.buyerRelationType= undefined // 客户关系 this.clearSettleStyle() this.clearSourceType() this.$emit('refresh', null) this.isShow = false this.clearTime() }, // 清空收款方式 clearSettleStyle(){ this.settleStyleName = '' this.form.settleStyleSn = undefined }, // 收款方式 change settleStyleChange(ind){ this.form.settleStyleSn = this.settleStyleList[ind].code || undefined this.settleStyleName = this.settleStyleList[ind].dispName || '' }, // 清空单据来源 clearSourceType(){ this.sourceTypeName = '' this.form.sourceType = undefined }, // 单据来源 change sourceTypeChange(ind){ this.form.sourceType = this.sourceTypeList[ind].code || undefined this.sourceTypeName = this.sourceTypeList[ind].dispName || '' }, // 收款方式单据来源// 有值时,匹配对应name getTypeList () { console.log(this.defaultParams) // 收款方式 this.settleStyleList = this.$store.state.vuex_paymentTypeList if(this.defaultParams.settleStyleSn || this.defaultParams.settleStyleSn==0){ const s = this.settleStyleList.find(item => item.code == this.defaultParams.settleStyleSn) this.settleStyleName = s ? s.dispName : '' } // 单据来源 this.sourceTypeList = this.$store.state.vuex_salesSourceList if(this.defaultParams.sourceType){ const b = this.sourceTypeList.find(item => item.code == this.defaultParams.sourceType) this.sourceTypeName = b ? b.dispName : '' } }, // 时间 change dateChange(date){ this.form.date = date.startDate + ' ~ ' + date.endDate this.form.beginDate = date.startDate this.form.endDate = date.endDate }, // 清空创建时间 clearTime(){ this.form.date = '' this.form.beginDate = '' this.form.endDate = '' } }, watch: { // 父页面传过来的弹框状态 openModal (newValue, oldValue) { this.isShow = newValue }, // 重定义的弹框状态 isShow (newValue, oldValue) { if (!newValue) { this.$emit('close') }else{ this.init() this.getTypeList() } } } } </script> <style lang="scss"> .salesSearch-wrap{ .search-popup { .form-content { display: block; padding: 0 20upx; box-sizing: content-box; .form-item-inp{ display: inline-block; width: 88%; vertical-align: top; } } .uni-list-btns { display: flex; padding: 20upx; margin-top: 200upx; .handle-btn { font-size: 28upx; margin: 0 30upx; width: 100%; flex: 1; } } } } </style>