Vue+ElementUI+SpringBOOT实现多条件复杂查询

最新推荐文章于 2024-09-12 12:37:49 发布
最新推荐文章于 2024-09-12 12:37:49 发布
阅读量3.6k 收藏 22
点赞数 5
分类专栏： # Vue+ElementUI # SpringBoot 文章标签： vue.js elementui spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lovoo/article/details/129661319
版权
文章描述了一个Vue.js实现的销售订单管理页面，该页面包括一个详细的搜索栏，支持多种查询条件如销售日期、支付类型等。页面分为两部分：主表单显示主单信息，包括销售类型、营业员等关键数据；子表单则展示销售明细，如产品名称、数量、价格等详细信息。页面还实现了即时搜索功能，当输入框变化时立即触发查询操作，提供了一种高效的数据筛选和展示方案。
摘要由CSDN通过智能技术生成

开发原因：

在开发销售订单时，一个页面要显示主单，在点击主单一行时，显示对应的明细信息。搜索时，还要根据销售时间段、支付类型、营业员、销售类型、是否挂单、价格、销售数量等进行主单查询，同时还要根据销售明细的产品名称、产品编号、助记码等进行查询，如何将这些复杂的需求在同一页面展示出来，就需要进行合理的设计，下面我来一一讲述

页面展示效果图：

在这里插入图片描述

1、构件搜索栏

为每一项绑定getDataList()事件，用于在设置了搜索条件时立即触动搜索功能

<el-form :inline="true" :model="dataForm" ref="dataFormRef" @keyup.enter.native="getDataList()">
      <el-form-item>
        销售日期：
        <el-date-picker v-model="dataForm.queryDates" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" size="mini" @blur="getDataList()" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        支付类型：
        <el-select size="mini" v-model="dataForm.payType" clearable placeholder="请选择" @change="getDataList()"
          @clear="getDataList()">
          <el-option value="1" label="现金"></el-option>
          <el-option value="2" label="支付宝"></el-option>
          <el-option value="3" label="微信"></el-option>
          <el-option value="4" label="社保卡"></el-option>
          <el-option value="5" label="银联"></el-option>
          <el-option value="6" label="其它"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        营业员：
        <el-select size="mini" @focus="getUsers()" @change='getDataList()' v-model="dataForm.saleUser" clearable placeholder="请选择"
          @clear="getDataList()">
          <el-option v-for="item in users" :key="item.userId" :label="item.username" :value="item.username">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        选择过滤：
        <el-select size="mini" v-model="dataForm.selectField" clearable placeholder="请选择" @change="getDataList(1)"
          @clear="getDataList(1)">
          <el-option v-for="item in selectFields" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select size="mini" v-model="dataForm.selectValue" clearable placeholder="请选择" @change="getDataList(1)"
          @clear="getDataList(1)">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        数量/价格/金额：
        <el-select size="mini" v-model="dataForm.priceField" clearable placeholder="请选择" @change="getDataList(1)"
          @clear="getDataList(1)">
          <el-option v-for="item in priceFields" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select size="mini" v-model="dataForm.priceFormula" clearable placeholder="请选择" @change="getDataList(1)"
          @clear="getDataList(1)">
          <el-option v-for="item in priceFormulas" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input size="mini" v-model="dataForm.priceValue" clearable type="number" placeholder="库存/价格/毛利"
          @blur="getDataList(1)" @clear="getDataList(1)"></el-input>
      </el-form-item>
      <el-form-item>
        主单条件查询：
        <el-select size="mini" v-model="dataForm.queryField" clearable placeholder="请选择" @change="getDataList()"
          @clear="getDataList()">
          <el-option v-for="item in queryFields" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input size="mini" v-model="dataForm.key" placeholder="参数名" clearable @blur="getDataList()"
          @clear="getDataList()"></el-input>
      </el-form-item>

      <el-form-item>
        明细条件查询：
        <el-select size="mini" v-model="dataForm.queryItemField" clearable placeholder="请选择" @change="getDataList()"
          @clear="getDataList()">
          <el-option v-for="item in queryItemFields" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input size="mini" v-model="dataForm.itemKey" placeholder="参数名" clearable @blur="getDataList()"
          @clear="getDataList()"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button size="mini" type="success" @click="getDataList()" icon="el-icon-search">查询</el-button>
        <el-button @click="resetForm" size="mini" type="warning" icon="el-icon-refresh-left">重置</el-button>
      </el-form-item>
    </el-form>

2、主表单内容

 <el-table :data="dataList" size="mini" v-loading="dataListLoading" @selection-change="selectionChangeHandle"
      style="width: 100%;" @cell-click="tableDbEdit" @cell-dblclick="tableDbEdit"
      :header-cell-style="{ background: '#fcfcfc', color: '#606266', height:'36px'}" height="320">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="saleNo" header-align="center" align="center" label="销售编号" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="saleType" header-align="center" align="center" label="销售类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.saleType==0" type="danger">退货</el-tag>
          <el-tag v-else type="success">销售</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="saleDate" header-align="center" align="center" label="销售日期" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="backDate" header-align="center" align="center" label="退货日期" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="memberName" header-align="center" align="center" label="会员名称">
      </el-table-column>
      <el-table-column prop="memberNo" header-align="center" align="center" label="会员编号" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="isPending" header-align="center" align="center" label="是否挂单">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isPending==1" type="warning">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="pendingRemark" header-align="center" align="center" label="挂单备注" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="totalSaleNum" header-align="center" align="center" label="共购买">
      </el-table-column>
      <el-table-column prop="totalPrediscountFee" header-align="center" align="center" label="折前总额">
      </el-table-column>
      <el-table-column prop="totalMemberFee" header-align="center" align="center" label="会员总额">
      </el-table-column>
      <el-table-column prop="totalDiscountFee" header-align="center" align="center" label="折后总额">
      </el-table-column>
      <el-table-column prop="fundPaySumamt" header-align="center" align="center" label="医保基金">
      </el-table-column>
      <el-table-column prop="toalOtherFee" header-align="center" align="center" label="其它费用">
      </el-table-column>
      <el-table-column prop="paymentFee" header-align="center" align="center" label="实付金额">
      </el-table-column>
      <el-table-column prop="receiveFee" header-align="center" align="center" label="实收金额">
      </el-table-column>
      <el-table-column prop="giveChangeFee" header-align="center" align="center" label="找零金额">
      </el-table-column>
      <el-table-column prop="totalReduceFee" header-align="center" align="center" label="共优惠(元)" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="totalGiveNum" header-align="center" align="center" label="共赠送数量" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="isPayed" header-align="center" align="center" label="是否支付">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isPayed==1" type="success">是</el-tag>
          <el-tag v-else type="warning">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="payType" header-align="center" align="center" label="支付类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isPayed==1" type="success">现金</el-tag>
          <el-tag v-else-if="scope.row.isPayed==2" type="primary">支付宝</el-tag>
          <el-tag v-else-if="scope.row.isPayed==3" type="warning">微信</el-tag>
          <el-tag v-else-if="scope.row.isPayed==4" type="danger">社保卡</el-tag>
          <el-tag v-else-if="scope.row.isPayed==5" type="info">银联</el-tag>
          <el-tag v-else type="warning">其它</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="saleUser" header-align="center" align="center" label="营业员">
        <template slot-scope="scope">
          <el-input size="mini" v-model="scope.row.saleUser" v-if="showInput == `saleUser${scope.row.Id}`"
            @blur='blurInput(scope.row, "saleUser", scope.row.saleUser)' v-focus>
          </el-input>
          <span v-else class="active-input">{{scope.row.saleUser}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="buyerName" header-align="center" align="center" label="购买人">
        <template slot-scope="scope">
          <el-input size="mini" v-model="scope.row.buyerName" v-if="showInput == `buyerName${scope.row.Id}`"
            @blur='blurInput(scope.row, "buyerName", scope.row.buyerName)' v-focus>
          </el-input>
          <span v-else class="active-input">{{scope.row.buyerName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="buyerCardId" header-align="center" align="center" label="购买人身份证" width="140" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input size="mini" v-model="scope.row.buyerCardId" v-if="showInput == `buyerCardId${scope.row.Id}`"
            @blur='blurInput(scope.row, "buyerCardId", scope.row.buyerCardId)' v-focus>
          </el-input>
          <span v-else class="active-input">{{scope.row.buyerCardId}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="buyerMobile" header-align="center" align="center" label="购买人手机" width="140" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input size="mini" v-model="scope.row.buyerMobile" v-if="showInput == `buyerMobile${scope.row.Id}`"
            @blur='blurInput(scope.row, "buyerMobile", scope.row.buyerMobile)' v-focus>
          </el-input>
          <span v-else class="active-input">{{scope.row.buyerMobile}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="singleFee" header-align="center" align="center" label="单张金额">
      </el-table-column>
      <el-table-column prop="backType" header-align="center" align="center" label="退货状态">
       <template slot-scope="scope">
         <el-tag v-if="scope.row.backType==1" type="danger">部分退货</el-tag>
         <el-tag v-else-if="scope.row.backType==3" type="warning">完全退货</el-tag>
         <el-tag v-else type="warning">无退货</el-tag>
       </template>
      </el-table-column>
      <el-table-column prop="orderSource" header-align="center" align="center" label="订单来源">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderSource==1" type="primary">POS</el-tag>
          <el-tag v-else type="success">小程序</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isOnlinePay" header-align="center" align="center" label="线上支付">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isOnlinePay==1" type="primary">线上</el-tag>
          <el-tag v-else type="success">线下</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="storeName" header-align="center" align="center" label="门店名称">
      </el-table-column>
      <el-table-column prop="storeCode" header-align="center" align="center" label="门店编码">
      </el-table-column>
      <el-table-column prop="updateTime" header-align="center" align="center" label="修改时间">
      </el-table-column>
      <el-table-column prop="updateUsername" header-align="center" align="center" label="修改人">
      </el-table-column>
      <el-table-column prop="remark" header-align="center" align="center" label="备注">
        <template slot-scope="scope">
          <span v-html="scope.row.remark"></span>
        </template>
      </el-table-column>
    </el-table>

3、子表单

 <el-table :data="itemDataList" size="mini" v-loading="dataListLoading" @selection-change="selectionChangeHandle"
      style="width: 100%;" @cell-click="tableDbEdit" @cell-dblclick="tableDbEdit" class="item-table" height="250"
      :header-cell-style="{ background: '#fcfcfc', color: '#606266', height:'36px'}">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="inboundNo" header-align="center" align="center" label="入库单编号" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="productCode" header-align="center" align="center" label="产品编号">
      </el-table-column>
      <el-table-column prop="isDrugPiece" header-align="center" align="center" label="中药饮片">
      </el-table-column>
      <el-table-column prop="gspType" header-align="center" align="center" label="GSP类型">
        <template slot-scope="scope">
          <el-input size="mini" v-model="scope.row.gspType" v-if="showInput == `gspType${scope.row.Id}`"
            @blur='blurInput(scope.row, "gspType", scope.row.gspType)' v-focus>
          </el-input>
          <span v-else class="active-input">{{scope.row.gspType}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="pinyin" header-align="center" align="center" label="拼音">
      </el-table-column>
      <el-table-column prop="barCode" header-align="center" align="center" label="条形码">
      </el-table-column>
      <el-table-column prop="productName" header-align="center" align="center" label="产品名称" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="genericName" header-align="center" align="center" label="通用名称" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="producingArea" header-align="center" align="center" label="产地" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="standard" header-align="center" align="center" label="规格" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="unit" header-align="center" align="center" label="单位">
      </el-table-column>
      <el-table-column prop="approvalNo" header-align="center" align="center" label="批号">
      </el-table-column>
      <el-table-column prop="produceFactory" header-align="center" align="center" label="生产单位" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="dosageForm" header-align="center" align="center" label="剂型" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="expiryDate" header-align="center" align="center" label="有效期" width="110" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="produceDate" header-align="center" align="center" label="生产日期" width="110" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="batchNo" header-align="center" align="center" label="批号" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="lotNo" header-align="center" align="center" label="批次号" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="isRxDrug" header-align="center" align="center" label="是否处方">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isRxDrug==1" type="primary">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isEphedrine" header-align="center" align="center" label="含麻黄碱">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isEphedrine==1" type="primary">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isGmp" header-align="center" align="center" label="是否GMP">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isGmp==1" type="primary">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isSplit" header-align="center" align="center" label="是否拆零药" width="110" >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isSplit==1" type="primary">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isYiBao" header-align="center" align="center" label="是否医保">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isYiBao==1" type="primary">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="stockNum" header-align="center" align="center" label="库存">
      </el-table-column>
      <el-table-column prop="saleNum" header-align="center" align="center" label="销售数量">
      </el-table-column>
      <el-table-column prop="costPrice" header-align="center" align="center" label="成本价">
      </el-table-column>
      <el-table-column prop="costFee" header-align="center" align="center" label="成本金额">
      </el-table-column>
      <el-table-column prop="originalPrice" header-align="center" align="center"label="原价">
      </el-table-column>
      <el-table-column prop="originalFee" header-align="center" align="center" label="原价金额">
      </el-table-column>
      <el-table-column prop="salePrice" header-align="center" align="center" label="出售价">
      </el-table-column>
      <el-table-column prop="saleFee" header-align="center" align="center" label="出售金额">
      </el-table-column>
      <el-table-column prop="retailPrice" header-align="center" align="center" label="指导价">
      </el-table-column>
      <el-table-column prop="retailFee" header-align="center" align="center" label="指导金额">
      </el-table-column>
      <el-table-column prop="tradePrice" header-align="center" align="center" label="批发价">
      </el-table-column>
      <el-table-column prop="tradeFee" header-align="center" align="center" label="批发额">
      </el-table-column>
      <el-table-column prop="memberPrice" header-align="center" align="center" label="会员价">
      </el-table-column>
      <el-table-column prop="memberFee" header-align="center" align="center" label="会员金额">
      </el-table-column>
      <el-table-column prop="discount" header-align="center" align="center" label="折扣">
      </el-table-column>
      <el-table-column prop="discountFee" header-align="center" align="center" label="折扣金额">
      </el-table-column>
      <el-table-column prop="isOnlinePay" header-align="center" align="center" label="线上支付">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isOnlinePay==1" type="primary">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="saleType" header-align="center" align="center" label="订单类型">
      </el-table-column>
      <el-table-column prop="hasPromotion" header-align="center" align="center" label="是否促销">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.hasPromotion==1" type="primary">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="promotionReduceFee" header-align="center" align="center" label="促销减少额" width="120">
      </el-table-column>
      <el-table-column prop="promotionName" header-align="center" align="center" label="促销名称">
      </el-table-column>
      <el-table-column prop="promotionGiveNum" header-align="center" align="center" label="促销赠送数" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="promotionGiveFee" header-align="center" align="center" label="赠品总成本" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="promotionGiveProductNames" header-align="center" align="center" label="促销赠品名称" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="isPausePromotion" header-align="center" align="center" label="暂停促销">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isPausePromotion==1" type="primary">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="saleUser" header-align="center" align="center" label="营业员">
      </el-table-column>
      <el-table-column prop="isGiveProduct" header-align="center" align="center" label="是否赠品">
      </el-table-column>
      <el-table-column prop="giveProdcutParentCode" header-align="center" align="center" label="赠品对应产品" width="130" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="isCommission" header-align="center" align="center" label="是否提成">
      </el-table-column>
      <el-table-column prop="commissionRadio" header-align="center" align="center" label="提成比例">
      </el-table-column>
      <el-table-column prop="commissionFee" header-align="center" align="center" label="提成金额">
      </el-table-column>
      <el-table-column prop="couponInfo" header-align="center" align="center" label="优惠券">
      </el-table-column>
      <el-table-column prop="isReward" header-align="center" align="center" label="是否奖励">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isReward==1" type="primary">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="rewardState" header-align="center" align="center" label="奖励发放状态" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.rewardState==1" type="primary">已发放</el-tag>
          <el-tag v-else type="info">未发放</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="rewardFee" header-align="center" align="center" label="奖励金额">
      </el-table-column>
      <el-table-column prop="rewardDate" header-align="center" align="center" label="奖励发放时间" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="updateTime" header-align="center" align="center" label="修改时间" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="updateUsername" header-align="center" align="center" label="修改人">
      </el-table-column>
      <el-table-column prop="remark" header-align="center" align="center" label="备注">
        <template slot-scope="scope">
          <span v-html="scope.row.remark"></span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

4、JS模块定义data数据

data() {
      return {
        dataForm: {
          queryDates:[], //保存日期信息
          key: null, //主表搜索
          queryField: null, //查询字段
          itemKey: null, //明细查询内容
          queryItemField: null, //明细查询字段
          payType: null, //支付方式 类型
          saleUserId: null,
          saleUser: null, //营业员
          selectField: null, //选择查询字段
          selectValue: null, //选择查询值
          priceField: null, //价格自段
          priceFormula: null, //运算符号
          priceValue: null, //价格值
        },
        users: [], //保存用户信息
        selectFields: [], 
        priceFields: [],
        priceFormulas: [],
        units: [],        
        queryFields: [],
        queryItemFields: [],
        dataList: [], //主表数据
        itemDataList: [], //字表数据
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false       
      }
    },

5、JS模块初始化data信息

activated() {
      this.getDataList()
      this.initQueryParams()
    },
    methods: {
      // 获取数据列表
      async getDataList() {
        this.dataListLoading = true
        let newDataForm = _.cloneDeep(this.dataForm)
        let queryDates = newDataForm.queryDates || [];
        newDataForm.queryDates = queryDates.join(",")
        const res = await this.$http({
          url: `/sale/saleorder/page`,
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'dataForm': newDataForm
          })
        })
        let data = res.data
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
          this.dataList.forEach(item => {
            item.status = item.status == 1 ? true : false
          })
          if (this.dataList.length > 0) {
            this.getItemDataList(this.dataList[0].saleId)
          }else{
            this.itemDataList = []
          }
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      },
      async getItemDataList(saleId) {
        const res = await this.$http({
          url: `/sale/saleorderdetail/listByOrderId`,
          method: 'get',
          params: this.$http.adornParams({
            saleId
          })
        })
        let data = res.data
        if (data && data.code === 0) {
          this.itemDataList = data.list
        } else {
          this.itemDataList = []
        }
      },
       // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      resetForm() {
        this.$nextTick(() => {
          this.dataForm = this.$options.data().dataForm
          this.getDataList()
        })
      },
      async getUsers() {
        const res = await this.$http({
          url: `/sys/user/listUsers`,
          method: 'get',
          params: this.$http.adornParams()
        })
        let data = res.data
        if (data && data.code === 0) {
          this.users = data.data
        }
      },
      initQueryParams() {
        let selectFields = [{
          value: 'sale_type',
          label: '是否退货'
        }, {
          value: 'is_pending',
          label: '是否挂单'
        }, {
          value: 'is_payed',
          label: '是否支付'
        }, {
          value: 'is_online_pay',
          label: '是否线上支付'
        }];

        let priceFields = [{
          value: 'total_sale_num',
          label: '销售总数量'
        }, {
          value: 'total_prediscount_fee',
          label: '折前总金额'
        }, {
          value: 'total_member_fee',
          label: '会员价总金额'
        }, {
          value: 'fund_pay_sumamt',
          label: '医保基金'
        },{
          value: 'toal_other_fee',
          label: '其它费用总额'
        }, {
          value: 'payment_fee',
          label: '实付金额'
        }, {
          value: 'receive_fee',
          label: '实收金额'
        }, {
          value: 'give_change_fee',
          label: '找零金额'
        }, {
          value: 'total_reduce_fee',
          label: '优惠金额'
        }, {
          value: 'total_give_num',
          label: '赠送数量'
        }];

        let priceFormulas = [{
          value: 'GE',
          label: '大于等于'
        }, {
          value: 'EQ',
          label: '等于'
        }, {
          value: 'GT',
          label: '大于'
        }, {
          value: 'LE',
          label: '小于等于'
        }, {
          value: 'LT',
          label: '小于'
        }, {
          value: 'NE',
          label: '不等于'
        }, ]

        let queryFields = [{
          value: 'sale_no',
          label: '销售编码'
        }, {
          value: 'member_mame',
          label: '会员名称'
        }, {
          value: 'member_no',
          label: '会员编号'
        }, {
          value: 'sale_user',
          label: '营业员名称'
        }, {
          value: 'audit_username',
          label: '审核人'
        }]

        let queryItemFields = [{
          value: 'product_code',
          label: '编码'
        }, {
          value: 'bar_code',
          label: '条形码'
        }, {
          value: 'product_name',
          label: '产品名称'
        }, {
          label: '通用名'
        }, {
          value: 'producing_area',
          label: '产地'
        }, {
          value: 'produce_factory',
          label: '厂家'
        }, {
          value: 'dosage_form',
          label: '剂型'
        }, {
          value: 'standard',
          label: '规格'
        }, {
          value: 'approval_no',
          label: '批准文号'
        }]
        this.selectFields = selectFields;
        this.priceFields = priceFields;
        this.priceFormulas = priceFormulas;
        this.queryFields = queryFields;
        this.queryItemFields = queryItemFields;
      }
    },

6、后台查询实现

6.1、控制层
 @ApiOperation("获取分页列表")
    @GetMapping("/page")
    @RequiresPermissions("sale:saleorder:list")
    public R page(@RequestParam Map<String, Object> params) {
        PageUtils page = saleOrderService.queryPage(params);
        return R.ok().put("page", page);
    }
6.2、实现层
@Override
    public PageUtils queryPage(Map<String, Object> params) {

        QueryWrapper<SaleOrderEntity> wrapper = new QueryWrapper<>();
        List<Long> ids = new ArrayList<>();
        boolean isItemQuery = false;

        Object dataForm = params.get("dataForm");
        if (dataForm != null) {
            SaleQueryVo queryVo = JSON.parseObject(dataForm + "", SaleQueryVo.class);
            String queryDates = queryVo.getQueryDates();
            String itemKey = queryVo.getItemKey();
            String queryItemField = queryVo.getQueryItemField();

            if (queryVo != null) {
                //子查询，获取明细ID
                if (MyStrUtil.isNotEmpty(itemKey) && MyStrUtil.isNotEmpty(queryItemField)) {
                    isItemQuery = true;
                    QueryWrapper<SaleOrderDetailEntity> itemWrapper = new QueryWrapper<>();
                    itemWrapper.like(queryItemField, itemKey);
                    List<SaleOrderDetailEntity> list = saleOrderDetailService.list(itemWrapper);
                    if (CollectionUtils.isNotEmpty(list)) {
                        for (SaleOrderDetailEntity detailEntity : list) {
                            ids.add(detailEntity.getSaleId());
                        }
                    }
                }
                if (MyStrUtil.isNotEmpty(queryDates)) {
                    String[] queryDateArr = queryDates.split(",");
                    String startDate = queryDateArr[0];
                    String endDate = queryDateArr[1];
                    wrapper.ge(MyStrUtil.isNotEmpty(startDate), "sale_date", startDate);
                    wrapper.le(MyStrUtil.isNotEmpty(endDate), "sale_date", endDate);
                }
                WrapperUtil.initSaleQueryWrapper(params, wrapper);
            }
        }

        IPage<SaleOrderEntity> page = new Query<SaleOrderEntity>().getPage(params);
        if (isItemQuery) {
            if (CollectionUtils.isNotEmpty(ids)) {
                page = baseMapper.listPage(page, wrapper, ids);
            }
        } else {
            page = baseMapper.selectPage(page, wrapper);
        }
        return new PageUtils(page);
    }
6.3、封装查询参数实体类
@Data
public class SaleQueryVo {

    @ApiModelProperty(value = "查询日期")
    private String queryDates;

    @ApiModelProperty(value = "审批状态")
    private Integer auditStatus;

    @ApiModelProperty(value = "支付类型")
    private Integer payType;

    @ApiModelProperty(value = "营业员id")
    private String saleUserId;

    @ApiModelProperty(value = "营业员名称")
    private String saleUser;

    @ApiModelProperty(value = "查询关键字")
    private String key;

    @ApiModelProperty(value = "是否判断字段")
    private String selectField;

    @ApiModelProperty(value = "是否判断值")
    private Integer selectValue;

    @ApiModelProperty(value = "数量价格字段")
    private String priceField;

    @ApiModelProperty(value = "数量价格符号")
    private String priceFormula;

    @ApiModelProperty(value = "数量价格值")
    private BigDecimal priceValue;

    @ApiModelProperty(value = "查询字段")
    private String queryField;

    @ApiModelProperty(value = "明细查询关键字")
    private String itemKey;

    @ApiModelProperty(value = "明细查询字段")
    private String queryItemField;
}
6.4、数据接口Dao层
@Mapper
public interface SaleOrderDao extends BaseMapper<SaleOrderEntity> {

    IPage<SaleOrderEntity> listPage(@Param("page") IPage<SaleOrderEntity> page, @Param(Constants.WRAPPER) QueryWrapper<SaleOrderEntity> wrapper, @Param("ids") List<Long> ids);
}
6.5、数据实现层
 <select id="listPage" resultType="com.koo.modules.sale.entity.SaleOrderEntity">
        SELECT * FROM  sale_order
        <if test="ew != null and ew.customSqlSegment != null and ew.customSqlSegment != ''">
            ${ew.customSqlSegment}
            <if test="ids !=null and ids.size()>0">
                AND sale_id IN
                <foreach item="item" index="index" collection="ids" open="("  close=")" separator=",">
                    #{item}
                </foreach>
            </if>
        </if>
        <if test="ew == null || ew.customSqlSegment == null || ew.customSqlSegment == ''">
            <if test="ids !=null and ids.size()>0">
                WHERE sale_id IN
                <foreach item="item" index="index" collection="ids" open="("  close=")" separator=",">
                    #{item}
                </foreach>
            </if>
        </if>
    </select>

7、根据主单id查询明细

@ApiOperation("获取全部列表")
@RequestMapping("/listByOrderId")
@RequiresPermissions("sale:saleorderdetail:list")
public R listByOrderId(String saleId){
    List<SaleOrderDetailEntity> list = saleOrderDetailService.listByOrderId(saleId);
    return R.ok().put("list", list);
}

  @Override
    public List<SaleOrderDetailEntity> listByOrderId(String saleId) {
        LambdaQueryWrapper<SaleOrderDetailEntity> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(MyStrUtil.isNotEmpty(saleId), SaleOrderDetailEntity::getSaleId, saleId);
        return this.list(wrapper);
    }
lovoo
关注
专栏目录
vue+elementui实现多条件搜索
m0_46309483的博客
07-30 7001
1.template <div class="success"> <div> <el-input v-model="forma.id" placeholder="请输入搜索id"> </el-input> <!-- <input type="text" placeholder="请输入您需要查询的内容" v-model="forma.id"> --> <el-input v-model
vue开发+ 纯前端实现多条件表格查询
m0_48940868的博客
04-15 4884
前言 【之前写过 单条件查询的功能，这次算是把之前的文章补足，让这个功能更加完善一点。】 一、多条件查询是什么？ 【相比于单条件而言，多条件查询更加科学，即：多个表单控件（input、select等）发生数据交互的时候，下面的tableData数据在展示的时候，会更加的 具体化、综合化】 再也不会像之前一样，稚嫩、局限 二、相关步骤： 1.所有表单控件数据v-model一下 <el-input size="mini" v-model="param_search.id" plac
vue2.0多条件搜索组件使用详解
08-30
主要为大家详细介绍了vue2.0多条件搜索组件的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue2 基本增删改查界面
最新发布
山顶听风的博客
09-12 483
本文是前端一个基本的增删改查的例子，供自己梳理思路，不涉及复杂业务操作。
vue+element-ui的列表查询条件/筛选条件太多以下拉选择方式动态添加条件（支持全选、反选、清空）
wocwin的博客
07-30 927
vue+element-ui的列表查询条件/筛选条件太多以下拉选择方式动态添加条件（支持全选、反选、清空）
vue多条件查询
qq_41186500的博客
08-23 9576
<template> <div class="app-container"> <div class="filter-container" style="display:flex;justify-content:space-between;align-items:center"> <div> <!-- 部...
vue3 实现多条件搜索
一个努力不被优化的程序员
11-10 1592
在现代的前端开发中，Vue.js 是一个非常流行的 JavaScript 框架，用于构建用户界面。Vue 提供了一种简洁的方式来构建交互式和动态的网页应用。在这个例子中，我们将探讨如何使用 Vue 3 和 Composition API 来创建一个简单的搜索功能，允许用户根据不同的条件过滤和显示数据。
基于Vue实现的多条件筛选功能(类似京东和淘宝功能)
05-29
运用Vue实现的多条件筛选功能(类似京东和淘宝功能)，代码实现简单、容易理解
vue封装——使用js高阶函数实现多条件搜索功能
杜永康的博客
06-27 3312
🙂博主：爱学习的Akali king。之前出过一个react写法的前端搜索（[react写法——使用js高阶函数实现多条件搜索功能](https://blog.csdn.net/dyk11111/article/details/131256962)） 今天我们再研究一下vue中怎么实现。 之前用react写法实现前端搜索功能时，我们是从思路出发的，并不局限于框架语言。所以我们用vue实现前端搜索，思路也是一样，还是这三步。不过我们要做一个新的东西，就是封装。 因为我们将一个搜索功能写好后，这就相当于是
基于SpringBoot+Vue+ElementUI的人事管理系统
01-12
《构建基于SpringBoot+Vue+ElementUI的人事管理系统》 在现代企业信息化管理中，人事管理系统扮演着至关重要的角色，它能有效提升人力资源管理效率，规范工作流程，降低运营成本。本文将详细介绍如何利用SpringBoot...
vue实现多条件和模糊搜索功能
12-29
本文实例为大家分享了vue实现多条件和模糊搜索的具体代码，供大家参考，具体内容如下 html <div class=content> <div class=right> <select name=sex width='100' v-model=formData.sex> <option xss=removed>请选择</option> <option value=1>男</option> <option value=2>女</option> <option value=3>不是人</option> </select> <
VueQueryBuilder用于构建具有嵌套条件的复杂查询UI组件
08-09
Vue Query Builder 用于构建具有嵌套条件的复杂查询UI组件
毕业设计，Vue+elementUI+SpringBoot+Mybatis书影音社区.zip
08-05
MyBatis允许开发者直接编写SQL，提高了查询效率，并且支持动态SQL，适配各种复杂的数据库操作。 项目中的"Book-Movie-Music-Community-master"可能是指项目源代码的主分支或者根目录。在这个目录下，你可以找到项目...
VUE+elementUI+SpringBoot实现分页和搜索多条数据
qq_39396379的博客
11-29 1228
前端页面： 布局代码：template中的 <!-- 搜索选项 --> <el-col :span="7"> <div class="inputs"> <!-- 联系人 --> ...
elementUI+vue+mybatis-plus+springboot实现条件查询
qq_40222207的博客
04-06 2529
elementUI+vue+mybatis-plus+springboot实现条件查询功能需求前端部分后端部分测试部分 功能需求 根据选择的搜索条件不同，实现条件查询 基本效果如下图： 前端部分 参考elementUI官方组件库中的复合型输入框，实现基本的样式。 参考链接：input输入框 先上部分代码： vue部分： <el-input placeholder="请输入内容" v-mod...
Vue前端+ElementUI+SpringBoot后端动态显示管理员数据（ElementUI表格，Vue数据集成，Element表格的基本设置，新开服务器存图片，查询条件，分页）
qq_53677566的博客
01-12 1363
这里写目录标题Vue前端+ElementUI+SpringBoot后端动态显示管理员数据：ElementUI表格：Vue数据集成：前端管理员的头像显示：在ElementUI表格中的基本设置：（1）自定义模板（2）格式化数据：（3）表格中数据排序查询条件分页 Vue前端+ElementUI+SpringBoot后端动态显示管理员数据： ElementUI表格： 最后效果： Vue数据集成： 后端读取sql： 有几个相关知识点（在以下笔记中我会一一赘述）： **mybatis的嵌套查询（collecti
SpringBoot多条件搜索标准写法
江哈哈的博客
06-08 1515
自己在学习写项目过程中觉得有用的点，记录下来 其他组件就不多写了，主要逻辑是在业务层，下面是业务层（Service）中的代码 //==community是一个对象== @Override public Page<Community> search(Map searchMap) { //通用Mapper多条件搜索，标准写法 Example example = new Example(Community.class);//指定查询的表tb_communi.
SpringBoot + Vue + ElementUI 人力资源管理系统实现
资源摘要信息: "本毕业设计项目主要实现了基于SpringBoot + Vue + ElementUI 的人力资源管理系统。系统的设计与开发涉及到前后端分离的架构理念，结合了后端的SpringBoot框架、前端的Vue框架以及ElementUI组件库。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lovoo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值