代码编织梦想

开发原因:

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

页面展示效果图:

在这里插入图片描述

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);
    }
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lovoo/article/details/129661319

springboot + vue + elementUI项目实战——简洁清新的员工管理系统(一)-爱代码爱编程

springboot + vue + elementUI + mybatis + redis 清新的员工管理系统 前言   从这期,项目从需求分析开始,一步步实现一个老经典的清新的员工管理系统,适合有一定 ssm、springboot、mybatis、vue+elementUI 基础的训练项目,虽然没有很复杂的业务,但也要会这些技术栈的基

ElementUI+springboot 项目实战前后端分离(用户管理系统的开发)-爱代码爱编程

前端页面的设计 前端设计使用ElementUI进行编写, 首先使用vue-cli脚手架创建项目,导入elementui库,进行使用。进行设计主页安装axios,使用axios发送请求在这里整体的项目就简单的实现,前端代码也就不在此展示了,基本功能也就是实现一套增删改查等系列功能。看一下效果图: 在这里简单的对前端的设计做一下解释 最上面的导航使

Vue+Element UI+Spring Boot+MyBatis+MySQL实现动态多级菜单-爱代码爱编程

Vue+Spring Boot+MySQL实现动态多级菜单 通常在后台管理系统中,需要根据每个用户不同的权限来动态展示菜单;本文主要记录通过Vue+Element UI+Spring Boot+MyBatis+MySQL实现一个动态多级菜单的功能 开发环境 名称版本号JDK1.8.0_291IntelliJ IDEA2021.3.2WebStorm2

springboot+vue+elementui304springboot留守儿童爱心捐赠网站#毕业设计_凌晨两点半string的博客-爱代码爱编程

随着留守儿童爱心管理的不断发展,留守儿童爱心网站在现实生活中的使用和普及,留守儿童爱心管理成为近年内出现的一个热门话题,并且能够成为大众广为认可和接受的行为和选择。设计留守儿童爱心网站的目的就是借助计算机让复杂的管理操作变简单,变高效。 留守儿童爱心网站采用了B/S结构,JAVA作为开发语言,数据库采用了B/S结构,Mysql数据库进行开发。该系统包括前台

springboot+vue+elementui304springboot305springboot农机电招租赁预约平台#毕业设计_凌晨两点半string的博客-爱代码爱编程

随着农机电招行业的不断发展,农机电招在现实生活中的使用和普及,农机电招行业成为近年内出现的一个新行业,并且能够成为大群众广为认可和接受的行为和选择。设计农机电招平台的目的就是借助计算机让复杂的销售操作变简单,变高效。 农机电招平台采用了B/S结构,JAVA作为开发语言,数据库采用了B/S结构,Mysql数据库进行开发。该系统包括前台操作和后台管理两个部分,

springboot+nodejs+vue+elementui会议室考勤签到管理系统java_qq58850198的博客-爱代码爱编程

springboot是spring家族中的一个全新框架,用来简化spring程序的创建和开发过程。在以往我们通过SpringMVC+Spring+Mybatis框架进行开发的时候,我们需要配置web.xml,spring配置,mybatis配置,然后整合在一起,而springboot抛弃了繁琐的xml配置过程,采用大量默认的配置来简化我们的spring开发

java基于springboot+vue+elementui的在线房屋租赁系统 前后端分离_q_6310855的博客-爱代码爱编程

随着时代的发展,因为求学和工作等原因,很可能会到外地进行工作和学习。这个时候就需要找到一个居住的地方。如果直接购买新的房屋,一方面资金压力比较大。另一方面就是这些求学和工作可能是短期的,并没有长期。定居在某城市的意向。这个时

java基于ssm+vue+elementui的旅游线路分享管理系统_qq123311197的博客-爱代码爱编程

旅游景点路线网站管理系统,是基于java编程语言,ssm框架,mysql数据库制作的设计,本设计主要分为用户和管理员两个角色,用户的主要功能是注册登陆系统,查看旅游景点介绍,查看旅游路线介绍,查看新闻资讯和旅游资讯,收藏评价

计算机毕业设计springboot+vue+elementui高校学生实习管理管理系统_qq_1262330535的博客-爱代码爱编程

项目介绍 学生顶岗实习管理系统是学校管理学生实习的重要组成。它是针对目前学生实习工作信息的情况设计的,力求满足学生工作多方面的需要。该系统的设计要充分考虑到学生实习管理工作和手段。目前,在网上和各种出售的光盘中可以见到形形

基于springboot+mysql+vue+elementui+mybatis前后端分离面向小白管理系统搭建(五)---.xml配置方式动态实现数据增删查改-爱代码爱编程

小白做毕设---后台管理系统 写在前面的话:任务四 后端数据增删改查(注解方式)[https://blog.csdn.net/wdyan297/article/details/128720096?spm=1001.2

计算机毕业设计springboot+vue+elementui农机电招租赁预约平台-爱代码爱编程

项目介绍 随着农机电招行业的不断发展,农机电招在现实生活中的使用和普及,农机电招行业成为近年内出现的一个新行业,并且能够成为大群众广为认可和接受的行为和选择。设计农机电招平台的目的就是借助计算机让复杂的销售操作变简单,变高

python+vue+elementui企业项目合同管理系统java_springboot_vue管理系统签约系统-爱代码爱编程

在健达企业项目管理系统中,先收集相关管理系统的需求,整理需要设计开发的功能模块。总体而言,本健达企业项目管理系统需要包括三种用户,管理员、项目管理员和普通员工。不同的用户权限不同,用户都是需要通过登录后进行操作。  管理员登录后修改个人的密码。用户管理中,对公司内的用户进行管理,包括项目管理员和普通员工,管理健达企业公告信息。  项目管理员登录系统后,

springboot+vue+elementui的家政服务管理系统javaweb-爱代码爱编程

家政服务管理平台的主要包括了管理员、用户和服务人员三个角色。 a)用户进入系统可以实现首页、服务信息、公告信息、留言反馈、个人中心、后台管理等; b)管理员的主要功能包括首页、个人中心、用户管理、服务人员管理、服务信息管理、服务类型管理、服务预约管理、服务取消管理、服务分配管理、服务进度管理、评价信息管理、留言反馈、系统管理等; c)服务人员功能包括;首页

java基于springboot+vue+elementui城乡精准扶贫信息管理系统-爱代码爱编程

系统设计的主要意义在于,一方面,对于网站来讲,系统上线后可以带来很大的便利性,精准扶贫网站管理属于非常细致的管理模式,要求数据量大,计算机管理可以提高精确性,更为便利的就是信息的查询,大大的提高了工作效率,改善了管理质量;另

【6】【vue3+elementplus+springboot+mybatisplus】 管理系统 【前后端实践】-爱代码爱编程

第一部分: elementplus官网:一个 Vue 3 UI 框架 | Element Plus (element-plus.org) 1、安装elementplus npm install element-plus --save  查看package.json中存在依赖表示成功安装 2、引入elementplus impor